John Gruber today writes about Apple’s highest priority being obviousness. He was of course, remixing and extending the arguments made by Sebastiaan de With in his post, Simplicity and Obviousness. Their two blog posts reminded me of one of my earlier posts from early 2010, when I wrote about a documentary called Objectified. At some point in 2009, I met up with my good friend Christian Lindholm who works for design firm, Fjord. He turned me onto his of-course principle of design.
Most companies (including web startups), he said, are looking to “wow” with their products, when in reality what they should be looking for is an “‘of course’ reaction from their users.”
Puzzled, I looked at him. And then it hit me: Great design means that one look and the end user reacts by knowing what to do with a knob or a button, without as much as even thinking about it. Of course this knob is what turns the volume up, or brings up the home screen.
This of course factor is at the heart of every great design — from the iPhone to the Braun alarm radio. And it’s an important lesson that every startup and entrepreneur should remember. Whether your company is making a physical product or a web service or mobile application, it’s essential for you to think about design.
42 thoughts on “The of course principle of design”
I think this is a great post, but shouldn’t we practice what we preach? I don’t mean to be disrespectful, but there are many websites (designed by very famous designers) where it’s not obvious how you get home for example, or what the buttons on the left mean O:-) You have an icon on the left that looks like an envelope so it would signify to most people that you click on that to email you but instead it leads to a subscription sign-up page :-/
Good design is deceptive simple, but extremely difficult in practice. Few of us have the appropriate skill sets and are able and willing to take the appropriate time and effort. When properly done it resonates deeply enough that we feel the design is at least partly due to us – and in a sense it is.
In some fields great design can be done by one person, but in others it is cross discipline out of necessity. Many consumer products – especially consumer electronics – fall into the later camp. Purely engineering approaches come up short.
Not to be disrespectful, but it is pretty obvious. i don’t want to receive email from anyone. It is also obvious when you hover over the icon that you get the “om says” alert. And of course, as I outlined in the design launch, the primary use case for this blog is on the iPhone (and other smartphones), then iPad and PC last. If you read it on your phone, you will find that the only thing you get is of-course: the content and nothing else.
Very well said. I think to eliminate something is much harder to do that to add more stuff. I have come to believe that in fact, as human beings it is the hardest thing we can do. Eliminating bad foods, bad relationships, bad habits – so much harder.
I assumed the envelope was an email (or contact form) link too.
My favorite example of an “of-course” design innovation, which I’ve always labeled, “well, duh”, was the addition of a driver side rear door to minivans, which I think began with Chrysler. Prior to that, all vans had a rear door on the passenger side only.
Of course. I love it.
Great points. I don’t drive and never owned a car as such so can you explain why you say so for the driver side rear door? Is it because that is the side most people open to put the kids in the car or stuff they are carrying. I am just not used to the mini-vans and want to know more about your reasoning
“Of course” design requires the designer to understand the target audience very very well; what is clear and obvious to one set of users might be opaque to another. As a boss of mine once said, “Good UI is transparent; the user never really thinks about it. They just go and do their work. The trouble with this is how hard it can be to explain to management why creating such a UI is so difficult!”
In the case of the envelope, I can make a case that it is a “contact me” icon since, as a reader, I might want to send you something; you, however, know you don’t want to get email so it’s obvious to you it is a “subscribe” button. Once the user hovers over it, yes, it becomes clearer but still, the point remains.
I agree with Abbi. The mail envelope is very counter-intuitive. Even when you hover over and it has the label “Om Says”… that is meaningless. Mix that with the RSS icon above, which is obviously for subscription.
Following that ‘Om Says’ link only leads to a really cluttered wall-of-text-page. Yeah, there’s a small red button in the sea of text to draw your eye somewhat to.
This is my first time to this page, so no, it’s not obvious that you don’t want to receive email from people and it’s is most definitely not a safe assumption that I have any idea about your launch strategy.
I was expecting the discussion/description “of course” moments here to happen at a much higher level. Like Visual Voice Mail: “*of course* that’s how visual voice mail should work”.
Moments where a company or a designer show a user, show the world, how a thing they’ve always done could be done that much more easily—and they knew it all along, they were just caught in the “local minima” of bad design.
Thanks for bringing up that point. I have often wondered about the great points you bring about. What are some of the products you would earmark as examples of your arguments that could benefit from simpler tweaks?
IMO, you can add the ‘wow’ factor on top of the ‘obviousness’ factor. The only problem is, it’s not easy.
The ‘obviousness’ is so obvious that you are like ‘wow, why hadn’t I thought of this before’!
That’s still a wow factor!
In defense of your repurposing the envelope icon to mean something other than “send email”, you claim that hovering over it gets you an “om says” alert (a dubious defense, but let’s let it go for now). Then you plead that the primary use case for your design is iPads and iPhones and their simulacra.
You do know that there is no such thing as “hovering” on touch devices, yes?
You don’t see the icons on iPhone. And I don’t want you to. Just the content.
Good point. Don’t want to really play the Apple card again, but this may explain why some competitors find it so difficult to differentiate their products from Apple’s. “Of course” this is the way a tablet (phone, media player, etc.) is supposed to look and function! It is so logical.
Then how come they did not look/function that way before Apple? What a testament to their design prowess.
There’s so much territory still to explore that it’s exciting to me. Consider that it’s 2012 and with decades of advanced technology under our belts, but we’re still afraid to explore using 3D to escape the use of words. We all live in a 3D world, and everything in our heads is structured in 3D, but here we are still using words in columns to work with everything so inadequately.
I’m an entrepreneur with a new product that makes complicated things “obvious” and “of course” with the use of 3D (well, 2.5D) representations of what everyone else displays in lists, allowing one to rise to a higher level of accomplishment given the fixed effort we have available. Look away from the screen right now at the things in the room, and stop and think about “obvious” and “of course” and you’ll realize there is so much yet to be explored using the screen on our desk and the one in our hand.
Om, also not to be disrespectful, but I would think the envelope icon would be to email you since that’s what it commonly means across different web sites. Although it is evident that this isn’t the case after you click on it, the result did not jibe with my initial expectations. Also, since iPad and iPhone don’t have hover, any hover text you get occurs only after you tap on the icon. Granted, this is making a mountain out of a molehill, but since you responded to Abbi I thought you might be up for a little mental fencing.
Regardless, I enjoyed your article. The belief that design should evoke “of course” itself evokes the tenet.
You don’t see the icons on the iPhone page — that is the point. The icons and hover are when u are on a desktop browser. When I redesigned the site it was designed for reading on the iPhone and iPad and then the computer. It was a design choice.
Anyway let’s chose to disagree on the mail icon. I might clean up the omsays page on GIgaOM though. Thanks for that feedback.
Sorry, but I have to agree with Abbi. The envelope is the (almost) universal sign for email. As “of course” as the RSS symbol is on the left, the envelope is not.
I do not need to hover my hand over a knob to know that it adjust the volume if it has a wedge on or under it, but without some other indication a knob could represent station tuning.
If I have to read the outlined intent from a design launch, then “of course” design just flew out the window.
“Of course” design should not require anything. No mouse over. No context beyond what it looks like.
Feel free to delete my comment. It is more a message for you rather than the world at large.
I got to say, I’m with Abbi. The email icon is ambiguous even with the hover. But kudos on the rest of the site’s design.
Thanks for your kind words. On the email icon, let’s choose to disagree 🙂
I agree with Abbi that the mail icon on the left looks like it means email. A lot of times I’ll just go click on an icon without reading the description. (In this case the description is not that useful anyway, since I don’t know what “Om says” even means). When I found out the letter icon actually leads to a page of your essays, my reaction was certainly not “of course.”
Not to be disrepectful, but if you’re referencing your design document in a criticism of your design, there’s something wrong with your design.
Thanks for your feedback but I chose to disagree on the mail icon. I am pretty sure if it was an email action I wanted to prompt, I would have opened a form much like other sites. Instead it is a link. You can chose to click on it or not.
It is a design choice that is highly personal.
Om I love your writing and your work, and I agree with Abbi. Some of the left icons on this page were not obvious to me either; I did not know what the person icon was before hovering over it, and I don’t know what ‘Om Says’ is even after hovering over it. Why the seemingly-condescending “Not to be disrespectful” start to your response, copying her turn of phrase? This kind of stuff is what usability testing reveals day in, day out, even for the best designs and designers.
And I completely agree with your post. Great design means that things ‘afford’ their actions: a dial looks like it should be turned; the only front-facing hardware button returns you to the home screen and ‘gets you out’ of any place of uncertainty.
I don’t think people give enough credit for iterative testing that takes place for seemingly ‘simple’ designs like the iPhone. The dozens of hardware iterations, the use over months by employees… Apple is driven by excellence, and I love your mention of the iPhone as what I think is an amazing example of this.
Ignoring the email icon, though I also think the envelope and “Om Says” links are meaningless, let’s talk about how, after clicking “about me,” I fumbled around on the page for about 30 seconds trying to figure out how to return to this blog post I was reading before I accidentally rolled over the very edge of the page and got back to where I was. Again, very not obvious.
I’m on the iPad, and I get the envelope, with no way to hover, so +1 from me on the confusing envelope. Also, quite a lot of flickering when scrolling which I find weird if iOS is the main target.
@Om & @ craig
The driver side rear door only became an obvious addition to minivans after parallel on-street parking became less common. With the growth of off-street parking in the US, the safety issue of only having a door for children to exit on the curb side of the car became less important. Now, convenience trumps the safety issue because the safety issue is not as present as it once was. It did take a long time for this to be introduced, though.
That envelope makes me go “Om?” lol
Good post. But an envelope is the universal email icon. Unless you’re Steve Jobs, you’re not going to convince anyone different. Saying it’s not is like saying the magnifying glass isn’t for ‘search’, it’s to ‘zoom in’.
Om I find it amusing that you are arguing with your readers over whether an icon is is misleading or not. If your users (readers) are telling you it’s misleading, it is. That simple. Rule #1 of user centered design is listen to your users.
I worked with a designer once that defended “Huh?” reactions (the opposite of “Of course!”) by explaining that particular interaction as a “learn-once.” While quotes like Lindholm’s are inspiring and galvanizing, they seem to ignore one of the fundamentals – “It depends!”
When should the UI be invisible?
When should something become apparent after a bit of exploration?
When should the UI astonish with its now-that-I-see-it obviousness?
When should the UI astound with its novelty?
A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.
Antoine de Saint-Exupery
The brilliant bodyworker Moshé Feldenkrais (feldenkrais.com) had a phrase “The Elusive Obvious” that seems to express what you’re saying quite well. I like Feldenkrais’s writings, but his movement lessons — which contain no explanations — are even more amazing. He discovered ways for us to reveal to ourselves the brilliant design of the human body: awareness through movement. Many scientists are researching biomimicry, but designers can also explore these time-honored designs.
Nothing is obvious without prior learning. Everything needs a point of reference. Ponder that 🙂
I was at a talk by Jef Raskin at Xerox PARC once where he said “An icon is a symbol unrecognizable in any language.”
The icons on the left side of this page, without the affordance of text labels always visible next to them, convey at best only the broadest interpretations of their usage: Search, Profile, A bird (one might guess “Twitter,” but that’s a second level reading–making it blue would make the association more concrete), RSS Feed, and Write/Send Email.
Om, you may continue to disagree, but it’s obvious the consensus here is clearly that that envelope icon is NOT being interpreted the way you mean for it to be. Your “highly personal” claim as an argument against changing it indicates that you are too personally invested in it. Finally, calling something “a design choice” is a handwaving excuse when confronted by overwhelming feedback that the design is universally misunderstood.
In the interest of being helpful, I’ll try to make a suggestion for a replacement icon:
Add an oval bubble to the upper right, indicating receiving mail, rather than sending it. Shrink the envelope, and invert it into negative space inside a surrounding shape like one of the following: A) A round rect like the iOS Mail app (might be too similar); B) Crenelated postage stamp-like edges, like on the OS X Mail.app icon (more unique, since the Mail.app icon doesn’t have an envelope).
I disagree with this post since a lot of the conclusions are drawn in hindsight. To expand on David Walsh’s point – I don’t think a user faced with a touch screen, prior to the iPhone, would find pinch-to-zoom as an obvious action to try. Yes it was intuitive, AFTER they were shown that it’s possible and how it can be used.
So using obviousness as a factor is not the best approach for design. In 2007 prior to the iPhone, the most obvious way to interact with a touch screen was a stylus.
Om, here’s some unsolicited advice that you can feel free to implement or ignore as you will.
After scratching my head for 10 minutes to understand how you might have thought the email icon as a list opt-in was “obvious,” I realized that some blogs, like Zen Habits, group RSS and email chicklets or links after a Subscribe caption—e.g. “Subscribe: RSS | Email”.
It’s the “Subscribe” caption that puts “Email” in the appropriate context. Without the caption, most readers will parse the icons separately, without associating them as two options for subscription, making the intent of the email icon as “obvious” as the human silhouette for the About page. This highlights a design peeve of mine: the trend to replace text with icons in the name of “elegance”.
I’d suggest removing the floating sidebar altogether, since at least two of the options (Search and About) probably won’t be used once the user scrolls. Actually, since the bird icon is a link to your Twitter profile rather than a share/retweet action, I’d remove that from the floater as well. These should all be grouped in a top nav or a static sidebar. Make the *captioned* RSS and email subscription options a post footer—which can be duplicated in the top nav or static sidebar as well—and consider adding a “Tweet” (i.e. “tweet this”) icon or link to the footer as well.
Om, reading the comments to this post, I think it’s obvious that your blog is being read by a lot of people on desktops, rather than the mobile devices you “intended.” I got here from a link on daringfireball.net, which I was reading in Safari on my MacBook while wasting a pleasant Sunday afternoon on my balcony. I would never actually read your blog on my iPhone because the iPhone screen is simply too small to be practical for that. I once thought that I would read blogs and news sites on my iPad, but I have too much else to read on my iPad to bother (books in the Kindle app, articles in Instapaper, etc.).
Sure, you want to make your blog appealing to people reading on mobile devices – too many sites do not. But unless the bulk of your audience has *only* mobile devices and *not* desktop devices, you don’t want those devices to be your primary design focus. You’re a techie, which means most of your readers are going to be techies. And techies use desktops and laptops as their primary devices. Mobile devices come into play when we’re sitting in airports or riding the train – when *we* are mobile.
Forgive the bluntness, but your audience is telling you that your design ideas in this case – especially repurposing the universally recognized email icon – are a failure. You shouldn’t dismiss that so easily.
obviousness is obvious 🙂
nice post….. But, that envelope icon is really misleading.
“Great design means that one look and the end user reacts by knowing what to do with a knob or a button, without as much as even thinking about it. Of course this knob is what turns the volume up, or brings up the home screen.”
As a newbie Apple user it took me 10 mins to figure out that when you press the shift key in iOS it doesn’t toggle the keyboard between caps and lower case – which would be obvious. Is that great design? Or is everyone just too used to how Apple does anything to consider any other way?
By that I meant the keys on the keyboard don’t change so it is not too easy to see if you are in caps or lower case mode.
I thought the icon was for email or to send a message. I didn’t really know what “Om Says” meant. I read this post from a desktop at work. I’m a programmer.
But I did like the content of the article enough to show it to someone else.
Comments are closed.