Skip links

Firefox Home Tab Concept

This summer I’ve been working at Mozilla with the Firefox UX team. My main project of the summer was to research what the hometab of the future could and should be. I was to give Firefox a useful path to traverse and provide some ideas about the design and experience of the hometab in Firefox.

In starting this project I came up with some predispositions (pre-project thoughts) on hometab, and how people use the internet. I then completed three major types of research: competitor analysis, academic research, and user research. This research led me to the following insights:

Insights

  • We need to equip people with the right tools
  • allow for personal connections
  • gradually engage people within the hometab

From these insights I sketched and iterated on many concepts. I then built a prototype concept. I used this prototype for about two weeks and had my colleagues on the UX team use it as well. I asked for feedback on desires, problems, and future thoughts. With this data I created new mockups showing what I think the hometab of the future should be. These mockups show 10 features of hometab:

Features

  • Universal Search (across the web, your history, download, contacts, etc)
  • Stream (information guilt free way of browsing things you are interested in)
  • Web Apps
  • Sessions (an opt-in approach to restore previous sessions)
  • Contacts in the browser
  • Shared Content (a place to see everything you’ve shared across the web, because it’s important to you)
  • Bookmarks
  • History
  • Downloads
  • Firefox Sync

Hometab is laid out in a way to allow gradual engagement, quick access to important information, and personal connections.

Hometab with universal search and stream view
on Hover of Stream Items, an overlay appears
upon clicking a stream item, a large overlay appears with details and features
web apps that allow for badged notifications
ability to selectively restore tabs from previous sessions
showing contacts right in the browser
clicking a contact brings up an overlay with information and a conversation stream
content that you've shared across the web all in one place for easy findability
hovering over a shared content area brings up an overlay with more information
easy to get to bookmarks with location aware frequency
hovering over a bookmark takes away the favicon overlay and shows a preview of the site
quick searchable history with an option to see your full browsing history
easy to acess searchable downloads which the browser can open when possible
easy acess to Firefox tabs on other computers

Please keep in mind that this project was to map out a general direction for the Firefox UX team and to provide ideas and thoughts on the design and experience of Firefox hometab. In no way is my concept slated for inclusion in Firefox.

In the coming weeks I hope to expand upon this concept with more details about my process and the design shown above. Stay tuned!

Please let me know your thoughts and critique, as I strongly believe in getting good critiques.

Leave a comment

  1. The content of the home tab is definitely something that needs to be done right, and you’re going in the right direction. I think it should look like an integrated page, like the mock-ups for the add-ons manager and preferences.

    The home tab needs to have loads of tabs inside it (like iGoogle), that host different types of content. People could create jetpack add-ons that create a new type of one of these tabs. So you could have tabs for bookmarks, history, etc, like in the example. But you could also have tabs for many other things, like Atom feeds, emails, and whatnot.

  2. Thoughts & Questions:

    How is the Stream assembled?
    It looks good as it is, but i’m concerned it would only look as good and seem as useful for graphically rich sites like Flickr.

    If I restored my last session before, why do I want to access it again?

    Curious, is there a proposed standard for badged notifications for websites? (If not there should be.)

    We should reconsider using the term ‘Favorites’ under Bookmarks. Favorites is what IE calls bookmarks. This could definitely lead to user confusion.

    Also in the bookmarks area, users may expect apparent access to their bookmarks folder structure.

    I do like the overall concept.

  3. Tweets that mention John Wayne Hill : Blog – Firefox Home Tab Concept -- Topsy.com
    Permalink
  4. I would still like the have the old home page too, as you don’t have always control over the content of that page (a central website from your company, or maybe the frontpage of a newspaper). But the left & right columns (bookmarks, web apps) are also useful. Would it be possible to place a single webpage in the middle, instead of a list of favorites ? Maybe as 1 large favorite, if they’re auto-resizing ?

  5. When thinking about the home tab, I always thought its main job was to intelligently identify the most visited/used sites/web apps and provide direct (one click) access to those.

    Apart from using Firefox’s frecency, the order in which the user visits those sites after startup can also be used to order the thumbnails/links.

    I’m a bit weary though of Josh’s idea that the home tab should have “loads of tabs inside it like iGoogle”.

    The rest of the UI is being slimmed down to get out of the user’s way. I’d say the (default) content of the home tab should be chosen with great thought about how it makes the user more efficient in browsing. It is very important not to overload the home page if it is to feel inviting and useful.

  6. Integrate TabCandy into the home tab.

  7. BTW, this all feels like a deja vu … wasn’t Aza experimenting with this a while back? Where did that go?

  8. Can we give feedback here? Here’s mine, in any case.

    I’ve been following the progress of the bug for Firefox 4 (over email) and I’m happy to see this is getting more fleshed out that I thought it would have been, considering you’re working on Firefox 4.0’s home tab… I think this is, already, a very solid proof of concept that could even cut it as a final home tab, even though it has a few obvious issues, in my view, at least, and is plenty of rough around the corners (aka it’s not preeteeh!).

    # the title bar is very old-school. It’s ever present and takes up his own space. Have you considered putting something on the background, more discreet, bigger even, and something that doesn’t use up space?

    # the search bar will be a very big redundancy if it’s just a duplication of what the search bar in the UI is. If it’s something different, “global”, as you say, then it’s great, but that Google logo makes me thing the “global” search is not the default default. It should be, in my opinion, and it should allow the user to use any of his available search engines;

    # while it’s good that things are centered, it’s not so good that the menu (with web apps, bookmarks and so on) is split in two, half in each side. Unless there is a clear (very clear) distiction between the two sides, the whole menu should be in the same place. Have you considered a vertical sidebar of sorts? Something that’s not too wide, not to disrupt the balance;

    # the blog type thing really doesn’t tell me anything. I believe the whole home tab should be composed of widgets, so this should be option, and we should be able to choose what appears up front (bookmarks, sessions, contacts, whatever);

    # the web apps section is fantastic, and definitely an appropriate thing if Firefox is going to get rid of the whole concept of startup pages (aka Home Pages). I believe we should let the user choose his startup pages (and change the name from home pages to startup pages) and let him choose who those pages open (if as normal tabs or as app tabs). We should also allow the user to open those startup pages from the home tab (to mimic the functionality of the current home button). This is something that absolutely has to be considered fore Firefox 4.0, and not only for Firefox 4.x;

    # this is pretty obvious, but the “sessions” title is misleading, since you’ll be restoring tabs, and not sessions. Consider changing the title of this section to something more comprehensive. Also, consider my next point, which, I believe, has something to do to why you called it “sessions”;

    # you should always remember that l10n builds WILL have huge words that will not “fit” into a vision like the one you’re presenting now. Just the small, compact “Web Apps” will grow into things like “aplicaciones de la interneta” or whatever it is in Spanish. So building a more structured menu is probably a must, so it’s able to cope with this kind of line length changes;

    # you also have to take into account that window sizes will vary a lot, from small 400×300 windows, to big ass 2300×1400 windows. Your design needs to be done with that in mind. Elastic pages are great, but they kind of break in big windows, if you want to read text (long lines is a no-no). I always prefer something semi-elastic in web design (not just min max-widths, but also varying margins and so on);

    # I will not comment on the contacts section, since this is, as far as I know, a whole different project, but I think the user should be able to sort his contacts by different categories. By where the contact is, by user-made groups, by availability, by date, by name and so on. This isn’t something hard to make, I think;

    # shared content should be somehow connected to contacts (or the other way around). Most likely with different names. It’s not really helpful to know what you’ve shared or are sharing if you don’t know who you shared or are sharing it with, right? It’s also not particularly useful to see all your shared content. You can try a look at online sharing networks (like p2p and so on) to see how stuff is organized there. You also need to consider what you’ll prioritized: the contacts you share stuff with, or the stuff you share. You’ll probably end up wanting to allow the user to choose, rather than anything else;

    # the bookmarks section SHOULD be much more bookmark oriented. It’s much more useful to have an integrated bookmark manager than having some kind of speed dial or anything. Furthermore, the bookmark manager deals well with both few and many bookmarks, so I’m thinking that’s really the best thing to put in the bookmarks section. It’s also what I was expecting to see. Of course, maybe some widget something for frecency or something, but it should be possible to simply browse all bookmarks;

    # the history section is underdesigned. History logs are usually huge, and that small log is very cool looking, but that’s because it’s small. Have you considering trying to make huge history logs small like that? Maybe putting only one entry per site, and then allowing the user to expand to see all entries on that site… That could be awesome, and much more useful that the current history manager. Also, we should be able to sort history entries, as in the history manager. Well, the history manager itself sucks big time, so I’m not expecting much from this section. The best and most logical thing, in the end, may be merging the bookmarks section and the history section into something else, something customizable and all…

    # the downloads section… isn’t the downloads history going to be changed for Firefox 4? Also, this may become redundant, since it’s basically the downloads tab duplicated, so you may want to simply link to the downloads tab. Remember: links are good! Which leads me to my next point;

    # you will want to link to loads of stuff in the home tab. I’m talking stuff that’s meant to help the user around Firefox. Link to the add-ons manager, to the knowledge base at SUMO, to rock your Firefox, and maybe somewhere else too. This is a great place to put things you want people to know about. And if you create room for links, rather than just categories, you can evolve the whole concept into something more developed. Which is nice;

    # at the end, and I think this is really important, you should create duplicates of things you find somewhere else in Firefox. It’s true that the very concept of home page is mostly useless, but instead of trying to cram stuff into the home tab to, hopefully, make it useful, you should put in stuff that is actually useful and doesn’t belong anywhere else (and cannot be found anywhere else). A download manager? Not needed in the home tab, as you can find it somewhere else (maybe have a link to it?). A speed dial type thing? Maybe it’s needed. Let the user add it as a widget if he wants. A bookmarks manager? Not really needed in the home tab, as you can find it somewhere else (again, a link?). On the other hand, the web apps section is genius. You get what I mean? The home tab should be a place you NEED to use because what’s there can’t be found somewhere else, and not a place where everything from everywhere gets crammed into. Allow the user to put everything in there? Sure, why not? But definitely not by default, and we should definitely allow the user to put stuff there that he CAN’T find somewhere else. A very good example of why this is so important is, in my case, the reason why I don’t use something like iGoogle on my home page: there’s relevant to put there. All the widgets in iGoogle are just small copies of big web pages. Weather, calendar, reader, whatever, I don’t need that all in one page, I will visit each one of those on my own time, as I need them. I understand that some people will want something like that, with everything at one place, but that’s why I’m saying it’s crucial to allow the user to customize the home tab.

    I hope this is fruitful feedback. Keep up the great work!

  9. Before, where it reads “you should create duplicates of things you find somewhere else in Firefox”, it should read “you SHOULDN’T create duplicates of things you find somewhere else in Firefox”

  10. How do you return to the stream view after choosing one of the side buttons? I think it needs its own button.

    @Tiago Sá’s monster reply covered most of my comments in detail.

    Displaying the same UI element in more than one place at the same time is hella confusing for average users, so I agree:
    * don’t duplicate the search box
    * don’t have tabs within this tab.

    Keep experimenting, but right now the 4.0b4pre Tools > Add-ons left-hand nav seems a better layout than your inner area that gets filled up from either side. (Tools > Add-ons has its own flaws — it looks like a web page, but doesn’t have the context menu or selection behavior of one, Grrr.)

    The iGoogle home page does a page of widgets really well (A Firefox home tab that let me place some Google widgets would be awesome.). But a page of widgets isn’t so good for long lists of contacts and bookmarks. Maybe let extensions add a column of widgets and gadgets on the right for power users.

    You’ve already got a name + icon + count for the Bookmarks, Sync, Downloads, etc. buttons; you should make these buttons info-rich without being intrusive, as apps do with their system tray icons. (Heh, Tools > Addons should have counts in its nav buttons!)

    Cheers!

  11. @David Naylor

    I think he was. It was called About:Tab. But then he fell completely off the map and came back with Tab Candy.

  12. The link to the article about critique is 404: it is missing the “/blog” part.

  13. I am good with it so far, just make sure to enable Auto-complete in Google Search, it’s the main reason people are switching their home page to google.com instead of Firefox’s Google page!.

  14. Lots of great comments here. Please keep them coming. I hope to address most of them in upcoming post when I detail each feature.

    Thanks for all the feedback!

  15. Did Google Chrome just copied some of your idea? The Wep Apps!

  16. On Clickable Prototypes | HCID Prototyping Class
    Permalink