Supertabs
My submission to the Mozilla Labs Concept Series Summer 09 Design Challenge.
The Foundation
My concept says two big things.
- All tabs are not equal.
- We need a clickable visual representation for websites that is better than favicons and content thumbnails. Similarly to desktop applications world, this can simply be a big icon.
The Video
Watch it on Youtube in HD to see details more clearly.
The Mockups
Supertabs.
Notifications on supertabs.
Notification bubbles on supertabs.
Shortcuts menu on supertabs.
Clickable Mockup
I like to construct a clickable mockup to explore interaction issues more deeply.
The clickable mockup highlights my secondary questions that I have not fully answered, but I believe it is possible to answer them.
- How does the address bar work? For supertabs, it is unnecessary and a waste of space. I do not need to know the exact domain or URL for every page, since the supertab already clearly indicates where I am. I may want to copy the address to some external destination, though, which is why I can still display the addressbar or otherwise get the page URL when needed.
- How does grouping work? The best I could come up with for the time being, is that supertabs act as containers that may have a number of pages under them. I currently represent them as subtabs. This is not ideal and would need more work. However, some amount of grouping is necessary to keep all pages from a supertab close to one another.
- How does a site become a supertab in the first place? An obvious visual way would be by dragging and dropping from regular tabs area into supertabs. There may be other ways, but I didn’t explore this further in this mockup.
Related Work
From a recent Security and Human Behavior workshop:
“SSL doesn't work, but how should websites authenticate themselves to users? Her solution is protected links: a set of secure bookmarks in protected browsers.” — which is exactly the point I was trying to make with Supertabs. Supertabs would be always visible, secure permanent bookmarks.
See also: “pinned applications” in Windows 7, and Chrome OS, both of which incorporate this concept.
Contact
Jaanus Kase, jaanuskase.com
Thanks
Thanks to Kristjan and Priidu who helped me figure out this concept.
I am using icons from Fluid Icons.