Tag: UserExperience

UX Tools For Better Thinking

On By twobenchesIn emergency lane, picnic siteLeave a comment

UX Tools For Better Thinking (https://untools.co), a wonderful collection of tools and frameworks to help you solve design problems, make better decisions, resolve conflicts and communicate better — with templates, sheets and useful resources, all neatly put together in one single place by Adam Amran.

Also highly recommended: Playbook For Universal Design (https://lnkd.in/eyXKNJ2D), a fantastic little helper with inclusive design methods for UX workshops, with practical guidelines on how to accommodate participants with diverse abilities — and each method includes step-by-step guidelines, video introductions, facilitating guides, materials and PDF/Powerpoint templates.

Quite a goldmine to keep nearby, neatly put together and maintained by Dagny Valgeirsdottir, Astrid Kofod Trudslev and Maria Væver Olsen.

Useful resources:

UX Methods and Projects (Airtable), maintained by Vernon Fowler
https://lnkd.in/eAHaiaSm

Library of Visual Frameworks, by Dave Gray
https://lnkd.in/eMAP3BS4

Hyperisland UX Methods Resource Kit
https://lnkd.in/eshvKWuK

18F Method Cards
https://methods.18f.gov/

How To Design Better UX Workshops, by Slava Shestopalov
https://lnkd.in/dtmQgT7X

Useful Resources to Find UX Methods, by Stéphanie Walter
https://lnkd.in/e5j6-2yy

Comprehensive Guide To UX Methods and Deliverables, by Fabricio Teixeira
https://lnkd.in/eKsgvCYM

Vitaly Friedman on LinkedIn

AI interaction design patterns

On By twobenchesIn picnic siteLeave a comment

AI Interaction Design Patterns (https://www.shapeof.ai), a fantastic (!) living catalog of emerging design patterns, heuristics, anti-patterns and real-life examples that shape the experience of AI — from identifiers and wayfinding to prompts, tuners and trust indicators. Incredible project by incredible Emily Campbell. 👏🏼 👏🏽 👏🏾

Probably one of the most underrated yet impactful design patterns for AI interfaces is the ability to tune AI experience. This could show itself as a style lenses or temperature knobs — little tools to help users request a personalized output easier. E.g. Sad ↔ Happy, Concrete ↔ Abstract, Creative ↔ Precise.

Another much-needed feature is scoping. Users should be able to scope their inquiry to a particular domain, knowledge source or even a set of videos or PDFs that a user is studying. That’s one of the features that would make output less generic and much more specific without having to write a long text prompt.

And: the AI output shouldn’t be bulky nor static. Users should be able to granularly iterate or revise little bits of it — e.g. by asking for sources of specific statements, or diverging from one view to another, or manipulating small parts of an image or a video.

We can go way beyond a text prompt alone. And it’s absolutely fantastic to see emerging design patterns that attempt to make interactions with AI smarter, more precise and more helpful.

💎 Design Patterns For AI Interfaces

AI Interaction Design Patterns, by Emily Campbell
https://www.shapeof.ai

AI Design Patterns Catalogue, by Maggie Appleton
https://lnkd.in/ebAp9Sb8

Language Model Sketchbook, by Maggie Appleton
https://lnkd.in/eXfxFk9w

Style Lenses For AI Generation, by Amelia Wattenberger
https://lnkd.in/e-SJis23

AI Search Experience Design Patterns, by Daley Wilhelm
https://lnkd.in/eMZAayb7

Accordion Editing and Apple Picking Patterns For AI, by Sarah Gibbons, Tarun Mugunthan, Jakob Nielsen
https://lnkd.in/e_mhUwnu

UX For AI, by Greg Nudelman
https://www.uxforai.com/

🗃️ Useful Resources

Why Chatbots Are Not the Future, by Amelia Wattenberger
https://lnkd.in/dmAzqdqx

The Rise Of The AI Model Designer, by Paz Perez
https://lnkd.in/eb7SHcVz

Usability Problem With Prompt-Driven AI, by Tom Cleary
https://lnkd.in/enkBJuzf

AI Prompt Framing, by Raluca Budiu, Feifei Liu, Amy Zhang, Emma Cionca
https://lnkd.in/eFVgrPRt

Designing For AI (Library), by Luke Wroblewski
https://lnkd.in/eHkxhgdt

AI Design Patterns and UX Toolkits, by yours truly Vitaly Friedman
https://lnkd.in/eCEXVvAG

Vitaly Friedman on LinkedIn

FAQ

On By twobenchesIn picnic siteLeave a comment

No website can escape the curse of FAQs. Even seemingly simple products eventually grow roots as the user base expands. Sadly, the web is not a particularly friendly place (https://lnkd.in/eN59qczy), and so users have all kinds of doubts, objections, questions and concerns — and they need to be addressed.

But instead of setting up an FAQ page, what if we show answers where users actually expect to find them? For a product page, we gather all the critical details and show them next to the price. Taxes and fees, delivery times, shipping costs, returns policy, payment options — and display them as prominently and clearly as possible.

FAQs often duplicate content and pollute search. The questions format makes it difficult to scan a page quickly. They get outdated as customer’s questions change frequently. They must be actively managed. Every piece of content needs an owner, but it’s difficult to assign an owner to an FAQ page spanning multiple topics.

🗂️ Design patterns to address user’s questions:

✅ Show important answers where users naturally look for them.
✅ Replace FAQ with help hubs, based on topics and user’s tasks.
✅ Replace the questions format with keywords-focused cards.
✅ Include the link to the help hub in the footer of each page.
✅ Set up guides or wizards to navigate users to right answers.

✅ Use autocomplete to help users get to the right page faster.
✅ Set up separate pages for critical questions with longer answers.
✅ Track quality with a “Did this answer your question?” prompt.
✅ Establish a regular content review for most used help pages.

Break down the pieces of content and show important details where people naturally look for them. Finding answers this way might be much more efficient than scouting a never-ending list of nested FAQ sections.

Useful Resources:

Design Patterns For Better FAQ’s, by yours truly
https://lnkd.in/eFqSav6h

FAQ’s: Why We Don’t Have Them, Gov.uk, by Sarah Wintershttps://lnkd.in/eSGiHSsW

Why FAQ Pages Deliver A Bad Experience, by Paula Taylor
https://lnkd.in/eJVSVdRT

Vitaly Friedman on LinkedIn

On By twobenchesIn emergency lane, picnic siteLeave a comment

“How We Brainstorm And Choose UX Ideas” (+ Miro template) (https://lnkd.in/eN32hH2x), a practical guide by Booking.com on how to run a rapid UX ideation session with silent brainstorming and “How Might We” (HMW) statements — by clustering data points into themes, reframing each theme and then prioritizing impactful ideas. Shared by Evan Karageorgos, Tori Holmes, Alexandre Benitah.

Booking.com UX Ideation Template (Miro)
https://lnkd.in/eipdgPuC (password: bookingcom)

🚫 Ideas shouldn’t come from assumptions but UX research.
✅ Study past research and conduct a new study if needed.
✅ Cluster data in user needs, business goals, competitive insights.
✅ Best ideas emerge at the intersections of these 3 pillars.
✅ Cluster all data points into themes, prioritize with colors.

✅ Reframe each theme as a “How Might We” (HMW) statement.
✅ Start with the problems (or insights) you’ve uncovered.
✅ Focus on the desired outcomes, rather than symptoms.
✅ Collect and group ideas by relevance for every theme.
✅ Prioritize and visualize ideas with visuals and storytelling.

Many brainstorming sessions are an avalanche of unstructured ideas, based on hunches and assumptions. Just like in design work we need constraints to be intentional in our decisions, we need at least some structure to mold realistic and viable ideas.

I absolutely love the idea of frame the perspective through the lens of ideation clusters: user needs, business problems and insights. Reframing emerging themes as “How-Might-We”-statements is a neat way to help teams focus on a specific problem at hand and a desired outcome.

A simple but very helpful approach — without too much rigidity but just enough structure to generate, prioritize and eventually visualize effective ideas with the entire team. Invite non-designers in the sessions as well, and I wouldn’t be surprised how much value a 2h session might deliver.

Useful resources:

The Rules of Productive Brainstorming, by Slava Shestopalov
https://lnkd.in/eyYZjAz3

On “How Might We” Questions, by Maria Rosala, NN/g
https://lnkd.in/ejDnmsRr

Ideation for Everyday Design Challenges, by Aurora Harley, NN/g
https://lnkd.in/emGtnMyy

Brainstorming Exercises for Introverts, by Allison Press
https://lnkd.in/eta6YsFJ

How To Run Successful Product Design Workshops, by Gustavs Cirulis, Cindy Chang
https://lnkd.in/eMtX-xwD

Whiteboard Templates For Brainstorming, by Zvonimir Juranko
https://lnkd.in/eRDJm4Ea

Useful Miro Templates For UX Designers, by yours truly
https://lnkd.in/eQVxM_Nq

Vitaly Friedman on LinkedIn

Design Systems For Digital Publications

On By twobenchesIn picnic siteLeave a comment

Design Systems For Digital Publications (+ Figma Kits). With examples of public design systems to report news and publish scholarly content — from NewsKit and The Economist to JSTOR and Wikipedia ↓

NewsKit Design System, by Geri Reid, Luke Finch, Marco Vanali, Daniel Georgiev
Docs: https://lnkd.in/e3BufA8n
Figma kit: https://lnkd.in/ebFDScga
Onboarding Figma kit: https://lnkd.in/eVNENMXD

NRK Norway
Docs: https://lnkd.in/e3NV86Kc
Figma kit: https://lnkd.in/e5FZSi4E

Codex Wikipedia, by Wikimedia
Docs: https://lnkd.in/emA4su93
Figma kit: https://lnkd.in/emA4su93

Schibsted Design System, by Nathalie Kåvin, Andreas Lewandowski, ann axelsson
Docs: https://lnkd.in/eVH5bChr
Figma kit: https://lnkd.in/et368Nmq

JSTOR’s design system
Docs: https://pharos.jstor.org/

The Economist
Docs: https://lnkd.in/eBaz_DNT
Visual style guide (PDF): https://lnkd.in/ege9wiFZ
Maps style guide (PDF): https://lnkd.in/ecvKc3_2

The Washington Post Design System
Docs: https://lnkd.in/e3rxCihG
Figma: https://lnkd.in/eeeyGUxJ

The Guardian (style guide)
Docs: https://lnkd.in/e-qPNKrC

Many of these design systems have practical guidelines around editorial, tone and voice, onboarding, infographics, maps, motion design and third-party advertising, which is quite rare in most design systems. You’ll probably explore and discover quite a few gems here and there.

Vitaly Friedman on LinkedIn

Designing For Edge Cases and Exceptions

On By twobenchesIn picnic siteLeave a comment

Practical design guidelines to prevent dead-ends, lock-outs and other UX failures.

🚫 People are never edge cases; “average” users don’t exist.
✅ Exceptions will occur eventually, it’s just a matter of time.
✅ To prevent failure, we need to explore unhappy paths early.
✅ Design full UI stack: blank, loading, partial, error, ideal states.
✅ Design defaults deliberately to prevent slips and mistakes.

✅ Start by designing the core flow, then scrutinize every part of it.
✅ Allow users to override validators, or add an option manually.
✅ Design for incompatibility: contradicting filters, prefs, settings.
🚫 Avoid generic error messages: they are often main blockers.
✅ Suggest presets, templates, starter kits for quick recovery.

✅ Design extreme scales: extra long/short, wide/tall, offline/slow.
✅ Design irreversible actions, e.g. Delete, Forget, Cancel, Exit.
✅ Allow users to undo critical actions for some period of time.
✅ Design a recovery UX due to delays, lock-outs, missing data.
✅ Accessibility is a reliable way to ensure design resilience.

Good design paves happy paths for everyone, but also casts a wide safety net when things go sideways. I love to explore unhappy paths by setting up a dedicated design review to discover exceptions proactively. It can be helpful to also ask AI tooling to come up with alternate scenarios.

Once we start discussing exceptions, we start thinking outside of the box. We have to actively challenge generic expectations, stereotypes and assumptions that we as designers typically embed in our work, often unconsciously. And to me, that’s one of the most valuable assets of such discussions.

And: whenever possible, flag any mentions of average users in your design discussions. Such people don’t exist, and often it’s merely an aggregated average of assumptions and hunches. Nothing stress tests your UX better then testing it in realistic conditions with realistic data sets with real people.

Useful resources:

How To Fix A Bad User Interface, by Scott Hurff
https://lnkd.in/ecj6PGPU

How To Design Edge Cases, by Tanner Christensen
https://lnkd.in/ecs3kr8z

How To Find Edge Cases In UX, by Edward Chechique
https://lnkd.in/e2pfqqen

Just About Everyone Is an Edge Case, by Kevin Ferris
https://lnkd.in/eDdUVHyj

Edge Cases In UX, by Krisztina Szerovay
https://lnkd.in/eM2Xynba

Recommended books:

– Design For Real Life, by Sara Wachter-Boettcher, Eric Meyer
– The End of Average, by Todd Rose
– Think Like a UX Researcher, by David Travis, Philip Hodgson
– Mismatch: How Inclusion Shapes Design, by Kat Holmes

Vitaly Friedman on LinkedIn

A wise designer’s insights

On By twobenchesIn drivethruLeave a comment
  • You’re never bad at something, you’re just new to it.
  • Pull your ideas apart. In order to truly validate your hypothesis, you need to test your framework against others that are different enough to get meaningful user feedback. Sometimes you need to exaggerate those differences in your designs so they’re visible to the untrained eye.
  • Whenever there is an argument between two ideas, find the third idea.
  • Simplicity is repeatedly saying no to almost everything.
  • Antoine de Saint-Exupéry said that “perfection is achieved not when there is nothing more to add, but when there is nothing left to take away”.
  • Train your eye to spot redundancy. Look around your screen, find elements that are serving a similar purpose. Either pull them apart, group them closer together, or simply merge them into one. That’s how you move closer to simplicity.
  • Create space for the eyes to pause. Consuming visual information is a choreography of the eye. You can dictate that rhythm by inserting the right pauses and white space in your designs. The pixels you don’t use are as important as the ones you do.
  • If you’re trying to explain what your product/feature does and your find yourself using the words “and” or “also” halfway through the sentence, something is wrong. It might be trying to do too many things for too many people.
  • Learning to frame your ideas is learning to see. The exercise of looking at a design (whether finished or unfinished) and being able to rationalize why it looks the way it does is one of the most powerful tools on a designer’s belt.
  • There are hundreds of different ways to frame your designs before you share them: with a conceptual name, a short sentence, a moodboard, a story, a video, a poem, a metaphor, a drawing, a framework, a datapoint, a powerful quote—you name it. Trust your intuition and find the format that ‘feels right’ for each context and audience.
  • When you present your work, stop describing what’s on the screen. Talk about how that experience will help users. Talk about how it will help reach business goals. Talk about what inspired you to arrive at that solution. Talk about anything other than giving people the unrewarding “real estate tour”, where you describe exactly what they are already seeing on screen. Design the experience you want your audience to have.
  • Choose consistency over intensity. Consistency compounds. Consistency makes things last.
  • Proofread everything once more.
  • While the vast majority of the work we do as digital product designers is incredibly systematic, it is when we break the system that we are able to make our products more memorable, relatable, and special. Knowing the rules is important, but knowing to break them is even more.
  • Know when and why to break the system. Rationalize to yourself first why you are deciding not to follow the rules in this particular point of your product experience. You’ll want to have a strong, rational case when you start sharing those ideas with your team.
  • Flip things upside down. What if you completely changed the background color now? What if you made the type 10x bigger? What if you shortened content in 90%? What if you reverse the order of your flow? Those are the types of questions that lead to delightful and unexpected results.
  • It’s ok to detach instances every now and then.
  • Designers who are generalists tend to be more successful when breaking the system to create unexpected experience moments. When you’re thinking about all aspects of the experience —UX, copy, motion, visuals— you have more control over making it all work together to deliver those magical moments.
  • No user will remember your design system. They will remember the experiences your product enabled them to have.
  • Designing is changing. Most people become designers because they believe in the power of making things better around them. They believe in change: that it is possible to improve things so they can better serve humans, nature, and humanity.
  • Design is a team sport. Projects change, products get redesigned over time, jobs come and go. People, and the memories they create together, stay.
  • Ignore titles. Introduce yourself without saying yours. This will flatten the conversation and make sure people are heard because they have something relevant to say, not because of their seniority.
  • Criticize in private, praise in public. You will get way better results when you elevate good behavior than when you punish bad behavior.
  • Stop asking for a seat at the table, or to be involved in certain conversations. The so called “table” doesn’t exist. Instead, find ways to add so much value that no one will forget to invite you next time an important conversation is happening.
  • Elevate others. Celebrate others.

Quotes by Fabricio Teixeira

Running design critiques

On By twobenchesIn emergency lane, garage, picnic siteLeave a comment

“How We Run Design Critiques At Figma” (https://lnkd.in/eERQmRnY), an honest case study by Noah Levin with helpful techniques and templates to run more effective and friendly design critiques.

Most critiques are an avalanche of unstructured opinions.

Run successful design critiques


✅ Good critiques are inspiring, and give you a plan of action.
✅ Critiques work best with 2–6 people in the room.
✅ Explain the problem before showing any work.
✅ Reiterate previous findings, decisions and research.

✅ Explain how far you are: 30%, 60% or 90% done.
✅ Explain what kind of feedback you are looking for.
✅ No Keynote/Powerpoint: Figma link + Observation mode.
✅ Assign a note-taker to capture key points (Google Doc).
✅ Show what you want to show: feedback is shaped by that.

Critique formats

🎡 Round-the-room: everyone voices their feedback (2min / person). 
🍿 Popcorn: freeform comments for flowing conversation.
🥁 Jams: for early explorations with brainstorms, group sketching.
🫱🏻‍🫲🏾 Pair design: for deep collaboration on a problem (small groups).
🤫 Silent critiques: for a large volume of written, structured feedback.
📋 Paper print-out: for complex flows and reviewing more at once.
📣 FYI critiques: for sharing context and invite feedback later.

Design critiques are about applying critical thinking. It’s about how well a current iteration of design does what it’s trying to do. However, designers alone often don’t have the full picture. Don’t necessarily reserve critiques to design teams only: invite developers and stakeholders and PMs for early feedback.

Don’t ask what people think — ask how well the design tackles a specific problem. And probably the most important thing is to enable a flowing conversations. Invite everyone to ask, to doubt, to scrutinize, but stay on point and gather structured feedback: that’s when good critiques emerge.

Useful resources

Practical Design Critique Guide, by Darrin Henein
https://lnkd.in/ey_cGKuc

Mastering Design Critiques, by Jonny Czar
https://lnkd.in/e_BYwNwf

Anti-Behavior in Design Critiques, and How To Handle Them, by Ben Crothers
https://lnkd.in/e4UrpsPs

Figma and Miro Templates

Design Critique Meetings Guide (Figma), by Overflow
https://lnkd.in/eS6_Vqc8

Design Critique Template (Figma), by Janus Tiu
https://lnkd.in/edzhC4Mw

Design Critique Meeting (Figma), by Rodrigo Alas
https://lnkd.in/eppC4TFk

Design Critique Meeting Agenda (Figma), by Tony Murphy
https://lnkd.in/e8bMqqcq

Design Critique Playground Template (Miro), by Miroslava Jovicic
https://lnkd.in/eryJShRd

How to run better design critiques

from Vitaly Friedman on LinkedIn

UX for older adults

On By twobenchesIn emergency lane, picnic siteLeave a comment

Guidelines For Designing For Older Adults

  • Avoid disappearing messages: let users close them.
  • Avoid long, fine drag gestures and precision.
  • Avoid floating labels and use static field labels instead.
  • Don’t rely on icons alone: add descriptive labels.
  • Ask for explicit confirmation for destructive actions.
  • Add a “Back” link in addition to browser’s “Back” button.
  • In forms, present one question or one topic per screen.
  • Use sufficient contrast (particularly shades of blue/purple and yellow/green can be hard to distinguish).
  • Make error messages helpful and forgiving.

Useful Resources

From: Vitaly Friedman, Designing For Older Adults