Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
101 UX Principles

You're reading from   101 UX Principles A definitive design guide

Arrow left icon
Product type Paperback
Published in Aug 2018
Publisher Packt
ISBN-13 9781788837361
Length 414 pages
Edition 1st Edition
Arrow right icon
Author (1):
Arrow left icon
Will Grant Will Grant
Author Profile Icon Will Grant
Will Grant
Arrow right icon
View More author details
Toc

Table of Contents (108) Chapters Close

101 UX Principles
Contributors
Preface
Other Books You May Enjoy
1. Anyone Can Be a User Experience (UX) Professional 2. Don't Use More Than Two Typefaces FREE CHAPTER 3. Users Already Have Fonts on Their Computers, So Use Them 4. USE TYPE SIZE TO DEPICT INFORMATION HIERARCHY 5. Use a Sensible Default Size for Body Copy 6. Use an Ellipsis to Indicate That There's a Further Step 7. Make Your Buttons Look Like Buttons 8. Make Buttons a Sensible Size and Group Them Together by Function 9. Make the Whole Button Clickable, Not Just the Text 10. Don't Invent New, Arbitrary Controls 11. Search Should be a Text Field with a Button Labeled "Search" 12. Sliders Should Be Used Only for Non-Quantifiable Values 13. Use Numeric Entry Fields for Precise Integers 14. Don't Use a Drop-Down Menu If You Only Have a Few Options 15. Allow Users to Undo Destructive Actions 16. Think About What's Just off the Screen 17. Use "Infinite Scroll" for Feed–Style Content Only 18. If Your Content Has a Beginning, Middle, and End, Use Pagination 19. If You Must Use Infinite Scroll, Store the User's Position and Return to It 20. Make "Blank Slates" More Than Just Empty Views 21. Make "Getting Started" Tips Easily Dismissable 22. When a User Refreshes a Feed, Move Them to the Last Unread Item 23. Don't Hide Items Away in a "Hamburger" Menu 24. Make Your Links Look Like Links 25. Split Menu Items Down into Subsections, so Users Don't Have to Remember Large Lists 26. Hide "Advanced" Settings From Most Users 27. Repeat Menu Items in the Footer or Lower Down in the View 28. Use Consistent Icons Across the Product 29. Don't Use Obsolete Icons 30. Don't Try to Depict a New Idea With an Existing Icon 31. Never Use Text on Icons 32. Always Give Icons a Text Label 33. Emoji are the Most Recognized Icon Set on Earth 34. Use Device-Native Input Features Where Possible 35. Obfuscate Passwords in Fields, but Provide a "Show Password" Toggle 36. Always Allow the User to Paste into Password Fields 37. Don't Attempt to Validate Email Addresses 38. Don't Ever Clear User-Entered Data Unless Specifically Asked To 39. Pick a Sensible Size for Multiline Input Fields 40. Don't Ever Make Your UI Move While a User is Trying to Use It 41. Use the Same Date Picker Controls Consistently 42. Pre-fill the Username in "Forgot Password" Fields 43. Be Case-Insensitive 44. If a Good Form Experience Can Be Delivered, Your Users will Love Your Product 45. Validate Data Entry as Soon as Possible 46. If the Form Fails Validation, Show the User Which Field Needs Their Attention 47. Be Forgiving – Users Don't Know (and Don't Care) How You Need the Data 48. Pick the Right Control for the Job 49. Allow Users to Enter Phone Numbers However They Wish 50. Use Drop Downs Sensibly for Date Entry 51. Capture the Bare Minimum When Requesting Payment Card Details 52. Make it Easy for Users to Enter Postal or ZIP Codes 53. Don't Add Decimal Places to Currency Input 54. Make it Painless for the User to Add Images 55. Use a "Linear" Progress Bar if a Task will Take a Determinate Amount of Time 56. Show a "Spinner" if the Task Will Take an Indeterminate Amount of Time 57. Never Show an Animated, Looping Progress Bar 58. Show a Numeric Progress Indicator on the Progress Bar 59. Contrast Ratios Are Your Friends 60. If You Must Use "Flat Design" then Add Some Visual Affordances to Controls 61. Avoid Ambiguous Symbols 62. Make Links Make Sense Out of Context 63. Add "Skip to Content" Links Above the Header and Navigation 64. Don't Only Use Color to Convey Information 65. If You Turn Off Device Zoom with a Meta Tag, You're Evil 66. Give Navigation Elements a Logical Tab Order 67. Write Clear Labels for Controls 68. Let Users Turn off Specific Notifications 69. Make Tappable Areas Finger-Sized 70. A User's Journey Should Have a Beginning, Middle, and End 71. The User Should Always Know at What Stage They Are in Any Given Journey 72. Use Breadcrumb Navigation 73. If the User is on an Optional Journey, Give Them a Control to "Skip This" 74. Users Don't Care About Your Company 75. Follow the Standard E-Commerce Pattern 76. Show an Indicator in the Title Bar if the User's Work is Unsaved 77. Don't Nag Your Users into Rating Your App 78. Don't Use a Vanity Splash Screen 79. Make Your Favicon Distinctive 80. Add a "Create from Existing" Flow 81. Make it Easy for Users to Pay You 82. Categorize Search Results into Sections 83. Your Users Probably Don't Understand the File System 84. Show, Don't Tell 85. Be Consistent with Terminology 86. Use "Sign in" and "Sign out", Not "Log in" and "Log out" 87. "Sign up" Makes More Sense Than "Register" 88. Use "Forgot Password" or "Forgotten Your Password", Not Something Obscure 89. Write Like a Human Being 90. Choose Active Verbs over Passive 91. Search Results Pages Should Show the Most Relevant Result at the Top of the Page 92. Pick Good Defaults 93. Don't Confound Users' Expectations 94. Reduce the Number of Tasks a User Has to Complete by Using Sensible Defaults 95. Build Upon Established Metaphors – It's Not Stealing 96. Decide Whether an Interaction Should Be Obvious, Easy, or Possible 97. "Does it Work on Mobile?" is Obsolete 98. Messaging is a Solved Problem 99. Brands Are Bullshit 100. Don't Join the Dark Side 101. Test with Real Users 102. Bonus – Strive for Simplicity
Index

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

If possible, your app should be "autosaving" the user's work, but there are, of course, cases where this needs to be a user-initiated action (for example, in a creative application where saving could be destructive).

A great way of showing the user that their work is unsaved is by displaying a visual indicator in the title bar of the app. This could be a bullet or could even explicitly say "not saved", if space allows.

At a glance, the user can tell if they need to quickly hit cmd + S (or Ctrl + S) to save where they're at or if they're just experimenting, they will know that they haven't saved.

A big part of this is about respecting the time and effort that the user has put into using your product: entering data, preparing a profile, or bio, and so on. They deserve to be shown the state that their work is in and not have to guess or remember whether it's saved or not.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime