Names in form design

“Sorry, But Your Name Has Invalid Characters.” Things to keep in mind to prevent poor error messages, lock-outs and dead ends — due to false assumptions about names.

✅ People often have multiple full names.
✅ People’s names do change over time.
✅ People don’t always have 1 full name which they go by.
✅ Systems often use different names for the same person.
✅ There are dozens of various naming schemes worldwide.

🚫 Names aren’t always written in a single character set.
🚫 Don’t impose space or character limitations.
🚫 Not everyone has a last name, family name or middle name.
🚫 First names and last names aren’t always different.

✅ Always allow people to type their name as they prefer.
✅ Use “Full name” instead of “First”, “Middle”, “Last” names.
✅ Names may include numbers and punctuation.
✅ Names also include prefixes, suffixes, everything-in-between.
✅ If you must, ask additionally how a user prefers to be addressed.

We shouldn’t make any assumptions about people’s names. There are literally dozens of different naming schemes around the world, and validating any names is usually a dangerous path to take.

Usually it’s done due to security, to prevent SQL injections or similar attacks by submitting malicious data. Yet very often validation rules are overly restrictive, blocking any special characters, including apostrophes and diacritics. And unfortunately, those rules are often wrong, breaking UX for many people.

Review the rules with your engineers. There is no such thing as invalid characters in a person’s name. People whose names break validation aren’t outliers. They are real people with real names that don’t match our validation restrictions.

The way out is easy: accept any name that a user provides, whatever characters they include, and whatever way they choose to type it.

Useful articles:

40 False Assumptions About Names In Interfaces, by Patrick McKenzie
https://lnkd.in/esFQZBch

How To Ask Users For Names, Gov.uk
https://lnkd.in/eYTQutVh

Designing Forms for Gender Diversity and Inclusion, by Sabrina Fonseca
https://lnkd.in/e2UGu9N2


Vitaly Friedman on LinkedIn

Designing for accessibility

“How We’ve Built Accessibility Research at Booking.com” (https://lnkd.in/eq_3zSPJ), a fantastic case study on how to build accessibility practices and inclusive design into UX research from scratch. Kindly put together by Maya Alvarado.

🚫 Don’t rely on automated accessibility testing alone.
✅ Compliance means that a user can use your product.
✅ But it doesn’t mean that it’s a great user experience.
✅ Manual testing makes sure that users meet their goals.

✅ Start by gathering people interested in accessibility.
✅ Document what research was done, where the gaps are.
✅ Include 5–12 users with disabilities in accessibility testing.
✅ Recruit via testing platforms, non-profits, communities.
✅ Add extra $25–$50 depending on disability transportation.

✅ Run a small accessibility initiative around key flows first.
✅ Then tap into critical touch points and research them.
✅ Extend to components, patterns, flows, service design.
✅ Incorporate inclusive sampling into all research projects.
✅ At least 15% of usability testers should have a disability.

Companies often struggle recruiting testers with disabilities. One way to find participants is to reach out to local chapters, local training centers, non-profits and public communities of users with disabilities in your country. Ask admin’s permission to post your research announcement, and it won’t be rejected.

I absolutely love the idea of extending Microsoft’s Inclusive Design Toolkit (https://lnkd.in/eN5J7EkJ) to meet specific user needs of a product. It adds a different dimension to disability considerations which might be less abstract and much easier to relate for the entire organization.

As Maya noted, inclusive design is about building a door that can be opened by anyone and lets everyone in. Accessibility isn’t a checklist — it’s a practice that goes beyond compliance. A practice that involves actual people with actual disabilities throughout all UX research activities.

Useful resources:

A Comprehensive Guide to Accessible UX Research, by Brian Grellmann
https://lnkd.in/eAwDQPGr

Inclusive User Research: Recruiting Participants, by Ela Gorla
https://lnkd.in/ejXXzcwY

Testing With Blind Users: A Cheatsheet, by Slava Shestopalov
https://lnkd.in/exgtBPi2

Mobile Accessibility Research with Screen-Reader Users, by Tanner Kohler
https://lnkd.in/eb5Y36qZ

How To Conduct UX Research With Participants With Disabilities, by Peter McNally
https://lnkd.in/ezVmB_fu

How To Conduct Accessibility UX Research, by AnswerLab
https://lnkd.in/ec2q-fM8


Vitaly Friedman on LinkedIn

Figma checklists

Figma Checklists (https://lnkd.in/enncAgGr), a wonderful little project with actionable guidelines to deliver better quality of Figma components — from layers and layout to properties, style and testing. Suggestions are welcome! Kindly put together and maintained by Javier Cuello. 🙏🏾

Useful resources:

Figma Cheat Sheet For Developers, by Christian Reichart
https://lnkd.in/eghBjrAD

Figma Keyboard Shortcuts Cheatsheet, by Shirley, Xinling Wang
Preview: https://lnkd.in/e2NQxbZd
High resolution PDFs: https://lnkd.in/eeMB74-p

How To Clean Up A Messy Figma File, by yours truly
https://lnkd.in/eFciDnwe


Vitaly Friedman on LinkedIn

Guide To Designing For Mobile (iOS)

A Comprehensive Guide To Designing For Mobile (iOS) (https://lnkd.in/epZiVGnm), a fantastic (!) reference for layout, grid, colors, typography, iconography, components and transitions — all in one single place. Kindly put together and maintained by Anastasia Prokhorova and Vladislav Prokhorov. 👏🏽

Useful resources:

Modern iOS Navigation Patterns, by Frank Rausch
https://lnkd.in/e2Bv23Cm

Layout Grid in Mobile App Design, by Andrii Zhulidin 👽🇺🇦?
https://lnkd.in/di48XZ8C

iOS17 and iPadOS 17 Figma kit, by Apple
https://lnkd.in/eY36CT2P

iOS 17 UI Kit · Variables, by Kevin L.
https://lnkd.in/eeVF-U-e

Mobile Usability: Tap Target Sizes Cheatsheet, by yours truly
https://lnkd.in/ePuc3mbJ

Touch Design for Mobile Interfaces (Book), by Steven Hoober
https://lnkd.in/e4zAjWSX


Vitaly Friedman on LinkedIn

How To Build A User Research Database

How To Build A User Research Database (Notion Template) (https://lnkd.in/e4grtTi7), a practical guide on how to organize research — from the research board in and research plan in Notion to UX research templates and research outcome template. Kindly put together by Odette Jansen BSc MEd. 👏🏽

Notion Repository: https://lnkd.in/ek7aXs9k
Guides and Templates: https://lnkd.in/eKCi5cdU

Odette’s repo is a neat little starter kit to get off the ground quickly. In the past, we were using dozens of spreadsheets and Google Docs along with links to video snippets and reports, and at some point navigating between them and re-finding what was needed was impossible. It all has changed with Notion.

Notion isn’t your only choice though. I’ve seen people using everything from Miro and Figjam to Airtable or dedicated tools to organize research, too. Whatever works well for you is the right tool for you.

Here are a few off-the-shelf UX research tools to explore (in no particular order, and I’m not affiliated with any of them):

Dovetail: https://dovetail.com/
Repo.luhttps://www.repo.lu/
tl;dv: https://tldv.io/
Maze: https://lnkd.in/e6nfCTym
Condens: https://condens.io/
Glean.lyhttps://glean.ly
Aurelius: https://lnkd.in/e9qQc5zk
Productboard: https://lnkd.in/e4WPmB3g
EnjoyHQ: https://lnkd.in/eNfRB_t5

Useful resources:

How To Build Your UX Research Repository (+ Notion template), by Konstantin Escher
https://lnkd.in/ek4ApvZh

User Research Database (Notion template), by Notion
https://lnkd.in/evgmpae9

How To Use Notion To Document UX Research Process, by Sheylla Lima
https://lnkd.in/eJmw2eZP

Atomic Nuggets UX Repository (+ Notion template) (in Portuguese), by Gabriela Bassa
https://lnkd.in/eCMen22F

First 90 Days UX Research Roadmap, by Dhananjay Garg
https://lnkd.in/eTKzPDwW

First 90 Days to Make Impact as a UX Researcher, by Snigdha Diehl
https://lnkd.in/eTgmskZC

How To Build Up UX Research From Scratch (+ Templates), by Ori Dar
https://lnkd.in/e2hZB-qf

———————————-

Vitaly Friedman on LinkedIn

Fix a broken colour palette

How We Fixed Skyscanner’s Broken Color Palette (https://lnkd.in/erqd-yCX), a practical case study on how the Skyscanner team fixed their color palette — along with process, naming, testing and explorations to get there. Neatly put together by Adam Wilson.

✅ Set your base colors: primary, secondary and UI states.
✅ Define core color pairings and extended pairings.
✅ Choose product-specific colors, gradients, patterns.
✅ 4 color groups: neutral, white text, black text, yellow/orange.
🚫 Avoid poetic names: they are difficult to remember and refer to.

✅ Mix black and grey with primary color for a better design fit.
✅ Choose a night color that is slightly lighter than black.
✅ Your colors will need to appear on different backgrounds.
✅ Create color sets with transparency for such cases.

✅ Create tints based on the color contrast against black.
✅ Create shades based on the color contrast against white.
✅ Test for color contrast, colorweakness, colorblindness early.
✅ Double-check the dark yellow problem in your palette.

🌱 Useful resources:

How To Design A Color Palette For Design Systems, by Alex Baranov
https://lnkd.in/epJkT252

How To Set Up Color in Design Systems, by Nathan Curtis
https://lnkd.in/e48aJaGb

How To Create An Accessible Color Palette, by Stéphanie Walter
https://lnkd.in/eUnSTYSM

The “Dark Yellow Problem” In Color Palettes
https://lnkd.in/eS7YqfCf

🪴 Useful case studies

Contentful: https://lnkd.in/e66Rw85K, by Fabian Schultz
Goldman Sachs: https://lnkd.in/e8JQsqnq
Modern Health: https://lnkd.in/ez7xM5xt, by Brian Cleveland
Stripe: https://lnkd.in/enaXpWvD, by Daryl KoopersmithWilson Miner
Wise: https://lnkd.in/eyv8Qh7r, by Stephanie S.
Wish: https://lnkd.in/eGYGa7PK, by Taamannae Taabassum

🍭 Color Palette Generators

Accessible Palette Generator: https://lnkd.in/ejkpyWqZ
Figma Color Palettes: https://lnkd.in/et2zeUjX
Contrast Grid: https://lnkd.in/e6sENdRW
Leonardo: https://leonardocolor.io/
ABC: https://lnkd.in/e7QHC2gx
Stark Figma plugin: https://www.getstark.co/
Primer Prism: https://lnkd.in/ekpTmkkM
Colorbox: https://colorbox.io/
Naming colors: https://lnkd.in/e6jJzRdW
OKLCH Color Converter: https://lnkd.in/esP29Jyj

———————-

Vitaly Friedman on LinkedIn

Running design critiques

“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

Useful Figma Plug Ins

Useful Figma Plugins For Designers. Little Figma helpers that I’ve discovered recently — for managing tables, dates, colors and charts ↓

Real Dates Calendar Generator, by masha sh
Generates real dates for calendars.
https://lnkd.in/dYDAyUg6

Dynamic Table Components, by Natalia Brochero
To make changes to a single table and reuse it across artboards.
https://lnkd.in/djk_xn2g

Color Name Cheat Sheet, by Roman Shamin
Suggests color names for any node
https://lnkd.in/dNd2KyTB

Datavizer, by Amelia Wattenberger
Design and generate charts in Figma from CSV/JSON
https://lnkd.in/diGxaUJi

Magnifier, by Petr Andrianov (via Stéphanie Walter)
Magnifies any part of your design for docs or comments.
https://lnkd.in/eCyP8ihj

Figma Variables Translator, by Valentin Chrétien
Automatically translates your string variables in any language.
https://lnkd.in/dSnuTX9E

Quick table
Copy-paste data from CSV/Excel and generate a clean table.
https://lnkd.in/eKyAVq7j

Batch Styler, by Jan Six
Changes multiple text or color styles at once.
https://lnkd.in/dp8TC8MH

Smart Text Changer, by carter
Bulk change and randomize text with a real-time preview
https://lnkd.in/dGPskAUq

Propstar, by Henrique Gusso
Generates all possible instances of your components in a tidy table.
https://lnkd.in/dk58Us_7

AI Content Filler, by zyhyysh
Generates text or images based on layer names. https://lnkd.in/dTcHvMHK

Semrush Charts Library
A large set of well-documented chart components.
https://lnkd.in/dUgWtwnu

RTL Layout, by Abdelwahab Muhammed
For managing and refinement between LTR- to RTL-layouts.
https://lnkd.in/dtrvxEBV

Autoname, by Hugo Duprez
Renames all layers in a single click.
https://lnkd.in/dugDzGxD

Useful resources:

Low-Fidelity Wireframing Toolkits (Figma, Miro)
https://lnkd.in/duM_zHew

Accessibility Toolkits For Figma
https://lnkd.in/dysTufVH

How To Organize Design Files in Figma (+ Figma kits)
https://lnkd.in/d398Q_9M

Vitaly Friedman on LinkedIn