user interface

How to make the insanely simple overly complicated

I recently flew in business class on quite a few different airlines. Nearly all the seats were “lie flat,” meaning that the seat can, in some way, recline and fold out into a bed of sorts. Generally, these seats have three main jobs:

1) Sit upright (for landing and takeoff)

2) Recline, with a foot rest that slides/folds/Transformers out

3) Slide into a “flat” position

That’s it, pretty simple really.

However, there seems to be an overwhelming design urge that because these seats are for customers who are paying a premium for their ticket, these seats should really be capable of anything. Yes, in addition to fantastic 18yr old scotch, one of the unknown perks to business-class flying is that you can customize your seating to your heart’s content. Unfortunately, that overwhelming urge to show off the yoga-like flexibility of their seats means airlines often have overly complicated controls.

Here’s some examples of seat controls from I used over the past month:

The Toggle-tastic Seat:

IMG_1272

Really, who doesn’t love a good toggle switch?

 

The Secret Garden Seat

Plenty of controls to move your leg rest...  But took a while to figure out that the blue toggle at the bottom was what reclined the seat...

The buttons have different colors, which sort of match what part of the seat they correspond to. You may have noticed there’s no obvious way to recline the seat (probably the most important function!) That’s done by the  blue toggle switch at the bottom, which had no affordance… For several minutes I thought it was a “your-seat-is-working” light.

The Literal Seat

A little better... each part of the seat is a toggle that can be moved in the direction you want. (photo by jasonEscapist)

For these controls, each part of the “seat” is actually its own switch. While somewhat clever (you just move the seat in whatever direction you want), the utility is defeated by trying to elegantly manipulate tiny, oddly shaped toggle switches. It’s also easy to inadvertently bump another part of the seat controls, leading to this feeling of trying to tune an old radio.

The Sane Seat

At last! Simple, large buttons for moving the chair to each position automatically. (photo by thezipper)

Probably the best seat controls I encountered. Each button has a clear mapping, and the most important functions (upright, recline, lie-flat) are large buttons that you can’t miss.

Airline Seat controls others have used

While looking into this, I came across a few other examples of insanely complicated controls:

The Engineering-Comes-First Seat

by FlickrJunkie

Possibly the most ambiguous controls ever. Likely driven by an engineering decision that the 4-way button pad were cheap and readily available. I also like the ambiguous wavy-lines button. Does it make coffee? Massage? Heat?

The Everything’s Important! Seat

by matt1125

The physical locations and yellow lines linking the buttons is good. However, it’s a great example of how no visual design can make an interface feel immediately overwhelming and un-usuable. Especially tasteful was how the designer just reused the same yellow button for Landing and Lie-Flat mode.

The Kitchen Sink Seat

Far too many options, especially along the right side of the panel. What do the two inclined positions really mean?… Why are the position controls labeled with a * ? Are the buttons around the black box for controlling height of the seat, or the angle?

The Let’s-slap-a-label-on-it-and-everything-will-be-better Seat

by s.yume

Hopefully you brought your reading glasses, or you might miss that the < -> on the left side controls the head rest, while the <-> on the right controls the foot rest.

The “My manager’s manager was confused, so we added labels to appease him” Seat

by Gotham Nurse

Not too bad, but the labels are redundant (and too small to read)

The Customization is GREAT Seat

by eliduke

Simple, but clear. Except for the “M” button… which may be some sort of way to save your seat configuration.

In Summary: Don’t Overdesign It

As you looked at these controls, you have thought “but it’s a seat, so just try it out and see what happens! You’ll learn!” If only it was that easy. Due to some sort of safety engineering, most of the seats I encountered were clearly running off some set of hidden rules which limited the seat’s range of motion (presumably so you wouldn’t break the seat, or trap your feet, or something…) As a result, you had to “learn” what each seat would let you do, and when.

Customization is nice, but in the end, all I wanted was a simple set of controls to recline my seat, not the launch panel for a spaceship.

A Cleaner URL bar for Chrome

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

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

chrome-url-bar-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

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

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

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!

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.

Where’s the mail in GMail?

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

Click on the image for the full-sized version

Co-opting endorsement

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

Same box, different results

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

First impressions of Google+

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

Tab-based Interfaces

I was recently spurred by a question on a forum to collect a bunch of tab-based interfaces. Surprisingly, it is hard to to find good examples of modal tab UIs on the internet. I looked a lot a few years ago, and glancing around now, nothing jumps out at me either. This post is going to be a round-up on tab interfaces, heavily biased towards OS X, because that’s what I use. If you send me an example, I’ll add it.

 Read more

Worst Remote Ever

Some pics of a lighting remote I saw at a friend’s place.

lighting-remote-explained

Effing Hail, Effing Awesome Game

I’m always a sucker for isometric projections, so you can imagine the amount of time I’ve spent playing Effing Hail, a flash game where you basically try to create the biggest hail storm possible to cause the most destruction possible. At the same time, there’s some useful info about how hail is actually made! (I’m not sure about the part where it starts taking out satellites though) Read more

Great Easing Demo

Using Robert Penner’s easing equations is probably one of the easiest things you can do to spice up your UI. Apple’s famous for using CubicInOut almost everywhere they can to make their interfaces look sleeker. The only problem is, it’s hard to pin down the exact equations if you need to implement them yourself, or get a good demo to compare which one you want. Read more