THE PSYCHOLOGY OF

USER EXPERIENCE
Nick Kolenda

Grab free marketing articles at

www.nickkolenda.com

COPYRIGHT 2016 KOLENDA ENTERTAINMENT LLC

Intro ............................................................................................. 4
Layout & Design .......................................................................5
Navigation & Menus ................................................................11
Images & Graphics ..................................................................15
Text & Headlines ...................................................................... 18
Forms & Input Elements .......................................................23
Links & Buttons ........................................................................31
Tables & Data ............................................................................35
Errors, Alerts, & Loading ......................................................38
Research & Planning ..............................................................44
Miscellaneous ...........................................................................46
 INTRO
This PDF summarizes the 125+ usability tactics in this article:
www.nickkolenda.com/user-experience

However, you should read the original article Pirst. For two
reasons:

REASON 1: THE ORIGINAL HAS THE FRAMEWORK

The original article organizes tactics by strategy. And that
framework will give you a better grasp of UX/UI principles. Plus, it
includes a few explanations and clarifying notes throughout.

REASON 2: THIS PDF IS LESS USABLE

It irks me to admit itbut this PDF could be more usable. I lack the
technical skills to structure an image-intensive PDF. So use this PDF
as a reminder of the importance of UX/UI skills (and read the web
version for a cleaner structure).

HOWEVER, this PDF will be easier to reference than the original

article. This PDF organizes the tactics by design elements (e.g.,
forms, buttons, etc.). So whenever you design those elements in
your interface, simply reference the section(s) in this PDF.

4 of 53
 LAYOUT & DESIGN
TACTIC:
Avoid Trapping Negative Space in the Composition

TACTIC:
Use a One Column Layout

5 of 53
TACTIC:
Overlap a Design Element to Emphasize Continuity

TACTIC:
Visibly Animate Transitions in the Interface

TACTIC:
Remove Unnecessary Borders From Design Elements

6 of 53
TACTIC:
Hide Infrequent But Necessary Settings, Features, and Information

TACTIC:
Extend Elements Through the Fold

TACTIC:
Add a Shadow to Indicate Depth

7 of 53
TACTIC:
Indicate More Content With Words or Graphics

TACTIC:
Include Important Data on Product Listing Pages

TACTIC:
Provide Useful Information on Hover

8 of 53
TACTIC:
Expose Frequently Used Functions

TACTIC:
Display Primary Data or Statuses in a Dashboard

TACTIC:
Create a Front-End Style Guide

9 of 53
TACTIC:
Construct Designs Using Mathematical Principles

TACTIC:
Add Tooltips to Coach Novice Users Without Disrupting Expert
Users

TACTIC:
Use One-Window Drilldowns on Small Devices

10 of 53
 NAVIGATION & MENUS
TACTIC:
Use Smart Menu Items to Clarify Actions

TACTIC:
Highlight the Section Within the Navigation Menu

11 of 53
TACTIC:
Provide Breadcrumbs or Sequence Maps in Complex Interfaces

TACTIC:
Create Tight Categories Within Navigation Menus

TACTIC:
Use Conventional Navigation Menus

12 of 53
TACTIC:
Put Utilities in the Top Right Corner

TACTIC:
Keep Navigation Menus in the Same Position

TACTIC:
Add a Slight Delay to Hover Pop Ups and Drop Down Menus

13 of 53
TACTIC:
Hyperlink the Entire Menu Option Container

14 of 53
 IMAGES & GRAPHICS
TACTIC:
Maximize Data-Ink Ratios in All Imagery

TACTIC:
Hyperlink Complementary Icons and Images

15 of 53
TACTIC:
Use Icons and Symbols to Convey the Meaning of an Interaction

TACTIC:
Choose Colors That Are Semantically Congruent

16 of 53
TACTIC:
Add Row Stripes to Your Tables

17 of 53
 TEXT & HEADLINES
TACTIC:
Add Visual Contrast to Page Headlines

TACTIC:
Position Headlines Closer to Respective Sections

18 of 53
TACTIC:
Constrain Headlines to Respective Sections

TACTIC:
Remove Redundant or Self-Explanatory Instructions

TACTIC:
Speak the Language of the User, Not the System

19 of 53
TACTIC:
Offer a Translate Button When Foreign Languages Appear

TACTIC:
Keep Paragraphs Short and Highlight Key Terms

TACTIC:
Position Important Information at Beginning of List Items

20 of 53
TACTIC:
Write Standalone Subheadlines

TACTIC:
Break Up Text With Visual Variety

TACTIC:
Create Strong Contrast Between the Text and Background

21 of 53
TACTIC:
Left Align the Majority of Body Text

TACTIC:
Choose Contrasting Fonts

TACTIC:
Resolve Unfavorable Outcomes in Automatically Generated
Messages

22 of 53
FORMS & INPUT ELEMENTS
TACTIC:
Filter or Jump to Items That Users Are Searching

TACTIC:
Create Smart Defaults Based on Frequently Chosen Input

TACTIC:

Position Common Answers At the Top of Drop Down Lists

23 of 53
TACTIC:
Let Users Log In Via Username or Email

TACTIC:
Give Real-Time Password Requirements and Feedback

TACTIC:
Prepopulate Form Elements With Universal Parameters

24 of 53
TACTIC:
Indicate Required and Optional Form Elements

TACTIC:
Show a Preview of the Output Based on the Current Input

25 of 53
TACTIC:
Provide a Curated List of Common Search Terms

TACTIC:
Keep Form Labels Visible At All Times

TACTIC:
Position Placeholder Text Outside the Form Element

26 of 53
TACTIC:
Align Form Labels Directly Adjacent to Elements

TACTIC:
Use Form Elements That Accept Various Formats of Input

TACTIC:
Display Results That Solve the Searcher's Need

27 of 53
TACTIC:
Use Search Fields That Handle Typos, Synonyms, and Variants

TACTIC:
Only Offer Inputs That Are Acceptable

28 of 53
TACTIC:
Use Responsive Enabling or Disclosure in Form Elements

TACTIC:
Structure Text Fields to Match the Required Input

TACTIC:
Save Data That Users Enter

29 of 53
TACTIC:
Display the User's Recent Searches

30 of 53
 LINKS & BUTTONS
TACTIC:
Use Descriptive Button Labels

TACTIC:
Maintain Congruency Between Links and Target Pages

TACTIC:

Indicate Which Items the Cursor is Hovering Over

31 of 53
TACTIC:
Design Buttons Using 3D Characteristics

TACTIC:
Let Users Open Pages in New Tabs

TACTIC:
Remove, Disable, or Replace Buttons When Users Click Them

32 of 53
TACTIC:
Add a Transparent Border to Small Buttons

TACTIC:
Hyperlink Primary Menus, List Items, and Complementary Icons

33 of 53
TACTIC:
Use Different Colors for Visited Links

34 of 53
 TABLES & DATA
TACTIC:
Let Users Directly Edit Data

TACTIC:
Merge Congruent Data to Help Users Compare Items

35 of 53
TACTIC:
Let Users Control the Appearance of Data

TACTIC:
Let Users Control the Order of Data

36 of 53
TACTIC:
Let Users Control the Quantity of Data

37 of 53
 ERRORS, ALERTS, &
LOADING
TACTIC:
Differentiate Elements That Triggered an Error

TACTIC:
Display Current Progress and Time Remaining on Machine-Driven
Tasks

38 of 53
TACTIC:
Describe the Input That You Require From Users

TACTIC:
Start Progress Bars Above 0%

TACTIC:
Display Success Messages After Important Interactions

TACTIC:
Use Cool Colors in Loading Animations to Decrease Arousal

39 of 53
TACTIC:
Keep Users Engaged During Lengthy Waiting Periods

TACTIC:
Prevent Users From Uploading Files That Are Incompatible

TACTIC:
Display a Running Tally of Tasks Occurring

40 of 53
TACTIC:
Search for Wording That Contradicts User Intent

TACTIC:
Remind Users if They've Already Purchased an Item

TACTIC:
Separate Powerful Functions by Space or Color

TACTIC:
Add Constraints to Signieicant Irreversible Changes

41 of 53
TACTIC:
Use Undos Rather Than Coneirmations

TACTIC:
Offer an Escape Hatch on All Pages and Functions

TACTIC:
Explain the Reason for Validation Errors

42 of 53
TACTIC:
Point Users Toward Documentation or Support for Complex Errors

TACTIC:
Avoid Saying "You" in Error Messages

43 of 53
 RESEARCH & PLANNING
TACTIC:
Construct Personas to Identify Specieic Workelows

TACTIC:
Gather User Feedback in Appropriate Places

44 of 53
TACTIC:
Create Alerts for Increases in 404 Errors

TACTIC:
Identify Pages Where Users Are Pogo-Sticking

TACTIC:
Use Card Sorting to Construct the Information Architecture

45 of 53
 MISCELLANEOUS
TACTIC:
Communicate the Current Phase of Complex or Lengthy
Interactions

TACTIC:
Reveal the Number of Steps Within a Sequence

46 of 53
TACTIC:
Reveal the Number of Items in a Category

TACTIC:
Offer Keyboard Shortcuts for Repetitive Functions

TACTIC:
Let Users Drag and Drop Elements

47 of 53
TACTIC:
Indicate or Preview the Next Item in a Sequence

TACTIC:
Provide Quick Wins During Onboarding

TACTIC:
Indicate Whether Your Ofeice is Open or Closed

48 of 53
TACTIC:
Indicate the Recency of Events

TACTIC:
Indicate the Number of Items Remaining

TACTIC:
Put Descriptive Terms at the Beginning of the Browser's Page Title

TACTIC:
Indicate the Options That Most Users Choose

49 of 53
TACTIC:
Add Copy Buttons to Movable Input

TACTIC:
Add Dotted Textures to Drag and Drop Elements

TACTIC:
Use Semantic Labels in HTML5

50 of 53
TACTIC:
Use the Proper Amount of Onboarding

TACTIC:
Use Multiple Cues to Communicate Information

51 of 53
TACTIC:
Customize Instructions for the User's Browser

TACTIC:
Provide a Visible Close on Popups and Modal Boxes

TACTIC:
Let Users Return to the Same Position in a Sequence

52 of 53
TACTIC:
Indicate Which Items Users Have Already Viewed

53 of 53