93
edits
Mobile/User Experience: Difference between revisions
Jump to navigation
Jump to search
→Touch Screen UI
No edit summary |
|||
| Line 5: | Line 5: | ||
===Touch Screen UI=== | ===Touch Screen UI=== | ||
=====Design Guidelines===== | |||
To help define an easy-to-use and convenient UI it is useful to identify the things that people | |||
do with browsers. Most activities fall under three categories: | |||
* Viewing and reading web pages | |||
* Navigating across web pages | |||
* Interacting with web applications | |||
{| cellpadding="4" border="1" style="border-collapse: collapse;" | |||
! style="width:33%" | Viewing | |||
! style="width:33%" | Navigating | |||
! style="width:33%" | Interacting | |||
|- valign="top" cellpadding="0" | |||
| | |||
* Zoom In/Out | |||
* Pan/Scroll | |||
* Select text (to copy or web-search) | |||
* Search text on a page | |||
* Bookmark a page | |||
* Print a page | |||
| | |||
* Launch the home page | |||
* Input and launch a URL | |||
* Click on a hyperlink | |||
* Perform a web search | |||
* Stop | |||
* Reload | |||
* Go Back | |||
* Go Forward | |||
* Choose a page from history | |||
* Open a bookmark | |||
* Open a live bookmark | |||
* Open a new tab | |||
* Close a new tab | |||
* Select a different tab | |||
| | |||
* Fill a form | |||
** input text | |||
** cut/copy/paste text | |||
** select a radio button | |||
** select checkboxes | |||
** select from a drop-down list | |||
* Submit a form | |||
* Reset a form | |||
* Interact with a web app. | |||
** Click a button | |||
** Hover over an element | |||
** Click-n-drag | |||
** Enter a keyboard shortcut | |||
|- | |||
|} | |||
Other activities include interacting with the browser application itself: | |||
* Managing bookmarks | |||
* Setting preferences | |||
* Clearing browsing history | |||
* Installing extensions | |||
=====Touch UI goals===== | |||
* 1-2 taps for most frequent activities | |||
* Finger taps -- no stylus required | |||
* Familiar (to desktop users) where possible | |||
* Intuitive | |||
What are the most frequent activities? Here's an initial cut from the table above (items in bold are most frequent): | |||
{| cellpadding="4" border="1" style="border-collapse: collapse;" | |||
! style="width:33%" | Viewing | |||
! style="width:33%" | Navigating | |||
! style="width:33%" | Interacting | |||
|- valign="top" cellpadding="0" | |||
| | |||
* '''Zoom In/Out''' | |||
* '''Pan/Scroll''' | |||
* Select text (to copy or web-search) | |||
* Search text on a page | |||
* '''Bookmark a page''' | |||
* Print a page | |||
| | |||
* '''Launch the home page''' | |||
* '''Input and launch a URL''' | |||
* '''Click on a hyperlink''' | |||
* '''Perform a web search''' | |||
* '''Stop''' | |||
* '''Reload''' | |||
* '''Go Back''' | |||
* '''Go Forward''' | |||
* Choose a page from history | |||
* '''Open a bookmark''' | |||
* Open a live bookmark | |||
* '''Open a new tab''' | |||
* '''Close a new tab''' | |||
* '''Select a different tab''' | |||
| | |||
* Fill a form | |||
** '''input text''' | |||
** cut/copy/paste text | |||
** select a radio button | |||
** '''select checkboxes''' | |||
** '''select from a drop-down list''' | |||
* '''Submit a form''' | |||
* Reset a form | |||
* Interact with a web app | |||
** '''Click a button''' | |||
** Hover over an element | |||
** '''Click-n-drag''' | |||
** Enter a keyboard shortcut | |||
|- | |||
|} | |||
===Non-touch screen UI=== | ===Non-touch screen UI=== | ||