Firefox has a great user interface. It’s come a long way and a lot of very talented designers have worked to bring it to a place of visual and interaction stability. So, the question of how to improve becomes more difficult, but also more interesting.
This is an observation more than a criticism, but have you ever noticed how many redundancies occur in Firefox? Chrome’s tack has been to eliminate some of these and scrap the interface down to the bare minimum, which is probably going too far, but perhaps there are ways to clean the UI in places without sacrificing functionality or usability.
This feels like an unfinished blog post…
Yes, it certainly does. I keep waiting for more. đ
Hopefully when it’s finished there will be some justification for the “which is probably going too far” that’s tossed off at Chrome — as someone involved in its UI design I’m interested in feedback.
I’ll finish it!
1. Identify redundant UI
2. ???
3. Profit!
That post is retarded. Is that a redundancy that the site itself contains the company logo? LOL And how would you switch between the tabs without the site name? The arrows on the scrollbar are pure redundancy as well, get rid of now. Gimme a break.
đ I’ll do a followup later with part 2. Before I say what I think “solutions” might be, I want to hear what people think of the “problem.”
Most of the UI redundancy problems are interlinked with one another. I appreciate Chrome’s fresh start minimalism, but they don’t necessarily solve these problems.
The central problems are 1) the tab metaphor and 2) navigation of recent history.
Chrome gets rid of two of the “content indicators” by doing away with the status bar and the title on the title bar. Both of these are fine if 1) the browser’s activity is otherwise indicated (it is), 2) the target of links can be viewed by other means (mousing over), and 3) the width of the tab can fit the title text adequately (failure: http://i287.photobucket.com/albums/ll135/youngistan/Tech%20Thunder/Resources/MaximumTabsInGoogleChromeSmall.gif).
The navigational controls are a relic of Netscape 1.0 (or earlier), and we’ve not yet been able to break free of that conceptual path dependency. Navigating recent history (back, forward, recent history dropdown both next to the back button and inside the location bar) ought to be considered as one logical group. Page loading buttons (the blue-right-pointing-arrow in the location bar, stop botton, and refresh button) are another logical group. Apple Safari simplified this group by making stop & refresh one button. As it stands, these two logical groups are mixed across the UI rather than grouped together.
For the adventurous, the awesomebar and search field could be combined into one. You can already set the awesomebar to do a google search for any non-URL string you enter. Put the two fields together, and instead of the current site favicon, use the search engine favicon.
Three more “direction indicators” could be excised with a less spatial tab metaphor. But we know from your past blog postings that you’re working on that. Avoiding the gutters on either side, the tab-ghetto list, and tabs that compress until they’re unreadable and indistinguishable (hello Chrome!) ought to be avoided. As you pointed out in an earlier post, the (non-)use of the back button (and related group of navigational buttons) is inextricably linked to the use of tabs — different ways of managing recent history by the user.
While the awesomebar’s near instantaneous ability to retrieve bookmarks should obviate the need for the bookmarks bar entirely, perhaps leaving an exposed GUI for visual selection of bookmarks is a good idea, considering 1) people don’t often remember the name or URL of something they bookmarked, 2) people don’t want to have to load the bulky Places interface every time they want to open a bookmark, 3) not everyone is enamored of the current command-line renaissance afflicting Mozilla (i.e. Ubiquity), and 4) there are neat little javascript bookmarklet functions that sit in the bookmarks bar. Nevertheless, a subtler, less space-consuming, less redundant solution could be found.
Inspired, I’m going to remove all the buttons from my copy of Minefield, leaving only the AwesomeBar, and configuring it to do a google search on non-URL strings. Also, I’m turning off the bookmarks and status bars. I guess I’ll play around with tabs extensions while I eagerly await your revolutionary UI solution to the tab metaphor.
The current UI mess is simply due to an accretion of small fixes and innovations over time for the management of these two central problems 1) managing multiple webpages at once (tabs), and 2) navigating recent history. The two are linked and an effective solution will wipe away most of the UI clutter in a conceptual coup de main.
@UI Observer – “Redundancy” is not necessarily bad. Nor am I saying that site content should necessarily become a part of the browser chrome. But I want to point out how many places we are indicating content. Consider Google Chrome, for instance, which gains screen real estate by combining the title with the page and the tab title. There’s value in thinking outside the box, so instead of calling something “retarded,” why not offer an idea instead? And instead of hiding behind a fake handle, why not offer your views with confidence and an identity?
Sorry, my link to Chrome’s tab problem is broken for some reason, so here’s a more familiar link to stand in as a replacement: http://people.mozilla.com/~jboriss/blog/chrome_tabs.png
đ
You’re my hero. I mean it.
As for the third screenshot (interaction), there are two solutions waiting for the UX team’s blessing:
* bug 343396, combine stop and reload
* bug 462644, remove the back/forward dropdown arrow on Mac
A problem with improving this, obviously, is that while redundancies do occur, they don’t necessarily occur consistently. Some sites have whacky URLs that aren’t very recognisable; some sites don’t display the name of the site in the content; some sites have useless title attributes.
I have got rid of my smart bookmarks button though – on the rare occasions I look for stuff in there I use the menu, but mostly I just use the awesomebar.
Tom: “You can already set the awesomebar to do a google search for any non-URL string you enter.”
Unless your DNS provider makes any string into a URL for their own search…
Don’t forget that different people will want to look in different places for the same UI. I personally want to be able to go back two pages at a time (so as to bypass bogus redirect pages) with the keyboard.
The problem with tabs are that tabs should not exist. Tabs are trying to correct for bad window management in the host OS. Get a good window manager, and tabs will be completely unnecessary.
Normally when I think of “redundancy” it means “multiple UI things that do the same thing” perhaps in slightly different ways. But it seems that you’re using it to mean “multiple UI elements that look similar but have entirely different purposes”. Is that a fair characterization?
@Benjamin Smedberg – Absolutely, I’m cheating and using a few definitions of the word “redundancy.” From a development side, redundancy is almost always used for features which perform the same function. So you could say that a key command to close and a close button on a tab are redundant. One example above of this is the back button for going back and the first item under the history down-arrow menu. But for the arrow example and website name example, I’m meaning redundant more in the visual sense – that repeating visual glyphs or text can help to establish an idea, give signage, give unneeded or needed extra visual attention, etc. None of the arrows I’ve circled above do quite the same thing, which is one reason they are drawn in different styles.
@Neil Rashbrook – Absolutely. Redundancy in UI, done well, is vital. In Firefox there’s plenty, because people browse the web differently (see reply to Benjamin Smedberg). For instance, there’s a key command for many features that you could do in the UI. Neither way to perform the action is better, it’s all about who your user is, how he thinks, and how he works. There’s a fine balance in software between providing enough ways to do the same thing, and providing too many ways to do the same thing. Photoshop, for example, I think does a great way of providing multiple ways to do the same thing, depending on which tools a user finds most useful and what his workflow tends to be.
@sep332 I find it useful to think of the interaction problem rather than labeling a method, such as “window managing” or “tabs,” as inherently bad. It could be that what people want to do with their content is something less suited to traditional models of window management and more suited towards something else entirely.
@sep332 â I also disagree that tabs are just a fix for bad window management. If that were the case, there would be some OS in which tabs are not necessary/popular. But in all major OS’s, tabbed interfaces are popular and used in an increasing number of places. Either every major window manager in use is bad, or tabs are different-in-kind and have a functional advantage in certain situations that windows just don’t. I lean toward the latter, although I can’t put my finger on just why.
Also, see what Ed Lee just posted:
http://ed.agadak.net/2009/02/going-places-all-the-different-ways
One piece of “chrome” which, to my eye, offers some opportunity for cleanup/reducing visual cognitive load is the gad between tabs. Currently, there is a line, then a drop shadow then another line between each tab. Safari, for example only has a single line seperating the tabs, with no drop shadow. This looks cleaner to me. Web 2.0 made good use of gradients, which offer excellent, cognitively cheap visual ways to understand layer order and space.
See my image here:
Uploaded with plasq‘s Skitch!
Hmm take 2 đ
http://skitch.com/keith/bffck/mockup
If you’re going to eliminate some piece of UI you’re probably going to have to do so by accepting that you will be making some group or some use case less happy (not always, but usually). For example, when we designed the way page titles are shown in Chrome (only in the tab, which can shrink), we realized we were making it much more difficult to get at them, and accepted this because we felt the usefulness of page titles was generally low compared to the benefits we got from the change. (We can do better than we’re doing now by reworking the current tooltip style of displaying the full title on mouseover, but the general point holds.)
TLDR: You can’t please everyone, and I believe the best designs don’t try. Look to boldly irritate a few people while you make a lot of others’ lives better đ
@sep332: Say I have 15 pages open, what window management behaviour could possibly be considered good? The only way that I can imagine for those pages to be organized in a way that wouldnât lead to a nightmare of cognitive overload is if they were all maximized, and, thus, occupying the same area on the screen. Even Xerox realized decades ago that overlapping windows is a bad idea. This is why people love tabs: no more dealing with overlapping windows, with your eyes jumping all over the place when switching windows, and with administrative debris redundantly duplicated in every single window. The only âwindowâ managers that lack this problem are tiling window managers that have tabs, and those manage tilesânot windows. What window manager do you use, anyway?
I’m a software developer (mostly for Web). All too often I had to deal with users not noticing a huge interface element right in front of them, but pouncing on a tiny one in a corner. Moral of the story: you don’t know how people’s brains work. Just give them options. Call it redundancy if you wish, it is GOOD nevertheless.
Off-topic: I never had to zoom a website to 150% before.
Actually I do believe that “every major window manager in use is bad”. My main argument against tabs is that we don’t need window management to be reimplemented in two places (Firefox and OS), never mind over and over (often badly) in each app. Tabs scale better than most other windowing paradigms, but silos of tabs in individual apps is not as useful as allowing the OS WM to handle it, and also reduces user choice in window/tab management. Compiz is the only WM I know so far that supports tabs ( http://www.youtube.com/watch?v=1nK4_cH5sbM ), but hopefully there will be more soon. You can see in most of the Concept Series forum ( https://labs.mozilla.com/forum/?CategoryID=22 ), almost all of the ideas about tabs would be a duplication of work already done in the OS or better handled by the OS. For other downsides of reimplementing window management per-app, see http://arstechnica.com/software/news/2009/01/dock-and-windows-7-taskbar.ars/2
@David: OS X’s Expose feature would deal with 15 windows, exactly as you describe – by not letting them overlap.
@sep332:
Let me get this straight. In order to find a window, your eyes look around to find it. If they donât find it within a few hundred milliseconds, you enter ExposĂ© mode, look around at all the downsized windows for a second or two, and hopefully figure out where that window youâre trying to find is. Then you choose that window to get out of ExposĂ© mode. Now you have to locate that newly-focused window and reposition your eyes to that windowâs location and size (which is bound to be different from the previous window you were using). Then you can finally get back to work.
Does this sound like what how a âgoodâ window manager should behave? It sounds more like a window management nightmare to me. It looks like youâre using ExposĂ© as a band-aid over the gaping wound of window management. The problem here is the very concept of âwindowsâ. Not even tiling window managers can fix the problem when you have 15 pages open (because theyâre not ZUIs).
Let me contrast this with how insanely easy it usually is to find a tab. First, every time I open a new tab, I subconsciously remember where that tab is. Since tabs are always ordered linearly, my brain naturally maps out the location of each page. Switching to a tab is both effortless and fast. Even with 15 tabs open, locating the one I want is relatively painless. It certainly does not do the same number on my train of thought as any form of window management would have done. Finally, when I switch tabs, my eyes donât need to reorient themselves to the location and size of the new document, because itâs exactly the same. As I said before, I believe that that last feature of tabs is why so many people claim to love tabs.
So, once again, it seems that you have just proven my point: window management is inhumane. If youâre not a masochist, youâre better off usually using tabs (or writing a ZUI).
“In order to find a window, your eyes look around to find it. If they donât find it within a few hundred milliseconds, you enter ExposĂ© mode, look around at all the downsized windows for a second or two, and hopefully figure out where that window youâre trying to find is.”
Not sure how this is different interaction than a ZUI. In fact, if sounds identical to me.
“every time I open a new tab, I subconsciously remember where that tab is. ”
This is definitely not a humane interaction. Hiding relevant state information is just a bad idea.
“tabs are always ordered linearly”
exactly, which means it doesn’t scale exponentially like a 2D or 3D (or more) solution. Exponential scaling is necessary to manage large numbers of tabs (hundreds+).
“window management is inhumane… youâre better off usually using tabs”
Tabs ARE windows, they just have a separate and limited window manager (the browser). They are EXACTLY the same as running every window maximized and just using the Windows taskbar to switch among them.
One of the advantages of being about a week behind on my feeds is that these cliffhanger blogs are almost always unhanged by the time I get there.
But not today.
I think in the long-run window managers should incorporate tab functionality. For now, browsers should implement it, but including it in the OS is intuitive. See http://www.youtube.com/watch?v=ccniJHjo_Uw#t=2m50s for an example implementation completed in Haiku of multiple windows “stacked” on top of a single window.
Hello Sir:
Any idea if there are simiklar blogts like this related to read?