"Designing a good user interface is like tightrope walking: it's all about finding the right balance."
Translated slides for a presentation I first gave at Luca School of Arts, Gent, March 2015.
[Slightly updated November and December 2015]
Report
Share
Report
Share
1 of 160
Download to read offline
More Related Content
Characteristics of a well designed user interface
1. User interfaces
Characteristics of a well-designed UI
These slides are the blueprint of a presentation I first 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.
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.
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.
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!
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?
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!
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.
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.
.
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
100. Don’t design screens. Design a
system of reusable UI elements
And then use them everywhere in your app. It’s instantly recognizable. Add a style guide as an explanation.
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!)
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)
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.
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…
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.
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
That’s why Undo is so important!
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. No forgiving UI.
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
.
“
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.
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
• https://www.quora.com/What-are-some-of-the-funniest-Windows-error-messages-you-have-ever-seen