Marko Karppinen, who advises magazines on their digital strategy, has an interesting tear down of why he’s telling publishers to not use iOS’s Newsstand feature in iOS 7. While he gives several reasons, he calls out one in particular as the motivating factor Read more
Speaking at Denver Startup Week
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:
Really, who doesn’t love a good toggle switch?
The Secret Garden 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
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
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
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
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
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
Not too bad, but the labels are redundant (and too small to read)
The Customization is GREAT Seat
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.
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:
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:
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
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:
It’s clean, the important information is clearly visible, and as a bonus, it uses up a lot less space.
Deliver Results, Not Delights, For Your Mobile Users
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.
I am not a recruiter
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
What do 8 different types of color-blindness look like?
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.
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.