Разработка интерфейсов. Паттерны проектирования

Предисловие к третьему изданию
Как появилась эта книга
ПО — это система
Фокус: проектирование экранного взаимодействия для веб- и мобильных устройств
Что не вошло в третье издание
Кому будет полезна эта книга
Структура книги
Введение и обсуждение модели дизайна
Паттерны
Заключение
Условные обозначения
Благодарности
Паттерны проектирования все еще востребованы
Глава 1. Проектирование для людей
Контекст
Узнайте свою аудиторию
Взаимодействие как диалог
Соотнесите контент и функционал с потребностями аудитории
Уровень подготовки
Интерфейс — лишь средство для достижения целей пользователя
Спросите пользователей
Ценность дизайна: решите правильную проблему, а затем решите ее правильно
Исследование: способы понимания контекста и целей
Прямое наблюдение
Изучение примеров из практики
Опросы
Создание персоны пользователя
Исследования в процессе разработки дизайна — это не маркетинг
Паттерны: познание и поведение, связанные с разработкой интерфейсов
Safe Exploration (Безопасное исследование)
Instant Gratification (Мгновенное вознаграждение)
Satisficing (Разумная достаточность)
Changes in Midstream (Изменения на полпути)
Deferred Choices (Отложенный выбор)
Incremental Construction (Пошаговое построение)
Habituation (Привыкание)
Microbreaks (Микроперерывы)
Spatial Memory (Пространственная память)
Prospective Memory (Проспективная память)
Streamlined Repetition (Организованное повторение)
Keyboard Only (Только клавиатура)
Social Media, Social Proof, and Collaboration (социальные сети, общественное одобрение и сотрудничество)
Заключение
Глава 2. Организация контента: информационная архитектура и структура приложений
Цель
Определение
Проектирование информационного пространства для пользователей
Подход
Разграничение информации и способов ее представления
Принцип ВИСИ
Способы организации и классификации контента
Алфавитный способ
Числовой способ
Хронологический способ
По расположению
Иерархический способ
Категорийный или фасетный способ
Проектирование приложений с преобладанием задач и рабочих процессов
Держите часто используемые инструменты под рукой
Разбейте процесс на несколько шагов
Учитывайте потребности как новичков, так и опытных пользователей
Многоканальность и разнообразие размеров экранов устройств — новая реальность
Отображение данных в виде карточек
Проектирование системы типов страниц
Обзор: показ списка или набора инструментов или опций
Фокус: отображение одиночного объекта
Создание: наличие инструментов для создания объектов
Действие: помощь в выполнении одиночной задачи
Паттерны
Feature, Search, and Browse (Рекомендация, поиск и обзор)
Mobile direct access (Прямой мобильный доступ)
Streams and Feeds (Лента новостей и каналы)
Media Browser (Медиабраузер)
Dashboard (Дашборд)
Canvas Plus Palette (Холст и палитра)
Wizard (Мастер)
Settings Editor (Редактор настроек)
Alternative Views (Альтернативные представления)
Many Workspaces (Несколько рабочих пространств)
Help Systems (Справочные системы)
Tags (Теги)
Заключение
Глава 3. Подскажите дорогу: навигация, указатели и ориентирование
Понимание информации и пространства задач
Указатели
Ориентирование
Навигация
Глобальная навигация
Служебная навигация
Ассоциативная и встроенная навигация
Сопутствующий контент
Теги
Социальные сети
Принципы проектирования
Разделяйте навигационный и визуальный дизайн
Умственная нагрузка
Сокращение расстояний
Навигационные модели
Спицы колеса
Полносвязанность
Многоуровневая, или древовидная, структура
Пошаговая структура
Пирамида
Плоская навигация
Паттерны
Clear Entry Points (Понятные точки входа)
Menu Page (Страница меню)
Pyramid (Пирамида)
Modal Panel (Модальная панель)
Deep Links (Глубокие ссылки)
Escape Hatch (Аварийный люк)
Fat Menus (Полные меню)
Sitemap Footer (Карта сайта в подвале)
Sign-In Tools (Инструменты регистрации)
Progress Indicator (Индикатор хода процесса)
Breadcrumbs (Хлебные крошки)
Annotated Scroll Bar (Полоса прокрутки с примечанием)
Animated Transition (Анимированный переход)
Заключение
Глава 4. Организация элементов на странице
Основные принципы построения макета
Визуальная иерархия
Как сделать так, чтобы элемент выглядел важным?
Четыре важных принципа гештальта
Визуальный поток
Использование динамического отображения
Отзывчивое включение
Прогрессивное раскрытие
Области пользовательского интерфейса
Паттерны
Виды макетов
Деление информации на фрагменты
Visual Framework (Визуальная структура)
Center Stage (Центральная сцена)
Grid of Equals (Сетка равных)
Titled Sections (Именованные разделы)
Module Tabs (Модульные вкладки)
Accordion (Аккордеон)
Collapsible Panels (Сворачиваемые панели)
Movable Panels (Перемещаемые панели)
Глава 5. Визуальный стиль и эстетика
Основы визуального дизайна
Визуальная иерархия
Структура
Цвет
Справочные материалы и ресурсы по теме «Цвет»
Типографика
Удобочитаемость
Эмоциональный отклик
Изображения
Визуальный дизайн для корпоративных приложений
Доступность
Диапазоны визуальных стилей
Скевоморфизм
Иллюстрации
Плоский дизайн
Минимализм
Адаптивный/параметрический дизайн
Заключение
Глава 6. Мобильные интерфейсы
Проблемы и возможности мобильного дизайна
Крошечный экран
Разная ширина экрана
Сенсорные экраны
Сложности при вводе текста
Окружающие условия
Информация о местоположении
Социальное влияние и ограниченное внимание
Как создать хороший мобильный дизайн
1. Выясните, что действительно нужно мобильным пользователям
2. Избавьтесь от всего лишнего
3. Используйте аппаратные возможности устройства
4. Расположите содержимое линейно
5. Оптимизируйте самые частые операции
Несколько полезных примеров
Паттерны
Vertical Stack (Вертикальный стек)
Filmstrip (Фотопленка)
Touch Tools (Инструменты, реагирующие на касание)
Bottom Navigation (Нижняя навигация)
Collections and Cards (Коллекции и карточки)
Infinite List (Бесконечный список)
Generous Borders (Щедрое окаймление)
Loading or Progress Indicators (Индикаторы загрузки или хода процесса)
Richly Connected Apps (Тесно связанные приложения)
Станьте мобильными
Глава 7. Списки
Когда нужны списки
Возвращаясь к информационной архитектуре
Что вы пытаетесь показать?
«Где выводить подробное представление элемента списка, когда пользователь выбирает его?»
«Как выводить графические элементы?»
«Как управлять очень длинным списком?»
Паттерны
Two-Panel Selector or Split View (Двухпанельный селектор, или Раздельный просмотр)
One-Window Drilldown (Погружение в одном окне)
List Inlay (Список со вкладышами)
Cards (Карточки)
Thumbnail Grid (Сетка миниатюр)
Carousel (Карусель)
Pagination (Разбивка на страницы)
Jump to Item (Прыжок к элементу)
Alpha/Numeric Scroller (Алфавитная/числовая полоса прокрутки)
New-Item Row (Строка для нового элемента)
Многообразие списков
Глава 8. За дело! Действия и команды
Касание, смахивание и масштабирование
Вращение и встряхивание
Кнопки
Строки меню
Всплывающие меню
Раскрывающиеся меню
Панели инструментов
Ссылки
Панели действий
Инструменты, доступные при наведении указателя мыши, или ховеры
Однократный и двойной щелчок
Действия с клавиатурой
Сочетания клавиш
Порядок табуляции
Перетаскивание
Ввод команд
Аффорданс
Прямое манипулирование объектами
Паттерны
Button Groups (Группы кнопок)
Hover Tools (Инструменты, доступные при наведении), или Pop-Up Tools (Всплывающие инструменты)
Action Panel (Панель действий)
Prominent «Done» Button (Заметная кнопка «Готово»), или Assumed Next Step (Предполагаемый следующий шаг)
Smart Menu Items (Умные элементы меню)
Preview (Предварительный просмотр)
Spinners (Спиннеры) и Loading Indicators (Индикаторы загрузки)
Cancelability (Возможность отмены)
Multi-Level Undo (Многоуровневая отмена)
Command History (История команд)
Macros (Макрос)
Заключение
Глава 9. Отображение сложных данных
Основы информационной графики
Организационные модели: как организованы данные?
Преаттентивные элементы визуализации: что с чем связано?
Навигация и просмотр: как изучать данные?
Сортировка и перестановка: можно ли изменить порядок данных, чтобы увидеть их по-другому?
Поиск и фильтры: покажите только то, что мне нужно
Фактические данные: как узнать их конкретные значения?
Паттерны
Datatips (Всплывающие данные)
Data Spotlight (Подсветка данных)
Dynamic Queries (Динамические запросы)
Data Brushing (Окрашивание данных)
Multi-Y Graph (График с несколькими осями Y)
Small Multiples (Набор мини-диаграмм)
Возможности визуализации данных
Глава 10. Получение данных от пользователя: формы и элементы управления
Основы дизайна форм
Дизайн форм продолжает развиваться
Что почитать еще
Паттерны
Forgiving Format («Великодушный» формат)
Structured Format (Структурированный формат)
Fill-in-the-Blanks (Заполнение пропусков)
Input Hints (Подсказки при вводе)
Input Prompt (Приглашение к вводу)
Password Strength Meter (Измеритель надежности пароля)
Autocompletion (Автозаполнение)
Dropdown Chooser (Раскрывающийся селектор)
List Builder (Компоновщик списков)
Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение)
Error Messages (Сообщения об ошибках)
Заключение
Глава 11. Системы пользовательского интерфейса и атомарный дизайн
Системы пользовательского интерфейса
Microsoft Fluent — UI-система на основе компонентов
Атомарный дизайн: способ проектирования систем
Обзор
Иерархия атомарного дизайна
Фреймворки пользовательского интерфейса
Обзор
Преимущества
Расцвет UI-фреймворков
Обзор некоторых UI-фреймворков
Заключение
Глава 12. По ту сторону экрана
Состав: интеллектуальные системы
Подключенные устройства
Системы упреждения
Вспомогательные системы
Естественные пользовательские интерфейсы
Заключение
Об авторах
Об иллюстрации на обложке