Smashing Magazine

Every UI component, no matter if it’s an accordion, a hamburger navigation, a data table, or a carousel, brings along its unique challenges. Inventing a new solution to every problem takes time, and very 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.

Meet Interface Design Patterns Checklists, a deck of 166 cards with common questions to ask when tackling a common interface challenge — carousel, table, date picker, autocomplete, filtering, search, configurator, slider, timeline, map, web forms, testimonials, onboarding, pricing plan, authentication and many others. Created to help us all keep track of the things we need to consider to design better interfaces, faster. Check the preview. (PDF, 825KB)

You’ll get:

• PDF with 166 checklist cards on everything from hamburger navigation and carousels to web forms and tables, carefully curated and designed,
• Practical examples and guidelines (400 slides),
• Editable text file to adjust for your needs,
• Life-time access to the deck, updated regularly.

Meet the deck of 166 checklist cards with common questions to ask when tackling any interface challenge. Created to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, a good way to not forget anything critical, and avoid costly mistakes down the line.

Beautifully designed by our dear illustrator Ricardo Gimenes and jam-packed with everything you need to keep in mind when designing UI components.

Table of Contents

• Designing For Touch Checklist
  
  • Are all our icons large enough to avoid rage taps/clicks (50×50px)?
  • Can users double tap on the same spot to undo/restore actions?
  • Have we tested for frequency of rage clicks/taps?
  • ...and 23 more questions.
• Accordion Checklist
  
  • What icon do we choose to indicate expansion?
  • Should expanded section collapse automatically?
  • Should the user be scrolled automatically when expanded?
  • ...and 11 more questions.
• Navigation Checklist
  
  • Do drop-downs appear/disappear on hover, tap/click, or both?
  • Do nav items appear in a full page/partial overlay or slide-in?
  • Can we split the nav vertically for sub-menus on mobile?
  • ...and 27 more questions.
• Hamburger Menu Checklist
  
  • Can we avoid a hamburger icon and show navigation as is?
  • What happens when the user opens both search and hamburger?
  • Do we expose critical navigation by default on desktop/mobile?
  • ...and 20 more questions.
• Filtering Checklist
  
  • Do we expose popular or relevant filters by default?
  • Do we display the number of expected results for each filter?
  • Do we apply filters automatically or manually on “Apply” button?
  • ...and 22 more questions.
• Sorting Checklist
  
  • Do we repeat sorting at the bottom of the content list?
  • Do we include the “Sort by” label separately from the buttons/dropdown?
  • Does the default sorting reflect the diversity of all major product types?
  • ...and 29 more questions.
• Search Autocomplete Checklist
  
  • Do we surface frequent hits, popular searches, products or categories at the top of autosuggestions?
  • At what characater do we start displaying autosuggestions?
  • Do we use look-ahead pattern for search queries?
  • ...and 30 more questions.
• Carousels Checklist
  
  • Can we display thumbnails or a grid instead of a carousel?
  • Is there a way to pause a carousel if it’s auto-rotating?
  • How do we choose the sequence of slides?
  • ...and 29 more questions.
• Tables Checklist
  
  • Do we add steppers to navigate through columns or rows predictably?
  • Do we highlight the cell, row or column on user’s tap/click?
  • With rows as cards on mobile, do we expose relevant data for comparison?
  • ...and 25 more questions.
• Pricing Plans Checklist
  
  • How many features do we want to display per plan?
  • Do we want to allow customers to switch currency (€/$/£)?
  • Can we avoid requiring credit card data for the free trial period?
  • ...and 48 more questions.
• Sliders Checklist
  
  • Do we provide a text input fallback for precise input?
  • Are there any values on a slider that shouldn’t be accepting?
  • Should users be able to “lock” some values?
  • ...and 16 more questions.
• Date Pickers Checklist
  
  • What presets (‘prev day’/’current day’) do we need for faster navigation?
  • Do we use dots color coding for different rates or days?
  • How do we avoid displaying unavailable dates or zero-results?
  • ...and 17 more questions.
• Configurators Checklist
  
  • What’s the entry point to the configurator?
  • Should the user automatically move to the next step when finished?
  • For every step, do we explain and highlight dependencies?
  • ...and 31 more questions.
• Feature Comparison Checklist
  
  • Can users switch to see only differences/similarities/all?
  • Can the user move columns left and right?
  • Should we ask customers to choose preferred attributes?
  • ...and 24 more questions.
• Timelines Checklist
  
  • How do we expose/highlight critical events (e.g. now/coming up next)?
  • Should some events or time segments be available/fixed at all times?
  • Do we communicate changes over time with an underlying histogram?
  • ...and 21 more questions.
• Schedule And Calendars Checklist
  
  • Do we provide quick jumps between tracks?
  • Should we consider flipping the timing header by 90 degrees?
  • Do we display what’s happening now and coming up next?
  • ...and 21 more questions.
• Maps Checklist
  
  • Do we provide zooming? How many levels of depth will zoom provide?
  • Would an autocomplete search help users find information faster?
  • For charts, can we flip axis to make use of available space?
  • ...and 23 more questions.
• Seating Plans Checklist
  
  • What kinds of pricing tiers and discounted tickets (senior, student) do we have?
  • Do we have any planes or floors that users need to navigate between?
  • Do we calculate and display an experience score for each seat?
  • ...and 23 more questions.
• Privacy Checklist
  
  • Can we group user data according to low/medium/high priority?
  • Can we gradually request more user permissions when we need them?
  • Do we ask for permissions only if we are likely to get them?
  • ...and 41 more questions.
• Onboarding Checklist
  
  • Can we avoid intro tours, tooltips, wizards and slideshows as they are usually skipped?
  • Do we use empty state to indicate our features?
  • When is the right timing to show a particular feature?
  • ...and 12 more questions.
• Reviews and Testimonials Checklist
  
  • Can we group testimonials by a feature/impact and highlight them together?
  • Do we highlight the number of testimonials/reviews prominently?
  • Do we display name, photo, title, age, location, role, company, brand logo?
  • ...and 33 more questions.
• Web Forms Checklist
  
  • Will we be using floating labels? If so, are they accessible?
  • For a country selector, do we display some countries as frequently used?
  • Do we show the number of errors above the "Submit" button and in the tab title as a prefix?
  • ...and 73 more questions.
• Donation Form Checklist
  
  • Do we include any testimonials or stories next to the donation form?
  • What suggested donation amounts do we display, and how many?
  • Which types of donations do we have: one-off, monthly, quarterly, annually?
  • ...and 29 more questions.
• Authentication Checklist
  
  • What password requirements do we want/need to implement?
  • Do we really need CAPTCHA, or can we use honeypot/time traps instead?
  • Do we limit the frequency of password recovery attempts?
  • ...and 31 more questions.
• Product Page Checklist
  
  • What layout do we use for the page (tabs, accordions, one long page, floating bar)?
  • Do we display the final price (incl. standard shipping, taxes, payment fees, currency)?
  • What do we display when an item is out of stock (notification via SMS/email)?
  • ...and 73 more questions.
• Video Player Checklist
  
  • How do we optimize for precise input and fast-forwards (keyboard, buttons)?
  • Do we use preview clips, popularity bar, key moments preview?
  • Do we persist the position of the video track on refresh?
  • ...and 30 more questions.

About the Author

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems. Get in touch.