Embed Size (px)
Citation preview
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.
Here I am, in the eighties. My brother is the cute one.
As a kid, I wanted to be Maradona.
WERKSITUATIE?
Picture says it all. No doubt I was going to be him one day…
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.
I’m online.
It’s hard
That’s what I can tell after having designed quite a few user interfaces.
Good interface design is like tightrope walking. It’s all about
finding the right balance.
“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
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.
As far as the customer is concerned, the interface is the product.”
—Jef Raskin, 2001
“
That’s quite a responsibility you have there, as a designer.
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.
Above all, a good user interface is clear
1
If users don’t know how your app works, they’ll become frustrated
It’s simple.
Read this book! Short resume: you don’t want to make your users think when they’re using your interface.
Messages
iOS Messages app: excellent example of a clear user interface. All mums will instantly understand this.
Me and my mum. I love her.
WhatTheFont app: it recognizes fonts in photographs. Graphically not pleasing, but definitely clear. Happy mums.
De Lijn
De Lijn (Belgian public transportation service): clear and attractive. Nice to use.
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.
No content yet: helpful information in a more personal way. Nicer than just showing an empty screen.
Wordpress admin section: displays clear help message when hovering over unclear icons. Seems okay.
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.
Someone got frustrated by all these unreadable icons
Apple Mail. I always have to think twice what button to click for composing a new email.
WTF?
WTF does this mean?
WTF?
WTF!?
Later update added this. Hoping to draw more user’s attention to the functionality?
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…
Apparently this was unclear to many users when it was introduced. How to tweet?
This additional UI element is clearer.
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?’
Clear icons yet ambiguous in this context. I’ve for sure clicked the wrong icon more than once!
Tweetbot
Clear icons in the context of Twitter. Twitter users will recognize these. Seems okay to me for that reason.
Tumblr
Again, pretty clear in the context of Tumblr. Tumblr users will recognize these.
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.
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?
Some websites published A/B and usability tests on the topic of the hamburger icon.
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.
This makes no sense at all: there’s more than enough space to display the full navigation.
Old New
Facebook at least replaced their hamburger icon with clearer menu icons.
Also excellent: they don’t just use icons but they add text labels to them. A text label is always clearer than an icon.
Unclear icons but still want to use them by all means? Always add text labels!
text > icon
Never doubt: a text label is always clearer!
Menu… or… hmmm…
Wish list, isn’t that clear?
App Store
Just when you thought you recognized the hamburger icon… grrr… lol!
Use responsibly
Good icon sets. Use responsibly!
Remember, this is your base rule!
Use clear typography
All text needs legible typefaces. But especially at interfaces, our eyes need fonts that cooperate rather than resist.”
—Tobias Frere-Jones
“
What to look for in a good UI typeface?
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.
It has to be clear in small font-sizes
Text easily gets really small in user interfaces.
What’s more readable?
Lucida Grande
Helvetica Neue
Submit question
Submit question
Half close your eyes. Which button is more readable?
Helvetica really wasn't designed for small sizes on screens.”
—Erik Spiekermann
“
Much criticism from the design community when Apple switched from Lucida Grande to Helvetica Neue in OS X Yosemite…
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.
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!
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!
Use clear copy
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
“
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.
The fastest way to improve your user interface is to improve the copywriting.”
—Joshua Porter
“
This is well done: instead of ‘search’ it says: ‘where are you going?’ it’s much more inviting.
Ebay says “I’m looking for…”
Nike+
Nike+ says “Begin run” instead of “Start” which would be less descriptive. Very clear now.
“What’s happening?” instead of just “Tweet something”
Good tweet. Painfully funny.
.I have absolutely no idea what button to click.
.While we’re at it…
A good user interface is concise
2
Every element you add to your UI, makes the rest less important.
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.
Disappear when unneeded
Google Maps
Simple UI, yet very powerful app.
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…
No one enjoys filling out these…
You know there’s going to be problems when you click the ‘Submit’ button…
Groups clear clutter
Looks more manageable
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.
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 files 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.
.
A good user interface is recognizable
3
You might never have touched this particular switch, but you know how to operate it.
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.
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.
As a designer you don’t want an original design by all means.
You want a user-friendly interface.
Then again, when the time is right, go ahead and innovate!
Threes
WeightBot
Tapbots apps: all custom designed controls.
Nike+
Inventive and recognizable = win!
The subtle green line at the top shows a reader’s progress on a long page.
Collection of nice UI design details
.Nice collection of UI elements, often both inventive and recognizable.
Consistency makes a user interface more recognizable
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.
Sliders in Photoshop: very inconsistent in look and behavior
Nike+ app: not so consistent
Look at all those different buttons
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
“
Notes iOS
Notes OS X
Consistency from one operating system to another.
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!)
.
Human Interface Guidelines
These help with consistency.
A good user interface is fast
4
Sorry for the cheesy picture
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
YouTube
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)
A good user interface is effective
5
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…
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? …
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.
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.
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.
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.
It doesn’t get any better than this
Think about novice users vs power users
iOS Calculator
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.
Spotlight search
Power users appreciate iOS’s Spotlight Search. Quick way to get to phone numbers, apps, emails…
OS X Spotlight search
Power users definitely 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.
HTML forms
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?
.
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.
A good user interface looks great
6
A great looking UI is more attractive
• general look & feel • typography, color, contrast • visual design trends • subtle animations and transitions • subtle affirmative sounds • …
A good user interface is forgiving
7
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 workflow
“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.
NMBS app
Belgian railway service. Same functionality as previous app. Same typo. I get a helpful suggestion. That’s well done!
Good design
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 quality.”
—Dmitry Fadeyev.
“
A good user interface is ergonomic
8
Design ergonomically
With this information, it would be silly to put the most important buttons in the red areas.
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.
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
.
.“When in doubt, make it larger.” That’s probably what Maradona was thinking after his football career.
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.
Follow these
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.
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! :)
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
