characteristics of a well designed user interface
TRANSCRIPT
![Page 1: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/1.jpg)
User interfacesCharacteristics 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.
![Page 3: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/3.jpg)
Here I am, in the eighties. My brother is the cute one.
![Page 4: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/4.jpg)
As a kid, I wanted to be Maradona.
![Page 5: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/5.jpg)
WERKSITUATIE?
Picture says it all. No doubt I was going to be him one day…
![Page 6: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/6.jpg)
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.
![Page 7: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/7.jpg)
I’m online.
![Page 8: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/8.jpg)
It’s hard
That’s what I can tell after having designed quite a few user interfaces.
![Page 9: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/9.jpg)
Good interface design is like tightrope walking. It’s all about
finding the right balance.
![Page 10: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/10.jpg)
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
—Ben Shneiderman, 2003also says a lot about the power of a UI
![Page 11: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/11.jpg)
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.
![Page 12: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/12.jpg)
As far as the customer is concerned, the interface is the product.”
—Jef Raskin, 2001
“
![Page 13: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/13.jpg)
That’s quite a responsibility you have there, as a designer.
![Page 14: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/14.jpg)
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.
![Page 15: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/15.jpg)
Above all, a good user interface is clear
1
![Page 16: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/16.jpg)
If users don’t know how your app works, they’ll become frustrated
It’s simple.
![Page 17: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/17.jpg)
Read this book! Short resume: you don’t want to make your users think when they’re using your interface.
![Page 18: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/18.jpg)
Messages
iOS Messages app: excellent example of a clear user interface. All mums will instantly understand this.
![Page 19: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/19.jpg)
Me and my mum. I love her.
![Page 20: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/20.jpg)
WhatTheFont app: it recognizes fonts in photographs. Graphically not pleasing, but definitely clear. Happy mums.
![Page 21: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/21.jpg)
De Lijn
De Lijn (Belgian public transportation service): clear and attractive. Nice to use.
![Page 22: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/22.jpg)
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.
![Page 23: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/23.jpg)
No content yet: helpful information in a more personal way. Nicer than just showing an empty screen.
![Page 24: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/24.jpg)
Wordpress admin section: displays clear help message when hovering over unclear icons. Seems okay.
![Page 25: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/25.jpg)
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.
![Page 26: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/26.jpg)
Someone got frustrated by all these unreadable icons
![Page 27: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/27.jpg)
Apple Mail. I always have to think twice what button to click for composing a new email.
![Page 28: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/28.jpg)
WTF?
WTF does this mean?
![Page 29: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/29.jpg)
WTF?
WTF!?
Later update added this. Hoping to draw more user’s attention to the functionality?
![Page 30: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/30.jpg)
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…
![Page 31: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/31.jpg)
Apparently this was unclear to many users when it was introduced. How to tweet?
![Page 32: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/32.jpg)
This additional UI element is clearer.
![Page 33: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/33.jpg)
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?’
![Page 34: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/34.jpg)
Clear icons yet ambiguous in this context. I’ve for sure clicked the wrong icon more than once!
![Page 35: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/35.jpg)
Tweetbot
Clear icons in the context of Twitter. Twitter users will recognize these. Seems okay to me for that reason.
![Page 36: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/36.jpg)
Tumblr
Again, pretty clear in the context of Tumblr. Tumblr users will recognize these.
![Page 37: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/37.jpg)
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.
![Page 38: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/38.jpg)
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?
![Page 39: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/39.jpg)
Some websites published A/B and usability tests on the topic of the hamburger icon.
![Page 40: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/40.jpg)
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.
![Page 41: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/41.jpg)
This makes no sense at all: there’s more than enough space to display the full navigation.
![Page 42: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/42.jpg)
Old New
Facebook at least replaced their hamburger icon with clearer menu icons.
![Page 43: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/43.jpg)
Also excellent: they don’t just use icons but they add text labels to them. A text label is always clearer than an icon.
![Page 44: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/44.jpg)
Unclear icons but still want to use them by all means? Always add text labels!
![Page 45: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/45.jpg)
text > icon
Never doubt: a text label is always clearer!
![Page 46: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/46.jpg)
Menu… or… hmmm…
Wish list, isn’t that clear?
App Store
Just when you thought you recognized the hamburger icon… grrr… lol!
![Page 47: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/47.jpg)
Use responsibly
Good icon sets. Use responsibly!
![Page 48: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/48.jpg)
Remember, this is your base rule!
![Page 49: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/49.jpg)
Use clear typography
![Page 50: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/50.jpg)
All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.”
—Tobias Frere-Jones
“
![Page 51: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/51.jpg)
What to look for in a good UI typeface?
![Page 52: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/52.jpg)
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.
![Page 53: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/53.jpg)
It has to be clear in small font-sizes
Text easily gets really small in user interfaces.
![Page 54: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/54.jpg)
What’s more readable?
Lucida Grande
Helvetica Neue
Submit question
Submit question
Half close your eyes. Which button is more readable?
![Page 55: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/55.jpg)
Helvetica really wasn't designed for small sizes on screens.”
—Erik Spiekermann
“
![Page 56: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/56.jpg)
Much criticism from the design community when Apple switched from Lucida Grande to Helvetica Neue in OS X Yosemite…
![Page 57: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/57.jpg)
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.
![Page 58: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/58.jpg)
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!
![Page 59: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/59.jpg)
A handful of excellent choices: typefaces designed for use in UIs
Let me help you out here
![Page 60: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/60.jpg)
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.
![Page 61: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/61.jpg)
Good to see Apple switched away from Helvetica and is now using a custom designed typeface called San Francisco. Not ideal (yet), but better!
![Page 62: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/62.jpg)
Use clear copy
![Page 63: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/63.jpg)
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
“
![Page 64: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/64.jpg)
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.
![Page 65: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/65.jpg)
The fastest way to improve your user interface is to improve the copywriting.”
—Joshua Porter
“
![Page 66: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/66.jpg)
This is well done: instead of ‘search’ it says: ‘where are you going?’ it’s much more inviting.
![Page 67: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/67.jpg)
Ebay says “I’m looking for…”
![Page 68: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/68.jpg)
Nike+
Nike+ says “Begin run” instead of “Start” which would be less descriptive. Very clear now.
![Page 69: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/69.jpg)
“What’s happening?” instead of just “Tweet something”
![Page 70: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/70.jpg)
Good tweet. Painfully funny.
![Page 71: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/71.jpg)
.I have absolutely no idea what button to click.
![Page 72: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/72.jpg)
.While we’re at it…
![Page 73: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/73.jpg)
A good user interface is concise
2
![Page 74: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/74.jpg)
Every element you add to your UI, makes the rest less important.
![Page 75: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/75.jpg)
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.
![Page 76: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/76.jpg)
Disappear when unneeded
Google Maps
Simple UI, yet very powerful app.
![Page 77: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/77.jpg)
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…
![Page 78: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/78.jpg)
No one enjoys filling out these…
You know there’s going to be problems when you click the ‘Submit’ button…
![Page 79: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/79.jpg)
Groups clear clutter
Looks more manageable
![Page 80: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/80.jpg)
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.
![Page 81: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/81.jpg)
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
“
![Page 82: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/82.jpg)
“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…
![Page 83: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/83.jpg)
All read this book: The Best Interface is No Interface, by Golden Krishna.
![Page 84: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/84.jpg)
Do we really need this, if the answer is Yes 9 times out of 10?
The 80 percent rule…
![Page 85: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/85.jpg)
The best interfaces are invisible
The best interface is no interface. Saving files usually happens in the background nowadays.
![Page 86: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/86.jpg)
The real world: if I write a note I don’t have to save it to keep my changes!
![Page 87: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/87.jpg)
Making an interface clear and concise is all about balance. Not an easy task.
.
![Page 88: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/88.jpg)
A good user interface is recognizable
3
![Page 89: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/89.jpg)
You might never have touched this particular switch, but you know how to operate it.
![Page 90: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/90.jpg)
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.
![Page 91: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/91.jpg)
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.
![Page 92: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/92.jpg)
As a designer you don’t want an original design by all means.
You want a user-friendly interface.
![Page 93: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/93.jpg)
Then again, when the time is right, go ahead and innovate!
Threes
![Page 94: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/94.jpg)
WeightBot
Tapbots apps: all custom designed controls.
![Page 95: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/95.jpg)
Nike+
![Page 96: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/96.jpg)
Inventive and recognizable = win!
The subtle green line at the top shows a reader’s progress on a long page.
![Page 97: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/97.jpg)
Collection of nice UI design details
.Nice collection of UI elements, often both inventive and recognizable.
![Page 98: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/98.jpg)
Consistency makes a user interface more recognizable
![Page 99: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/99.jpg)
![Page 100: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/100.jpg)
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.
![Page 101: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/101.jpg)
Sliders in Photoshop: very inconsistent in look and behavior
![Page 102: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/102.jpg)
Nike+ app: not so consistent
Look at all those different buttons
![Page 103: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/103.jpg)
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
“
![Page 104: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/104.jpg)
Notes iOS
Notes OS X
Consistency from one operating system to another.
![Page 105: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/105.jpg)
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!)
![Page 106: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/106.jpg)
.
Human Interface Guidelines
These help with consistency.
![Page 107: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/107.jpg)
A good user interface is fast
4
![Page 108: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/108.jpg)
Sorry for the cheesy picture
![Page 109: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/109.jpg)
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!
![Page 110: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/110.jpg)
Show the user something when a page is loading
YouTube
Can be very simple.
![Page 111: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/111.jpg)
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.
![Page 112: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/112.jpg)
Also, the user feels more assured
It’s clear the app is doing something here. I did not fuck up.
![Page 113: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/113.jpg)
Instant feedback is often very easy to implement yet makes a huge
difference to the user
Think about what happens in-between screens.
![Page 114: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/114.jpg)
No need to wait while uploading a video to Tumblr. You can add a caption, tags… while the app is uploading.
![Page 115: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/115.jpg)
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)
![Page 116: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/116.jpg)
A good user interface is effective
5
![Page 117: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/117.jpg)
![Page 118: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/118.jpg)
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…
![Page 119: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/119.jpg)
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? …
![Page 120: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/120.jpg)
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.
![Page 121: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/121.jpg)
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.
![Page 122: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/122.jpg)
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.
![Page 123: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/123.jpg)
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.
![Page 124: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/124.jpg)
It doesn’t get any better than this
![Page 125: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/125.jpg)
Think about novice users vs power users
![Page 126: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/126.jpg)
iOS Calculator
Create short cuts that make your app more efficient to those who know where to find them.
![Page 127: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/127.jpg)
Power users appreciate Photoshop’s powerful set of shortcuts. They’re very effective to them.
![Page 128: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/128.jpg)
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.
![Page 129: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/129.jpg)
Spotlight search
Power users appreciate iOS’s Spotlight Search. Quick way to get to phone numbers, apps, emails…
![Page 130: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/130.jpg)
OS X Spotlight search
Power users definitely appreciate Spotlight on the desktop. App launcher, calculator and so much more…
![Page 131: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/131.jpg)
Vimeo web app
It’s there but you only notice it when you try it.
![Page 132: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/132.jpg)
HTML forms
Don’t customize your form elements, especially if it breaks default behavior. Power users love to use shortcuts to navigate form elements.
![Page 133: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/133.jpg)
Make your app more effective: use better default settings
![Page 134: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/134.jpg)
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.
![Page 135: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/135.jpg)
‘Next busses’: I always tap that button to get an idea of the frequency of busses. Why not display it by default?
![Page 136: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/136.jpg)
.
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.
![Page 137: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/137.jpg)
A good user interface looks great
6
![Page 138: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/138.jpg)
A great looking UI is more attractive
• general look & feel • typography, color, contrast • visual design trends • subtle animations and transitions • subtle affirmative sounds • …
![Page 139: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/139.jpg)
A good user interface is forgiving
7
![Page 140: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/140.jpg)
Friendly apps are nicer apps
Shake to undo. So lovely.
![Page 141: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/141.jpg)
Undo makes the user feel like nothing can ever go wrong. Lovely!
![Page 142: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/142.jpg)
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.
![Page 143: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/143.jpg)
A good user interface evokes discovery through trial & error
That’s why Undo is so important!
![Page 144: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/144.jpg)
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.
![Page 145: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/145.jpg)
Always assume the user will make mistakes while using your interface
![Page 146: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/146.jpg)
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.
![Page 147: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/147.jpg)
NMBS app
Belgian railway service. Same functionality as previous app. Same typo. I get a helpful suggestion. That’s well done!
![Page 148: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/148.jpg)
Good design
Google’s “Did you mean?” We all recognize this. It’s not particularly beautiful, but it’s excellent design!
![Page 149: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/149.jpg)
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.
“
![Page 150: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/150.jpg)
A good user interface is ergonomic
8
![Page 151: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/151.jpg)
Design ergonomically
With this information, it would be silly to put the most important buttons in the red areas.
![Page 152: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/152.jpg)
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.
![Page 153: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/153.jpg)
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
.
![Page 154: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/154.jpg)
.“When in doubt, make it larger.” That’s probably what Maradona was thinking after his football career.
![Page 155: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/155.jpg)
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.
![Page 156: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/156.jpg)
Follow these
![Page 157: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/157.jpg)
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
“
![Page 158: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/158.jpg)
A good UI is like Maradona’s infamous hand of god. No one notices it and yet it gets the job done really fast.
![Page 159: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/159.jpg)
Thomas Byttebierthomasbyttebier.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! :)
![Page 160: Characteristics of a well designed user interface](https://reader036.vdocument.in/reader036/viewer/2022062313/55a510811a28ab3d2d8b4588/html5/thumbnails/160.jpg)
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