As you may know, I’ve been doing a lot of researching and thinking about post Firefox 4 Home Tab during my internship here at Mozilla. I’ve taken the research I’ve conducted, my colleagues thinking, experience and ideas, along with my own experience and ideas and put together some wireframes. These sketches represent some very basic directions that we could take with the Home Tab.
It’s important to note that these concepts represent some very basic and rough ideas of what the home tab could look like in the future. These are in no way absolute directions, but rather provide some jumping off points for future work.
That being said, let’s frame these concepts a bit better.
I’ve been thinking about the word “Home” and it’s meaning for a while. So, what does it mean and how am I using it?
Home: a place to store my stuff. I define home here as a place to store my stuff. This is a very basic definition and certainly does not cover all uses of the word but I’ve found it adequate for my research.
I’ve also done some research looking at current ‘start’ pages on the web, as well as some academic research. Currently most of these ‘start’ pages allow you to collect things, put your things in ‘boxes’, they allow for customization, and usually have some sort of quick access links. But, … they still don’t understand me!
What we really need is a better way to organize and collect my online data, all of it. We need a way to help me find stuff I’ve put online, stuff my friends have put online, and general online trends. We need a way of representing the relationships between these things. We need to better understand people’s locations and how that effects browsing habits. Furthermore, we need a way for me to discover new things, not just random things (which is entertaining at times), but things that matter to me.
I’ve also identified some keywords that I think are important in going forward with my research: Personal, Fast, Digestible, Easy, Stable, Findable, Discoverable, and Delightful.
With this basic framing in place we can now begin to explore this design space via some concepts.
(Please note that I did not wireframe all my ideas, concepts, and sketches but rather only a subset of these)
Sessions & Discover
The Sessions & Discover concept illustrates many ideas. First, you have a basic session restore feature that allows you to save and restore browsing session with ease. The sites feature is basically a location aware list of your favorite bookmarks. The Links feature is a listing of all the links, photos, videos, etc that you have shared across the web; this makes finding these links much easier as they are likely pretty important to you. Next up we have the Discover feature. This feature is a way for Firefox to show you things that you are interested in that you might not have discovered yet. For instance, if you were big into photography, like me, Firefox might ‘know’ this by your browsing history, bookmarks, etc. Firefox could then easily find other websites and applications that you are likely to be interesting to you. On the very right is the Contacts feature. This feature collects all of your contacts from across the web and lets you know who is online in a open, non-platform binding manner.
Many of these features are included in other concepts below.
Drawers
The Drawers concept includes features such as Sites, Links, and Contacts. Furthermore it features a Downloads section which lists all of your downloads for greatly findability. History is located on the left side of the browser and slides out, as a drawer, to list your browsing history. Additionally a Discover drawer is located on the right which also slides out and shows things that you could discover.
WordPress
The WordPress concept takes many of the above features and puts them in a very familiar WordPress like layout. This would allow for a more detail per individual feature while still being navigatable. Furthermore, this concept features a Personal Search which allows you to search across all of your personal items, history, links, etc.
Post in the Middle
The Post in the Middle concept shows many of the same features as the concepts above. Additionally, this concept features a quick post area that allows for quickly posting to a blog; as well as a simple ToDo list.
Spokes
The Spokes concept is a way to show the relationships of your data to you. You could click on the Sites icon to see your bookmarks, or click on Contacts to see a listing of friends; from there you could dive deeper to take a look at what links you have shared with a particular friend, or what links they have shared with you.
Left Nav
The Left Nav is a concept that shows greater details for each feature while still providing easy, very common, navigation.
Grid
The Grid concept is a way to show lots of information in an overview like state. Individual items could be drilled down into to see more detail and information. Furthermore, this concept has a Web Clips feature which would allow you to ‘clip’ a certain part of a website and have it shown and updated on your home page (shopping for prices, game scores, etc). The Events feature shows you events in your local area that you might be interested and could also pull information in from various calendars.
As a Site
The As a Site concept shows what Firefox Home Tab could look like as a website. This could allow you to use a friends computer, but log into Firefox and have access to all of your data.
Timeline
The Timeline concept shows your history, discovery items, and trending topics in a timeline view. This view shows history along a timeline as well as showing ‘future history’, Discovery towards the front. This allows for a great mental model of things that you might be interested in going to, but have not yet visited. Individual favicons would be displayed along the top of the line if a topic/website is trending across the web or below the line if a topic/website is more personal to just you. Each favicon could be clicked to see more information. Additionally, a slider along the bottom of the page allows for different zoom levels to get a broad or vary narrow view of your personal timeline.
Hitchhiker’s Guide
The Hitchhiker’s Guide concept is directly inspired from the book interface of the movie. This provides a delightful way of exploring your personal information gathered from across the web.
Feedback, Critique, and Future Directions
I presented these ideas and concepts to the Firefox UX team, of which I’m a proud proud member! My colleagues gave me great feedback, critique, and suggestions. Some feedback that I recieved was that there wasn’t always a clear visual hierarchy to these designs, there was a desire to see other firefox content within these concepts, that clips and contacts are great, worry about how to show different web applications (not app tabs), a worry about Links vs Sites, thoughts on how to scale these ideas to other devices, thoughts on sharing things via the browser, comments on how to make Firefox Home Tab more personal, as well as how to show that things are private and secure, and much much more.
Future directions include iterating on these and other ideas, ideating on my colleagues great feedback and critique, and getting more public feedback. Furthermore, I wish to explore more design inspiration for future interfaces. I also wish to further think about how concepts might scale to other devices, and how to make the home tab much more personal.
One of the things that worry me is that many (including you) seem to be under the assumption that the home tab won’t have the navigation toolbar, and, as far as I know, this hasn’t been decided yet.
And I should sure hope they decide to let it have the normal navigation bar, otherwise you’ll see loads of people going “oh no! Firefox doesn’t have a place for me sites!”
Other than that, awesome work you’ve got going on there! Great stuff! I’m looking forward to more!
Lots of neat ideas here! It looks like there’s a lot of room for exploration of both the types of functionality that could be provided from a Home Tab, and the designs that would present this functionality to the user.
Some of these concepts give the impression of being a collection of separate “widgets” or tools. As there are many such widgets that could be useful, users might be interested in customizing their own Home Tab. Is there a plan to make the Home content easily customizable and extensible (e.g. via Jetpacks)?
Interesting stuff…
Like the WordPress one, but thats probably due to familiarity.
There’s a lot to like.
I like Sessions and Discover.
Post in the Middle could be awesome. Often you want to make a “post” bringing together ideas from several tabs, so it needs access to them and your history, and a smart drag and drop that creates the web link and title and tags the pages you reference in your History. I assume it will be easy to change the posting provider, for example, I make notes to myself in TiddlyWiki. If it provides enough flexibility then you wind up with The Grid or an iGoogle-style widget page; not that there’s anything wrong with that!
I get the impression that people designing the Home Tab want to cram too much stuff into it. I think I would prefer a more clear jumping off point for my actual browsing and not some place that is trying to be an end in itself.
I think it would be worthwhile exploring the possibility of having the Home Tab show only a grid of “frecently” visited sites, with the ability to “pin” sites into the grid, or, at a minimum, give such a grid at least two-thirds of the total space in the Home Tab. Look at Safary.
Left Nav and Timeline are my favorites, the first because it seems to allow more functionality for the home tab than any other and also because it fits in with the new addons manager and the future in-content options panel, and the second because it expands greatly on the idea of history/downloads that firefox already has, while also looking pretty and straight forward for any user to understand.
The Spokes concept also seems the most interesting for fennec because it saves the most space while still providing functionality.
If you want some inspiration for new ideas you might want to check this javascript demo ( http://www.chromeexperiments.com/detail/canopy/ ), I’m sure if the home tab had something as amazing as that (maybe an ever expanding Discover function? Who knows!), it would make firefox even more unique than it already is.