#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)