577
edits
Mobile/UI/Designs/TouchScreen/TouchBar: Difference between revisions
Mobile/UI/Designs/TouchScreen/TouchBar (view source)
Revision as of 11:47, 29 April 2008
, 29 April 2008→History and Tabs
| Line 40: | Line 40: | ||
== History and Tabs == | == History and Tabs == | ||
For both the history and tabs buttons, clicking on them causes a zoom-out effect to show their respective screens. The zoom-out is important because it maintains that sense of place and physicality. | |||
=== History === | |||
[[Image:Touchbar History.jpg]] | |||
The history is a left-right draggable, visual timeline of history. Left is back in time, right is forwards in time. Clicking on an thumbnail zooms into that page. Clicking on an thumbnail back in your history and navigating to a new page causes that page to be appended to the end of the history. That is, renewing navigation from a site in your history is not destructive to your history. Below the current tab's history is the history of all site's you've opened not in that tab. | |||
=== Tabs === | |||
[[Image:Touchbar Tabs.jpg]] | |||
It is important that tabs are not done in a rigid grid, so as to maximize number of spatial cues/landmarks. These spatial cues should be created by the user, so that all "tabs" are draggable in this space. Clicking on one zooms back into that tab. | |||
The steps for switching from one tab to another are as follows: | |||
* Place finger in corner and move finger to the tab button while maintaining contact with the screen. | |||
* Releasing the finger causes a fast zoom-out animation, showing all open tabs. | |||
* Click the tab you desire, and a fast zoom-in animation brings you where you want to be. | |||
The size of the tabs scale to fit the space. Few tabs means that they will be large, while many tabs means that they will be small. Tabs are not allowed to overlap. | |||
TODO: How to close a tab? | |||