Don't Make Me Think

By Steven Krug

Preface Notes

  • Usability (often referred to as User Experience Design – UXD/UX) is an umbrella term for any activity or profession that contributes to a better experience for the user
  • Usability is about people and how they understand and use things, not about technology
  • Interaction Design – deciding what happens next based on user input
  • Information Architecture – figuring out how everything should be organized
  • Something is useful if – a person of average ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth

Don’t Make Me Think

  • Make interfaces self-evident, obvious, and self-explanatory. People should just “get it”
    • Don’t make things busy
    • Ensure all elements clearly reflect what they are (buttons, navigation, etc)
    • Don’t make the user guess the functionality of something
    • Every little distraction adds to the cognitive load of the user – KISS
    • If dealing with complex content, make it self-explanatory if self-evident is too difficult

How We Really Use The Web

  • Most often people scan vs read a page, only after the initial scan does it become evident that further reading or interacting should continue. This is why it is important to make things obvious.
  • The exception to the scan is pages containing documents, news, reports, product descriptions, etc – but often still, reading is blended with scanning
  • Why do we scan?
    • Most web use involves trying to get something done, and usually done quickly
    • Often there is only a portion that is relevant so we scan to find the relevant bits
    • We’re already good at it (we do it every day)
  • Users don’t often choose the best option, but the first reasonable option – satisficing/efficiency. There is no penalty for being wrong – a simple back button fixes the issue
  • People muddle through vs fully learning – some things just aren’t important to people
  • If it works we stick to it, we don’t often search for, but stumble across better ways

Billboard Design 101

  • As the creator, you’re in control
    • Take advantage of conventions
    • Create effective visual hierarchies
    • Break pages up into clearly defined areas
    • Make it obvious what is clickable
    • Eliminate distractions
    • Format content to support scanning
  • Clarity over consistency - something significantly clearer by making it slightly inconsistent is ok
  • Pages with a clear visual hierarchy have three traits
    • The more important something is, the more prominent it is
    • Things that are related logically are related visually
    • Things are nested visually to show what is part of what
  • Get rid of anything that is not making a real contribution.
  • Format text to support scanning
    • Use plenty of headings (act as informal table of contents for a page)
      • Ensure heading is close to section it pertains to, don’t have it float in the middle
    • Keep paragraphs short (“wall of words” are daunting)
    • Use bulleted lists (anything that can be should be) & ensure proper spacing between items
    • Highlight key terms (help aid scanning but don’t over do it)

Animal, Vegetable, or Mineral

  • When providing a user with decisions, it’s best to:
    • Make it brief (the smallest amount of info that will help the user)
    • Make it timely (only encountered when needed)
    • Make it unavoidable (formatted in a way that ensures it is noticed)
  • Omit needless words
    • Reduces noise level of page
    • Makes useful content more prominent
    • Allows more of the page to be seen at a glance (supports scanning)
  • Eliminate instructions – the goal should be to make everything self explanatory – bare minimum

Street Signs and Breadcrumbs

  • People won’t use your website if they can’t find their way around it
  • Navigation isn’t a feature of a web site, it is the website (same way the interface is the product)
  • Navigation
    • Helps us find what we’re looking for
    • Tell us where we are
    • Reveals content (informs what the site contains)
    • Informs how to use the site (tells you where to begin and what your options are)
    • Gives confidence to users (“If done poorly, people are likely not going to return”
  • Naming
    • Every page needs a name (street signs of your site)
    • Name needs to be in the right place and prominent
    • Page name needs to match the name of what I clicked to get there (keep user’s trust)
  • "You are here" navigation visual needs to be prominent (don’t be too subtle)
  • Breadcrumbs
    • Put them at the top
    • Use “>” between levels
    • Boldface the last item (“you are here”) and because you’re already there it’s not a link
  • Tabs are a great UI element for dividing information on a page
    • They’re self-evident
    • Hard to miss

The Big Bang Theory of Web Design

  • The first few seconds on a new website are critical – make it obvious what the site is and what you can do
  • Even if a user’s first experience with a site isn’t the home page, they often next click to go to the home page to get their bearings
  • Motto – expresses a guiding principle, goal, or ideal whereas a Tagline – conveys a value proposition
  • Any shared resource will inevitably be destroyed by overuse – focus on what’s important, nothing more

The Farmer and the Cowman Should Be Friends

  • ALL WEB USERS ARE UNIQUE AND ALL WEB USE IS BASICALLY IDIOSYNCRATIC

Usability Testing on 10 cents a Day

  • You must test – others aren’t blinded by what you’re blinded by as a creator
    • Even the worst test with the wrong user will show you important things
  • When facilitating a usability test, encourage the user to “think out loud” as they interact with the product

Mobile

  • It’s all about the tradeoffs, constraints actually make design easier and foster innovation/creativity
  • Whenever you’re designing, you’re dealing with constraints – with constraints come tradeoffs
  • Things that the user would want to do in a hurry/frequently should be close at hand, everything else can be a few taps away (with an obvious path to get there)
  • MANAGING REAL ESTATE CHALLENGES SHOULDN’T BE DONE AT THE COST OF USABILITY
  • Responsive design
    • Tends to be a lot of work
    • Is very hard to do well
  • Don’t hide affordances
    • Affordances are the meat of a UI (visual cues are extremely important)
    • Flat design can be an issue – just ensure sufficient visual cues
    • Focus on “above the fold” content and ensure it loads fast
  • The three goal attributes of a UI should be:
    • Delight – provoke user thoughts - fun, surprising, impressive, clever, magical
    • Learnability – less is more, confirm learning through usability testing
    • Memorability – a huge factor of whether people adopt an app for regular use

Usability as Common Courtesy

  • Things that diminish user goodwill
    • Hiding information (phone numbers and rates)
    • Punishing user for not doing it your way (formatting data should be automatic)
    • Asking user for info the site doesn’t really need
    • Giving the user (“You call is important to us…” – but my time isn’t?)
    • Amateurish look
  • Things that increase user goodwill
    • Make main user needs/wants obvious and easy to access or use
    • Tell user what they want to know (shipping rates, prices, fees, outages, etc)
    • Save the user steps (link in email vs more reading)
    • Effort into showing you care - keep the user/customer coming back
    • Answer common questions and make them visible
    • Creature comforts (printer friendly)
    • Make it easy to recover from errors
    • When in doubt, apologize (let them know if limits you’re aware of may inconvenience them)

Definitive Answers

  • Don’t use small, low-contrast type
  • Don’t put labels inside form fields (unless can’t be part of submission, reveal again when cleared)
  • Preserve the distinction between visited and non-visited links
  • Don’t float heading between paragraphs