101 UX Principles – 2nd edition E-Book

Will Grant

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 207

Veröffentlichungsjahr: 2022

Beschreibung

“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

Leseprobe

101 UX Principles

Second Edition

Actionable Solutions for Product Design Success

Will Grant

BIRMINGHAM—MUMBAI

101 UX Principles

Second Edition

Copyright © 2022 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Senior Publishing Product Manager: Manish Nainani

Contracting Acquisition Editor: Tushar Gupta

Acquisition Editor – Peer Reviews: Gaurav Gavas

Project Editor: Janice Gonsalves

Content Development Editor: Edward Doxey

Copy Editor: Safis Editing

Technical Editor: Aniket Shetty

Proofreader: Safis Editing

Indexer: Hemangini Bari

Presentation Designer: Pranit Padwal

First published: December 2018

Second edition: May 2022

Production reference: 1160522

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80323-488-5

www.packt.com

“For Claire, Noah, and Alfie”

Contributors

About the author

Will Grant is a veteran product designer and UX professional with over 20 years’ experience overseeing the design, information architecture, and usability of web and mobile products that have reached over a billion users.

After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group—the world leaders in usable design. He has since devoted his career to working on designing usable, powerful products that solve problems and generate value for organizations. With a deep understanding of mobile, enterprise, and consumer software products, Will is adept at identifying and addressing users’ problems with thoughtful design.

Will is the author of Amazon bestseller 101 UX Principles and UX contributor to net, Econsultancy and other publications. He also co-founded and designed the web’s biggest data migration tool, SQLizer.io, and open-source visualization product QueryTree.

I’d like to thank Claudio Gomboli, Kate Shaw, and Ricardo Megger for their tireless and invaluable help in reviewing this book.

About the reviewers

Claudio Gomboli is the Head of User Experience at Canonical, the company behind Ubuntu Linux. Previously at Intel, he manages the UX team at Canonical, working on web applications and services for enterprise cloud solutions, IoT, and embedded devices.

Currently based in London, Claudio has lived in Italy, Japan, and Germany over the last 20 years, working in various design roles with web agencies, start-ups, design studios, and large IT corporations. During his career, Claudio has worked with exceptional people and multidisciplinary teams, delivering products from end to end.

Kate Shaw is a senior product designer, communicator, creator, problem solver, mum of three, and wannabe revolutionary.

With over 20 years’ experience in digital product design and seeking the balance between commercial and customer needs, Kate has designed intuitive experiences for start-ups, FTSE 100 companies, and agencies. Her clients have included The Telegraph, the BBC, The Guardian, John Lewis, and Expedia, and she is now happily relocated to Switzerland, working for the Swiss leader in online banking.

Ricardo Megger is a Brazilian UX/UI designer. He has degrees in Design and Marketing and works at Grupo Services, where he helps create amazing experiences for users. He likes to transition between different areas of knowledge, making analogies between them; as such, he is very interested in biomimicry. In his spare time, he enjoys reading classical poetry and watching horror movies. His major professional aspiration is helping the future happen.

.

Join us on Discord!

Read this book alongside other users, UX professionals, and author Will Grant.

Ask questions, contribute to discussions with other readers, chat with Will via Ask Me Anything sessions and much more.

Scan the QR code or visit the link to join the UX Squad community.

https://packt.link/101uxprinciples

Contents

Preface

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX Philosophy

Principle 101: Don’t Join the Dark Side

Bonus: Strive for Simplicity

Other Books You May Enjoy

Index

Landmarks

Cover

Index

Preface

These 101 principles are a broad set of guidelines for designing digital products. There are no doubt thousands more, but these are the core principles that will make most products more usable and effective. They’ll save you time and make users happier.

This book discusses many aspects of User Experience (UX) but focuses heavily on the User Interface (UI). The fact is, the pixels on the screen are still a huge part of the customer experience with digital products.

The UI (the buttons on the screen, the controls on the form) is the only way the user has to interact with your product—making the quality of the UX (the overall experience) tightly coupled with the quality and usability of the interface. UX is a bigger domain than UI, but we can’t ignore how essential the UI is to UX.

Somewhere along the journey of the web maturing, we forgot something important: UX is not art. It’s the opposite of art. UX design should perform a function: serving users. It must still look great, but not at the expense of actually working. Poor design has crept in over the years and some digital products have become worse in 100 tiny ways.

So how did we get here? Branding agencies got involved. They insisted that because as a company we always refer to photos as “memories,” the photo menu should be called memories too. Nobody knows what it means or how to find their photos.

The CEO personally picked the shade of sea breeze that the company uses for its headings everywhere, so all the headings are pale blue. This means nobody can read them against a white background on their mobile phone screen.

The marketing department decided that a full-screen pop-up collecting users’ email addresses would be good for the Quarter 4 CRM metrics. Then they said, “Oh, don’t make the close icon too big because we don’t want customers to actually close it.”

In these three examples, found all over the web, the company lost sight of the user’s needs and forgot to put the user first. Over the past 20 years, I’ve learned a lot about designing digital products. It’s hard to pick all these individual lessons out because it feels like they’ve been compiled into a big UX operating system in my brain.

I’m not ashamed to admit that I’m a design purist. Of course, I value aesthetics, but I see them as a “hygiene factor” and a necessity. Beyond the veneer of aesthetics, I’ve always strived to produce software that’s usable and powerful, where the features are instantly obvious or easy to discover and learn.

This book is a “shortcut to success” for less experienced designers and a challenge to some accepted thinking for seasoned UX professionals.

The principles are structured into broad sections such as typography, controls, journeys, and the wider field of UX practice. Feel free to dip in and out and use the book as a reference, although it has been designed to be read through in order, if you wish.

You might find yourself disagreeing with some of the principles, and that’s OK. This is, after all, an opinionated book—but the disagreement will sometimes be a prompt to examine your thinking and evaluate if there might be a better way to accomplish your users’ goals.

I hope you enjoy the book and that it helps you to become a better UX professional so that you can implement experiences that work, avoid common pitfalls, and grow your confidence to fight for the user.

Will Grant, May 2022

Share your thoughts

Once you’ve read 101 UX Principles, Second edition, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

UX Field

The first principles of UX put the user at the center of your thinking. This section introduces the underlying principles needed to design user-centric products and highlights the importance of testing and iterative improvement of your creations.

#1

Everyone Can Be Great at UX

This guide is for anyone who designs software products as part of their work. You may be a full-time designer, a UX professional, or someone who has to make decisions about UX in your organization’s products. Regardless of your role, the principles in this guide will improve your products, help you to serve your users’ needs better, and make your customers more likely to return to you.

Although various examples in this book feature a mobile app, website, web app, or some desktop software, the principles are ready to be tailored to a wide range of applications, from in-car UIs, mobile games, and VR, to washing machine interfaces and everything in between.

Developing the primary skills of empathy and objectivity is essential for anyone to be great at UX. This is not to undermine those who have spent many years studying and working in the UX field—their insights and experience are valuable—rather to say that study and practice alone are not enough.

You need empathy to understand your users’ needs, goals, and frustrations. To “walk a mile in their shoes” requires you to approach user problems with respect—they’re not stupid, your software is just too hard to use. You need objectivity to look at your product with fresh eyes, spot the flaws, and fix them.

User testing is essential and will reveal flaws you never imagined were there—talk to users early and often. It’s easier to fix a product at the beginning—and almost impossible to fix at the end.

With this foundation of empathy and objectivity, you can learn everything else it takes to be great at UX.

Learning points

UX isn’t a talent you’re born with—you can learn how to be good in this field.Objectivity and empathy are the two key personality traits you need to display—your problems and needs aren’t always the same as your users’.This book aims to provide a shortcut to success with 101 tried-and-tested principles.

#2

Be Strategic About Using These Principles

The principles we look at in this book are great and all, but how do we put them into action? Since the first edition of this book was released in 2018, the number 1 question I’ve been asked is a variation of “How do I put these principles into practice in my day-to-day work?” The best intentions of a principled UX professional are one thing, but the messy reality of working in a modern business is quite another. Here are the best tips I’ve successfully used over the years:

Fight for the user. Day-to-day business involves competing departments and priorities. KPIs and OKRs are fine for marketing and sales departments, but your job is to fight for the user—putting their needs front and center of the plans. Sometimes this will mean clashing with other teams, it’s unavoidable, and you won’t win every battle—but it’s important you’re there and your voice is heard. The sales team has goals to hit, but your job is to convince them—with best practice and data—that a full-screen unskippable video advert will do more to drive customers away than engage them.Build allies in your organization. The most effective way to “get UX done” in an organization is to build allies across the business. Product managers, developers, and senior stakeholders (yes, including the “C-level” suits) all need to be onside and understand the value of UX. Take them along on your process.Understand the business goals.You’re the voice of the user, but you can’t work in a vacuum—you need to understand the business goals and the plans for your products and services. You won’t survive for long if you’re just the voice of the user without enabling results for the business. Engage with product managers and help shape the roadmap and business plan.Build a culture of user research. Involve your colleagues in user research, bring them to testing sessions, and disseminate your results to a wide group of people. UX designers and product people alike should be thinking about user needs and testing ideas with them every step of the way. Finally, bring these ideas back to the stakeholders in the business: there’s nothing as powerful in changing a CEO or CMO’s mind than presenting them with a trove of research findings from real customers.Drive data-driven decisions. Use data to steer your high-level decision-making—this point is less about qualitative data (data you can describe with language, not numbers) from user testing, and more about quantitative data (data you can measure with numbers) from analytics and other metrics. Use this data to help you make better decisions in terms of product features, missing services, and whole approaches to doing business.

Learning points

Fight for the userBuild allies in your organizationUnderstand the business goalsBuild a culture of user researchDrive data-driven decisions

#3

Don’t Be Afraid to Ship Something Simple…

One of the (many) great things to come out of the software industry’s adoption of Agile methodologies in the early 2000s is the behavior of shipping early and often. From the Agile Manifesto principles:

Our highest priority is to satisfy the customer through early and continuous delivery of valuable software.

– Agile Manifesto,https://agilemanifesto.org/principles.html

You don’t wait for a “big bang” release; you don’t perfect every aspect of your product—you release valuable software out to users as soon as it’s ready, and you update it continuously. Some of the ways that this principle is often violated in modern software development are:

You want to add just one more feature before you think the product is readyThe marketing team wants to wait until the campaign is ready to promote the featureYour competitor offers more features and you need to match them

Trust me—your users don’t care about these reasons. Your product doesn’t need to be a whole new category of product; it just needs to help users get their shit done. Fewer, better features are better for the user experience than trying to cram too much in, pushing deadlines and developers until your user ends up with 100 half-baked features instead of 25 excellent ones—and a later release date.

Try to remember that, in most cases, most users will only use your app for 1% of their day—you work in it all the time so it’s easy to lose objectivity. Ask yourself: “Do we really need Y? Would users be happier with a better X?”

Create a well-researched, well-defined scope for your first version, so that—when stakeholders inevitably get the fear about missing features compared to competitors—there is justification and strategy for continuing with the minimal version release and then iterating later based on what you learned.

Learning points

Keep it simple; don’t reinvent the wheelShip early and often, delivering valuable featuresDon’t chase competitors’ feature sets; sometimes less is more

#4

…But Complexity Can Be Good for Some Users

A few years back I did some work for an insurance company—I know, I get all the exciting projects, right? The software was a web-based UI that call center staff used to manage incoming customer inquiries. In this web application I was tasked with improving, a customer would call up to change their policy, or get a new one, cancel their cover, and so on, and the user would need to search, edit, save, or delete as necessary.

It had recently undergone a redesign and my job was to work with users to understand how successful the redesign had been and what features were succeeding and which weren’t. The new UI was clean, modern, airy—based on Material Design, with lots of negative space and big, clear typefaces.

It turned out that all the users hated the new system. The information density was too low. Instead of seeing all the customer information on one (or two) screens, tightly packed together, the user now had to navigate through multiple screens, scrolling view after view to see the details they needed. They even had to navigate back and forth between two views—waiting on the page load each time—to do basic things like checking a policy expiry date.

Nobody had asked users, “What is wrong with the current system?” Instead, they optimized the new design for user needs that didn’t exist (see #6, Test with Real Users).

Many skilled users who work in an enterprise environment rely on software to do lots of the same thing, repeatedly. Making enterprise software too simple—by trying to be more “consumer-looking”—just hides necessary functions away from the user and makes it frustrating and slow, increasing cognitive load.

For example, an aircraft cockpit is dense and complex—but it needs to be, because complexity is good for these users:

Figure 4.1: Look at all those controls. Image by Honglin Shaw on Unsplash

Similarly, professional audio tool Ableton Live has a dense, complex interface, but musicians spend all day, every day here and love the productivity it offers:

Figure 4.2: Ableton Live UI

Learning points

Be wary of making complex products too “consumer-looking” and simpleDon’t follow trends; focus on what your user needsComplexity doesn’t always mean a bad user experience

#5

Use A/B Testing to Test Your Ideas

We can learn a