Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Awesomescreen content structure revision

From MozillaWiki
Jump to: navigation, search


In addition to list of the most frequently visited pages (C), the Awesomescreen could provide access to sub-views of certain type of content (A) such as (Browsing history), Bookmarks, Tags and Tabs from other computers. These options should be the first items in the content list and they should be scrolled away (upwards) from the view when you started to enter/edit the address/search phrase in the address field. If the you edited the string in the address field, you could get the options for subviews (e.g. Bookmarks) by panning the list downwards.

Also, if you had previously opened some content from a sub-view more than two step away from the Awesomescreen, the list could contain a Shortcut (B) to that content.

Awesomescreen content structure main view.png

The sub-view of certain content type should display the View title (A) (e.g. "Bookmarks", "History", Tabs from other computers" etc) in the top bar and list the content below it. The content list should have list headers (B) indicating the sorting order (e.g. A, B, C if content was sorted in alphabetical order), and content items (C). If the list contained (e.g. Bookmarks) folders, they would be sorted similarly to content items (e.g. Bookmarks).

Awesomescreen content structure sub-view.png

You could open the View menu containg sorting options and commands applying to all content of the view by tapping the View title (row). The option for Sorting would open a Single selection dialog for selecting the desired sorting order of the content. Item-specific commands should be available from the Context-sensitive menu you could invoke for each content item.

Awesomescreen content structure sub-view menu.png

The first list item of the content list would be the Search field with that you could start searching/filtering the content. By default the sub-views would be opened so that the Search field is hidden, but you could get it to the view by panning the content downwards. If you were in the middle or end of a long content list, you could get to the beginning of the list (starting with the search field) by 2-finger flick downwards.

Content search with Hardware keyboard:

Awesomescreen content structure sub-view search.png

Content search with Virtual keyboard:

Awesomescreen content structure sub-view search with virtual keyboard.png

Basic navigation between Awesomescreen and its sub-views

Awesomescreen content structure sub-view basic navigation.png

You could navigate into sub-views by tapping the items in the content list and get backwards to preceeding views with the Back button that should locate in the top right corner of the view.

Searching content in sub-views

If Hardware keyboard was available, you could start filtering the content by starting to type with the keyboard. In this case, the focus should be set to Search field and it should be scrolled into the view. The found matches would be displayed below the search field. To get all items back to the list, you should clear the search field.

Awesomescreen content structure sub-view searching with hwkb.png

If Virtual keyboard was available, you should first pan the Search field into the view and tap it to invoke the on-screen text-input methods. The rest of the flow would be similar to searching/filtering content with Hardware keyboard. Awesomescreen content structure sub-view searching with vkb.png

Use cases

Opening a Bookmark

The flow below describes navigation in the Bookmarks content structure (see red lines) and opening a bookmark (see green lines). NOTE: The content structure for Bookmarks available from Desktop computers (over Firefox sync) can be obsolete.

Awesomescreen content structure opening bookmark.png Opening an item from Browsing history

Awesomescreen content structure sub-view basic navigation.png

Opening a Tagged item

Awesomescreen content structure opening tagged item.png

Opening a Tab from other computers

Awesomescreen content structure opening tab from other computer.png