Mobile/UI/Designs/TouchScreen/TouchBar

Introduction

There are three concepts in this design:

• The url/search bar
• The touch bar
• Overview areas

The Url/Search Bar

The URL/Search bar is considered to be the very top of every page. Like on the iPhone, it scrolls with the page, and thus can be scrolled out of view. To get to it, the user either scrolls to the top of the page or uses the touch bar to automatically scroll to the url/search bar (I'll come back to this).

The great benefit of this method is that because the location of the url/search bar is part of the page, the interface retains a sense of physicality -- the user always knows where to find it because of the consistency of physical objects.

The bar borrows from Madhava's Proposal8 in that when a url is entered, the button reads "go"; and when a non-url is entered, the button reads "search".

The Touch Bar

The touch bar is the method for accessing most of the functionality of the browser. Always visible are the touch-bar activation corners (see above picture). Touching either one of them with your thumb causes the touch bar to animate from the touched corner to the other corner, revealing the actions:

The curve (although optional) is meant to follow the natural path that the thumb takes when gripping a device. The action bar can be -- like most menus -- both modal and quasimodal.

Quasimodal: Place your finger on one of the touch-bar activation corners and slide your finger to the desired action, and release. (As the finger travels, force feedback should be provided for each button passed). This provides a very fast way of accessing functionality and is quickly habit forming.

Modal: Tap the corner, and the touch bar is revealed. Touch any of the buttons to activate the action (force feedback should be included here). Using the modal method it is possible to press buttons like "back" and "forward" multiple times. Tapping outside the bounds of the touch bar dismisses it.

Depending on user testing, we may be able to remove the modal option.