Mobile/UI/Designs/TouchScreen
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).