26 Oct 2013

Comparing the Chrome, Safari and Firefox UIs

(Disclosure: I work for Google but not for the Chrome team.)
I find myself using Chrome far more than Safari or Firefox, even both the latter put together. While Firefox may still be a little slower and clunkier than Chrome or Safari, I found it surprising that I tend to avoid Safari, opting instead to use Chrome. Why is this the case? Safari is a top-quality browser, after all, and roughly as fast as Chrome.
Thinking is most likely due to the UI, I compared the UIs:

Safari

Chrome

Firefox

I customized each of the browser toolbars by removing things I don’t use, comparing each browser at its best.
Notice that the Safari UI is far darker and crammed together than Chrome’s, which is lighter and more spacious and airy and comfortable. Safari uses a dark and forbidding gray as the background color of the entire UI — the title bar, tab bar, address bar and bookmarks — while Chrome’s is lighter and more relaxing and happy, rather than dark and forbidding as if from a dystopian sci-fi movie.
Chrome shows the URL in a bigger and comfortable font, while Safari shows the URL in a small font, crammed into an short (in height) address bar. There isn’t enough white space above and below the URL. Safari is also the only one of the three browsers that still shows the favicon next to the URL [1], which makes it cluttered, while Chrome gives the favicon enough whitespace around it, rather than imprisoning it into a small, dark prison cell surrounded by walls on all sides. What a poor life favicons must live in Safari!
Notice also that Safari’s toolbar buttons, like Back and Forward, are smaller, and enclosed in a box, with borders and a gray background, while Chrome’s back arrow doesn’t have an enclosing box — it lives directly in the toolbar. This makes it appear more airy and comfortable, rather than claustrophobic.
Safari and Firefox show the web site title twice — in the tab bar, and the window’s title bar. This is unnecessary and clutters up the UI. And is wrong, because when you have tabs, identifying the window by one of its tabs is wrong. If you have Ars Technica and The Verge loaded in two tabs, then titling the window Ars Technica is plain wrong, because the tabs are not both from Ars Technica.
Safari’s foreground and background tabs are also of almost the same shade of gray, making it hard to tell them apart, while Chrome and Firefox use much lighter shade of gray for the foreground tab, making it easy to see which tab is active. Chrome’s tabs have their left and right edges slope downwards at an angle, which makes it crisper and clearly identifies tabs. Firefox’s are okay, while Safari’s tabs look like they just have a vertical line separating them, without enough separation between them. So, Safari’s tabs visually fuse into a muddled mess, rather than being a collection of crisp, clearly separated tabs. Further, in Chrome, the active tab’s sloping edge is drawn in front of the adjacent background tab, putting the foreground tab in front of the foreground tab, which makes it clear which tab is in the foreground.
Safari still puts the tab bar below the toolbar, which is again wrong — if I press the refresh button or type a URL, only one tab is affected. These controls apply only to one tab, so they should be placed within that tab. Whereas an action that applies to all tabs, like closing the window, should live outside any particular tab. Safari still gets this wrong.
Chrome’s bookmarks are shown in a bigger, readable font, and have favicons, helping you distinguish them, while Safari’s bookmarks is just a line of text, with no icons or colors, making it hard to find or identify a particular bookmark. So much so that I hardly use Safari’s bookmarks.
Safari’s bookmarks bar has a Bookmarks and a Top Sites icon at the very left. Chrome has a Top Sites icon, too, but it’s one icon rather than two, and since it uses a readable font and an icon with color, it’s okay, while Safari’s small icons drained of color make the already bad readability of the bookmark bar worse. Chrome also lets you remove the Apps icon in the bookmark bar if you don’t find it useful, while Safari’s icons in the bookmarks bar can’t be removed.
It’s interesting, and impressive, that Chrome does better than Safari inevery single aspect of the comparison above. That’s a tremendous accomplishment, since Safari is, after all, a great browser, too. But there are degrees of greatness, and all these these tiny decisions, each of which Chrome gets right and Safari wrong, add up, making Chrome a far more usable browser than Safari.
[1] Safari shows the TLS padlock along next to the favicon, which is insecure because web sites can show a padlock icon as their favicon, misleading users into thinking their site is served over an encrypted connection.

No comments:

Post a Comment