Mobile/UI/Designs/TouchScreen/workingUI/desktop integration/interface1

From MozillaWiki
Jump to: navigation, search

The following is an interaction design for desktop integration (Weave) for tabs in Fennec.

I sidestep the Weave login process here for the moment -- I would likely look much like the one here: Jono's Fennec-Weave UI proposal

Once a user has Weave set up, when he or she pans over to see the tab area, there is a new permanent tab at the end of the list of currently open tabs. Here, I've shown it decorated with a Weave symbol for clarity, but it should probably actually be something to do with the concept of "more/other tabs."

weave_1.png


Switching to this Weave tab reveals a list, with thumbnails and other identifying information (page title on the tab, URL of the tab, the source (machine name?) of the tab), of all the tabs from other machines that the user can grab. This list can be panned up and down by swiping. There are controls at the top (that pan away when the list is scrolled) for changing the sort criterion. The "Search" option at the end brings up a search box below the buttons in an enlarged grey area.

weave_2.png

By default, this list is sorted by date -- in other words, in most-recently used (MRU) order. This means that the tab a user was last working in (in the "get-up-and-go mid-task" use case) will be the first one listed here.


The weave tab behaves as if it were a normal tab. For example, to get out of the tab list, a user just has to pan over to the tab area, as always, and switch to another tab.

weave_3.png


Tapping on a row brings up the content of that tab, in place, as if it were a regular page loading:

weave_4.png


At this point, the user goes on using the synchronized page. When he or she goes over to the tab area, the current tab is shown as selected, as always, and the permanent Weave tab is shown at the end, it having been bumped down by the weave-opened tab.

weave_5.png