Mobile/UI/Designs/TouchScreen/Proposal6

< Mobile‎ | UI‎ | Designs/TouchScreen
Revision as of 18:20, 26 March 2008 by Madhava (talk | contribs)

Scope

The following is a draft proposal for a Fennec m1 user-interface. The diagrams are wireframes, and, as such, are meant to describe the interaction model and page layout rather than pixel-specific sizes or final look (icons or colours).

This is all designed with the n810 in mind -- the device has a touchscreen but also a hardware keyboard.

Overview

m1_overview.png

a. Back and Forward buttons
b. Location bar with favicon. In the future this can accomodate Awesomebar : functionality. Search can also be blended in here -- more on this below.
c. Bookmarking button, as in Firefox 3
d. Button to bring up the list of bookmarks
e. Scroll bars -- they're translucent, and show up only when the page is actually being scrolled

Toolbar States

With only one toolbar area on the screen, making the most of that screen real estate is key. One way to compress controls while still avoiding confusing modes is to overlay items that are mutually exclusive (more on this below). Another is to blend certain related activities -- such as URL entry and search term entry -- into a single UI element.


m1_toolbar_states.png



Bookmark List

To come.


Compacted

m1_compact.png