Fennec Ui Walkthrough 2009 03 02
Upcoming SlideShare
Loading in...5
×
 

Fennec Ui Walkthrough 2009 03 02

on

  • 4,533 views

Overview of the Fennec UX/UI designs`

Overview of the Fennec UX/UI designs`

Statistics

Views

Total Views
4,533
Views on SlideShare
4,224
Embed Views
309

Actions

Likes
4
Downloads
16
Comments
0

5 Embeds 309

http://www.usably.net 239
http://www.tgdaily.com 58
http://www.mobiledrupal.com 7
http://mobiledrupal.com 4
http://mobile.mobiledrupal.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Fennec Ui Walkthrough 2009 03 02 Fennec Ui Walkthrough 2009 03 02 Presentation Transcript

  • Fennec UI Overview Madhava Enros March 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! Yahoo Wikipedia Answers.com Google Yahoo Wikipedia Answers.com Google Gmail Wikipedia Google Maps Yahoo Answers Yellow
  • 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 bookmark button depressed Bookmarks By Name Search Bookmark Name Folder name folders inline Bookmark Name Bookmark Name Bookmark Name Bookmark Name
  • 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
  • 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
  • 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
  • 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!