Mobile/UI/Designs/TouchScreen: Difference between revisions
| Line 14: | Line 14: | ||
=== Main Screen === | === Main Screen === | ||
[[Image:MobileFF-TouchUI-Main.png|right]] The main browser screen is shown at right. | [[Image:MobileFF-TouchUI-Main.png|frame|right|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. | 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. | ||
| Line 26: | Line 26: | ||
=== Maximized Main Screen === | === Maximized Main Screen === | ||
[[Image:MobileFF-TouchUI-Main-max.png|right]]The URL toolbar may be hidden by tapping on the title bar. This increases the display area for the web page. | [[Image:MobileFF-TouchUI-Main-max.png|frame|right|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 will re-display the URL bar. | Tapping the title bar again will re-display the URL bar. | ||
=== URL Entry Screen === | |||
[[Image:MobileFF-TouchUI-Url-entry.png|frame|right|URL entry screen]]Tapping the URL textfield opens a new screen as shown to the right. | |||
Revision as of 16:51, 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 will re-display the URL bar.
URL Entry Screen
Tapping the URL textfield opens a new screen as shown to the right.