Книжная карта по дизайну интерфейсов

1. Как пользоваться

Читать не линейно, а по вопросу:

Не понимаю, почему UI неудобный       -> Norman, Krug, NN/g
Нужно проектировать сценарии          -> About Face, Designing Interfaces
Нужно разложить структуру продукта    -> Information Architecture, Elements of UX
Нужны основы визуала                  -> Universal Principles, Thinking with Type, Grid Systems, Refactoring UI
Нужны формы/слова/ошибки              -> Content Design, Strategic Writing for UX, GOV.UK
Нужна система на продукт              -> Design Systems, Atomic Design
Нужна доступность                     -> Inclusive Components, A Web for Everyone, WCAG
Нужны графики/dashboard               -> Tufte, Storytelling with Data, Stephen Few
Нужно проверить идею                  -> Just Enough Research, Sprint, Lean UX
Нужен сервис целиком                  -> This Is Service Design Doing

2. Фундамент: человек, восприятие, usability

Don Norman — The Design of Everyday Things

Источник: Basic Books

Что дает:

• дизайн как communication между объектом и человеком;
• affordances/signifiers;
• feedback;
• constraints;
• mapping;
• conceptual model;
• error as design failure, not user stupidity.

Что забрать:

Пользователь не должен угадывать, что делать.
Объект должен сам подсказывать действие.
Ошибка часто говорит о плохой модели интерфейса.

Куда в атлас: восприятие, интеракция, аффордансы, ошибки.

Steve Krug — Don't Make Me Think

Источник: sensible.com

Что дает:

• web usability простым языком;
• люди не читают страницы, а сканируют;
• очевидность важнее оригинальности;
• navigation должна быть самообъяснимой;
• usability testing можно делать дешево.

Что забрать:

Если человеку надо думать, что это за элемент и куда он ведет, UI уже проигрывает.

Куда в атлас: визуальная иерархия, navigation, usability, content.

William Lidwell, Kritina Holden, Jill Butler — Universal Principles of Design

Источник: Quarto

Что дает:

• энциклопедию законов и паттернов;
• 80/20, chunking, hierarchy, affordance, consistency, framing, signal-to-noise;
• общий язык между UX, visual, product, cognitive psychology.

Что забрать:

Дизайн — набор повторяющихся законов поведения и восприятия, а не вкусовые решения.

Куда в атлас: все фундаментальные области.

Susan Weinschenk — 100 Things Every Designer Needs to Know About People

Источник: Pearson listing

Что дает:

• поведение, зрение, внимание, память, мотивация;
• полезно для понимания, почему proximity, chunking, progressive disclosure работают.

Что забрать:

Интерфейс должен учитывать ограничения внимания и памяти, а не ожидать рационального идеального пользователя.

Куда в атлас: когнитивные законы, research, hierarchy.

3. Interaction design и UI patterns

Alan Cooper et al. — About Face

Источник: Wiley

Что дает:

• goal-directed design;
• personas as goals, not decorative profiles;
• interaction patterns;
• scenarios;
• conceptual models;
• mobile/touch considerations.

Что забрать:

Проектировать надо не экран, а достижение цели человеком в контексте.

Куда в атлас: продуктовый контекст, интеракция, сценарии.

Jenifer Tidwell, Charles Brewer, Aynne Valencia — Designing Interfaces

Источник: O'Reilly

Что дает:

• каталог UI-паттернов для web/mobile/desktop;
• практические варианты решения типовых задач;
• idea sourcebook для компонентов и взаимодействий.

Что забрать:

Почти любая UI-задача уже имеет несколько зрелых паттернов. Сначала понять паттерн, потом стилизовать.

Куда в атлас: component patterns, navigation, forms, lists, search.

Steve Krug — Rocket Surgery Made Easy

Источник: sensible.com

Что дает:

• практику быстрых usability tests;
• как находить и чинить проблемы без огромной исследовательской машины.

Что забрать:

Лучше регулярно тестировать маленькими порциями, чем спорить месяцами.

Куда в атлас: UX research, usability.

4. Структура продукта, IA, стратегия

Jesse James Garrett — The Elements of User Experience

Источник: jjg.net

Что дает:

• пять слоев UX: strategy, scope, structure, skeleton, surface;
• связь business/user needs с визуальным результатом;
• объяснение, почему UI нельзя начинать с surface.

Что забрать:

Surface — последний слой. Если strategy/scope/structure мутные, красивый surface не спасет.

Куда в атлас: продуктовый контекст, IA, visual system.

Rosenfeld, Morville, Arango — Information Architecture: For the Web and Beyond

Источник: O'Reilly

Что дает:

• organization, labeling, navigation, search, metadata;
• IA как фундамент находимости и понимания;
• методы от исследования до реализации.

Что забрать:

Навигация, поиск и названия — это не подписи в конце, а архитектура продукта.

Куда в атлас: IA, navigation, search, content.

Marc Stickdorn et al. — This Is Service Design Doing

Источник: thisisservicedesigndoing.com

Что дает:

• service design methods;
• workshops;
• journey maps;
• service blueprint;
• implementation thinking.

Что забрать:

Экран — только frontstage. Пользовательский опыт часто ломается backstage-процессом.

Куда в атлас: service design, mobility, finance, support, operations.

5. Исследования, discovery, проверка

Erika Hall — Just Enough Research

Источник: Mule Books

Что дает:

• research как умение задавать хорошие вопросы;
• снижение неизвестности;
• критическое мышление;
• практичные методы для маленьких команд.

Что забрать:

Research нужен не для отчета, а чтобы команда перестала строить продукт на догадках.

Куда в атлас: UX research, product context.

Jake Knapp et al. — Sprint

Источники: Jake Knapp, GV Sprint

Что дает:

• пятидневный процесс: problem -> prototype -> user test;
• быстрый способ проверить рискованную идею до разработки.

Что забрать:

Прототип нужен не чтобы выглядеть готовым, а чтобы получить реакцию до больших затрат.

Куда в атлас: discovery, prototyping, validation.

Jeff Gothelf, Josh Seiden — Lean UX

Источник: Jeff Gothelf books

Что дает:

• hypothesis-driven design;
• cross-functional collaboration;
• learning over deliverables;
• de-risking product decisions.

Что забрать:

Ценность дизайна не в макете, а в проверенном изменении поведения/результата.

Куда в атлас: research, product craft, team process.

6. Визуальный фундамент

Ellen Lupton — Thinking with Type

Источник: Princeton Architectural Press

Что дает:

• шрифты, иерархия, строки, интервалы;
• type as system;
• как буквы, слова и абзацы становятся интерфейсом.

Что забрать:

Типографика — это не выбор красивого шрифта, а управление чтением.

Куда в атлас: typography, hierarchy, content.

Josef Müller-Brockmann — Grid Systems in Graphic Design

Источник: Draw Down Books

Что дает:

• сетка как инструмент порядка;
• модульность;
• alignment;
• композиционная дисциплина.

Что забрать:

Сетка не делает дизайн автоматически хорошим, но защищает от случайности.

Куда в атлас: composition, layout, spacing.

Adam Wathan, Steve Schoger — Refactoring UI

Источник: Refactoring UI

Что дает:

• practical UI for developers;
• hierarchy, spacing, color, shadows, typography;
• как улучшать интерфейс конкретными приемами.

Что забрать:

Дизайн можно улучшать как код: маленькими осознанными рефакторингами.

Куда в атлас: visual hierarchy, spacing, color, developer-facing UI.

7. Контент и UX writing

Sarah Richards / Content Design London — Content Design

Источник: Content Design London

Что дает:

• content as design;
• user needs;
• structure;
• plain language;
• journey mapping in content.

Что забрать:

Писать нужно не то, что компания хочет сказать, а то, что помогает пользователю сделать задачу.

Куда в атлас: content design, service design, forms.

Torrey Podmajersky — Strategic Writing for UX

Источник: O'Reilly

Что дает:

• UX voice strategy;
• UI text patterns;
• words tied to engagement, conversion, retention;
• writing as product behavior.

Что забрать:

Слова в UI — это управляющие элементы, а не подписи после дизайна.

Куда в атлас: UX writing, errors, onboarding, AI UI.

8. Дизайн-системы и компоненты

Alla Kholmatova — Design Systems

Источник: Smashing Magazine

Что дает:

• shared design language;
• patterns, principles, documentation;
• how systems empower teams;
• система как культура, не только библиотека.

Что забрать:

Дизайн-система — это язык решений. Без языка команда производит разнобой.

Куда в атлас: design systems, governance, tokens.

Brad Frost — Atomic Design

Источник: atomicdesign.bradfrost.com

Что дает:

• atoms/molecules/organisms/templates/pages;
• thinking in systems, not pages;
• pattern libraries.

Что забрать:

Компоненты должны проверяться в реальном контексте, а не жить как музей отдельных деталей.

Куда в атлас: components, design systems, frontend.

9. Accessibility и inclusive design

Heydon Pickering — Inclusive Components

Источник: Inclusive Components

Что дает:

• common components through accessibility lens;
• robust patterns;
• how vulnerable users experience UI.

Что забрать:

Компонент считается готовым только когда готово его доступное поведение.

Куда в атлас: accessibility, components, forms, navigation.

Sarah Horton, Whitney Quesenbery — A Web for Everyone

Источник: Apple Books listing

Что дает:

• accessibility through people and universal design;
• practical advice without sacrificing design quality.

Что забрать:

Доступность — это не “для небольшой группы”, а качество интерфейса в разных условиях.

Куда в атлас: accessibility, inclusive design.

Laura Kalbag — Accessibility for Everyone

Источник: accessibilityforeveryone.site

Что дает:

• approachable accessibility foundation;
• free-to-read resource.

Что забрать:

Accessibility начинается с обычных решений: текст, контраст, разметка, клавиатура.

Куда в атлас: accessibility, frontend.

10. Data visualization и dashboards

Edward Tufte — The Visual Display of Quantitative Information

Источник: edwardtufte.com

Что дает:

• data-ink;
• graphical integrity;
• small multiples;
• precision, comparison, density.

Что забрать:

График должен увеличивать понимание данных, а не площадь украшений.

Куда в атлас: data visualization, dashboards.

Cole Nussbaumer Knaflic — Storytelling with Data

Источник: storytellingwithdata.com

Что дает:

• выбрать график;
• убрать clutter;
• сфокусировать внимание;
• добавить annotation;
• story around insight.

Что забрать:

Данные без вопроса и вывода — просто картинка.

Куда в атлас: dashboards, presentations, product analytics.

Stephen Few — Information Dashboard Design

Источник: Perceptual Edge library

Что дает:

• dashboard as at-a-glance monitoring/decision tool;
• perception principles for dashboards;
• common dashboard failures.

Что забрать:

Dashboard должен быть сканируемым рабочим инструментом, а не витриной графиков.

Куда в атлас: dashboards, admin, analytics.

11. Motion и интерактивная графика

Val Head — Designing Interface Animation

Источник: Rosenfeld Media

Что дает:

• animation as communication;
• UI motion patterns;
• when animation helps and when it distracts.

Что забрать:

Motion должен объяснять изменение, а не просто двигаться.

Куда в атлас: motion, behavior.

Rachel Nabors — Animation at Work

Источник: A Book Apart archive/listing

Что дает:

• animation in product and brand;
• motion as part of UX and storytelling.

Что забрать:

Анимация должна иметь роль в продукте: orientation, feedback, progress, delight.

Куда в атлас: motion, brand, visual assets.

12. Сильные сайты и документация вместо книг

Некоторые источники важнее отдельных книг, потому что живут и обновляются.

NN/g

Источник: nngroup.com

Что брать:

• research-backed usability;
• heuristics;
• patterns;
• AI UX;
• visual design;
• forms;
• navigation.

Apple Human Interface Guidelines

Источник: Apple HIG

Что брать:

• platform-native behavior;
• accessibility;
• motion;
• color;
• typography;
• search;
• brand on iOS.

Material Design

Источник: Material 3

Что брать:

• roles;
• components;
• motion;
• responsive;
• expressive research.

GOV.UK Design System

Источник: GOV.UK Design System

Что брать:

• forms;
• errors;
• plain language;
• service clarity;
• accessibility.

IBM Carbon / Shopify Polaris / Atlassian

Источники: Carbon, Polaris, Atlassian

Что брать:

• enterprise/admin patterns;
• empty states;
• tables;
• AI labeling;
• pictograms;
• design-system discipline.

13. Что читать первым

Если нужно быстро прокачать вкус и UI

1. Refactoring UI.
2. Thinking with Type.
3. Universal Principles of Design.
4. NN/g visual hierarchy / gestalt / forms.
5. Apple HIG + Material roles.

Если нужно понять UX как систему

1. The Design of Everyday Things.
2. Don't Make Me Think.
3. The Elements of User Experience.
4. About Face.
5. Information Architecture.

Если нужно строить продукт, а не макеты

1. Just Enough Research.
2. Lean UX.
3. Sprint.
4. This Is Service Design Doing.
5. Design Systems.

Если нужно делать сложные интерфейсы

1. Designing Interfaces.
2. Information Architecture.
3. Inclusive Components.
4. Information Dashboard Design.
5. GOV.UK + Carbon + Polaris.

14. Главный вывод

Книги нужны не для авторитета, а чтобы отделить фундамент от моды.

Мода говорит:

сделай 3D / glass / cards / как Linear / как Apple

Фундамент спрашивает:

что человек делает?
что он должен понять?
что может пойти не так?
как он восстановится?
как это масштабируется?
как это проверить?

Хорошая база растет из второго.