SlideShare a Scribd company logo
1 of 47
Download to read offline
Fennec UI Overview   Madhava Enros
                     March 2, 2009
Overview

• Themes/goals of the design

• User-interface walkthrough

  • Basic Controls

  • Navigation

  • Notifications

  • Add-ons, Downloads, and Preferences

  • Identity

  • Desktop integration (Weave)
Themes and goals

• Maximize screen space dedicated to content


• Minimize typing wherever possible


• Give primacy of interaction to a finger-oriented touchscreen


  • accommodate finger size


  • increase the physicality of the interface


• Support the quick lookup scenario


• Relationship back to Firefox on the desktop
Basic Controls
Initial page load
User starts to pan down the page
User pans past the right edge
Tabs on the left
Navigation
Beginning a navigation task
The navigation screen
Getting at more search engines                            new!




                    Yahoo                     Wikipedia
                                Answers.com
          Google




                     Yahoo                    Wikipedia
                                Answers.com
          Google




                                              Gmail
                    Wikipedia   Google Maps
  Yahoo   Answers                                         Yellow
Notifications
Page-level notifications

• Requests, warnings, or reminders about the current specific page


  • Pop-ups blocked -- would you like to see them?


  • Remember this password?


  • May this page know your location?


  • Will you let this page install software?


  • Some malware indication (secondary mechanism)
Page-level notifications
Page-level notifications, continued
Also, authentication (cert)   new!
Also, authentication (u/p)   new!
Browser-level notifications

• Notifications that are outside the context of the current page or site


• Either about ongoing processes or the browser/system itself


   • Something is complete (downloads, updates, add-on install)


   • Something is waiting (an update is ready to be applied)


• Typically, they require less immediate user intervention
Browser-level notification
Notification exiting
Add-ons, Downloads, and Preferences
Add-ons - list
Add-ons - options
Get Add-ons
Get Add-ons (in desktop Firefox)
Preferences - list
Preferences - options
Downloads - list
Downloads - options
Downloads - search
Art in progress




        not really, no
Identity / Site button
Identity in the Titlebar
Identity detail
Extended Site Button   new!
Bookmark Management   new!
Bookmark management 1
                                                bookmark button depressed


   Bookmarks                          By Name   Search




     Bookmark Name



      Folder name
                     folders inline


     Bookmark Name



     Bookmark Name



     Bookmark Name



     Bookmark Name
Bookmark management 2


   Bookmarks                                                        By Name    Search




      Top level folder

                                  open folder titles stack, and scroll away
                               (possibly we auto-scroll the user down to the
      Secondary level folder
                                  title-row of the lowest-level open folder)

     Bookmark Name



     Bookmark Name



     Bookmark Name



     Bookmark Name
Bookmark management 3


            Bookmarks                      By Name   Search




              Bookmark Name
     Edit


                              drag past page edge
              Bookmark Name
     Edit                       to reveal controls


     Edit     Bookmark Name



              Bookmark Name
     Edit



              Bookmark Name
    Edit



              Bookmark Name
     Edit
Bookmark management 4


           Bookmarks                                     By Name   Search




              Bookmark Name
    Edit



              Bookmark Name
    Edit



    Done     Name


             Address http://bookmark.url.com/goes/here


             Tags    tag1, tag2




              Bookmark Name
    Edit
Desktop integration (Weave)
Weave integration in a few places




                      }   in awesomebar results




 tabs from your desktop
Weave tabs proposal   new!
Weave tabs proposal (2)   new!
Weave tabs proposal (3)   new!
Weave tabs proposal (4)   new!

More Related Content

Viewers also liked

Mobile User Is Mobile
Mobile User Is MobileMobile User Is Mobile
Mobile User Is MobileMadhava Enros
 
Addons And Fennec UI
Addons And Fennec UIAddons And Fennec UI
Addons And Fennec UIMadhava Enros
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifieduiMadhava Enros
 
Tablet Thinking, All Hands, April 2011
Tablet Thinking, All Hands, April 2011Tablet Thinking, All Hands, April 2011
Tablet Thinking, All Hands, April 2011Madhava Enros
 
Web20 designing for_the_small_screen
Web20 designing for_the_small_screenWeb20 designing for_the_small_screen
Web20 designing for_the_small_screenMadhava Enros
 
Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009Madhava Enros
 
Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012Madhava Enros
 

Viewers also liked (7)

Mobile User Is Mobile
Mobile User Is MobileMobile User Is Mobile
Mobile User Is Mobile
 
Addons And Fennec UI
Addons And Fennec UIAddons And Fennec UI
Addons And Fennec UI
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifiedui
 
Tablet Thinking, All Hands, April 2011
Tablet Thinking, All Hands, April 2011Tablet Thinking, All Hands, April 2011
Tablet Thinking, All Hands, April 2011
 
Web20 designing for_the_small_screen
Web20 designing for_the_small_screenWeb20 designing for_the_small_screen
Web20 designing for_the_small_screen
 
Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009Fennec case study - Design for Mobile 2009
Fennec case study - Design for Mobile 2009
 
Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012Ux overview fxworkweek_april2012
Ux overview fxworkweek_april2012
 

Similar to Fennec Ui Walkthrough 2009 03 02

Alfresco Share - Themes
Alfresco Share - ThemesAlfresco Share - Themes
Alfresco Share - ThemesAlfrescoUE
 
Website Navigation Systems
Website Navigation SystemsWebsite Navigation Systems
Website Navigation SystemsZabisco Digital
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTerminalfour
 
MetaSepia - Peter Rullmann - FOSDEM'08
MetaSepia - Peter Rullmann - FOSDEM'08MetaSepia - Peter Rullmann - FOSDEM'08
MetaSepia - Peter Rullmann - FOSDEM'08prullmann
 
Web Development with Python and Django
Web Development with Python and DjangoWeb Development with Python and Django
Web Development with Python and DjangoMichael Pirnat
 
The internet
The internetThe internet
The internetmrtrevor3
 

Similar to Fennec Ui Walkthrough 2009 03 02 (8)

Alfresco Share - Themes
Alfresco Share - ThemesAlfresco Share - Themes
Alfresco Share - Themes
 
Website Navigation Systems
Website Navigation SystemsWebsite Navigation Systems
Website Navigation Systems
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
 
Toolkit 0 1
Toolkit 0 1Toolkit 0 1
Toolkit 0 1
 
MetaSepia - Peter Rullmann - FOSDEM'08
MetaSepia - Peter Rullmann - FOSDEM'08MetaSepia - Peter Rullmann - FOSDEM'08
MetaSepia - Peter Rullmann - FOSDEM'08
 
Web Development with Python and Django
Web Development with Python and DjangoWeb Development with Python and Django
Web Development with Python and Django
 
WordPress 3.3 Feature Tour
WordPress 3.3 Feature TourWordPress 3.3 Feature Tour
WordPress 3.3 Feature Tour
 
The internet
The internetThe internet
The internet
 

Fennec Ui Walkthrough 2009 03 02