davidbgk
/
larlet-fr-david-cache

title: A clear interface is a better interface
url: http://thomasbyttebier.be/blog/a-clear-interface-is-a-better-interface
hash_url: 855cb1081d021e461e81be96a7071599

<p>(This is part 1 of a series of blog posts on the design characteristics of great user interfaces. It’s a more elaborate take on <a href="http://thomasbyttebier.be/blog/characteristics-of-a-well-designed-user-interface">what I discussed earlier</a>.)</p>

<p>Clarity is probably the first and most important characteristic of good user interface design. A clear interface is simply a better interface. I don’t think anyone will argue with that.</p>

<p>In the 1930s and 1940s, American industrial designer Henry Dreyfuss dramatically improved the look, feel and usability of dozens of consumer products. You may recognize his telephone design for Western Electric:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/dreyfuss-westernelectric302.jpg" title="dreyfuss-westernelectric302" alt="henry dreyfuss designed western electric telephone"/></p>

<p>Dreyfuss was not a stylist, he applied common sense and a scientific approach to design problems. Ergonomics and ease of use were much more important than style. In 1955 he said: </p>

<blockquote>
  <p>When the point of contact between the product and the people becomes a point of friction, then the designer has failed. On the other hand, if people are made safer, more comfortable, more eager to purchase, more efficient — or just plain happier — by contact with the product, then the designer has succeeded.</p>
</blockquote>

<p>In the context of user interface design, I think it’s safe to say the interface itself is the point of contact between the app and the user. And that’s why today, 60 years later, Henry Dreyfuss’ quote is still highly relevant.</p>

<p>If your app isn’t clear enough, users will struggle. There’s going to be that point of friction.</p>

<p>In more recent times, usability expert <a href="http://www.sensible.com">Steve Krug</a> basically said the same. His book <a href="http://www.sensible.com/dmmt.html">Don’t Make Me Think</a> made an enormous impact on how I design web sites and interfaces.</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/dontmakemethink.jpg" title="dontmakemethink" alt="don’t make me think book by steve drug"/></p>

<p>While the examples in the book may be a bit outdated, the message of it still stands strong: don’t make your users think.</p>

<p>If your users don’t know how your app works, they’ll become frustrated. Or in the words of Henry Dreyfuss: there’s a point of friction. If I can’t instantly figure out how to download new messages in your email app, you’re making me think and there’s a point of friction. If I can’t directly find the navigation item that leads me to your restaurant’s opening hours, you made me think. If I don’t instantly see how to contact you, there’s friction…</p>

<p>A lot of times applying common sense is the clearest and best design solution to a UI question. But introducing clarity in an interface by applying common sense is not always an easy thing to do. The solution that makes most sense to you may not make most sense to your user. Things that look obvious to you, may look odd to the user. And the complexer the situation in which someone uses the app, the harder things get. That’s why it’s extremely important to get to know your user first. (We’ll talk more about that later.)</p>

<p>Here’s what Steve Krug says on the matter:</p>

<blockquote>
  <p>There are no simple ‘right’ answers for most web design questions (at least not for the important ones). What works is good, integrated design that fills a need—carefully thought out, well executed, and tested.</p>
</blockquote>

<p>That last word is important here. Clarity in UI design can be tested. You can hire folks to do the testing for you, or you can do it yourself. Steve Krug showed me how simple a usability test can be in his book <a href="http://www.sensible.com/rsme.html">Rocket Surgery Made Easy</a>. If this interests you, make sure to <a href="https://www.youtube.com/watch?v=QckIzHC99Xc&amp;t=723">watch his demo video</a> of a website usability test.</p>

<p>Anyway, we’re drifting off a bit, let’s have a look at a simple but crystal-clear interface, Messages on iOS:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/ios-messages.png" title="ios-messages" alt="iOS messages app"/></p>

<p>There’s really not much to think about when using this interface. It’s instantly clear there’s one new message, who it’s from and when it was received. I don’t have to think about how to open a message or how to compose a new message. No friction, this is excellent design.</p>

<p><a href="https://www.myfonts.com/WhatTheFont/">WhatTheFont</a> is an app by <a href="https://www.myfonts.com">MyFonts</a>. It lets users upload a photo, then identifies the typeface visible on the picture. While there’s arguably a lot to improve graphically, the startup screen is very clear:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/ios-whatthefont.png" title="ios-whatthefont" alt="iOS WhatTheFont app"/></p>

<p>Everybody happy.</p>

<p>This app by <a href="https://www.delijn.be">De Lijn</a>, a Belgian public transportation service, is clear and attractive. It has good filled-out defaults (current location and time) and an intuitive design. That makes it a nice to use interface at this point:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/ios-delijn.png" title="ios-delijn" alt="iOS De Lijn app"/></p>

<p>One way to make an interface clearer is to add descriptive help messages. While that may look like the obvious thing to do, it can soon get distracting and simply get in the way, making your interface less effective. That’s why balance is so important in the design of user interfaces.</p>

<p><a href="https://www.dropbox.com">Dropbox</a> and <a href="https://culturedcode.com/things/">Things</a> are two apps that have a smart way of dealing with this: they show explanatory text, but only to users that haven’t used a particular feature of their app. Instead of showing help messages all over, they use the opportunity of the empty screen to explain their users the benefits of that unused part of the app.</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/ios-dropbox-things.png" title="ios-dropbox-things" alt="dropbox and things iOS apps show descriptive help messages"/></p>

<p>Probably interesting to refer to here is the influential blogpost <a href="https://basecamp.com">Basecamp</a> wrote on their <a href="https://signalvnoise.com">Signal vs Noise blog</a> over a decade (!) ago. It’s all about this so-called <a href="https://signalvnoise.com/archives/000375.php">blank slate of web apps</a>. </p>

<p><a href="https://webflow.com">Webflow</a> does things more lightly in their blank slates, adding a bit more clarity and a lot more personality to their user interface:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/webflow.png" title="webflow" alt="webflow blank slate"/></p>

<p>Let’s have a look at one last example, the <a href="http://wordpress.com">Wordpress</a> CMS admin section:</p>

<p><img src="http://thomasbyttebier.be/content/03-blog/13-a-clear-interface-is-a-better-interface/wordpress.png" title="wordpress" alt="wordpress cms admin area"/></p>

<p>While the icons in itself aren’t clear enough and possibly introducing friction, Wordpress uses descriptive help messages when hovering over the unclear icons. I guess it’s an acceptable way to introduce more clarity to this area of the app.</p>

<p>So, to wrap up, what I basically wanted to say is this: good interface design is like tightrope walking. It’s all about finding the right balance. There’s dozens of things we have to look out for as designers, but clarity is undoubtedly the most important one.</p>