Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Characteristics of a well-designed UI

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)

C6a8646bc29876c3827631548e7e9190?s=128

Thomas Byttebier

March 02, 2015
Tweet

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

  99. None
  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

  117. None
  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