101 UX Principles – 2nd edition - Second Edition

By : Will Grant

4 (2)

Buy this Book

101 UX Principles – 2nd edition - Second Edition

4 (2)

By: Will Grant

Buy this Book

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

Preface

Free Chapter

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

Customer Reviews

4 (2)

5 star

50%

4 star

3 star

50%

2 star

1 star

Make Your Favicon Distinctive

A favicon, app icon, or apple-touch-icon—whatever you like to call it—is an icon you may well have forgotten to add to your web app. It serves a useful purpose beyond branding, appearing in the browser’s tab UI and in bookmark views across your devices.

Users with lots of tabs open, lots of apps in their start menu, or lots of apps in a folder on their phone, will appreciate being able to find yours quickly.

Figure 83.1: Some favicons

A bright, bold icon or letter is usually sufficient, but test it at 16 pixels in size to see that it’s legible. Use transparency because, unless your icon actually is a white square, nobody wants a white square in their tab bar!

You can cover most browsers out there with just four types of favicon, containing just six favicon files:

A favicon.ico for legacy browsers at 32px square
A single SVG icon with a light and dark version for modern browsers
A...

101 UX Principles – 2nd edition - Second Edition

By : Will Grant

101 UX Principles – 2nd edition - Second Edition

By: Will Grant

Overview of this book

Related Content you might be interested in

Current Title:

101 UX Principles – 2nd edition - Second Edition

UX for the Web

User Experience Mapping

Fixing Bad UX Designs

Make Your Favicon Distinctive