ui

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

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

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

Issuu – Publications Online

I forget how, but I came across Issuu the other day, an online document publishing web service, mainly aimed at magazines. Now, I now Scribd is all the rage these days, but for me its interface takes a lot of the joy of out of casual reading. I’m not saying that’s bad, I think Scribd does a really good job at technical or cover-to-cover reading where your primary experience is to search for a specific topic or start on page 1 and continue to page 2, 3, and so on.

7 universal signs of interaction

While doing some research the other day, I came across a very interesting paper on recognizing facial expressions. The authors state:

On the other hand, there are a limited number of distinct facial expressions of emotion that appear to be biologically wired, produced involuntarily, and whose meanings are similar across all cultures; for example, anger, contempt, disgust, fear, happiness, sadness, and surprise
–P. Ekman. The argument and evidence about universals in facial expressions of emotion. In D.C. Raskin, editor, Psychological methods in criminal investigation and evidence, pages 297–332. Springer Publishing Co, Inc., New York, 1989.

 Read more

Let’s turn 1 Step into 3!

I’m always frustrated when the UI gets in the way of the user’s experience. As an anectdote, let’s talk about how a UI I use which has this very problem, and in the process has increased the number of steps in it from just one into three separate steps!

The Culprit

If you’re at MIT and you want to use software like Matlab or online journals off campus, you need to use a VPN to get access to these resources. Fortunately, MIT provides some software, Cisco’s VPN Client, and its already pre-configured with everything you need.

So here you are with what I’ll call a secondary application- you essentially never use it directly, it just does stuff for you in the background. Antivirus software is another good example of a secondary application. Since these apps are more about supporting some existing workflow (getting into MIT’s network, making sure your computer keeps functioning and virus-free), you really want your interaction with them to be at an absolute minimum.

Somebody at Cisco didn’t get the memo and clearly thought that it would be a joy for users to start a 3-step process everytime they want to use a VPN. Read more