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!