SlideShare a Scribd company logo
1 of 108
Download to read offline
Designing &
Testing
Firefox




Tony Chung - Mozilla
The State of the Web
The State of the Web
   Design Approach
The State of the Web
   Design Approach
     Testing Approach
The Web Before
The Web Today
Understanding Mozilla
www.mozilla.org
Photo by scottfidd, Flickr
https://wiki.mozilla.org/QA/Browser_Tech
June 17, 2008



                https://wiki.mozilla.org/QA/Browser_Tech
June 17, 2008



                https://wiki.mozilla.org/QA/Browser_Tech
June 17, 2008



                https://wiki.mozilla.org/QA/Browser_Tech



                           8,002,530 downloads in
                                  24 hours!
Design Approach
Alex Faaborg, Mozilla UX
Strong Designer




Alex Faaborg, Mozilla UX
Strong Designer

                                         I know what you
                                          want more than
                                              you do!


Alex Faaborg, Mozilla UX
Firefox Presentation




Alex Faaborg, Mozilla UX
Firefox Presentation




                           User Centric Design




Alex Faaborg, Mozilla UX
Firefox Presentation
                                               I need...

            I want...


                             User Centric Design


                                                   the customer is
                     I like A more                   always right!
                          than B!

Alex Faaborg, Mozilla UX
Most design teams land
                somewhere on the spectrum
                 between the two extremes




Alex Faaborg, Mozilla UX
Open Source Design
Chaos!!                                                                    “I only use keyboard
                                                     “The URL bar should                                  Icons should be
                                                        be removed.”                  shortcuts.”
                                                                                                         colorful and happy
                                                                 “There should be
                                         “My mom doesn’t       a preference setting.”       “Nobody uses the    “Add support for
                                         understand tabs.”                                    ‘Go’ button.”       BitTorrent.”
                                                             “OpenID is the future!”
                            “Everyone uses tags,                                                                “That’s great!”
                              not bookmarks.”


                            “I love tabs!”


             “The profile manager
            should be redesigned.”


                   “Add support for
                     Ogg Vorbis.”


                       “That’s awful”

          “Closebuttons are better at
            the end of the tabstrip.”




Alex Faaborg, Mozilla UX
If People actually got what
they wanted, it would look
         like this...
If People actually got what
they wanted, it would look
         like this...
... if no opinion, left
    with blandness
... if no opinion, left
    with blandness
So like driving a car...
So like driving a car...




Or playing an
Instrument...
So like driving a car...




Or playing an
Instrument...




                The Experience just
                      Flows
If Idea doesnt work out...
Feedback
https://heatmap.mozillalabs.com/mozmetrics/
Alex Faaborg, Mozilla UX
Alex Faaborg, Mozilla UX
Alex Faaborg, Mozilla UX
Public Opinion
Public Opinion
Public Opinion
Public Opinion
So how successful
was the feedback?
Case Study: Spatial
    Memory
“Spatial memory is what allows you
to navigate back to your house from
a new resturant, remember how to
get to your bed after you turning off
the lights, and knowing exactly where
something is on your messy desk.”
-Aza Raskin, Mozilla UX
“Spatial memory is what allows you
to navigate back to your house from
a new resturant, remember how to
get to your bed after you turning off
the lights, and knowing exactly where
something is on your messy desk.”
-Aza Raskin, Mozilla UX
http://vimeo.com/14364




http://vimeo.com/14364400
Testing Approach
Do what the User does
   on a Daily basis
Do what the User does
   on a Daily basis
Do what the User does
   on a Daily basis
Do what the User does
   on a Daily basis
Do what the User does
   on a Daily basis




 (Functional Tests)
Do this with other
  tasks running
Do this with other
  tasks running
Do this with other
  tasks running
Do this with other
  tasks running
(Integration
    tests)

               Do this with other
                 tasks running
Do this on multiple
  environments
Do this on multiple
  environments
(Performance/Load tests)

Do this on multiple
  environments
Now Repeat the
  Workflow
Now Repeat the
  Workflow
Now Repeat the
  Workflow
Now Repeat the
  Workflow



(Regression/Automation
         Tests)
Get involved.
       tchung@mozilla.com
Moz QA Home: http://quality.mozilla.org
Firefox 4 builds: http://nightly.mozilla.org/

More Related Content

Similar to Designing and Testing Firefox 4

Stanford CS547 April2009
Stanford CS547 April2009Stanford CS547 April2009
Stanford CS547 April2009John Lilly
 
Designing Firefox
Designing FirefoxDesigning Firefox
Designing FirefoxDoNotLick
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
 
C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar... C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar... Obilogic
 
How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OSbenko
 
MozTW YZU CSE Lecture
MozTW YZU CSE LectureMozTW YZU CSE Lecture
MozTW YZU CSE Lecturelittlebtc
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Firefox for Mobile
Firefox for MobileFirefox for Mobile
Firefox for Mobilefoxymary
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...jward5519
 
Web maker - Web making Tools
Web maker - Web making Tools Web maker - Web making Tools
Web maker - Web making Tools Komal Gandhi
 
Cross Platform HTML5 Mobile Development
Cross Platform HTML5 Mobile DevelopmentCross Platform HTML5 Mobile Development
Cross Platform HTML5 Mobile DevelopmentRobert 'Bob' Reyes
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphiacanarymason
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkitsamuel-holt
 
Five Stages of Development - Nordic.js
Five Stages of Development  - Nordic.jsFive Stages of Development  - Nordic.js
Five Stages of Development - Nordic.jsRobert Nyman
 
Wordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from MozillaWordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from MozillaJohn Lilly
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCChristian Heilmann
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondLuke Perman
 

Similar to Designing and Testing Firefox 4 (20)

Stanford CS547 April2009
Stanford CS547 April2009Stanford CS547 April2009
Stanford CS547 April2009
 
Designing Firefox
Designing FirefoxDesigning Firefox
Designing Firefox
 
Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app development
 
C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar... C# Powershell and an Azure Function Walk Into a Bar...
C# Powershell and an Azure Function Walk Into a Bar...
 
How to start developing apps for Firefox OS
How to start developing apps for Firefox OSHow to start developing apps for Firefox OS
How to start developing apps for Firefox OS
 
MozTW YZU CSE Lecture
MozTW YZU CSE LectureMozTW YZU CSE Lecture
MozTW YZU CSE Lecture
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Firefox for Mobile
Firefox for MobileFirefox for Mobile
Firefox for Mobile
 
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...Do Try This At Home  Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
Do Try This At Home Ajax Bookmarking, Cross Site Scripting, And Other Web 2 ...
 
Mozilla Webmaker
Mozilla Webmaker Mozilla Webmaker
Mozilla Webmaker
 
Web maker - Web making Tools
Web maker - Web making Tools Web maker - Web making Tools
Web maker - Web making Tools
 
Cross Platform HTML5 Mobile Development
Cross Platform HTML5 Mobile DevelopmentCross Platform HTML5 Mobile Development
Cross Platform HTML5 Mobile Development
 
Designing in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, DrupaldelphiaDesigning in the Browser - Mason Wendell, Drupaldelphia
Designing in the Browser - Mason Wendell, Drupaldelphia
 
The front end toolkit
The front end toolkitThe front end toolkit
The front end toolkit
 
Five Stages of Development - Nordic.js
Five Stages of Development  - Nordic.jsFive Stages of Development  - Nordic.js
Five Stages of Development - Nordic.js
 
Wordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from MozillaWordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from Mozilla
 
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDCHow HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
 
BDD, Behat & Drupal
BDD, Behat & DrupalBDD, Behat & Drupal
BDD, Behat & Drupal
 
Prototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyondPrototyping with Axure for the web and beyond
Prototyping with Axure for the web and beyond
 
Doran-C4L2010
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
 

Designing and Testing Firefox 4