Book Image

101 UX Principles – 2nd edition - Second Edition

By : Will Grant
4 (2)
Book Image

101 UX Principles – 2nd edition - Second Edition

4 (2)
By: Will Grant

Overview of this book

“This updated version of 101 UX Principles is a delight. It's an educational and fun provocation to look at the world of UX differently – solidly from the user's point of view." -Elizabeth Churchill, Director of User Experience, Google “A phenomenal reference guide. Complete with case studies, a record of personal experience, and visual examples, Grant makes it clear why these techniques have found their way into the canon of UX best practices.” -Jeff Gothelf, Author of Lean UX “..I recommend it to anyone looking to learn the basics and also for more experienced designers - the author’s candid opinions will force you to revisit some of your established assumptions!" -Anne Marie-Leger, Staff Product Designer, Shopify “An absolute must-read, not only for UX designers, but this book is also super relevant for product managers trying to get better at product usability. Two enthusiastic thumbs up!" -Trent Blakely, Sr. Product Manager, Equinix This book is a manifesto of UX/UI design best practices to help you put the focus back on what really matters: the user. From UX laws to practical UI, color, typography, and accessibility advice, it’s all packed into this easy-to-consult and fun read: Essential UX laws Handy best practices Snippets of technical knowledge for anyone who wants to work in the digital space 101 UX Principles demonstrates the success from best-in-class products and leads the way to delight your users. Keep it on your desk for quick reference, send as a gift to colleagues to build allies, or brandish it as your weapon of choice during meetings to fight for your users’ right to a better digital experience. Sneak a peek at some of the new and updated principles in this UX design book: Work with user expectations, not against them Make interactive elements obvious and discoverable Optimize your interface for mobile Streamline creating and entering passwords Respect users' time and effort in your forms Use animation with care in user interfaces How to handle destructive user actions Chatbots are usually a bad idea – and how to make them better Use A/B testing to test your ideas Let users give feedback, but don't hassle them Make it clear to users if they're joining or signing-in Only use modal views for blocking actions How complexity can be good for some users

Related Content you might be interested in

Current Title:

Small book image
101 UX Principles – 2nd edition - Second Edition
Will Grant
May, 2022 | 454 pages
Small book image
UX for the Web
Cara Winterbottom | Marli Ritter
Sep, 2017 | 306 pages
Small book image
User Experience Mapping
Peter W Szabo
May, 2017 | 352 pages
Small book image
Fixing Bad UX Designs
Lisandra Maioli
Feb, 2018 | 348 pages
Table of Contents (18 chapters)
Preface
Preface
Free Chapter
1
UX Field
UX Field
Principle 1: Everyone Can Be Great at UX
Principle 2: Be Strategic About Using These Principles
Principle 3: Don’t Be Afraid to Ship Something Simple…
Principle 4: …But Complexity Can Be Good for Some Users
Principle 5: Use A/B Testing to Test Your Ideas
Principle 6: Test with Real Users
Principle 7: Nobody Cares About Your Brand
2
Typography
Typography
Principle 8: Don’t Use More than Two Typefaces
Principle 9: Users Already Have Fonts on Their Computers, So Use Them
Principle 10: Use Type Size and Weight to Depict an Information Hierarchy
Principle 11: Use a Sensible Default Size for Body Copy
3
Controls
Controls
Principle 12: Use an Ellipsis to Indicate That There’s a Further Step
Principle 13: Make Interactive Elements Obvious and Discoverable
Principle 14: Make Buttons a Sensible Size And Group Them Together by Function
Principle 15: Make the Whole Button Clickable, Not Just the Text
Principle 16: Don’t Invent New, Arbitrary Controls
Principle 17: Search Should Be a Text Field with a Button Labeled “Search”
Principle 18: Sliders Should Be Used for Non-Quantifiable Values Only
Principle 19: Use Numeric Entry Fields for Precise Integers
Principle 20: Don’t Use a Drop-Down Menu If You Only Have a Few Options
Principle 21: Allow Users to Undo Destructive Actions
Principle 22: Optimize Your Interface for Mobile
4
Content
Content
Principle 23: Use “Infinite Scroll” For Feed-Style Content Only
Principle 24: If Your Content Has a Beginning, Middle, and End, Use Pagination
Principle 25: Allow Users to Accept or Reject Cookies with One Click
Principle 26: Help Users Understand Their Next Steps from “Empty States”
Principle 27: Make “Getting Started” Tips Easily Dismissable
Principle 28: When a User Refreshes a Feed, Move Them to the Last Unread Item
5
Navigation
Navigation
Principle 29: Don’t Hide Items Away in a “Hamburger” Menu
Principle 30: Make Your Links Look like Links
Principle 31: Split Menu Items Down Into Subsections, so Users Don’t Have to Remember Large Lists
Principle 32: Categorize Settings in an Accessible Way
Principle 33: Repeat Menu Items in the Footer or Lower Down in the View
6
Iconography
Iconography
Principle 34: Use Consistent Icons Across the Product
Principle 35: Don’t Use Obsolete Icons
Principle 36: Don’t Try to Depict a New Idea with an Existing Icon
Principle 37: Never Use Text on Icons
Principle 38: Always Give Icons a Text Label
7
Input
Input
Principle 39: Use Device-Native Input Features Where Possible
Principle 40: Streamline Creating and Entering Passwords
Principle 41: Always Allow the User to Paste into Password Fields
Principle 42: Don’t Attempt to Validate Email Addresses
Principle 43: Respect Users’ Time and Effort in Your Forms
Principle 44: Pick a Sensible Size for Multiline Input Fields
Principle 45: Use Animation with Care in User Interfaces
Principle 46: Use the Same Date Picker Controls Consistently
Principle 47: Pre-Fill the Username in “Forgot Password” Fields
Principle 48: Make Your Input Systems Case-Insensitive
Principle 49: Chatbots Are Usually a Bad Idea
8
Forms
Forms
Principle 50: If Your Forms Are Good, Your Product Is Good
Principle 51: Validate Data Entry as Soon as Possible
Principle 52: If the Form Fails Validation, Show the User Which Field Needs Their Attention
Principle 53: Users Don’t Know (and Don’t Care) About Your Data Formats
Principle 54: Pick the Right Control for the Job
9
User Data
User Data
Principle 55: Allow Users to Enter Phone Numbers However They Wish
Principle 56: Use Dropdowns Sensibly for Date Entry
Principle 57: Capture the Bare Minimum When Requesting Payment Card Details
Principle 58: Make It Easy for Users to Enter Postal or ZIP Codes
Principle 59: Don’t Add Decimal Places to Currency Input
Principle 60: Make It Painless for the User to Add Images
10
Progress
Progress
Principle 61: Use a “Linear” Progress Bar If a Task Will Take a Determinate Amount of Time
Principle 62: Show a Numeric Progress Indicator on the Progress Bar
Principle 63: Show a “Spinner” If the Task Will Take an Indeterminate Amount of Time
11
Accessible Design
Accessible Design
Principle 64: Contrast Ratios Are Your Friends
Principle 65: If You Must Use “Flat Design” Then Add Some Visual Affordances to Controls
Principle 66: Avoid Ambiguous Symbols
Principle 67: Make Links Make Sense Out of Context
Principle 68: Add “Skip to Content” Links Above the Header and Navigation
Principle 69: Never Use Color Alone to Convey Information
Principle 70: If You Turn off Device Zoom with a Meta Tag, You’re Evil
Principle 71: Give Navigation Elements a Logical Tab Order
Principle 72: Write Clear Labels for Controls
Principle 73: Make Tappable Areas Finger-Sized
12
Journeys and State
Journeys and State
Principle 74: Let Users Turn off Specific Notifications
Principle 75: Each Aspect of a User’s Journey Should Have a Beginning and End
Principle 76: The User Should Always Know What Stage They Are at in Any Given Journey
Principle 77: Use Breadcrumb Navigation
Principle 78: Users Rarely Care About Your Company
Principle 79: Follow the Standard E-Commerce Pattern
Principle 80: Show an Indicator If the User’s Work Is Unsaved
Principle 81: Let Users Give Feedback, but Don’t Hassle Them
Principle 82: Don’t Use a Vanity Splash Screen
Principle 83: Make Your Favicon Distinctive
Principle 84: Add a “Create From Existing” Flow
Principle 85: Make It Easy for Users to Pay You
Principle 86: Give Users the Ability to Filter Search Results
Principle 87: Your Users Probably Don’t Understand the Filesystem
Principle 88: Show, Don’t Tell
13
Terminology
Terminology
Principle 89: Be Consistent with Terminology
Principle 90: Use “Sign In” and “Sign Out”, Not “Log In” and “Log Out”
Principle 91: Make It Clear to Users If They’re Joining or Signing In
Principle 92: Standardize the Password Reset Experience
Principle 93: Write Like a Human Being
Principle 94: Choose Active Verbs over Passive
14
Expectations
Expectations
Principle 95: Search Results Pages Should Show the Most Relevant Result at the Top of the Page
Principle 96: Pick Good Defaults
Principle 97: Only Use Modal Views for Blocking Actions
Principle 98: Give Users the Experience They Expect
Principle 99: Decide Whether an Interaction Should Be Obvious, Easy, or Possible
Principle 100: “Does It Work on Mobile?” Is Obsolete
15
UX Philosophy
UX Philosophy
Principle 101: Don’t Join the Dark Side
Bonus: Strive for Simplicity
16
Other Books You May Enjoy
Other Books You May Enjoy
17
Index
Index

Write Clear Labels for Controls

Another small change you can make, which will make the world of difference to your users using assistive technologies, is writing clear labels:

Write Clear Labels for Controls

Figure 72.1: An example of bad labelling

Write Clear Labels for Controls

Figure 72.2: An example of good labelling

Pre-filling your field with placeholder (or watermark) text may look tidy, but it’s not supported in all browsers and disappears when the focus moves to the input field.

You can, however, include both, which allows the field to be identified and gives some assistance to users as to the kind of information that is needed for that input.

A word about alignment: from a logical “order of the content” point of view, it makes sense to add the label above the field and left align. All other alignments (right align, label to the left, and so on) have various visual and accessibility issues: your default should be above the field, left-aligned.

Write Clear Labels for Controls

Figure 72.3: An input with a clear...

Previous Section
End of Section 10
Next Section