Characteristics of a well-designed UI

"Designing a good user interface is like tightrope walking: it's all about finding the right balance."

Translated slides for a presentation I gave at Luca School of Arts, Gent, March and November 2015.

(Slightly updated November 2015)

Transcript

1. User interfaces Characteristics of a well-designed UI These slides are the blueprint of a presentation I did at Luca School of Arts in March 2015. I tried to make them understandable to people that didn’t attend by including these quick notes.
2. Thomas Byttebier thomasbyttebier.be — @bytte That’s me.
3. Here I am, in the eighties. My brother is the cute one.
4. As a kid, I wanted to be Maradona.
5. WERKSITUATIE? Picture says it all. No doubt I was going to be him one day…
6. Web, screens, user interfaces Freelance designer EPIC FAIL …now I’m a freelance designer. I realize that looks like quite a fail to the public, but I enjoy doing it.
7. I’m online.
8. It’s hard That’s what I can tell after having designed quite a few user interfaces.
9. Good interface design is like tightrope walking. It’s all about finding the right balance.
10. “A picture is worth a thousand words. An interface is worth a thousand pictures.” —Ben Shneiderman, 2003 also says a lot about the power of a UI
11. You don’t want to impress as a UI designer. You want a good product. Probably the most important thing I learned over the years.
12. “As far as the customer is concerned, the interface is the product.” —Jef Raskin, 2001
13. That’s quite a responsibility you have there, as a designer.
14. What’s the characteristics of a good designed user interface? No reason to be scared. Let’s introduce some real order here. I’ll give you 8 characteristics of a good designed UI.
15. Above all, a good user interface is clear 1
16. If users don’t know how your app works, they’ll become frustrated It’s simple.
17. Read this book! Short resume: you don’t want to make your users think when they’re using your interface.
18. Messages iOS Messages app: excellent example of a clear user interface. All mums will instantly understand this.
19. Me and my mum. I love her.
20. WhatTheFont app: it recognizes fonts in photographs. Graphically not pleasing, but definitely clear. Happy mums.
21. De Lijn De Lijn (Belgian public transportation service): clear and attractive. Nice to use.
22. Dropbox Things These parts of the apps require content. User hasn’t added content yet. What a perfect place to display a clear, helpful message.
23. No content yet: helpful information in a more personal way. Nicer than just showing an empty screen.
24. Wordpress admin section: displays clear help message when hovering over unclear icons. Seems okay.
25. Only use an icon if its message is a 100% clear to everyone Let’s talk icons… they’re an essential part in every UI design.
26. Someone got frustrated by all these unreadable icons
27. Apple Mail. I always have to think twice what button to click for composing a new email.
28. WTF? WTF does this mean?
29. WTF? WTF!? Later update added this. Hoping to draw more user’s attention to the functionality?
30. Recently Instagram added a message to the top of the stream to explain users what the icon means. It’s like saying: we know it’s not clear…
31. Apparently this was unclear to many users when it was introduced. How to tweet?
32. This additional UI element is clearer.
33. It’s in our nature to stay away from the unknown. When Google hid links behind this icon, they got tons of support requests: ‘where’s my apps?’
34. Clear icons yet ambiguous in this context. I’ve for sure clicked the wrong icon more than once!
35. Tweetbot Clear icons in the context of Twitter. Twitter users will recognize these. Seems okay to me for that reason.
36. Tumblr Again, pretty clear in the context of Tumblr. Tumblr users will recognize these.
37. Rdio Mac app: most icons are clear in the context of a music player. One icon has 2 meanings though: volume and currently playing song.
38. Rdio Talking about icons… let’s discuss the popular hamburger icon. It’s beautiful and saves a lot of space. But is it clear enough?
39. Some websites published A/B and usability tests on the topic of the hamburger icon.
40. Simple change 20% increase in clicks http://exisweb.net/menu-eats-hamburger One test reveals a 20% increase in clicks by using the word ‘menu’ instead of the hamburger icon.
41. This makes no sense at all: there’s more than enough space to display the full navigation.
42. Old New Facebook at least replaced their hamburger icon with clearer menu icons.
43. Facebook Also excellent: they don’t just use icons but they add text labels to them. A text label is always clearer than an icon.
44. Unclear icons but still want to use them by all means? Always add text labels!
45. text > icon Never doubt: a text label is always clearer!
46. Menu… or… hmmm… Wish list, isn’t that clear? App Store Just when you thought you recognized the hamburger icon… grrr… lol!
47. Use responsibly Good icon sets. Use responsibly!
48. Remember, this is your base rule!
49. Use clear typography
50. “All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.” —Tobias Frere-Jones
51. What to look for in a good UI typeface?
52. It has to be invisible Roboto Clarendon Clarendon is a beautiful typeface, but is too present in all its glory. It may distract the user from her tasks and goals.
53. It has to be clear in small font-sizes Text easily gets really small in user interfaces.
54. What’s more readable? Lucida Grande Helvetica Neue Submit question Submit question Half close your eyes. Which button is more readable?
55. “Helvetica really wasn't designed for small sizes on screens.” —Erik Spiekermann
56. Much criticism from the design community when Apple switched from Lucida Grande to Helvetica Neue in OS X Yosemite…
57. Lucida Grande Helvetica Neue Milliliter Milliliter Roboto Milliliter …Spiekermann tip: half close your eyes, try to read that word in Helvetica Neue and you’ll see why.
58. You want clear passwords, tables or data comparisons Verdana Gill Sans 1iILl 1iILl Gill Sans is a great typeface, but simply not suited for UI design. First (1), third (capital i) and last (lower case L) character look exactly the same!
59. A handful of excellent choices: typefaces designed for use in UIs Let me help you out here
60. Lucida Grande Submit question Verdana Submit question Fira Sans Submit question Roboto Submit question Ubuntu Submit question Droid Sans Submit question Segoe UI Submit question All designed for user interfaces, hinted for small font-sizes and low screen resolutions.
61. Good to see Apple switched away from Helvetica and is now using a custom designed typeface called San Francisco. Not ideal (yet), but better!
62. Use clear copy
63. “If you think every pixel, every icon, every typeface in your app’s user interface matters, then you also need to believe every letter matters.” —37Signals
64. Good writing is good design It’s Dutch for ‘Sign up’ and ‘Log in’. Most Dutch speaking people absolutely don’t know the difference in meaning between these two words.
65. “The fastest way to improve your user interface is to improve the copywriting.” —Joshua Porter
66. This is well done: instead of ‘search’ it says: ‘where are you going?’ it’s much more inviting.
67. Ebay says “I’m looking for…”
68. Nike+ Nike+ says “Begin run” instead of “Start” which would be less descriptive. Very clear now.
69. App Store
70. “What’s happening?” instead of just “Tweet something”
71. Good tweet. Painfully funny.
72. . I have absolutely no idea what button to click.
73. A good user interface is concise 2
74. Every element you add to your UI, makes the rest less important
75. Does the user really need this extra thing? Can I find a better solution? Important question to ask before you add anything to your UI.
76. Disappear when unneeded Google Maps Simple UI, yet very powerful app.
77. Genius Scan To the point. There’s room for improvement though: there’s no need for an ‘Edit’ button here. And there’s the hamburger icon…
78. No one enjoys filling out these… You know there’s going to be problems when you click the ‘Submit’ button…
79. Groups clear clutter Looks more manageable
80. The best interfaces are invisible to the user The keyboard in iOS Notes is only there when you need it. That makes it practically invisible.
81. “The real problem with the interface is that it is an interface. Interfaces get in the way. As a user, I don’t want to focus my energies on an interface. I want to focus on the job…” —Donald Norman, 1990
82. “The interface gets in the way” What if my car could unlock if I approach it with my phone in my pocket? Get phone out of pocket, unlock, swipe, search app, tap app, wait to launch, tap ‘Unlock’, lock phone, put phone in pocket…
83. All read this book: The Best Interface is No Interface, by Golden Krishna.
84. Do we really need this, if the answer is Yes 9 times out of 10? The 80 percent rule…
85. The best interfaces are invisible The best interface is no interface. Saving files usually happens in the background nowadays.
86. The real world: if I write a note I don’t have to save it to keep my changes!
87. Making an interface clear and concise is all about balance. Not an easy task. .
88. A good user interface is recognizable 3
89. You might never have touched this particular switch, but you know how to operate it.
90. A user doesn’t have to think when she recognizes a UI element 1Password 1Password uses TouchID to unlock, like many apps. Users easily recognize that, no interface to learn.
91. Kindle iOS app standard iOS UI elements The Font Game custom designed UI elements The Font Game features custom designed UI elements. They may look better but may also challenge the user.
92. As a designer you don’t want an original design by all means. You want a user-friendly interface.
93. Then again, when the time is right, go ahead and innovate! Threes
94. WeightBot Tapbots apps: all custom designed controls.
95. Nike+
96. Inventive and recognizable = win! The subtle green line at the top shows a reader’s progress on a long page.
97. Collection of nice UI design details . Nice collection of UI elements, often both inventive and recognizable.
98. Consistency makes a user interface more recognizable
100. Design a system of reusable interface elements And then use them everywhere in your app. It’s instantly recognizable. Add a style guide as an explanation.
101. Sliders in Photoshop: very inconsistent in look and behavior
102. Nike+ app: not so consistent Look at all those different buttons
103. “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” —Jakob Nielsen
104. Notes iOS Notes OS X Consistency from one operating system to another.
105. FaceTime on iOS and OS X Ever used FaceTime on iOS? Then you know how to use it on your Mac. And the other way around of course. (Say hi to Johny!)
106. . Human Interface Guidelines These help with consistency.
107. A good user interface is fast 4
108. Sorry for the cheesy picture
109. Speed is not only a developer’s responsibility. As a designer you can create the illusion of speed. The perceived performance of an app is more important than the real performance!
110. Show the user something when a page is loading YouTube Can be very simple.
111. A smart UI can make the app feel faster, more responsive Facebook uses instant placeholders while the real content is loading. Smart trick that makes the app feel faster.
112. Also, the user feels more assured It’s clear the app is doing something here. I did not fuck up.
113. Instant feedback is often very easy to implement yet makes a huge difference to the user Think about what happens in-between screens.
114. No need to wait while uploading a video to Tumblr. You can add a caption, tags… while the app is uploading.
115. Medium shows a simple animation while content loads: clear, concise, recognizable, fast & beautiful. All characteristics of good user interface design. (not much to see here sorry, this slide showed the animation as a video)
116. A good user interface is effective 5
118. It is definitely clear… but effective? Everytime I launch my mobile banking app, I get this ‘You were automatically logged out’ message. Even if I only used the app days ago…
119. To design an effective user interface, you must know your user Why is she using your software? When? What’s her goals? What’s her mood? Where is she? Is she hungry? …
120. Easier to make substantiated decisions When it launches, Qustomer shows the QR code, ready to be scanned at the box office. There may be people in a line behind you.
121. Messages app Mail app Swipe to search in Messages yet Mail app shows search field immediately. May be inconsistent, it does make sense. Users search mail often.
122. Local website that promotes a healthy lifestyle. Each day it requires you to mark your agenda. But I can never find my agenda after login.
123. Not logged in Logged in The weird thing is, the mobile version does it right: it displays a visible link to the agenda. Much more usable.
124. It doesn’t get any better than this
125. Think about novice users vs power users
126. iOS Calculator
127. Power users appreciate Photoshop’s powerful set of shortcuts. They’re very effective to them.
128. iOS Camera app tap to focus, slide to lighten/darken I didn’t know this, but after focusing you can use the sun icon to lighten/darken your photo. It’s a more or less hidden feature for power users.
129. Spotlight search Power users appreciate iOS’s Spotlight Search. Quick way to get to phone numbers, apps, emails…
130. OS X Spotlight search Power users definitely appreciate Spotlight on the desktop. App launcher, calculator and so much more…
131. Vimeo web app It’s there but you only notice it when you try it.
132. HTML forms Don’t customize your form elements, especially if it breaks default behavior. Power users love to use shortcuts to navigate form elements.
133. Make your app more effective: use better default settings
134. ING mobile banking BNP mobile banking I only have one account with both banks. ING needs me to select that account every time I want to transfer money. BNP has it preselected.
135. ‘Next busses’: I always tap that button to get an idea of the frequency of busses. Why not display it by default?
136. . VMF app Finally the VMF app remembers what ranking my team is in. I don’t have to scroll through dozens of them any more every time I use the app.
137. A good user interface looks great 6
138. A great looking UI is more attractive • general look & feel • typography, color, contrast • visual design trends • subtle animations and transitions • subtle affirmative sounds • …
139. A good user interface is forgiving 7
140. Friendly apps are nicer apps
141. Undo makes the user feel like nothing can ever go wrong. Lovely!
142. Undo doesn’t interrupt a user’s workflow “Are you sure?” is unpleasantly distracting. Undo is like a friend who’s there when you need her.
143. A good user interface evokes discovery through trial & error
144. I’m afraid of the Skype UI Years ago I clicked an icon and it started video calling someone I didn’t want to. I’ve been extremely suspicious ever since.
145. Always assume the user will make mistakes while using your interface
146. What if your user makes a typo? I made a typo and I’m not aware of it. The app shows irrelevant information. There’s nothing I can do now. Frustration.
147. NMBS app Belgian railway service. Same functionality as previous app. Same typo. I get a helpful suggestion. That’s well done!
148. Good design Google’s “Did you mean?” We all recognize this. It’s not particularly beautiful, but it’s excellent design!
149. “Nobody is perfect, and people are bound to make mistakes when using your software or website. How well you can handle those mistakes will be an important indicator of your software’s quality.” —Dmitry Fadeyev .
150. A good user interface is ergonomic 8
151. Design ergonomically With this information, it would be silly to put the most important buttons in the red areas.
152. Genius Scan Genius Scan does it very well: when outlining a scan your thumb will cover the parts you need to see. Hence the helpful magnifier.
153. Design ergonomically • place most used buttons in an easy to reach part of the screen • test as quickly as possible on a real device • when in doubt, make it larger .
154. . “When in doubt, make it larger.” That’s probably what Maradona was thinking after his football career.
155. Recap. A well-designed UI— 1. clear 2. concise 3. recognizable 4. fast 5. effective 6. attractive 7. forgiving 8. ergonomic Striking the right balance. Not easy.
156. Follow these
157. “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.” —Henry Dreyfuss, 1955
158. A good UI is like Maradona’s infamous hand of god. No one notices it and yet it gets the job done really fast.
159. Thomas Byttebier thomasbyttebier.be — @bytte Thanks for listening. Contact details on my website. I design user interfaces! As little as possible, you now know what I mean with that! :)
160. Links & sources, photos, thanks to all of you • Don’t make me think, Steve Krug • The design of everyday things, Donald Norman • About face: the essentials of interaction design, Alan Cooper e.a. • Designing the user interface: strategies for effective human-computer interaction, Ben Shneiderman e.a. • Getting real, the smarter, faster, easier way to build a successful web application, 37signals • Principles of user interface design, Joshua Porter • A brief history of user experience, Ali Rushdan Tariq, Invision blog • The best interface is no interface, Golden Krishna, Cooper Journal • Typography and the user interface, Daniel Kuo, Cooper Journal • What makes a good user interface?, The SCO Group • Aspects of a good user interface, Argon Design • Characteristics of successful user interfaces, Dmitry Fadeyev • Helvetica sucks, Erik Spiekermann, Spiekerblog • Designing better user interfaces, Johan Ronsse • Design for developers, Johan Ronsse • Consistency photo by Erik Ostrom (Flickr link) • Letter 1913 photo by Kim Scarborough (Flickr link) • Hauling a 32 foot ladder photo by bike by Mark Stosberg (Flickr link) • Fast Food photo by Brian Wallace (Flickr link) • iPhone thumb zone heat map image from Scott Hurff • useryourinterface.com • littlebigdetails.com