Blog

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.

This week I’m speaking at IUE 2013 on Mobile UX, and how companies with existing web apps often screw it up. Here’s the summary of my talk:

Mobile app usage rose by 35% in 2012. Despite this increase, a quarter of all mobile apps are only used once and never opened again. What makes users keep coming back to some apps and abandon others? The difference lies in the real user experience being delivered by each of these apps. Many companies, in their rush to create a mobile presence, have focused on aesthetics and copying their existing website. Six months later, everyone is looking around a table at each other asking “Why didn’t it work? It looked so beautiful!”

Slides for the talk will be posted here afterwards.

Hi! Thanks for contacting me via email/linkedin/phone/etc. I’m sorry there was some confusion, but I’m not a recruiter. No, I will not help you find talent for your client/company.

It’s nothing personal, in fact, it’s the exact opposite. Read more

Here’s a quick test I ran using the awesome Sim Daltonism

 Read more

As GMail has been rolling out changes to their UI, I’ve been interested to see where the mail in GMail actually appears on the screen. Here’s an infographic I made chronicling the changes of GMail’s look over the past few versions. Some major changes in GMail’s UI over the years have been:

• A 3-tiered priority inbox
• GMail’s “white space” look
• The option to change your layout between Compact, Cozy, and Comfortable

Admittedly, this is very unscientific, and I chose the 3-tier Priority inbox to emphasize what happens when you have no priority mail. Since I have a MacBook, I couldn’t even display the Comfortable layout, which is for large displays.

What is interesting through all of this is how far you have to scan down the page before your eye would hit email. A lot of the functionality is the same, so what’s the benefit of expanding the layout? I’m guessing as people have been getting higher and higher resolution displays, Google has felt less pressure to try and cram information into every pixel. It’s also interesting to see that whitespace is not just uniformly increasing, but being shuffled around in some areas, such as the search bar.

Click on the image for the full-sized version

Getting users to use a new feature by showing others who used the feature isn’t a new concept for interfaces. It’s even more powerful when the other users are friends… because it gives an air of legitimacy to the feature. The technique is probably as old as public markets.

If your friend buys somewhere and tells you about it, well hey, why shouldn’t you do it too? They’ve just taken a lot of the upfront work out of the process for you. LinkedIn does an especially slick job of this with a feature that scans your email contacts and suggests connections.

 Read more

I’ve been using Google+ for a few months now. The most striking difference has been the type of content I see posted in contrast to Facebook.

 Read more

Went to a filming of the Colbert Report last night, where he interviewed my advisor on my research.

The best part was probably the ending

In case you’re wondering, he was not using the iPhone controls I invented. But it’s a pretty good example of why they’re needed!

What’s better than being part of the Old Boy’s Club? Being part of the New Tech club! I got an invite to Google+ a few hours after they were launched, courtesy of a good friend at the Googleplex. I just spent 15 minutes playing around with the interface, and here are some quick notes: (there’s a good overview of Google+ at TechCrunch and NYTimes )

 Read more

The old iconic Food Pyramid has received a serious upgrade today, the MyPlate. Gone is the notion of a pyramid. Instead, we’re shown a plate, with the food portions on it, in all it’s What-You-See-Is-What-You-Get glory. The USDA’s food pyramid originally started out in 1943 as, ironically, a donut

It’s not clear to me if the slices are intentionally the same size, but this is where the concept of what graphically showing people what food they should be easting. While the USDA has gone back and forth about what food groups need to called out, the biggest problem has always been how to communicate to Americans how much they should be noshing, gnawing and guzzling. Read more