Smart Interface Design Patterns Checklists (Print + PDF)

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. Jump to table of contents.

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:

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.

Published on September 2022
Tags: Interface Design, Checklists

Print + PDF

$ 39.00

Get Hardcover Print + PDF, with a beautiful card box.
Free worldwide shipping. 100 days money-back-guarantee.

PDF Only

$ 30.00

DRM-free, of course. PDF.
Included with your Smashing Membership.

“This deck of cards has changed the course of my design decisions for the better! A no-brainer!”

Vikas Shetty

Vikas Shetty, UI Designer, Indonesia

About The Cards

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, this deck of checklist cards is always by your side — on your desk or on your phone when you’re on the go.

Smart Interface Design Patterns Checklist Cards

🎉 Team Bundle

Do you want to equip your entire team with the card deck? If you plan to purchase 5 or more decks, you’ll get a friendly 15% discount. Just get in touch with us via help@smashingmagazine.com, and we’ll make it happen.

Print + PDF

$ 39.00

Get Hardcover Print + PDF, with a beautiful card box.
Free worldwide shipping. 100 days money-back-guarantee.

PDF Only

$ 30.00

DRM-free, of course. PDF.
Included with your Smashing Membership.

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.

Disabled Buttons Checklist +

When should the button become disabled?
What happens when the user hovers or taps on the disabled button?
Do we prevent the click via JavaScript by using aria-disabled?
...and 32 more questions.

Inline Validation Checklist +

For every input, do we have exact validation requirements?
What happens when a user refreshes the page?
When editing a field that was invalid, do we validate immediately during data entry?
...and 47 more questions.

Back Button UX Checklist +

Can we make the URL more helpful, structured, and human-readable?
For a sorting direction, does the “Back” button restore the previously set sorting direction?
If a user jumps abruptly on the page, does the “Back” button bring them to the previous spot on the same page?
...and 28 more questions.

Modals Checklist +

When do we absolutely need to interrupt the user (modal)?
Do we want to use a modal for critical notifications?
When do we want to dim the background (modal, lightbox)?
...and 55 more questions.

Mega-Dropdowns Checklist +

How many levels of navigation should be accessible directly from the mega-dropdown?
Do we highlight a selected section (e.g. underlined/background change)?
How do we extend navigation of necessary (e.g. if more items need to be added)?
...and 27 more questions.

Print + PDF

$ 39.00

Get Hardcover Print + PDF, with a beautiful card box.
Free worldwide shipping. 100 days money-back-guarantee.

PDF Only

$ 30.00

DRM-free, of course. PDF.
Included with your Smashing Membership.

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via @smashingmag on Twitter — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country? +: No shipping costs — wherever you are in the world! We ship everywhere, worldwide, via airmail shipping. What you see is what you pay. No ifs or buts.
Delivery times to my country? +: All books are shipped via airmail to keep delivery times as short as possible. You can check the anticipated delivery times for your country.
Is the eBook included with print? +: When you purchase a printed book, you’ll get a friendly discount on the eBook. All eBooks are available in usual formats — PDF, ePUB, and Amazon Kindle.
What payment methods are accepted? +: PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers. (Obviously.)
Is there a money-back guarantee? +: Yes, absolutely! No risk at all — our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back without ifs or buts!
I have a question that is not covered here. +: No worries! Please get in touch with us via the contact form. We would love to help you as soon as we possibly can!