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 ⦠More about Vitaly
Friedman …
Meet our Smart Interface Design Patterns Checklist Cards, a deck of 100 cards with questions to ask when designing and building any interface component â carousel, hamburger, table, date picker, filtering, autocomplete, configurator, slider, timeline, map, reviews and testimonials, onboarding, pricing plan, authentication, web forms and many others. Check the preview (PDF) and jump to description ↓
Every UI component, no matter if itâs an accordion, a hamburger navigation, a data table, or a carousel, brings along its unique challenges. Coming up with a new solution for every problem takes time, and often itâs really not necessary. We can rely on smart design patterns and usability tests, and ask the right questions ahead of time to avoid issues down the line.
Meet Interface Design Patterns Checklists, a deck of 100 cards with common questions to ask while dealing with any interface challenge â from intricate data tables and web forms to troublesome hamburgers and carousels. Plus, many other components (full list ↓), explored in full detail.
Each checklist has been curated and refined for years by yours truly â all based upon usability sessions, design iterations and A/B tests. Useful for designers & front-end developers to discuss everything a component requires before starting designing or coding.
And if youâd like to dive into design patterns live, attend our upcoming online workshops on Smart Interface Design Patterns, 2020 Edition, where weâll explore 100s of practical examples over 5Ã2.5h live sessions.
About The Checklists
Meet 100 checklist cards with everything you need to tackle any UI challenge â from intricate tables to troublesome carousels. Created to help us all keep track of all the fine little details to design and build better interfaces, faster. Plus, it’s useful to not forget anything critical and avoid costly mistakes down the line. Check the preview.
When working on pretty much any interface problem, we sit down with designers and developers and talk about its design, markup and behavior â using checklists. The deck creates a much-needed sense of alignment, so everyone is one the same page before jumping into design or coding tools.
Beautifully designed by our dear illustrator Ricardo Gimenes, this deck is always by your side â on your desk or on your phone when youâre on the go.
Additionally, you get practical examples, action points and the checklists in a wide resolution (16×9) for reference and presentations.
A little bonus: 400 practical examples, action points and the checklist in 16×9.
Youâll get:
100 checklists cards on everything from carousels to web forms, carefully curated and designed,
Practical examples and action points for your reference in 16×9,
Input is never precise: are hit targets at least 48Ã48px?
Can users tap on the same spot to undo actions?
Do we expose critical navigation at the bottom on mobile?
+
Overall, 14 questions, including:
What icon do we choose to indicate expansion?
Should expanded sections collapse automatically?
Should the user be scrolled automatically when expanded?
+
Overall, 30 questions, including:
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?
+
Overall, 23 questions, including:
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?
+
Overall, 25 questions, including:
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?
+
Overall, 32 questions, including:
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?
Search Autocomplete Checklist
+
Overall, 33 questions, including:
Do we surface frequent hits, popular searches, products or categories at the top of autosuggestions?
On what character do we start displaying autosuggestions?
Do we use a look-ahead pattern for search queries?
+
Overall, 37 questions, including:
Can we just show a grid of images 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?
+
Overall, 28 questions, including:
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?
+
Overall, 51 questions, including:
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?
+
Overall, 19 questions, including:
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?
+
Overall, 20 questions, including:
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?
+
Overall, 33 questions, including:
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?
Feature Comparison Checklist
+
Overall, 27 questions, including:
Can users see only differences, similarities and selected attributes for all products/plans?
Can the user move columns left and right?
Should we ask customers to choose preferred attributes?
+
Overall, 24 questions, including:
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?
Schedule And Calendars Checklist
+
Overall, 25 questions, including:
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?
+
Overall, 26 questions, including:
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?
+
Overall, 23 questions, including:
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?
+
Overall, 44 questions, including:
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?
+
Overall, 15 questions, including:
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?
Reviews and Testimonials Checklist
+
Overall, 36 questions, including:
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?
+
Overall, 76 questions, including:
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?
+
Overall, 32 questions, including:
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?
+
Overall, 34 questions, including:
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?
+
Overall, 76 questions, including:
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)?
+
Overall, 33 questions, including:
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?
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.
âSmart Interface Design Patterns, 2020 Editionâ, Online Workshop with Vitaly Friedman (Sep 22 – Oct 6)
Do you want to dive deeper into the bits and pieces of smart interface design patterns? Weâll be hosting a series of online workshops, in which weâll take a microscopic examination of common interface components and reliable solutions to get them right â both on desktop and on mobile.
Weâll study 100s of hand-picked examples and weâll design interfaces live, from mega-dropdowns and car configurators â all the way to timelines and onboarding. And: weâll be reviewing and providing feedback to each otherâs work. Check all topics and schedule.
The workshop is delivered in five 2.5h long sessions with lots of time for you to ask all your questions. It’s for interface designers, front-end designers and developers whoâd love to be prepared for any challenge coming their way.
Youâll walk away with a toolbox of practical techniques for your product, website, desktop app or a mobile app.
Thank You For Your Support!
We sincerely hope that the insights youâll gain from our little goodies will help you boost your skills while also building wonderful, new friends. A sincere thank you for your kind, ongoing support, patience and generosity â for being smashing, now and ever. â¤ï¸
More Smashing Stuff
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Paul and Alla are some of these people. Have you checked out their books already?
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.
