Design Patterns For Building User’s Trust

Design Patterns For Building User’s Trust (https://lnkd.in/eEJngtVv), a fantastic (!) catalog of design patterns to help teams design trustworthy services that work for people — with advantages, drawbacks, limitations and examples for each, from AI to privacy. A wonderful repository, neatly put together by fine folks at IF.

In the noisy and polluted world today, trust doesn’t come for free. It doesn’t emerge by default. It must be earned and meticulously preserved — by treating customers with respect, securing their data, respecting their privacy and asking only for what’s absolutely necessary.

Also worth exploring:

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

AI × Design Toolkit (Worksheets + PDF), by Nadia Piet
https://lnkd.in/eJEkCu2p

People + AI Guidebook and Design Patterns, by Google
https://lnkd.in/em_pXYe2

Human-AI Interaction Guidelines, by Microsoft
https://lnkd.in/g_Nsrrxq

Responsible and Ethical AI Practices, by Microsoft
https://lnkd.in/ekQsw_9u

AI-Driven Design (free eBook, PDF), by Joël van Bodegraven
Chapter 1: https://lnkd.in/eChHVQ7u
All chapters: https://lnkd.in/eNUif6cd

AI + Design Toolkit (Miro), by Corinne Schillizzi
https://lnkd.in/ebZSv47s

Design Guidelines for AI, by IBM
https://lnkd.in/eH39gXrq

AI Conversational Cookbook (PDF), by Thomas W.
Article: https://lnkd.in/ec_GvKPp
PDF: https://lnkd.in/exC2z-ju

Privacy UX: Design Patterns and Guidelines, by Vitaly Friedman
https://lnkd.in/dN8yce2

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

The future isn’t chatbots. It’s far more exciting but also challenging. It’s full of ethical and legal concerns, much-needed regulation and efforts to reduce the environmental impact of AI. And: we need to learn how to earn user’s trust with more respectful and better designed AI interfaces.

---

Vitaly Friedman on LinkedIn

AI interaction design patterns

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

Design Systems For Digital Publications

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

Design System Component Checklist

New Design System Component Checklist (+ Flowcharts) (https://lnkd.in/e-6z6YAS), a practical approach to document a design system contribution process in Figma — with tokens, states, types, properties, variants, use cases and everything else to consider before launching a new component. By Wart Burggraaf.

Figma template: https://lnkd.in/eTQ6zeff

There is of course no universal checklist for every design system. Your own release process will shape the steps to take and tasks to complete before a component launches. Customize the template for your needs and integrate in your process to track progress and make sure the process is being used.

New Component Flowcharts

Additionally, you might need contribution guidelines or a new component flowchart to describe your contribution or release process visually:

Blocks: https://lnkd.in/eqTjAdw8
Boston Scientific Design System: https://lnkd.in/e9ti5zrG (docs: https://lnkd.in/eUXKsJBj)
Github: https://lnkd.in/eihFFxzV
Gov.uk: https://lnkd.in/eUB7BiTv
Just Eat Takeaway: https://lnkd.in/eJFaskkm
NHS: https://lnkd.in/eeQ43YND
Nordhealth: https://lnkd.in/epuiejCz
Vanilla: https://lnkd.in/ePVSai_y via Brad Frost
Zalando: https://lnkd.in/eH_mYtzm

Decision tree template: https://lnkd.in/e4j3gqfe

Useful resources:

Design System Contribution Template (Figma), by Chad Bergman
https://lnkd.in/eiZ5PdF4

How To Launch Design System Components (+ Figma Template), by Rama Krushna Behera
Article: https://lnkd.in/ezPq2hQp
Free Figma template: https://lnkd.in/eaxPexwf

Design System Checklist and Worksheet PDF, by Nathan Curtis
https://lnkd.in/eTUusGcw

Design System Process Cheatsheet (Figjam), by Knapsack
https://lnkd.in/eqmNzWEa

Spotify Contribution Process, by Josh Mateo, Brendon Manwaring
https://lnkd.in/eygpxwbV

Defining Design System Contributions, by Nathan Curtis
https://lnkd.in/eDx5VsBY

Supercharge Your Design System Contribution Model, by Mark B.
https://lnkd.in/ecydSXBC

Post by Vitaly Friedman on LinkedIn

Accessibility-First UI Components

Accessibility-First UI Components (https://lnkd.in/eN9c_jdd), a fantastic example of an accessibility-first library and design system, with 40 ready-to-use components for complex tables, data grids, forms, navigation, drag-and-drop and status updates.

With close attention to internationalization, keyboard and touch accessibility out of the box! A part of the redesigned Spectrum Design System (https://spectrum.adobe.com), and an absolutely fantastic effort by the wonderful Adobe team.

Useful resources:

Accessibility: https://lnkd.in/ekq2q7Zb
Autism: https://lnkd.in/ekujAteM
Colorblindness: https://lnkd.in/eqjvPgSZ
Color contrast: hhttps://lnkd.in/ecWS4ue7
Dyscalculia: https://lnkd.in/e8wyMWp4
Dyslexia: https://lnkd.in/ei9mncR7
Ethical design: https://lnkd.in/eiPdeZcB
Legibility: https://lnkd.in/eEarXzD8
Left-Handed Users: https://lnkd.in/eWyzRdy5
LGBTQI: https://lnkd.in/eumCiYrk
Mental Health: https://lnkd.in/eEaXjs9x
Older Adults: https://lnkd.in/e54f2FT2
Screen readers: https://lnkd.in/eaviMFkf
Sustainability: https://lnkd.in/etGZbrk9
Target sizes: https://lnkd.in/ePuc3mbJ
Templates: https://lnkd.in/ey3ua5b7

Vitaly Friedman on LinkedIn

Helsinki Design System

Helsinki Design System (https://hds.hel.fi), a wonderful design system by the City of Helsinki, focused on accessibility and form design —  with design guidelines, do’s and don’ts and design principles. A wonderful example of a design system to refer to.

When looking for accessible design guidelines, public services are usually the first references I turn to. Statistical offices, employment agencies, cities and localities and governments. Below are a few that might be helpful — but you might need a translation every now and again.

🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scottish Government Design System (based on Gov.uk)
https://lnkd.in/eu-yAmMj

🇨🇦 City of Calgary, Canada Design System
https://lnkd.in/eE83r-QH

🇳🇴 Oslo Design System
Manual: https://lnkd.in/eQ7pumvg
Design System: https://lnkd.in/eeeaCFXP

🇬🇧 UK Office for National Statistics
https://lnkd.in/eEJrcymD

🇸🇪 Swedish Public Employment Service
https://lnkd.in/eS28HQqZ

🇨🇦 City of Winnipeg, Canada Design System
https://lnkd.in/eb6NZxNb

🇩🇰 Denmark Design System
https://designsystem.dk/

🏥 Bonus: Nordhealth, For Healthcare Applications
https://nordhealth.design

Vitaly Friedman on LinkedIn

Design system links

Design System Database (Docs + Figma Kits). With less-known design systems for large organizations, governments and complex systems. Share with your design systems friends ↓

🗃️ DS Database, by Ilya Greben
https://designsystems.surf

🇧🇪 Belgian Design Systems, curated by Geoffroy Delobel
https://designsystems.be

🇧🇷 Brazilian Design Systems, by Bruna Bites
https://lnkd.in/ekw4jCV5

🇳🇱 Dutch Design Systems
https://lnkd.in/e5d6Fdt2

🇫🇮 Finnish Design Systems, by Ariel Salminen
https://lnkd.in/evvgSFfk

🇫🇷 French Design Systems, by Jules Mahé, Juliette Bauret, Marie-Aline Millot, Sisley Roche, Victor Pedraza
https://designsystems.fr

🇮🇸 Icelandic Design Systems
https://lnkd.in/eCMCSpYm

🇳🇴 Norwegian Design Systems, by Ronny Siikaluoma
https://lnkd.in/e5MHQXZx

🇵🇹 Portuguese Design Systems, by Ruben Ferreira Duarte
https://dxd.pt

🇸🇪 Swedish Design Systems, by Tiago Almeida
https://lnkd.in/eUJHWRzH

🏛️ Governments Design Systems (+ Figma kits)
https://lnkd.in/eZ-5T6qU

🏭 Enterprise Design Systems (+ Figma Kits)
https://lnkd.in/eGyP_f27

EdTech Design Systems
🇩🇰 Aarhus University: https://delphinus.au.dk/
🇫🇮 Aalto University: https://brand.aalto.fi/ds/
🇺🇸 Indiana University: https://rivet.iu.edu/

FinTech Design Systems
Wise: https://lnkd.in/ePwHXAmV
Ant: https://ant.design/
Ethr: https://lnkd.in/eSTzcN7V

Healthcare Design Systems
NHS: https://lnkd.in/ex7PwT5w
Nordhealth: https://nordhealth.design
GE Edison: https://lnkd.in/e9n2sP4Y

🌎 Design Systems Figma Kits, by Josh Cusick
https://lnkd.in/eXXZMx3D

Vitaly Friedman on LinkedIn

Design Patterns For… Almost Everything

UI components and design patterns, from dashboards and design systems to data visualization and presentation decks — all in one single post, from my bookmarks ↓

– All interface components: https://component.gallery, by Iain Bean
– AI design patterns: https://lnkd.in/eshEKYiv (currently down)
– Book covers: https://lnkd.in/dtCh_5Qk, by Ben Pieratt, Eric Jacobsen
– Covers/CV: https://lnkd.in/eAJ5vqup
– Dark Mode: https://lnkd.in/eqUdi_yy, by Cai Cardenas
– Dashboards: https://lnkd.in/ed6Rr_sC, by Benjamin Bach
– Data visualization: https://lnkd.in/eJvViEaa, by Yan Holtz
– Deceptive patterns to avoid: https://lnkd.in/eYW9WGTk, by Harry Brignull, Mark Leiser, Cristiana Santos, Kosha Doshi
– Design concepts: https://lnkd.in/ebAp9Sb8, by Maggie Appleton
– Design systems: https://lnkd.in/eXXZMx3D, by Josh Cusick
– Email: https://emaillove.com, by Andrew King
– Ethical design: https://humanebydesign.com, by Jon Yablonski
– Fonts: https://fontsinuse.com, by Florian Hardwig
– Footers: https://www.footer.design, by Benten Woodring, Matt Cram, Devin Fountain, Fons Mans
– Games: https://lnkd.in/eYcrRY45
– Hover states: https://www.hoverstat.es, by Mike Guppy, Daniel Powell
– In-house branding: https://lnkd.in/ey_b9nwB
– Little details: https://lnkd.in/eGZ6vn-7, by Floris Dekker
– Localization: https://lnkd.in/eaySNFGa, by James Offer
– Logos: https://www.logggos.club/
– Maps: https://lnkd.in/e6rTSZh8, by Michael Gaigg
– Marketing and copywriting: https://swiped.co/
– One page designs: https://onepagelove.com, by Rob Hope
– Open Graph images: https://lnkd.in/evkF5Qmv
– Patterns and textures: https://patternclub.io, by BriefBox
– Personal sites: https://personalsit.es
– Presentation decks: https://deck.gallery, by Muharrem Ş.
– Privacy: https://lnkd.in/emCkmNVi, by Michael Colesky, Jaap-Henk Hoepman et al.
– Respectful design: https://lnkd.in/e93JH78P
– Sustainability: https://lowwwcarbon.com, by Nick Lewis
– Spatial design: https://lnkd.in/enDUkrVW, by Arun Venkatesan
– Video reels: https://www.showreelz.com, by Ales Nesetril
– Visual design: https://lnkd.in/eZMgjuGY, by Veerle Pieters
– Visual identity: https://lnkd.in/eMrBJ-Ye, by Sahkyo
– Whimsical websites: https://whimsical.club, by Max Böck

From: Vitaly Friedman on LinkedIn

Service patterns

A service pattern is step or stage of a service that’s similar or repeated across different journeys. It considers the things a user interacts with, and all of the things that make it happen behind the scenes.

Service patterns help us to:

• Create consistent experiences for our users between different journeys, creating familiarity and user confidence
• Bring design teams closer to align and share knowledge
• Provide a starting point for designing steps in new journeys based on existing knowledge
• Help us be more efficient, repeatable and scalable
• Help us consider re-using building blocks for a service ie API’s, data, systems, people, legal.

Jeanette Clemens

Key benefits of reusable components

• We can build consistently and focus on workflows and logic, not web forms and list items
• We can reuse code instead of roping in a developer
• We can maintain our code by seeing our patterns in one place, define elements in our application, and keep redundancy to a minimum

MailChimp Pattern Library