Firefox Metro UI

• Win8 Integration Feature Page: https://wiki.mozilla.org/Windows8
• Metro Integration: https://wiki.mozilla.org/Firefox/Windows_8_Integration
• Feature breakdowns: https://docs.google.com/spreadsheet/ccc?key=0Ah-ohQJArz29dEhwRkFVcFBWRENPZEdLWXZGM040NXc#gid=0

Get real-time synced metro build from our front-end intern! [Requirements & Instructions]

UX Design:

• [New] Q2 UX Update: http://www.slideshare.net/melody2325/q2-firefox-on-metro-ux-update
• Snapped View v2: http://www.influenceapp.com/p/1187/a6170646ae3900ddd8
• Firefox Start Page video: https://vimeo.com/41887411
• Visual design Ideas 01: http://shorlander.dropmark.com/51486

Layout and Views

Screen resolutions

• The minimum resolution required to support all the features of Windows 8 (including multitasking with snap) is 1366x768
• The shape of the screen as a proportion of width to height. For example, 16:9.

Layout for large display

• Decide whether to go for adaptive layout or fixed layout.
• Cases that may require adaptive layout: many tabs open; many bookmarked/recent visited sites

• Links

[1]Scaling to screens: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx
[2]Scaling to different screens blog post http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

View state and interactions

• [UX]Initial start screen and awesome screen designs for Firefox on for Full-screen, Snap(1/3 screen), and Fill(2/3 screen).mockups
• [Front-end] URL bar on snap view is implemented

View orientation

• [UX+Visual] Designing for portrait orientation
• Links

 [1][Snapped and filled views guideline: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx]

Basic Modules

Navigations

URL bar

• [UX+Visual] need to define the loading interactions; Agree on throbber/progress bar details and deliver specs
• [Front-end]Bug 772304 Implementing throbber
• [Front-end]Bug 774850 Investigate supporting long swipe gesture to reveal tab panels and URL bar at the same time

Scrolling behaviors

• [Front-end] Bug774867 Speed of hiding context UI while scrolling

New tab & start page

• [UX+Visual] completed design draft on the new tab content. Need to deliver final spec for implementing start page content.
• [Front-end] adding a new tab is functional. content of start page Bug 747790 is integrated under implementation with awesome screen.

[Front-end]Bug 747786 Supporting Navigation bar and tab bar.

Awesome Bar/Screen

Strategically the feature that can make Firefox stand out.

• [UX+Visual]Completed designs for different cases: when typing; when keyboard is turn on; when no result is matched;
• [UX]Define the interactions with search app contract; Figure out how to incorporate search suggestions.
• [Front-end]Bug 747790 awesome bar search

Tabs

• [UX] Need to define the interactions with overflow tabs using finger, mouse, keyboard.
• [UX+Visual] Need to define the layout and interactions on Tabs on Top state.
• [UX+Visual] Design visually how to indicate current tab, and where to show the number indicator of tabs. Whether to keep consistent FX mobile's latest orange state approach.
• [Front-end] Currently adding and closing tabs, switching to Tabs on Top are working well.
• bug774863 Gesture responses while keyboard is on
• bug774847 Borders on thumbnails
• bug774352 Align tab opening behaviors with Firefox desktop
• [Vision] Pin tab/App tab on FX metro?
• [Vision] Ideas on support tab management( rearrange tabs, using Panorama, etc)

App Bar Panel

• [UX] No add-on support for the 1st release; For mouse and keyboard interactions, show zoom-in and zoom-out controls.
• [Visual] Agreed to use de-emphasized rings.
• [Platform] Bug756438 Implement AppBar scripting interface and build AppBar content dynamically
• [Platform] bug771360 Various Windows 8 metro Appbar cleanup tasks

Additional basic features

Find on page

• [UX] Deliver design mockups.Vision ways to provide additional value with the search results. IE metro shows the full link when search keyword is (or part of) a hyperlink.
• [Visual] Deliver on find bar icons and highlighting style

Private Browsing

Ideally private browsing tab should be supported. But currently on Firefox, private browsing can only be based on whole app instead of individual tab(as IE on metro).

• Current Solution: Leave private browsing for beta version of Firefox metro

Tiles, Badges, Toast Notifications

Tiles & Splashscreen

Current design

• [Front-end] bug735008 Windows 8 tile and splashscreen

• Links

 [1] [Checklist for tiles: http://msdn.microsoft.com/en-us/library/windows/apps/hh465403]

Badges & Toast Notifications

• Define the use case of using badges and notifications:

 - Notifications of download progress; 
 - Notifications from IM or mail sites, for example: new mails,new chat msg. 
 - Integrating with chat functions;

• [Platform] bug687226 Support metro style notifactions
• Links

 [1] [Badge overview: http://msdn.microsoft.com/en-us/library/windows/apps/hh779719.aspx]

Secondary tiles

• [UX] Support pinning a web link to the start page as secondary tile
• [Front-end] bug747366 using fav icon on secondary tiles

App Contracts

FX metro should use contracts and extensions to declare the interactions it supports with other apps and Windows.

Search

Description

• Let users quickly search through Firefox's search service from anywhere in the system, including from within other apps. And vice versa.
• System global search should be based on users search history and google search results. The goal is to enable users to get their search keywords with the least amount of work on typing.
• Enhanced search/Multi-search should be supported within Firefox application, instead of globally accessible.

• Links

 [1] [App contracts and extensions: http://msdn.microsoft.com/en-us/library/windows/apps/hh464906]
 [2] [Sharing content: http://msdn.microsoft.com/en-us/library/windows/apps/hh465251]

Share

Description

• Let users share content from Firefox with other people through other apps(for example, Mail), and receive shareable content from other people and apps, too.

Feature question

• Share targets: windows 8 apps that support sharing. Metro remembers recent contacts and lists on the top, then follows with mail app, and other social media apps.
• Source content: any webpage? also including image link? any local content?
• [Platform] bug756899 Enhance share charm functionality on Windows 8 Metro
• [Platform] bug687212 Support the share data contract in Windows 8

Print

Description

• Displays a custom print-related UI and communicates directly with a print device. When you highlight the features that are specific to a particular make and model of a print device, you can provide a richer, more enhanced user experience.

Feature question

• Identify user case: is it desktop only? Do we want to support print from Firefox metro on tablet?
• Design the customized interface for printing.
• Links

[1] [Guidelines for print UI design: http://msdn.microsoft.com/en-us/library/windows/apps/hh465217.aspx]

Others

Play to

• Let users enjoy audio, video, or images streamed from Firefox to other devices in their home network.

[Platform] bug740835 hooking up playto contract

File picker

• Let Firefox load and save their files from the local file system, connected storage devices, HomeGroup, or even other apps.

[Platform] bug771238 an UI freeze issue about file picker

Personalization

Settings

• Identify the content goes into Settings on metro. (Potential list: Set as default browser; Delete browsing history;Privacy(location permit;do not track);Content(languages,encoding);Sync)

• Links

 [1] [ Guidelines for App Settings: http://msdn.microsoft.com/en-us/library/windows/apps/hh770544]

Add-ons

• Based on the conversation on 06/18, add-ons on metro need to be customized to ensure compatibility. So for beta version, we will not have Add-ons on metro environment.

Identity

• For beta version, not going to support signing into Firefox on metro.
• To make sync happen, MS supports tap to share, which can transfer URLs and small documents between Windows Phone and other Windows8 device. We should take advantage of that feature to make sync happen if we want.

Potential feature explorations

Should not be on the priority list. Good to vision the possibilities of adopting some advanced features eventually onto FX metro.

Reader mode

- would be useful to have the reader mode on snapped view. also provide the options of reading list.

User Experience > Visual Design

Design Language: Platform Experience

Define a visual system that will unify the 3 interface components (live tile, metro app, classic app). Currently the classic apps feel old, is there anything we do with the skin to make it feel more metro? We would want to avoid having our full / powerful browser look old. Goal: Bring some metro into classic.

Design Language: Iconography

Good opportunity to introduce a unified design language for the iconography: unified on mobile (metro) and desktop (classic). Ideally Australis would be the base for the classic skin.

Transitions and Layering

In mobile we have introduced a layering concept:

A quick skin of IE10, tried to make it look more firefoxy as we are still define interaction, but it outlines what we do with transitions:

Win8/Metro Design Resources

• Talks about Metro UI

 [1]  8 traits of great metro apps: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1004
 [2]  Design Metro Style: http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395T

• Other

 [1] Choosing the right UI surfaces  http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx