Post on 28-Jan-2015
description
transcript
Fennec UI Overview Madhava EnrosMarch 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!
Google Yahoo Answers.com Wikipedia
WikipediaAnswers Google MapsYahoo Gmail Yellow
Google Yahoo Answers.com Wikipedia
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
SearchBy Name
Bookmark Name
Folder name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmark Name
Bookmarks
bookmark button depressed
folders inline
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)
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
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
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!