Mobile/UI/Designs/TouchScreen/Proposal8

Introduction

This proposed mobile browser UI is based around a user action of "tap and hold" which displays both a radial menu of the most frequently used actions and other on-screen UI items in permanent locations for less-frequently accessed options.

Tap and drag actions are used to scroll the page. Scroll handles should be displayed only when the page is moving.

The main menu

All UI is displayed only after a tap-and-hold, so the entire display area can be dedicated to content. The user taps and holds:

and after a period of time (to be determined - carefully!) the UI elements are displayed:

The radial menu is comprised (subject to change if we have better information about what is used most frequently) of Bookmarks, Tabs, Back, and Forward. A title bar, with a reload (or stop - more on this later) and a bookmarking star, and a Tools menu button in the lower right-hand corner are also displayed.

Note - when either back or forward are tapped, we should probably wait longer before fading the radial menu (even as the page changes underneath) so that a user can continue to hit one or the other to move further back or forward.

Titlebar

To go to a site that's not yet bookmarked, a user taps and holds and then taps on the titlebar.

The following UI comes up (grows downwards from the titlebar?):

Showing frecency results immediately below the URL field is an attempt to give users some awesomebar-style benefit without having to type. Part of what makes the awesomebar powerful is that, with a keyboard, typing is the fastest way for a user to quickly narrow the field of what suggestions are appropriate. On a mobile device, typing is not as easy, so there's value to offering our best guesses as to what the user is looking for before they need to type at all.

(We could, alternatively, try using a list of most visited sites rather than the frequency and recency set).

That said, once people have to start typing, we should offer awesomebar results:

A user can tap to either search or go when entering text into the location bar. Ideally, we would try to determine whether the entered text is a URL or search term, and then indicate either the search button or go button as the default (enter). See propsal 6.

When a user has entered or chosen a site to go to, and the page begins loading, we display the following:

This bar fades after the page has finished loading. The user can tap on the "stop" button to cancel the page load.

Bookmarks

Bookmarking

Bookmarking works mostly the same way that it does in Firefox 3, but with a layout more adapted to this UI model:

Bookmarks List

mockups to come

Tabs

The Tab creation and switching UI is opened by tapping on the "Tabs" button in the radial menu. The tab icon should contain the number of currently open tabs.

What follows are three treatments of a tab list.

Option 1 (horizontal scroll)

Option 2 (all on screen)

Additional tab thumbnails would just be made to fit:

Option 3 (vertical scroll)

Tools Menu

All UI that isn't often-enough used to be featured in the primary UI is accessed through the tools menu:

Details here are TDB.