Smart Interface Design Checklists Preview

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
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 hamburg-

er 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
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 / 02
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 — For every step, do we need to group
some options to limit scope?
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
MEOW! THANKS FOR
BEING SMASHING.
Twitter: @smashingmag
Books, Magazine: www.smashingmagazine.com
Workshops & Conferences: www.smashingconf.com
Compliled and curated by Vitaly Friedman, 2012–2020.

Smart Interface Design Checklists Preview

Uploaded by

Copyright:

Available Formats

Smart Interface Design Checklists Preview

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Smart Interface Design Checklists Preview

Uploaded by

Copyright:

Available Formats

Dear friends,

Coming up with a new solution for every

Just before starting a project, I would sit down

Each checklist has been curated and refined

07 — Do we want to have any floating buttons

08 — Do we repeat critical calls to action

09 — Do we show tooltips/hints above the

01 — Can we avoid a hamburger icon and

02 — If not, what icon do we choose to

03 — Are the icon and padding large

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

05 — Can we push the icon down a bit by

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

09 — If we use slide-in, does navigation

10 — Will we have some sort of animation

19 — When do we start hiding the hamburg-

01 — Can we just show a grid of images

07 — Are we designing a horizontal, vertical, or

08 — Where do we place prev/next arrows

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

10 — How do we indicate the carousel slide

19 — Can we test and measure the CTR for

28 — How many items do we display on

You might also like