101 UX Principles

▶TABLE of CONTENTS
1: ANYONE CAN BE A USER EXPERIENCE (UX) PROFESSIONAL
2: DON'T USE MORE THAN TWO TYPEFACES
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