Firefox/Features/New Tab Page v2: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(changing names)
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{FeatureStatus
{{FeatureStatus
|Feature name=New Tab Page v2
|Feature name=New Tab Page v2
|Feature stage=Definition
|Feature stage=Feature Overview
|Feature status=In progress
|Feature status=In progress
|Feature version=Firefox Next
|Feature version=Firefox Next
|Feature health=OK
|Feature health=OK
|Feature status note=New Tab and Home Page landed in Firefox 13.  This new project seeks to improve and combine these two pages into one integrated design on Firefox desktop, mobile, and table
|Feature status note=This new project seeks to improve and combine New Tab ("about:newtab" in Firefox) and Home ("about:home" in Firefox) into one integrated design on Firefox desktop, mobile, and tablet.
}}
}}
{{FeatureTeam
{{FeatureTeam
Line 14: Line 14:
}}
}}
{{FeaturePageBody
{{FeaturePageBody
|Feature open issues and risks=* Performance or memory degradation
|Feature open issues and risks=# Thumbnails currently not loading in Firefox (they'll need to load consistently before a successful NT2)
* Likely relies on projects not yet completed (log into browser, sync, browserID)
# May have implications for our search relationships with partners, since involves internal pages where searches are conducted
|Feature overview=Whenever Firefox users open a new tab, their goal is to use it to navigate somewhere.  Firefox currently displays a blank page when Firefox users open a new page.  This is guaranteed to not help them perform their next task.
# UX is resource-constrained on both research and implementation side
|Feature overview=Whenever Firefox users open a new tab, their goal is to use it to navigate somewhere.


We'd like to implement a page which displays on new tabs and helps users complete their next task.  This will likely include offering options that are most likely to include the user's next task so that valuable time and steps are saved.
We'd like to implement a page which displays on new tabs and helps users complete their next task.  This will likely include offering options that are most likely to include the user's next task so that valuable time and steps are saved.


Such a page must meet certain requirements:
Such a page must meet certain requirements:
* Load instantly
# Load instantly
* Not be so distracting as to take users mentally away from their intended task and into an unintended one
# Not be so distracting as to take users mentally away from their intended task and into an unintended one
* Be useful without any configuration, yet can be easily configured and disabled
# Be useful without any configuration, yet can be easily configured and disabled
* Does not embarrass the user
# Does not embarrass the user


==Goals==
==Goals==
===1. Offer a seamless experience across devices and users===
===1. Make users more powerful===


* '''Be user-centric, not device-centric.'''When a Firefox user begins a browsing session, they should always feel they are continuing a web experience with a browser built for them, not having to re-introduce themselves
* '''Feel ''Firefoxy'' on any platform.'''  While Firefox is designed differently for different form factors, NT2 will look, feel, and act in accordance with our brand tone and style


===2. Make users more powerful===
* '''Utilizes usage data Firefox already has.'''  Creates value from what Firefox knows about the people who use it, building a richer experience over time without compromising privacy or security
* '''Utilizes usage data Firefox already has.'''  Creates value from what Firefox knows about the people who use it, building a richer experience over time without compromising privacy or security
* '''Make users efficient.'''  Has a high likelihood of predicting what the user’s next action is and saving them time in the process.  Allows users to easily navigate different locations and contexts
* '''Make users efficient.'''  Has a high likelihood of predicting what the user’s next action is and saving them time in the process.  Allows users to easily navigate different locations and contexts
* '''Recognize context.'''  Understands that how users browse changes based on their situation, state, and tasks.  Does require users to compromise privacy among people in their life.
* '''Recognize context.'''  Understands that how users browse changes based on their situation, state, and tasks.  Does require users to compromise privacy among people in their life.
* '''Be the user’s agent and advocate.'''  Welcomes users to their browsing session while being helpful, not overpowering.
* '''Be the user’s agent and advocate.'''  Welcomes users to their browsing session while being helpful, not overpowering.
* Non-goal: Engage users at all costs.  A successful design will passively present our best guess as to what users will find useful, but not any content that the user might find interesting.  Distraction from the user’s intended task is not acceptable.


===3. Successfully Integrate New Tab and Home Tab into one Page===
* '''Non-goal: Work well with a user’s current and future tools.'''  Firefox cannot be all tools to all users, and a successful design will integrate with users’ current workflows and tools  Firefox and a user’s tools should be more powerful together: Firefox should not work around or despite a user’s tools.
Successfully Integrates New Tab and Home Tab into one Page
 
 
===2. Offer a seamless experience across devices and users===
 
 
* '''Be user-centric, not device-centric.''' When a Firefox user begins a browsing session, they should always feel they are continuing a web experience with a browser built for them, not having to re-intro duce themselves
 
* '''Feel Firefoxy on any platform.''' While Firefox is designed differently for different form factors, NT2 will look, feel, and act in accordance with our brand tone and style


* '''Use what we’ve learned''' through research and testing about what users do and want at the beginning of their session and when opening a new tab and delivers a solution to address real user needs
* '''Don't leave current users in the lurch.'''  While the features NT2 presents will change and some will move, users will not be left unable to find functionality they need
* Non-goal: Combine all the features of Home Tab and New Tab into one page.  Currently, these two pages offer users different options, but a successful design for v2 will curate content strategically in the way that produces the best user experience.  Any item present on the page must have a rationale to be displayed other than historical design.
|Feature users and use cases=* A user opens Firefox to begin a browsing task such as checking email, social networking, or reading the news
* A user opens a new Firefox tab to complete a task such as navigating to a website, mapping a location, doing a math problem, or checking the spelling of a word
* A users closes their laptop at home and runs to catch a bus, taking their Android device with them
* A user shares a family computer with her children, but wants to make sure they’re not exposed to the websites she visits
* A user is backpacking far from his home computer and uses an internet cafe communicate while traveling
|Feature non-goals=* Engage users at all costs.  A successful design will passively present our best guess as to what users will find useful, but not any content that the user might find interesting.  Distraction from the user’s intended task is not acceptable.
* Combine all the features of Home Tab and New Tab into one page.  Currently, these two pages offer users different options, but a successful design for v2 will curate content strategically in the way that produces the best user experience.  Any item present on the page must have a rationale to be displayed other than historical design.
* Brand overload.  The home and new tab see a great deal of user traffic, and temptation to introduce Mozilla’s latest products and services here will be high.  However, the focus of these pages is on users, not on Mozilla.  While there may be some room for subtle messaging in some cases (e.g. snippets), it is the user’s goals which will define content, not necessarily Mozilla corporation’s goals.  The goal to keep in mind is that *Firefox answers to no one but you.*
|Feature ux design=Current design document can be downloaded here: http://people.mozilla.com/~jboriss/specs/newtabv2/


On each instance of Firefox, a user will see the sites most likely to be useful to them grouped into categories.  These categories will include recently closed, recently bookmarked, history, etc.
===3. Successfully Integrate New Tab and Home Tab into one Page===


Firefox itself, regardless of device, will have a default list of site categories that is determined by its chance of being useful to the braod swathe of users.  For instance, the first category will be “top sites,” meaning those with the highest frecency (frequency + recency) score.  The order of subsequent categories will be in order of decreasing usefulness.
* '''Use what we’ve learned and are learning.''' Integrate and change based on what we learn from research and testing about what users do, how they browser, and how they respond to changes


Any device Firefox runs in will have present these categories in consistent behavior and layout.  For users who have not logged into Firefox on multiple devices, the categories will always default to the same order (frecency first, etc).  Scrolling to the right on every device shows additional categories, while scrolling down on one category maximizes it.  This means that even if a user has no Firefox account, they can use muscle memory to find the category they want, even across devices.
* '''Don’t leave current users in the lurch.''' While the features NT2 presents will change and some will move, users will not be left unable to find functionality they need


The differences between devices are dependant only on the devices themselves: touch vs click, small screen vs large.  On desktop, all categories past “Top Sites” will be shown in list form, while on tablets and mobile devices only thumbnails will be shown.  This is due to the affordance of touch on touchscreens requiring large targets, while mice on desktop allow for smaller targets.
* '''Non-goal: Combine all the features of Home Tab and New Tab into one page.''' Currently, these two pages offer users different options, but a successful design for v2 will curate content strategically in the way that produces the best user experience.  Any item present on the page must have a rationale to be displayed other than historical design.


In keeping with the Sandstone Mozilla style, a “supertab” at the top right of all new tabs on all devices will allow a user to access additional items and customization.
==Design==
[http://people.mozilla.org/~jboriss/temp/paris/v1_1_spec.png Design spec]


Things get interesting once a user has a Firefox account.  Then, all of the devices they log into will keep the same categories with the same sites in the same order, and muscle memory will increase further.
==Research==
===Questions to Answer via Research===
: '''a. What info I’m looking for'''
: '''b. What hypothesis I’d like to test'''
: '''c. What different numbers would indicate'''
===1. How often do users click on thumbnails and launch targets (these) about:newtab?===
: a. What percent of time in which they see about:newtab do they interact with it? Do they interact with a range of thumbnails and launch targets or just a few? How many thumbnails are displaying for users on average, do they click on the thumbnails that are displaying?
: b. As long as thumbnails are displaying, a non-trivial amount of users do click on them.  Probably very few users use the launch targets.
: c. If thumbnails are basically ignored or used, assuming they are displaying correctly.  If launch targets are basically ignored or used
===2. How often do users search from about:home?===
: a. What percent of the time that users see about:home will they do a search from it? How many users press the Home button before doing a search on about:home?
: b. Very few users r.ely on about:home for searching, but some small amount of users may rely on it primarily for searching
: c. If thumbnails are basically ignored or used, assuming they are displaying correctly.  If not enough thumb nails are displaying for users to make this question answerable right now, so be it.
===3. How often do users press the “Home” button?===
: a. Are there users that press the about:home button? If so, what actions are they most likely to take once they see about:home? This one in particular may be skewed by the Test Pilot audience
: b. Very few users rely on about:home for searching, but some users rely on it primarily for searching
: c. If the number of users who rely on the Home button is small or large, and if there are users who rely on it only or primarily for searching
===4. How many users have changed their homepage to be a custom page, blank page, or “show windows from last time?” Also, how many “restore session” on about:home once it starts?===
: a. An idea of how many users have customized their about:home and how many use session restore
: b. Very few users have changed their about:home, while a non-trivial amount restore their session after a crash
: c. If the number of users who change about:home is small or largeIf possible, what URLs they replace their about:home with.


Rather than requesting users set up their Firefox dashboard, this system passively adds sites users care about into categories.  If users want to customize this dashboard, they can remove, add, and reprioritize these cateogires.  But, vitally, these categories are created for them.
<!--
[[Image:New tab v2 mockup 0 3.png]]
[[Image:Sliding right reveals more categories.png]]
}}
}}
{{FeatureInfo
{{FeatureInfo
Line 80: Line 94:
|Feature engineering team=Desktop front-end
|Feature engineering team=Desktop front-end
}}
}}
-->
{{FeatureTeamStatus
{{FeatureTeamStatus
|Feature security status=sec-review-needed
|Feature security status=sec-review-needed
Line 106: Line 123:


=== Sketches ===
=== Sketches ===
==Sketches==
[https://wiki.mozilla.org/Firefox/Features/New_Tab_Page_v2/sketches Sketches, iterations, and visual ideas can be found here] now!
<gallery>
Image:Conceptual home tab mockup 32423.png|Conceptual mockup: "dashboard-style" Home tab
Image:Rationale new tab home tab different 324.png|Rationale for why home tab and new tab have been separate
Image:Where users go after opening new tab23423.png|Diagram: Where users navigate to after opening a new tab
Image:Dashboard style hometabs 32423.png|Dashboard-style home tab concepts
Image:New tab in firefox 13 32432.png|Windows Screenshot: New Tab in Firefox 13
Image:Firefox Home Tab in Firefox 13.png|Windows Screenshot: Home Tab in Firefox 13
Image:Simple_home_new_with_levels_at_top12431234.png|OSX Mockup for quick dial home tab with categories at top
Image:Osx new tab design without search bar.png|OSX New tab design without search bar
Image:Osx new tab design without a search bar 23423.png|OSX New tab design without a search bar
Image:Simple with dark levels 234234.png|Simple new tab with dark titles at bottom
Image:Adding new sites to black bar design 432234.png|Adding a custom site to grid view
Image:Dark labels with customization gear 32423.png|Grid view with gear to change content
Image:Initial spec with black titles 3242342.png|Initial new tab spec with basic customization
Image:Prompt for telementry on hometab4232.png|Telemetry prompt on home tab
Image:Bookmarks and top sites side by side23423.png|Bookmarks and top sites side-by-side
Image:Faded out top site icons with categories254234.png|Faded out top site icons with categories
Image:Icon-based minimal layouts 32432.png|Icon-based minimal layouts
Image:Outlined tabs on grid view with icons.png|Outlined tabs on grid view with icons
Image:Concept Marketplace and apps in new tab and in URL bar.png|Concept Mockup of apps in New Tab and URL bar
Image:Multivariate study examples23423.png|Three types of new tab grid configurations tested in multivariate study
Image:How dark labels on new tab pages look on various kinds of thumbnails.png|How dark semi-transparent labels appear on various kinds of thumbnails
Image:Expanding minimal grid concept 23423.png|Expanding minimal grid concept
Image:Minimal icon grid with mouseovers 23423.png|Minimal icon grid with mouseovers
Image:Asymmetrical grid arrangement.png|Asymmetrical grid arrangement
Image:Minimal_link_layouts23432.png|Minimal link layouts
Image:Grid concepts with icons.png|Grid concepts with icons
Image:Asymmetrical grid system layouts 23423.png|Asymmetrical grid system layouts
Image:Icon size variations of gridstyle layout.png|Icon size variations of gridstyle layout
Image:Square thumbnails with semitransparent overlays.png|Square thumbnails with semitransparent overlays
Image:Screenshot of current mobile home page.png|Screenshot of current mobile home page
Image:OSX Mockup of new tab with configuration panel.png|OSX Mockup of new tab with configuration panel
Image:Firefox Start concept with horizontal launch targets.png|Firefox Start concept with horizontal launch targets
Image:Firefox Start concept with vertical launch targets.png|Firefox Start concept with vertical launch targets
Image:Home page concept with chat contacts.png|Home page concept with chat contacts
Image:Home tab concept with chat conversation open.png|Home tab concept with chat conversation open
Image:Home tab concepts with many apps visible.png|Home tab concepts with many apps visible
Image:Home tab concept with small app icons.png|Home tab concept with small app icons
Image:Home tab concept with white background and chats.png|Home tab concept with white background and chats
Image:Home and new tab side by side variation.png|Home and new tab side by side variation
Image:Home and new tab with search bar.png|Home and new tab with search bar
Image:Home and tab with search and buttons at top.png|Home and tab with search and buttons at top
Image:Home and new tab with center logo.png|Home and new tab with center logo
Image:Home and new tab with left aligned Firefox logo.png|Home and new tab with left aligned Firefox logo
Image:Home and new tab with snippet234.png|Home and new tab with snippet
Image:Home and new tab with full Firefox wordmark234.png|Home and new tab with full Firefox wordmark
Image:Home and new tab with large search bar at the top.png|Home and new tab with large search bar at the top
Image:Firefox home and new tab with search bar.png|Firefox home and new tab with search bar
Image:Home and new tab with expanded grid23423.png|Home and new tab with expanded grid
Image:Home and new tab with snippet at top right 2342.png|Home and new tab with snippet at top right
Image:Home and new tab with snippet and search at top right2343.png|Home and new tab with snippet and search at top right
Image:Dashboard style home tab with apps 342.png|Dashboard style home tab with apps
Image:First spec for redesigned home tab 23423.png|First spec for redesigned home tab
Image:Variations on launch targets home tab style 23432.png|Variations on launch targets home tab style
Image:Home tab first iteration in Windows with launch targets 23423.png|Home tab first iteration in Windows with launch targets
Image:Variations on launch bar for home tab23423.png|Variations on launch bar for home tab
Image:Windows style variations of home tab with launch target23423.png|Windows style variations of home tab with launch target
Image:Home tab optinos customization mockup 23423.png|Home tab optinos customization mockup
Image:Newspaper-style content layout on home tab 32423.png|Newspaper-style content layout on home tab
Image:Newspaper-style content layout on home tab v2 32423.png|Newspaper-style content layout on home tab v2
Image:Exploratory home tab with tabs 2342.png|Exploratory home tab with tabs
Image:Home tab variation with search bar instead of snippet 23423.png|Home tab variation with search bar instead of snippet
Image:Home tab with columns for different sections 23423.png|Home tab with columns for different sections
Image:Home tab with favicons 23432.png|Home tab with favicons
Image:Home Tab share-style variations 23423.png|Home Tab share-style variations
Image:Home tab style with contacts and sharing 23423.jpg|Home tab style with contacts and sharing
</gallery>
 
Files too big for the wiki gallery:
* [http://people.mozilla.com/~jboriss/dump/sketches_of_clipboard.png Sketches using clipboard data]
* [http://people.mozilla.com/~jboriss/dump/removing_a_site.png Minimal overlay grid new tab with basic configuration]

Latest revision as of 03:00, 10 January 2014

Please use "Edit with form" above to edit this page.

Status

New Tab Page v2
Stage Feature Overview
Status In progress
Release target Firefox Next
Health OK
Status note This new project seeks to improve and combine New Tab ("about:newtab" in Firefox) and Home ("about:home" in Firefox) into one integrated design on Firefox desktop, mobile, and tablet.

{{#set:Feature name=New Tab Page v2

|Feature stage=Feature Overview |Feature status=In progress |Feature version=Firefox Next |Feature health=OK |Feature status note=This new project seeks to improve and combine New Tab ("about:newtab" in Firefox) and Home ("about:home" in Firefox) into one integrated design on Firefox desktop, mobile, and tablet. }}

Team

Product manager `
Directly Responsible Individual Jennifer Morrow
Lead engineer Blake Winton
Security lead `
Privacy lead `
Localization lead `
Accessibility lead `
QA lead `
UX lead Jennifer Morrow
Product marketing lead `
Operations lead `
Additional members Bryan Clark, Joanne Nagel, Christopher Arnold

{{#set:Feature product manager=`

|Feature feature manager=Jennifer Morrow |Feature lead engineer=Blake Winton |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=Jennifer Morrow |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=Bryan Clark, Joanne Nagel, Christopher Arnold }} {{FeaturePageBody |Feature open issues and risks=# Thumbnails currently not loading in Firefox (they'll need to load consistently before a successful NT2)

  1. May have implications for our search relationships with partners, since involves internal pages where searches are conducted
  2. UX is resource-constrained on both research and implementation side

|Feature overview=Whenever Firefox users open a new tab, their goal is to use it to navigate somewhere.

We'd like to implement a page which displays on new tabs and helps users complete their next task. This will likely include offering options that are most likely to include the user's next task so that valuable time and steps are saved.

Such a page must meet certain requirements:

  1. Load instantly
  2. Not be so distracting as to take users mentally away from their intended task and into an unintended one
  3. Be useful without any configuration, yet can be easily configured and disabled
  4. Does not embarrass the user

Goals

1. Make users more powerful

  • Utilizes usage data Firefox already has. Creates value from what Firefox knows about the people who use it, building a richer experience over time without compromising privacy or security
  • Make users efficient. Has a high likelihood of predicting what the user’s next action is and saving them time in the process. Allows users to easily navigate different locations and contexts
  • Recognize context. Understands that how users browse changes based on their situation, state, and tasks. Does require users to compromise privacy among people in their life.
  • Be the user’s agent and advocate. Welcomes users to their browsing session while being helpful, not overpowering.
  • Non-goal: Work well with a user’s current and future tools. Firefox cannot be all tools to all users, and a successful design will integrate with users’ current workflows and tools Firefox and a user’s tools should be more powerful together: Firefox should not work around or despite a user’s tools.


2. Offer a seamless experience across devices and users

  • Be user-centric, not device-centric. When a Firefox user begins a browsing session, they should always feel they are continuing a web experience with a browser built for them, not having to re-intro duce themselves
  • Feel Firefoxy on any platform. While Firefox is designed differently for different form factors, NT2 will look, feel, and act in accordance with our brand tone and style


3. Successfully Integrate New Tab and Home Tab into one Page

  • Use what we’ve learned and are learning. Integrate and change based on what we learn from research and testing about what users do, how they browser, and how they respond to changes
  • Don’t leave current users in the lurch. While the features NT2 presents will change and some will move, users will not be left unable to find functionality they need
  • Non-goal: Combine all the features of Home Tab and New Tab into one page. Currently, these two pages offer users different options, but a successful design for v2 will curate content strategically in the way that produces the best user experience. Any item present on the page must have a rationale to be displayed other than historical design.

Design

Design spec

Research

Questions to Answer via Research

a. What info I’m looking for
b. What hypothesis I’d like to test
c. What different numbers would indicate

1. How often do users click on thumbnails and launch targets (these) about:newtab?

a. What percent of time in which they see about:newtab do they interact with it? Do they interact with a range of thumbnails and launch targets or just a few? How many thumbnails are displaying for users on average, do they click on the thumbnails that are displaying?
b. As long as thumbnails are displaying, a non-trivial amount of users do click on them. Probably very few users use the launch targets.
c. If thumbnails are basically ignored or used, assuming they are displaying correctly. If launch targets are basically ignored or used

2. How often do users search from about:home?

a. What percent of the time that users see about:home will they do a search from it? How many users press the Home button before doing a search on about:home?
b. Very few users r.ely on about:home for searching, but some small amount of users may rely on it primarily for searching
c. If thumbnails are basically ignored or used, assuming they are displaying correctly. If not enough thumb nails are displaying for users to make this question answerable right now, so be it.

3. How often do users press the “Home” button?

a. Are there users that press the about:home button? If so, what actions are they most likely to take once they see about:home? This one in particular may be skewed by the Test Pilot audience
b. Very few users rely on about:home for searching, but some users rely on it primarily for searching
c. If the number of users who rely on the Home button is small or large, and if there are users who rely on it only or primarily for searching

4. How many users have changed their homepage to be a custom page, blank page, or “show windows from last time?” Also, how many “restore session” on about:home once it starts?

a. An idea of how many users have customized their about:home and how many use session restore
b. Very few users have changed their about:home, while a non-trivial amount restore their session after a crash
c. If the number of users who change about:home is small or largeIf possible, what URLs they replace their about:home with.


Team status notes

  status notes
Products ` `
Engineering ` `
Security sec-review-needed `
Privacy ` `
Localization ` `
Accessibility ` `
Quality assurance ` `
User experience ` `
Product marketing ` `
Operations ` `

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=sec-review-needed |Feature security health=OK |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}


Resources

Blog posts

Research

From the 2011 Test Pilot A/B and Multivariate Studies

Sketches

Sketches, iterations, and visual ideas can be found here now!

Retrieved from "https://wiki.mozilla.org/index.php?title=Firefox/Features/New_Tab_Page_v2&oldid=877042"