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!