Characteristics of a well-designed UI
These slides are the blueprint of a presentation I ﬁrst 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.
thomasbyttebier.be — @bytte
Here I am, in the eighties. My brother is the cute one.
It has to be invisible
Clarendon is a beautiful typeface, but is too present in all its glory. It may distract the user from her tasks and goals.
It has to be clear in small font-sizes
Text easily gets really small in user interfaces.
What’s more readable?
Half close your eyes. Which button is more readable?
Helvetica really wasn't designed for
small sizes on screens.”
Much criticism from the design community when Apple switched from Lucida Grande to Helvetica Neue in OS X Yosemite…
…Spiekermann tip: half close your eyes, try to read that word in Helvetica Neue and you’ll see why.
You want clear passwords, tables or
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!
A handful of excellent choices:
typefaces designed for use in UIs
Let me help you out here
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.
Good to see Apple switched away from Helvetica and is now using a custom designed typeface called San Francisco. Not ideal (yet), but better!
The best interfaces are invisible to
The keyboard in iOS Notes is only there when you need it. That makes it practically invisible.
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
“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…
All read this book: The Best Interface is No Interface, by Golden Krishna.
Do we really need this, if the answer
is Yes 9 times out of 10?
The 80 percent rule…
The best interfaces are invisible
The best interface is no interface. Saving ﬁles usually happens in the background nowadays.
The real world: if I write a note I don’t have to save it to keep my changes!
Making an interface clear and concise is
all about balance. Not an easy task.
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!
Show the user something when a
page is loading
Can be very simple.
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.
Also, the user feels more assured
It’s clear the app is doing something here. I did not fuck up.
Instant feedback is often very easy to
implement yet makes a huge
difference to the user
Think about what happens in-between screens.
No need to wait while uploading a video to Tumblr. You can add a caption, tags… while the app is uploading.
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)
Create short cuts that make your app
more efficient to those who know
where to find them.
Power users appreciate Photoshop’s powerful set of shortcuts. They’re very effective to them.
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.
Power users appreciate iOS’s Spotlight Search. Quick way to get to phone numbers, apps, emails…
OS X Spotlight search
Power users deﬁnitely appreciate Spotlight on the desktop. App launcher, calculator and so much more…
Vimeo web app
It’s there but you only notice it when you try it.
Don’t customize your form elements, especially if it breaks default behavior. Power users love to use shortcuts to navigate form elements.
Make your app more effective:
use better default settings
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.
‘Next busses’: I always tap that button to get an idea of the frequency of busses. Why not display it by default?
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.
Friendly apps are nicer apps
Shake to undo. So lovely.
Undo makes the user feel like nothing
can ever go wrong. Lovely!
Undo doesn’t interrupt a user’s
“Are you sure?” is unpleasantly distracting. Undo is like a friend who’s there when you need her.
A good user interface evokes
discovery through trial & error
That’s why Undo is so important!
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.
Always assume the user will make
mistakes while using your interface
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.
Belgian railway service. Same functionality as previous app. Same typo. I get a helpful suggestion. That’s well done!
Google’s “Did you mean?” We all recognize this. It’s not particularly beautiful, but it’s excellent design!
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
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
A good UI is like Maradona’s infamous hand of god. No one notices it and yet it gets the job done really fast.
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! :)
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