101 UX Principles E-Book

Will Grant

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 158

Veröffentlichungsjahr: 2018

Beschreibung

Publisher's note: This edition from 2018 is outdated and doesn't make use of the most recent UX best-practices. A new 2nd edition, updated for latest use cases and examples, has now been published.

Book Description

We want our UX to be brilliant. We want to create stunning user experiences. We want our UX to drive the success of our business with useful and usable software products. This book draws on the wisdom and training of Jakob Nielsen and Don Norman to help you get your UX right - in 101 ways!

101 UX Principles shows you the 101 most important things you need to know about usability and design. A practical reference for UX professionals, and a shortcut to greatness for anyone who needs a clear and wise selection of principles to guide their UX success. Learn the key principles that drive brilliant UX design.

Enjoy 101 Principles including 'Good UX has a Beginning, a Middle, and an End', 'Make Your Links Look Like Links', 'Don't Use Obsolete Icons', 'Decide Whether an Interaction Should Be Obvious, Easy, or Possible', 'Test with Real Users', 'Making the most of fonts', 'Good UX for search results', and 'Show your user - don't tell your user!'

“Good to read from beginning to end, and a nice dip-in-and-out text, the chapter titles reminded me of principles I don't even think about explicitly when I likely should. The book inspired me to start more explicitly articulating some of the principles I just take for granted.”

- Elizabeth Churchill, Director of User Experience at Google

“This is a great practical read. It is convenient to use as a reference when solving real UX problems. I would definitely recommend it as an introduction to UX, but also as a good reminder of best practices for more experienced designers.”

- Anne-Marie Leger, Designer at Shopify

Some more of the 101 UX Principles featured in this book:

Work with user expectations not against them

How to build upon established metaphors

How to arrange navigation elements

How to introduce new ideas to your user

Matching pagination and content structure

When invention is not good for UX

Striving for simplicity

Reducing user tasks

What to make clickable

Making the most of fonts

Making your links look like links

Picking the right control for the job

Data input and what users care about

How to handle destructive user actions

When color should not convey information

Tappable areas and the size of fingers

Getting payment details the right way

Use the standard e-commerce pattern

If you really must use a flat design

When to use progress bars or spinners

Dropdowns the right and wrong way

Handling just-off-screen content

How to do Hamburger menus right

When to hide Advanced Settings

Good UX for Notifications

Leseprobe

Table of Contents

101 UX Principles

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is Searching for Authors Like You

Preface

#1. Anyone Can Be a User Experience (UX) Professional

Learning points

#2. Don't Use More Than Two Typefaces

Learning points

#3. Users Already Have Fonts on Their Computers, So Use Them

Learning points

#4. USE TYPE SIZE TO DEPICT INFORMATION HIERARCHY

Headline that tells you something

Learning points

#5. Use a Sensible Default Size for Body Copy

Learning points

#6. Use an Ellipsis to Indicate That There's a Further Step

Learning points

#7. Make Your Buttons Look Like Buttons

Learning points

#8. Make Buttons a Sensible Size and Group Them Together by Function

Learning points

#9. Make the Whole Button Clickable, Not Just the Text

Learning points

#10. Don't Invent New, Arbitrary Controls

Learning points

#11. Search Should be a Text Field with a Button Labeled "Search"

Learning points

#12. Sliders Should Be Used Only for Non-Quantifiable Values

Learning points

#13. Use Numeric Entry Fields for Precise Integers

Learning points

#14. Don't Use a Drop-Down Menu If You Only Have a Few Options

Learning points:

#15. Allow Users to Undo Destructive Actions

Learning points

#16. Think About What's Just off the Screen

Learning points

#17. Use "Infinite Scroll" for Feed–Style Content Only

Learning points

#18. If Your Content Has a Beginning, Middle, and End, Use Pagination

Learning points

#19. If You Must Use Infinite Scroll, Store the User's Position and Return to It

Learning points

#20. Make "Blank Slates" More Than Just Empty Views

Learning points

#21. Make "Getting Started" Tips Easily Dismissable

Learning points

#22. When a User Refreshes a Feed, Move Them to the Last Unread Item

Learning points

#23. Don't Hide Items Away in a "Hamburger" Menu

Learning points

#24. Make Your Links Look Like Links

Learning points

#25. Split Menu Items Down into Subsections, so Users Don't Have to Remember Large Lists

Learning points

#26. Hide "Advanced" Settings From Most Users

Learning points

#27. Repeat Menu Items in the Footer or Lower Down in the View

Learning points

#28. Use Consistent Icons Across the Product

Learning points

#29. Don't Use Obsolete Icons

Learning points

#30. Don't Try to Depict a New Idea With an Existing Icon

Learning points

#31. Never Use Text on Icons

Learning points

#32. Always Give Icons a Text Label

Learning points

#33. Emoji are the Most Recognized Icon Set on Earth

Learning points

#34. Use Device-Native Input Features Where Possible

Learning points

#35. Obfuscate Passwords in Fields, but Provide a "Show Password" Toggle

Learning points

#36. Always Allow the User to Paste into Password Fields

Learning points

#37. Don't Attempt to Validate Email Addresses

Learning points

#38. Don't Ever Clear User-Entered Data Unless Specifically Asked To

Learning points

#39. Pick a Sensible Size for Multiline Input Fields

Learning points

#40. Don't Ever Make Your UI Move While a User is Trying to Use It

Learning points

#41. Use the Same Date Picker Controls Consistently

Learning points

#42. Pre-fill the Username in "Forgot Password" Fields

Learning points

#43. Be Case-Insensitive

Learning points

#44. If a Good Form Experience Can Be Delivered, Your Users will Love Your Product

Learning points

#45. Validate Data Entry as Soon as Possible

Learning points

#46. If the Form Fails Validation, Show the User Which Field Needs Their Attention

Learning points

#47. Be Forgiving – Users Don't Know (and Don't Care) How You Need the Data

Learning points

#48. Pick the Right Control for the Job

Learning Points

#49. Allow Users to Enter Phone Numbers However They Wish

Learning points

#50. Use Drop Downs Sensibly for Date Entry

Learning points

#51. Capture the Bare Minimum When Requesting Payment Card Details

Learning points

#52. Make it Easy for Users to Enter Postal or ZIP Codes

Learning points

#53. Don't Add Decimal Places to Currency Input

Learning points

#54. Make it Painless for the User to Add Images

Learning points

#55. Use a "Linear" Progress Bar if a Task will Take a Determinate Amount of Time

Learning points

#56. Show a "Spinner" if the Task Will Take an Indeterminate Amount of Time

Learning points

#57. Never Show an Animated, Looping Progress Bar

Learning points

#58. Show a Numeric Progress Indicator on the Progress Bar

Learning points

#59. Contrast Ratios Are Your Friends

Learning points

#60. If You Must Use "Flat Design" then Add Some Visual Affordances to Controls

Learning points

#61. Avoid Ambiguous Symbols

Learning points

#62. Make Links Make Sense Out of Context

Learning points

#63. Add "Skip to Content" Links Above the Header and Navigation

Learning points

#64. Don't Only Use Color to Convey Information

Learning points:

#65. If You Turn Off Device Zoom with a Meta Tag, You're Evil

Learning points

#66. Give Navigation Elements a Logical Tab Order

Learning points

#67. Write Clear Labels for Controls

Learning points

#68. Let Users Turn off Specific Notifications

Learning points

#69. Make Tappable Areas Finger-Sized

Learning points

#70. A User's Journey Should Have a Beginning, Middle, and End

Learning points

#71. The User Should Always Know at What Stage They Are in Any Given Journey

Learning points

#72. Use Breadcrumb Navigation

Learning points

#73. If the User is on an Optional Journey, Give Them a Control to "Skip This"

Learning points

#74. Users Don't Care About Your Company

Learning points

#75. Follow the Standard E-Commerce Pattern

Learning points

#76. Show an Indicator in the Title Bar if the User's Work is Unsaved

Learning points

#77. Don't Nag Your Users into Rating Your App

Learning points

#78. Don't Use a Vanity Splash Screen

Learning points

#79. Make Your Favicon Distinctive

Learning points

#80. Add a "Create from Existing" Flow

Learning points

#81. Make it Easy for Users to Pay You

Learning points

#82. Categorize Search Results into Sections

Learning points:

#83. Your Users Probably Don't Understand the File System

Learning points

#84. Show, Don't Tell

Learning points

#85. Be Consistent with Terminology

Learning points:

#86. Use "Sign in" and "Sign out", Not "Log in" and "Log out"

Learning points

#87. "Sign up" Makes More Sense Than "Register"

Learning points

#88. Use "Forgot Password" or "Forgotten Your Password", Not Something Obscure

Learning points

#89. Write Like a Human Being

Learning points

#90. Choose Active Verbs over Passive

Learning points

#91. Search Results Pages Should Show the Most Relevant Result at the Top of the Page

Learning points

#92. Pick Good Defaults

Learning points

#93. Don't Confound Users' Expectations

Learning points

#94. Reduce the Number of Tasks a User Has to Complete by Using Sensible Defaults

Learning points

#95. Build Upon Established Metaphors – It's Not Stealing

Learning points

#96. Decide Whether an Interaction Should Be Obvious, Easy, or Possible

Learning points

#97. "Does it Work on Mobile?" is Obsolete

Learning points

#98. Messaging is a Solved Problem

Learning points

#99. Brands Are Bullshit

Learning points

#100. Don't Join the Dark Side

Learning points

#101. Test with Real Users

Learning points

102. Bonus – Strive for Simplicity

Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

101 UX Principles

101 UX Principles

Copyright © 2018 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.

Acquisition Editors: Dominic Shakeshaft, Suresh Jain

Project Editor: Radhika Atitkar

Technical Editor: Nidhisha Shetty

Proofreader: Safis Editing

Indexer: Pratik Shirodka

Graphics: Sandip Tadge

Production Coordinator: Sandip Tadge

Photo credits: Louis Brassard

First published: August 2018

Production reference: 2211218

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78883-736-1

www.packtpub.com

mapt.io

Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionalsLearn better with Skill Plans built especially for youGet a free eBook or video every monthMapt is fully searchableCopy and paste, print, and bookmark content

PacktPub.com

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Contributors

About the author

Will Grant is a British UI/UX expert and a digital product designer. He is a web technology entrepreneur with over 20 years' experience, leading teams (and products) at the intersection of technology and usability. After his Computer Science degree, Will trained with Jakob Nielsen and Bruce Tognazzini at the Nielsen Norman Group – the world leaders in usable design. Since then, Will has overseen the user experience and interaction design of several large-scale web sites and apps, reaching over a billion users in the process. Will is a "design purist" and obsessed with building beautiful, compelling, and familiar products that customers intuitively know how to use.

With thanks to Noah and Claire

About the reviewer

Billy Hollis is a designer, developer, consultant, trainer, author, speaker, and contrarian. He leads a team of world-class XAML devs at http://nextver.com. Billy has been developing software for over thirty years and has acquired a worldwide reputation in software development and architecture. As a developer and consultant, he has developed systems for healthcare, energy, telecommunications, and human resources. As an author, Billy has written or co-written ten technology books and dozens of magazine articles. As a conference speaker, he has spoken to thousands of software developers at major industry events, including TechEd, DevConnections, and VSLive.

Daniel Thompson is a veteran software developer and seasoned expert in delivering digital products. With over 20 years' experience in the systems design, architecture, stability, and scaling of both business and consumer software, Daniel has a proven track record of delivering powerful, rock solid products for global corporations.

In his work with start-ups, Daniel has helped countless teams take their initial idea through to a minimum viable product that solves customer needs and is ready to scale. He is also the founder of D4 Software—the makers of Prodlytic, SQLizer, and QueryTree.

Kate Shaw is a freelancer and the Head of product design. She is a communicator, creator, problem solver, travel maven, freelance thinker, Wannabe revolutionary, and a mum, with fifteen years' experience of creating delightful digital experiences. Kate is articulate and professional with a passion for a user-centric design.

Balancing commercial and people's needs, Kate designs people-intuitive experiences for start-ups, FTSE 100 companies, and agencies. Her clients have included BBC, The Telegraph, The Guardian, John Lewis, Marks & Spencers, Hotels.com, Digitas, Ogilvy, and Yoti.

Packt is Searching for Authors Like You

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

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.

Somewhere along the journey of the web maturing, we forgot something important: user experience is not art. It's the opposite of art. UX design should perform a function: serving users. It has to 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 simple 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, consistency, 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—that's fine because this is, after all, an opinionated book—but the disagreement will sometimes be a prompt to examine your accepted thinking and reevaluate 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, August 2018

Chapter #1. Anyone Can Be a User Experience (UX) Professional

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 throughout this book feature a mobile app, website, web app, or some desktop software, the principles are applicable to a wide range of applications, from in-car UI, mobile games, and cockpit controls, to washing machine interfaces and everything in between.

Empathy and objectivity are the primary skills you must possess to be good 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. You need objectivity to look at your product with fresh eyes, spot the flaws and fix them. You can learn everything else.

Learning points

UX isn't a talent you're born with—you can learn how to be good in this fieldObjectivity and empathy are the two key personality traits you need to displayThis book aims to provide a shortcut to success with 101 tried-and-tested principles

Chapter #2. Don't Use More Than Two Typefaces

Only amateurs call typefaces "fonts", you know? "Proper" design professionals call them "typefaces" Fonts are the files on the device that the software uses to render the typeface. Fonts are the paint on the palette, while the typeface is the masterpiece on the canvas.

Regardless, too often designers add too many typefaces to their products. You should aim to use two typefaces maximum: one for headings and titles, and another for body copy that is intended to be read.

Use weights and italics within that font family for emphasis—rather than switching to another family. Typically, this means using your corporate brand font as the heading, while leaving the controls, dialogs and in-app copy (which need to be clearly legible) in a more proven, readable typeface.

Using too many typefaces creates too much visual "noise" and increases the effort that the user has to put into understanding the view in front of them. What's more, many custom-designed brand typefaces are often made with punchy visual impact in mind, not readability.

Learning points

Use two typefaces maximumUse one typeface for headings and titlesUse another typeface for body copy

Chapter #3. Users Already Have Fonts on Their Computers, So Use Them

Yes, your corporate brand font is lovely. It's so playful and charming but it takes an extra three seconds to load the page, as the font needs to be downloaded from the server and rendered—and nothing appears until it loads—driving your users crazy.

Including custom display fonts for headings and titles is fine; it helps to brand the product and adds some visual interest. However, using custom fonts for body copy is generally a bad idea.

First of all, these fonts have to be loaded from somewhere, whether it's Google Fonts, Typekit or your own CDN. This means that there is an overhead in getting the font files down to the user's machine. Content-heavy pages will often break while the correct fonts are downloaded and rendered—the dreaded Flash of unstyled content or Flash of unstyled text (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).

Secondly, if, by specifying wild and wonderful body copy typefaces, you think you're exerting some control over the end result, then think again: responsive design and 1,000s of different devices out in the wild mean your pages will look a little different for everyone.