I am going to have several posts, which document and examine common button standards within electronic interfaces. In part for prosperity, but also as an exercise for my own benefit. The first one I want to look at is the “Refresh/Reload” button.
To me, buttons (apart from text) should have three qualities to maximize usability.
- Appropriate size
- Intuitive glyph
- Intuitive color
Here are three from three of the most popular web browsers: FireFox, Internet Explorer, and Safari.
Size
All three buttons are about the same size in comparison with each other and with the other buttons on each individual interface. I think this is ok because the refresh button shouldn’t really standout too much from the other navigation buttons. It certainly shouldn’t be larger than the main navigation buttons. No real winner here.
Glyph
The FireFox and Safari buttons have used what I consider the standard glyph for refresh buttons. The IE button’s glyph is close, but a little too abstract. It looks more like an up/down than a reload or refresh. It might work better if it were more rounded like the Opera refresh button-indicating repetition. FireFox and Safari tie.
Color
Finally, there is color. Safari fails right away. The entire interface (not just the refresh button) is duo tone silver and black. The button does not stand out at all. While both IE and FireFox use color for their buttons, FireFox chooses a neutral blue. IE chooses a green. To me, green should only be used for the main navigation buttons: back, forward and go. So, the FireFox refresh stands out enough to quickly note it exists, but is different enough from the main navigation so it doesn’t get confused with the main navigation. FireFox wins color.
Winner: FireFox (Version 3.0)
So, in conclusion, FireFox (Version 3.0) has the most usable “Refresh/Reload” button. It is of appropriate size. It has an intuitive and standard glyph. And it utilizes an intuitive color.
Update:
So cool! Thanks for sharing it, Nathan.
Filed under: Electronic Interfaces, Navigation, Standards, Symbols, Usability | Tagged: Buttons, FireFox, IE, Safari, Usability
Wayda go, Dominic! I love this idea of comparing the same function in competing products,
I dug up an old screen shot of NCSA Mosaic from 1995 or so, and guess what? It uses the same circular arrow as Firefox, in blue on gray. However, the arrow starts at the bottom (6 o’clock position), goes around BACKWARDS (Counterclockwise) then ends in a right pointing arrow at 6 o’clock. This is better than either Firefox or Safari today – their arrow (especially Safari’s, which is not even a full circle) seems to say “Forward!”, not “Undo and go back”, as it were, which Mosaic’s does.
I’m curious, what platform are you using? The reason that I ask is that Firefox 3 has what is called visual integration meaning it looks different depending on what you’re running it on. For instance, the refresh button will be metallic (like Safari) on OSX but different on Linux. There is actually a really good image that has every Firefox 3 icon for all three platforms.
I think this idea is a smart one. Different applications should have the same look and feel across your system. It does mean you are ideally conforming to the OS standards which you may not agree with (Apple: why is everything brushed metal?) That’s why I like Linux so much, the look and feel. More polished than Windows, less Apple than OSX. Apple’s apps for Windows still use the brushed metal too, yuk.
Al,
I am using Windows XP. I didn’t realize that FireFox used visual integration. That link you provided to the FireFox icon comparison across platforms is really cool.
I agree that visual integration is a good idea. Most people don’t switch from one OS to another very often. It’s definitely better for applications to conform to the standards of the OS. Having some consistency between applications should shorten the learning curve when learning that application.
Nathan,
Thanks! I’m really interested in checking out that “old screen shot of NCSA Mosaic from 1995.” Would you be able to post it your blog and I’ll link to it?
I agree with you on the Safari glyph. One thing I thought was cool is that if you look at the link Al had in his comment (the one about the various FireFox icons) you will notice that FireFox’s version of the Safari refresh glyph is actually better than the standard Safari glyph.
[...] Tramontana has posted an interesting analysis of how the Reload glyph varies between browsers; take a look! Dominic asked me to post a screen shot [...]
Cool idea, but perhaps you should have considered their functionality also — arguably the most important aspect. In this instance, I think Safari would have the edge because you should notice that Safari has no “stop” button. The refresh turns into the stop button after you click it — genius. There’s never any need for BOTH buttons; but only Safari has taken this into account.
Regardless, my browser of choice is still Firefox.
What is the problem with usability blogs!?
Came here from http://designblog.nzeldes.com/ which shares a similar lack of basic, STANDARD feature such as the sites logo linking back to the main page.
Seems like these blogs are only for people who have already bookmarked it or type the adress manually. Maybe typing the https:// as they are onto it too.
Sander,
I cant speak for everyone, but my problem is similar to that of the cobbler who’s children go without shoes.
I use prebuilt templates for this blog. None are perfect. Some look nice but have poor usability. Some have good usability but don’t look so nice. I suppose I could create my own template, but I’m far too lazy for that.