Q3 UPDATEFirefox on Win8 - UX Design

FIREFOX UX SEP 2012

#1NATIVE FIREFOXY FLUID#2 #3A BROWSER THAT FEELS

#1NATIVE 1. App bar for contextual commands

Downloads Options Pin to start Bookmark

#1NATIVE 2. Tabs as live thumbnails

Tab previews on top made content easy to read and to navigate through. Touch-optimized target size. Live thumbnails make tab switching more efficient and enjoyable.

#1NATIVE 3. Pin to start menu

Firefox on Win8 supports pinning site links as a live tile to the Start Menu.

You will be able to visit your frequent sites with a simple tap.

#1NATIVE 4. Global search

Search through Firefox’s search service from anywhere in the system, including from within other apps.

To enable users to get their search keywords with the least amount of work on typing, the charm provides multiple search suggestions based on history and google search.

#2FIREFOXY 1.1 Comfortable browsing - Bookmarks

Lists exist

No existing list

To select/create a list

Firefox on Win8 embraces the new concept: “Bookmark List”. Every list is on the same hierchary with each other. Your book-marks will never be unsorted. There will not be folders within folders any more.

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#2FIREFOXY 1.2 Comfortable browsing - find on page

Find on page is always accessible from “Options” in the App Bar. Find bar will take over the app bar to perform searches, until user taps “Close” to exit.

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#2FIREFOXY 2.1 Power - Tab overflow

Mouse in use

Touch in use

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#2FIREFOXY 2.2 Power - Tabs on top

Curvy shaped tabs. De-emphasized background. Cleaner and more friendly. A traditional tab view for desktop users.

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#2FIREFOXY 2.3 Power - Awesomescreen

No matter snap or full screen, Firefox on Win8 always provides powerful suggestions and multiple search options.

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 1. Adaptive layout

Firefox on Windows 8 will deliver a consistent and predictable experience on different screens.

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 2. Direct Manipulation

Single finger swipe to navigate through tab previews.Tabs feel like following finger/touch point.

Tab panel and app bar should be dismissed once users interact with web content. Single finger scrolling up to cover tab previews in the same speed of scrolling.

mozilla.org

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 2. Direct Manipulation

Two finger pitch to zoom in and out web content (If mouse is in use, the app bar will show zoom options)

Edge swipe to reveal URL bar and app barT ap on the web content to dismiss(If mouse is in use, right-click to reveal)

mozilla.org

mozilla.org

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 3. Apply animations

Display tab panel when adding a new tab

Load a new tab

DO DON’TTASK

• SlidesdownURLbarandviewportinverticaldirection.Atthesametime,loadanewtabonthepanel.

• Assoonasanewtabiscreated,theviewportshouldswitchcurrentpagetostartscreencontent.

• Showtheappbarwhileloadinganewtab

• Overlaywiththeviewport

• Anewtabshouldloadinfromrightsideofcurrenttabs.

• Ifthetabpanelisfull,showaquickanimationofmovingexistingtabstotheleftfirst.Thenloadthenewtab.

• Thethumbnailshouldbegeneratedfromthecentralandthenscaleup.

• URLbarandviewportgoupverticallyrightafternewtabloads.Atthesametime,displaystartscreencontent.

• Showaprogressbarwhileloadinganewtab(supposedtobelocal-based)

• Hidetabpanelbeforethenewtabiscreated

Load start page

Browse through start page

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 3. Apply animations

DO DON’TTASK

• UsecontenttransitionenterContentforloadingcontent(Topsites,bookmarks,etc)intothestartscreen.

• URLbarshouldalwaysvisibleonstartscreen.

• Ifuserinteractswithphysicalkey-board,URLtextfieldshouldbehigh-lightedautomatically.

• Showtheappbarwhileloadinganewtab

• Overlaywiththeviewport• HidetheURLbar

• Whilehorizontalpanningonthepagebytouch,contentshouldmoveinthesamespeedwithswiping.

• Showahorizontalscrollingbarwhilethefinger/mouseisinteracting.

• Theleftsideofscreenshouldalwaysdisplaycontentofasectionfromthetop.

• Therightsideofscreenshouldshowpartsofsectionifthere’sany,whichin-dicatesthere’smoretoscrollthrough.

• Showaverticalscrollbaronstartpage• Cutthecontentfromleftside• Usefade-inorfade-outeffect• Showloadingsignormakeuserwait

forcontenttoload

#2FIREFOXY 2.1 Comfortable browsing - bookmarks#3FLUID 3. Apply animations

DO DON’TTASK

• First,URLbarshouldslidedownandupdatetheaddressinthetextfield.

• Oncetheprogressisdeterminate,showa2pxtallbluelineunderneathURLbar,toindicatetheprogress.

• Ideallythedeterminateprogressbarshouldbeaccelerating,tomanipulateusersperceptiononspeed.

• Ifbrowsercan’tdeterminateapredict-ableend,showtheprogressringstyle/spinningthrobberontheURLbar.

• Afterthepageisloaded,keeptheURLbarvisibleuntiluserinteractswithwebcontent.

• Bringdownthetabpanel• Maketheprogresslinestopinthe

middleofloading• HidetheURLbarautomaticallywithout

user’sinteraction

• First,URLbarandtabpanelbothslidedown.

• Createanewtabpreviewfromrightsideonthepanel.Applytheabovean-imationsofprogresscontrols.Switchviewporttothenewtab.

• Afterthenewtabiscreated,keepthetabpanelandURLbarvisibleuntiluserinteractswithwebcontent

• OnlybringdownURLbar• Maketheprogresslinestopinthe

middleofloading• HidetheURLbaror/andtabpanel

withoutuser’sinteraction• Stayontheprevioustab• Createanewtabinthemiddleorfrom

theleftside

Open a web link on current tab

Open a web link on a new tab (default on the foreground)