Fennec Ui Walkthrough 2009 03 02

3,226 views

Published on

Overview of the Fennec UX/UI designs`

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,226
On SlideShare
0
From Embeds
0
Number of Embeds
315
Actions
Shares
0
Downloads
17
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fennec Ui Walkthrough 2009 03 02

  1. 1. Fennec UI Overview Madhava Enros March 2, 2009
  2. 2. Overview • Themes/goals of the design • User-interface walkthrough • Basic Controls • Navigation • Notifications • Add-ons, Downloads, and Preferences • Identity • Desktop integration (Weave)
  3. 3. 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
  4. 4. Basic Controls
  5. 5. Initial page load
  6. 6. User starts to pan down the page
  7. 7. User pans past the right edge
  8. 8. Tabs on the left
  9. 9. Navigation
  10. 10. Beginning a navigation task
  11. 11. The navigation screen
  12. 12. Getting at more search engines new! Yahoo Wikipedia Answers.com Google Yahoo Wikipedia Answers.com Google Gmail Wikipedia Google Maps Yahoo Answers Yellow
  13. 13. Notifications
  14. 14. 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)
  15. 15. Page-level notifications
  16. 16. Page-level notifications, continued
  17. 17. Also, authentication (cert) new!
  18. 18. Also, authentication (u/p) new!
  19. 19. 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
  20. 20. Browser-level notification
  21. 21. Notification exiting
  22. 22. Add-ons, Downloads, and Preferences
  23. 23. Add-ons - list
  24. 24. Add-ons - options
  25. 25. Get Add-ons
  26. 26. Get Add-ons (in desktop Firefox)
  27. 27. Preferences - list
  28. 28. Preferences - options
  29. 29. Downloads - list
  30. 30. Downloads - options
  31. 31. Downloads - search
  32. 32. Art in progress not really, no
  33. 33. Identity / Site button
  34. 34. Identity in the Titlebar
  35. 35. Identity detail
  36. 36. Extended Site Button new!
  37. 37. Bookmark Management new!
  38. 38. Bookmark management 1 bookmark button depressed Bookmarks By Name Search Bookmark Name Folder name folders inline Bookmark Name Bookmark Name Bookmark Name Bookmark Name
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. Desktop integration (Weave)
  43. 43. Weave integration in a few places } in awesomebar results tabs from your desktop
  44. 44. Weave tabs proposal new!
  45. 45. Weave tabs proposal (2) new!
  46. 46. Weave tabs proposal (3) new!
  47. 47. Weave tabs proposal (4) new!

×