The other day I was looking at the URL bar in Chrome, and started wondering how it could be improved to more cleanly convey information.
What Chrome’s URL bar looks like today
From left to right, there’s a few different things the URL bar is trying to communicate:
- The page is secure/encrypted (the green lock, the “s” in https and the green text)
- The protocol (https)
- The domain (www.google.com)
- The path (/calendar/render)
- The page parameters (tab=mc…)
That’s a lot of information to put into one line of text, and as Chrome’s UI shows, it’s not all equally important. They’ve subtly grayed the path and params (and ://), and highlighted the lock and https. Still, it’s kind of a mess to me. So I started designing a few variants to improve it.
First, back to basics, only using typography
That’s kind of boring and ugly, and it still feels very cluttered. So I first started playing around with presenting an uncluttered UI:
Showing only what’s relevant
The protocol (https) and params (tab=mc…) are vestiges of another time when you might use HTTP, FTP or GOPHER, etc, on a regular basis. These days, it’s all HTTP (and switching to HTTPS, the secure version of HTTP, is usually transparently handled by the web server as needed). Likewise, it’s been a long time since I’ve seen anyone manually type params into a URL field. So let’s hide those with a subtle “…” button next to the star. We can still show them if the user wants though:
Clicking on “…” would bring up a list of the URL params
Finally, I separated the domain (google.com) and the path (render/calendar), placing them on opposite sides of the bar to make them more visually distinct.
Still, separating the path and domain may lead to oddities typing in the URL (is it two separate fields? does the path slide from left to right after you type it in?), so I went for another round
A flat look, separating parts by color
I wanted to see what the URL bar would like if you styled it as a Flat UI. It’s cleaner, with a clear distinction between the domain and protocol. But the path and params are still cluttering the bar too much. So let’s throw in that idea of the params being under the “…” button:
Finally, a clean URL bar for Chrome!
It’s clean, the important information is clearly visible, and as a bonus, it uses up a lot less space.
