{"id":1287,"date":"2009-03-05T08:10:31","date_gmt":"2009-03-05T16:10:31","guid":{"rendered":"http:\/\/mozillalabs.com\/?p=1287"},"modified":"2009-03-05T08:10:31","modified_gmt":"2009-03-05T16:10:31","slug":"new-tab-page-proposed-design-principles-and-prototype","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/labs\/2009\/03\/new-tab-page-proposed-design-principles-and-prototype\/","title":{"rendered":"New Tab Page: Proposed design principles and prototype"},"content":{"rendered":"<p>Every time you open a new tab, you are opening it to go somewhere. Sometimes it&#8217;s to do a search. Sometimes it&#8217;s to type in a new URL. Sometimes it&#8217;s to check an address you just selected. The only thing you are guaranteed to not want is a blank page.<\/p>\n<p>From the feedback from the last <a href=\"http:\/\/labs.mozilla.com\/2008\/08\/new-tab-concepts\/\">two<\/a> <a href=\"http:\/\/www.azarask.in\/blog\/post\/firefox-31-new-tab-spec\/\">rounds<\/a> of new tab concepts, we know that the page needs to load instantly (even a small wait breaks user experience); that it shouldn\u2019t be visually distracting; and that it should be a launch point into your daily activities. One level higher, the distilled design themes were:<\/p>\n<ul>\n<li><strong>No configuration.<\/strong> Never force the user to set up or fidget with a feature before they use it.<\/li>\n<li><strong>Streamlined.<\/strong> New tabs are opened to start a new task or navigation. If we have a good idea of what that task is (like mapping an address selected on the last tab) or where you want to go, we should help you do that quickly and efficiently.<\/li>\n<li><strong>Polite.<\/strong> The page must be instant load, shouldn\u2019t be distracting, or ever get in your way. Being too &#8220;clever&#8221; results in annoyance: we should be avoid recapitulating Clippy.<\/li>\n<\/ul>\n<p>Over the last week we&#8217;ve gotten back to this project and have come up with an experimental revised design that we believe is consistent with these principles.<\/p>\n<h3>Revised Design<\/h3>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/azaraskin\/3330022683\/sizes\/o\/\"><img><\/a><\/p>\n<p>The design consists of two components. The quick-access bar on the right, and the contextual actions on the upper left.<\/p>\n<p><b>Quick-access Bar<\/b><\/p>\n<p>It may seem strange that the quick-access strip is along the right of the window. It\u2019s there in order to be polite. If you\u2019ve got your mind on opening a new tab and just entering a url, it&#8217;s outside your <a href=\"http:\/\/en.wikipedia.org\/wiki\/Fovea\">foveal vision<\/a>.<\/p>\n<p>The quick-access strip is determined by <em>frecency<\/em> \u2014 the same metric that the <a href=\"http:\/\/www.dria.org\/wordpress\/archives\/2008\/04\/17\/628\/\">Awesome Bar<\/a> uses \u2014 with one twist. Instead of raw frecency over all sites visited, we are only considering those sites that start history &#8220;strands&#8221;. That is, we are using the most frecent sites that you actually begin browsing from. The versatile <a href=\"https:\/\/wiki.mozilla.org\/Places\">Places<\/a> feature of Firefox 3 makes this possible.<\/p>\n<p>Finally, we include the latest updates for each page automatically. For example, both Gmail and Yahoo! Mail provide RSS feeds, so you\u2019ll automatically get to see your latest emails &mdash; without hassle or setup &mdash; if you visit your email often. You don&#8217;t need to know what RSS is to get its benefits.<\/p>\n<p>The thumbnails are supposed to be in <a href=\"http:\/\/www.azarask.in\/blog\/post\/firefox-31-new-tab-spec\/\">grayscale<\/a> (by using <a href=\"https:\/\/developer.mozilla.org\/en\/SVG_improvements_in_Firefox_3\">SVG filters<\/a>), but we weren&#8217;t able to implement that for this iteration.<\/p>\n<p><b>Contextual Actions<\/b><\/p>\n<p>If you are performing a task, the new tab page should make it effortless. Generally, you&#8217;ll select some text and open a new tab to search for that text. The new tab provides a big button so that becomes a one-click action (in the future, it will use your default search provider). If you&#8217;ve selected an address, the new tab provides a one-click action to map it. If you&#8217;ve selected a URL, one-click action will open it. The action system in the future will be extensible, and could be connected with or take inspiration from <a href=\"http:\/\/ubiquity.mozilla.com\">Ubiquity<\/a>.<\/p>\n<p>Also, in case you&#8217;ve just closed a tab you didn&#8217;t mean to, there&#8217;s a contextual action on the new tab to recover it.<\/p>\n<h3>Try It Out<\/h3>\n<p>We&#8217;ve put together a prototype of this revised design to see how this feels and to get wider feedback and review.<\/p>\n<p>This is a rough-cut prototype: the page loads too slowly, the visual design isn&#8217;t right, and you can&#8217;t even tell the browser that you don&#8217;t want a particular site to show up on the new-tab screen.<\/p>\n<p>This prototype also only works on the latest version of Firefox as it takes advantage of new platform capabilities. Here are the directions for helping test and review the revised design:<\/p>\n<ul>\n<li><strong>Step 1.<\/strong> <a href=\"http:\/\/www.mozilla.com\/en-US\/firefox\/all-beta.html\">Download and install<\/a> the latest development build of Firefox 3.1.<\/li>\n<li><strong>Step 2.<\/strong> <a href=\"https:\/\/people.mozilla.com\/~dmills\/abouttab\/abouttab-latest.xpi\">Download and install<\/a> the latest version of the New Tab prototype.<\/li>\n<li><strong>Step 3.<\/strong> Let us know what you think, including what works, what doesn&#8217;t and how we can improve the design by <a href=\"\">commenting here<\/a>, joining us in IRC at #labs, or getting involved on the <a>wiki<\/a>.\n<\/li>\n<\/ul>\n<h3>Open Questions and Problems<\/h3>\n<p>Besides problems we know need to be fixed, there are a number of questions we don&#8217;t know how to approach yet:<\/p>\n<ul>\n<li>We fetch the latest updates, via RSS, for your most visited sites. It&#8217;s convenient, but is making network connections okay? There&#8217;s precedent with live bookmarks.<\/li>\n<li>How much reaching out is okay? If you&#8217;ve selected an address should we just put a map on the new-tab page? If you&#8217;ve selected a single word, should we fetch its definition?<\/li>\n<li>Is there something besides RSS that&#8217;s useful to show related to each page?<\/li>\n<li>What other layouts should we consider?<\/li>\n<\/ul>\n<h3>Background &amp; Other References<\/h3>\n<ul>\n<li><a href=\"http:\/\/labs.mozilla.com\/2008\/08\/new-tab-concepts\">New Tab Concepts<\/a><\/li>\n<li><a href=\"http:\/\/www.azarask.in\/blog\/post\/firefox-31-new-tab-spec\/\">Firefox 3.1 New Tab Spec<\/a><\/li>\n<li><a href=\"http:\/\/ed.agadak.net\/2009\/03\/abouttab-new-tab-page-from-mozilla-labs\">about:tab New Tab Page from Mozilla Labs<\/a><\/li>\n<li><a href=\"http:\/\/hg.mozilla.org\/users\/dmills_mozilla.com\/about-tab\">Source code for the about:tab prototype on hg.mozilla.org<\/a><\/li>\n<\/ul>\n<p>Dan Mills and Ed Lee worked up this prototype. It is based on discussions on the previous blogs posts and comments, IRC, and around the Mozilla offices. Special thanks for input from Sean Martell, Alex Faaborg, and Mike Beltzner. We&#8217;re keen to hear your thoughts and opinions!<\/p>\n<p><em>&#8212; Aza Raskin, on behalf of the New Tab design &amp; prototype team<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every time you open a new tab, you are opening it to go somewhere. Sometimes it&#8217;s to do a search. Sometimes it&#8217;s to type in a new URL. Sometimes it&#8217;s to check an address you just selected. The only thing &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/labs\/2009\/03\/new-tab-page-proposed-design-principles-and-prototype\/\">Continue reading<\/a><\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[4863],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/1287"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/comments?post=1287"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/labs\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}