Gaia/Browser

Status & Team

See: B2G - Milestone 4 Plan

Design Specs

Release 1 Specs Specs are ready for implementation. Individual specs will also be attached to specific stories on GitHub.

• Jun 13, 2012
  • Revised the Browser Settings Spec.

Interaction

(Note: this work is generally older.)

• wireframes v10 (Updated: May 4, 2012)
  • Updated the design of the bottom bar, tabs menu, and AwesomeScreen. Specs are slowly being updated as well.
• wireframes v8 (Apr 27, 2012)
  • Contains the FX UX team's approved interaction design and feature set that aligns with the rest of the Firefox product family.
  • Spec updates to come soon.
• wireframes v7
  • An exploration of different tab drawers that are more closely aligned with Gaia system UI.
• wireframes v6
  • These wireframes reflect changes to the v1 requirements for Browser. In particular, they include Start Page, Tabs, & Secure Site Indicator
  • Once the team agrees with these wireframes, specs will be created and added to the Release 1 Specs.
  • No v.5 because I was working on it before I got the new requirements...
• wireframes v4 - A quick exploration on the location of the Refresh button.
• wireframes v3
  • wireframes v3 is focused only on the features that will be included in the first browser release.
  • the only thing missing is the Settings Menu, which will be affected by design decisions that are going into v4 of this document.
• wireframes v2 - toolbar, awesomebar, tabs concepts
• wireframes v1 - FX for Gaia toolbar concepts

User Tasks

• User Stories, in priority sequence!
• User stories (draft)

Use Cases

• Tom loves using his mobile web browser for accessing websites where a Web App doesn't exist or to quickly look something up
• Launching the browser app, Tom sees an address bar, a back button and a menu button
• Tom taps on the address bar and is able to enter a URL and navigate to a particular website
• Tom visits www.nytimes.com and is able to view the entire website clearly and can zoom/pan around and catch up on today's news stories
• Tom clicks on a story and realizes it's not what he wants and taps the back arrow button.
  • Just like the desktop browser, Tom's browser history is stored and he's able to easily navigate back and forth between webpages.
• Clicking on the menu button, Tom is able to bookmark his favorite sites and manage his browser Settings
• Security is very important to Tom, so he's comforted to know certain sensitive websites he visits like his online banking service visually show him a 'lock' like icon.
• Tom also knows that the address bar is also much smarter and keeps a history of his top sites
  • By typing just a few letters, Tom see suggestions of his favorite/bookmarked sites
• The address bar is also a search bar and after typing in the query, Tom is able to select the search engine he wants to search from
• Tom loves multitasking and has the ability to open a new tab on top of the existing website he's viewing
  • The browser UI allows Tom to easily and quickly jump between his tabs
  • Tom can easily dismiss one of the tabs if he's done with it
  • Tom can easily create a new tab by tapping
• In addition to bookmarking a site and saving it to the browser app, Tom has the ability to bookmark a site and save it to his home screen
  • The home screen icon will intelligently create an icon on the home screen and uses the favicon as a base for the icon
  • Clicking on the bookmark on the home screen takes Tom to the website in the Browser app
  • If the Browser app is always running the background, it creates a new tab for Tom
• While surfing the web, Tom has the ability to share a given link at any time via:
  • Email
  • SMS
  • 3rd party app
• Because Tom is logged into his B2G phone using his Persona account, he has the ability to access his desktop browser data.
• Tom enjoys using his Firefox browser and knows it's all about user choice. Under the settings menu, Tom has the ability to manage the following:
  • Clear History
  • Clear Cookies and Data
  • Do Not Track (this is tied to the main Settings app and permissions model)
  • Enable Cookies
  • Send Performance Data
  • User Master Password
  • Remember Passwords

Requirements

The progress against these requirements is being tracked at a high level on a spreadsheet with Github issues corresponding to each item for more in depth discussion.

Gaia v1

• The Browser app features can be broken down into a few categories:
  • Core functionality:
    • User launches the browser app and has the ability to quickly and easily enter a URL in the address bar
    • User has the ability to navigate back and forward when applicable
    • User can refresh the page at any time when a page has completed loading
    • User can stop the loading of a page at any time
    • User is informed of the progress of the the page load with a visual indicator
    • When scrolling down a page, the content should be maximized by moving the top bar off the screen
    • User has the ability to bookmark a website and store that data within the browser app
      • User has the option to edit the name of a bookmark that has been saved
      • User can delete a bookmark
    • User has the ability to view certain document types:
      • .pdf (leverage pdf.js?)
    • Related to system UI, the user is informed when network connectivity isn't available
    • User is informed that a site is encrypted or secure with a visual 'lock' like indicator
  • Gestures:
    • User has the ability to scroll the contents of a page using a gesture
    • User has the ability to zoom in and out on any object/section of a web page (exception may be mobile-optimized sites)
      • Text box/image/section: double-tap
      • General area of web page: pinch-to-zoom
      • User has the ability to hide/reveal the Tabs tray using a gesture
  • Tabs:
    • User has the ability to create a new tab
    • User has the ability to quickly jump between open tabs
    • User has the ability to dismiss/close any open tab
  • AwesomeScreen:
    • When typing in the address bar, the user is provided suggestions of top sites they have visited
    • Without typing, the user is offered the top sites they have visited
    • Selecting 'Bookmarks', the user is offered the list of bookmarks
    • Selecting 'History', the user is displayed a list of websites they visited sorted by recency
  • Settings:
    • Clear History
    • Clear Cookies and Data
    • Do Not Track (this is tied to the main Settings app and permissions model)
    • Enable Cookies
    • Send Performance Data
• The start page should be a visual page offering functionality from the AwesomeScreen
  • Similar to Fennec's start page, it offers a 'speed dial' like experience
• The address bar offers search functional from multiple sources
  • BD deals/agreements required to finalize the set of service providers
• User has the ability to add a bookmark as an app icon on the home screen

Gaia v2

• User can share the link of a website via certain apps:
  • Email
  • SMS
  • 3rd party app (i.e. social apps)
• User has the ability to view certain document types:
  • .doc
  • .xls
  • .ppt
• Gestures:
  • User has the ability to bring up a page/object's context menu with a gesture
    • For example, bring up the context menu for an image could offer users the option to 'save image' to the Gallery app
  • User has the ability to select text using a gesture
  • User has the ability to navigate back/forward using a gesture
• AwesomeScreen:
  • User is offered the option of 'search suggestions' from various sources
  • User has the option to manage/organize their synced browser data with other clients
    • Bookmarks
    • Passwords
    • Forms
• Settings:
  • User Master Password
  • Remember Passwords
  • Open Links in 'New Tab' or 'In Background'
  • Private Browsing mode

Platform Dependencies

The browser app is built on the Browser API. See the wiki for detailed requirements and an overview of progress. The tracking bug for this API bug 693515.

Development

Source code on Github