Download - Fennec Ui Walkthrough 2009 03 02
![Page 1: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/1.jpg)
Fennec UI Overview Madhava EnrosMarch 2, 2009
![Page 2: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/2.jpg)
Overview
• Themes/goals of the design
• User-interface walkthrough
• Basic Controls
• Navigation
• Notifications
• Add-ons, Downloads, and Preferences
• Identity
• Desktop integration (Weave)
![Page 3: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/3.jpg)
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
![Page 4: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/4.jpg)
Basic Controls
![Page 5: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/5.jpg)
Initial page load
![Page 6: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/6.jpg)
User starts to pan down the page
![Page 7: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/7.jpg)
User pans past the right edge
![Page 8: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/8.jpg)
Tabs on the left
![Page 9: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/9.jpg)
Navigation
![Page 10: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/10.jpg)
Beginning a navigation task
![Page 11: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/11.jpg)
The navigation screen
![Page 12: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/12.jpg)
Getting at more search engines new!
Google Yahoo Answers.com Wikipedia
WikipediaAnswers Google MapsYahoo Gmail Yellow
Google Yahoo Answers.com Wikipedia
![Page 13: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/13.jpg)
Notifications
![Page 14: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/14.jpg)
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 15: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/15.jpg)
Page-level notifications
![Page 16: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/16.jpg)
Page-level notifications, continued
![Page 17: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/17.jpg)
Also, authentication (cert) new!
![Page 18: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/18.jpg)
Also, authentication (u/p) new!
![Page 19: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/19.jpg)
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
![Page 20: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/20.jpg)
Browser-level notification
![Page 21: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/21.jpg)
Notification exiting
![Page 22: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/22.jpg)
Add-ons, Downloads, and Preferences
![Page 23: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/23.jpg)
Add-ons - list
![Page 24: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/24.jpg)
Add-ons - options
![Page 25: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/25.jpg)
Get Add-ons
![Page 26: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/26.jpg)
Get Add-ons (in desktop Firefox)
![Page 27: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/27.jpg)
Preferences - list
![Page 28: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/28.jpg)
Preferences - options
![Page 29: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/29.jpg)
Downloads - list
![Page 30: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/30.jpg)
Downloads - options
![Page 31: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/31.jpg)
Downloads - search
![Page 32: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/32.jpg)
Art in progress
not really, no
![Page 33: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/33.jpg)
Identity / Site button
![Page 34: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/34.jpg)
Identity in the Titlebar
![Page 35: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/35.jpg)
Identity detail
![Page 36: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/36.jpg)
Extended Site Button new!
![Page 37: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/37.jpg)
Bookmark Management new!
![Page 38: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/38.jpg)
Bookmark management 1
SearchBy Name
Bookmark Name
Folder name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmarks
bookmark button depressed
folders inline
![Page 39: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/39.jpg)
Bookmark management 2
SearchBy Name
Secondary level folder
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmarks
Top level folder
open folder titles stack, and scroll away(possibly we auto-scroll the user down to the
title-row of the lowest-level open folder)
![Page 40: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/40.jpg)
Bookmark management 3
SearchBy Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmarks
Edit
Edit
Edit
Edit
Edit
Edit
drag past page edgeto reveal controls
![Page 41: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/41.jpg)
Bookmark management 4
SearchBy Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmarks
Edit
Edit
Done
Edit
http://bookmark.url.com/goes/here
Name
Address
tag1, tag2Tags
![Page 42: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/42.jpg)
Desktop integration (Weave)
![Page 43: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/43.jpg)
Weave integration in a few places
}in awesomebar results
tabs from your desktop
![Page 44: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/44.jpg)
Weave tabs proposal new!
![Page 45: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/45.jpg)
Weave tabs proposal (2) new!
![Page 46: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/46.jpg)
Weave tabs proposal (3) new!
![Page 47: Fennec Ui Walkthrough 2009 03 02](https://reader033.vdocument.in/reader033/viewer/2022042607/54c821444a79599d5f8b45aa/html5/thumbnails/47.jpg)
Weave tabs proposal (4) new!