is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
In spite of its imperfect feature set, I still find myself using the Omni Group’s OmniWeb 5 browser day in and day out. I like it, and I want it to succeed. But I can’t help but keep a mental tally of tweaks I’d like to see made to the interface. So last night I took a screen shot of the browser (using my trusty copy of Snapz Pro X), sat down in front of Photoshop, and started mocking up some of those ideas.
Very quickly, here are some details of what I came up with — the images on the left are how they appear in OmniWeb and the ones are the right are my tweaks. I’ll say right up front — the majority of these ideas were swiped from other browsers, especially Safari, so if they look suspiciously familiar, there’s why. There’s also a full size comp available.
My Favorite Kind of Favorites Bar
The current favorites bar is too cluttered, so I’ve done a few things to reduce the visual noise: First, I’ve increased the height of the bar by a few pixels to give the items it holds a little room. Second, I’ve gotten rid of the Finder-like folder icons that OmniWeb uses to indicate a folder of bookmarks, and replaced them with little disclosure arrows.
And third, for links not enclosed in folders, I’ve converted the favicons — the little 16 pixel squares that Web sites display next to their URL — to grayscale in the off-state; I figure when users roll-over the links, OmniWeb can display the full-color versions.
Above: the old OmniWeb favorites bar, at left, and my tweaked version, at right. Below, the current OmniWeb location field and Google search field, at left, and my changes, at right.
You’ll also notice, I’ve added a very faint vertical dotted line between the links to help separate them better. I think this prevents them from running together, a problem I’ve had with Safari.
Finally, I’ve added a little Close widget to the far left of the favorites bar. Now, I know that this is absolutely the wrong place for such a control, and to be honest, I couldn’t come up with the right place for it. But I really, really want a way of closing a browser tab in addition to the Close widget that the browser tucks in the visual tab drawer (see below for a glimpse of that). OmniWeb’s visual tab drawer is a great innovation, but not having a Close widget somewhere at the top of the window — where Close widgets always reside — can be disorienting.
The Right Side
These buttons have gone out of style, but I find it very, very handy to have a Go button to the right of the location field. Probably on more occasions than the average user, I find myself without a keyboard while using my Mac (I won’t go into why). In those instances, I need to be able to do as much as possible with only a mouse, including pasting URLs into the location field and telling the browser to go to that location. Without a button like the one with the gray arrow I’ve added above, that’s impossible.
Just to the right of that is the now-ubiquitous Google search field. I like it, but I have two quibbles: OmniWeb should swipe Apple’s SnapBack feature — the orange arrow icon I’ve added — which allows you to return instantly to your Google search results regardless of how far you’ve wandered away from them by clicking through various links. And second, the fringing on the field’s edges are cosmetically inelegant (they appear that way on one of my Macs, anyway); here I’ve very quickly cleaned them up.
Show Me the Flash
As I mentioned above, OmniWeb’s visual tab drawer is awesome, even if it does tuck away a tab’s Close widget in a sometimes-inconvenient location. But something else irks me about it: if you have a Flash movie taking up a large part — or all — of a Web page, the thubmnail that OmniWeb produces is essentially blank. My mock-up here shows a thumbnail of Macromedia.com, the top half of which would normally be just a blank gray field because of its generous use of Flash. This is, no doubt, a nontrivial feat that would require some tricky engineering, but to really fulfill the promise of OmniWeb’s innovation, I think it’s a must.
Above: OmniWeb, at left, currently can’t generate Flash thumbnails. In my version, at right, it can.
Caveats
Keep in mind that this was all done ad hoc, thrown together a bit brutishly and no doubt lacking in some measure of thoughtfulness. Mostly, these suggestions just represent the changes that would benefit me, so I’m not saying they’d stand up to any level of serious heuristic evaluations or anything. And they’re certainly not meant to be beautiful, either. When it comes to designing applications — real, desktop-bound applications, not the awkward approximations you see on the Web — there are many, many more skilled designers than me.
+
19 Comments
Jonathan Underwood
I like your take on the the favorites bar. While using OmniWeb I gave it a go but ended up hiding it and using the menu bar bookmarks.
If OmniGroup could make it folder icons be arrows and give it more space I think I would use it.
I had to chuckle about your comments regarding the display of flash images in thumbnails. While I totally agree that this is something OmniWeb should do, it’s exactly the extra kind of feature I can see talking my QC team into marking down from a priority bug to a ‘nice-to-have’ to be implemented in the future. What percentage of web pages does the average user of OmniWeb visit that contain large areas of Flash content? I wouldn’t think it’s a very high number.
Jonathan Underwood
another thing is the preview doesn’t handle ebay very well. all of my thumbs are white.
One thing that I’d like to see is some use of the ‘auto-show’ aspect of the Dock, for things like the favourites bar, and perhaps the tab drawer.
For the favourites bar, this might be combined with the ‘minimise’ mechanism that the old Mozilla employed to collapse their tool bars.
In it’s (optional) collapsed state (as opposed to completely hidden, i.e. not used), the favourites bar could auto-expand when you pause over it’s reveal region (i.e. the visible part of the collapsed bar.)
…oh, also meant to say I quite like your suggestions for the favourites bar, in particular losing the folders.
OTOH this could conflict with the fact that there are multiple types, and states, of containers that need to be differentiated (normal folders, folder with updates, RSS feeds, Most Visited folder.)
Also, your idea to use Favicon colour to denote focus is appealing, but you’d have to evaluate against any impact on recognition (is it shape, or colour that most aides in recognition… which is their major function along with ‘branding’… which is functionally the same thing anyway.)
Having said that, I personally find an interesting tension with Favicons, OT1H I tend to miss them in Safari, but also appreciate its uncluttered appearance. In OW, the Favicons can look a bit cluttered… indeed, part of the solution might be more padding, as you suggest.
As for the close element, I’m not so sure, to me that sort of suggests closing (or hiding) the favourites bar itself, as opposed to the active tab. While close buttons on the tabs themselves may not the best solution, since they’re a moving target, the direct association is had to beat, for clarity of purpose.
One of my pet peeves is the waste of space in the Page Info/Site Preferences panel, and the clumsy handling of RSS feeds therein.
Excellent, I like your suggestions to change the bookmarks toolbar particularly. I’m in the same boat, I keep coming back to Omniweb – I love the way it works, but some parts of the interface look cluttered and inelegant.
The other part of the interface I’d like to see improved (apart from the toolbar icons) is the download manager. Especially when items are downloading – the heavily condensed text is just plain ugly. It needs the alternating light grey/white striping. This is where I think Safari excels – a really well designed download manager.
As for the search field. I know not why its so pixelated. The good news is that this is just an image, and it should just be a matter of replacing it with an anti-aliased version.
It’s a detail, but the kind of detail that makes an interface ever more usable: The SnapBack button for the Google search should return you to the results page from which you wandered off.
It took Safari a few releases to learn that if you clicked a link from results page 4, chances are that you will want to SnapBack to results page 4.
Dietmar: that’s a great point. I hadn’t realized that Safari’s SnapBack now has that intelligence. Thanks for pointing it out.
Jonathan
I find it funny that you criticise OW for having a cluttered Favourites toolbar and then mock one up that is even more cluttered and ugly! :-p
FWIW, OmniWeb 5 does have a “Snapback” feature (and one that is on steroids cf. Safari). Just customise your Navigation toolbar (View>Toolbars>Customise Navigation Bar…) and add the Mark page buttons. While browsing OW5 will automatically Mark important pages for you which you can jump back or forward to, and you can also choose to Mark your own pages if you so wish.
Khoi: I didn’t realize that either until today. I first noticed that it didn’t have that feature on Jaguar. Wanting to criticize it now, I checked the latest Safari and realized that I wasn’t the only one who thought it ought to be fixed.
Andrew
About the close, in Omniweb if you have multiple tabs open and you click the standard red close widget it will ask if you want to close just the tab or the whole window. Not very intuitive I know. I only found it by accident.
Buckyball
These are some nice ideas you’ve got there. Personally, I want another feature. There are too many sites with all those overheads, banner ads, text inserts, etc. Basically, this could extend the idea of OmniWeb’s site preferences and source editor redisplay to automatically change HTML of layout to remove them.
Richard
I hope that you are communicating with the OW development team. I am impressed with their desire to be responsive to the input of the users. Not all “want list” items may make it into the browser, but they are trying to make a “better browser”.
I very much miss the sidebar for navigating through bookmarks whether it is in OW, Safari or whatever. It is a better way.
Bookmark management/adding bookmarks is still pretty rough. In particular, OW lacks drag and drop capability that Safari, for example, has. The Address Window displays bookmarks:/” when in the full page bookmarks mode where as Safari still displays the URL of the previous window so that you can just drag it where you want and drop it.
I prefer the bookmarks bar to have a “>>” at the end of the first row rather than continuing on to another row. Some people apparently feel that this makes the bookmarks less accessible, but I have three rows of folders full of bookmarks there (and many more in the main section) and so it does take up more screen space than desired and there is no “grippie” to collapse the bookmark bar when it is not desire, but leave the address window/tool bar visible.
I am hoping that there will be a new release before too long which incorporated not only UI changes, but the newer web core. (OW could use a bit more speed, particularly in caching operations.)
OW has a lot of potential which I hope will be built upon on a continuing basis.
I have posted an entry to my blog, Perfection Is Boring, about how I took the mockup Khoi made for this article and put it to use in Camino. The link is below:
In spite of its 
I like your take on the the favorites bar. While using OmniWeb I gave it a go but ended up hiding it and using the menu bar bookmarks.
If OmniGroup could make it folder icons be arrows and give it more space I think I would use it.
I had to chuckle about your comments regarding the display of flash images in thumbnails. While I totally agree that this is something OmniWeb should do, it’s exactly the extra kind of feature I can see talking my QC team into marking down from a priority bug to a ‘nice-to-have’ to be implemented in the future. What percentage of web pages does the average user of OmniWeb visit that contain large areas of Flash content? I wouldn’t think it’s a very high number.
another thing is the preview doesn’t handle ebay very well. all of my thumbs are white.
One thing that I’d like to see is some use of the ‘auto-show’ aspect of the Dock, for things like the favourites bar, and perhaps the tab drawer.
For the favourites bar, this might be combined with the ‘minimise’ mechanism that the old Mozilla employed to collapse their tool bars.
In it’s (optional) collapsed state (as opposed to completely hidden, i.e. not used), the favourites bar could auto-expand when you pause over it’s reveal region (i.e. the visible part of the collapsed bar.)
…oh, also meant to say I quite like your suggestions for the favourites bar, in particular losing the folders.
OTOH this could conflict with the fact that there are multiple types, and states, of containers that need to be differentiated (normal folders, folder with updates, RSS feeds, Most Visited folder.)
Also, your idea to use Favicon colour to denote focus is appealing, but you’d have to evaluate against any impact on recognition (is it shape, or colour that most aides in recognition… which is their major function along with ‘branding’… which is functionally the same thing anyway.)
Having said that, I personally find an interesting tension with Favicons, OT1H I tend to miss them in Safari, but also appreciate its uncluttered appearance. In OW, the Favicons can look a bit cluttered… indeed, part of the solution might be more padding, as you suggest.
As for the close element, I’m not so sure, to me that sort of suggests closing (or hiding) the favourites bar itself, as opposed to the active tab. While close buttons on the tabs themselves may not the best solution, since they’re a moving target, the direct association is had to beat, for clarity of purpose.
One of my pet peeves is the waste of space in the Page Info/Site Preferences panel, and the clumsy handling of RSS feeds therein.
Excellent, I like your suggestions to change the bookmarks toolbar particularly. I’m in the same boat, I keep coming back to Omniweb – I love the way it works, but some parts of the interface look cluttered and inelegant.
The other part of the interface I’d like to see improved (apart from the toolbar icons) is the download manager. Especially when items are downloading – the heavily condensed text is just plain ugly. It needs the alternating light grey/white striping. This is where I think Safari excels – a really well designed download manager.
As for the search field. I know not why its so pixelated. The good news is that this is just an image, and it should just be a matter of replacing it with an anti-aliased version.
It’s a detail, but the kind of detail that makes an interface ever more usable: The SnapBack button for the Google search should return you to the results page from which you wandered off.
It took Safari a few releases to learn that if you clicked a link from results page 4, chances are that you will want to SnapBack to results page 4.
Dietmar: that’s a great point. I hadn’t realized that Safari’s SnapBack now has that intelligence. Thanks for pointing it out.
I find it funny that you criticise OW for having a cluttered Favourites toolbar and then mock one up that is even more cluttered and ugly! :-p
FWIW, OmniWeb 5 does have a “Snapback” feature (and one that is on steroids cf. Safari). Just customise your Navigation toolbar (View>Toolbars>Customise Navigation Bar…) and add the Mark page buttons. While browsing OW5 will automatically Mark important pages for you which you can jump back or forward to, and you can also choose to Mark your own pages if you so wish.
Khoi: I didn’t realize that either until today. I first noticed that it didn’t have that feature on Jaguar. Wanting to criticize it now, I checked the latest Safari and realized that I wasn’t the only one who thought it ought to be fixed.
About the close, in Omniweb if you have multiple tabs open and you click the standard red close widget it will ask if you want to close just the tab or the whole window. Not very intuitive I know. I only found it by accident.
These are some nice ideas you’ve got there. Personally, I want another feature. There are too many sites with all those overheads, banner ads, text inserts, etc. Basically, this could extend the idea of OmniWeb’s site preferences and source editor redisplay to automatically change HTML of layout to remove them.
I hope that you are communicating with the OW development team. I am impressed with their desire to be responsive to the input of the users. Not all “want list” items may make it into the browser, but they are trying to make a “better browser”.
I very much miss the sidebar for navigating through bookmarks whether it is in OW, Safari or whatever. It is a better way.
Bookmark management/adding bookmarks is still pretty rough. In particular, OW lacks drag and drop capability that Safari, for example, has. The Address Window displays bookmarks:/” when in the full page bookmarks mode where as Safari still displays the URL of the previous window so that you can just drag it where you want and drop it.
I prefer the bookmarks bar to have a “>>” at the end of the first row rather than continuing on to another row. Some people apparently feel that this makes the bookmarks less accessible, but I have three rows of folders full of bookmarks there (and many more in the main section) and so it does take up more screen space than desired and there is no “grippie” to collapse the bookmark bar when it is not desire, but leave the address window/tool bar visible.
I am hoping that there will be a new release before too long which incorporated not only UI changes, but the newer web core. (OW could use a bit more speed, particularly in caching operations.)
OW has a lot of potential which I hope will be built upon on a continuing basis.
Really nice suggestions. I love the favorite bar look, although I disagree with you about the close widget.
Would you mind terribly if we actually used your favorites bar mockup? I’ve been wanting to redo that UI for a long time, now…
Tim, be my guest. It would be besides the point if I said no!
Excellent! Sounds as if this article has had the desired effect!
I have posted an entry to my blog, Perfection Is Boring, about how I took the mockup Khoi made for this article and put it to use in Camino. The link is below:
http://www.radiantrock.com/blog/index.php?p=57
OmniWeb’s Page marking feature doesn’t work on google results, so it doesn’t really work as well as snapback.
Oops, I take that back. weird, it didn’t work, then it did. OW flakiness I guess.