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.
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.
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.
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.
The Left Nav is a concept that shows greater details for each feature while still providing easy, very common, navigation.
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.
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.
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.