OK

Dear Friends,

Coming up with a new solution for every

problem takes time, and often it’s really not
necessary. We can rely on smart design
patterns and ask the right questions ahead
of time to avoid issues down the line. This deck
of 100 cards is supposed to help with just that.

Just before starting a project, I would sit down

with designers and developers and talk through
the questions listed in this deck. It helps save
time and drive to better decisions when
tackling pretty much any interface challenge
— from intricate data tables and web forms to
troublesome hamburgers and carousels.

Each checklist has been curated and refined

over 8 years by yours truly — all based upon
usability sessions, design iterations and A/B
tests. So my sincere hope is that this deck will
be helpful for your work to bring up
important conversations before issues arise,
not forget anything crucial that would cause
trouble in usability tests, and be prepared for
whatever comes next.

Vitaly Friedman
DESIGNING FOR TOUCH
CHECKLIST
DESIGNING FOR
TOUCH
01 — Input is never precise: are hit targets
at least 50×50px?
02 — Are all our icons large enough to
avoid rage-taps/-clicks?
03 — Can we turn icons into larger
clickable areas with labels?
04 — Do our links, form elements, and
search have enough padding?
05 — Do we expose critical navigation as
bottom nav on mobile?
06 — Do we center a critical icon/call to
action in the bottom bar?

07 — Do we want to have any floating buttons

on mobile?

08 — Do we repeat critical calls to action

within our content?

09 — Do we show tooltips/hints above the

tappable area?

01 / 03
DESIGNING FOR
TOUCH
10 — Can users double-tap on the same
spot to undo/restore actions?
11 — Do we provide visual feedback on tap
(ripple/active state)?
12 — Do we prompt a larger selector view
on imprecise taps?
13 — Did we test input areas with keyboard
covering the screen?
14 — Do we space out icons with opposing
functions to avoid mis-taps?
15 — Do we always pause auto-play
(carousels, video) on tap?
16 — Do dropdowns open on tap/click,
rather than only hover?
17 — For prev/next nav, is it displayed on
bottom left/right on mobile?
18 — For prev/next nav, is it displayed on
center left/right on tablets?

02 / 03
DESIGNING FOR
TOUCH
19 — Do we measure the time needed to
complete a task (no errors)?
20 — Do we have at most five tabs at the
bottom on mobile?
21 — How do we maximize the speed of
getting users from A to B?
22 — Can we replace dropdowns with
toggles and buttons?
23 — Can we avoid parallax and scroll
hijacking for accessibility?
24 — Do we provide buttons for copying/shar-
ing chunks of text?
25 — Have we tested for frequency of
rage-clicks/-taps?
26 — Have we optimized the UI for both
mobile and desktop?

03 / 03
 ACCORDION
CHECKLIST
ACCORDIONS

01 — How do we design a category’s title?

02 — What icon do we choose to

indicate expansion?

03 — How do we indicate collapse/

expanded states?

04 — Do we place the icon on the left,

inline, or on the right?

05 — By default, should all sections be

collapsed or open?
06 — What happens if a user clicks on the
category link?

07 — What happens if a user clicks on an

empty bar?

08 — Should an expanded section collapse

automatically?

09 — What if there isn’t enough space to

display all items?

01 / 02
ACCORDIONS

10 — Should the accordion contain a link to

a category’s main page?
11 — Should the user be scrolled automati-
cally when expanded?
12 — Do we remove parallax and autoplay
for slow phones?
13 — Do we keep the state of an accordion
on reload?

02 / 02
 NAVIGATION
CHECKLIST
NAVIGATION

01 — What critical navigation do we always

need to expose (filters, cart, topics)?
02 — Are critical CTAs optimized for
mobile (float at the bottom)?
03 — Are critical CTAs optimized for
desktop (upper-right corner)?
04 — Do we always display a search box to
increase searches?
05 — Do we always display some navigation
to raise engagement?
06 — Do we use a “more/less” pattern to
show/hide more navigation?
07 — Do we display breadcrumbs to jump
to the parent category?
08 — Does tapping on a category’s title
prompt accordion or navigation?
09 — Do dropdowns appear/disappear on
hover, tap/click, or both?

01 / 04
NAVIGATION

10 — If dropdowns disappear automatical-

ly, when exactly does that happen?
11 — If we use a hover delay in dropdowns,
how long is it?
12 — If a search icon is used, how does the
search box appear when prompted?
13 — Do we list a category’s main page in a
dropdown?
14 — Do we place the “menu” button at the
top or at the bottom?
15 — Can we push the “menu” down to
make it reachable for thumbs?
16 — Do nav items appear in a full
page/partial overlay or slide-in?
17 — Do we use a layered, “curtain”
navigation for multiple levels?
18 — Do we absolutely need a deep-nested
navigation (>3 levels)?

02 / 04
NAVIGATION

19 — Have we considered using search

with autocomplete instead?
20 — Do we use tabbed navigation at the
top or at the bottom (<5 items)?
21 — Do we use a floating navigation icon
at the bottom right?
22 — Do we highlight popular or
important navigation items?
23 — Do mega-dropdowns appear/disap-
pear on hover, tap, or both?
24 — Do we group mega-dropdown
sections as cards/links on mobile?
25 — Do we use icons to display differenc-
es between sections?
26 — Can we split the nav vertically for
submenus on mobile?
27 — Can users tap on the same spot to
open/close navigation?

03 / 04
NAVIGATION

28 — Are all navigation options reachable

via keyboard on desktop/mobile?

29 — Are all navigation options accessible

via a screen reader?

30 — Have we minimized the distance/-

time to travel from one step to next?

04 / 04
MEGA-DROPDOWNS
CHECKLIST
MEGA-DROPDOWNS

01 — What content do we want to show in

the mega-dropdown?
02 — How many levels of navigation should be
accessible directly from the mega-dropdown?
03 — Do we want a simple overlay or multilevel
navigation with nested submenus?
04 — How does the user open a mega-dropdown
with mouse/keyboard (on hover/tap/click)?
05 — How does the user open a mega-drop-
down with touch (on tap/click)?
06 — Are important navigation options
accessible without the mega-dropdown?
07 — Do we need to repeat some options within
and outside of a mega-dropdown?
08 — Can we display only 6–7 items at a time
and include a “Browse all” button to
access the rest?
09 — Do we need a “Browse all” button that
would surface all navigation at once?

01 / 04
MEGA-DROPDOWNS

10 — How do we group, organize, and design

navigation options in a mega-dropdown?
11 — Do we use icons to display differences
between sections?
12 — Do we feature thumbnails, videos, or
frequently asked options?
13 — Do we style links to the category’s main
page and its subnavigation differently?
14 — For each category, do we include a link to
the category’s main page in subnavigation?
15 — Can we underline category titles to identify
them as links to the category’s page?
16 — Can we add a “Home” link or a “Browse
all” button within each subcategory?
17 — Do we avoid split bar navigation (category
link and icon opening the menu)?
18 — Do we need to use accordions to expand
some sections or subsections?

02 / 04
MEGA-DROPDOWNS

19 — Are all sections in the mega-dropdown

accessible via keyboard? (focus:not-visible)
20 — For hover menus, do we avoid hover
flickering (e.g. SVG path exit areas)?
21 — For hover menus, do we avoid long
fade-in/fade-out transitions and entry/exit
delays?
22 — For hover menus, do we avoid placing
important, frequently used items close to
the mega-dropdown navigation (e.g.
search bar, CTA, shopping cart icon)?
23 — Do we highlight a selected section (e.g.
underlined/background change)?
24 — For click/tap menus, do we have an icon to
indicate that a category title triggers a
mega-dropdown on click (arrow, chevron,
min. 50×50px)?
25 — For click/tap menus, do we keep it open
until the user manually closes it?

03 / 04
MEGA-DROPDOWNS

26 — On mobile, do we turn the mega-drop-

down into a group of vertical accordions?
27 — On mobile, do we avoid multiple overlays
and turn the mega-dropdown into a
group of vertical accordions?
28 — Can we avoid horizontal overlays and use
vertical accordions and split-menus
instead?
29 — Could we replace mega-dropdowns
with structured guides and “navigation
queries”?
30 — How do we extend navigation if
necessary (e.g. if more items need to be
added)?

04 / 04
 HAMBURGER
CHECKLIST
HAMBURGER

01 — Can we avoid a hamburger icon and

show navigation as is?

02 — If not, what icon do we choose to

indicate navigation?

03 — Are the icon and padding large

enough for comfortable tapping?

04 — Will we place the icon on top left/right,

bottom left/right, or floating?

05 — Can we push the icon down a bit by

placing the logo above it?
06 — What exactly happens when the user
clicks/taps on the icon?

07 — How will the icon change on tap or click?

08 — Will navigation appear as full page/par-
tial overlay, accordion, or slide-in?

09 — If we use slide-in, does navigation

appear above or below the header?

01 / 03
HAMBURGER

10 — Will we have some sort of animation

or transition on click?
11 — Can we use just CSS for the
animation to stay performant?
12 — What if the user opens search/filters
and drawer at the same time?
13 — Do we expose some critical naviga-
tion by default on desktop/mobile?
14 — Can users close the navigation drawer
by tapping on the same spot?
15 — If search is placed within the
hamburger nav, can we pull it out?
16 — Do we need to add a label (“Menu”) or
replace the icon with the label?
17 — Can we use the “less/more” pattern to
display at least some nav items?
18 — Can we use tabs or a scrolling pane to
expose some sections of the site?

02 / 03
HAMBURGER

19 — When do we start hiding the hamburger

and start showing nav items instead?
20 — What if we have space to show some
navigation items but not all of them?
21 — Do we want to show/hide navigation
on scroll down/up?
22 — What metrics do we use to measure
how well our navigation performs?
23 — Have we tested how the hamburger
performs against other options?

03 / 03
 FILTERING
CHECKLIST
FILTERING

01 — Can we avoid a filter icon and show

filters as they are?

02 — If not, what icon do we choose to

indicate filtering?

03 — Is the icon plus padding large enough

for comfortable tapping?

04 — Do we put the icon at the top, bottom,

or floating (mobile/desktop)?

05 — What exactly happens when the user

clicks/taps on the icon?
06 — How will the icon change on tap/click?
07 — Will filters appear as full page/partial
overlay or slide-in?

08 — Can we avoid sidebar filtering as it’s

usually slow?

09 — Do we expose popular or relevant

filters by default?

01 / 03
FILTERING

10 — Do we display the number of

expected results for each filter?
11 — Can we use a horizontal swiper to
move between filters?
12 — Can we avoid dropdowns and use
only buttons/chips plus toggles?
13 — For complex filters, do we provide
search within filters?
14 — Do we use icons to explain differenc-
es between various filters?
15 — Do we use the right elements for
filters, e.g. sliders, buttons, toggles?
16 — Do filters apply automatically (yes, for
slide-ins)?
17 — Do filters apply manually on confirma-
tion (“Apply”) (yes, for overlays)?
18 — How do we communicate already
selected filters?

02 / 03
FILTERING

19 — Can selected filters appear as

removable pills, chips, or tags?
20 — Do we recommend relevant filters
based on selection?

21 — Do we track incompatibility between

selected filters?
22 — How do error messages or
warnings appear in the UI?

23 — Do we allow customers to reset all

filters quickly, at once?
24 — Are filters (or filter buttons) floating
on scroll on mobile/desktop?

25 — Can users tap on the same spot to

open/close filters?

03 / 03
 CAROUSELS
CHECKLIST
CAROUSELS

01 — Can we just show a grid of images

instead of a carousel?
02 — If not, what’s our main goal for using it
(traffic, clicks, purchases)?
03 — How much space do we allocate for
the carousel (mobile/desktop)?
04 — How do we indicate that the component
is a carousel?
05 — How many slides do we want to feature
in the carousel?
06 — How do we choose the sequence of
slides (first are more important)?

07 — Are we designing a horizontal, vertical, or

circular/diagonal carousel?

08 — Where do we place prev/next arrows

(below the carousel, or on it)?

09 — Do we auto-detect contrast for prev/next

arrows?

01 / 04
CAROUSELS

10 — How do we indicate the carousel slide

the user is currently on?
11 — Do we display a part of the next/prev
slide (30–70%) on mobile/desktop?
12 — Do we want to display a slide’s labels
next to prev/next buttons?
13 — Do we want the carousel to auto-ad-
vance, and if so, how quickly (5–7s)?
14 — Is there a way to pause a carousel if
it’s auto-advancing?
15 — Do we pause auto-advancing on
hover and stop on interaction?
16 — Do we really need auto-rotation on
mobile (often ignored)?
17 — How do we indicate how many slides
the carousel contains?
18 — Can we replace grey dots with thumb-
nails, tabs, or just remove them?

02 / 04
CAROUSELS

19 — Can we test and measure the CTR for

these alternate options?
20 — Do we use an animation to indicate
that a carousel contains slides?
21 — What should happen when a user
hovers over a slide?
22 — What should happen when a user
hovers over dots/thumbnails/tabs?
23 — Do we provide sufficient :active and
:focus states?
24 — How many carousel slides do we
preload ahead of time (for perf)?
25 — If the carousel contains videos, how
do we make them distinct?
26 — Do we show information scent for
next slides (# of views/rating)?
27 — On mobile, do we support tap and
swipe gestures?

03 / 04
CAROUSELS

28 — How many items do we display on

mobile vs. desktop?
29 — Does layout break if there are too
many items (wrapping)?
30 — How do we arrange thumbnails/tabs/dots-
/buttons on mobile?
31 — Do we persist the position of the
carousel on refresh?
32 — Do we need other flavors of the carousel
somewhere (content slider)?
33 — Have we measured the CTR for each
slide?
34 — Have we measured interaction decay
rates?

04 / 04
 MODALS
CHECKLIST

X
 X

MODALS

01 — Where do we need to use any dialog

prompts?

02 — Can we prevent critical errors with

inline validation rather than a modal?

03 — When do we need to warn the user or

prevent critical errors (modal)?

04 — When do we absolutely need user input

to continue (modal)?

05 — When do we want to support or inform

the user (overlays, pop-overs)?

06 — When are we legally obliged to ask for

consent (cookie prompts, age verification)
(overlays, pop-over)?

07 — When do we want to advertise to the user

(ads, surveys, etc.) (no modal, inline box)?

08 — When do we absolutely need to interrupt

the user (modal)?

01 / 07
 X

MODALS

09 — If we do interrupt, are we absolutely

certain that users will value that disruption?
10 — When is the right time and place for the
modal to appear and get a positive response?
11 — Do we show prompts on success moments
(completed task, new paycheck, etc.)?

12 — Do we avoid showing errors as a modal

window?
13 — Do we avoid asking for feedback or rating
as a modal window?
14 — Do we want to use a modal to display a
loading message/indicator?
15 — Do we want to use a modal for larger
images or image galleries?
16 — Do we want to use a modal for video
content?
17 — Do we want to use a modal for cookie
pop-ups?

02 / 07
 X

MODALS

18 — Do we want to use a modal for critical

notifications?
19 — Do we want to use a modal to confirm an
intent (to deactivate, delete, restore, etc.)?
20 — Do we want to use a modal to bring user
attention to important details?
21 — Do we want to use a modal to verify the
correctness of user input?
22 — Can we avoid opening modals
automatically?
23 — Do we never interrupt users with
non-critical requests or details?
24 — Do we never interrupt users when they
perform critical, focused tasks?
25 — Do we never show a modal before the page
finishes loading?
26 — Do we never show a modal when a user
has just logged in?

03 / 07
 X

MODALS

27 — Do we avoid modals that try to keep users

from leaving the page?
28 — When do we want to dim the
background (modal, lightbox)?
29 — When can the main content coexist with
the dialog (overlay)?
30 — On opening, is a modal always in sight and
does it fit the screen (desktop/mobile)?
31 — How much space do the modals take up
on mobile/desktop (<75% / <30%)?

32 — On mobile do we show lengthier modals as

full-page overlays or large pop-overs?
33 — Do we avoid scrollbars or scrollable
areas within the modal (if not, is a
separate page a better option)?
34 — On opening, is it visually clear that a
modal is separate from the rest of the UI?
35 — On opening, does a modal receive keyboard
focus?

04 / 07
 X

MODALS

36 — Is tabbing through links and controls in

the modal window possible?
37 — Do we have a focus-trapping mechanism
built in?
38 — Does the title of the modal match the call
to action on the button that triggers it?
39 — Can we use an icon and color to indicate
the nature and purpose of the modal?
40 — How do we arrange the buttons: [primary]
[secondary], or the other way around?
41 — Do we have actionable labels on buttons?
42 — Is it always possible to dismiss a modal, or
are some modals blocking?
43 — Do we have a high-contrast “Close”
button in the top-right corner?
44 — Do we want to add an additional
“Dismiss” link at the bottom of the modal?
45 — Can users escape every modal with the
Esc key?

05 / 07
 X

MODALS

46 — Can users escape every modal with “Close”

or “Dismiss” links?

47 — Can users escape every modal by clicking

outside of the modal?
48 — Do we confirm the user’s intent to leave the
modal if they’ve already entered data in it?
49 — Do we provide an option to undo the action
or restore the previous state quickly?
50 — Do we avoid nested modals?
51 — Do we avoid multiple modals appearing
consecutively?
52 — Do we avoid lengthy multistep modals
(more than 5 steps)?

53 — If we do use a multistep modal, do we

provide navigation between the steps?

54 — Do we group critical notifications in one

prompt, rather than showing multiple ones
consecutively?

06 / 07
 X

MODALS

55 — What exactly happens if the user doesn’t

act on the modal but chooses to close it?

56 — What happens if a modal is fully blocked

by the browser or a browser extension?

57 — Do we measure how many people act on

the modal, and how many dismiss it
immediately?

58 — What would the experience be with

alternatives: separate page, injected
content, or accordions?

07 / 07
 TABLES
CHECKLIST
TABLES

01 — Do we really need to display this table

as a table on mobile?
02 — Are some rows/columns more
important than others?
03 — What data points are most critical to
our customers?
04 — Can we hide some columns while
showing the important ones?
05 — Do we add steppers to navigate through
columns or rows predictably?
06 — Do we add controls to select what
columns/rows users want to see?
07 — Do we allow users to display all
columns/rows if they want to?
08 — Do we need horizontal scrolling with
fixed columns?
09 — Do we need horizontal/vertical
pagination (for big datasets)?

01 / 03
TABLES

10 — Do we have any hover actions, inline

editing, sorting, search, filtering?
11 — Do we highlight the cell, row, or
column on a user’s tap/click?
12 — Do we enlarge the selected row on
tap/click for easy scanning?
13 — Do we need to display more details on
tap/click?
14 — Do we display details in a modal, or
sidebar overlay?
15 — Did we consider transforming each
row into a card/accordion?
16 — Can we transform each row into a
card (rows) with a dropdown (col)?
17 — With rows as cards, do we expose
relevant data for comparison?
18 — Did we consider transforming the
table into a data grid?

02 / 03
TABLES

19 — Can we tilt or flip (short) headings to

win some horizontal space?
20 — Did we consider various content
types (text, numeric, mixed, toggle)?
21 — What will editable and read-only cells
look like?
22 — Did we design interactive states
(normal, hover, active, focus)?
23 — Did we consider empty cells,
placeholders, valid/invalid input?
24 — How do we display warnings and
error messages?
25 — Do we allow for selecting multiple cells?
26 — Do we allow for resizing of columns
or rows?
27 — How do we truncate data strings if
they can’t be displayed in full?
28 — Have we considered the minimum
width of columns/rows?

03 / 03
 SLIDERS
CHECKLIST
SLIDERS

01 — How much space can we afford for

the slider?
02 — Do we use a single or double slider?
03 — Should the slider be continuous or
discrete?
04 — How do we design the thumb, track,
labels?
05 — How do we choose the slider scale
(linear/non-linear)?
06 — How many tick-points do we need?
07 — How do we label lower and upper
boundaries?
08 — What icon do we use for the thumb,
if any?
09 — How and where do we display the
current value?
10 — Should we provide a more precise
text input as well?

01 / 02
SLIDERS

11 — How do we indicate availability to

avoid dead ends?
12 — How do we indicate availability to
avoid dead ends (e.g. distribution
graph over the slider)?
13 — Are there any values on a slider that
shouldn’t be accepted?
14 — Should the user be able to restore the
previous state?

15 — How do we announce changes to

screen readers?
16 — Do we have interdependent sliders?
17 — How should the track change with
thumb movements?
18 — Should users be able to lock some
values?
19 — Should we have some sort of
hover/tap preview?

02 / 02
 DATE PICKERS
CHECKLIST
DATE PICKERS

01 — Date picker, a date-range picker or a

time picker?

02 — Should it be activated when a

user clicks on input/icon?

03 — Should we combine day/month/year

into one input field?

04 — Should the date picker contain default

preselected values?

05 — How do we design the navigation

between months and years?
06 — How will the icon change on tap/click?
07 — What happens if a user clicks on the
empty bar?

08 — How do we communicate unavailable

options?

09 — Should we allow for smart date input?

01 / 03
DATE PICKERS

10 — Do we use color coding for different

rates, frequency or busyness?
11 — Is a date picker the right pattern to
use for date selection?
12 — How do we highlight a selected date
range?
13 — Do we display a daily/weekly/month-
ly view by default?
14 — Should users be able to type a date in
the input field?
15 — Should users only select predefined
values?
16 — Should the date-picker overlay
appear? And if yes, when?
17 — Should the date picker contain default
prepopulated values?
18 — Should we display availability, price, etc?

02 / 03
DATE PICKERS

19 — Should the week run from Mon–Sun

or Sun–Sat?
20 — How do we avoid displaying
unavailable dates or zero-results?

03 / 03
 CONFIGURATORS
CHECKLIST
CONFIGURATORS

01 — Are we designing for inspiration,

customization, or both?
02 — What’s the entry point to the
configurator?
03 — How many premade presets, and how
to define them?
04 — Do we provide recommendations/la-
bels with presets?
05 — Do we ask for custom preferences or
use filters to guide users?
06 — Is the product always visible on
mobile/desktop?
07 — Do we always display the current
price?
08 — Do we use a 3D view, and is it
accessible?
09 — Are we using drag-and-drop
functionality?

01 / 04
CONFIGURATORS

10 — How do we design navigation, with

pins or prev/next pattern?

11 — Do we need to integrate search or

filtering?

12 — Is it possible to jump from the

current step to a previous one?

13 — How do we highlight the current step?

14 — How do we highlight already

completed steps?
15 — Is it clear how to undo a change/fea-
ture?

16 — How do we design adding/removing

choice (color, icon, overlay)?

17 — Is the next step never empty, and

does it contain a smart default value?

18 — Should the user automatically move

to the next step when finished?

02 / 04
CONFIGURATORS

19 — For every step, do we display the

impact of a selected feature on price?
20 — For every step, do we explain and
highlight dependencies?
21 — For every step, is the summary of all
changes always accessible?
22 — For every step, do we need to group
some options to limit scope?
23 — Do we provide context-sensitive
inspiration to ease a choice?
24 — Do we have recommendations to
nudge a user towards a choice?
25 — Do we integrate a feature comparison
table at some steps?
26 — Do we display dependencies, and are
some options mutually exclusive?
27 — Is visual feedback for the product
preview instant on 3G?

03 / 04
CONFIGURATORS

28 — Do we have a fullscreen view for the

product rendering?
29 — Do we store choices automatically?
What happens on page refresh?
30 — Is it possible to save/label a current
snapshot of the configuration?
31 — For every step, do we explain and
highlight dependencies?
32 — Are we lazy-loading assets (and
options!) for performance?
33 — Do we provide extras, e.g. financing,
lease, reservation, sharing?
34 — Do we integrate a chatbot or
conversational UI?

04/ 04
FEATURE COMPARISON
CHECKLIST
FEATURE COMPARISON

01 — How do you indicate that comparison

is possible?
02 — What happens when the first
item is added for comparison?
03 — Have we disabled the option to
compare only one selected item?
04 — How do we highlight a product
selected for comparison?
05 — Do we display a comparison bar or a
modal after adding to compare?
06 — How do users unselect a selected
option?
07 — Should we suggest products to
compare at some point?
08 — How many items can a customer
add for comparison?
09 — Do we use animation or transitions
to display comparison?

01 / 03
FEATURE COMPARISON

10 — Do we display the price, ratings, a

thumbnail and the reference number?
11 — Can users switch to see only
differences/similarities/all?
12 — Do we group and collapse attributes
by default?
13 — Do we track attributes’ consistency/-
comparable metadata?
14 — Do we highlight columns and rows
on hover or tap?
15 — Can the user move columns left and right?
16 — What if users compare items in
unrelated categories?
17 — How do we allow users to add more
items for comparison?
18 — How do we allow users to remove
items from comparison?
19 — Should we ask customers to choose
preferred attributes?

02 / 03
FEATURE COMPARISON

20 — Do we suggest a winner among the

compared products?
21 — Does every action have visual and/or
aural feedback?
22 — Do we display sticky headers as
users scroll down the page?
23 — With many products, do we use
steppers to move between options?
24 — Have we provided a shareable link for
comparison?
25 — Are compared items stored persistent-
ly (page refresh/exit)?
26 — Do we include a “Notify about price
drop” option for emails?
27 — Is the feature comparison (and
navigation within) accessible?
28 — Have we considered the minimum
width of columns/rows?

03 / 03
 TIMELINES
CHECKLIST
TIMELINES

01 — What kind of events should the

timeline display?
02 — Does the number of events vary
or is it always the same?
03 — If it varies, is the number of events
limited (min/max)?
04 — Do new events occur over time
(betting, real-time events)?
05 — Do all events have the same weight,
or are there any critical ones?
06 — How do we expose/highlight critical
events (e.g. now/coming up next)?
07 — How do we represent each event
(photo, date, icon, text, rates)?
08 — For each event, do we need to display
more details on tap/click?
09 — If yes, how do we display these details
(accordion, tooltip, overlay)?

01 / 03
TIMELINES

10 — Should some events or time segments

be available/fixed at all times?
11 — Do we communicate changes over
time with an underlying histogram?
12 — Do we need any filters for various event
types? Where do we place them?
13 — Do we need a slider to help users
filter out irrelevant segments?
14 — Can we use a dual-point slider to explore
timeline in snapshots (video editing)?
15 — Would a horizontal or vertical
timeline work best on desktop?
16 — Can we break up the timeline across
multiple lines (wrapping, snake)?
17 — Can we break down the timeline into
segments (e.g. tabs, swipers, accordions)?
18 — Can we collapse calm segments to
make space for busy segments?

02 / 03
TIMELINES

19 — Can we add zooming to change the

number of events or level of detail?

20 — Can we make better use of mobile

space with a circle/square UI?

21 — Can we add a mini map to help users

navigate a complex timeline?

22 — Can users explore events with a swiper

or a wheel navigation?
23 — Can we show dependencies via meta-
phors (tree, branches, layers, bubbles)?

24 — With a lot of events, how many do we

expose by default (mobile/desktop)?

03 / 03
MAPS AND CHARTS
CHECKLIST
MAPS AND CHARTS

01 — What kind of map/chart are we designing

(geography, floor plan, seat map)?
02 — How much space do we reserve
for it in our UI (mobile/desktop)?
03 — Do we have any levels, planes, or layers
that users need to navigate between?
04 — If yes, how many? How do we design
the navigation?
05 — Will the map/chart change over time
(elections, real-time events)?
06 — Will the map/chart contain markers,
labels, and distinct regions?
07 — Do they all have the same weight, or
are there any critical ones?
08 — How do we expose/highlight critical
ones (e.g. large states)?
09 — How do we represent each label/
marker (date, icon, text)?

01 / 03
MAPS AND CHARTS

10 — Do we need to display details for

taps/clicks on them?
11 — If yes, what kind of content
should we display?
12 — Where do we display the details
(below, above, near the tap/click)?
13 — Should we track if there is enough
space to fully display all details?
14 — Do we provide zooming? How many
levels of depth will zoom provide?
15 — Do we need filters to adjust the amount
of detail? Where do we place them?
16 — Do we need a slider to help users
remove irrelevant details?
17 — Would a list/cartogram/cards view
help in exploring data faster?
18 — Do we add a mini map to help users
navigate the fullscreen map? Where?

02 / 03
MAPS AND CHARTS

19 — Would an autocomplete search help

users find information faster?

20 — Should we allow for multi-selec-

tion within our search?

21 — Should we allow users to switch

between different views?

22 — Can a slider or carousel help swipe

through relevant sections?

23 — Do we use some sort of normalization

to minimize rage-taps/-clicks?

24 — If the tap isn’t accurate enough, can we

prompt users to specify intent?
25 — For charts, can we flip axes to make
use of available space?

26 — Technically, how do we minimize the

lag when the map is explored?

03 / 03
 SEAT SELECTION
CHECKLIST
SEAT SELECTION

01 — What kind of seat selection are we

designing (theatre, concert, sport event)?
02 — What kinds of pricing tiers and discounted
tickets (senior, student) do we have?
03 — Do some seats have special attributes
(e.g. wheelchair-friendly)?
04 — Can customers select flexible dates to see
the cheapest prices in that date range?
05 — Do we have any seating levels that
users need to navigate between?
06 — If yes, how many? How do we design
the navigation between them?

07 — How realistic/precise do we need the

seating plan to be?
08 — Can we use some sort of normalization
map to minimize rage-taps/-clicks?
09 — Do we ask for # of seats up front, or can
users choose as many seats as they want?

01 / 05
SEAT SELECTION

10 — What filters do we need to reduce/increase

level of detail (price, score, # of seats)?
11 — Do we include the option “Any” for
each of the filters used?
12 — Where do we place filters in our
interface (mobile/desktop)?
13 — Do we need some sorting options (low/
high price, quality of view, best seats)?
14 — How do we show unavailable seats,
and seats that don’t match the filter?
15 — Can users easily reset their filters
selection (“Reset”)?
16 — Do we display the number of results
for every applied filter?
17 — Do we show the number of available
seats for every pricing tier?
18 — Do we use color coding to indicate
different pricing tiers?

02 / 05
SEAT SELECTION

19 — How do we display seats to which a

discount may/may not be applied?
20 — For results, do we add a mini map or a
list view for quicker exploration?
21 — What data do we need to show for each
seat (availability, price, photo, 3D view)?
22 — When displaying a photo preview,
can we display it on a single tap?
23 — Do we calculate and display an
experience score for each seat?
24 — Do we nudge customers towards
recommended seats?
25 — Do we ensure that recommended
seats don’t come across as promoted?
26 — Do we provide zooming? How many
levels of depth will zoom provide?
27 — If the tap isn’t accurate enough, can
we prompt users to specify intent?

03 / 05
SEAT SELECTION
DESIGN
28 — Do we split the seating plan into large,
tappable sections?
29 — If yes, will a tap prompt zooming or
show best seats in that section (or both)?
30 — Do we give users just an estimate of
the perspective once a seat is tapped?
31 — Or do we rather provide accurate 360
degree/VR views?
32 — If yes, how exactly do users prompt
and interact with these views?
33 — Have we looked into accessibility aspects
of the UI (e.g. keyboard-friendly)?
34 — Technically, how do we minimize the
lag when the seating plan is explored?
35 — Can we further minimize the number
of taps/clicks to the first seat preview?
36 — Do we lock the seats while the
customer is checking out?

04 / 05
SEAT SELECTION
DESIGN
37 — How long is the expiry time for the ticket
to be locked? What happens afterwards?
38 — How do we allow customers to change
their seat in the checkout?

05 / 05
 PRIVACY DESIGN
CHECKLIST
PRIVACY

01 — What user data is absolutely necessary

for our service to be fully functional?
02 — Which data do we consider as
mandatory for our business?
03 — Can we group user data according to
low/medium/high priority?
04 — When are the right time and place in
the UI to get high priority permissions?

05 — Can we gradually request more user

permissions when we need them?
06 — Can we never prompt native permission
requests automatically (often dismissed)?
07 — Are all permission requests prompted ma-
nually by the user (“Turn on location,” etc.)?
08 — Do we ask for permissions only if we
are likely to get them?
09 — Do we show install app prompts only
when we are likely to get a yes?

01 / 05
PRIVACY

10 — For every permission request, do we explain

why we need it and what value it provides?
11 — What third parties do we use, and
what data do they collect?
12 — How can we influence, restrict, and
track the data they collect?
13 — Do we ask for only what we
absolutely need to know (by default)?
14 — Do we collect optional data only if we
have a permission for it?
15 — Can we set up a centralized privacy hub
with an overview of all a user’s data?
16 — Is it easy to adjust privacy settings
(revoke consent, modify permissions)?
17 — Can customers extract and delete
their personal data?
18 — Can customers be irrevocably
forgotten (third-parties, backups)?

02 / 05
PRIVACY

19 — Do we provide a friendly TL;DR version/-

summary of our privacy policy?
20 — Do we have a solution for cookies/privacy
policy in place?
21 — Do we have a clear picture of our obligation
regarding data protection legislation?
22 — What impact does an install app prompt
have on the conversion in the funnel?
23 — What impact does a newsletter box pop-
up have on the conversion in the funnel?
24 — What impact does a chat window pop-up
have on the conversion in the funnel?
25 — Did we measure the impact of “gray”
patterns on costs in marketing/support?
26 — Can we measure conversion without
pop-ups/app prompts on a slow weekend?
27 — Do we also measure time-to-repeat-pur-
chase, time-to-share, lifetime value?

03 / 05
PRIVACY

28 — Does the site/app work properly with

popular ad/tracking blockers?
29 — Do we group cookies and explain
how each group helps us?
30 — Do we allow customers to reject entire
groups and also individual services?
31 — Can we avoid blocking out the entire
page with a cookie consent?
32 — Can we avoid setting any non-functional
cookies on critical landing pages?
33 — Do we know the impact of enabling
users to reject all cookies quickly?
34 — Do we give customers good reasons to
submit valid data (phone number, email)?
35 — Do we provide info-tooltips for every
piece of data we are collecting?
36 — When asking for title, do we provide
a way out (“Human!”)?

04 / 05
PRIVACY

37 — When asking for gender, do we provide

a way out (“I’d rather not say”)?

38 — When asking for age, do we provide a

way out (“Forever young!”)?

39 — When asking for phone number, do

we provide a way out (“Optional”)?

40 — Do we really need birth date, or do we

need age confirmation or day of birth?

41 — Should we allow customers to choose

the frequency of notifications?
42 — If we anticipate a high volume of notifica-
tions, can users snooze/pause them (24h)?
43 — What’s the key data we need to initiate a
sign-up/free trial? (email/phone/zip code)

44 — Did we consider the offboarding experi-

ence (what happens to user data)?

05 / 05
ONBOARDING AND OFFBOARDING

CHECKLIST
ONBOARDING AND
OFFBOARDING
01 — How many popular, representative user
stories do we have in our app?
02 — What are the customer’s main success
moments in our app?
03 — How do we drive customers towards
these success moments?
04 — How many taps/clicks are required to
accomplish the first success moment?
05 — Does our UI pass the “banana test”
(replace all words with “banana”)?
06 — Can we avoid first-look tours,
wizards, and slideshows?
07 — Can we make use of empty states and
just-in-time hints instead?
08 — Have we defined any useful templates
(example content) for users to get
started with?
09 — Can customers customize a template to
fit their needs best?

01 / 05
ONBOARDING AND
OFFBOARDING
10 — Can we produce a video with built-in pauses
for the user to tap-to-continue?
11 — Can we provide a “Get started” checklist to
keep customers engaged and learn the UI?
12 — What’s the minimal amount of data
required from users to get started?
13 — Do we ensure that a user’s input is
minimized, and never, ever lost?
14 — Is authentication absolutely necessary
for the first success moment?
15 — If so, can we use magic sign-in or SMS
verification instead of passwords?
16 — Do we avoid asking for personal details
unless necessary (gender, age, etc.)
17 — For our sign-up form (if we have one),
have we removed all optional fields?
18 — Can we delay the payment input or
plan selection until later?

02 / 05
ONBOARDING AND
OFFBOARDING
19 — Do we track the most frequently used
features by our customers?
20 — Do we track common frustration points,
slow tasks, and repetitive tasks?
21 — For each user type, what are some of the
most repetitive tasks?
22 — For each repetitive task, can we highlight
a faster way after a few repeats?
23 — For a new feature, what’s the right place
and time to expose it to users?
24 — Which of our features contribute most to
the success moments for users?
25 — How many features do we want to high-
light to a new user over the first 14 days?
26 — What is the right timing to highlight each
of these features (pain points)?
27 — For major layout changes, can we animate
how sections have shifted in the new UI?

03 / 05
ONBOARDING AND
OFFBOARDING
28 — Do we provide help only when users
actually need it, not when they don’t?
29 — Do we provide a free trial period, and what
features do we restrict during that time?
30 — How do we prepare the customer for
the end of the free trial?
31 — For each user, do we use progressive onbo-
arding (anonymous account first)?
32 — Is it possible to adjust the billing period
and pause a subscription temporarily?
33 — For offboarding, is the cancellation
process easy and straightforward?
34 — Do we display compelling alternatives
for cancellation?
35 — Do we allow users to download their
data (orders, projects, etc.)?
36 — Do we explain what will happen next
to the user’s data, and when it will be
irrevocably deleted?

04/ 05
ONBOARDING AND
OFFBOARDING
37 — Do we provide an option to restore an
account (or plan/subscription) within
30 days?

38 — Do we ask a customer to tell us why

they’ve left and rate the experience?
39 — Do we show a summary of everything
the user has achieved in the app so far?
40 — Do we provide contact details for
questions and custom plans?

05/ 05
 PRICING PLANS
CHECKLIST
PRICING PLANS

01 — What intro copy do we include above pri-

cing plans (strong one-liner, useful byline)?
02 — Can we include the number of companies/-
customers that have already signed up?

03 — Can we highlight logos of prominent

brands that already use our service?
04 — How many plans do we have, and which
one do we want to sell?

05 — What are the differences between the plans?

Does each target a different audience?
06 — How many features do we want to display
per plan? Can we offload some of them to
a separate section (“See all features”)?
07 — Do we need an option to switch
between monthly/annual pricing?
08 — Do we want to allow customers to
switch currency (€/$/£)?
09 — Do we mention that all prices are total,
all-inclusive prices (if they are indeed)?

01 / 06
PRICING PLANS

10 — Do we provide a free trial to increase

engagement? How long (14/30/60 days)?
11 — If so, can we avoid requiring credit
card data for the free trial period?
12 — Do we have templates in place for
customers to get started right away?
13 — Can we postpone sign-up and drive users into
the UI instead (small commitments first)?
14 — When are the right times to ask for an
actual sign up/credit card? (e.g. to save
data/share it)?

15 — Do we indicate that users can cancel

their plan any time?
16 — Do we include a link to the refunds or
cancellation fees?
17 — Do we allow customers to select important
features and suggest a plan based on that?
18 — Do we allow users to configure their
own pricing plan?

02 / 06
PRICING PLANS

19 — Do we allow users to estimate their overall

cost with various plans and annual/month-
ly options (e.g. with a slider)?
20 — Do we allow users to compare features
(e.g. show differences or pick important
features)?
21 — For complex plans, do we group features
in accordions for easier scanning?
22 — For comparisons, do we allow users to
switch between views (e.g. table/list/
map/slider)?
23 — Can we use color coding or tilt headers
to still show all available plans?
24 — Do we include a prominent option to
ask for a custom plan/contact sales?
25 — Do we include a prominent option to
contact us in case of questions?
26 — Do we provide (and highlight) group
discounts? What size, and how long?
27 — Do we have any add-ons that customers
for any plan can add?

03 / 06
PRICING PLANS

28 — Do we have any customizable features for

every plan (number of users, servers etc.)?
29 — If so, how do we display these
features and add-ons?
30 — Do we want to include a group of
diverse, authentic testimonials?
31 — If so, does every testimonial include a
photo, title, company, level of experience?
32 — Do testimonials have genuine photos,
rather than stock photos?
33 — Do we want to include a video testimoni-
al as well, and where do we embed it?
34 — Do we provide an FAQ?
35 — Should we indicate payment options that
we support (PayPal, credit card, etc.)?
36 — How do we design the pricing plan
options?
37 — Do we use some sort of metaphor to indica-
te difference in plans (bicycle, car, van)?

04 / 06
PRICING PLANS

38 — How do we highlight the recommended

option (larger/centered/colorful)?

39 — How do we indicate which audience

each pricing plan is for (e.g. freelanc-
ers/business/enterprise)?

40 — How do we structure pricing options on

mobile (accordions/tabs/slider/stacked)?

41 — On mobile, are pricing plans displayed

as a floating bar (top or bottom)?

42 — How exactly do we indicate that some

features are available in a plan? (e.g.
checkmark)
43 — How exactly do we indicate that some
features aren’t available in a plan (but
available in another)?

44 — Do we highlight a selected row/col-

umn on tap or click?

45 — Is our copy focused on selling benefits

rather than features?

05 / 06
PRICING PLANS

46 — Can we avoid “sign up”/”create an

account” on CTAs? (e.g “Get started”,
“Start for free”, “Free for 30 days”).

47 — Do we have repeating calls to action on

top and bottom?

48 — Do we highlight important features or

testimonials in the sign-up form?

49 — Do we adjust the pricing plan page for

people who are already signed in/
signed up?

06 / 06
REVIEWS AND TESTIMONIALS
CHECKLIST
REVIEWS AND
TESTIMONIALS
01 — Can we ask for testimonials from
customers who recently interacted with
the brand on social media?
02 — Can we ask for testimonials from
customers who’ve just started using the
service?
03 — Can we ask for testimonials from customers
who’ve been using our service frequently?
04 — Can we ask for testimonials from customers
who’ve been using service for a while?
05 — Can we get testimonials from well-re-
spected brands or customers?
06 — Can we ask for testimonials on specific
features or qualities? (e.g. response times,
customer support, ease of use).
07 — Can we avoid generic, non-specific tes-
timonials (e.g. I absolutely love the brand!)?
08 — Are all testimonials focused on qualities
and improvements rather than general
impressions?

01 / 04
REVIEWS AND
TESTIMONIALS
09 — Can we group testimonials by a feature
or impact and highlight them together?

10 — Can we produce more detailed customer

stories for each testimonial?

11 — Could we produce video testimonials,

or video case studies?

12 — If not, can we produce a single video that

features some of our clients?

13 — How many authentic testimonials

and reviews do we have?

14 — Can we highlight the number of

testimonials and reviews prominently?

15 — Do people represented in our testimoni-

als reflect the diverse audience we are
talking to?

16 — Do we have any news coverage, so we

could quote articles mentioning us?

02 / 04
REVIEWS AND
TESTIMONIALS
17 — What are the critical areas that we defini-
tely need to display testimonials for?
18 — Do we want to display testimonials at
checkout?
19 — Do we want to display them in feature
comparison and product/pricing pages?
20 — Can we group and assign testimonials
based on these critical areas?
21 — How many testimonials do we want
to display for each critical area?
22 — What details do we want to display for
each testimonial? (Name, photo, title,
age, location, role, company, brand logo,
customer since when, when the review
was made)?
23 — Do we dedicate enough space to show
a large photo?
24 — Do we avoid non-realistic, exaggerated,
or non-authentic stock photos?

03 / 04
REVIEWS AND
TESTIMONIALS
25 — If we can’t get photos, can we design
custom illustrations instead?
26 — Can we use brand logos as well?
27 — Should we use a carousel to expose
testimonials?
28 — Are our carousels accessible on mobile
and on desktop?
29 — For video testimonials, do we provide pro-
per captioning and transcripts as well?

30 — Do we want to display (curated?)

Twitter/Instagram posts, along with a
Twitter/Instagram handle?

31 — Do we track (and collect) our

testimonials on third-party platforms,
e.g. TripAdvisor?

04 / 04
WEB FORM DESIGN
CHECKLIST

OK
WEB FORM OK

01 — What’s the absolute minimum user input

we need for new customers to get started?
02 — When is the right time and place to ask
users to verify critical input (email,
password, permissions)?
03 — For each piece of data, what’s the best form
element to collect it fast and accurately?
04 — For sensitive data input (e.g. phone
number), do we explain why we need it?
05 — Are there any form elements which need
hints (e.g. password requirements,
username)?
06 — Do we have an attribute profile for each
input in our form — required/optional,
allowed characters, min/max length,
prefilling enabled/disabled, masking/val-
idation/auto-formatting needed,
accessible tooltip, dependencies on other
elements, detection by IP.
07 — Do we always prioritize actionable copy:
instead of “Password”, “Choose password”?

01 / 09
WEB FORM OK

08 — Do we always prefer tap-friendly compone-

nts, i.e. large buttons, toggles, and sliders?
09 — Do text boxes appear as text boxes (good
padding, bordered).
10 — Have we adjusted the width of each box to
give users a hint of the expected length of
input?
11 — Do we use proper labels, associated with
input fields?
12 — Do we use letter case for the microcopy
on labels?
13 — Do we highlight required or optional
fields, or both (preferably either optional
or both)?
14 — How do we style placeholders, and is the
microcopy helpful?
15 — Will labels be top-aligned or right-aligned
(preferably the former)?
16 — Will we be using floating labels? If so, check
if they are still announced to screen readers?

02 / 09
WEB FORM OK

17 — Do inputs have :focus and :active styles?

18 — For each input, do we need to enable/dis-

able autocorrect, spell-checking and
autocapitalization?
19 — Do we use HTML5’s pattern to restrict
input with in-browser validation?

20 — Are there any inputs where we need to

provide a reasonable default value?
21 — Do we make use of autofill with the
autocomplete attribute?
22 — Do we always display the right keyboard
on mobile (inputmode)?
23 — Do we use autofocus to bring focus to the
first input element on page load?
24 — Do we lay out fields in a single column
(preferably yes)?
25 — Do we lay out field groups in multiple
pages (one-thing-per-page pattern)?

03 / 09
WEB FORM OK

26 — Do we show at most 7–8 input fields at a

time on desktop, 3–4 on mobile?
27 — Are radio buttons actually round
(preferably yes)?
28 — For radio buttons, are there any where a
fallback input is required (e.g. “I’d rather
not say” for gender, age etc.)?
29 — Are checkboxes square, with enough
padding and large font size (18px+)?

30 — For checkboxes used as filters, do we

track incompatibility of options or low
result count to prevent users from
landing on pages with no results?

31 — Do we avoid <select>-dropdowns as
much as possible, and use steppers (<10
options) or datalist with autocomplete
(>10 options) instead?

32 — For autocomplete, do we surface frequent

hits at the top of autosuggestions?

04 / 09
WEB FORM OK

33 — For a country selector autocomplete, do

we need to display some countries as
frequently used? Do they also appear in
the alphabetical list?
34 — How do we design the country selector,
and what height should it have (6–7 rows)?
35 — For our autocomplete, do we also accept
abbreviations (GB, UK, DE, NL, CH etc.)?
36 — For our autocomplete, do we also accept
alternative manual input?
37 — Do we display the results count for
categories with autocomplete?
38 — Is autocomplete keyboard-accessible,
and forgiving of minor typos and errors?
39 — Do we use a localization based on
user-provided country or ZIP/postal code
(placeholders, masks, input field(s) width,
formatting, spelling, currency, legal
requirements)?
40 — Can we ask for a full name instead of first,
middle and last names?

05 / 09
WEB FORM OK

41 — Do we avoid “Address Line 2” and use

more contextual labels instead (“Apart-
ment, suite, unit, floor”)?
42 — Can we use an address look-up widget
(Loqate, Algolia Place, Google Place
Autocomplete) to speed up location input?
43 — For date and time input, do we display
input boxes or widgets with steppers for
quick jumps?
44 — Do we provide autoformatting for phone
number, birthday, amounts, numbers,
dates, postal codes?
45 — For credit card input, can we avoid selection
of the credit card type before input?
46 — As a label for the name on a credit card,
do we use “Name on card”?
47 — As a label for security code, can we use
“Security code” instead of “CVC” etc.?
48 — As a label for expiry date, can we use a
single input field with auto-masking?

06 / 09
WEB FORM OK

49 — Can we use Payment Request API, Apple

Pay, Google Pay to avoid lengthy input
altogether?
50 — For inline validation, can we define a
threshold per input field, after which we
start validating input?
51 — Can we not validate the input yet unless
the threshold is reached?
52 — Do we show success only if the user has
moved to the next field?
53 — When editing a field that was valid, do we
validate after full data entry? (Reward early)
54 — When editing a field that was invalid, do we
validate during data entry? (Punish late)
55 — Do our error messages drive users to a
clear path on how to fix the error?
56 — On submit, do we scroll the user to the
first error and focus on it?
57 — …or display the error above the submit
button (focused)?

07 / 09
WEB FORM OK

58 — If there are a few errors, do we additional-

ly display a summary of errors at the top
of the page?

59 — Do we display the error message just above

the input field (not covered by keyboard on
mobile)?

60 — Do we show the number of errors in the

tab title as a prefix?
61 — Can we not disable submit buttons until
all fields are filled in (easier to highlight
and explain errors)?

62 — Do we display confirmation boxes only for

absolutely critical situations (e.g. deleting
email list entirely)? Can we use undos to
help users quickly restore data instead?
63 — Do we move users to the next input field
automatically after successful input?
64 — Do we persist the data on refresh?

08 / 09
WEB FORM OK

65 — Have we tabbed through the entire form

(incl. date picker and autocomplete)? Is the
tab order predictable and reasonable?

66 — Have we tested the form on desktop,

tablet, mobile? Where do error messages
appear? Do labels always appear in full?

67 — For lengthy forms, do we need to first

explain to users how much time the form
will require, what documents they need to
be prepared, and if they can save input and
continue later?

68 — Do we have an input budget in place

(max number of input fields per step)?

69 — Do we track the tap count (min number

of taps needed to successfully complete
the form)?

70 — Have we considered what happens when

the form is loading (skeleton screen,
loading indicator)?

09 / 09
 AUTHENTICATION
CHECKLIST
AUTHENTICATION

01 — How do we ensure that authentication/se-

curity don’t stand in the way of usability?

02 — Do we prioritize usability against security

in our UI, or the other way around?

03 — What are the more sensitive areas which

require a more strict authentication?

04 — In which situations will we prompt

users to authenticate themselves?

05 — What password requirements do we

want to implement?

06 — What authentication method do we want

to prioritize for signing in? Login/pass,
Login/passphrase, 2-factor-authentica-
tion, social media sign-in, magical
sign-in, biometric input (mobile), other?

07 — Can we avoid asking users to verify

email immediately, and ask at review
page or success page instead?

01 / 04
AUTHENTICATION

08 — Can we avoid asking users to verify their

password and use the show/hide pattern
instead?

09 — Can we provide a live password require-

ment checklist (to indicate what chara-
cters are needed to meet requirements)?

10 — Can we ask for a passphrase instead of a

password?

11 — How do we explain passphrases and

2-factor-authentication in our UI?

12 — Can we replace security questions

with a 2-factor-authentication?

13 — For 2-factor-auth, can we complement

the SMS option with QR, app, email?

14 — Can we reward customers for using 2-fac-

tor-auth (discount, free month, etc.)?

15 — Do we provide a social media sign in?

02 / 04
AUTHENTICATION

16 — If yes, what services do we support?

What permissions do they get?

17 — Do we have a spam prevention strategy

in place?

18 — Do we really need CAPTCHA, or can we

use honeypot technique plus time traps
instead?
19 — Can we set a long cookie expiry date to
avoid frequent sign-ins?

20 — Can we set a long cookie expiry date for

quick checkouts (like 1-click-checkout)?

21 — When is the right time and place to ask

for permissions (location/camera, etc.)
22 — Can we authenticate users by asking
for a phone number and send a code as
a text message?

23 — How do we design and build a password

recovery experience?

03 / 04
AUTHENTICATION

24 — Do we set any requirements on the freque-

ncy of password recovery at a given time?

25 — Do we enable customers to merge multiple

accounts (social sign-in, email, like
Medium does)?

26 — If not, can we place a cookie and suggest

to customers what they signed in with
last time?

27 — How do we prevent customers from

using insecure passwords?

04 / 04
 DONATION FORM
CHECKLIST
DONATION FORM

01 — Which audiences are we targeting with

the donation form?
02 — What reason for donating would resonate
best for each of our audiences?
03 — How do we communicate that
purpose visibly?
04 — Do we highlight the organization’s
mission, goals, objectives, and work done?
05 — Do we highlight how we use
donations (case studies, videos, etc.)?
06 — Do we include any testimonials or
stories next to the donation form?
07 — Do we allow visitors to choose what
their donation is used for?
08 — Do we provide an option to make a
donation in honor or in memory of
someone?
09 — Do we provide an option to donate
anonymously?

01 / 04
DONATION FORM

10 — Do we require an account or do we have

an option to donate as a guest?
11 — What suggested amounts do we display?

12 — Do we explain what impact each

amount has on our projects?
13 — Which types of donations do we provide:
one-off, monthly, quarterly, annually?
14 — If the donation is recurring, do we
communicate when the donor will
next be charged?
15 — Do we explain the process of cancelling
a recurring donation?
16 — Do we avoid hidden fees/processing costs
and show the final amount up front?
17 — Which option(s) do we want to highlight
as a “recommended” option?
18 — Is there a “most popular” option we
could highlight?

02 / 04
DONATION FORM

19 — Do we provide an option for custom

input?
20 — Do we indicate if the donation tax is
deductible?
21 — Do we highlight people who’ve just
donated?
22 — Do we allow visitors to change the
currency?
23 — Do we include an option to top up the
amount in the payment flow?
24 — Do we use one-page layout or
multi-page layout?
25 — Do we avoid performance hits when
switching tabs or moving through
steps?
26 — What’s the absolute minimum of data
we need?
27 — Do we indicate that the donation form
is secure?

03 / 04
DONATION FORM

28 — What payment options do we provide

(credit card, PayPal, etc.)? Which one do
we set as a default?

29 — Have we examined and refined error

messages?

30 — Did we ensure that the form is fully

accessible?

31 — Do we follow up with the donor about the

impact of their donation?

04 / 04
 AUTOCOMPLETE
CHECKLIST
AUTOCOMPLETE

01 — Is search collapsed or visible at all times?

02 — Do we want search to be prominent
or hidden?

03 — Is the search box actually a search box?

04 — Does the placeholder explain search

types?

05 — Is it possible to preselect a category

for an in-section search?
06 — Is search input keyboard-focusable?
07 — What changes when the input field
has focus?
08 — Do we darken the rest of the screen to
bring search into focus?
09 — Do we show popular searches, products,
or categories on focus?
10 — Do we start displaying suggestions with
the very first character?

01 / 04
AUTOCOMPLETE

11 — Do we use a lookahead pattern for

search queries?

12 — How many suggestions do we display on

desktop?
13 — How many suggestions do we display
on mobile?

14 — How do we design autosuggestions?

15 — Do we distinguish between keyword and

category suggestions?

16 — Do we show keywords, featured

products, categories, and brands?

17 — Do we highlight the user’s input

(keyword) within suggestions?
18 — Do we display the number of
expected results for each suggestion?

19 — Do we display ratings, the number of

ratings, and product thumbnail?

02 / 04
AUTOCOMPLETE

20 — Do we display any thumbnails? If yes,

how large should they be?
21 — Do we display popular keywords, category,
products, guides, content pages?
22 — How do we change the design on hover/tap
for suggestions?
23 — Are autocomplete suggestions keyboard-fo-
cusable (Enter/Esc/up/down)?

24 — Do we persist search input on the search

results page?
25 — Do we display breadcrumbs, categories,
and search results count?

26 — Do we have an option to look up and

clear all previous searches?
27 — Do we keep all sorting and filter
settings on refresh?
28 — Do we suggest categories or keywords
in search results?

03 / 04
AUTOCOMPLETE

29 — Does autocomplete disappear when the

entire query is removed?

30 — Have we tested the behavior with empty

space and special characters?

31 — Do we keep track of important synonyms

and abbreviations?
32 — Do we keep track of thematic and
seasonal queries?
33 — Do we keep track of misspellings via
search logs?

04 / 04
 SORTING
CHECKLIST
SORTING

01 — How do we indicate sorting and sorting

types in our UI?
02 — Do we display sorting above the content
list (right corner)?
03 — Do we repeat sorting at the bottom of
the content list (right corner)?
04 — Are sorting options displayed as buttons,
links, chips, or as a dropdown?
05 — If we do use a dropdown, how do we
implement it (native/custom dropdown)?
06 — How do we design :hover, :focus and
:active states for all options?
07 — Do we include the “Sort by” label separately
from the buttons/dropdown?
08 — How many sorting options do we
provide (price, alphabetical, featured,
reviews)?
09 — Do we need to provide any category-spe-
cific sorting options (volume, capacity)?

01 / 04
SORTING

10 — Do we feature the most popular filters

as sort types within each category?
11 — Do we use “Relevance” or “Featured items”
as the default selection for sorting?
12 — Does the default sorting reflect the
diversity of all major product types?
13 — How do we indicate the default selection
for sorting in our UI?
14 — What sorting directions do we provide?
How do we indicate them?
15 — Do we include sorting options within
reviews (e.g. skin type, skin shade, age
range)?
16 — Does our wording focus on benefits? (‘Ratings
(high to low)’ vs ‘Highest ratings’)
17 — Do we suggest scope within the sorting
category (faceted sorting)?
18 — Can customers combine multiple sorting
types (e.g. relevance and price)?

02 / 04
SORTING

19 — With multiple sorting types, can they

appear as removable pills, chips, or tags?
20 — How do we help users skip irrelevant items
while scrolling (extra navigation?)

21 — How do we calculate an “average rating”

when customers choose to sort by rating?
22 — Do we account for the number of ratings
to calculate best “average ratings”?

23 — Are sorting and all sorting directions

accessible via the keyboard?
24 — Do we update only a section, or the entire
page, when a sorting type is selected?

25 — Do we use a loading indicator to indicate

that a section is being updated?

26 — Do we support the “Back” button as

users switch between sorting types?
27 — Does sorting apply automatically (yes,
on a dropdown selection)?

03 / 04
SORTING

28 — Does sorting apply manually on confirma-

tion (“Apply”) (yes, for overlays)?

29 — Do we allow customers to reset all sorting

types quickly, at once?

30 — Where do we place sorting options on

mobile screens?

31 — Is sorting (or sorting buttons) floating on

scroll on mobile/desktop?

32 — Do we persist users’ sorting settings

when they refresh the page?

04 / 04
 Product Page
CHECKLIST
Product Page

01 — For a given product page, what details

matter most to our customers?

02 — For a given product page, what details

matter most to the business?

03 — Are there any issues to be aware of due to a

legacy system or merchants?

04 — What layout do we use for the page (tabs,

accordions, one long page, floating bar)?

05 — If we use an accordion or tabs, which

section is visible/open by default?

06 — If we use a floating bar, do we show price,

thumbnail, reviews, navigation in there?

07 — How much screen real estate do we

dedicate to product images?

08 — Do we replace dots in the gallery with

thumbnails, or display images in a grid?

01 / 08
Product Page

09 — How many images do we provide per

product (ideally, 5–15)?
10 — Do we feature product images from
customer reviews?
11 — Do we provide a close-up photo, zoom
in/out functionality?

12 — What image resolution do we need our

images to be for close-ups?
13 — Where do we show a close-up when a
customer hovers over a part of an image?
14 — Do we use any videos and, if so, do we
provide subtitles?
15 — Do we provide 360° views, and how do we
indicate them?
16 — Do we front-load the title with a product’s
model number, specs, and sizes?
17 — Do we need to highlight compatibility or
accessories in the title?

02 / 08
Product Page

18 — Do we include a brand logo for the product?

19 — Do we highlight the main keywords

from reviews in the description?

20 — How do we explain advanced key features

of the product (visuals)?

21 — Do we include technical specs for the

product?
22 — Do we suggest any required accessories
that aren’t included?

23 — Do we display ratings, rating count,

average, and rating distribution?

24 — Are ratings linked to the “review” section

of the page?

25 — Do we include any testimonials and

reviews?

26 — What flavors of pricing do we need (sale

price, original price, discount value)?

03 / 08
Product Page

27 — Is the pricing large, bold, clear, and

noticeable?
28 — Do we display the final price (incl.
standard shipping, taxes, payment fees,
currency)?
29 — If so, do we mention that all prices are
final, all-inclusive prices?
30 — Do we track a customer’s IP and adjust
currency accordingly?

31 — Do we want to ask customers for country

and currency on entry?

32 — Do we allow customers to switch currency

(€/$/£)?
33 — Do we display estimated shipping costs,
taxes, etc. next to the price?

34 — For products in varying amounts, do we

provide price-per-unit to ease comparison?
35 — Do we highlight the “best-price-guarantee”?

04 / 08
Product Page

36 — Do we include leasing options?

37 — How do we display product variations?

38 — Do the product title, image, specs change
when a variant is clicked/tapped?

39 — Do we provide any filters for size, color,

delivery, availability?
40 — Do we highlight stock availability?
41 — What do we display when an item is out of
stock (notification via SMS/email)?
42 — Can customers purchase an item or a
variant if it’s temporarily out of stock?

43 — How do we implement the quantity

selector (dropdown, stepper)?
44 — With a stepper, do we have min and max
values?

45 — Do we display delivery options with pricing

for each?

05 / 08
Product Page

46 — Do we display the estimated arrival date

(Tue, Mar 23), rather than generic delivery
speed (3–4 business days)?
47 — Do we display free shipping notice or free
shipping threshold?
48 — Do we suggest any products to add to the
cart to get free shipping?
49 — Do we include the link to returns and
refunds near the price?
50 — Do we include the link to the shipping
costs near the price?

51 — Do we provide a shipping cost estimator?

52 — Do we need an overnight shipping cost

countdown?
53 — Do we display gifting options and which
options are provided?

54 — Do we display subscription options and

which options are provided?

06 / 08
Product Page

55 — Do we display supported formats,

packages, or bundles?

56 — Do we include options for a protection

plan or insurance?

57 — Do we include sharing links?

58 — Do we provide warranty details?

59 — What kind of calls to action do we have

(“buy now,” “add to basket,” “save for later”)?

60 — Do we provide a feature comparison

(“add to compare”)?

61 — Do we include the section “Frequently

bought with this item…”?

62 — Do we include the section “Customers who

bought this also bought...”?

63 — Do we include recently viewed items?

64 — How do we design and sort reviews?

07 / 08
Product Page

65 — What sorting options do we provide?

66 — Is search within reviews available?

67 — Do we expose popular keyword filters?

68 — Do we show supported payment

methods and options?
69 — Do we provide quick access to the
shopping cart or checkout?

70 — Do we include breadcrumbs above the

product title?

71 — Do we need to provide a spec sheet or

compatibility table?

72 — Do we include an FAQ section?

73 — Do we keep photos, ratings, pricing, fees,

shipping, returns close?

74 — What happens when an item is added to

the cart (new page, overlay)?

08 / 08
 VIDEO PLAYER
CHECKLIST
VIDEO PLAYER

01 — How do we design the thumb, the track,

and the controls?

02 — Do we ensure a large enough tap area for

the thumb on mobile?

03 — Do we increase the thumb size and

scale size on hover, tap, or click?

04 — How do we optimize for precise input and

fast-forwards (keyboard, buttons)?

05 — When do we display and hide controls?

06 — How do we design the audio controller?

07 — Do we mute audio by default?

08 — Do we display subtitles by default?

09 — Do we use IP-geolocation to choose a

default language for audio/subtitles?

01 / 04
VIDEO PLAYER

10 — How do users select subtitles and lang,

position, size, color?
11 — Do we use preview clips, popularity bar,
key moments preview?
12 — Have we styled the hover, active, and
focus states for player controls?
13 — Have we styled the :hover, :active and
:focus states for player controls?
14 — Are the UI and controls accessible via
keyboard?
15 — Do we provide an input fallback to jump
to a specific point in time?

16 — What happens if the video is outside of

the view?
17 — Can users resize the video size on the
page to fit their needs best?
18 — Do we adjust the slider’s scale dynamical-
ly when customers navigate the track?

02 / 04
VIDEO PLAYER

19 — Is it possible to skip some portions of the

video (“skip” link)?
20 — Do we provide sections for users to jump
to? How do we produce them?

21 — Is it possible to link to a specific part of

the video?
22 — Is it possible to generate a “share” link to a
specific section of the video?
23 — Do we allow for jumps of 10–15 sec with
buttons and keyboard arrows?
24 — Do we provide a “Table of contents” with
video jumps?

25 — Do we provide a running transcript as

the video is playing?
26 — What happens when a user switches to
another tab?
27 — Will video continue to play when a
mobile screen is turned off?

03 / 04
VIDEO PLAYER

28 — Do we retain the position of the video on

refresh?

29 — What do we display when the video is

buffering?

30 — How do we adjust the buffering and UI

for different network connectivity?

31 — Have we designed a loading indicator

during network issues?

32 — Do we need to account for copyright and

legal issues?

33 — What happens in the UI when the video

has finished?

04 / 04
DISABLED BUTTONS
CHECKLIST
DISABLED BUTTONS

01 — Do we need the button to be disabled

by default (e.g. item is unavailable)?
02 — If not, can we keep it enabled and
validate user input on submit?
03 — If not, can we rely on default values to
keep the button enabled?
04 — When should the button become
disabled (e.g. prevent double bookings)?
05 — Do we want to gray out any part of the
interface along with the disabled button?
06 — Do we want to use a skeleton screen
animation as well as the disabled button?

07 — Do we want to use a loading spinner for

the UI to indicate that the system is busy?

08 — Do we want to use a progress indicator

on the button to indicate progress?

09 — Should the wording on the button be

different when it’s disabled?

01 / 04
DISABLED BUTTONS

10 — Does it have sufficient color contrast

in the disabled state?

11 — Do we want to add a note under the

button explaining why it is disabled?

12 — Do we want to use a tooltip explaining

why the button is disabled?

13 — Do we keep the disabled button focusable?

14 — What happens when a user hovers or

taps on the disabled button?
15 — What happens when a user tries to
activate or focus on the disabled button?

16 — Do we change the cursor to not-allowed

to indicate that the action isn’t allowed?

17 — Do we prevent the click via JavaScript

by using aria-disabled?

18 — Do we use ARIA live regions to announce

dynamic content?

02 / 04
DISABLED BUTTONS

19 — Do we avoid pointer-events: none as it

doesn’t prevent focus/keyboard navigation?
20 — Do we guide users towards error
messages when they tap/click/tab to the
disabled button?
21 — When do we enable a disabled button?
22 — Can we add a link that sends all user
input to support if they are locked out?

23 — In that case, do we ask users for their

consent to be contacted?
24 — Do we use inline validation (positive
or negative)?
25 — When and how do we show error
messages?
26 — Do we include an option to continue
even if inline validation fails?
27 — Do we need to update the state of the
button after every user input?

03 / 04
DISABLED BUTTONS

28 — How will the button change while

updating its state?
29 — Do we change the label of the button
(“Updating…”) while it’s updating?

30 — Do we change the colors of the button

while it’s updating?
31 — Do we want to add a loading spinner
while the button is updating?

32 — Should we stop listening to click/tap

after the first click/tap?
33 — Do we not stop listening to click/tap
for undo buttons and steppers?
34 — Do we track how many people who can’t
proceed and abandon the flow altogether?

35 — If applicable, can we test if a design

without disabled buttons performs
better?

04 / 04
INLINE VALIDATION
CHECKLIST
INLINE VALIDATION

01 — What input requires inline validation?

02 — For every input, do we have exact

validation requirements?

03 — What happens when a user jumps

between empty fields?

04 — What happens when a user jumps

between incomplete fields?

05 — What happens when a user jumps

between invalid fields?
06 — What happens when a user jumps
between valid fields?
07 — What happens when a user refreshes
the page?
08 — What happens when a user opens the
page in another tab?

09 — What happens if a user changes

correct input?

01 / 06
INLINE VALIDATION

10 — What happens if a user changes incorrect

input?
11 — What input fields are likely to fail more often?
12 — Can we break these fields into smaller
ones to simplify validation?
13 — For these fields, can we show input
hints above them (under labels)?
14 — Do we want to allow customers to
proceed despite failed validation in these
(or any other) fields?
15 — If yes, do we ask users to confirm their
input is correct?
16 — For every input, do we set a minimum
threshold of characters for validation to
be triggered?
17 — For every input, do we start validating
only once that threshold is reached?
18 — If there is an error, do we show it
immediately as we detect it?

02 / 06
INLINE VALIDATION

19 — Or do we use only late validation (user has

left the field, on blur)?
20 — Do we avoid premature validation (on
input focus)?
21 — Do we avoid immediate validation (as a
user starts typing)?
22 — How do we minimize negative inline
validation?
23 — How do we maximize positive inline
validation?
24 — Do we never trigger new errors while the
user fills in a form?
25 — When editing a field that was valid, do
we validate on blur?
26 — When editing a field that was invalid, do we
validate immediately during data entry?
27 — Can we test a “validate” button for
complex input fields (passport number,
IBAN, VAT, SMS code etc.)?

03 / 06
INLINE VALIDATION

28 — Can we use auto-suggestions or popular

input to help fix mistakes faster?
29 — How do we display error messages?
30 — Do we announce error messages to
screen readers?
31 — Are error messages focusable?
32 — Do we change the border/background of
an invalid input field?
33 — Do we display error messages above the
input field?
34 — Do we complement text messages with
warning icons?
35 — Does every error message drive a user
towards fixing the error?
36 — Do error messages change based on a user’s
specific errors?
37 — Does every error message remain visible
until the error is fixed?

04 / 06
INLINE VALIDATION

38 — Do error messages disappear only

when input is validated?

39 — Can we avoid disabled “submit” buttons

(and validate on submit)?

40 — If not, can we explain why they are

disabled and how to fix it?

41 — Also, can we make disabled buttons

focusable and provide help on
tap/click/tab?

42 — If yes, can we show a tooltip linking to the

error at the top?

43 — Can we guide users to errors when they

submit?

44 — When should we guide users to the

error summary at the top instead?

45 — Or do we auto-scroll the user to the label

of the first error?

05 / 06
INLINE VALIDATION

46 — In the error summary, do we display

each error as a line on its own?

47 — Do we have server-side validation as well?

48 — Do we indicate failed validation in the

browser tab’s title (e.g. error count and
emoji)?

49 — Do we monitor error rates to track

how often users experience errors?

50 — Do we maintain and refine the wording

of error messages over time?

06 / 06
 BACK BUTTON UX
CHECKLIST
BACK BUTTON UX

01 — Can we make the URL more helpful,

structured, and human-readable?
02 — Should we provide an easy way to
copy–paste the URL?
03 — When should we change the URL of the
page?
04 — Do we change the URL with every new
state of a modal?

05 — Do we change the URL with every new

state of a filter?
06 — Do we change the URL with every new
state of a sorting?
07 — Do we change the URL with every new
state of a multistep process?
08 — Do we change the URL with every new
state of an infinite scroll?
09 — Do we change the URL with every new
state of a “load more” behavior?

01 / 04
BACK BUTTON UX

10 — Do we change the URL with every new

state of onboarding screens?
11 — Do we change the URL with every new
state of cookie/privacy prompts?

12 — Do we change the URL with every new

variation of a selected product?
13 — When else do we need to create a new
entry in the user’s browser history?
14 — Do we not change the URL with every new
state of a carousel or image gallery?
15 — Do we not change the URL with every
new state of an accordion?
16 — Do we not change the URL with every
new state of a truncated/expanded
content (“Show more…”)?
17 — For multiple selected filters, does the
“Back” button remove the last-applied
filter?

02 / 04
BACK BUTTON UX

18 — For a sorting direction, does the “Back”

button restore the previously set sorting
direction?
19 — Once a user deletes an item and then goes
back, can we allow them to restore the item
if needed?
20 — Does the “Back” button exit overlays
and lightboxes, while staying on the
current page?
21 — If a user opens a modal then goes back, do
they return to the list view?
22 — For multistep flows, does the “Back”
button take users back to the previously
viewed step?
23 — If a dynamically injected view changes
and a user goes back, do they return to
the original view?
24 — If a user opens an in-page link and then
goes back, do they return to the same
in-page link?

03 / 04
BACK BUTTON UX

25 — Are we going to use a “Back” link

somewhere as well?

26 — If so, do “Back” links actually go back in

the browser’s history or just link to pages?
27 — If a user scrolls a list, browses to an item
and then returns back, do they return to
the position in the list where they left off?
28 — For image galleries, does the “Back”
button bring a user to the previous
images?
29 — For variations on a product page, does
the “Back” button bring a user to the
previous variation?
30 — If a user scrolled down the page
smoothly, does the “Back” button bring
them to a previous page?
31 — If a user jumps abruptly on the page,
does the “Back” button bring them to
the previous spot on the same page?

04 / 04
PROVIDING A WAY OUT
CHECKLIST
EXIT
PROVIDING A
WAY OUT
01 — Do we prompt a larger selector view on
imprecise taps to avoid rage clicks?
02 — Do we allow users to pause auto-play
(carousels, videos)?
03 — Do we provide a language/country
selector that overrides IP geolocation?
04 — Do we allow customers to switch
currency (€/$/£)?

05 — Do we provide an option to switch

between monthly/annual pricing?
06 — Do we allow users to toggle between dark
and light modes?
07 — Do we include an option to proceed in a
form even if inline validation fails?
08 — Is it possible to type a date or time in an
input field directly (additionally to widgets),
09 — For autocomplete, do we also accept
alternative manual input?

01 / 06
PROVIDING A
WAY OUT
10 — Can customers define flexible dates and
times rather than fixed time slots?
11 — Can we ask for a full name instead of
first, middle, and last names?
12 — When asking for a title, do we
provide a way out (e.g “Human!”)?
13 — When asking for gender, do we provide
a way out (e.g. “I’d rather not say”)?
14 — When asking for age, do we provide a
way out (“Forever young!”)?
15 — When asking for a phone number, do we
provide a way out (“Optional”)?
16 — Do we really need date of birth, or do we
need age confirmation or birthday
(day/month)?
17 — Can we allow customers to choose the
frequency of notifications?
18 — If we anticipate a high volume of notifica-
tions, can users snooze/pause them (24h)?

02 / 06
PROVIDING A
WAY OUT
19 — For audio/video, do we provide proper
captioning and transcripts as well?
20 — For audio/video, do we provide an input
fallback to jump to a specific point in time?
21 — Is it possible to skip some portions of the
audio/video (“skip” link)?
22 — Is it possible to link to a specific part of
the video?
23 — Do we avoid hidden fees/processing costs
and show the final amount up front?
24 — Can customers purchase an item or a
variant if it’s temporarily out of stock?
25 — Do we suggest email notification if an
item is unavailable?
26 — Do we allow users to copy URL/jump to a
particular portion of the page?
27 — Do we keep disabled buttons focusable
and show hints or help on tap/click/tab?

03 / 06
PROVIDING A
WAY OUT
28 — Do we display a distribution of values to
avoid dead ends (Airbnb pricing graph)?
29 — In a list view, is it easy to find the cheapest,
earliest, latest, best-rated etc. options?
30 — Do we include the option “Any” by
default for each of the filters used?
31 — Can users easily reset their filters
selection (“Reset all”)?
32 — Do we display a number of available
options for every defined filter?
33 — Do we keep all sorting and filter settings
on refresh?
34 — Do we avoid blocking the entire UI on
every new added filter?
35 — For tables, do we allow users to display
all columns/rows if they want to?
36 — Do we allow users to move columns around
when comparing features in a table?

04 / 06
PROVIDING A
WAY OUT
37 — For sliders, do we use steppers (+/-) and
text input fields for more precise input?

38 — Do we complement or replace long

<select> menus with autocomplete?

39 — In onboarding, do we provide useful

templates and example content?

40 — For complex input, do we allow users to

save input and continue later?

41 — Can we persist a user’s data on

refresh and never ever lose it?

42 — For 2-factor-auth, can we complement the

SMS option with QR, app, email?

43 — Do we really need CAPTCHA, or can we use

honeypot technique/time traps instead?

44 — Is it easy to adjust privacy settings

(revoke consent, modify permissions)?

05 / 06
PROVIDING A
WAY OUT
45 — Do we allow users to download their
data (orders, projects, etc.)?

46 — Do users have an option to restore an

account (or plan/subscription) within
30 days?

47 — Do users have an option to snooze

emails or notifications (for 24/48/72h)?

06 / 06
MEOW! THANKS FOR
BEING SMASHING.
Twitter: @smashingmag
Books, Magazine: www.smashingmagazine.com
Workshops & Conferences: www.smashingconf.com
Compliled and curated by Vitaly Friedman, 2012–2023.

Get a full PDF

(printed + eBook): www.smashed.by/ux-cards
MORE UX CHECKLISTS IN

Ag
video rowing
desig library on
n pat
and U terns
X