is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. Refer to the advertising and sponsorship page for inquiries.+
Introducing users to a new app or set of functionality is a difficult task for which there are no easy answers. One of the oldest tricks in the book is to create a kind of instructional screen in which the interface is explained, either diagrammatically or through the use of elucidating circles, arrows, lines and notational text (what Apple has in the past called “coach marks,” a term I haven’t heard elsewhere but that I really like) directly over the interface. The idea is to add a meta level of guidance to help acquaint the user with the key parts of the interface and how to use them.
I’ve been noticing these more and more lately, a trend that I find regrettable. I’ve designed products with instructional screens and coach marks in the past, and they were miserable failures. In my experience, these types of parenthetical interfaces are almost always misguided, mostly because they run up against one of the (nearly) immutable laws of interface design: people don’t read interfaces.
Look and Read Here and Here and Here
Here’s an egregious example, one of a few that I’ve been casually collecting over the past few months. The welcome screen for Richard Branson’s misbegotten Project magazine app is practically a visual assault on the user’s desire to consume the actual content. Where any rational user would expect to be able to start reading after they’ve launched the app, this screen basically insists that you assemble a piece of Ikea furniture before you can get started.
Not every instructional screen is as woeful as Project’s of course. Here is a much more elegant screen from The New Yorker app.
It features dramatically less text of course, but it’s still far too much for my taste. A very skilled or efficient designer might be able to get the reader to read one or two notes like this, but most readers won’t bother reading any of them. What’s more, this is just one part of the instructional screen for this app; users are expected to swipe down for an additional page of notations and even an icon key. Who’s going to bother?
This might sound like I’m picking on iPad magazines yet again but it really does seem that the biggest offenders in this regard are usually print publications making gimmicky leaps to the iPad. What’s inspiring these instructional screens is an ill-informed grasp of how people really interact with digital media, and that obstinate misapprehension is at the very heart of why I dislike the genre so much.
But ‘pure play’ digital apps are guilty of similar transgressions, too. Here’s one from the RSS reader Pulse. Unfortunately, this is as good as instructional screens usually get, which is to say it’s still not very good. There’s too much text here but there’s some attempt at keeping it minimal, and the descriptions are fairly straightforward without a lot of fussiness in the language.
Stepping away from the iPad, here’s an example I came across from the scheduling app Tungle. This product lives in the browser, but applications across all platforms are starting to be governed by the same expectations we bring to iOS apps. The rough lines have a nice humanistic quality, and there’s an earnest attempt at minimizing clutter on the interface, but there’s just too much text here and too many concepts to absorb.
Back to iOS: here’s one from the BlipSnips app, which crams lots of coach marks into a very small space.
The marks and the dark gray overlay obscure the app itself so thoroughly that very little of the actual interface peeks through, which would seem to run counter to the main goal altogether: what a user wants is to attach meaning to the interface, which is hard to do when you can barely see it.
Don’t Say It
The issue of using too much text aside, the fundamental problem that underlies all of these examples is that they just shouldn’t exist in the first place — especially on multitouch devices, which are fully predicated on the idea of intuitiveness. The most important idea at the heart of every iPhone, iPad and, to a lesser but still significant extent, every Android device is that they need no explanation. You pick them up and use them. No no training course, no certification, and certainly no manual. The apps that run on them should be the same way: just launch them and start using using them.
In spite of their best intentions, instructional screens are diametrically opposed to this core idea. Of course, they’re attractive because creating interfaces in the iOS mold — minimal, unambiguous, self-evident — is very difficult work, and the idea of just being able to explain away the ambiguities is a seductive one. But all they really serve to do is call attention to the fact that the interface itself was poorly designed. If it needs to be explained, then it’s probably broken.
Side note: if you’ve come across similar instructional screens, please point me to them or send them to me via email. I’m building up a little collection.+