Smart Interface

Design Patterns,
The Checklists
Curated by Vitaly Friedman @ April 2020
From Smashing Magazine (and cats) with love.
 T
The Checklists
o
01 Designing t
For Touch W

S
Thumb-Driven
Design
Thumbs drive most interactions
on mobile screens. Usually we
touch the screen with one thumb.
We use hands interchangeably.

Steven Hoober, “Design for Fingers, Touch, and People”, March, 2017.
Design Around
Priorities
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.
Steven Hoober, “Design for Fingers, Touch, and People”, March, 2017.
Test With
Accuracy Dots
A set of representative touch
sizes placed onto the real-size
mock-up. They give adequate
sizes for planning around touch
(in)accuracy.
4ourth Mobile Touch Overlay, http://4ourth.com/TouchOverlay/
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?
Designing For Touch

Summary
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.

 The Checklists

02 Accordions
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?
Accordions

Summary
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.

 The Checklists

03 Navigation
↬ Ada case study, Daniel Diggle, Albion, https://www.danieldiggle.com/ada.php
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?
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?
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?
Navigation

Summary
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.

 The Checklists

04 Hamburger
↬ Menu Icons, Alex Münch, https://twitter.com/alexmuench/status/1090550334286692352
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?
Hamburger

Summary
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.

 The Checklists

05 Filtering
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?
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?
Filtering

Summary
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.

 The Checklists

06 Carousels
The Fundamentals

Carousel Design Checklist

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?
Carousels

Summary
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.

 The Checklists

07 Tables
Joe Winter, https://uxdesign.cc/designing-a-complex-table-for-mobile-consumption-nom-7472f7b11fe6
Banking App, Petras Nargela, https://dribbble.com/shots/6803518-Banking-App-Home-Insights
Cflow, https://flairdigital.co/cflow
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?
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?
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?
Tables

Summary
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.

 The Checklists

08 Sliders
Interface Challenges

Video Player Checklist

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?
Interface Challenges

Sliders Design Checklist

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?
Interface Challenges

Sliders Design Checklist

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?
Sliders

Summary
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.

 The Checklists

09 Date Pickers
The Fundamentals

Date Picker Design Checklist

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?
The Fundamentals

Date Picker Design Checklist

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?
Date Pickers

Summary
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.

 The Checklists

10 Configurators
Interface Challenges

Configurators Design Checklist

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?
Interface Challenges

Configurators Design Checklist

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?
Interface Challenges

Configurators Design Checklist

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?
Configurators

Summary
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.

 The Checklists

11 Feature
Comparison
Highlighting the differences
Interface Challenges

Feature Comparison Checklist

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?
Interface Challenges

Feature Comparison Checklist

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?
Interface Challenges

Feature Comparison Checklist

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?
Feature comparison

Summary
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.

 The Checklists

12 Timelines
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?
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)?
Timelines

Summary
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.

 The Checklists

13 Maps
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?
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?
Maps & Charts

Summary
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.

 The Checklists

14 Seating Plans
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)?
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?
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?
Seat Selection

Summary
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.

 The Checklists

15 Privacy
Privacy UX

User Behavior In 2020

Block! Pop-ups and modals. Block! Advertising banners.
Block! Push notifications. Nope! “Turn off ad-blocker!”
Block! Chat window pop-ups. Block! Access to camera/photos.
Block! Install app prompts. Nope! Syncing contacts.
Block! Importing contacts. Fake! Email input.
Block! Video auto-play. Maybe. Social sign-in.
Block! Geolocation permission. Cry ;-( CAPTCHA.
Accept! GDPR cookie consent. Accept! “I have nothing to hide!”
Ask Only What
Needed, Not More
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.
“Just-In-Time”
Explanations
Doubts raise when private
information is required without
an adequate explanation of why
it’s needed. Always consider
“just-in-time”-tooltips.
Claire Barrett, “What does GDPR mean for UX?”, February 2019.
https://uxdesign.cc/what-does-gdpr-mean-for-ux-9b5ecbc51a43
Explain What
Is Collected
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.
Set Up A Central
Privacy Hub
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)
Ask Permissions
At The Right Time
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.
 Sarah Jamie Lewis on

Value of Data

“ 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.
Privacy Patterns

Healthy Business Metrics Mix

Increase! Conversion rate. Measure! Sales and marketing costs.
Reduce! Time to repeat purchase. Reduce! Customer support inquiries.
Improve! Recommendation strength. Reduce! Confusing encounters per visit.
Reduce! Time to first share. Reduce! Negative encounters per visit.
Reduce! Time to first purchase. Reduce! Total cost and ratio of returns.
Reduce! Time to first upgrade. Reduce! Ratio of negative reviews.
Improve! Custom perf metrics. Reduce! “Marked as spam” signal.
Increase! Life-time value. Increase! “Turn-around” score.
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)?
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?
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!’)?
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)?
Privacy UX

Privacy Design Patterns

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.

Credits

Kind thanks.
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.

The Checklists

Meow! Thanks for

being smashing.
URL: www.smashed.by/checklists
Twitter: @smashingmag
Books, Magazine: www.smashingmagazine.com
Workshops & Conferences: www.smashingconf.com
Compliled and curated by Vitaly Friedman, 2012–2020.