Mobile/UI/Designs/TouchScreen/workingUI/sidecontrols

From MozillaWiki
Jump to: navigation, search

Basic case

The user drags the page past it's edge. At a certain point, the control strip locks into place; if the page is released before this point, it elastically snaps back to the page borders.

Precise control layout TBD. As in Aza's prototype, the titlebar appears/slides into place when the control strip slides in. The title bar also exists, permanently at the top of the page.

0.png

Zooming design

In the zooming approach to working with tabs, the user would zoom out from the current document to see the full field of tabs (thumbnails). This can be triggered by a button tab (shown here) or by dragging the page further beyond its edges (http://azarask.in/blog/post/firefox-mobile-concept-video/), or a combination of the two.

1.png

Alternate 1 - tabs further off to the side

A concern raised about the zooming design is that the time consumed by the animation could, eventually, become frustrating for a user. If, especially on a mobile device, the activity most performed with tabs is switching between a small set rather than managing a large set, the value of a full spatial space may not outweigh this consumed time.

An alternate approach would be to have a list or grid of tab thumbnails placed slightly further off to the side of the current page than the control strip. This further space would snap into place in the same manner as the control strip.

2.png

Alternate 2

In either of these cases, dragging past the control strip causes a full tab screen to slide and snap into place. Also in either case, tapping on a tab thumbnail would zoom in so that the document then occupies the full viewport.

2a - vertical scroll list

3.png

2b - horizontal scroll list

4.png