I got inspired by the iTunes sidebar today to mock up a browser interface that I had thought about for the last few weeks. In iTunes, a ‘hub application’ approach is taken to music and video content, simplifying and streamlining the experience from acquiring content, to organising and viewing it. I am aware of several ‘new generation’ browser projects, but none really line up with my ideas.
Let me show you what I came up with.
For the average internet’s user, using a browser isn’t merely parsing HTML anymore; we stay on top of news and social ‘updates’ like blogs, RSS feeds, and services like Twitter. We create and share imagery or photos. A massive market has arose in serving and viewing video content. In short; these days, using a browser doesn’t necessarily mean the user is going to want to view a website anymore.
In iTunes, the key to unifying a universe of very different content is a set of groups in the sidebar. This approach allows a very intuitive way of interacting with the main view; there’s just a single window to worry about, and when in doubt, the sidebar explains anything you might want to know. Where do I drag this object? Where could that file have gone? Where am I in the application’s structure?
A screenshot of my dream browser. Click for larger on flickr.
In my interface mockup, I got rid of the notion of tabs, and present websites in the ‘website’ group, the most important sidebar item. The items in the sidebar are relatively limited; your open pages, a control to open a new page, and your favorites, which invokes a list of your favorites in the main view. Again, there’s no way to get confused how you got to your favorites list and how you switch back to a website; it’s all in the place you know you have to look.
As you can notice, the sidebar contains groups for managing and using ‘features’ of everyday websites; news, photos, and videos. If this application were ever to become a reality, I’d suggest the sidebar to be extendible openly; imagine the same, unified interface to all your possible needs. An addition could be made to allow the easy tracking and viewing of classifieds and auction bids, or for working with online maps. The possibilities are virtually endless.
I suggest that in a browser, news is something that should be something that can be achieved independently of sources. The sidebar of my mockup contains the Frontpage feature, a Newsmap-style diverse ‘paper’, composed of high ranking recent news items laid out automatically in a newspaper-like arrangement. The content aggregation is quite similar to Google’s News service. The ‘Recent news’ feature shows the most recent news from credible sources, updated in real time. Lastly, there’s our classic RSS subscriptions, which I don’t think requires any further explanation.
Weren’t you ever bothered by a (perhaps intentionally) crippled Quicktime player? In the days where OS X comes with Quick Look, capable of full screen video playback (even over the network), the experience of video on the internet is very poor. I suggest being more clever about viewing video content; let the user detach video content from websites and view it fullscreen. When a website opens a pop-up with just a Quicktime movie in it and the pop-up is about as large as the video, wouldn’t it be much nicer to open up such a light-weight video window instead of a clumsy browser window instance with a crippled player? Together with integration of movie content in the sidebar, such as movies from your contacts (which could tie in to Youtube subscriptions), movie favorites, and your own personal 24/7 channel with suggested videos. This doesn’t even have to be a very accurate service; it’s only to provide the user content at his discretion.
Watching video online might actually become fun again.
The same basic idea goes for photos. Using address book information and .Mac gallery / Flickr services, you can make a stream of images from your contacts. Image favorites deserve their own category, of course, for visual browsing, and again, providing ‘unexpected’ content through a stream like recently uploaded photos to online services allows for true ‘browsing’ of the content.
I’ve heard some critique on this idea. The first and foremost was the prioritizing of the interface on the same level as the internet content. I believe it would be a great idea to have an ‘extended’ mode that essentially minimizes your sidebar and window profile to maximise your viewing size. This could also help your view websites, news, videos and image slideshows.
This ‘viewing’ state of the window is also what I intend to use for my second point of critique, the viewing of history. I haven’t heard any questions in regards to history when I presented my mockup to people, but personally, I think browsing history should be a lot more visual. In the toolbar, you can see a ‘Time Machine’-like button, that allows you to, yes, go back in time and browse your visiting history quickly and visually. Alternatively, you can search through it or bookmark pages directly.
As a last addendum, I always loved the way iTunes handled downloads. I always manage to get my downloads window stuck behind my browser window, forcing me to expose it to the foregrond or digging it up through a menu. With iTunes, or my dream browser, you know where to look.
Lastly, I certainly won’t code this application or pay someone to make it. It served as personal experimentation and I shared it as inspiration after being massively disappointed with the Mac beta version of Firefox 3.0. I hope you enjoyed reading and seeing what I dream to see in a browser one day.
i like it :)
That looks like an incredible browser. I’d love to see this created in the future. Looks awesome.
Nice. Apple should really look into doing something along the lines of that.
I would be more than happy to make it, maybe in the summer when I have more time.
The problem for indie devs is that most user’s expect to get a high standard of browser foe fee. I mean look at camino, safari and firefox! To compete they have to put in a lot of time and effort and most would like to see a return on that kind of investment.
Having said that, omni web seems to be doing well.
In this mockup I’m seeing actually two great things.
The first one I noticed was of course the use of the sidebar which brings Unity obviously like you said. Now we can drop the tabs to get something along the lines of Leopard and aesthetically pleasing to the eye and it’s even better to use.
The second thing is the Social thing like Flock. I really like being able to share photos with my friends or see what they’re listening right know thanks to Last.fm or what are their favorite movies on iTunes thanks to the Rating system. The other thing that’d be really crazy would be to add plug-ins which could bring much more possibilities to the browser and to the user.
However the only thing I don’t really like is the Quicklook support. In fact what I don’t like in the idea (though that’s a brilliant one) is having a floating window to watch content. I don’t like having too much windows on my screen (probably because I’ve a 13’3 macbook) and if I want to read the text on the page while I’m watching the video, I’ve to drag around the window somewhere else because it’s hiding the text I want to read.
I’d love to see more mockups of that thing, like the “Your Frontpage” screen. I’d see something like iPhoto or even Coverflow + quicklook support to browse “the Internet” without even going to that website you know ? :)
Can someone please start developing….
omniweb is great, I use it all the time (even the 5.7 _BETA_ )
but I would love if omni could adopt the new finder/itunes/whatever side bar in leopard to expand omniweb.
they should mix bookmarks, favorite, history, downloads with thumbnails-tabs)
kind of like that mockups.
It seems like a lot of those is in the Flock browser? I’ve not used it for more than an hour, but it’s whole purpose is to allow users to “stay on top of news and social updates like blogs, RSS feeds, and services like Twitter”
Visually, it’s pretty cluttered, but it is theme-able – might be possible to create your “dream browser” by having creating a theme for Flock, stripping out some stuff? It’d save having to code another entire browser from scratch..
Although, creating that theme might be just as much work as creating a front-end to Webkit and adding to it..
As for the mockup itself – one thing that isn’t clear – how does it deal with opening multiple websites at once? Most of the people I’ve seen use a browser – those who get confused by tabs and such – still use multiple windows quite a lot..
I think the Shiira tab-preview way of dealing with tabs is far less confusing than the “normal” (how Firefox/Safari deal with them).
If you can still see that web-page you were on a second in the bar, it’s fairly intuitive the page you were on isn’t gone, it’s just been “shrunk” into the tab bar..
Wow, this is an excellent mockup. I like your vision for a new browser. I might have to start using Opera a less exclusively if this becomes available.
@Danny: If you could actually make this, I would be forever indebted to you. How much would you charge if you decide on doing that?
I think is possible with webkit
The idea is good, also the design is great, but reminds me th e RSS feed reader NewsLife. But in my opinion the sidebar can be uncomfortable, and I love the quick look for the videos.
That looks excellent — nicely done.
I hope Apple will be doing something similar in the future. The bookmark sidebar is really great and I can remember Apple has filed a patent for it, not too long a go.
That looks really awesome. There isn’t a lot of originality going on in the browser space, and this has real potential.
@NetOperator – I have already started. To be honest to really compete I would have to make it free, but maybe have some sort of affiliate link scheme in there.
If it takes up a lot of my time then I will charge $20 at the most but if its just a fun project (which I see it being) I will give it away.
As someone has pointed out, WebKit does most of the work so I could get the bulk of the obvious functionality done quickly but its the finer points that take the time.
Hi guys (esp Danny),
I am fascinated by this project and it kinda shares some ideas I had in the browser space myself.
I want to offer some help, so my colleagues and I at GoSquared are willing to host the project, and provide storage etc for when the project is available publicly. Please contact us if you want to discuss this further at
http://www.gosquared.com/contact/
We would also be more than happy to promote the project on our own site.
Many thanks,
James
Hey guys,
Well I had my first session with it this evening (I’m in the UK) and I got some basics down, so I guess I better officially announce that I’m taking this on (or something to that affect).
But I can’t promise anything (as I’m sure you will understand) I have a big release of my own software around the corner so that will have priority for the time being. But Im looking forward to it, it could be really quite fun :-)
Holy shizit Sebastiaan! You are my new hero. Literally, just yesterday I was thinking somebody should re-design safari’s or another browser’s interface… and then the next day I load my RSS reader and what do you know, here is your amazingly perfect mock up. Seriously, this needs to be made and fast!
Your browser is unbalanced… Looks awful with centered fixed-width sites especially. (You blog comes to mind)
From the author: Thanks, everyone. Your enthusiastic reactions are inspiring, and I’ll do my best to make some more mockups soon. I really appreciate everyone who offers to code this together; as I said on my twitter stream, I’ll make you an icon for free if you can implement this.
Kenneth; please read the blog post in its entirety. I suggest an expanded viewing mode – the sidebar is not set in stone.
Hi everyone, just to say we’re working with Danny and had a chat today about the browser.
We’re really excited, and have written a quick post about it in response:
http://www.gosquared.com/liquidicity/archives/321
Cheers guys,
We’re gonna make this thing!!
I would suggest that, since today most RSS-aware browsers only regroup the traditionnal RSS reader and the basic browser into one single application, without any further integration, this ideal browser could be able to associate automatically any RSS-enabled website with its feed, and to display the number of new entries next to the bookmark name.
It would allow the user to be informed of the updates of his bookmarked websites, and view them only when they change.
If I am not mistaken, such a functionnality is not included in any browser, although it is the direct consequence of mixing RSS/Atom readers and browsers !
If this browser reaches a state of existence one day, I hope that it will include such a feature !
G-R-E-A-T! Finally, the Apple-like browser Apple did´nt bring.
I experimented with Shiira, which is quite nice, only it doesn´t work ;-), but yours goes far, far beyond.