The document provides checklists for designing various user interface elements for touchscreens, including accordions, navigation, hamburger menus, filtering, and carousels. Some key recommendations are to prioritize critical elements, minimize taps needed to complete tasks, ensure elements are large enough for imprecise touch, consider one-handed use, avoid hidden content, and automatically apply filters for quick interactions. Testing designs using "accuracy dots" that represent touch sizes is also recommended.

1. Smart Interface
Design Patterns,
The Checklists
Curated by Vitaly Friedman @ April 2020
From Smashing Magazine (and cats) with love.

2. T
o
t
W
S
01
The Checklists
Designing
For Touch

3. Thumbs drive most interactions
on mobile screens. Usually we
touch the screen with one thumb.
We use hands interchangeably.
Thumb-Driven
Design
Steven Hoober, “Design for Fingers, Touch, and People”, March, 2017.

4. Primary content at the center.
Secondary actions along the top
and bottom edges (e.g. as tabs).
Tertiary functions behind
menus, in one of the corners.
Design Around
Priorities
Steven Hoober, “Design for Fingers, Touch, and People”, March, 2017.

5. A set of representative touch
sizes placed onto the real-size
mock-up. They give adequate
sizes for planning around touch
(in)accuracy.
Test With
Accuracy Dots
4ourth Mobile Touch Overlay, http://4ourth.com/TouchOverlay/

6. Touch Design Checklist
01 — Input is never precise: are hit targets at least 48×48px?
02 — Are icons on sliders, filters, drop-downs large enough?
03 — Do we expose critical navigation at the bottom on mobile?
04 — Are critical CTAs always floating at the bottom on mobile?
05 — Are tooltips displayed above the pin (if there is space)?
06 — Have we tested for frequency of rage clicks/taps?
07 — Can users tap on the same spot to undo actions?
08 — Do we increase tap areas on imprecise taps?
09 — Have we measure time needed to complete a task on mobile?
10 — Do we have at most 5 tabs at the bottom on mobile?
11 — How do we maximize the speed of users to get from A to B?
12 — Do we remove parallax and autoplay for slow phones?

7. Designing For Touch
01 — Phones are getting cheaper but not better.
02 — Performance constraints pose design limitations.
03 — Consider network/memory-aware interfaces.
04 — Mobile interactions are short but numerous.
05 — Consider budget of <30sec for standalone tasks.
06 — Larger devices prompt longer interactions.
07 — Test thumb-driven designs with accuracy dots.
08 — One-handed grip and thumb taps matter most.
09 — Input is always imprecise due to inaccurate taps.
10 — Group icons well; for tiny targets, undos matter.
Summary

8. Accordions02
The Checklists

14. Accordion Design Checklist
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 empty bar?
08 — Should expanded section collapse automatically?
09 — What if there isn’t enough space to display all items?
10 — Should accordion contain a link to category’s main page?
11 — Should the user be scrolled automatically when expanded?
12 — Do we include the “expand all / collapse all” functionality?
13 — Do we keep the state of an accordion on reload?

15. Accordions
01 — Use chevron or plus to indicate expansion.
02 — Icon maps well with the direction of expansion.
03 — Chevron changes direction (top/down).
04 — Plus changes to close/minus.
05 — Place the icon left-aligned or right-aligned.
06 — Entire bar should act as expansion.
07 — Icons should be large enough for comfortable tapping.
08 — Category’s main page is listed in a drop-down.
09 — Expanded state could collapse automatically.
Summary

16. Navigation03
The Checklists

19. ↬ Ada case study, Daniel Diggle, Albion, https://www.danieldiggle.com/ada.php

23. Navigation Design Checklist
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 search box to increase searches?
05 — Do we always display some navigation to raise engagement?
06 — Do we use “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 drop-downs appear/disappear on hover, tap/click, or both?
10 — If drop-downs disappear automatically, when exactly it happens?
11 — If we use a hover delay in drop-downs, how long is it?
12 — If a search icon is used, how does search box appear when prompted?

24. Navigation Design Checklist
13 — Do we list category’s main page in a drop-down?
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)?
19 — Have we considered using search with autocomplete instead?
20 — Do we use a 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-drop-downs appear/disappear on hover, tap or both?
24 — Do we group mega-drop-down sections as cards/links on mobile?

25. Navigation Design Checklist
25 — Do we use icons to display differences between sections?
26 — Can we split the nav vertically for sub-menus on mobile?
27 — Can users tap on the same spot to open/close 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?

26. Navigation
01 — First define priorities for navigation.
02 — Never hide critical navigation.
03 — Consider splitting nav vertically for sub-menus.
04 — You might not need more than 2 levels of navigation.
05 — Consider bottom tabs for important navigation.
06 — Turn breadcrumbs into floating buttons or text.
07 — Slide in navigation items with small navigation.
08 — Display as much as you can for rich navigation.
09 — Collapse navigation when it makes sense.
Summary

27. Hamburger04
The Checklists

28. ↬ Menu Icons, Alex Münch, https://twitter.com/alexmuench/status/1090550334286692352

34. Hamburger Design Checklist
01 — Can we avoid a hamburger icon and show navigation as is?
02 — If not, what icon do we choose to indicate navigation?
03 — Is the icon + padding large enough for comfortable tapping?
04 — Will the icon be at top left/right, bottom left/right or floating?
05 — Can we push the icon down by placing logo on the top?
06 — What happens when the user clicks/taps on the icon?
07 — Will nav appear as full page/partial overlay, accordion or slide-in?
08 — If we use slide-in, do they appear above or below the header?
09 — How will the icon change on tap or on click?
10 — Will we have some sort of animation or transition on click?
11 — What happens when the user opens both search and hamburger?
12 — Do we expose critical navigation by default on desktop/mobile?
13 — Can users tap on the same spot to open/close navigation?

35. Hamburger
01 — Consider replacing “hamburger” with “menu”.
02 — Always keep the “close” button on the same spot.
03 — Sliding-in, overlay, takeover are all familiar to users.
04 — Consider placing the icon at the bottom.
05 — If on top, consider pushing the icon further down.
06 — Don’t expect more traffic from hidden items.
07 — Don’t hide navigation on desktop: it’s used as anchors.
Summary

36. Filtering05
The Checklists

43. Filtering Design Checklist
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 + 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 we have some sort of animation or transition on click?
08 — 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?
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 drop-downs and use only buttons/chips + toggles?

44. Filtering Design Checklist
13 — For complex filters, do we provide search within filters?
14 — Do we use icons to explain differences 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 confirmation (“Apply”) (yes, for overlays)?
18 — How do we communicate already selected filters?
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 warning appear in the UI?
23 — Do we allow customers to reset all filters quickly, at once?
24 — Are filters (or filters button) floating on scroll on mobile/desktop?
25 — Can users tap on the same spot to open/close filters?

45. Summary
Filtering
01 — Consider sidebar filtering as last resort.
02 — Place button either floating or in the bottom bar.
03 — For quick filtering, try slide-in tabs at the bottom.
04 — Curtain navigation might help for content-heavy sites.
05 — Consider tags for filters instead of sections.
06 — Use iconography only if differences are clear.
07 — Design for the thumb: tappable area for filters matters.
08 — Auto-apply filters if displayed on a product list page.
09 — Wait for a manual “apply” action if displayed in a modal.

46. Carousels06
The Checklists

52. Carousel Design Checklist
The Fundamentals
01 — Can we display slides instead of a carousel?
02 — How do we indicate current slide?
03 — Do we display a slice of upcoming slides?
04 — How do we indicate how many slides we have?
05 — What happens when user hovers over a slide?
06 — What happens when user hovers over the progress indicators?
07 — Do we support tap and swipe gestures on mobile?
08 — How many items do we display on mobile vs. desktop?
09 — Do we use auto-rotation, and how fast will it be?
10 — How do we choose the sequence of slides?
11 — How large will the carousel be on mobile vs. desktop?

53. Summary
Carousels
01 — Choose the sequence of slides carefully.
02 — Most important slides always come first.
03 — Slides shouldn’t rotate too quickly (5–7s).
04 — Pause auto-rotation on hover, stop on interaction.
05 — Try to avoid auto-rotation on mobile.
06 — Always support swipe gestures on mobile.
07 — Always show a slice of the following slide.
08 — Auto-detect contrast for arrows/thumbnails.
09 — Provide information scent for available slides.
10 — Works best as an image gallery and on product pages.

54. Tables07
The Checklists

58. Joe Winter, https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6

59. Banking App, Petras Nargela, https://dribbble.com/shots/6803518-Banking-App-Home-Insights

60. Cflow, https://flairdigital.co/cflow

61. Tables Design Checklist
01 — Do we really need to display this table as 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 keeping 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 data sets)?
10 — Do we have any hover actions, inline editing, sorting, search, filtering?
11 — Do we highlight the cell, row or column on user’s tap/click?
12 — Do we enlarge the selected row on tap/click for easy scanning?

62. Tables Design Checklist
13 — Do we need to display more details on tap/click?
14 — Do we display details in a modal, 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 drop-down (col)?
17 — With rows as cards, do we expose relevant data for comparison?
18 — Did we consider transforming the table into a data grid?
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?

63. Tables Design Checklist
25 — Do we allow for a multi-selection of 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 minimal width of columns/rows?

64. Summary
Tables
01 — Start with columns that matter, then add more.
02 — Allow users to choose columns they want to see.
03 — Keep important headers floating.
04 — Enable focus on columns/rows on tap/hover.
05 — Scale up a column/row on tap to increase hit targets.
06 — Switch between various views for small/large screens.
07 — Tilt headings to win on horizontal space.
08 — Rearranging table is an option, e.g. to cards/charts/timelines.

65. Sliders08
The Checklists

72. Video Player Checklist
Interface Challenges
01 — How do you design the thumb, the track, the controls?
02 — How do you display/hide controls, and when?
03 — How do you optimize for precise input and fast-forwards?
04 — How do you keep a slider easy to use on mobile?
05 — How do you design hover vs. tap interaction?
06 — How do you keep position fixed on refresh?
07 — How do you link to specific parts of the video?
08 — Do we use preview clips, popularity bar, key moments preview?
09 — How do you deal with subtitles + lang, position, size, color?
10 — How do you design the scale of the slider?
11 — Is the UI and controls fully accessible?
12 — What happens if the video is outside of the view?

73. Sliders Design Checklist
Interface Challenges
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?

74. Sliders Design Checklist
Interface Challenges
11 — How do we we indicate availability to avoid dead ends?
12 — What if the user taps on an area between two thumbs?
13 — Are there any values on a slider that shouldn’t be accepted?
14 — Should the user be able to restore 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?

75. Summary
Sliders
01 — Sliders are great when there are many options.
02 — Sliders encourage exploration, not precision.
03 — Sliders usually need (horizontal) space.
04 — Wide track, large thumb, generous padding.
05 — Display outcome in real-time.
06 — Smooth, continuous feedback matters.
07 — Thumb doesn’t really need iconography.
08 — Algorithmic scale for tick marks instead of linear.
09 — Having a text input fallback is usually a good idea.

76. Date Pickers09
The Checklists

81. Date Picker Design Checklist
The Fundamentals
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 pre-selected values?
05 — Should we include ‘prev day’/’current day’/’next day’ nav?
06 — How do we design the navigation between months and years?
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?
10 — Do we use dots color coding for different rates?
11 — Is date picker the right pattern to use for date selection?

82. Date Picker Design Checklist
The Fundamentals
12 — How do we highlight a selected date range?
13 — Do we display a weekly/monthly/daily view by default?
14 — Should the user be able to type in a date in the input field?
15 — Should user only select pre-defined values?
16 — Should the date-picker overlay appear? And if yes, when?
17 — Should the date picker contain default pre-populated values? ?
18 — Should we display availability, price, etc.?
19 — Should the week run from Mon–Sun or Sun–Sat?
20 — How do we avoid displaying unavailable dates or zero-results?
21 — Is a date picker the right pattern to use for date selection?

83. Summary
Date Pickers
01 — Date input: <3 taps, date-range input: <6 taps.
02 — Seamless flow between inputs triggered automatically.
03 — Use forgiving input to “safeguard” manual input.
04 — Allow “smart” input if possible and avoid “no results”.
05 — Carefully consider pre-selected/default values.
06 — Persist data after page refresh.
07 — Add a mini-stepper for quick jumps.
08 — Expose critical details prominently.
09 — Consider switching monthly and weekly views.
10 — Sometimes typing is better than <select>-drop-down.

84. Configurators10
The Checklists

91. Configurators Design Checklist
Interface Challenges
01 — Are we designing for inspiration or customization, or both?
02 — What’s the entry point to the configurator?
03 — How many pre-made presets, and how to define them?
04 — Do we provide recommendations/labels with presets?
05 — Do we ask for custom preferences/use filters to guide users?
06 — Is the product always visible, on mobile/desktop?
07 — Do we always display current price?
08 — Do we use a 3D view, and is it accessible?
09 — Are we using drag’n’drop functionality?
10 — How do we design navigation, with pins or prev/next pattern?
11 — Do we need to integrate search or filtering?

92. Configurators Design Checklist
Interface Challenges
12 — Is it possible to jump from the current step to a previous one?
13 — How do we highlight current step?
14 — How do we highlight already finished steps?
15 — Is it clear how to undo a change/feature?
16 — How do we design adding/removing choice (color, icon, overlay)?
17 — Next step is never empty, and contains a smart default value?
18 — Should the user automatically move to the next step when finished?
19 — For every step, do we display 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?

93. Configurators Design Checklist
Interface Challenges
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, some options are mutually exclusive?
27 — Is visual feedback for the product preview instant on 3G?
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 chat bot or conversational UI?

94. Summary
Configurators
01 — Highlight the product, not the steps.
02 — Carefully consider presets and baselines.
03 — Design for short interactions (60s or less).
04 — Allow for prev/next/specific jumps between steps.
05 — Consider floating pins to increase engagement.
06 — Design for moving back and forth between steps.
07 — Preload assets to provide real-time feedback.
08 — Consider a slider/carousel to explore options per step.
09 — Prioritize product images above everything else.
10 — Maintain the state but also provide a “Reset” button.

95. Feature
Comparison
11
The Checklists

97. Highlighting the differences

101. Feature Comparison Checklist
Interface Challenges
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 1 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 may a customer add for comparison?
09 — Do we use animation or transitions to display comparison?
10 — Do we display the price (or price development), a link to the
individual product page, ratings, reviews, a thumbnail, the product’s
model name, and price-matching tooltip?

102. Feature Comparison Checklist
Interface Challenges
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 meta data?
14 — Do we highlight columns and rows upon hover or tap?
15 — Can the user move columns left and right?
16 — What if the user compares 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?
20 — Do we suggest a “winner” among the compared products?
21 — Does every action have visual and/or aural feedback?

103. Feature Comparison Checklist
Interface Challenges
22 — Do we display headers sticky as the users scrolls 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 persistently (page refresh/exit)?
26 — Do we include a “Notify about price drop” option for emails?
27 — Is the feature comparison and navigation within accessible?

104. Summary
Feature comparison
01 — Keep the headings and thumbnails floating.
02 — Expose price, ratings, model name, URL, highlights.
03 — Help users filter out “not-good-enough” products fast.
04 — Consistent, comparable attributes matter.
05 — Group and collapse attributes.
06 — Provide “show differences”/“all attributes” views.
07 — Allow customers to prioritize and rank features.
08 — Allow customers to navigate predictably with steppers.
09 — Allow customers to re-arrange columns.
10 — Highlight advantages/disadvantages from reviews.

105. Timelines12
The Checklists

112. Timelines Design Checklist
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)?
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?

113. Timelines Design Checklist
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?
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 metaphors (tree, branches, layers, bubbles)?
24 — With a lot of events, how many do we expose by default (mobile/desktop)?

114. Summary
Timelines
01 — Timelines don’t have to be only horizontal or vertical.
02 — Experiment with circular/snake/organic shapes, too.
03 — Break down the timeline into accordion segments.
04 — Collapse on “calm” times, expand on busy activities.
05 — Collapse more aggressively on narrow screens.
06 — Provide a switch between views (bird/detail view).
07 — For complex timelines, group similar items into tabs.
08 — A tree view might be appropriate for historic contexts.

115. Maps13
The Checklists

124. Maps & Charts Design Checklist
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)?
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?

125. Maps & Charts Design Checklist
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?
19 — Would an autocomplete search help users find information faster?
20 — Should we allow for multi-selection 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 axis to make use of available space?
26 — Technically, how do we minimize the lag when the map is explored?

126. Summary
Maps & Charts
01 — With maps, input is never precise.
02 — Consider a “normalized” presentation of data.
03 — Smart input for maps for forgiving input.
04 — Complement zooming with autosuggest.
05 — Multi-combobox for quicker selection.
06 — Sliders and carousels can help swipe through options.
07 — Large infoboxes probably to be placed at the bottom.
08 — For inline boxes, track available space and adjust.
09 — Allows users to switch between views.
10 — Consider swapping axes for infographics.

127. Seating Plans14
The Checklists

133. Seat Selection Design Checklist
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 cheapest prices in that date range?
05 — Do we have any planes or floors 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 # of seats up front, or can users choose as many seats as they want?
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)?

134. Seat Selection Design Checklist
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?
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” doesn’t come across as “promoted”?
26 — Do we provide zooming? How many levels of depth will zoom provide?

135. Seat Selection Design Checklist
27 — If the tap isn’t accurate enough, can we prompt users to specify intent?
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 degrees/VR views?
32 — If yes, how exactly do users prompt and interact in 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?
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?

136. Summary
Seat Selection
01 — Fidelity matters for choosing position in space.
02 — Include a filter to exclude events without available seats.
03 — “Assistant” is necessary to simplify input.
04 — Suggest “best deals” but explain why they are the best.
05 — Ask how many tickets, budget, flexibility on dates.
06 — Combining maps helps convey big/small picture.
07 — Allow customers to select seats that aren’t in the same row.
08 — Allow users to estimate the perspective.
09 — Provide photos or videos or 3D views of the seating view.

137. Privacy15
The Checklists

138. User Behavior In 2020
Privacy UX
Pop-ups and modals.
Push notifications.
Chat window pop-ups.
Install app prompts.
Importing contacts.
Video auto-play.
Geolocation permission.
GDPR cookie consent.
Block!
Block!
Block!
Block!
Block!
Block!
Block!
Accept!
Advertising banners.
“Turn off ad-blocker!”
Access to camera/photos.
Syncing contacts.
Email input.
Social sign-in.
CAPTCHA.
“I have nothing to hide!”
Block!
Nope!
Block!
Nope!
Cry ;-(
Accept!
Maybe.
Fake!

139. Never ask more than you need.
For their age prompt, Carlsberg
asks only the year of birth, and
ask for month and day only if
necessary to verify that the
customer is 18+ years old.
Ask Only What
Needed, Not More

140. Doubts raise when private
information is required without
an adequate explanation of why
it’s needed. Always consider
“just-in-time”-tooltips.
“Just-In-Time”
Explanations
Claire Barrett, “What does GDPR mean for UX?”, February 2019.
https://uxdesign.cc/what-does-gdpr-mean-for-ux-9b5ecbc51a43

141. Use concise hints and summaries
to explain why and what data is
collected and for how long, and
optimize all privacy-related
details for fast skimming.
Explain What
Is Collected

142. Most interfaces make it difficult
to adjust privacy settings after
providing consent. Set up a
privacy hub that contains all
privacy policies and settings.
(via Martin Wiesemborski)
Set Up A Central
Privacy Hub

143. Never ask for permissions on the
first page load. Let users engage
first and invite them when they
are actually ready to commit. Ask
permissions only when you know
for sure that you’ll receive them.
Ask Permissions
At The Right Time

144. Value of Data
Sarah Jamie Lewis on
Lost in the debate about privacy are the
very real day-to-day battles that we all
face. Employees searching for new jobs
without telling their boss, a partner
considering proposing to their partner,
choosing what information to reveal on a
dating profile. The list is endless.
“

145. Healthy Business MetricsHealthy Business MetricsHealthy Business Metrics Mix
Conversion rate.
Time to repeat purchase.
Recommendation strength.
Time to first share.
Time to first purchase.
Time to first upgrade.
Custom perf metrics.
Life-time value.
Increase!
Increase!
Sales and marketing costs.
Customer support inquiries.
Confusing encounters per visit.
Negative encounters per visit.
Total cost and ratio of returns.
Ratio of negative reviews.
“Marked as spam” signal.
“Turn-around” score.
Privacy Patterns
Reduce!
Increase!
Measure!
Improve!
Reduce!
Reduce!
Reduce!
Improve!
Reduce!
Reduce!
Reduce!
Reduce!
Reduce!
Reduce!

146. Privacy Design Checklist
01 — What user’s 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’s data according to low/medium/high priority?
04 — When are the right time/place in the UI to get “high priority” permissions?
05 — Can we gradually request more user’s permissions when we need them?
06 — Can we never prompt native permission requests automatically (often dismissed)?
07 — Are all permission requests prompted manually 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”?
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 that they collect?
13 — Do we ask only what we absolutely need to know (by default)?

147. Privacy Design Checklist
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 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 (3rd-parties, backups)?
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 “grey” patterns on costs in marketing/support?

148. Privacy Design Checklist
26 — Can we measure conversion without pop-ups/app prompts on a slow weekend?
27 — Do we also measure time-to-repeat-purchase, time-to-share, life-time value?
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 rejecting 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!’)?
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!’)?

149. Privacy Design Checklist
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 notifications, 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 experience (what happens to user’s data)?

150. Privacy Design Patterns
Privacy UX
01 — Translate privacy UX to business vocabulary.
02 — Measure hidden costs and a mix of metrics.
03 — Ask only what you need to know, and not more.
04 — Always provide a way out: no binary input.
05 — Users are very good at finding a way out.
06 — Getting accurate data requires effort.
07 — “Just-in-time” explanations matter.
08 — Group and refine the frequency of notifications.
09 — Group privacy policy in scannable accordions.
10 — Ask for permissions only if you are likely to get them.

151. Kind thanks.
Credits
01 — Screenshots taken with Telestream Screenflow.
02 — Typefaces: Mija by Latinotype, Sentinel by Hoefler & Co.
03 — Cat illustrations by Ricardo Gimenes.
04 — Animations by Guillaume Kurkdjian.
05 — Built on shoulders of giants, the web community.
06 — Made possible with kind support of Smashing Members.

152. The Checklists
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.
URL: www.smashed.by/checklists