Add-ons in the Fennec UI
        Madhava Enros, Mozilla
Fennec design themes and goals

• Maximize screen space dedicated to content


• Minimize typing wherever possible


• Giv...
also: block popups,
share location, install
   software, etc.
Lorem ipsum dolor sit amet, consectetuer
                          adipiscing elit. Fusce tristique. Cras ipsum
          ...
What about starting from Firefox?
}
  menubars

  toolbars

  sidebars          no

 statusbars

context menus
menubars
  random access to many options

toolbars
   quick actions, alerts, ambient indicators, search

sidebars
   concu...
sidebars become permanent tabs?

quick access go on awesomebar screen?
    above titlebar or below content?

   ambient in...
Did he say “peek?”




       3




      12
a

                                                        b




c   d                             Lorem ipsum dolor sit a...
Technical resources




         http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/



https...
Please get in touch!


             madhava@mozilla.com

                  twitter: madhava
            blog: madhava.com/...
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Addons And Fennec UI
Upcoming SlideShare
Loading in …5
×

Addons And Fennec UI

3,130 views

Published on

Presentation at the Mozilla/Maemo Danish Weekend (http://wiki.maemo.org/MozillaMaemoDanishWeekend) about things user-interface things to consider when writing a Fennec add-on.

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,130
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Addons And Fennec UI

  1. 1. Add-ons in the Fennec UI Madhava Enros, Mozilla
  2. 2. Fennec design 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
  3. 3. also: block popups, share location, install software, etc.
  4. 4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas. + various transient alerts, awesomescreen
  5. 5. What about starting from Firefox?
  6. 6. } menubars toolbars sidebars no statusbars context menus
  7. 7. menubars random access to many options toolbars quick actions, alerts, ambient indicators, search sidebars concurrent/background tasks, tools for content area statusbars quick access, alerts, ambient indicators, context menus object related actions, hiding many action (unfortunately)
  8. 8. sidebars become permanent tabs? quick access go on awesomebar screen? above titlebar or below content? ambient indicators become alerts? or, better, peek indicators? tap and hold for context access be creative - here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et or in gestures mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas.
  9. 9. Did he say “peek?” 3 12
  10. 10. a b c d Lorem ipsum dolor sit amet, consectetuer e f g adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Cras ipsum urna, semper vitae, aliquet eget, rutrum sed, pede. Morbi at sapien. Etiam cursus tincidunt est. Praesent et mauris. Nullam sodales, nulla et facilisis lobortis, libero enim posuere lacus, vitae convallis sapien odio in enim. Quisque pede. Cras dui. Sed lobortis leo vel velit. Aenean aliquam, lacus eu porta suscipit, magna nisi cursus leo, in dignissim felis felis ultrices urna. Pellentesque accumsan porta ipsum. Aenean egestas. h
  11. 11. Technical resources http://starkravingfinkle.org/blog/2009/05/resources-for-fennec-add-on-developers/ https://wiki.mozilla.org/Mobile/Fennec/Architecture https://wiki.mozilla.org/Mobile/Fennec/Extensions https://wiki.mozilla.org/Mobile/Fennec/CodeSnippets https://wiki.mozilla.org/Mobile/Fennec/Extensions/BestPractices
  12. 12. Please get in touch! madhava@mozilla.com twitter: madhava blog: madhava.com/egotism/ madhava in #UX and #mobile Bug 477628 - Fennec should offer a pleasant user-experience https://bugzilla.mozilla.org/show_bug.cgi?id=477628

×