Mobile/UI/Designs/TouchScreen: Difference between revisions
No edit summary |
|||
| Line 36: | Line 36: | ||
The following blank lines are required!!! | The following blank lines are required!!! | ||
--> | --> | ||
| Line 59: | Line 61: | ||
=== URL Entry Screen === | === URL Entry Screen === | ||
[[Image:MobileFF-TouchUI-Url-entry.png|frame|URL | [[Image:MobileFF-TouchUI-Url-entry.png|frame|URL Entry Screen]] | ||
Tapping the URL textfield opens a new screen as shown to the right. This screen displays a textbox at the top that displays the currently entered text. The user may enter a search term or a URL. | Tapping the URL textfield opens a new screen as shown to the right. This screen displays a textbox at the top that displays the currently entered text. The user may enter a search term or a URL. | ||
| Line 68: | Line 70: | ||
The toolbar at the bottom has a new set of buttons. The "cancel" button returns to the main screen, the "go" button launches the URL entered, and the "search" button invokes the user-defined web search engine with the text entered as the search term(s). | The toolbar at the bottom has a new set of buttons. The "cancel" button returns to the main screen, the "go" button launches the URL entered, and the "search" button invokes the user-defined web search engine with the text entered as the search term(s). | ||
=== Page Load Screen === | |||
[[Image:MobileFF-TouchUI-Loading.png|frame|Page Load Screen]] | |||
When the user clicks "Go" or "Search" in the URL entry screen, the browser displays the page loading screen. | |||
This screen is essentially identical to the Main screen, except that the "reload" button is now a "Stop" button, and allows the user to cancel the request. | |||
Page download progress is displayed in the URL box. | |||
=== History on Main Screen === | |||
[[Image:MobileFF-TouchUI-Main-history.png|frame|History on Main Screen]] | |||
To allow easy access to browsing history, the URL box includes a history chevron at the right. | |||
Tapping the history chevron displays the most recently viewed pages. | |||
Revision as of 17:37, 22 January 2008
Work in progress... Please return in 2 hours.
Touch Screen UI Design
The Touch Screen UI design has the following goals:
- 1-2 taps for most frequent activities
- Finger taps -- no stylus required
- Familiar (to desktop users) where possible
- Intuitive
The design proposal described below attempts to meet all these goals.
Main Screen
The main browser screen is shown at right.
The toolbar at the bottom contains the most frequently used functions - back/forward, zoom in/out and tabs. This toolbar cannot be hidden, and is generally present in all browser screens. The buttons may sometimes change depending on the screen.
Web page content is displayed in the center panel, and can be scrolled/panned directly by dragging. Scrollbars are normally not shown to maximize screen real estate, but can be shown during scrolling to provide a visual cue of the overall page size.
At the top of the screen is a title bar with a hideable toolbar beneath. This toolbar has a reload button, a URL bar, and a bookmark button.
This UI layout enables quick 1-touch access to the most frequent browser activities.
Maximized Main Screen
The URL toolbar may be hidden by tapping on the title bar. This increases the display area for the web page.
Tapping the title bar again re-displays the URL bar.
URL Entry Screen
Tapping the URL textfield opens a new screen as shown to the right. This screen displays a textbox at the top that displays the currently entered text. The user may enter a search term or a URL.
Below the URL/search-term text field is a panel that display hints from browsing and search history and bookmarks that match the entered text. The number of hints shown depends on the display height but in any case the height of each entry field will be sufficient to allow easy touch access. Note: Clicking on any hint will immediately launch that URL.
The system provided software keyboard is displayed below the hints panel. This is optional and is displayed only on touch screen devices that do not have an integrated QWERTY keyboard.
The toolbar at the bottom has a new set of buttons. The "cancel" button returns to the main screen, the "go" button launches the URL entered, and the "search" button invokes the user-defined web search engine with the text entered as the search term(s).
Page Load Screen
When the user clicks "Go" or "Search" in the URL entry screen, the browser displays the page loading screen.
This screen is essentially identical to the Main screen, except that the "reload" button is now a "Stop" button, and allows the user to cancel the request.
Page download progress is displayed in the URL box.
History on Main Screen
To allow easy access to browsing history, the URL box includes a history chevron at the right.
Tapping the history chevron displays the most recently viewed pages.