Experiences on the Front Lines of User Interfaces and Web Development

Web Browser UI differences: refresh / cancel buttons

A few weeks ago I wrote about the differences in the 4 major browsers' search / address bar.  As promised, this is part 2 and highlights the subtle and not so subtle differences in how Firefox, Chrome, Safari and Internet Explorer handle the refresh and cancel actions.

IE 8  
Refresh and cancel are on the right of the address
Next to each other as separate buttons
Always available to press (no "go" button)


Firefox 3.6


Refresh and cancel are on the right of the address
Next to each other as separate buttons
Always available to press (no "go" button)


Firefox 3.6 loading


Spinner in the tab, now refresh and cancel are both available



Chrome 5


Single refresh button on the left of the address
A "go" button exists

Chrome 5 loading


Spinner in tab, now the "go" is a cancel button
I do not use the "go" button ever, instead rely more on the reload and back/forward buttons, therefore I find it inconvenient that the "cancel" is so far away and out of place compared to those buttons.



Safari 5


Single refresh button inside the address bar, small target region
No "go" button or cancel


Safari 5 loading
Spinner and text in address bar, entire region is a cancel button. 
Cancel in same place as the refresh, easy to click now as opposed to the initial refresh button


Summary
 Chrome's layout is too spread out and the least user-friendly in these regards.  Safari gets the loading part right (clear indication of loading, nice call to action to cancel and try again).   Overall, Safari is the only one to optimize for the "cancel and retry" action, which I find myself doing a lot when a site is struggling to load due to Internet connectivity issues or DNS hiccups.. however the initial refresh button is a bit small.


Update (11-2010): Chrome 7 updated the interface on the Mac and addressed my usability concerns.  There is no longer a "go" type button, so that matches the other browsers, and more importantly the cancel button is the same as the refresh now.. so no more back and forth all the way across the interface when trying to stop and reload a non-responsive site.



comments powered by Disqus