Дизайн для разработчиков 9785446121939, 9781617299476

Table of contents :
Оглавление
Предисловие
Введение
О книге
Кому адресована эта книга
Структура издания
От издательства
Об авторе
Благодарности
Иллюстрация на обложке
Часть I. Основы дизайна
Глава 1. Преодоление разрыва между дизайном и разработкой
1.1. Почему разработчикам полезно знать основы дизайна и проектирования пользовательского опыта
1.1.1. Улучшение взаимодействия и коммуникации
1.1.2. Понимание причин лежащих в основе дизайнерских решений
Формирование эмпатии к целевой аудитории позволяет улучшить пользовательский опыт
Технические решения — это решения, связанные с пользовательским опытом
1.1.3. Написание лучшего кода благодаря пониманию основ визуального дизайна
1.1.4. Более качественный код (и дизайн) благодаря меньшей зависимости от сторонних фреймворков
1.1.5. Пользовательский опыт и разработка
1.2. Путь к пониманию лучшего дизайна и пользовательского опыта
1.2.1. Процесс разработки дизайна рассматриваемый в книге
Основы проектирования пользовательского опыта
Основы визуального дизайна
1.2.2. Профессиональные дизайнеры против умного дизайна
1.2.3. Объединяем все вместе
Резюме
Глава 2. Основные принципы дизайна
2.1. Принципы дизайна
2.1.1. Близость
Избегайте путаницы, размещая несвязанные элементы отдельно друг от друга
Создание легко просматриваемых веб-страниц с помощью принципа близости
Близость: принцип установления взаимосвязей
2.1.2. Выравнивание
Различные способы выравнивания
Комбинирование способов выравнивания
Выравнивание: ключ к созданию порядка
2.1.3. Повторение
Повторение: создание согласованного опыта
Повторение в макете: помощь пользователям в ориентации на сайте
Повторное использование компонентов пользовательского интерфейса для обозначения их функции
Повторение: установление отношений и ориентация пользователей
2.1.4. Контраст
Контраст цветов
Создание контраста с помощью размера
Создание контраста с помощью форм
2.1.5. Баланс
Симметричный баланс
Асимметричный баланс
2.2. Основы дизайна для проектирования пользовательского опыта и не только
Резюме
Часть II. Пользовательский опыт
Глава 3. Основы пользовательского опыта
3.1. Пользовательский опыт не ограничивается визуальным дизайном
3.2. Что такое пользовательский опыт
3.3. Роли специалистов в области UX-проектирования
3.3.1. Исследование пользователей
3.3.2. Проектирование пользовательского опыта
3.3.3. UX-писатели
3.4. Методологии проектирования пользовательского опыта
3.4.1. Дизайн ориентированный на пользователя
3.4.2. Модель «двойного алмаза»
3.5. Углубленное изучение практик проектирования пользовательского опыта
Резюме
Глава 4. Исследование пользователей
4.1. Введение в исследования пользовательских потребностей
4.1.1. Исследование пользователей кажется дорогостоящим однако неудача обходится еще дороже
4.1.2. Сбор исходных данных
4.1.3. Персоны пользователей
4.1.4. Потребности пользователей
4.1.5. Определение целей сайта: согласование пользовательских и бизнес-целей
4.1.6. Постановка SMART-целей
4.2. Стратегии проведения пользовательских исследований
4.2.1. Качественные и количественные исследования
4.2.2. Отношение и поведение пользователя
4.2.3. Методы исследования пользователей
Сортировка карточек
Конкурентный анализ
Фокус-группы
Интервью
Опросы
Юзабилити-тестирование
Неформальные методы исследования
4.2.4. Исследование как непрерывный процесс
Резюме
Глава 5. Проектирование пользовательского опыта
5.1. Информационная архитектура
5.1.1. Картирование сайта
Создание карты сайта
Навигация по сайту и поиск пути
5.1.2. Контент-анализ и аудит
5.2. Пользовательские сценарии и пути
5.2.1. Пользовательские сценарии
5.2.2. Пути пользователей
Создание карты пути пользователя
Создание пути пользователя, испытывающего стресс
5.3. Разработка дизайна сайта и приложения
5.3.1. Создание вайрфреймов
Низкодетализированные вайрфреймы
Вайрфреймы средней степени детализации
Высокодетализированные вайрфреймы
Комбинирование подходов к разработке вайрфреймов
5.3.2. Дизайн пользовательского интерфейса и цветные макеты
5.3.3. Прототипирование
Низкодетализированные прототипы
Высокодетализированные прототипы
Прототипирование как итеративный процесс исследования
Резюме
Часть III. Элементы визуального дизайна
Глава 6. Создание макета и композиция
6.1. Создание структуры сайта
6.2. Использование сетки
6.2.1. Определение сетки
6.2.2. Размеры сетки
6.3. Выбор макета
6.3.1. Использование одноколоночных шаблонов
6.3.2. Распространенные многоколоночные шаблоны
Выбор многоколоночного макета для главной страницы
Выбор многоколоночного макета для подстраниц
Модульная сетка и макет в стиле каменной кладки
6.3.3. Паттерны чтения
Z-образный паттерн
F-образный паттерн
6.4. Использование пустого пространства
6.5. Соображения по поводу отзывчивого дизайна
6.5.1. Разработка дизайна для мобильных устройств
Минимизация и концентрация контента
Разработка дизайна для устройств с сенсорным экраном
Разбивка контента для создания более управляемых потоков задач
Поддержание единства визуального оформления на всех устройствах
6.5.2. Разработка дизайна для многоэкранных и складных устройств
Резюме
Глава 7. Улучшение макета сайта с помощью анимации
7.1. Зачем нужна анимация
7.1.1. Повышение удобства использования
7.1.2. Создание запоминающихся взаимодействий
7.1.3. Использование анимации в качестве украшения вызывающего эмоциональный отклик
7.2. Когда стоит использовать анимацию
7.2.1. Предоставление подсказок для навигации по сайту
7.2.2. Предоставление пользователям обратной связи при их взаимодействии с элементами пользовательского интерфейса
7.2.3. Навигация и переходы между страницами
7.2.4. Указание статуса выполняемой задачи
7.2.5. Думайте на перспективу
7.3. Планирование анимаций
7.3.1. Создание раскадровки
7.4. Технические аспекты анимации
7.4.1. Соображения по поводу производительности
7.4.2. Соображения по поводу доступности
Резюме
Глава 8. Использование типографики на веб-сайте
8.1. Основы типографики
8.1.1. Различие между гарнитурой и шрифтом
8.1.2. Различные классификации шрифтов
Шрифты с засечками
Шрифты без засечек
Рукописные шрифты
Декоративные шрифты
8.1.3. Стили и вес шрифтов
Курсив и наклонное начертание
Вес шрифта
8.2. Выбор шрифта для веб-проекта
8.2.1. Характеристики хорошего веб-шрифта
Что следует учитывать при выборе шрифта
Вариативные шрифты
8.2.2. Сопряжение шрифтов и гарнитур
Использование одного и того же семейства шрифтов
Сочетание шрифтов из различных категорий
Сочетание шрифтов из одной и той же категории
8.2.3. Создание набора параметров шрифта
8.2.4. Задание размеров шрифтов
8.2.5. Создание вертикального ритма
8.2.6. Обеспечение удобочитаемости
Длина строки
Межбуквенный интервал
Упражнение: сопоставление шрифта и передаваемого им настроения
Резюме
Глава 9. Теория цвета
9.1. Терминология теории цвета
9.1.1. Тень оттенок и тональность
9.1.2. Теплые и холодные цвета
9.1.3. Тон насыщенность и светлота
9.2. Цветовой круг
9.2.1. Цветовые отношения
Монохромная цветовая схема
Комплементарная цветовая схема
Аналогичное цветовое сочетание
Триадическая цветовая схема
Расщепленная комплементарная цветовая схема
9.2.2. Изучайте разные примеры использования цветов
9.3. Психология цвета
9.4. Выбор и применение цветовой схемы
9.5. Руководство по выбору и применению цветовой схемы
9.6. Соображения доступности
9.6.1. Тестирование цветового контраста
9.6.2. При обозначении состояния или статуса нельзя полагаться только на цвет
9.7. Цветовые режимы для веб
9.7.1. Режимы RGB и RGBA
9.7.2. Шестнадцатеричные цветовые коды
9.7.3. Режимы HSL и HSLA
9.7.4. Режимы CIE Lab и LCH
9.7.5. Выбор цветового режима
9.8. Несоответствие цветов на разных экранах
Резюме
Глава 10. Построение сайта
10.1. Требования к сайту проекта
10.2. Организация контента с помощью вайрфрейма
10.3. Создание системы сеток и задание расстояний
10.4. Выбор типографики
10.5. Задание вертикального ритма
10.6. Выбор изображений
10.6.1. Использование изображений для задания тона
10.6.2. Наложение текста поверх изображений
10.7. Выбор и применение цветовой палитры
10.8. Завершающие штрихи
10.9. Отзывчивый дизайн
10.9.1. Дизайн сайта для планшета восьмиколоночная сетка
10.9.2. Дизайн сайта для мобильного устройства четырехколоночная сетка
10.9.3. Дизайн по принципу Mobile First
Резюме
Часть IV. После разработки визуального дизайна
Глава 11. Тестирование проверка и итерации
11.1. Цикл проектирования
11.1.1. Замена существующего дизайна
11.1.2. Минимально жизнеспособный продукт
11.1.3. Оценка готовности дизайна к тестированию
11.2. Виды тестирования
11.2.1. Проведение интервью с клиентами
11.2.2. Тестирование в производственной среде
11.2.3. A/B-тестирование
11.2.4. Поэтапное развертывание
11.2.5. Методы первоначального исследования пользователей
11.3. Применение результатов тестирования
Резюме
Глава 12. Решения разработчиков и пользовательский опыт
12.1. Влияние написанного кода
12.1.1. Важность написания качественного HTML-кода
Семантический HTML-код
Последствия использования кода JavaScript вместо HTML и CSS
12.1.2. Производительность и загрузка страниц
12.1.3. Веб-технологии не имеющие кроссбраузерной поддержки
12.2. Продукты ориентированные на разработчиков
Резюме
Приложение. Дополнительные ресурсы
Пользовательский опыт
Структура сетки и макет
Анимация
Типографика
Цвет
Тестирование дизайна

Citation preview

Дизайн для разработчиков СТЕФАНИ СТИМАК Предисловие Аарона Густафсона

2024

Стефани Стимак

Дизайн для разработчиков Перевел с английского С. Черников Научный редактор Василиса Десятова, UX-аналитик компании КРОК ББК 32.973.2-044.4 УДК 004.92



Стимак Стефани

С80 Дизайн для разработчиков. — СПб.: Питер, 2024. — 304 с.: ил. — (Серия «Биб­лиотека программиста»).

ISBN 978-5-4461-2193-9

Дизайнерские решения, принимаемые разработчиками, оказывают существенное влияние на восприятие сайта пользователями. Освоив язык дизайна, вы сможете принимать полноценное участие в создании оформления, сотрудничать с коллегами-дизайнерами и обосновывать выбор тех или иных подходов при создании приложений. Книга раскрывает основные принципы дизайна и особенности пользовательского восприятия, которые должен знать каждый веб-разработчик. Читателю определенно понравится, как автор демонстрирует новые идеи на примерах популярных сайтов и пользовательских интерфейсов. Откройте методы исследования поведения юзеров и научитесь использовать цвет, типографику и верстку для создания удобных и привлекательных веб-интерфейсов. К концу книги вы поймете, что хорошее чувство дизайна действительно является ценным подспорьем для разработчика!

16+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.) Права на издание получены по соглашению с Manning Publications. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги. В книге возможны упоминания организаций, деятельность которых запрещена на территории Российской Федерации, таких как Meta Platforms Inc., Facebook, Instagram и др. Издательство не несет ответственности за доступность материалов, ссылки на которые вы можете найти в этой книге. На момент подготовки книги к изданию все ссылки на интернет-ресурсы были действующими.

ISBN 978-1617299476 англ. ISBN 978-5-4461-2193-9

Authorized translation of the English edition © 2023 Manning Publications. This translation is published and sold by permission of Manning Publications, the owner of all rights to publish and sell the same. © Перевод на русский язык ООО «Прогресс книга», 2024 © Издание на русском языке, оформление ООО «Прогресс книга», 2024 © Серия «Библиотека программиста», 2024

Изготовлено в России. Изготовитель: ООО «Прогресс книга». Место нахождения и фактический адрес: 194044, Россия, г. Санкт-Петербург, Б. Сампсониевский пр., д. 29А, пом. 52. Тел.: +78127037373. Дата изготовления: 03.2024. Наименование: книжная продукция. Срок годности: не ограничен. Налоговая льгота — общероссийский классификатор продукции ОК 034-2014, 58.11.12 — Книги печатные профессиональные, технические и научные. Импортер в Беларусь: ООО «ПИТЕР М», 220020, РБ, г. Минск, ул. Тимирязева, д. 121/3, к. 214, тел./факс: 208 80 01. Подписано в печать 19.01.24. Формат 70×100/16. Бумага офсетная. Усл. п. л. 24,510. Тираж 1200. Заказ 0000.

Оглавление Предисловие............................................................................................................................ 12 Введение................................................................................................................................... 14 Благодарности........................................................................................................................ 16 О книге....................................................................................................................................... 18 Кому адресована эта книга........................................................................................... 18 Структура издания.......................................................................................................... 19 От издательства................................................................................................................ 20 Об авторе.................................................................................................................................. 21 Иллюстрация на обложке.................................................................................................. 22

ЧАСТЬ I. ОСНОВЫ ДИЗАЙНА Глава 1. Преодоление разрыва между дизайном и разработкой........................... 24 1.1. Почему разработчикам полезно знать основы дизайна и проектирования пользовательского опыта......................................................... 25 1.1.1. Улучшение взаимодействия и коммуникации................................... 27 1.1.2. Понимание причин, лежащих в основе дизайнерских . решений...................................................................................................................... 28 1.1.3. Написание лучшего кода благодаря пониманию основ визуального дизайна.............................................................................................. 30 1.1.4. Более качественный код (и дизайн) благодаря меньшей зависимости от сторонних фреймворков....................................................... 31 1.1.5. Пользовательский опыт и разработка.................................................. 33

6  Оглавление 1.2. Путь к пониманию лучшего дизайна и пользовательского опыта.......... 34 1.2.1. Процесс разработки дизайна, рассматриваемый в книге............... 35 1.2.2. Профессиональные дизайнеры против умного дизайна................ 38 1.2.3. Объединяем все вместе.............................................................................. 38 Резюме................................................................................................................................. 39 Глава 2. Основные принципы дизайна.......................................................................... 40 2.1. Принципы дизайна.................................................................................................. 42 2.1.1. Близость.......................................................................................................... 42 2.1.2. Выравнивание............................................................................................... 53 2.1.3. Повторение..................................................................................................... 62 2.1.4. Контраст.......................................................................................................... 69 2.1.5. Баланс............................................................................................................... 77 2.2. Основы дизайна для проектирования пользовательского опыта . и не только.......................................................................................................................... 83 Резюме................................................................................................................................. 83

ЧАСТЬ II. ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ Глава 3. Основы пользовательского опыта.................................................................. 86 3.1. Пользовательский опыт не ограничивается . визуальным дизайном.................................................................................................... 87 3.2. Что такое пользовательский опыт..................................................................... 89 3.3. Роли специалистов в области UX-проектирования............................ 91 3.3.1. Исследование пользователей................................................................... 91 3.3.2. Проектирование пользовательского опыта........................................ 92 3.3.3. UX-писатели.................................................................................................. 92 3.4. Методологии проектирования пользовательского опыта......................... 94 3.4.1. Дизайн, ориентированный на пользователя....................................... 95 3.4.2. Модель «двойного алмаза»....................................................................... 97 3.5. Углубленное изучение практик проектирования . пользовательского опыта.............................................................................................. 99 Резюме................................................................................................................................. 99 Глава 4. Исследование пользователей......................................................................... 101 4.1. Введение в исследования пользовательских потребностей.................... 103 4.1.1. Исследование пользователей кажется дорогостоящим, . однако неудача обходится еще дороже.......................................................... 104 4.1.2. Сбор исходных данных............................................................................ 105

Оглавление  7

4.1.3. Персоны пользователей........................................................................... 106 4.1.4. Потребности пользователей................................................................... 107 4.1.5. Определение целей сайта: согласование пользовательских и бизнес-целей........................................................................................................ 108 4.1.6. Постановка SMART-целей..................................................................... 111 4.2. Стратегии проведения пользовательских исследований......................... 113 4.2.1. Качественные и количественные исследования............................. 114 4.2.2. Отношение и поведение пользователя............................................... 115 4.2.3. Методы исследования пользователей................................................ 116 4.2.4. Исследование как непрерывный процесс.......................................... 124 Резюме............................................................................................................................... 124 Глава 5. Проектирование пользовательского опыта............................................... 126 5.1. Информационная архитектура......................................................................... 127 5.1.1. Картирование сайта................................................................................... 128 5.1.2. Контент-анализ и аудит........................................................................... 133 5.2. Пользовательские сценарии и пути................................................................. 135 5.2.1. Пользовательские сценарии................................................................... 135 5.2.2. Пути пользователей.................................................................................. 136 5.3. Разработка дизайна сайта и приложения...................................................... 140 5.3.1. Создание вайрфреймов............................................................................ 140 5.3.2. Дизайн пользовательского интерфейса и цветные макеты......... 144 5.3.3. Прототипирование.................................................................................... 146 Резюме............................................................................................................................... 147

ЧАСТЬ III. ЭЛЕМЕНТЫ ВИЗУАЛЬНОГО ДИЗАЙНА Глава 6. Создание макета и композиция..................................................................... 151 6.1. Создание структуры сайта.................................................................................. 154 6.2. Использование сетки............................................................................................ 155 6.2.1. Определение сетки.................................................................................... 155 6.2.2. Размеры сетки............................................................................................. 157 6.3. Выбор макета........................................................................................................... 159 6.3.1. Использование одноколоночных шаблонов..................................... 160 6.3.2. Распространенные многоколоночные шаблоны............................. 161 6.3.3. Паттерны чтения........................................................................................ 169 6.4. Использование пустого пространства............................................................ 174 6.5. Соображения по поводу отзывчивого дизайна............................................ 178 6.5.1. Разработка дизайна для мобильных устройств............................... 178

8  Оглавление 6.5.2. Разработка дизайна для многоэкранных . и складных устройств.......................................................................................... 183 Резюме............................................................................................................................... 185 Глава 7. Улучшение макета сайта с помощью анимации....................................... 186 7.1. Зачем нужна анимация........................................................................................ 187 7.1.1. Повышение удобства использования................................................. 187 7.1.2. Создание запоминающихся взаимодействий................................... 188 7.1.3. Использование анимации в качестве украшения, . вызывающего эмоциональный отклик.......................................................... 188 7.2. Когда стоит использовать анимацию.............................................................. 190 7.2.1. Предоставление подсказок для навигации по сайту..................... 190 7.2.2. Предоставление пользователям обратной связи . при их взаимодействии с элементами пользовательского . интерфейса.............................................................................................................. 191 7.2.3. Навигация и переходы между страницами....................................... 192 7.2.4. Указание статуса выполняемой задачи.............................................. 193 7.2.5. Думайте на перспективу.......................................................................... 195 7.3. Планирование анимаций..................................................................................... 196 7.3.1. Создание раскадровки.............................................................................. 197 7.4. Технические аспекты анимации........................................................................ 198 7.4.1. Соображения по поводу производительности................................. 198 7.4.2. Соображения по поводу доступности................................................. 199 Резюме............................................................................................................................... 199 Глава 8. Использование типографики на веб-сайте................................................ 201 8.1. Основы типографики............................................................................................ 202 8.1.1. Различие между гарнитурой и шрифтом........................................... 203 8.1.2. Различные классификации шрифтов................................................. 203 8.1.3. Стили и вес шрифтов................................................................................ 209 8.2. Выбор шрифта для веб-проекта........................................................................ 212 8.2.1. Характеристики хорошего веб-шрифта............................................. 212 8.2.2. Сопряжение шрифтов и гарнитур........................................................ 214 8.2.3. Создание набора параметров шрифта................................................. 218 8.2.4. Задание размеров шрифтов.................................................................... 219 8.2.5. Создание вертикального ритма............................................................. 220 8.2.6. Обеспечение удобочитаемости.............................................................. 224 Резюме............................................................................................................................... 227

Оглавление  9

Глава 9. Теория цвета......................................................................................................... 228 9.1. Терминология теории цвета............................................................................... 230 9.1.1. Тень, оттенок и тональность................................................................... 230 9.1.2. Теплые и холодные цвета........................................................................ 231 9.1.3. Тон, насыщенность и светлота............................................................... 232 9.2. Цветовой круг.......................................................................................................... 234 9.2.1. Цветовые отношения................................................................................ 234 9.2.2. Изучайте разные примеры использования цветов......................... 239 9.3. Психология цвета................................................................................................... 240 9.4. Выбор и применение цветовой схемы............................................................ 242 9.5. Руководство по выбору и применению цветовой схемы.......................... 242 9.6. Соображения доступности.................................................................................. 249 9.6.1. Тестирование цветового контраста...................................................... 250 9.6.2. При обозначении состояния или статуса нельзя . полагаться только на цвет.................................................................................. 250 9.7. Цветовые режимы для веб.................................................................................. 251 9.7.1. Режимы RGB и RGBA............................................................................. 251 9.7.2. Шестнадцатеричные цветовые коды................................................... 252 9.7.3. Режимы HSL и HSLA............................................................................... 252 9.7.4. Режимы CIE Lab и LCH........................................................................... 253 9.7.5. Выбор цветового режима......................................................................... 254 9.8. Несоответствие цветов на разных экранах................................................... 254 Резюме............................................................................................................................... 254 Глава 10. Построение сайта.............................................................................................. 256 10.1. Требования к сайту проекта............................................................................. 257 10.2. Организация контента с помощью вайрфрейма....................................... 257 10.3. Создание системы сеток и задание расстояний........................................ 259 10.4. Выбор типографики............................................................................................ 261 10.5. Задание вертикального ритма......................................................................... 262 10.6. Выбор изображений............................................................................................ 269 10.6.1. Использование изображений для задания тона............................ 269 10.6.2. Наложение текста поверх изображений.......................................... 270 10.7. Выбор и применение цветовой палитры..................................................... 273 10.8. Завершающие штрихи........................................................................................ 276 10.9. Отзывчивый дизайн............................................................................................ 277 10.9.1. Дизайн сайта для планшета, восьмиколоночная сетка............... 277

10  Оглавление 10.9.2. Дизайн сайта для мобильного устройства, . четырехколоночная сетка................................................................................... 279 10.9.3. Дизайн по принципу Mobile First...................................................... 281 Резюме............................................................................................................................... 282

ЧАСТЬ IV. ПОСЛЕ РАЗРАБОТКИ ВИЗУАЛЬНОГО ДИЗАЙНА Глава 11. Тестирование, проверка и итерации........................................................... 284 11.1. Цикл проектирования........................................................................................ 285 11.1.1. Замена существующего дизайна........................................................ 285 11.1.2. Минимально жизнеспособный продукт.......................................... 285 11.1.3. Оценка готовности дизайна к тестированию................................. 286 11.2. Виды тестирования............................................................................................. 286 11.2.1. Проведение интервью с клиентами................................................... 287 11.2.2. Тестирование в производственной среде......................................... 287 11.2.3. A/B-тестирование.................................................................................... 288 11.2.4. Поэтапное развертывание..................................................................... 289 11.2.5. Методы первоначального исследования пользователей........... 290 11.3. Применение результатов тестирования....................................................... 290 Резюме............................................................................................................................... 291 Глава 12. Решения разработчиков и пользовательский опыт.............................. 293 12.1. Влияние написанного кода............................................................................... 294 12.1.1. Важность написания качественного HTML-кода........................ 294 12.1.2. Производительность и загрузка страниц........................................ 297 12.1.3. Веб-технологии, не имеющие кроссбраузерной поддержки.... 298 12.2. Продукты, ориентированные на разработчиков....................................... 298 Резюме............................................................................................................................... 299 Приложение. Дополнительные ресурсы..................................................................... 301 Пользовательский опыт.............................................................................................. 301 Структура сетки и макет............................................................................................. 301 Анимация.......................................................................................................................... 302 Типографика.................................................................................................................... 302 Цвет.................................................................................................................................... 303 Тестирование дизайна.................................................................................................. 303

Посвящается мистеру Бирреру, мистеру Кэрроллу и мистеру Штайгледеру (Стигги), которые своими наставлениями вдохновляли меня продолжать писать. А также моей собаке Вог, которая терпеливо и с нетерпением сидела рядом со мной, пока я писала эту книгу.

Предисловие Я уже очень давно работаю в сфере веб-дизайна. Настолько давно, что мой первый браузер управлялся из командной строки, а моя первая бэкенд-разра­ботка представляла собой CGI-скрипт. За эти почти три десятилетия работы над десятками веб-проектов я пришел к выводу, что наиболее ценным навыком для разработчиков является способность наводить мосты между такими разными по сути областями, как дизайн, улучшение пользовательского опыта (user experience, UX) и разработка как таковая. Каждая из них привлекает специалистов с разным уровнем образования и/или интересами. Это может вызывать напряженность, поскольку представители каждой из этих групп склонны полагать, что именно их деятельность больше всего влияет на успех веб-проекта. В действительности же веб-разработка находится на стыке всех перечисленных областей и в равной степени опирается на каждую из них. Я обнаружил, что наиболее ценными участниками любого веб-проекта являются люди, которые разбираются в каждой из этих областей достаточно хорошо для того, чтобы работать на их стыке. Они обеспечивают эффективное взаимодействие между всеми командами, направляя совместные усилия на достижение общей цели. Приведенные соображения напрямую подводят меня к теме книги Стефани Стимак «Дизайн для разработчиков» — бесценному ресурсу для специалистов, желающих углубить свое понимание основных принципов создания современных веб-приложений. В ней приводится краткий курс по дизайну и разработке UX. Материал поможет вам не только лучше сориентироваться в этих вопросах, но и приобрести необходимые навыки для продуктивной работы в соответствующих областях. Помимо прочего, эта книга поспособствует вашему карьерному росту и поможет стать специалистом, успешно работающим на стыке дизайна, проектирования UX и разработки.

Предисловие  13

Стефани именно тот человек, который может вам в этом помочь. Она не только является прекрасным рассказчиком, но и обладает многолетним опытом работы дизайнером, разработчиком, специалистом по пользовательскому опыту и преподавателем. Ей даже доводилось разрабатывать браузеры и веб-стандарты для них, а это говорит о чрезвычайно глубоком понимании устройства Всемирной паутины и инструментов, с помощью которых она создается. Независимо от того, являетесь ли вы опытным разработчиком, желающим вырастить новую ветвь на своем дереве навыков, или новичком, стремящимся освоить базовые принципы создания веб-приложений, книга «Дизайн для разработчиков» предоставит огромное количество полезной информации, которая поможет вам двигаться по выбранному пути. Аарон Густафсон, автор книги Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement

Введение Я занялась веб-дизайном задолго до поступления в университет. Мне нравилось настраивать аккаунты на таких платформах, как Myspace и LiveJournal, и я начала разбираться в том, как использовать Photoshop и вносить изменения в свои веб-страницы с помощью языка CSS. В подростковом возрасте это было моим хобби, и я не рассматривала графический дизайн в качестве возможного карьерного пути до перехода в старшие классы средней школы. На самом деле я хотела заниматься дизайном одежды, однако мое портфолио больше подходило для занятий графическим дизайном. В университете я поступила на программу со специализацией «Дизайн новых медиа», которая охватывала такие темы, как веб, интерактивность, видео и спецэффекты. Хотя я помню, что проходила тогда основы HTML и CSS, большая часть времени уделялась работе с платформой Adobe Flash и языком ActionScript 3.0. Я окончила университет в 2010 году, как раз перед тем, как технология Flash приказала долго жить. После работы над двумя первыми краткосрочными проектами в области дизайна я перешла на должность, с которой началось мое погружение в сферу фронтендразработки. Я занималась исследованием и проектированием пользовательского опыта, визуальным дизайном и фронтенд-разработкой, в то же время работая совместно с другим специалистом над более сложным бэкенд-функционалом и кодом JavaScript. В ходе своего взаимодействия с разработчиками я не раз сталкивалась с проблемой, когда приходилось отказываться от грандиозных дизайнерских идей по причине невозможности их реализации в веб. Проработав в должности фронтенд-разработчика четыре года, я перешла в команду Microsoft Edge, где занималась тем же самым, обладая при этом совершенно иной степенью свободы. У меня было больше возможностей для освоения новых

Введение  15

областей и для общения с разработчиками, что позволило мне понять проблемы, с которыми они сталкиваются. Я научилась пользоваться репозиторием Git и вносить изменения в код (мне часто требовалась помощь в работе с Node и npm, за которую я хочу поблагодарить Антона). Я создавала инструменты для разработчиков, проектировала опыт для них и со временем начала заниматься стандартами и функциями веб-платформ, в результате став DevRel-менеджером (специалистом по выстраиванию отношений с разработчиками). Я часто позиционирую себя как дизайнера, который научился писать код, затем стал продакт-менеджером, создающим инструменты для разработчиков и пропагандирующим возможности веб-платформ и браузеров, при этом продолжая проектировать то, что необходимо для выполнения этой работы. Но в конечном итоге я считаю себя связующим звеном между разработчиками и дизайнерами. Я хорошо понимаю и тех и других и сопереживаю представителям обеих групп в равной степени. Работая DevRel-менеджером, я обнаружила, что некоторые веб-разработчики хотели бы улучшить дизайн создаваемых ими сайтов. Чаще всего они говорили, что могут создать сайт, но он никогда не выглядит так, как им бы хотелось, рассказывали о сложностях работы с цветом. Тогда я не могла углубиться в решение этих вопросов и откладывала их на потом, так как в то время они не были приоритетными. Но однажды мне на почту пришло письмо от сотрудника издательства Manning, и проблема дизайна для веб-разработчиков вышла на первый план.

Благодарности Я начала писать эту книгу в конце 2020 года, когда мне казалось, что у меня достаточно времени для работы над ней, и так оно и было. Однако жизнь часто вносит свои коррективы, и на протяжении последних двух лет мне иногда бывало трудно совмещать реализацию данного проекта с различными жизненными обстоятельствами. Я хочу поблагодарить своих друзей, которые вдохновляли меня во время многочисленных Zoom-бесед, в нашей группе в Slack и в ходе личных встреч. Мы с вами родственные души, вы скрашиваете мою жизнь своими творческими порывами. Хочу также сказать спасибо членам своей семьи, которые поддерживали меня на протяжении работы над проектом и интересовались тем, как идут мои дела, — я люблю вас. И еще я хочу поблагодарить свою собаку по кличке Вог (хотя она никогда не сможет этого прочесть), которая ночами сидела у меня на коленях, пока я писала эту книгу, и не давала мне слишком долго засиживаться за компьютером. Я выражаю благодарность своему редактору из издательства Manning Саре Миллер за терпение и понимание, которые она проявляла, пока я преодолевала многочисленные препятствия в процессе написания книги. В ходе этой работы мы с ней вместе столкнулись с рядом трудностей, и я хочу сказать ей отдельное спасибо за открытость и чуткое руководство. Благодарю и остальных сотрудников издательства Manning, с кем меня свела судьба: технического редактора Криса Ати, редактора-рецензента Алекса Драгосавлевича, выпускающего редактора Дейрдре Хайама, литературного редактора Алису Ларсон и корректора Мелоди Долаб. Отдельной благодарности заслуживают рецензенты и люди, предоставлявшие обратную связь в ходе работы над книгой: Адриан Росси, Эл Кринкер, Ален

Благодарности  17

Куньо, Алекс Лукас, Андрес Сакко, Арун Кумар, Банг Нтеме, Бруно Соннино, Кас Петрус, Дэниэл Купер, Дэниэл Карл, Данило Зекович, Давид Кабреро Соуто, Дэвид Криф, Франс Оилинки, Харальд Кун, Харрисон Масеко, Ховард Уолл, Джереми Аллен, Хосе Сан Леандро, Катя Пэткин, Марчин Сек, Мартин Тидман, Мигель Исидоро, Ник Ракочи, Оливер Кортен, Филлип Соренсен, Рамаа Кандасами, Родни Вейс, Сезин Чагыл, Симеон Лейзерзон, Серен Динес Йенсен, Стив Элберс, Стив Прайор, Танудж Шрофф, Таня Вилке, Виорел Мойсей и Вейерт де Бур. И наконец, хочу упомянуть с благодарностью участников моего онлайн-сообщества и тех, с кем лично знакома в реальной жизни. Если бы не ваша поддержка и заинтересованность, я бы никогда не начала выступать на конференциях и уж точно даже не подумала бы о написании книги. Мне повезло быть знакомой со столь многими замечательными людьми, которых я могу назвать друзьями по сфере деятельности. Спасибо вам за поддержку!

О книге Книга «Дизайн для разработчиков» призвана познакомить читателей с основами дизайна, разработки пользовательского опыта и ключевыми элементами, способными оживить сайт и добавить изюминку в его восприятие. В ней рассказывается о том, как с помощью элементов дизайна можно передать интонации и смыслы, а также изменить их. Материал изложен в порядке следования этапов типичного проектного цикла. Вначале обсуждаются основные принципы дизайна, которые могут вам потребоваться еще до разработки UX или визуальной составляющей. Далее рассматриваются вопросы разработки UX, причем затрагиваются аспекты как исследования, так и проектирования; здесь же закладывается основа для применения элементов визуального дизайна, описанных в последующих главах. Последние главы посвящены тестированию дизайна, итерационному циклу и разработке, которая является ключевым аспектом процесса проектирования, поскольку именно она позволяет опубликовать готовый дизайн во Всемирной паутине и сделать его пригодным для использования, то есть лежит в основе всего пользовательского опыта посетителей сайта.

Кому адресована эта книга Книга «Дизайн для разработчиков» написана для веб-разработчиков, создающих сайты и веб-приложения, для тех из них, кто хочет освоить принципы хорошего оформления и научиться принимать взвешенные решения, связанные с дизайном. Независимо от того, являетесь ли вы внештатным сотрудником или работаете в команде с другими дизайнерами, эта книга предоставит вам инструменты и терминологию, необходимые для обсуждения с клиентами и коллегами вопросов дизайна и его связи с вашими функциями как разработчика.

О книге  19

Цель книги заключается в том, чтобы познакомить разработчиков с основами визуального дизайна и проектирования UX в контексте веб-разработки и научить их применять изученные принципы в рамках текущей или будущей деятельности. В современной профессиональной среде под термином «вебразработчик» может подразумеваться множество разных ролей. Наибольшую пользу из книги извлекут читатели, которые пишут код для веб, ведь именно он определяет оформление сайта или то, что видит пользователь. К этой категории относятся фулстек-разработчики, фронтенд-разработчики и разработчики веб-приложений. Мы не будем уделять много внимания коду, однако, поскольку книга посвящена веб-дизайну и пользовательскому опыту, в ней периодически будут встречаться фрагменты кода. Максимальную пользу из материала извлекут специалисты, которые имеют опыт работы с языками JavaScript или PHP и базовое понимание HTML и CSS, но практически не знакомы с основами дизайна и проектирования UX.

Структура издания В части I рассказывается об основных принципах дизайна и о преимуществах, которые дает их понимание. В главе 1 говорится о том, почему разработчикам следует изучить основы дизайна, а также о положительных последствиях этого для взаимодействия между командами специалистов различных профилей. В главе 2 подробно рассматриваются основные принципы дизайна, понимание которых позволяет сделать дизайн безупречным и хорошо организованным. Часть II начинается с изложения основ проектирования UX. В главе 3 приводится обзор его многочисленных аспектов, включая исследование, копирайтинг и дизайн. Глава 4 посвящена этапу исследования целевой пользовательской аудитории, здесь рассказывается о том, почему необходимо такое исследование, о различных типах данных, которые можно собрать, а также о некоторых наиболее распространенных методах их сбора. В главе 5 мы начнем закладывать фундамент нашего дизайна, организуя контент и определяя пользовательские сценарии, уделяя особое внимание этапу проектирования пользовательского опыта. В части III поговорим о дополнительных способах обдумывания компоновки и о том, как наслаивать ключевые элементы дизайна для того, чтобы реализовать на практике те основы, которые были заложены в главе 5. В главе 6 обсудим распространенные типы компоновки элементов, настройку сетки, чтение шаблонов и особенности макета при разработке отзывчивой (адаптивной) версии сайта или приложения. В главе 7 мы поговорим об анимации, способах улучшения макета и пользовательского интерфейса с ее помощью, а также о причинах, по которым анимацию не следует считать чем-то второстепенным.

20  О книге В главе 8 рассмотрим основы типографики и поговорим о том, как выбор шрифта может изменить тон вашего сайта. В главе 9 большое внимание будет уделено цвету и выбору изображений в зависимости от вашей цветовой палитры. В главе 10 мы соберем все воедино и используем то, что вы узнали из глав 4–9, для создания и оформления главной страницы с использованием многоуровневого подхода. Часть IV завершает цикл проектирования. В ней мы поговорим о тестировании дизайна и о том, почему разработка лежит в основе пользовательского опыта в веб-сфере. Глава 11 посвящена вопросам тестирования дизайна с целью убедиться, что он обеспечивает достижение целей сайта. В главе 12 рассматриваются взаимосвязи между пользовательским опытом и разработкой, а также приводятся некоторые другие соображения.

От издательства Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция). Мы выражаем огромную благодарность компании «КРОК» за помощь в работе над русскоязычным изданием книги и их вклад в повышение качества перевод­ ной литературы. Мы будем рады узнать ваше мнение! На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.

Об авторе Стефани Стимак — продакт-менеджер, имеет более чем десятилетний опыт работы в области дизайна, специализируется на создании продуктов для разработчиков. Стефани выступала на веб-конференциях по всему миру по темам веб-разработки и дизайна, во многих случаях делая акцент на необходимости и способах преодоления разрыва между этими сферами. Занимаясь дизайнерскими проектами, она сотрудничала с такими компаниями, как Safeway, MBARI, Microsoft Azure, Microsoft Office, Windows, T-Mobile и Blue Cross Blue Shield. Следуя своему увлечению темами веб, дизайна и разработки, она присоединилась к команде создателей Microsoft Edge, работала над такими инструментами для разработчиков, как webhint.io и DevTools для браузера Edge. В фокусе ее интересов находятся и другие инициативы в области веб-платформ, в том числе Web We Want (webwewant.fyi). В своей многообразной деятельности автор старается применять образ мышления разработчиков. После шести лет работы в команде Microsoft Edge Стефани занялась управлением продуктами для разработчиков в сфере стартапов.

Иллюстрация на обложке Обложку книги «Дизайн для разработчиков» украшает рисунок под названием Fille de Barabinize, или «Дочь Барабини». Он взят из коллекции Жака Грассе де Сен-Совера, опубликованной в 1797 году. Каждая иллюстрация этой коллекции нарисована и раскрашена вручную. В те времена по одежде можно было легко определить место жительства, профессию и статус человека в обществе. Издательство Manning отдает должное изобретательности и предприимчивости компьютерного бизнеса, используя для обложек тематических книг подобные иллюстрации. В них отражается разно­образие региональных культурных особенностей многовековой давности, о котором нам напоминают картины Грассе де Сен-Совера.

Часть I Основы дизайна Эта часть во многом является вступительной. В ней я постараюсь заложить основу для остального материала книги и представлю принципы дизайна, которые необходимо усвоить до начала работы над визуальной составляющей проекта. В главе 1 я определяю цель книги и объясняю, почему разработчику полезно ознакомиться с базовыми принципами дизайна. В главе 2 изложены основы дизайна и описаны его принципы, их предстоит изучить. Каждый принцип, обсуждаемый в этой главе, крайне важен для понимания того, как устанавливать взаимосвязи между фрагментами контента, которые будут представлены в части II. Эти принципы могут быть применены ко всем визуальным элементам, что и будет продемонстрировано в части III. Чем лучше и глубже вы освоите фундаментальные принципы, тем более смело и осознанно сможете их применять для создания все более выдающихся решений. Изучив вступительную часть книги, вы будете готовы приступить к стадии проектирования пользовательского опыта.

1

Преодоление разрыва между дизайном и разработкой

В этой главе 33 Этапы разработки веб-дизайна, рассматриваемые в книге. 33 Эволюция роли веб-разработчиков. 33 Преимущества, которые фрилансерам и штатным разработчикам дает понимание основ дизайна и процесса проектирования пользовательского опыта.

Всемирная паутина — это постоянно изменяющееся пространство. Новые технологии и фреймворки появляются каждый год. Язык HTML и каскадные таблицы стилей (CSS) по-прежнему лежат в основе веб-сайтов и веб-приложений и при этом продолжают развиваться, удовлетворяя все новые потребности разработчиков. При реализации веб-проектов необходимо постоянно следить за технологиями, используемыми для их построения. А как это связано с дизайном? Несмотря на постепенное усовершенствование инструментов, многие основополагающие концепции остаются прежними. Мы наблюдаем лишь смену тенденций с течением времени. Знакомство с темой веб-разработки оказалось чрезвычайно ценным для меня как специалиста в области веб-дизайна. Когда меня спрашивают: «Следует

Глава 1. Преодоление разрыва между дизайном и разработкой  25

ли дизайнерам научиться писать код?», я отвечаю утвердительно. Понимание того, что возможно внутри мира веб, за его фасадом, является огромным преимуществом. Это значительно облегчает общение между дизайнерами и разработчиками. В сфере технологий коммуникационный и концептуальный разрыв между дизайнерами и разработчиками обычно считается одним из самых труднопреодолимых. Гораздо реже задается вопрос: «Следует ли разработчикам учиться дизайну?» И на него я тоже отвечаю утвердительно, по крайней мере, когда речь идет о понимании основных принципов. Освоение навыков дизайна позволяет разработчикам быстро обновлять пользовательский интерфейс, давая команде дизайнеров возможность больше работать над пользовательским опытом, чем над внесением небольших изменений на уровне пикселей. Однажды генеральный директор поделился с моей командой разработчиков мнением о том, что пользовательский интерфейс одного из наших инструментов кажется ему не столь же эффективным, как у конкурентов. Под этим он подразумевал слишком большое свободное пространство между компонентами. Пользовательский интерфейс был недостаточно совершенным. Один из разработчиков уменьшил расстояние между компонентами, сделав дизайн более компактным. Ему не требовался дизайнер для создания макетов, он самостоятельно внес изменения, представил их дизайнеру, чтобы ввести коман­ду в курс дела, а затем внедрил изменения в пользовательский интерфейс. Если разработчик способен сравнить дизайн вашего продукта с другим, выявить разницу, которая в вышеописанном примере заключалась в чрезмерном количестве пустого пространства, и внести изменения, то вы, как дизайнер, можете сосредоточиться на решении более сложных проблем, связанных с пользовательским опытом. Хороший разработчик понимает, что небольшие визуальные изменения позволяют сделать дизайн более отточенным.

1.1. Почему разработчикам полезно знать основы дизайна и проектирования пользовательского опыта Как правило, дизайнеры и разработчики говорят на разных языках и владеют разными наборами навыков. Дизайнеры ориентируются на пользователя и создают визуальные образы. Разработчики стараются преобразовать эти визуальные образы в интерактивные элементы, с которыми будут взаимодействовать потребители. Однако эти две области пересекаются, поскольку разработчики воссоздают то, что создали дизайнеры, делая это с помощью кода, обычно с использованием языка CSS: он позволяет стилизовать веб-интерфейсы. Понимание того, что и зачем воплощается в жизнь, сделает разработчика более эффективным и позволит ему уверенно принимать дизайнерские решения в отсутствие коллеги-дизайнера.

26  Часть I. Основы дизайна Дизайн — это не только визуальное оформление и эстетика. Они, безусловно, важны и являются первым, на что обращают внимание посетители, когда заходят на сайт, но и остальные аспекты пользовательского опыта являются не менее значимыми. Если сайт медленно загружается или посетители не делают на нем того, что от них ожидают, например, не покупают товар, то становится очевидно, что одной эстетики недостаточно. Разработчики должны понимать, как принимать решения, касающиеся пользовательского опыта, которые лягут в основу ­разработки визуального дизайна. Когда я начинала свою карьеру более десяти лет назад, ­типичная схема работы над проектом сайта выглядела следующим образом. 1. Дизайнер изучает проект заказчика, проводя сравнение с сайтами его конкурентов и оценивая, что там было сделано хорошо, а что нет. 2. Дизайнер изучает потребности и опыт нескольких пользователей, на которых ориентирован проект, и предлагает решение конкретной задачи на сайте (например, поиска информации, покупки товара, записи на прием, сравнения отелей и т. д.). 3. На основе результатов исследования конкурентов, изучения пользовательских персон и бизнес-требований дизайнер создает так называемые вайр­ фреймы (wireframes) — простые схемы, или макеты, сайта, отражающие расположение фрагментов контента, а затем представляет их на суд заказчика для получения одобрения. 4. Наконец, дизайнер приступает к визуальному оформлению, предоставляет заказчику макеты, соответствующие будущему дизайну с точностью до пикселя, дорабатывает их, получает одобрение, а затем передает проект разработчику для написания кода сайта. 5. Разработчик берет статические макеты и создает на их основе интерактивный сайт. 6. После проверки качества, выявления и устранения ошибок и проблем сайт запускают в эксплуатацию. Все эти этапы имеют место и сегодня, и в данной книге мы будем рассматривать именно этот рабочий процесс — проектный цикл, начинающийся с проектирования пользовательского опыта (разработки вайрфреймов) и завершающийся применением визуальных элементов для воплощения дизайна в жизнь. Однако попытаемся скорректировать описанный выше проектный цикл, чтобы сфокусироваться на современных рабочих процессах, которые предполагают более итеративное проектирование и разработку, более тесное сотрудничество специалистов из различных областей, непрерывное тестирование и анализ, направленные на улучшение дизайна.

Глава 1. Преодоление разрыва между дизайном и разработкой  27

Приведенный выше рабочий процесс разделен между дизайнером и разработчиком. Дизайнер пользовательского опыта может сосредоточиться исключительно на исследовании проектов конкурентов и создании вайр­ фреймов. При этом он работает в тандеме с визуальным дизайнером или интерактивным дизайнером, который принимает решения, связанные с типографикой, цветом, расстоянием между компонентами и анимацией — теми визуальными аспектами сайта, которые будут рассмотрены в этой книге. Очевидно, что ­работа в целом все равно разделяется между дизайнерами и разработчиками, участие последних начинается лишь с момента передачи им готового дизайна. Такой способ работы не предполагает тесного сотрудничества. Разработчики обладают знаниями и опытом, которых обычно нет у дизайнеров, поэтому их привлечение к работе на более ранних этапах могло бы положительно сказаться на всем проектном цикле. Вне зависимости от того, идет ли речь о сокращении объема ненужной работы при невозможности реализации той или иной дизайнерской идеи или об озвучивании альтернативного мнения, способного повлиять на направление творческой мысли, это было бы выгодно обеим сторонам.

1.1.1. Улучшение взаимодействия и коммуникации Дизайнеры не ожидают того, что их коллеги-разработчики будут экспертами в области дизайна, так же как и разработчики не ожидают от дизайнеров знания JavaScript. Специалисты упомянутых профессий играют каждый свою роль по вполне очевидной причине, но результаты их деятельности взаимосвязаны. Код, который пишут разработчики, может повлиять на дизайн, а то, что создают дизайнеры, может повлиять на решения, принимаемые разработчиками при написании кода. Иногда возможности разработчиков оказываются ограниченными в силу неких технических особенностей или вариаций кода, которые негативно сказываются на пользовательском опыте, например, анимация иногда замедляет загрузку веб-страницы. Понимание того, что именно лежит в основе принятия дизайнерских решений, позволяет сделать сотрудничество и общение между дизайнерами и разработчиками более эффективным и минимизировать топтание на месте, обусловленное техническими ограничениями. Освоив необходимые инструменты и терминологию, разработчики могут предоставлять дизайнерам более действенную обратную связь и задавать им более содержательные вопросы, а также лучше разбираться в причинах, лежащих в основе принимаемых дизайнерами решений. Эта книга призвана научить разработчиков эффективному взаимодействию с командой дизайнеров на протяжении всего процесса реализации проекта.

28  Часть I. Основы дизайна Даже если они не сотрудничают с дизайнерами, прочтение этой книги придаст им уверенности в принятии дизайнерских решений самостоятельно, а уж эти решения приведут к созданию безупречного конечного продукта. Или, скажем, изложенный материал наверняка поможет внештатным разработчикам, которые хотят иметь возможность вносить изменения в визуальное оформление сайта, но не располагают бюджетом (или просто не хотят нанимать дизайнера). Так или иначе, следует для начала освоить несколько базовых принципов дизайна и научиться их применять.

1.1.2. Понимание причин, лежащих в основе дизайнерских решений Однажды мне довелось руководить проектом, целевой аудиторией которого были разработчики. Разрабатывался инструмент, который анализировал код сайта или веб-приложения и предлагал рекомендации по улучшению доступности, производительности и безопасности. Хотя это был проект с открытым исходным кодом, большинство членов команды, работавшей над ним, являлись сотрудниками компании Microsoft. Я знала о том, что в целом веб-разработчики не очень хорошо относятся к Microsoft, и, когда эта компания выпускает очередной инструмент для разработчиков, они тщательно изучают каждую его деталь. Я решила, что, по аналогии с другими инструментами для разработчиков, частью нашего брендинга будет талисман, который мы сможем использовать в графическом оформлении сайта. По моему замыслу, дизайн талисмана должен был вызывать чувство сопереживания у посетителей нашего сайта. Для достижения этой цели было крайне важно на каком-то этапе мониторинга пользовательского сценария разместить на экране определенную иллюстрацию (рис. 1.1). Первые несколько версий работы сайта ставили претендентов на анализ кода в очередь, поскольку наш бэкенд мог обрабатывать лишь ограниченное количество URL-адресов одновременно. Люди вообще склонны проявлять нетерпение, когда дело касается использования интернета, а разработчики — тем более. Я предположила, что пользователи будут жаловаться на необходимость ожидания, поэтому на соответствующей странице была размещена иллюстрация с нашим персонажем, сидящим в темной комнате за столом с лампой и в поте лица обрабатывающим очередь из URL-адресов. Позднее моя гипотеза подтвердилась в ходе обсуждения созданного инструмента и сайта с одним из разработчиков-клиентов сайта, который сказал мне: «Я уже был готов рассердиться из-за того, что мне пришлось ждать, но посочувствовал вашему персонажу».

Глава 1. Преодоление разрыва между дизайном и разработкой  29

Рис. 1.1. На странице очереди к сканеру веб-сайтов был изображен нарвал, работающий сверхурочно, чтобы выполнить все задачи, поставленные разработчиками

Формирование эмпатии к целевой аудитории позволяет улучшить пользовательский опыт Понимание характера целевой аудитории нашего сайта и ее нужд позволили мне принять дизайнерские решения, которые помогли снизить количество жалоб. Со временем бэкенд был модернизирован для одновременного анализа большего объема кода. Этот пример служит прекрасной иллюстрацией взаимо­ связи между решениями разработчиков и пользовательским опытом. В данном случае исходная версия бэкенда заставляла пользователей сайта ждать, и это неудобство пришлось временно компенсировать, скрасить ожидание с помощью дизайнерского хода. Сегодня, когда передача данных осуществляется практически молниеносно, люди не готовы ждать, пока загрузится веб-страница, и стремятся как можно быстрее получить результат. Правильная организация их работы с сайтом крайне важна для бизнес-показателей. Итак, для улучшения пользовательского опыта разработчику крайне необходимо понимать целевую аудиторию и уметь ей сопереживать. В случае с сайтом,

30  Часть I. Основы дизайна предназначенным для анализа кода, разработчик мог бы реализовать несколько решений без участия дизайнера. Например, использовать анимацию загрузки или создать промежуточную страницу с сообщением наподобие «Зайдите чуть позже, чтобы получить результаты». Подобный пользовательский опыт не обязательно плох, но он является стандартизированным и не учитывает особенностей целевой аудитории и того, что она не готова к длительному ожиданию при использовании инструмента. Особенно нового инструмента, который должен произвести хорошее впечатление при первом применении.

Технические решения — это решения, связанные с пользовательским опытом Если разработчики будут знать причины, лежащие в основе принимаемых решений, связанные с дизайном и пользовательским опытом, они смогут лучше понять, как именно их решения, начиная от исходного кода и заканчивая способом его компиляции и выбором хостинг-провайдера, в итоге влияют на опыт пользователя. Технические решения являются такой же частью дизайна сайта, как и визуальные элементы, поэтому очень важно уметь обсуждать выбор дизайнера с точки зрения разработчика. Допустим, дизайнер обдумывает создание сайта, на котором большая часть пользовательского взаимодействия будет сопровождаться анимацией. Мнение разработчика о том, как это повлияет на производительность сайта, является критически важной обратной связью, которую необходимо предоставить дизайнеру на ранних этапах работы. Действительно ли вся анимация будет необходимой частью пользовательского опыта? Если нет, то обсуждение этого вопроса до начала написания кода поможет сэкономить время и даст возможность дизайнеру и разработчику вместе найти решения, позволяющие достичь желаемого результата и не оказывать негативного влияния на пользовательский опыт посетителя сайта.

1.1.3. Написание лучшего кода благодаря пониманию основ визуального дизайна Знание основ визуального дизайна дает разработчикам преимущества, которые не ограничиваются улучшением взаимодействия с коллегами-дизайнерами. Во-первых, понимание того, как различные элементы сочетаются друг с другом, позволяет разработчику создавать более четко организованный код, который легче поддерживать в долгосрочной перспективе. Понимание структуры страницы дает ему возможность писать код отзывчивого интерфейса, меньше зависящий от «хаков» при адаптации его для более компактных экранов. Кроме того, разработчики получают возможность самостоятельно определить потенциальные проблемы с тем или иным компонентом или

Глава 1. Преодоление разрыва между дизайном и разработкой  31

разметкой страницы на небольших экранах (например, кнопка может оказаться слишком маленькой при просмотре страницы на мобильном телефоне) и поправить это или предложить соответствующие коррективы. В более широком масштабе понимание того, как одни и те же элементы, например заголовки и кнопки, используются в различных компонентах пользовательского интерфейса, также влияет на группировку кода, особенно в CSS-файле. Выявление таких многократно используемых элементов позволяет увеличить объем кода, общего для нескольких компонентов, и уменьшить количество кода, обслуживающего конечного пользователя, а это всегда положительно сказывается на производительности веб-интерфейса. Дизайн также может повлиять на решения, принимаемые при написании кода бэкенда. Некоторые базы могут предполагать отправку запросов из определенной формы или сохранение данных. Понимание пользовательских сценариев в подобных ситуациях позволяет разработчику начать их кодирование раньше, не дожидаясь получения дизайна. Благодаря этому улучшается коммуникация и повышается скорость реализации проекта, что опять же выгодно всем его участникам.

1.1.4. Более качественный код (и дизайн) благодаря меньшей зависимости от сторонних фреймворков Многие мои знакомые разработчики используют сторонние библиотеки компонентов или фронтенд-фреймворки для ускорения реализации необходимых в проекте элементов пользовательского интерфейса. Обычно сторонние инструменты можно быстро установить и начать использовать, а если разработчик не доверяет своим дизайнерским способностям, то эти компоненты помогут ему спроектировать более качественный пользовательский опыт. Однако использование таких библиотек имеет множество недостатков как с точки зрения дизайна, так и с точки зрения написания кода. Чаще всего разработчик будет вынужден задействовать библиотеку, объем кода в которой существенно превышает объем кода, используемого на сайте. Кроме того, этот код будет написан не им самим, что может усложнить понимание того, как взаимосвязаны или как повторно используются различные компоненты пользовательского интерфейса. А попытка удалить или изменить ненужный на этом сайте код может привести к ошибкам в работе этого интерфейса. Кроме того, разработчик будет зависеть от авторов фреймворка в том, что касается обеспечения соответствия его кода новым веб-стандартам и лучшим современным практикам. Понимая принципы визуального дизайна и то, как они применяются при компоновке страницы и компонентов веб-интерфейса, разработчики могут создать собственную систему необходимых элементов и минимизировать объем кода, предоставляемого конечному пользователю. Такую кодовую базу легче поддерживать, переиспользовать и пополнять новыми элементами, кроме того,

32  Часть I. Основы дизайна подобный подход позволяет разработчикам не замыкаться в определенной экосистеме, которую они не могут контролировать. Сторонние фреймворки предусматривают несколько широко распространенных шаблонов компоновки веб-страниц. Обычно это макет с крупным главным изображением в верхней части и горизонтальными полосами, разделяющими содержимое страницы, или макет с главным изображением и расположенными под ним тремя столбцами с контентом (рис. 1.2).

Рис. 1.2. Пример одного из распространенных шаблонов, предусмотренных в сторонних фреймворках

Подобная компоновка неплоха по своей сути. Она выполняет определенную функцию, но в действительности предназначена только для создания главной целевой страницы, поэтому в итоге можно получить главную страницу с хорошим дизайном и несколько менее проработанных страниц нижнего уровня. Кроме того, такая компоновка элементов на странице используется чрезвычайно широко, и если вы хотите, чтобы создаваемый сайт выделялся на фоне других, то использование этих шаблонов в готовом виде не рекомендуется. Разработка хорошо оформленного веб-сайта или веб-приложения не ограничивается выбором шаблона для макета. Понимание принципов дизайна, связанных с применением теории цвета, типографики и пространства в макете, позволит предоставить пользователям гораздо более качественный результат. Это также означает, что вместо попытки вписать содержимое своего сайта в чужой шаблон разработчик научится строить и адаптировать структуру создаваемого сайта под нужды своих пользователей. В плане компоновки страниц и пользовательского сценария интернет-магазин, созданный индивидуально, будет значительно отличаться от новостного сайта или блога.

Глава 1. Преодоление разрыва между дизайном и разработкой  33

Конечно, мы живем в быстро меняющемся мире, и проекты по разработке могут иметь жесткие временные рамки, так что может просто не быть выбора между использованием готового шаблона и созданием сайта с нуля. Однако знания о том, как использовать цвет, типографику и пространство, можно применить к любым шаблонам и значительно улучшить создаваемый дизайн.

1.1.5. Пользовательский опыт и разработка Дизайн — тема очень обширная. Существует множество различных областей, в которых можно специализироваться, и пользовательский опыт — это, пожалуй, одна из самых обширных сфер веб-дизайна, которая может быть разбита на такие области, как исследование аудитории пользователей и дизайн их взаимодействия с системой. По большей части пользовательский опыт зависит от дизайна, однако решения, принимаемые разработчиком, также оказывают на него влияние. Не все аспекты пользовательского опыта напрямую связаны с разработкой кода сайта. Однако знание их основ поможет разработчикам научиться делать выбор в интересах пользователей и находить технические решения, которые принесут наибольшую пользу. Эволюция роли разработчика предполагает понимание нужд целевой аудитории и взаимодействие с ней для создания решения, отвечающего ее потребностям. Методологии проектирования пользовательского опыта позволяют разработчикам научиться создавать продукты, ориентируясь на пользователей. Опять же, это может повлиять на то, как разработчики пишут свой код, и на то, какие инструменты они используют для достижения своей цели. Допустим, разработчик из небольшой компании работает над продуктом, сайтом или веб-приложением и собирается внедрить новую функцию. Поскольку компания небольшая, у нее нет специалиста по исследованию целевой аудитории или бюджета на проведение подобных исследований. Поэтому компания планирует выпустить функцию без проведения пользовательского тестирования и наблюдения за ее применением. Тем не менее для успешного проведения эксперимента необходимо разработать план тестирования. Понимание процесса тестирования дизайна и сбора обратной связи для совершенствования функции имеет решающее значение при разработке продукта. Каждое решение, принимаемое разработчиком, влияет на опыт пользователя веб-сайта или приложения. Благодаря пониманию важности каждого аспекта пользовательского опыта и соответствия этих аспектов этапам жизненного цикла проекта разработчики могут в большей степени ориентироваться на пользователей и выявлять их проблемы до того, как на разработку будет потрачено слишком много времени и придется возвращаться к ее предыдущим этапам, чтобы учесть вновь выявленные обстоятельства. Например, проработка деталей и функционала компонентов на этапе создания прототипа

34  Часть I. Основы дизайна гарантирует, что функции будут работать ожидаемым образом. Так, может сократиться количество ошибок в производственном коде веб-сайта или вебприложения, что, в свою очередь, будет способствовать улучшению опыта конечного пользователя. Проектирование пользовательского опыта и веб-разработка тесно связаны между собой, и поскольку разработчики стремятся к более глубокому пониманию бизнеса и его клиентов, им полезно понимать основы пользовательского опыта и их связь с фазой разработки. В итоге эта информация поможет разработчикам писать более качественный код, выпускать его с меньшим количеством ошибок и учитывать интересы своих пользователей на этапе принятия технических решений. При правильном подходе понимание основ проектирования пользовательского опыта не только положительно скажется на достижении конечных бизнес-целей, но и предоставит разработчикам инструменты для быстрой корректировки того, что не соответствует ожиданиям, прежде чем проявят себя негативные последствия.

1.2. Путь к пониманию лучшего дизайна и пользовательского опыта И визуальный дизайн, и проектирование пользовательского опыта являются чрезвычайно обширными дисциплинами, охватывающими множество областей специализации. Одни профессионалы в сфере проектирования пользовательского опыта сосредотачиваются на таких аспектах дизайна, как создание вайрфреймов и проектирование взаимодействия, другие — исключительно на исследованиях. Люди тратят годы на приобретение и развитие навыков в выбранной сфере. Однако любое совершенствование в профессии начинается с освоения основополагающих принципов, которые мы рассмотрим в этой книге в контексте веб-дизайна. Основными сферами визуального дизайна являются композиция, создание макета, цвет и типографика, а также то, как все эти элементы взаимодействуют между собой, создавая визуальную иерархию страницы. Мы рассмотрим основы верстки, в том числе принципы симметрии, и изучим макеты, основанные на распространенных паттернах чтения, выявленных исследователями. Что касается цвета, то нам предстоит вникнуть в принципы использования цветового круга и способы создания цветовой палитры. Даже инструменты, позволяющие сгенерировать цветовую палитру, не предусматривают руководства по выбору сочетаний цветов, это может привести к созданию слишком пестрых сайтов, которые проигрывают другим в изысканности. Что касается пользовательского опыта, то эта сфера предусматривает огромное множество специализаций, но мы коснемся лишь информационной архитектуры и определения пользовательского сценария. Среди разработчиков, с которыми я общаюсь, очень востребовано понимание различных видов пользовательского

Глава 1. Преодоление разрыва между дизайном и разработкой  35

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

1.2.1. Процесс разработки дизайна, рассматриваемый в книге Процесс разработки дизайна, описанный в книге, является итеративным. Итеративный процесс — это непрерывный цикл выпуска продукта, в нашем случае веб-сайта или веб-приложения, и постепенное внесение изменений с целью его улучшения. Однако этот процесс работает и с проектами, которые не предполагают непрерывной доработки. В последнем случае он состоит из тех же этапов, просто они не являются непрерывными. Все этапы представлены на рис. 1.3.

с троение

и

еи

улу

з

ай

ан

на

ров

и по

Тес ти

Потребность удовлетворена

UXди за

е ани ов

йн

UX-и ссл ед

Проблема

чше

ние

Ра з р

ка а б от

ди

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

Рис. 1.3. Итеративный процесс создания веб-дизайна или веб-приложения, описанный в данной книге, включает такие этапы, как определение проблемы, исследование пользователей, проектирование пользовательского опыта, разработка дизайна и построение, тестирование и оценка

Первым этапом, который мы рассмотрим, является этап исследования пользовательского опыта (UX-исследования), когда устанавливается и формулируется проблема клиента, которую необходимо решить путем создания сайта или веб-приложения. При первоначальном исследовании выясняется, что

36  Часть I. Основы дизайна пользователю нужно от сайта, и определяется целевая аудитория. В зависимости от того, что именно вы создаете, на этом этапе вам может потребоваться убедиться, что проблема, которую вы решаете, действительно актуальна для пользователя. Вторым этапом является проектирование пользовательского опыта, в рамках которого рассматриваются требования клиента и бизнеса к проекту, они объединяются с потребностями, выявленными на этапе исследования аудитории пользователей, и после этого формируется структура веб-сайта. Здесь закладывается основа для расположения визуальных элементов, которые будут использоваться на следующем этапе. Основное внимание при этом уделяется компоновке страниц, размещению контента и пользовательскому сценарию (то есть тому, как пользователи попадают из точки А в точку Б). Третий этап включает в себя фазы разработки создания дизайна и программной разработки, которые предполагают применение элементов визуального дизайна, таких как цвет, типографика и планы анимации, и собственно написание кода. Я намеренно сгруппировала этапы именно так, поскольку большинство современных команд профессионалов, с которыми я сталкивалась, уже не работают изолированно, как раньше. Разработка может начаться после согласования структуры сайта на этапе проектирования пользовательского опыта. Визуальные решения, связанные с цветом, изображениями и типографикой, могут приниматься и корректироваться по ходу дела. Четвертый этап делает этот процесс итеративным. Необходимо убедиться в том, что созданная система эффективно удовлетворяет потребности пользователей. Если это не так, надо возвращаться к началу процесса, чтобы выявить проблему и внести необходимые изменения. В зависимости от типа проекта можно добавлять новые функции и осуществлять итерации постоянно. Если речь идет о небольших или внештатных проектах (например, о разовой работе над сайтом интернет-магазина), то, скорее всего, сайт будет запущен, а затем уже будет понятно, что он функционирует и отвечает всем требованиям бизнеса. Когда сайт будет передан клиенту, тот может самостоятельно провести тестирование и оценку, убедиться, что сайт работает должным образом. Если выявятся проблемы, клиент сможет вернуться к началу и внести необходимые коррективы или произвести настройки. Фазы этого цикла можно разделить на две категории: а) основы проектирования пользовательского опыта, к которым относится исследование, так сказать, вайрфрейминг проекта (то есть определение расположения и взаимосвязей между компонентами) и тестирование, и б) основы визуального дизайна: визуальные элементы накладываются поверх вайрфреймов, возведенных на этапе разработки пользовательского опыта, чтобы вдохнуть в сайт жизнь, привнести характер и иерархичность с помощью цветов, отступов между компонентами, типографики и анимации.

Глава 1. Преодоление разрыва между дизайном и разработкой  37

Основы проектирования пользовательского опыта Пользовательский опыт — это не просто одна из составляющих проекта; его часто связывают с этапом разработки дизайна, однако он не ограничивается рамками только дизайна. Опыт пользователя сайта или приложения создается совокупностью бизнес-требований, особенностей дизайна и веб-разработки. В книге мы сосредоточимся на понимании целей и важности таких этапов, как исследование, планирование и создание вайрфреймов, которые мы рассмотрим в первых нескольких главах, а также прототипирование и тестирование в их взаимосвязи с веб-разработкой. Речь о ней пойдет в последних нескольких главах. Из понятия «пользовательский опыт» можно дополнительно выделить, например, опыт разработчика, который подразумевает взаимодействие разработчика с продуктом. Однако при этом мы окажемся ограничены чрезмерно узкими и специфическими сценариями. Освоение базовой методологии проектирования пользовательского опыта поможет вам научиться создавать продукты, ориентируясь на разных пользователей, и понимать, какие еще виды опыта могут быть применимы к вашему сайту или приложению, если ваша целевая аудитория не ограничивается одними потребителями. Хотя каждый выбор в ходе веб-разработки влияет на пользовательский опыт, мы остановимся на наиболее специфических технических решениях, принимаемых разработчиком, которые могут изменить визуальное восприятие сайта или приложения. Мы также рассмотрим решения, которые могут повлиять на опыт пользователей, не взаимодействующих с сайтом визуально. Осознание этих решений и их влияния поможет разработчикам лучше понять целевую аудиторию своего продукта и спроектировать более качественный опыт, ориентируясь на ее особенности.

Основы визуального дизайна Дизайн — язык визуальной коммуникации, которому можно научиться. Фактически это способ решения проблемы или предоставления информации с помощью визуальных средств. Поняв его основы, можно овладеть инструментами для принятия дизайнерских решений и их обоснования. Когда речь заходит о дизайне, многие разработчики часто говорят о том, что они в нем не разбираются, поскольку либо не обладают творческими способностями, либо могут распознать хороший дизайн, но не знают, как создать его самостоятельно. Прежде чем приступать к выбору шрифтов, цветов и способов компоновки элементов, необходимо определиться с основополагающими принципами дизайна, к которым относятся такие концепции, как близость, контраст, симметрия и выравнивание. Эти принципы крайне важно понять до начала этапа проектирования пользовательского опыта, поэтому в следующей главе мы начнем именно с них. Они являются основополагающими для установления взаимосвязей между расположением элементов страницы, построением

38  Часть I. Основы дизайна иерархии и наполнением контента, который привлекает пользователей на сайт. Ознакомившись с этими принципами, вы сможете приступить к проектированию пользовательского опыта, прежде чем переходить к этапу разработки визуального дизайна, который предполагает работу с цветом, типографикой и анимацией. Когда я спрашиваю разработчиков о том, с чем они испытывают наибольшие трудности, они чаще всего упоминают такие аспекты визуального дизайна, как теория цвета, выбор палитры и ее применение на сайте или в веб-приложении, типографика и верстка, в частности, вопросы создания хорошего макета. В следующей главе мы рассмотрим основные принципы дизайна в контексте разработки веб-сайта или веб-приложения. И только потом более подробно обсудим каждый из элементов дизайна. Умение сочетать такие элементы дизайна, как цвет, шрифт и пространство, и создавать с их помощью иерархию страницы и ее компоненты — это навыки, которые может освоить каждый вне зависимости о того, считает он себя творческой натурой или нет.

1.2.2. Профессиональные дизайнеры против умного дизайна Как и веб-разработка, дизайн — область, предусматривающая множество направлений и специальностей. Эта книга не является заменой формальных или даже неформальных образовательных программ. Она также не может заменить опыт, накапливаемый в процессе работы в области дизайна. Ведь некоторые специалисты по дизайну сосредоточиваются на нишевых областях: на типографике и анимации, в то время как другие занимаются поддержкой библиотек компонентов и дизайн-систем. Эта книга не сделает вас экспертом в области дизайна. Она не снабдит вас исчерпывающими знаниями обо всех его аспектах, включая логотипы и брендинг, она даже не предполагает особенно глубокого погружения в различные области дизайна и проектирования пользовательского опыта применительно к вебсфере. Она не призвана превратить разработчиков в дизайнеров. Дизайн и вебразработка представляют собой две взаимодополняющие и часто пересекающиеся области. На мой взгляд, понимание принципов дизайна полезно разработчикам в той же мере, в какой дизайнерам, разрабатывающим веб-приложения, полезно умение писать код.

1.2.3. Объединяем все вместе Итак, в следующих главах вы узнаете об основополагающих принципах графического дизайна в контексте веб и научитесь использовать эти принципы для создания иерархии веб-страницы. После этого мы поговорим о процессе

Глава 1. Преодоление разрыва между дизайном и разработкой  39

проектирования пользовательского опыта, о месте визуального дизайна в нем и о том, как эти знания соотносятся с процессом веб-разработки, что, как я уже показала выше, позволит вам повысить свою эффективность как разработчика.

Резюме Понимание основных принципов разработки дизайна и проектирования пользовательского опыта, а также способов их применения позволит вам самостоятельно создавать более качественные веб-продукты, повышать свою вовлеченность в процесс, лучше взаимодействовать с коллегами и даже писать более качественный код. Знание этих принципов и того, как они влияют на пользовательский опыт, позволит вам, как разработчику, понимать причины принятия тех или иных дизайнерских решений. Знание терминологии дизайна поможет вам более эффективно общаться с коллегами или клиентами. Вы сможете подключаться к работе над проектом на более ранних этапах и помогать команде в принятии решений, что позволит сократить количество ненужной работы, связанной с недопониманием или принципиальной невозможностью реализации той или иной дизайнерской идеи. Вместо того чтобы полагаться на сторонние фреймворки, вы можете использовать принципы дизайна для создания собственной более легкой дизайн-системы, адаптированной под решение задач вашего проекта. Меньший объем используемого кода улучшает производительность в браузере, что положительно сказывается на пользовательском опыте. Основы визуального дизайна начинаются с самых базовых понятий, связанных с созданием иерархии и взаимосвязей между фрагментами контента. Вам крайне важно разобраться с этими понятиями до начала этапа проектирования пользовательского опыта, чтобы четко представлять себе структуру этих взаимосвязей. Основы проектирования пользовательского опыта напрямую соотносятся с исследованием потребностей пользователей и получением достоверных результатов этого исследования, на их базе будет разрабатываться соответствующий опыт. Этап проектирования пользовательского опыта должен завершиться формированием фундамента, на который впоследствии будут накладываться элементы визуального дизайна. Принципы визуального дизайна, такие как типографика и цвет, — это те элементы, которые оживляют дизайн. После их наложения на ранее сформированную основу можно применять правила, описанные в следующей главе, для улучшения дизайна сайта.

2

Основные принципы дизайна

В этой главе 33 Основные принципы дизайна: близость, выравнивание, повторение, контраст и баланс. 33 Использование принципов дизайна для установления взаимосвязей между элементами и создания иерархии на странице. 33 Важность понимания основ дизайна для качественной разработки вайрфреймов.

Компоновка является наиболее важной составляющей дизайна сайта. Она буквально представляет собой фундамент для всех остальных элементов, которые впоследствии будут добавлены на сайт. Представьте себе процесс строительства дома. Прежде чем выбирать окна, жалюзи или ванну, необходимо разработать план строительства и планировку дома. Конечно, размер ванны может повлиять на планировку, однако эту ванну нельзя установить до того, как будут возведены основные конструкции. Необходимо разработать план, определяющий структуру будущего строения. Если этого не сделать, существует вероятность того, что строительство пойдет как попало и в итоге получится дом с окнами и дверьми разных размеров или

Глава 2. Основные принципы дизайна  41

с комнатами странной формы. В результате возникнет ощущение, будто с домом что-то не в порядке. В нем может быть трудно ориентироваться, или вид его окажется неприглядным. Даже после внесения последних штрихов некоторые элементы дома все равно могут не очень гармонично сочетаться между собой, что создаст впечатление незавершенности. То же может произойти и при написании кода на языках HTML, CSS и JavaScript: для обеспечения его правильной работы необходимо, чтобы он соответствовал определенной структуре. Теперь представим, что по соседству возводится дом, план которого был заранее хорошо продуман. Все его двери имеют одинаковый размер, а окна, хотя и отличаются по размеру, хорошо сочетаются друг с другом. Они обладают одинаковыми пропорциями и производят впечатление единого целого. Форма помещений является правильной, а структура самого здания — четко определенной. Ориентироваться в этом доме гораздо легче, чем в соседнем, построенном без плана. Если оба дома будут выставлены на продажу в одно и то же время, как вы думаете, какой из них будет продан быстрее или дороже? Вероятно, тот, который построен в соответствии с планом и имеет четко определенную структуру. В случае с макетом сайта ситуация аналогичная, особенно если речь идет о сайте, предназначенном для продажи товара или услуги. Представьте себе, что пользователь заходит на ваш сайт первый раз и он ошеломлен. Возможно, проблема заключается в избытке фрагментов контента одинакового размера, непонятной навигации или в том, что пользователь просто не может определиться со своим следующим шагом. Скорее всего, это заставит его покинуть сайт. Если сайт что-то продает, то уход потенциального покупателя будет означать упущенную выгоду, поскольку пользователь не дойдет до страницы оформления заказа. В некоторых случаях пользователи все-таки пробираются через плохо оформленный сайт, добавляют товары в корзину, но затем настолько разочаровываются, что покидают страницу оформления заказа, так как она слишком сложна для понимания. Основные принципы, рассматриваемые в этой главе, имеют решающее значение для создания хорошего дизайна. Выравнивание элементов создает ощущение упорядоченности, повторение помогает пользователям ориентироваться, контраст создает иерархию, а баланс придает дизайну направленность. Близость, выравнивание, повторение, контраст и баланс в контексте разработки макета сайта помогают создавать прочный фундамент для его дизайна. После создания основной структуры эти пять принципов останутся жизненно важными и найдут применение при добавлении более мелких компонентов. Они применимы к каждому элементу сайта, начиная от базового макета и заканчивая способом группировки текста и кнопок: их можно комбинировать так, чтобы сделать дизайн более привлекательным. Все эти принципы важно освоить еще до разработки визуального дизайна, даже до создания вайрфрейма на этапе проектирования пользовательского опыта. Вайрфрейм — это план или схема сайта, определяющая его структуру, где будут

42  Часть I. Основы дизайна располагаться различные фрагменты его содержимого. Именно здесь происходит первоначальная компоновка сайта, и уже на этом этапе на первый план выходят правила размещения фрагментов контента и установления взаимосвязей между ними. Подробнее о создании вайрфреймов мы поговорим в следующих главах.

2.1. Принципы дизайна Несмотря на то что дизайн представляет собой обширную предметную область, подразделяемую на множество различных дисциплин и сфер, в которых люди могут специализироваться, начиная с дизайна печатной продукции и упаковки и заканчивая дизайном видеоигр, основополагающие принципы применимы во всех его сферах. Освоение этих принципов позволяет заложить основу понимания визуального дизайна в целом и в частности причин, лежащих в основе тех или иных дизайнерских решений. В арсенале инструментов оказываются навыки применения этих принципов, которые пригодятся при отсутствии возможности обратиться к услугам дизайнера. Не обязательно быть экспертом в области дизайна, чтобы придать своему сайту привлекательный вид или внести изменения в дизайн, — для этого достаточно освоить описанные далее принципы. Количество основополагающих принципов дизайна может быть разным. В книге мы рассмотрим лишь пять из них: близость, повторение, выравнивание, контраст, баланс и симметрия. Ни один из принципов не является важнее любого другого, и они редко используются в отрыве друг от друга. Это взаимосвязанные части системы, создающей визуальную иерархию страницы и направляющей внимание пользователя. Основные принципы используются не только в контексте веб, но и в полиграфии, и в дизайне упаковки. Однако, поскольку мы занимаемся веб-дизайном, то и будем оценивать каждый из них в контексте создания вебпродуктов.

2.1.1. Близость Близость — это принцип дизайна, определяющий силу взаимосвязи между элементами. Чем ближе элементы друг к другу, тем в большей степени они воспринимаются как связанные между собой или принадлежащие к одной группе. Применение этого принципа для группировки различных элементов, по сути, представляет собой способ организации информации. Когда элементы располагаются близко друг к другу, мы воспринимаем их как части одной группы или как связанные между собой. Рассмотрим два ряда кругов на рис. 2.1. В первом ряду круги расположены на равном расстоянии друг от друга, поэтому все они воспринимаются как часть одной группы. Во втором ряду круги попарно смещаются ближе друг к другу, что увеличивает пространство между каждой парой, в результате образуется пять отдельных групп. Использование свободного

Глава 2. Основные принципы дизайна  43

Рис. 2.1. Изменение пространства между фигурами во второй строке из одной большой группы кругов создает более мелкие группы,    содержащие по два круга

пространства между элементами является ключевым способом группировки контента веб-страниц и создания значимых для пользователей различий. Благодаря легко определяемым группам фрагментов контента пользователям проще воспринимать содержимое сайта или приложения. Элементы, относящиеся к одному разделу или компоненту, следует группировать и располагать на экране близко друг к другу. Принцип близости является ключевым для группировки фрагментов контента. Элементы, изображенные на рис. 2.2, образуют две уникальные группы, несмотря на то что имеют разную форму.

Рис. 2.2. Хотя фигуры имеют разную форму, они образуют две отдельные группы благодаря значительному    пространству между этими группами

Если бы для создания различий мы использовали только принцип близости, игнорируя все остальные, то все-таки смогли бы определить, какие элементы образуют единую группу. Рассмотрим рис. 2.3, на котором изображен неформатированный список заголовков статей в блоге с ознакомительным фрагментом текста под каждым из заголовков.

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Browser font rendering inconsistencies Let’s take a look at what’s happening across different browsers when... How to use the CSS “appearance” property properly The “appearance” property has been used by developers to hack their... Diving into building apps for dual screen devices Dual screen devices have finally hit the market, but how can we start...

Рис. 2.3. Список заголовков статей в блоге, каждый с ознакомительным фрагментом текста; нет стилизации, интервалов    и четкой иерархии

Подобно горизонтальному ряду расположенных на одинаковом расстоянии окружностей, заголовки статей с соответствующими ознакомительными

44  Часть I. Основы дизайна фрагментами текста в этом вертикальном списке распределены равномерно. На первый взгляд кажется, что эти элементы принадлежат к одной группе, и лишь при ближайшем рассмотрении пользователь может понять, что это не так, и подобное представление списка даже может его слегка запутать. Из-за равномерного распределения элементов список воспринимается как одна большая группа. А теперь увеличим пространство под ознакомительными фрагментами текста, чтобы сгруппировать их с соответствующими заголовками статей (рис. 2.4).

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Browser font rendering inconsistencies Let’s take a look at what’s happening across different browsers when... How to use the CSS “appearance” property properly The “appearance” property has been used by developers to hack their... Diving into building apps for dual screen devices Dual screen devices have finally hit the market, but how can we start...

Рис. 2.4. Заголовки статей и ознакомительные фрагменты текста сгруппированы по парам с помощью пустого пространства между парами, что позволяет отра­зить взаимосвязи между частями контента. Каждая группа представляет собой отдельный фрагмент   содержимого

Увеличение пространства между парами фрагментов из заголовка статьи и текстового фрагмента позволило сделать группы более различимыми. Теперь, благодаря отступам между группами при просмотре списка, пользователь сразу поймет, что в нем содержится четыре отдельных фрагмента контента. Пустое пространство в дизайне — это не то, чего следует опасаться; оно чрезвычайно важно для создания дизайна, удобного для восприятия пользователями сайта. Многие начинающие дизайнеры стремятся заполнить как можно больше пространства на странице. Кроме того, мне часто приходилось слышать от клиентов о том, что на сайте слишком много свободного места, которое они подсознательно хотели бы заполнить, сделав элементы крупнее и сократив пространство между ними. Однако на самом деле степень удобства использования веб-продукта снижается, если связанные элементы не сгруппированы соответствующим образом, поскольку это затрудняет восприятие контента. Например, рассмотрим тот же список заголовков статей, но изменим их стиль, чтобы они лучше выделялись (рис. 2.5). Хотя выделение заголовков создает некоторое различие между фрагментами текста — заголовком и пояснением, — четкой взаимосвязи между элементами все равно не наблюдается, поскольку все они расположены на одинаковом расстоянии друг от друга. Дополнительный акцент на заголовках не делает очевидным то, что список состоит из четырех отдельных групп элементов контента. Чтобы сгруппировать их, не остается ничего другого, как только снова увеличить пустое пространство под каждой строкой текста, не выделенного жирным шрифтом (рис. 2.6).

Глава 2. Основные принципы дизайна  45

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital...

Browser font rendering inconsistencies Let’s take a look at what’s happening across different browsers when...

How to use the CSS “appearance” property properly The “appearance” property has been used by developers to hack their...

Diving into building apps for dual screen devices Dual screen devices have finally hit the market, but how can we start...

Рис. 2.5. Теперь заголовки статей оформлены жирным шрифтом, что выделяет их на фоне расположенных под ними ознакомительных    текстовых фрагментов

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital...

Browser font rendering inconsistencies Let’s take a look at what’s happening across different browsers when...

How to use the CSS “appearance” property properly The “appearance” property has been used by developers to hack their...

Diving into building apps for dual screen devices Dual screen devices have finally hit the market, but how can we start...

Рис. 2.6. Добавление интервалов позволяет разделить элементы контента на группы и установить более четкие взаимосвязи между ними. Выделение заголовка жирным шрифтом отделяет его от расположенного под ним фрагмента текста, однако близость к этому текстовому фрагменту указывает на то, что оба элемента принадлежат к одной и той же группе

Избегайте путаницы, размещая несвязанные элементы отдельно друг от друга Чаще всего пользователи, приходящие на сайт, пытаются решить какую-то задачу, поэтому стремятся как можно быстрее найти то, что им нужно. Важно помнить о том, что, хотя некоторые элементы на странице могут выглядеть и функционировать одинаково, это не всегда означает, что их следует объединять в одну группу. Таким образом, необходимо тщательно продумывать принцип группировки. Например, если на сайте используется один стиль кнопок, а на одной из его страниц расположены две разные и не связанные между собой группы элементов управления, например кнопки навигации и кнопки, предназначенные для выполнения действия (скажем, Удалить или Редактировать), следует убедиться

46  Часть I. Основы дизайна в том, что между этими двумя группами достаточно места. Недопустимо смешивать кнопки между собой, поскольку это может запутать пользователей, не желающих тратить время на выяснение их назначения (рис. 2.7 и 2.8). Add files File name.pdf File name.pdf File name.pdf Next

Back

Add

Edit

Delete

Рис. 2.7. В данном примере пользовательского интерфейса все кнопки для навигации по пользовательской форме и кнопки выполнения действий сгруппированы вместе и выглядят одинаково. Пользователю требуется время, чтобы найти нужную кнопку

Add files File name.pdf File name.pdf File name.pdf Next

Back

Add

Edit

Delete

Рис. 2.8. Более предпочтительным решением является группировка кнопок для выполнения действий и кнопок навигации на разных сторонах страницы

Создание легко просматриваемых веб-страниц с помощью принципа близости Принцип близости также играет важную роль при группировке и расположении фрагментов контента для создания легко просматриваемой веб-страницы. На рис. 2.9 показан пример страницы, элементы которой не сгруппированы, а просто расположены на одинаковом расстоянии друг от друга. В данном примере все элементы страницы расположены на равном расстоянии друг от друга, и для их группировки не используется принцип близости. Таким образом, нельзя понять, относится ли верхний прямоугольник к тексту, расположенному под ним, и к какому текстовому фрагменту относится нижний прямоугольник: расположенному выше или ниже его.

Глава 2. Основные принципы дизайна  47

Рис. 2.9. В данном примере все фрагменты контента расположены на одинаковом расстоянии друг от друга, поэтому трудно разобраться, относятся ли изображения (прямоугольники) к элементам, расположенным под или над ними

На рис. 2.10 уже используется принцип близости для смещения связанных между собой элементов ближе друг к другу и создания групп, хорошо различимых на странице. Верхний прямоугольник не имеет прямого отношения к расположенному под ним содержимому, а вот нижний прямоугольник был смещен ближе к первому текстовому фрагменту, абзац текста был сдвинут ближе к соответствующему заголовку, что в целом упрощает идентификацию отдельных групп элементов содержимого.

48  Часть I. Основы дизайна

Рис. 2.10. В этом примере мы устанавливаем взаимосвязи между элементами содержимого, используя принцип близости для группировки связанных между собой фрагментов контента и создания его разделов

Рассмотрим пример страницы на рис. 2.11, он взят с сайта webhint.io. Если мы удалим все поля и отступы, то получим один блок контента в правой части страницы, и его будет трудно считать. Все фрагменты расположены друг над другом и находятся слишком близко. Несмотря на то что некоторые заголовки имеют больший размер, взаимосвязи между различными элементами контента не очевидны.

Глава 2. Основные принципы дизайна  49

Однако, применив принцип близости (рис. 2.12), можно сгруппировать фрагменты контента, сместив текстовые блоки к соответствующим заголовкам и увеличив интервалы между этими группами. Благодаря такой группировке содержимое страницы становится намного более понятным и легким для восприятия.

Рис. 2.11. В данном примере не используются интервалы и принцип близости, что создает единый блок текста

Рис. 2.12. Объединение заголовков и соответствующих им текстовых блоков упрощает восприятие отдельных групп элементов контента

50  Часть I. Основы дизайна Когда вы применяете принцип близости к различным элементам пользовательского интерфейса на странице, вашей целью является создание разделов контента, легко считываемых пользователями. Нужно уменьшать когнитивную нагрузку посетителей сайта и создавать пользовательский интерфейс, который не будет перегружать. Формы на экране — это еще один блок, в котором принцип близости может избавить пользователя от ощущения, будто он столкнулся со сплошной стеной контента. На рис. 2.13 показана форма заказа, в которой поля ввода никак не сгруппированы. Такая форма выглядит несколько тяжеловесно. Код этой страницы содержит монотонную последовательность текстовых полей, изредка перемежающихся HTML-элементами . Однако если разбить эту форму на различные разделы, как показано на рис. 2.14, она станет гораздо менее перегруженной. Группы взаимосвязанных элементов, расположенные внутри формы, послужат пользователю в качестве естественной точки остановки, если он решит сделать паузу и вернуться к заполнению формы позднее. Подобная группировка также делает код внешнего интерфейса более организованным. Платежная информация и данные банковской карты будут сгруппированы в коде в отдельные контейнеры div. В результате код будет визуально оформлен не в виде одного огромного списка текстовых полей, а в виде двух обособленных разделов, что в будущем облегчит разработчику процесс внесения изменений. Цель разработчика — уменьшить количество размышлений пользователя о том, как взаимодействовать со страницей. Установление четких взаимосвязей путем объединения элементов в группы — это первый шаг к созданию чистого пользовательского интерфейса.

Близость: принцип установления взаимосвязей Близость — это принцип установления взаимосвязей, который крайне важно усвоить. Он вступает в силу при планировании и организации сайта еще до того, как вы начнете задумываться о визуальном дизайне и стилевых решениях. На этапе создания вайрфрейма для проекта не стоит уделять внимание точности и проработке деталей визуального дизайна. Вместо этого следует сосредоточиться на группировке и организации контента и компонентов, а также на определении примерного расположения фрагментов содержимого на веб-странице, чтобы обеспечить логическую взаимосвязь между его крупными разделами. Добавьте интервалы между несвязанными группами элементов, чтобы сделать страницу более легкой для восприятия пользователями и помочь им избежать путаницы или неопределенности при выполнении их задач. Группировка взаимосвязанных элементов контента еще до применения других принципов дизайна является фундаментальным способом разграничения

Глава 2. Основные принципы дизайна  51

Рис. 2.13. Эта форма оплаты заказа состоит из несгруппированных текстовых полей, что усложняет ее восприятие

52  Часть I. Основы дизайна

Рис. 2.14. Если сгруппировать взаимосвязанные поля ввода и добавить заголовки разделов, то форма оплаты заказа станет более простой для восприятия

Глава 2. Основные принципы дизайна  53

фрагментов контента. Пример, показанный на рис. 2.4, демонстрирует эту концепцию на самом базовом уровне, где нет ничего, кроме пробела между каждым заголовком блога и группой абзацев текста. Определение отношений между элементами контента с помощью принципа близости перед применением остальных принципов дизайна помогает создать структуру сайта и прояснить взаимосвязи между фрагментами его содержимого. А уж потом можно переходить к созданию иерархии в макете веб-страницы и подключать другие принципы.

2.1.2. Выравнивание Встретившись со словом «выравнивание», разработчики могут вспомнить множество различных CSS-свойств и способов позиционирования элементов на странице с помощью языка CSS. А возможно, этот термин наведет их на мысли об одной из самых распространенных задач верстки в истории веб-дизайна, связанной с выравниванием текста по вертикали и по центру на странице или в блоке . В контексте веб-дизайна выравнивание относится к позиционированию элементов по различным осям, по другим способам выравнивания групп элементов для создания целостной единицы, а также к выравниванию текста, например по правому краю или по ширине. При разработке веб-дизайна требование выравнивания элементов является более жестким по сравнению с разработкой дизайна печатной продукции. В программном обеспечении, которое используется для дизайна печатной продукции, оно ничем не ограничено, тогда как в случае с веб-дизайном мы ограничены особенностями платформы и кодом, который пишем для создания макета. Разместить элемент в произвольном месте веб-страницы сложнее, чем при разработке печатной продукции. Даже в редакторах, предназначенных для создания макетов веб-страниц, позволяющих располагать элементы методом их перетаскивания, это перетаскивание ограничено изначально заданной общей структурой сайта. В них можно поместить на страницу случайные элементы, но никак не получится разместить их на ней произвольным образом. Как разработчик, вы наверняка умеете использовать код для выравнивания различных элементов на странице, однако определенная структура этого выравнивания изначально задается веб-платформой и подключается, когда приводятся в действие такие инструменты, как CSS Grid или Flexbox, для определения макета страницы. Например, если я задаю свойство display: flex; для родительского элемента, имеющего два дочерних элемента, то на основании одной лишь этой строки кода веб-платформа уже будет иметь представление о том, как будет отображаться макет. Однако при разработке сайта вы, скорее всего, не будете применять свойство display: flex; к одной строке контента. Здесь большую важность имеет понимание принципа выравнивания, того выравнивания, которое задает порядок элементов на странице.

54  Часть I. Основы дизайна Выравнивание — это еще один способ организации и установления взаимосвязей между элементами страницы путем их выстраивания вдоль некой невидимой линии. Подобное выравнивание помогает создать структуру страницы, является залогом ее легкого считывания. Даже если вы создаете макет сайта, который отличается от распространенных в интернете шаблонов и выглядит более произвольно и менее структурированно, выравнивание определенных групп элементов позволит сделать этот макет законченным и структурированным.

Различные способы выравнивания Двумя основными способами выравнивания элементов на странице являются выравнивание по краям и выравнивание по центру. Выравнивание по краям предполагает выравнивание элементов по верхнему, нижнему, левому или правому краю композиции, как показано на рис. 2.15.

Рис. 2.15. Способы выравнивания элементов по краям (сверху вниз, слева направо): по левому краю, по верхнему краю, по правому краю,    по нижнему краю

При выравнивании по центру элементы выравниваются по горизонтали или вертикали вдоль центральной оси. При горизонтальном выравнивании элементы выстраиваются относительно центра их горизонтальных осей, а при вертикальном — относительно центра вертикальных осей, как показано на рис. 2.16. Выравнивание по краям и по центру применимо не только к группам элементов на странице, но и к тексту. Выравнивание текста на веб-странице, как и в печати, может осуществляться несколькими способами, а именно по левому и правому краю, по центру и по ширине, как показано на рис. 2.17. Выравнивание текста по краям и по центру ничем не отличается от описанных выше способов выравнивания других элементов страницы. Выравнивание по ширине предполагает увеличение или уменьшение расстояния между словами для выравнивания

Глава 2. Основные принципы дизайна  55

Вертикальное выравнивание

Горизонтальное выравнивание

Рис. 2.16. Выравнивание элементов относительно центра их вертикальных и горизонтальных осей

По левому краю

По центру

По правому краю

По ширине

Рис. 2.17. Различные способы выравнивания текста, которые можно применить в дизайне

текста одновременно по правому и левому краю блока. Основная проблема, на которую следует обращать внимание при выравнивании текста по ширине, заключается в больших пробелах между словами. Появление чрезмерного расстояния между словами отрицательно сказывается на эффективности считывания текста (рис. 2.17), о чем мы еще поговорим в главе 7.

56  Часть I. Основы дизайна Комбинирование способов выравнивания Хотя выравнивание текста — это лишь одна из характеристик, которую необходимо учитывать при расположении элементов на странице, оно является важной составляющей ее компоновки и помогает создать порядок и четкую иерар­хию. В некоторых случаях несколько элементов, включая блок текста, могут быть выровнены по одному краю. Однако результат этого выравнивания может оказаться смешанным из-за центрирования текста внутри ограничивающей его рамки, выровненной по краю. Комбинирование способов выравнивания элементов на странице может придать макету более уникальный и интересный вид, однако при этом основное внимание следует уделять более крупным группам фрагментов контента, а не отдельным элементам, составляющим группу. В качестве примера рассмотрим рис. 2.18. Напомню, что мы имеем дело с набором ссылок на статьи. Каждый компонент состоит из заголовка статьи, ознакомительного фрагмента и кнопки Read more (Читать далее). В примере на рис. 2.18 заголовок, фрагмент текста и кнопка выровнены по левому краю, как видно по их ограничительным рамкам. Однако текст фрагмента статьи выровнен по центру. А теперь рассмотрим эти компоненты без ограничительных рамок (рис. 2.19). Теперь, когда ограничительные рамки не видны, фрагмент текста визуально воспринимается выровненным по центру, несмотря на то что его ограничительная рамка остается выровненной по левому краю. Этот вариант компоновки выглядит странновато, поскольку четкая граница, созданная выравниванием всех элементов по левому краю, нарушается средним текстовым фрагментом, выровненным по центру. Вдоль левого края нет невидимой линии, связывающей содержимое. Однако, как только мы выравниваем текст по левому краю, как показано на рис. 2.20, вид компонентов становится заметно более гармоничным.

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Read more >

Let’s take a look at what’s happening across different browsers when... Read more >

How to use the CSS Lorem ipsum “appearance” property properly

Read more >

Рис. 2.18. Очерченные границы блоков контента показывают, что, хотя элементы (в данном случае контейнеры ) могут быть выровнены одним способом, использование другого способа выравнивания текста внутри элементов может оказать заметное влияние на воспринимаемую целостность компонентов

Глава 2. Основные принципы дизайна  57

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Read more >

Let’s take a look at what’s happening across different browsers when...

Lorem ipsum How to use the CSS “appearance” property properly

Read more > Read more >

Рис. 2.19. В отличие от заголовка статьи и кнопки, текстовый фрагмент выровнен по центру

Несмотря на все сказанное выше, я не призываю отказываться от комбинирования способов выравнивания элементов при разработке макета веб-страницы. Иногда их смешение позволяет создать гораздо более интересную композицию. Просто при выборе способов выравнивания стоит рассматривать компоненты как единое целое в контексте разделов веб-страницы.

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Read more >

Let’s take a look at what’s happening across different browsers when...

Lorem ipsum How to use the CSS “appearance” property properly

Read more > Read more >

Рис. 2.20. Выравнивание всех компонентов по левому краю делает их более целостными

Пока я разрабатывала сайт для инструмента лайтинга webhint, его дизайн не­однократно обновлялся. Я помню, как экспериментировала с различными способами выравнивания отдельных компонентов контента. Сначала я пыталась сочетать текст, выровненный по левому краю, с контентом, основная часть которого была выровнена по центру, но этот вариант показался мне недостаточно гармоничным. Тогда я сосредоточилась на отдельных группах элементов и применила к ним разные способы выравнивания, чтобы подчеркнуть различие между соответствующими разделами контента (рис. 2.21).

58  Часть I. Основы дизайна

Рис. 2.21. В данном примере к разным разделам применены разные способы выравнивания, что помогает разграничить содержимое страницы

Как видно на рис. 2.21, первая группа элементов выровнена по левому краю, а вторая содержит еще несколько групп с изображениями. Поскольку в данном случае иллюстрации не имеют четкой прямоугольной формы, я решила выровнять элементы каждой из этих групп по центру. Однако основным мотивом центрирования содержимого этого раздела было намерение установить границу между ним и разделом, расположенным выше. На рис. 2.22 показано, как выглядел бы этот раздел, если бы все его содержимое было выровнено по левому краю. Несмотря на то что белая полоса выделяет этот раздел как новый, при выравнивании его элементов по левому краю он сливается с остальной частью страницы. Выравнивание по центру помогает подчеркнуть различие между разделами и упрощает восприятие содержимого сайта пользователем. Правильно подобранное выравнивание помогает создать невидимые линии, которые направляют внимание пользователя и вызывают у него ощущение

Глава 2. Основные принципы дизайна  59

упорядоченности. Страница, изображенная на рис. 2.23, содержит список из нескольких отелей, и, хотя их названия выровнены по верхнему краю, из-за разной длины элементов контента содержимое правого столбца оказывается сдвинутым вниз относительно двух других. Кроме того, названия отелей выровнены по центру, в отличие от остальных компонентов. Это нарушает невидимую линию, образованную компонентами, выровненными по левому краю.

Рис. 2.22. Второй раздел сайта выровнен по левому краю, как верхний и нижний разделы

На рис. 2.24 показан скорректированный макет, в котором названия отелей выровнены по левому краю и смещены вниз под изображения. Несмотря на то что название отеля справа по-прежнему занимает две строки, все компоненты теперь имеют одинаковые размеры благодаря выравниванию кнопок внизу. Это создает ощущение упорядоченности. Средние фрагменты не требуют идеального выравнивания, так как выравнивание верхнего и нижнего компонентов делает столбцы одинаковыми по форме.

60  Часть I. Основы дизайна

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

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

Глава 2. Основные принципы дизайна  61

Рис. 2.24. Выравнивание всего содержимого по левому краю и смещение названий отелей под изображения создает иллюзию, будто каждый компонент представляет собой прямоугольник, благодаря этому страница кажется более упорядоченной

Выравнивание: ключ к созданию порядка Мы хотим, чтобы наш веб-контент был легко воспринимаемым и удобным для использования. Задайте сильную линию и используйте ее для расположения элементов на странице. Такое выравнивание визуально свяжет фрагменты контента сайта и поможет пользователям понять взаимосвязи между элементами.

62  Часть I. Основы дизайна Не бойтесь использовать различные способы выравнивания на своем сайте, однако принимайте эти решения системно, стараясь не применять разные способы выравнивания к фрагментам одного и того же небольшого компонента. Смешение способов выравнивания позволяет более эффективно разграничить разделы на сайте и повысить уровень вовлеченности пользователя благодаря созданию более динамичной компоновки элементов, которая будет направлять его внимание при просмотре контента. Правильное применение выравнивания на сайте позволит создать четкую структуру даже при использовании более абстрактной компоновки или нестандартных сеток. Понимание процесса создания такой структуры с помощью выравнивания, начиная с уровня компонентов и заканчивая общим макетом страницы, поможет вам внести ясность в содержимое страницы при создании макетов на основе нестандартных и более сложных вариантов сеток, которые мы рассмотрим в главе 6.

2.1.3. Повторение Принцип повторения в дизайне позволяет обеспечить единообразие. Многократное использование в любом произведении одних и тех же стилей и элементов дизайна, например форм, позволяет создать ощущение единства и установить закономерности. Повторение имеет два аспекта, непосредственно относящихся к веб-дизайну. Многократное использование на сайте таких визуальных элементов, как формы или другие графические объекты, позволяет обеспечить единство фирменного стиля. С более практической точки зрения создание и повторное использование компонентов и стилей может помочь пользователям сайта выявить закономерности в действиях, выполняемых определенными группами компонентов пользовательского интерфейса. Этот принцип также чрезвычайно важен для разработки веб-дизайна и написания кода. Представьте, что вы, как разработчик, создаете крупный сайт, каждую страницу которого дизайнер сделал уникальной, то есть не использовал никакие компоненты или стили повторно. Работа над таким проектом, скорее всего, показалась бы вам слишком утомительной, а объем уникального кода, вероятно, повлиял бы на производительность сайта. Создание компонентов, которые можно использовать на нескольких страницах, не только делает внешний вид сайта более целостным, но и обеспечивает лучшую масштабируемость его кода. Если впоследствии в проект будут добавлены новые страницы, у вас уже будет готовая библиотека компонентов и стилей, позволяющая сократить объем загружаемого кода, что положительно скажется на производительности сайта (в плане уменьшения времени его загрузки).

Глава 2. Основные принципы дизайна  63

Повторение: создание согласованного опыта С точки зрения дизайна повторение является ключом к созданию единого впечатления от бренда как во Всемирной паутине, так и в печати. В контексте веб-разработок многократное использование элементов и компонентов является особенно важным, если мы стремимся снизить когнитивную нагрузку на посетителей сайта. Мы хотим, чтобы у пользователей был единообразный опыт работы на нашем сайте, поэтому используем одни и те же цвета, шрифты и другие визуальные элементы, чтобы установить нужные взаимосвязи и даже сориентировать пользователей, косвенно подсказывая, в каком разделе сайта они находятся. Повторение устанавливает взаимосвязи между фрагментами содержимого и помогает пользователям быстро выявлять повторяющиеся элементы. Если мы вновь обратимся к простому списку заголовков статей в блоге (рис. 2.25), то заметим повторное использование одних и тех же стилей шрифтов для оформления заголовка и ознакомительного текстового фрагмента. В этом примере заголовки выделены жирным шрифтом, а расположенные под ними фрагменты текста набраны обычным. Если мы встретим подобное оформление группы элементов контента в другом разделе сайта, то, скорее всего, предположим, что она относится к тому же типу содержимого, то есть представляет собой список постов или статей.

What the heck is an Origin Trial? In this blog post I’ll explain what an origin trial is and how it’s vital... Browser font rendering inconsistencies Let’s take a lookat what’s happening across different browsers when... How to use the CSS “appearance” property properly The “appearance” property has been used by developers to hack their... Diving into building apps for dual screen devices Dual screen devices have finally hit the market, but how can we start...

Рис. 2.25. Для установления закономерности использованы одни и те же шрифты при оформлении заголовков статей и соответствующих ознакомительных фрагментов

Повторное использование шаблонов и стилей для оформления элементов содержимого не только помогает пользователям понять, чего им ожидать при посещении сайта, но и делает их опыт более упорядоченным. Рассмотрим рис. 2.26, на котором показана часть пользовательского интерфейса, оформленного без применения принципа повторения.

64  Часть I. Основы дизайна

Рис. 2.26. В данном примере одинаковые размеры имеют только текстовые описания и кнопки, но этого недостаточно для того, чтобы связать элементы между собой, поэтому страница в целом выглядит неупорядоченной

Здесь изображения имеют разную ширину и высоту, а названия отелей и значения их рейтинга различаются по размеру. Ничто не говорит пользователю о том, почему размеры или цвета этих элементов должны быть разными. В каждом объявлении содержится одна и та же информация об отеле, поэтому нет никаких причин для использования разных стилей при их оформлении. Из-за них содержимое страницы выглядит разрозненно и неаккуратно. Наличия одинаковых элементов в объявлениях недостаточно для создания легко распознаваемого паттерна. Рассмотрим скорректированную версию этого примера, в которой все элементы оформлены в едином стиле.

Глава 2. Основные принципы дизайна  65

Как видно на рис. 2.27, применение одних и тех же стилей к элементам делает страницу более чистой и легкой для восприятия. Кроме того, оказывается легче считать каждый из элементов списка в качестве объявления и отыскать в нем рейтинг отеля; не нужно гадать, что означают разные цвета или разные размеры текста. Пользователи могут ожидать того, что данный паттерн используется по всем сайту, понять, что его содержимое представляет собой список отелей, и узнать, где можно найти необходимую информацию. Нужно добиться, чтобы пользователи быстро определяли, на что они смотрят и где они находятся на сайте, и в формировании необходимых закономерностей помогает принцип повторения.

Рис. 2.27. Применение одинаковых стилей для оформления всех объявлений делает страницу удобочитаемой и доступной для восприятия

66  Часть I. Основы дизайна Использование принципа повторения создает ощущение единства, которое может распространяться не только на веб-сайт, но и на бренд в целом, если речь идет о производителе физических продуктов. Возьмем, к примеру, сайт компании ipsa, представленный на рис. 2.28. В качестве основы фирменного стиля бренда используется желтый цвет и уникальный блочный шрифт, который выравнивается по ширине строки. Этот шрифт и цвет используются и в дизайне упаковки продуктов, которые компания ipsa демонстрирует на своем сайте, благодаря чему сразу возникает ощущение, что физическая продукция является частью того же бренда. Дизайн ее упаковки вписывается в эстетику сайта, что создает целостный образ бренда.

Рис. 2.28. Компания ipsa использует одни и те же цвета и шрифты в дизайне и сайта, и упаковки физической продукции, что создает целостный образ ее бренда. (Источник изображения: Alright Studios, Бруклин, Нью-Йорк)

Глава 2. Основные принципы дизайна  67

Повторение в макете: помощь пользователям в ориентации на сайте Использование принципа повторения важно даже при разработке макетов второстепенных страниц. Обычно главная страница имеет особенно выразительный макет, который призван привлечь внимание пользователя и быстро предоставить ему информацию небольшими фрагментами. Второстепенные страницы должны иметь похожую компоновку в зависимости от типа представленного на них контента. Если имеются три второстепенные целевые страницы, то все они должны иметь общий макет. Предположим, что разработчики пошли еще дальше и добавили страницы товаров под эти целевые страницы; эти новые страницы также должны иметь единообразный макет, поскольку все они выполняют одну и ту же функцию — предоставляют информацию о товарах. Если бы вам нужно было создать набор страниц с документацией для пользователей, вы бы не стали разрабатывать разные макеты для каждой из них. Как пользователь, я была бы крайне озадачена, если бы на очередной странице с документацией обнаружила компоновку, не похожую на компоновку той страницы, с которой я только что перешла. Я бы подумала, что произошла какая-то техническая ошибка или усомнилась в правильности ссылки. Я могла бы даже немного расстроиться из-за того, что мой мыслительный процесс был прерван неожиданным изменением и необходимостью заново убеждаться в том, что я нахожусь в нужном месте.

Повторное использование компонентов пользовательского интерфейса для обозначения их функции Помимо использования одной и той же компоновки для помощи посетителям в ориентации на сайте, принцип повторения может применяться к компонентам пользовательского интерфейса для обозначения их функции. Например, рассмотрим набор кнопок, которые я обнаружила в дизайне сайта компании LEGO (https://lego.com) во время написания этой книги (рис. 2.29). Для оформления всех кнопок Add to Bag (Добавить в корзину) на сайте LEGO использовался оранжевый цвет.

Рис. 2.29. Оранжевые кнопки указывают на возможность добавления товара в корзину. Использование цвета в данном случае сразу дает понять, что владелец сайта намеревается привлечь внимание посетителя к кнопке Add to Bag (Добавить в корзину)

68  Часть I. Основы дизайна Когда мы видим оранжевый цвет при просмотре этого сайта, то сразу идентифицируем элемент пользовательского интерфейса, который выполняет конкретное действие — добавляет товар в нашу корзину. Мы ожидаем от него соответствующего поведения, опираясь на выявленную закономерность. Однако при дальнейшем исследовании сайта LEGO я заметила изменения в оформлении кнопок, выражавшиеся в использовании других цветов (рис. 2.30).

Рис. 2.30. Для обозначения товаров, которые уже закончились (Out of Stock) или еще не появились в продаже (Coming Soon), используются фальшивые кнопки других цветов

Кнопки идентифицируют наличие или отсутствие товара на складе. Некоторые оранжевые кнопки теперь содержат надпись Backorder (Отложенный заказ). Если можно добавить товар в корзину для создания отложенного заказа, зачем менять текст кнопки с Add to Bag (Добавить в корзину) на другую надпись, указывающую на доступность товара на складе? Использование трех разноцветных компонентов, различающихся по своим функциям, скорее всего, создаст дополнительную когнитивную нагрузку. Для обозначения того, что товар не может быть добавлен в корзину, используется несколько цветов. Если следовать логике, согласно которой цвет кнопки товара говорит о его наличии на складе, то кнопка Backorder (Отложенный заказ) должна иметь другой цвет. Одним из возможных решений могло бы явиться создание специальных значков для закончившихся товаров, тех товаров, которые скоро появятся в продаже, и тех, которые доступны для отложенного заказа, и выделение серым цветом кнопок для всех товаров, которые не могут быть добавлены в корзину. Это позволило бы уменьшить количество разноцветных кнопок (часть которых даже не являются настоящими кнопками!) и усилить призыв к добавлению товара в корзину. Нужно, чтобы люди могли быстро выявлять закономерности, облегчающие решение тех задач, ради которых они пришли на сайт. Ключевую роль здесь играет снижение когнитивной нагрузки. В этом помогает принцип повторения, однако разработчикам надо постараться использовать его так, чтобы не запутать конечных пользователей.

Глава 2. Основные принципы дизайна  69

Повторение: установление отношений и ориентация пользователей Повторение — это еще один принцип, который помогает установить взаимосвязь между фрагментами содержимого веб-сайта. Достигается это путем использования одинаковых визуальных элементов или одинаковых способов организации компонентов и страниц, схожих по типу контента или функции. Использовать принцип повторения в дизайне веб-продуктов следует с осторожностью, так как применение паттерна, предназначенного для выполнения определенной задачи, к элементам, имеющим другие функции, может привести к путанице. В конечном итоге принцип повторения позволяет обеспечить целостность пользовательского опыта и даже связать его с другими элементами дизайна, например с печатными материалами, чтобы донести до посетителя сайта связную историю бренда.

2.1.4. Контраст Контраст — это принцип дизайна, который при правильном использовании позволяет сделать сайт или приложение визуально привлекательным. С помощью контраста мы стремимся привлечь внимание пользователей к определенному фрагменту содержимого. Как и все остальные принципы дизайна, этот позволяет создать иерархию и порядок на странице. Применение контраста — наиболее эффективный способ фокусировать и направлять внимание пользователя. При взгляде на рис. 2.31 мы сразу же обращаем внимание на фигуру, которая отличается от остальных. Она выделяется на их фоне. При использовании контраста для разграничения элементов следует стремиться к тому, чтобы они максимально отличались друг от друга.

Рис. 2.31. При рассмотрении данного изображения в глаза сразу бросается ромб,    окруженный кругами

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

70  Часть I. Основы дизайна должны иметь возможность легко просканировать страницу и решить, куда двигаться дальше. Предоставьте им эту возможность путем эффективного использования контраста.

Контраст цветов Принцип контраста может использоваться различными способами, и первым на ум приходит цветовой контраст, который очень важен для обеспечения доступности веб-контента. Хороший цветовой контраст на сайте, особенно когда речь идет о типографике и элементах форм, крайне важен для легкости сканирования страницы и выделения фрагментов ее содержимого. Плохой цветовой контраст на сайте может вызвать огромные проблемы с восприятием контента и даже заставить пользователей покинуть его. Просматривая сайты, я часто вижу белый текст, помещенный поверх никак не обработанного главного изображения (рис. 2.32).

Рис. 2.32. Белый текст на изображении, которое является недостаточно контрастным для того, чтобы надпись на нем как-то выделялась

Белый текст на фотографии, содержащей достаточно много белого цвета, — это не лучший вариант в плане легкости восприятия. Выбор шрифта тоже играет важную роль. Еще одним распространенным и не самым удачным вариантом является выбор очень тонкого шрифта для текста, размещенного поверх недостаточно темной фотографии. Пользователи не хотят напрягать глаза, пытаясь прочитать содержимое сайта, поэтому убедитесь в том, что вы накладываете текст на достаточно темное изображение (рис. 2.33), или немного обработайте этот текст. Однако изображения — это не единственное, на что следует обращать внимание, когда речь заходит о цветовом контрасте. Дизайн многих сайтов, особенно блогов

Глава 2. Основные принципы дизайна  71

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

Рис. 2.33. В данном случае выбранная фотография имеет менее перегруженный фон и является достаточно темной для того, чтобы белый текст на ней казался ярким и читаемым

На рис. 2.34 показан футер, с которым я столкнулась на сайте одного из интернет-магазинов. Владелец использовал белый текст поверх бледно-розового фона на всех страницах своего сайта. Хотя в данном примере он кажется вполне читаемым, на цифровом экране он таким не является.

Рис. 2.34. Белый текст на бледном фоне — это настоящий кошмар с точки зрения цветового контраста. Такой текст покажется нечитаемым большинству, если не всем пользователям сайта

Чтобы обеспечить удобочитаемость, необходимо использовать на сайте сильно контрастирующие между собой цвета для текста и его фона. Отмечу, что такие цвета можно использовать и в других целях. Высококонтрастные цвета, то есть

72  Часть I. Основы дизайна цвета, расположенные напротив друг друга на цветовом круге, например зеленый и красный, могут использоваться для привлечения внимания. Однако пользователей сайта не стоит перегружать, поэтому добавляйте контраст для привлечения их внимания лишь к наиболее важным частям сайта. Чрезмерное использование контрастных цветов может привести к тому, что дизайн станет перегруженным и трудным для восприятия, а это совсем не то, к чему мы стремимся. Отличным примером минимализма в использовании цвета для привлечения внимания пользователя является сайт платформы Toast (https://toast.resn.co.nz/), представленный на рис. 2.35. Он оформлен в нейтральных тонах, но один крупный синий круг сразу же привлекает внимание. Мы видим его еще до того, как прочитаем основной заголовок сайта. Просканировав эту область, мы переходим к следующей области с наибольшим контрастом — к основному заголовку, а затем просматриваем остальное содержимое страницы. Использование контрастности цветов здесь является минимальным, но чрезвычайно эффективным в плане направления внимания пользователя.

Рис. 2.35. Внимание пользователя сразу же фокусируется на синем круге, так как остальные цвета по сравнению с ним являются довольно приглушенными. (Источник изображения: Toast!, https://toast.resn.co.nz/)

Глава 2. Основные принципы дизайна  73

Еще один пример сильного контраста можно найти в оформлении сайта, представленного на рис. 2.36. В его дизайне используются различные оттенки синего цвета, и мы сразу обращаем внимание на основной заголовок, причем не только из-за цвета, но и из-за размера шрифта. Очевидно, что мы должны сначала сфокусироваться на этом заголовке, после чего обратить внимание на абзац слева и только потом заметить расположенное ниже слово Scroll. В данном случае контраст не является чрезмерным, поскольку в поле зрения попадает всего несколько элементов и с заголовком ничто не конкурирует. Наше внимание вполне эффективно направляется к следующему разделу.

Рис. 2.36. Здесь контраст создается за счет использования крупного текста ярко-синего цвета на темном фоне. Крупный шрифт сразу же направляет взгляд посетителя вправо, затем на текст слева и далее вниз

Далее в книге мы более подробно рассмотрим теорию цвета, различные типы цветовых палитр и способы эффективного использования цвета для создания контраста, не производящего тяжелого впечатления. Однако создать контраст на странице можно не только с помощью цвета, но и с помощью размера, формы и типографики.

74  Часть I. Основы дизайна Создание контраста с помощью размера Еще один способ создания контраста на странице предполагает применение элементов различных размеров. Чем крупнее элемент, тем более заметным он является по сравнению с более мелкими элементами. На рис. 2.37 показан пример того, как размер может быть использован для привлечения внимания пользователя. Посетитель сайта сразу же фокусируется на тексте, заполняющем всю страницу. На самом деле текста не так много, поэтому он не создает ощущения перегруженности.

Рис. 2.37. Использование очень крупного черного текста на этом сайте мгновенно привлекает внимание посетителя. (Источник изображения: European Review of Books, https://europeanreviewofbooks.com/)

В качестве акцента на сайте The European Review of Books (см. рис. 2.37) используется крупный текст. На странице отсутствуют цветные элементы, привлекающие внимание, но крупный, жирный шрифт выделяется на фоне абзацев, набранных более мелким шрифтом. Для создания контраста необходимо сделать так, чтобы элементы на странице сильно отличались друг от друга. При использовании слишком большого количества элементов одинакового размера страница может показаться загроможденной

Глава 2. Основные принципы дизайна  75

и тяжелой для восприятия. Вы можете также смело экспериментировать с пустым пространством. Изменение ширины столбцов и увеличение свободного пространства на полях может создать дополнительный контраст. Блок текста в правой части страницы, контрастирующий с крупным заголовком, также предусматривает большую пустую область слева. В данном случае свободное пространство помогает сконцентрировать внимание пользователя на абзаце после сканирования заголовка. Использование разницы в размерах для создания иерархии — важная часть процесса построения системы шрифтов для сайта. При просмотре содержимого по размеру шрифта мы можем определить, какую роль играет тот или иной фрагмент текста. Основной заголовок страницы должен отличаться от ее подзаголовка. Просматривая страницу, пользователь определяет взаимосвязанные элементы на основании их сходства, поэтому нужно сделать так, чтобы эти стили сильно отличались друг от друга. Эффективное использование разницы в размерах для разграничения элементов позволяет создать контраст на веб-странице и привлечь внимание пользователей к наиболее важной информации. Чтобы не запутать посетителей сайта, имеет смысл применять элементы разного размера для создания иерархии и визуально интересного и удобного для восприятия дизайна страницы.

Создание контраста с помощью форм Использование различных форм также позволяет создать контраст в дизайне. Существует два типа форм: органические и геометрические (рис. 2.38). Органические формы являются менее определенными и часто напоминают природные объекты. К геометрическим формам относятся четкие прямоугольники, тре­ угольники и круги.

Геометрические формы

Органические формы

Рис. 2.38. Геометрические и органические формы

76  Часть I. Основы дизайна Использование фигур в качестве основного акцента позволяет повысить интенсивность контраста на странице. Например, для привлечения внимания к одной органической форме ее можно разместить по соседству с несколькими геометрическими фигурами. Помимо всего прочего такие фигуры можно использовать для улучшения дизайна сайта и придания ему более причудливого вида в соответствии с его тематикой. На рис. 2.39 показана страница сайта Calgee, в оформлении которой используются органические формы, хорошо сочетающиеся с продающимся на этом сайте товаром — добавками Омега-3, получаемыми из рыбы. Этот сайт выполнен в морской тематике, и использование органических форм, напоминающих коралловые рифы, придает его дизайну особый характер.

Рис. 2.39. На сайте компании Calgee эффективно используются органические формы, соответствующие морской тематике дизайна

С помощью размера, формы и цвета можно подчеркнуть основной акцент на сайте. Сильнее всего этот эффект должен проявляться на главной странице, где вам необходимо мгновенно привлечь и удержать внимание пользователя. Мы не хотим, чтобы все содержимое главной веб-страницы казалось однообразным. Главная страница — это возможность быстро произвести впечатление на посетителей сайта. Просканировав ее, они должны сразу оценить, смогут ли решить стоящую перед ними задачу или получить нужную информацию. Контраст помогает выделить элементы на странице, установить иерархию и создать интересную, привлекающую внимание композицию.

Глава 2. Основные принципы дизайна  77

2.1.5. Баланс Баланс — это принцип дизайна, который связан с измерением так называемого визуального веса элементов композиции. Несбалансированный дизайн обычно кажется непропорциональным и перегруженным тяжеловесными и неправильно распределенными элементами. Он может постоянно возвращать внимание посетителя к одной и той же фокусной точке, тогда как сбалансированный дизайн направляет взгляд человека по всему содержимому. Подобное смещение фокуса очень важно для пользователей сайта. Хорошо сбалансированный дизайн позволит им быстро перемещаться по сайту и легко воспринимать фрагменты его контента. В контексте веб-дизайна балансировка начинается с компоновки блоков сайта, после чего элементам придается дополнительный вес либо с помощью цвета (темные цвета имеют больший вес, чем светлые), либо с помощью таких факторов, как размер элементов, тип используемых фотографий и стиль шрифтов. Все это вносит свой вклад в обеспечение баланса страницы и при неправильном применении может нарушить его. Баланс может быть симметричным и асимметричным. Первый является более предсказуемым и несколько скучным, а второй — более интересным и, пожалуй, более распространенным во Всемирной паутине.

Симметричный баланс Симметричный баланс обычно характеризуется однообразием. Этот тип баланса достигается за счет создания одинаковой визуальной нагрузки на каждую сторону макета. Согласно более строгому определению, симметрия предполагает расположение соответствующих элементов по разные стороны от ее оси. Если взять одну половину фигуры, создать ее копию и повернуть эту копию относительно оси, как показано на рис. 2.40, она станет идеальным отражением исходной половины фигуры.

Рис. 2.40. Эти фигуры симметричны, а некоторые из них симметричны не по одной, а по нескольким    осям

Во Всемирной паутине вам вряд ли удастся найти идеально симметричный дизайн из-за разницы в объеме контента. Однако можно создать симметричный

78  Часть I. Основы дизайна макет, в котором будут равномерно распределены повторяющиеся визуальные элементы. Хорошим примером симметричного макета является целевая страница сайта ENSEMBL (рис. 2.41 и 2.42). Проведенная по центру четкая линия делает сетку макета явно выраженной. Баланс достигается с помощью чередования изображений и текстовых фрагментов на левой и правой сторонах страницы, благодаря чему белое пространство, в котором находится текст, не сосредоточено на одной из сторон. Если бы все изображения располагались с одной стороны страницы, сайт казался бы несбалансированным, поскольку эти элементы имеют больший вес по сравнению с абзацами текста.

Рис. 2.41. Данная страница разделена на две равные по ширине секции, и, хотя в правой части содержится больше текста, белое пространство помогает уравновесить изображение, занимающее всю левую сторону. (Источник изображения: ENSEMBL, https://getensembl.com/)

Асимметричный баланс Асимметричный баланс имеет место тогда, когда элементы различаются по весу, но при этом композиция в целом оказывается уравновешенной. Под асимметрией понимается просто отсутствие симметрии. Рассмотрим рис. 2.43, на котором изображены асимметричные версии фигур, показанных на рис. 2.40.

Глава 2. Основные принципы дизайна  79

Рис. 2.42. Несмотря на чередование макетов в каждом ряду, в данном примере присутствует симметрия, поддерживающая баланс элементов на странице. (Источник изображения: ENSEMBL, https://getensembl.com/)

Рис. 2.43. Данные фигуры не являются симметричными. По сравнению с симметричными фигурами баланс по осям в данном случае не одинаков    и неравномерен

Данный тип баланса позволяет создать более интересные макеты и при правильном применении способен вызвать у посетителей сайта ощущение движения. А именно к этому мы и стремимся. Мы не хотим, чтобы взгляд пользователей задерживался на одной точке; нам нужно сделать так, чтобы они могли сканировать содержимое сайта, перемещая взгляд по различным его фрагментам. Особенности асимметричного макета зависят от структуры лежащей в его основе сетки. О создании сеток для макетов и более сложных их версиях мы поговорим

80  Часть I. Основы дизайна в главе 6. А пока в качестве примера хорошо сбалансированного асимметричного сайта рассмотрим главную страницу сайта Института Уайтхеда (рис. 2.44 и 2.45).

Рис. 2.44. Дизайн главной страницы сайта Института Уайтхеда является асимметричным, но два ее основных элемента фокусируют внимание пользователя и создают у него ощущение баланса. (Источник изображения: Институт Уайтхеда, https://wi.mit.edu/)

Когда вы заходите на главную страницу сайта Института Уайтхеда, вы видите блок белого текста в левом нижнем углу и увеличенный фрагмент логотипа, заполняющий всю правую часть страницы. Если убрать этот фрагмент логотипа справа и оставить только блок белого текста, то страница будет казаться несбалансированной из-за большого количества освободившегося пространства. Использование цвета здесь является настолько сильным, что эта часть страницы не нуждается ни в каких дополнительных усовершенствованиях. Она и так выглядит весьма впечатляюще. Белый текст на синем фоне создает достаточно сильный контраст, а крупная темно-синяя фигура логотипа компенсирует его и заполняет пространство, привнося необходимый баланс. Если прокрутить страницу вниз, чтобы просмотреть следующую ее часть (см. рис. 2.45), мы увидим тот же асимметричный баланс, хотя здесь сетка

Глава 2. Основные принципы дизайна  81

Рис. 2.45. Асимметрия данного раздела обусловлена размером первого столбца, который занимает 50 % ширины страницы. Однако он уравновешивается двумя следующими столбцами, каждый из которых занимает по 25 % ширины страницы. (Источник изображения: Институт Уайтхеда, https://wi.mit.edu/)

является гораздо более выраженной благодаря трем столбцам текста. Асимметрия этого раздела обусловлена наличием двух более узких столбцов, в совокупности равных по ширине первому. Обратите внимание на естественную подачу контента в каждом из них. Взгляд сразу же притягивается к самому крупному синему изображению; мы сканируем текст, а затем переходим ко второму столбцу еще с одним изображением. Затем мы просматриваем содержащийся в нем текст и переходим к третьему столбцу. Асимметрия создает ощущение движения и даже помогает установить иерархию: самый большой столбец сосредотачивает на себе фокус внимания, а два более узких столбца отходят на второй план. Часто при использовании асимметрии один крупный элемент уравновешивается несколькими более мелкими. Однако, как показано на рис. 2.44, так бывает не всегда: асимметрия может быть получена и при использовании минимального количества элементов. Если посмотреть на рис. 2.46, то станет понятно, что структура сайта выглядит несбалансированной.

82  Часть I. Основы дизайна

Рис. 2.46. В данном примере асимметричный дизайн сайта не сбалансирован из-за слишком тяжеловесной левой стороны и слишком большого пустого пространства справа

Чтобы компенсировать этот дисбаланс, мы могли бы найти изображение, способное заполнить главную область нашим призывом к действию, но даже этого оказалось бы недостаточно, поскольку область под ним все равно осталась бы несбалансированной. Нужно либо изменить расположение компонентов так,

Глава 2. Основные принципы дизайна  83

чтобы они находились в одном ряду и заполняли пространство, либо добавить в это пространство другой компонент, подчеркивающий какую-то другую часть контента. Цель состоит в создании ощущения равномерного распределения визуального веса элементов на сайте. В приведенном примере дизайн сайта кажется несбалансированным из-за чрезмерного акцента на одной стороне. Кроме того, большое количество пустого пространства создает впечатление незавершенности. Нужно заполнить это пространство, чтобы создать у пользователей ощущение целостности, обеспечив им тем самым более приятный опыт.

2.2. Основы дизайна для проектирования пользовательского опыта и не только Принципы дизайна, рассмотренные в этой главе, служат основой для создания визуальных элементов и их применения в оформлении сайта. Однако они могут пригодиться и на более ранней стадии проектирования сайта — при разработке вайрфреймов. Вайрфреймы — это схемы компоновки сайта, которые могут представлять собой как простые эскизы, так и более детализированные мокапы, полученные с помощью специальных программ. Эти принципы очень важны для создания иерархии и структуры сайта. Они помогают установить взаимосвязи между фрагментами контента при разработке вайрфреймов, о которых мы поговорим в следующих главах. Сначала мы обсудим процесс проектирования пользовательского опыта и различные роли в нем, а затем перейдем к более подробному рассмотрению таких областей визуального дизайна, как типографика и цвет. После изучения этих глав вам предстоит выполнить пошаговое упражнение и спроектировать веб-страницу, чтобы увидеть, как все изученные вами принципы сочетаются друг с другом.

Резюме Основные принципы визуального дизайна — это строительные блоки хорошо спроектированного веб-сайта. Их грамотное применение для создания иерар­хии и выравнивания элементов на странице (каким бы незначительным это ни казалось) отличает посредственный дизайн от хорошо продуманного. В основе любого хорошего дизайна и визуального оформления веб-разработки лежат такие принципы, как близость, выравнивание, повторение, контраст и баланс. Они являются ключом к созданию веб-сайта, который пользователи могут легко просканировать, быстро установив взаимосвязи между элементами контента. Их понимание играет важную роль уже на этапах планирования и создания вайрфреймов.

84  Часть I. Основы дизайна Близость — это принцип установления отношений, который является основополагающим при организации информации. Чем ближе друг к другу расположены элементы, тем выше вероятность того, что они связаны между собой, и наоборот. Выравнивание — это принцип, определяющий структуру дизайна. Его применение создает невидимую линию, вдоль которой выстраиваются элементы, в результате чего возникает ощущение их упорядоченности. Кроме того, с помощью этой невидимой линии между элементами устанавливаются взаимосвязи. Повторение обеспечивает единообразие, а в контексте веб-восприятия — помогает пользователям ориентироваться. Повторение элементов и стилей позволяет обеспечить единое впечатление, которое может выходить за пределы веб-сайта, создавая целостный образ бренда. Контраст — это самый эффективный способ сделать веб-страницу визуально привлекательной и установить иерархию ее элементов. Чтобы мгновенно привлечь внимание пользователя, имеет смысл смело применять данный принцип. Для создания контраста можно использовать разные формы, цвета или размеры элементов. Баланс — это основной принцип дизайна, связанный с измерением визуального веса элементов композиции. Он помогает создать ощущение завершенности и уравновешенности любого произведения, любой разработки. В контексте веб-дизайна баланс может быть достигнут с помощью симметричных или асимметричных макетов. Хорошо сбалансированный дизайн будет направлять взгляд пользователя от одного элемента к другому; в противном случае его внимание может зациклиться на какой-то одной точке. Вышеописанные принципы редко используются по отдельности, поэтому смело комбинируйте их для создания четко определенной иерархии и макетов, а также более интересного с визуальной точки зрения дизайна вебстраниц.

Часть II Пользовательский опыт Вторая часть книги посвящена такому аспекту проекта, как пользовательский опыт. Прежде чем приступать к разработке визуального дизайна, необходимо понять, каким должен быть этот опыт. Поэтому этап, связанный с ним, включает в себя не только фазу проектирования пользовательского опыта, но и изучение конкурентов, проведение исследования пользователей и интервью с ними, определение целевой аудитории, а также выбор приоритетного содержимого при организации контента на странице. В главе 3 вы найдете краткий обзор всего, что связано с проектированием пользовательского опыта, в том числе описание ролей различных специалистов, ответственных за выполнение этой работы в крупных компаниях. В небольших компаниях эти роли часто объединяются в одну или две должности, но в целом и здесь они отражают различные части этапа проектирования пользовательского опыта. Глава 4 посвящена различным видам исследований пользовательской среды, которые могут проводиться в рамках реализации проекта и определять направление развития продукта или опыта. Приведенный их перечень не является исчерпывающим, он содержит лишь наиболее распространенные виды исследований, которые могут быть проведены как кем-то в одиночку, так и небольшой командой. В главе 5 мы поговорим о дизайне визуальной составляющей пользовательского опыта, то есть об определении структуры контента, его расположении на странице и направлении внимания пользователей при серфинге по сайту или веб-приложению. На данном этапе вы приступите к формированию общей структуры дизайна сайта без проработки отдельных деталей. Используя принципы дизайна, описанные в главе 2, вы начнете устанавливать взаимосвязи между фрагментами контента и их группами. Эти главы закладывают основу для следующей части книги, в которой речь пойдет о наполнении структуры элементами визуального дизайна.

3

Основы пользовательского опыта

В этой главе 33 Что включает в себя пользовательский опыт и как он интегрируется в жизненный цикл проекта. 33 Специализации в области проектирования пользовательского опыта. 33 Пользовательский опыт в сравнении с пользовательским интерфейсом 33 Методологии проектирования пользовательского опыта, способные помочь в создании плана реализации проекта.

Когда я работала в креативной команде агентства по связям с общественностью, мне было совершенно очевидно, что нас очень мало, поэтому каждому в команде нередко приходилось исполнять несколько ролей при реализации одного и того же проекта. Со временем мы перешли от создания маркетинговых печатных и статичных цифровых материалов к проектированию цифрового опыта. Большинство членов моей команды до этого занимались брендингом или дизайном упаковки. Поскольку я была единственным человеком, обладавшим

Глава 3. Основы пользовательского опыта  87

базовыми навыками работы с кодом фронтенда, я стала браться за проекты, связанные с разработкой веб-дизайна, и таким образом глубже погружаться в процесс создания веб-проектов. Я буквально влюбилась в код. В процессе этого глубокого погружения я также узнала о широком спектре ролей, существующих в веб-индустрии. Я начала не просто применять свои навыки создания визуального дизайна, став фронтенд-разработчиком, но к тому же одновременно стала развиваться и в другом направлении, изучая все, что должно предшествовать созданию вайрфреймов и визуальных элементов. В мои обязанности входило проведение исследований, анализ конкурентов и разработка информационной архитектуры. Я должна была создавать не просто наборы вайрфреймов, а их кликабельные прототипы, прежде чем переходить к разработке визуальной составляющей проекта. Моя должность называлась «дизайнер опыта». Меня удивляло, почему не «дизайнер пользовательского опыта», что, как я считала, в то время было эквивалентом той должности в отрасли. Теперь, оглядываясь назад, я понимаю, что отвечала за весь жизненный цикл проекта, в том числе за проведение исследований, построение информационной архитектуры, создание визуального дизайна, разработку и даже за обеспечение качества. Моя задача состояла в проектировании всего цифрового опыта. Звание «дизайнер пользовательского опыта» могло в дальнейшем ограничить меня рамками определенных ролей, и, думаю, мой руководитель это знал. Я была не просто дизайнером пользовательского опыта; я выполняла все функции в команде, создававшей цифровой опыт. И, по-моему, в конечном счете именно мои знания в области дизайна и написания кода помогли мне получить работу в Microsoft. Сейчас, вспоминая о том, как когда-то я предполагала, что звание дизайнера пользовательского опыта может ограничить меня определенными ролями, я осознаю, что ошибалась. Сфера пользовательского опыта выходит далеко за рамки визуального дизайна. Разумеется, часть процесса проектирования пользовательского опыта и соответствующие должности в компаниях и агентствах связаны с планированием и разработкой функций и визуального дизайна продукта, приложения или сайта. Однако проектирование пользовательского опыта не заканчивается на этапе создания визуального дизайна и не обязательно начинается на этапе проведения исследований.

3.1. Пользовательский опыт не ограничивается визуальным дизайном Каждый этап жизненного цикла проекта, начиная с постановки бизнес- или маркетинговых целей и заканчивая технической разработкой, не просто влияет на пользовательский опыт, но и является его частью (рис. 3.1). Чаще всего

88  Часть II. Пользовательский опыт разработчики не вовлекаются в работу на ранних этапах планирования, проведения исследований и создания визуального дизайна. Такой подход может иметь негативные последствия: специалисты разных профилей должны быть причастны к проекту на всех его стадиях, в том числе и разработчики должны подключаться к нему с самого начала.

Дизайн

UX Бизнес

Технологии

Рис. 3.1. Пользовательский опыт (UX) связан не только с дизайном; на опыт конечного пользователя продукта оказывает влияние работа различных    отделов

Когда дизайн передается разработчикам, именно они отвечают за воплощение приложения или сайта в жизнь. Они создают функциональный опыт для клиентов, то есть конечный результат! Их исключение из процесса планирования и создания дизайна чревато задержками на этапе разработки, если реализация той или иной функции или элемента дизайна окажется невозможной или способной негативно повлиять на работу сайта (например, большое количество лишней анимации может замедлить загрузку страницы). Некоторые специальности в области информатики считаются «ориентированными на пользовательский опыт». Они будут кратко рассмотрены в разделе 3.3, чтобы прояснить соответствующие роли и обязанности. Однако главная мысль, которую я хочу донести сейчас, заключается в том, что проектирование пользовательского опыта в целом не ограничивается этими ролями. Каждый человек в команде, включая маркетолога, исследователя, дизайнера, разработчика и даже специалиста по контролю качества, непосредственно влияет на опыт конечного пользователя. Возможно, вы не являетесь частью большой команды, в которой каждую из ролей выполняют разные люди. Может быть, вы фрилансер, владеющий собственным бизнесом и желающий самостоятельно выполнять большую часть этой работы. В этом случае понимание различных ролей и соответствующих обязанностей, не связанных непосредственно с созданием дизайна и разработкой, поможет вам выявлять ненужную работу и более оперативно реализовывать проекты, сосредоточивая усилия на их важнейших составляющих.

Глава 3. Основы пользовательского опыта  89

Важно также отметить, что не существует какого-то одного «правильного способа» внедрения практик проектирования пользовательского опыта в рабочий процесс. Рабочий процесс или действия по созданию пользовательского опыта, выполняемые командой компании из списка Fortune 100, будут отличаться от работы небольшого креативного агентства и от работы внештатного дизайнера или разработчика. Приведенный далее обзор ролей и обязанностей призван подготовить почву для обсуждения различных методологий реализации проекта. Они и будут рассмотрены в этой главе, а в следующих главах нам предстоит подробно обсудить основные аспекты каждого этапа проектирования пользовательского опыта.

3.2. Что такое пользовательский опыт Прежде чем обсуждать роли и обязанности специалистов по проектированию пользовательского опыта, дадим определение самому этому понятию. Под пользовательским опытом (user experience, UX) понимается взаимодействие человека с продуктом или услугой, включая ощущения, которые он при этом испытывает. Примером взаимодействия с продуктом является установка таймера микроволновой печи с помощью клавиатуры. В зависимости от порядка или расположения кнопок, предусмотренных для управления определенными функциями, например кнопки «Добавить 30 секунд», пользователь может испытывать или не испытывать раздражение, работая с устройством. Однажды мои родители сменили микроволновую печь на своей кухне, и, приехав к ним в гости, я испытала неприятный опыт взаимодействия с этой новой печью из-за того, что для установки таймера использовалась круглая ручка. Я никогда раньше не сталкивалась с подобным устройством, и оно показалось мне непонятным и неудобным. Возникшая путаница повлияла на мое отношение к микроволновым печам, и я решила не покупать микроволновую печь с такой ручкой. Когда пользователь взаимодействует с физическим или цифровым продуктом, его мнение зависит от того, удобно ли использовать этот продукт. Реализует ли он ожидаемые функции? Хорошо ли работает? Последний вопрос особенно важен в цифровом пространстве, поскольку ошибки или замедления могут негативно повлиять на восприятие пользователем веб-сайта или приложения. Ответы на перечисленные вопросы формируют общую картину пользовательского опыта. Питер Морвиль, влиятельная фигура в области создания информационной архитектуры и UX-проектирования, предложил схему под названием «соты пользовательского опыта» (User Experience Honeycomb) (рис. 3.2). На ней представлены различные качества продукта, необходимые для создания ценного и значимого пользовательского опыта.

90  Часть II. Пользовательский опыт

Полезность Удобство использования

Привлекательность Ценность

Простота поиска

Доступность Доверие

Рис. 3.2. Схема Питера Морвиля «соты пользовательского опыта» описывает семь качеств    хорошего продукта

Пользовательский опыт не ограничивается удобством использования продукта или, как в нашем случае, веб-сайта. Согласно схеме Морвиля, для обеспечения значимого пользовательского опыта продукт должен обладать перечисленными ниже качествами. Полезность — удовлетворяет ли сайт какую-либо потребность и насколько успешно? Удобство использования — легко ли пользоваться сайтом? Простота поиска — легко ли находить нужную информацию и ориентироваться на сайте? Ценность — приносит ли сайт пользу тем, кто его финансирует? Создает ли он прибыль или выполняет какую-либо миссию? Привлекательность — обладает ли сайт хорошим дизайном? Используются ли в его оформлении элементы фирменного стиля бренда, изображения и другие элементы для создания визуально приятного впечатления? Доверие — могут ли пользователи доверять содержимому сайта и его источникам? Доступность — могут ли пользоваться сайтом люди с ограниченными возможностями, применяющие вспомогательные технологии для получения доступа в интернет? Приведенный выше список предоставляет обобщенный и укрупненный обзор различных аспектов проекта, к которым можно обращаться в процессе его

Глава 3. Основы пользовательского опыта  91

реализации. Цель таких обращений — гарантировать согласованность разных функций или фрагментов контента. Перечисленные качества являются своеобразной путеводной звездой, позволяющей убедиться в том, что при разработке и построении продукта обеспечивается ценность и удовлетворяются потребности клиентов и тем самым создается значимый для них опыт.

3.3. Роли специалистов в области UX-проектирования Как я уже говорила в начале этой главы, на пользовательский опыт влияет работа не только дизайнеров, но и всех остальных специалистов. Но когда мы говорим о карьере в области UX-проектирования, мы обычно фокусируемся на разработке дизайна. Проектирование пользовательского опыта разбивается на несколько более узких областей, которые не всегда связаны с разработкой визуальной составляющей, и это может сбивать с толку при использовании фразы «дизайн пользовательского опыта». К областям, входящим в сферу UX-проектирования, относятся исследования, дизайн, прототипирование, тестирование и измерение. Некоторые роли могут предусматривать обязанности сразу из нескольких областей. Такое пересечение говорит о том, насколько нелинейным или итеративным может быть процесс реализации проекта. В следующих подразделах этой главы представлен краткий обзор различных ролей и областей, подробнее они будут рассмотрены в следующих главах.

3.3.1. Исследование пользователей Исследование потребностей пользователей должно лежать в основе любого проекта вне зависимости от того, реализуется он командой или фрилансером, работающим самостоятельно. Этот этап очень важен для определения целевой аудитории, понимания ее потребностей и поведения. Результаты исследований позволят принимать обоснованные решения относительно разработки сайта или приложения вместо того, чтобы гадать, чего пользователи могут хотеть от будущего продукта. В зависимости от проекта этап исследований не всегда проводится только один раз; может потребоваться провести его неоднократно, особенно при тестировании дизайна или прототипов перед началом процесса разработки. Однако работа не заканчивается и после запуска сайта или его новой функции. Исследования проводятся и на этапе измерений, например для выяснения того, набирает ли сайт или новая функция популярность, как быстро пользователи попадают на конкретную страницу, сколько времени на ней проводят. Подобные показатели крайне важны для принятия решений о том, какой должна быть следующая итерация проекта.

92  Часть II. Пользовательский опыт

3.3.2. Проектирование пользовательского опыта На данном этапе происходит планирование сайта, его макета и визуального оформления. Проектирование включает в себя такие работы, как создание информационной архитектуры и вайрфреймов, разработка пользовательского интерфейса, статического визуального дизайна (неинтерактивных макетов) и интерактивных прототипов. Ландшафт области UX-проектирования постоянно меняется, и обязанности, возлагаемые на UX-дизайнеров в одной компании, могут существенно отличаться от таковых в другой. Некоторые UX-дизайнеры отвечают за создание вайрфреймов и статических макетов сайта и, разработав их, передают эстафету специалистам по интерактивным прототипам. Другие отвечают за проведение исследований, разработку вайрфреймов и прототипов, и после них проект передается визуальному дизайнеру и веб-разработчику. Часто в небольших компаниях или стартапах UX-дизайнер отвечает за все этапы процесса проектирования пользовательского опыта (о чем я рассказывала в начале главы). В более крупных компаниях эти обязанности распределяются между несколькими специалистами. Например, однажды я работала с командой по исследованию пользовательских ожиданий, которая отвечала за проведение интервью и опросов с последующим обобщением полученных результатов в виде отчетов. Должности UX-дизайнеров могут иметь такие более традиционные названия, как дизайнер взаимодействия, дизайнер продукта и UI/UX-дизайнер. В некоторых случаях, например в небольших компаниях, UI/UX-дизайнер отвечает за весь визуальный дизайн сайта, включая иллюстрации и другую графику. ПРИМЕЧАНИЕ  Как уже говорилось, UI/UX-дизайнер — это распространенное название должности, которое часто встречается на сайтах по трудоустройству. Однако важно различать понятия UI (user interface, пользовательский интерфейс) и UX (user experience, пользовательский опыт), поскольку, несмотря на некоторое пересечение понятий, разработка пользовательского интерфейса и  пользовательского опыта предполагает выполнение разных типов задач.

3.3.3. UX-писатели Хороший пользовательский опыт не ограничивается возможностями и функциями сайта или приложения; еще одним важным его компонентом является текст, сопровождающий визуальные элементы. Визуальная составляющая дизайна призвана привлечь внимание пользователя к странице (с помощью основных принципов, рассмотренных в главе 2), а текст должен рассказать пользователю о том, на что он смотрит, и при этом быть максимально продуманным. UX-писатель — это больше чем просто мастер слова из команды маркетологов. Хотя эта роль, скорее всего, будет предусматривать работу с маркетологами, содержание создаваемого данным специалистом текста должно отличаться

Глава 3. Основы пользовательского опыта  93

особым уровнем детализации и продуманностью. Как и в случае с выбором цветов, кнопок и анимации для использования на сайте, выбор слов требует принятия обдуманных решений. Роль UX-писателя не ограничивается рамками роли копирайтера-маркетолога. Например, UX-писатели используют результаты исследований пользователей при написании текста для всех элементов пользовательского интерфейса, с которыми могут контактировать клиенты. Именно эти специалисты следят за тем, чтобы контент был полезным и нужным, и не забывают при этом о звучании бренда в целом. UX-писатель не обязательно должен иметь опыт работы в области копирайтинга. Одно время я работала над проектами совместно с писателем, который занимался основными фрагментами текста для сайта, имеющими маркетинговую направленность, в то время как я отвечала за небольшие фрагменты, называемые «микрокопиями». Они были связаны непосредственно с компонентами пользовательского интерфейса. Мне также доводилось работать с так называемыми техническими писателями, которые весьма отличаются от UX-писателей или копирайтеров-маркетологов. Технические писатели создают контент, который представляет собой, скорее, инструкции или документацию, например руководства по эксплуатации. В зависимости от объема технического контента целый проект может вращаться вокруг опыта пользователя того или иного раздела сайта, поскольку целевая аудитория может меняться в зависимости от того, какой именно технический контент размещается на ресурсе. На протяжении своей карьеры я нередко выступала в роли UX-писателя. Пожалуй, самым запоминающимся примером создания продуманного опыта, о котором я уже рассказывала в главе 1, была разработка дизайна сайта webhint.io (который изначально назывался Sonar). Я разработала дизайн страницы индикации очереди на сканирование, которая появлялась перед пользователями по причине технических ограничений базы данных бэкенда. Опираясь на знания нашей основной целевой аудитории, я создала дизайн (рис. 3.3), в котором иллюстрация выбивающегося из сил нарвала сопровождалась заголовком Nellie’s working overtime (Нелли работает сверхурочно). Под ним располагался небольшой фрагмент текста с подробным описанием причины задержки и ссылкой на результаты сканирования, к которым разработчик мог обратиться позднее. Со временем инфраструктура сайта улучшилась и необходимость в отображении приведенного сообщения отпала. Тем не менее это был один из ключевых моментов в моей карьере, демонстрирующий, насколько важно знать свою аудиторию и подстраивать под нее весь опыт, включая отображаемый на сайте текст. Мой пример также подчеркивает тот факт, что опыт пользователя не ограничивается визуальным оформлением. Без текста сам дизайн мог бы вызвать у пользователя негативную реакцию. Если бы мы не предоставили информацию о причине задержки, многие пользователи наверняка отказались бы от использования инструмента и не вернулись бы к нему, что негативно сказалось бы на перспективах этого проекта.

94  Часть II. Пользовательский опыт

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

3.4. Методологии проектирования пользовательского опыта Подобно тому как определенные методологии, такие как Agile и Waterfall, используются в области веб-разработки и создания программного обеспечения, проектирование пользовательского опыта тоже может предусматривать обращение к ним. Часто UX-процессы сочетаются, например, с Agile на протяжении всего периода реализации проекта, особенно в крупных компаниях, создающих приложения или программное обеспечение, которое находится в состоянии постоянного совершенствования. Более мелкие проекты могут проходить только одну начальную фазу и не требовать серьезных итеративных изменений. Представленные ниже методологии дают общее представление о том, как выглядит весь процесс проектирования пользовательского опыта вплоть до этапа написания кода.

Глава 3. Основы пользовательского опыта  95

Эти процессы не высечены в камне. Каждый заинтересованный может найти методологию, которая хорошо подходит именно для его типа работы. Или может обнаружить, что его устраивает большая часть какой-то методологии, и отбросить остальные неактуальные для себя фрагменты. Эти процессы являются гибкими и призваны продемонстрировать один из возможных способов решения той или иной задачи. Например, для разработчика, работающего в одиночку, некоторые из описанных далее этапов могут быть существенно сокращены по сравнению с теми задачами, которые он взял бы на себя, работая в более крупной команде. Знакомство с приведенным ниже материалом позволит понять, как различные этапы связаны с разными ролями и как легко может пересекаться между собой работа специалистов по исследованию пользователей, UX-дизайну, UXредактуре и визуальному дизайну. Существует множество методологий, и часто крупные компании вроде Google разрабатывают собственные подходы к проектированию пользовательского опыта и созданию дизайна для использования в своих проектах. Однако мы рассмотрим две наиболее распространенные методологии: дизайн, ориентированный на пользователя, и модель «двойного алмаза». Эти схемы помогают представить весь ход реализации проекта, от проведения исследований до разработки. Они также могут пригодиться для более детального рассмотрения конкретных частей продукта, сайта или приложения. Таким образом, эти процессы могут быть применены к проекту, связанному как с созданием целого сайта, так и с разработкой новой функции или части уже работающего сайта.

3.4.1. Дизайн, ориентированный на пользователя Дизайн, ориентированный на пользователя, ставит клиента в центр всех этапов реализации проекта, фокусируясь на создании исключительно удобного продукта или опыта. Пользователь является главным приоритетом в ходе всего процесса, начиная с обеспечения соответствия бизнес-потребностей требованиям пользователей и заканчивая получением обратной связи от клиентов и внесения итеративных изменений на ее основе. Этот особый способ мышления можно интегрировать в уже существующие методы работы. Например, если вы являетесь частью команды, использующей Agile, Waterfall или другие методы, вы можете применить к ним принципы дизайна, ориентированного на пользователя. На сайте Usability.gov описано четыре общих этапа разработки такого дизайна, однако конкретные задачи и фазы будут зависеть от того, как именно вы работаете и на каком этапе реализации проекта находитесь. Уточнение контекста использования — необходимо определить, кто является основной целевой аудиторией, почему эти люди используют продукт, каковы их требования и в каких обстоятельствах они будут его применять.

96  Часть II. Пользовательский опыт Уточнение требований — здесь следует сориентироваться на то, какие бизнес-требования или цели пользователей должны быть достигнуты, чтобы продукт был успешным. Разработка дизайнерских решений — на данном этапе выполняется работа, связанная с созданием вайрфреймов, визуальных макетов, прототипированием и собственно разработкой. Оценка эффективности интерфейса — тестирование макета и прототипов, в идеале при участии реальных пользователей, для сбора отзывов и начала итеративного процесса доработки дизайнов с учетом полученной обратной связи.

я

Уточ

нен

ие

реше ний

ни зова

ний ова еб тр

Потребность удовлетворена

ль спо и а

Оце

йн ер ски х

Выявление потребности пользователя

Уточнени е ко нте кс т

Эти четыре этапа итеративного процесса показаны на рис. 3.4. В зависимости от типа реализуемого проекта сбор обратной связи и внесение изменений могут осуществляться непрерывно.

нк

а

ди з

ай нов

Ра

тка зр а б о

ди

за

Рис. 3.4. Процесс разработки дизайна, ориентированного на пользователя, начинается с определения потребности этого пользователя, которую надо удовлетворить. Затем следует выяснить, как пользователи будут применять то, что им предоставят, определить требования, соответствие которым необходимо для решения поставленной задачи, разработать дизайнерское решение и оценить то, насколько оно удовлетворяет потребности пользователя. Если его потребности не удовлетворены, процесс возвращается к началу

Глава 3. Основы пользовательского опыта  97

Например, компания, занимающаяся разработкой программного обеспечения, может непрерывно собирать отзывы пользователей и просить их высказать свое мнение о конкретных функциях. Затем это мнение будет учтено для улучшения соответствующего пользовательского опыта. Подобная обратная связь также позволяет получить представление о новых потребностях пользователей, что положит начало новому циклу исследований, проектирования, тестирования и разработки. В случае с небольшими проектами, вроде веб-сайтов или приложений с ограниченным использованием, собирать отзывы можно о сайте или приложении в целом. В конце концов, все зависит от конкретного проекта и его целей, однако если стоит задача сделать конечный продукт максимально удобным для пользователей и удовлетворяющим их потребности, следует разрабатывать его дизайн, ориентируясь на них.

3.4.2. Модель «двойного алмаза» Модель «двойного алмаза» (double diamond process) сочетает в себе дивергентное мышление, широкое изучение проблемы, конвергентное мышление и целенаправленные действия. В отличие от описанного выше подхода, данный процесс предполагает выявление проблемы, ее определение и разработку решений. Это не означает, что пользователи не принимаются в расчет или не могут быть вовлечены в процесс. Однако если при использовании подхода, ориентированного на пользователя, основное внимание уделяется созданию дизайна на основе клиентских требований, то в модели «двойного алмаза» в фокусе оказывается построение дизайна, направленного на решение конкретной проблемы. В 2005 году после изучения и анализа различных методов, используемых компаниями для решения творческих задач, Британский совет по дизайну разработал «дорожную карту» для этого творческого процесса. Люди, работавшие над этим исследованием, выявили общие закономерности в различных процессах и сформулировали на их основе модель «двойного алмаза». Ее название обусловлено визуальным представлением процессов дивергентного и конвергентного мышления на схеме (рис. 3.5). Как показано на рис. 3.5, мы начинаем с проблемы, указанной в левой части схемы. Затем используем дивергентное мышление для изучения и исследования этой проблемы, после чего в дело вступает конвергентное мышление, направленное на определение проблемы. На следующем этапе мы снова используем дивергентное мышление для разработки множества возможных решений проблемы, после чего останавливаемся на одном из них. Как и в случае с дизайном, ориентированным на пользователя, можно разбить этот процесс на четыре фазы. Обнаружение (Discover) — в ходе исследований собираются данные для получения представления о проблеме.

98  Часть II. Пользовательский опыт

Обнаружение

Проблема

Определение

Разработка

Определение проблемы

Реализация

Решение

Рис. 3.5. Модель «двойного алмаза» включает такие этапы, как выявление проблемы, ее изучение и определение, после чего следует разработка ее решений и выбор одного из них

Определение (Define) — результаты исследований фильтруются с целью определения проблемы, которую необходимо решить. Разработка (Develop) — изучаются и тестируются различные решения. Реализация (Deliver) — решения оттачиваются для выбора и дальнейшей реализации наиболее успешного из них. Несмотря на то что этот процесс кажется линейным, он не обязательно должен быть таковым и, скорее всего, не будет. Может случиться так, что вы определили проблему, которую необходимо решить, разработали несколько решений для тестирования, но обнаружили, что ни одно из них не нашло отклика у пользователей. В этом случае после анализа обратной связи вы вернетесь ко второй фазе процесса, чтобы переформулировать проблему. Описанные выше схемы вполне могут быть адаптированы и изменены в соответствии с потребностями проекта. Дизайн, ориентированный на пользователя, и модель «двойного алмаза» — это две распространенные методологии, но существует множество других. Некоторые разработаны технологическими компаниями, другие — дизайнерскими агентствами. Одна методология может подходить для конкретного типа проекта и сроков, а другая — нет. Возможно, вы решите разработать собственную. Например, можно привлечь пользователей на более раннем или позднем этапе

Глава 3. Основы пользовательского опыта  99

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

3.5. Углубленное изучение практик проектирования пользовательского опыта В этой главе я представила обобщенный обзор различных аспектов процесса реализации проекта и специализаций профессионалов в области UXпроектирования. Теперь вы знаете, из каких этапов состоит типовой процесс реализации проекта. Далее мы подробно рассмотрим типы работ, выполняемых на этих этапах. Мы обсудим различные методы исследования и тестирования и процесс построения информационной архитектуры. Это поможет вам решить, какие задачи являются наиболее важными в контексте типов проектов, над которыми вы работаете.

Резюме Этап проектирования пользовательского опыта включает в себя не только разработку вайрфреймов, моделирующих компоновку элементов сайта, но и такие фазы реализации проекта, как исследование и тестирование. Разработчики и члены команды, в большей степени ориентированные на бизнес, скажем, занимающиеся продажами или работой с клиентами, также влияют на пользовательский опыт, например принимая решения в отношении кода или проводя исследования требований клиентов. Под пользовательским опытом понимается взаимодействие человека с продуктом и получаемые им при этом впечатления. Питер Морвиль выделяет семь аспектов пользовательского опыта, ориентируясь на которые мы можем обеспечить содержательный и полезный опыт для своих пользователей. Согласно предложенной им схеме, хороший продукт должен быть полезным, удобным, обеспечивающим простоту поиска, ценным, привлекательным, заслуживающим доверие и доступным. Хотя в сфере проектирования пользовательского опыта задействованы профессионалы нескольких различных ролей, задачи, решаемые этими людьми, часто пересекаются с работой специалистов в таких областях, как исследования и дизайн.

100  Часть II. Пользовательский опыт Дизайн, ориентированный на пользователя, в первую очередь направлен на удовлетворение потребностей клиента. При этом пользователь участвует в реализации практически всех этапов процесса. Метод «двойного алмаза» ставит во главу угла проблему как таковую и поиск ее решений с помощью дивергентного и конвергентного мышления. Несмотря на существование множества различных методологий UXпроектирования, ни одна из них не является единственно правильной, и на самом базовом уровне все они должны обеспечивать различные фазы реализации проекта. Выбор задач, решаемых в рамках каждой фазы, в конечном счете зависит от вас.

4

Исследование пользователей

В этой главе 33 Почему исследование пользователей является ключом к созданию успешного веб-сайта или приложения. 33 Различные категории пользовательских исследований. 33 Методы пользовательских исследований, релевантные для цифровых продуктов и веб-сайтов. 33 Как использовать результаты исследований, определять цели сайта и выявлять потребности пользователей.

Весной 2012 года на своей конференции разработчиков компания Google представила новый продукт под названием Google Glass — «умные» очки. Их отличительной особенностью была камера и возможность записи видео. Помимо этого, очки были оснащены сенсорной панелью и дисплеем, с помощью которых можно было быстро находить нужную информацию. Это была новая технология, безусловно, инновационная для того времени, когда носимые устройства только начинали набирать популярность. Однако из-за того, что в данном устройстве акцент был сделан на камере и на возможности записи видео, у многих людей возникли опасения по поводу конфиденциальности и безопасности.

102  Часть II. Пользовательский опыт И эти опасения касались не только частной жизни людей, с которыми владелец устройства мог столкнуться на улице. Власти Лас-Вегаса и нескольких штатов, в которых работают казино, запретили использование Google Glass во время азартных игр, а Американская ассоциация кинокомпаний запретила их ношение в кинотеатрах. Кроме того, существовали опасения по поводу потенциальной угрозы безопасности при использовании этого устройства во время вождения автомобиля, учитывая то, что оно было вполне способно отвлекать внимание водителя. В настоящее время во многих штатах США действуют законы, преду­ сматривающие штраф за разговоры по телефону за рулем. А носимая гарнитура с дисплеем ничем от него не отличается. Несмотря на то что Google Glass были представлены миру в качестве передового носимого устройства, они не обрели популярности среди широких слоев потребителей, хотя нашли некоторое применение в корпоративном секторе. Изначально они обратили на себя внимание специалистов медицинской сферы, но в настоящее время Google Glass находят все более широкое применение и в некоторых других областях. С момента своего представления в 2012 году эта технология эволюционировала, но теперь она доступна для предприятий, а не для обычных потребителей, то есть ее целевая аудитория сократилась. Причина провала Google Glass заключается, предположительно, в том, что это устройство пыталось удовлетворить несуществующую пользовательскую потребность. С точки зрения потребителя, основной акцент в этих очках был сделан на камеру и функцию видеозаписи. А какую именно выгоду получали пользователи? Представитель Google высказал мысль о том, что этот продукт может пригодиться родителям, желающим запечатлеть на видео памятные моменты детства своего ребенка, как это делают многие (в том числе и я, правда, с помощью VHS-магнитофона). Но много ли среднестатистических родителей были готовы потратить 1500 долларов (стоимость Google Glass на тот момент) на очки для решения этой задачи? За такую цену можно было приобрести очень хорошую по меркам 2012 года камеру, а не новое экспериментальное устройство, которое нужно было носить на себе, чтобы использовать. Помимо опасений по поводу конфиденциальности и безопасности, дополнительным моментом, отпугнувшим потребителей, вероятно, стал дизайн очков, к оправе которых была прикреплена камера. Я думаю, что большинство людей почувствовало бы дискомфорт при встрече с человеком, на оправе очков которого отчетливо видно записывающее устройство, активирующееся нажатием кнопки. При записи видео с помощью смартфона люди, по крайней мере, держат его определенным образом, поэтому в большинстве случаев это действие является довольно очевидным. Итак, новый продукт производил жутковатое впечатление. В итоге: большое количество опасений по поводу безопасности и конфиденциальности в сочетании с прохладной реакцией со стороны широкой публики.

Глава 4. Исследование пользователей  103

Можно предположить, что при разработке первоначального прототипа Google Glass исследования потребностей пользователей не были проведены. Это возвращает нас к вопросу о разработке решения несуществующей проблемы. Люди не нуждались в таком уникальном самостоятельном устройстве для осуществления фото- и видеосъемки. Функции Google Glass не предоставляли людям никаких преимуществ в дополнение к тем, которыми пользователи уже обладали. Если бы команда разработчиков Google Glass провела дополнительные исследования с участием пользователей, то, возможно, не стала бы так сильно фокусироваться на фотографических функциях продукта, а выявила бы дополнительные возможности, которые эти умные очки могли бы предоставить целевой аудитории. В конечном счете непопулярность Google Glass среди потребителей была обусловлена отказом компании-производителя от проведения пользовательских и рыночных исследований, попыткой решить несуществующую проблему и необоснованными предположениями относительно потребностей пользователей. Все это в совокупности привело к появлению продукта, не привносящего никаких дополнительных преимуществ в жизнь рядового потребителя.

4.1. Введение в исследования пользовательских потребностей Исследование пользователей необходимо для создания успешных продуктов, удовлетворяющих нужды и приносящих пользу конечному потребителю. Что бы кто ни думал по поводу желаний и намерений аудитории, предположения — это не данные. Проведение исследований потребностей пользователей (далее в тексте — пользовательских исследований или исследований пользователей) позволяет принимать обоснованные решения и гарантировать, что вы создаете именно то, что необходимо вашему потребителю. На протяжении своей карьеры я часто встречала людей, которые говорили: «Раз у меня есть эта проблема, значит, она есть и у подобных мне людей. Нам нужно ее решить, и вот ее решение». Такая позиция — вполне приемлемая отправная точка для развития идеи, позволяющая сформулировать предварительную гипотезу относительно потенциальной проблемы. Однако важно помнить о том, что на формулировку проблемы и ее решения влияют ваши предубеждения, поэтому во избежание неудач старайтесь не предполагать, будто вы понимаете своего пользователя и его потребности. Решение, основанное только на подобных данных, может оказаться не самым оптимальным для пользователей. И если вы пытаетесь продать какой-то товар или простимулировать людей воспользоваться вашим сайтом или приложением, вы не должны быть единственным пользователем предлагаемого решения.

104  Часть II. Пользовательский опыт Вне зависимости от того, идет ли речь о физическом продукте или о цифровом опыте, пользовательское исследование имеет решающее значение для выяснения того, что нужно аудитории. Результаты проведенного исследования можно применять для обновления продукта, а затем провести повторное тестирование, чтобы убедиться в том, что вы движетесь в правильном направлении и предоставляете пользователям реальные преимущества.

4.1.1. Исследование пользователей кажется дорогостоящим, однако неудача обходится еще дороже Итеративный процесс, в ходе которого необходимо выяснить потребности пользователей, провести исследования для подтверждения выдвинутых гипотез, создать прототип и протестировать его с участием потребителей, чтобы убедиться в том, что их потребности удовлетворены, — все это в совокупности может показаться сложным и трудоемким. Скажем, фрилансерам дополнительные затраты времени и средств на проведение таких исследований могут показаться слишком обременительными. А может быть и так, что клиент или заказчик не видит смысла в трате времени на подобные этапы. Однако в долгосрочной перспективе проведение исследований, согласование деятельности разработчика с потребностями пользователей помогает сократить количество изменений, которые необходимо вносить в продукт. Это даже может помочь сэкономить бюджет или уменьшить сроки реализации проекта. Допустим, вы создаете веб-приложение для клиента. Вы пропустили этап исследования пользователей, и ваш клиент тоже не предоставил систематизированных пожеланий. Итак, вы сразу приступаете к проектированию пользовательского интерфейса и созданию приложения с применением выбранного вами технологического стека. Вы не проводите никаких пользовательских исследований между этапами проектирования и разработки. Вы разрабатываете бэкенд и интегрируете его с пользовательским интерфейсом. Проделав всю эту работу, вы впервые представляете приложение пользователям непосредственно перед его запуском. Затем вы проводите интервью и фиксируете мысли и замечания пользователей по поводу вашего приложения в рамках исследовательской сессии. Полученная в ходе этой исследовательской сессии обратная связь противоречит вашим исходным предположениям о том, что пользователи хотели бы получить от приложения. Кроме того, вы обнаруживаете и другие проблемы, связанные с удобством навигации на сайте. Вы ожидали от пользователей подтверждения правильности разработанного вами решения. Однако в силу характера и содержания полученной обратной связи вы вынуждены вернуться назад и внести значительные изменения в дизайн и архитектуру сайта. Необходимость в такой переработке задерживает запуск приложения, что связано с дополнительными затратами, поскольку вы не можете выпустить свой продукт, чтобы люди могли начать им пользоваться. Переделка отдельных частей приложения занимает

Глава 4. Исследование пользователей  105

длительное время, а если вы создаете приложение по заказу клиента, то это может стоить ему дополнительных денег, которые он не собирался тратить, и ухудшить ваши с ним отношения. Рассмотрим другой сценарий и допустим, что вы запустили сайт для своего клиента, не проводя исследования ни на одном из этапов реализации проекта. После запуска вы наблюдаете высокий показатель отказов. Люди не проводят в приложении достаточно времени или не переходят на его «профессиональную» версию в процессе оформления заказа. Ваш клиент быстро теряет деньги, ему становится необходимо выяснить причину этого. Он стремится решить проблему как можно быстрее, чтобы перестать терять деньги, и теперь вы вынуждены работать в спешке, чтобы разобраться в ситуации. Это требует дополнительных затрат времени и денег, которые, вероятно, не были предусмотрены в первоначальном плане проекта. Более того, это стоит времени и денег и вам, и вашему клиенту. И, к слову, необходимость перепроектировать целые части приложения так, чтобы они соответствовали уже написанному коду, может вызвать у вас сильное раздражение. Обоих этих сценариев можно было бы избежать, если бы перед началом разработки в той или иной форме было проведено исследование пользователей. Если вы работаете над небольшим проектом с ограниченным бюджетом, исследование пользователей не обязательно должно быть дорогостоящим. Существует множество методов исследования, которые могут быть применены в рамках вашего проекта. Кроме того, есть возможность убедиться в том, что разработчик находится на правильном пути, до того, как приступать к проектированию. Ведь ряд моментов уже тогда можно прояснить и подтвердить при участии пользователей. Такая подготовка в дальнейшем позволит избежать ненужной переделки, способной занять много времени. А теперь поговорим о том, что именно следует сделать в самом начале работы над проектом.

4.1.2. Сбор исходных данных Если вы начинаете реализацию проекта с нуля, не имея достоверных данных о потенциальной целевой аудитории, вам необходимо провести исследование, например в виде индивидуальных интервью, фокус-групп или опросов. Нужно определить целевую аудиторию и выяснить ее потребности и желания. На этом этапе следует сосредоточиться на сборе как можно большего количества данных, на основании которых затем можно будет создать персоны пользователей и выявить их потенциальные потребности. Если вам нечего показать исходной группе пользователей или вы создаете совершенно новый продукт, стоит сфокусироваться на конкурентах. Задавайте вопросы о том, что полезного они предлагают или не предлагают пользователям.

106  Часть II. Пользовательский опыт Эту информацию о потенциальных пользователях лучше получить еще до начала процесса разработки. Далее мы рассмотрим ряд методов исследования, которые можно применить на начальном этапе для сбора информации и формулирования гипотез о том, что вы хотите создать для пользователей или какую проблему решить.

4.1.3. Персоны пользователей Персоны пользователей — это важный инструмент, помогающий определить целевую аудиторию вашего сайта или приложения. Персона представляет собой реалистичное, но вымышленное описание потенциального пользователя продукта. Она помогает развить эмпатию, олицетворяя человека, для которого вы создаете продукт. Сопереживание пользователю имеет ключевое значение для создания успешного пользовательского опыта, а пользовательские персоны помогают разработчику представить себя на их месте, чтобы хотя бы в некоторой степени понять, что они думают при взаимодействии с сайтом или приложением. Для того чтобы пользовательские персоны точно представляли вашу целевую аудиторию, вам необходимы подтвержденные данные и результаты наблюдений. Свойства и характеристики этих персон должны быть основаны на наблюдениях, сделанных на начальном этапе сбора информации. Если у вас нет средств или времени для сбора исходных данных и общения с реальными людьми, вы все равно можете создать несколько персон на основе того, что вам уже известно о пользователях. Для создания персоны можно обратиться к существующим форумам поддержки аналогичных сайтов или приложений. Всемирная паутина — это огромный источник знаний, в котором можно найти ответы на некоторые вопросы в условиях нехватки времени и ресурсов. На этом пути нужно следить за тем, чтобы не допустить перекоса в сторону тех целей или потребностей пользователей, которые кажутся вам очевидными без всяких исследований. Детальность описания персоны пользователя может быть очень разной. Некоторые из них могут являться чрезвычайно подробными, а другие — более краткими. Рассмотрим пример персоны, представленный на рис. 4.1. Как видно в приведенном примере, в карте персоны подробно описаны возраст, профессия, семейное положение, количество детей, цели и интересы в исследуемой области, а также причины неудовлетворенности и разочарования вымышленного пользователя в этой области. Эти детали важны для формирования у разработчика чувства сопереживания целевой аудитории. К подобным инструментам следует обращаться на протяжении всего жизненного цикла проекта, чтобы убедиться в том, что вы принимаете решения, ориентируясь на пользователя, в том числе на этапе разработки.

Глава 4. Исследование пользователей  107

Рис. 4.1. Пример карты пользовательской персоны (КП), описывающей одного из представителей целевой аудитории

Для поддержания ориентации на пользователя очень важно привлекать разработчиков, входящих в состав больших команд, к работе над проектом на самых ранних его этапах. Пользователей вряд ли будут интересовать технические детали технологического стека, выбранного для реализации проекта. Однако если решения, связанные с разработкой, каким-то образом создают негативный пользовательский опыт и служат дополнительным источником его неудовле­ творенности, то это следует учесть еще до начала разработки.

4.1.4. Потребности пользователей После создания пользовательских персон необходимо изучить их потребности. Мы должны определить проблему, которую будет решать сайт или приложение. Потребности пользователей, также называемые формулировкой проблемы, крайне важно знать до проведения более глубоких исследований, а также до начала создания веб-сайта или приложения. Компания Norman Nielson Group определяет формулировку потребности пользователя следующим образом:

108  Часть II. Пользовательский опыт Формулировка потребности пользователя — это действенная формулировка проблемы, кратко описывающая конкретного пользователя, его потребность и то, почему она для него важна. Подобная формулировка позволяет определиться с тем, что нужно решить, прежде чем приступать к генерации потенциальных решений, чтобы 1) сжато выразить свое видение проблемы и 2) разработать метрику успеха, которая будет использоваться на протяжении всего процесса дизайн-мышления. Nielson Norman Group (https://www.nngroup.com/articles/user-need-statements/) Потребности пользователей определяют проблему, которую предстоит решить, и задают план приложения или веб-сайта, ориентированного на решение этой проблемы. Крупные проекты или приложения с множеством функций иногда предусматривают несколько пользовательских потребностей, которые могут меняться в зависимости от того, на какой странице находится пользователь. Также вполне имеет право на существование целая иерархия пользовательских потребностей с одной главной, всеобъемлющей целью и более мелкими целями, сгруппированными по разделам сайта. Вполне реально начать работу над проектом, не поговорив ни с одним из существующих или потенциальных пользователей, но имея несколько различных формулировок пользовательских потребностей. Как и в случае с персонами, которые можно создать без непосредственного общения с пользователями, вам следует подтвердить исходные формулировки, прежде чем двигаться дальше. Это гипотезы, и их следует рассматривать по существу. А гипотезы нуждаются в проверке и исследовании для подтверждения того, что они отражают реальные потребности пользователей. Интервью с клиентами является ключом к выяснению их реальных нужд и ожиданий. Далее в этой главе мы поговорим о способах проведения таких интервью, а также об альтернативных методах сбора данных.

4.1.5. Определение целей сайта: согласование пользовательских и бизнес-целей При определении целей веб-сайта или приложения необходимо учитывать два аспекта: бизнес-цели и цели пользователей. Бизнес-цели могут исходить от маркетинговой команды и быть направлены, например, на стимулирование продаж и увеличение доли рынка, то есть на то, что способно повлиять на бизнес. Пользовательские цели — то, для чего пользователи приходят на сайт. Эти цели также можно описать как задачи, для решения которых пользователи обращаются к вашему продукту. Будучи дизайнером, вы вряд ли станете отвечать за определение бизнес-целей, но вашей задачей будет обеспечение того, чтобы цели конечных пользователей

Глава 4. Исследование пользователей  109

соответствовали этим бизнес-целям и способствовали их достижению. Если вы работаете в большой команде, то за определение бизнес-целей будет отвечать ваш менеджер по продукту. Если вы работаете самостоятельно в качестве разработчика и дизайнера, то обязанность по проведению исследования для определения целей пользователей может быть возложена на вас. Все зависит от конкретного проекта и команды, однако определение целей является важным этапом всего процесса. Рассмотрим пример того, как компоненты и содержимое страницы могут способствовать достижению бизнес-цели (рис. 4.2 и 4.3).

Рис. 4.2. Страница сайта розничного магазина, посвященная предмету одежды, который можно добавить в корзину

У некой розничной компании есть физический и интернет-магазин. Определим одну измеримую бизнес-цель и две пользовательские цели для этого интернетмагазина: Бизнес-цель — увеличить количество товаров, добавляемых в корзину, чтобы повысить продажи в интернете на 10 %. Цель пользователя — найти в интернете конкретный предмет одежды, проверить его наличие, выяснить размер и цену. Цель пользователя — приобрести этот предмет одежды. Итоговый дизайн сайта должен способствовать достижению как бизнес-целей, так и целей пользователей. На рис. 4.2 показан вайрфрейм, то есть схему страницы товара. Более подробно о вайрфреймах мы поговорим в главе 5, а пока просто

110  Часть II. Пользовательский опыт имейте в виду то, что они представляют собой схемы компоновки элементов страницы, отражающие расположение ее содержимого. Итак, на странице представлена такая информация о товаре, как цвет, размеры, отзывы и описание. Два прямоугольника слева выступают в качестве плейсхолдеров (заполнителей) для будущих изображений товара. Страница, показанная на рис. 4.2, позволяет пользователю достичь обеих целей, но как же можно увеличить продажи в интернете для достижения бизнес-цели с помощью всего одной страницы товара? На рис. 4.3 показан вайрфрейм, предусматривающий набор компонентов, выступающих в качестве «досок стилей», содержащих товары, которые «завершают образ», хорошо сочетаясь с основным товаром, представленным на странице.

Рис. 4.3. Эти разделы будут наполнены различными товарами, которые хорошо сочетаются с рассматриваемым предметом одежды и помогут в достижении поставленной бизнес-цели

Для достижения бизнес-цели нужно постараться, чтобы пользователи добавляли в корзину не только тот товар, за которым они изначально пришли на сайт, но и другие товары. Предположим, пользователь прокручивает страницу вниз, чтобы прочитать отзывы или другую информацию о товаре. В этом случае он увидит множество вариантов, дополняющих интересующий его товар, и, возможно, решит приобрести некоторые из них для завершения образа, что поможет достичь

Глава 4. Исследование пользователей  111

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

4.1.6. Постановка SMART-целей При определении целей пользователей (и даже бизнес-целей) важно убедиться в том, что они не являются слишком общими и расплывчатыми. Измеримые и конкретные цели позволяют удерживать фокус внимания на решаемой проблеме и предотвращают неконтролируемое разрастание объема и расширение границ проекта, поскольку позволяют избежать создания лишних функций, не отвечающих потребностям пользователей и не способствующих достижению поставленных ими целей. В описанном выше гипотетическом примере со страницей товара розничного магазина была поставлена бизнес-цель увеличить количество товаров, добавляемых в корзину, и повысить продажи на 10 %. Эта цель поддается измерению, и можно отслеживать прогресс в ее достижении с помощью компонента Style Ideas («Стильные идеи»), который позволяет определить, добавляют ли пользователи дополнительные товары в свои корзины. Можно изучить зависимость между этим конкретным элементом веб-страницы и тем, насколько он способствует достижению поставленной бизнес-цели. Если аналитика покажет, что результата нет, то мы можем провести дополнительные исследования пользователей или опросы, чтобы найти способы сделать эту часть страницы более полезной для посетителей и способствующей достижению бизнес-цели. Чтобы убедиться в том, что пользовательские цели являются эффективными, конкретными и измеримыми, при их постановке следует использовать схему SMART. Согласно этой схеме, цель должна быть: конкретной (specific) — цель четко и кратко сформулирована; измеримой (measurable) — цель можно измерить с помощью данных и аналитики; назначаемой (assignable) — всегда можно назначить ответственного за достижение цели; реалистичной (realistic) — цель не является невыполнимой или чрезмерно амбициозной; ограниченной во времени (time-related) — можно прогнозировать реальные сроки достижения этой цели. Чтобы сделать эту схему более применимой в других областях, для нее был предложен ряд модификаций и альтернатив. В статье, опубликованной в 2011 году в журнале Smashing Magazine (http://mng.bz/MBM8), Дикинсон Фонг использовал

112  Часть II. Пользовательский опыт некоторые из этих альтернатив для создания методики постановки пользовательских целей. Согласно предложенной им схеме, цель должна быть: конкретной (specific) — указывать, чего пытается достичь пользователь; измеримой (measurable) — что мы можем измерить для того, чтобы убедиться в успехе пользователей; действенной (actionable) — для ее достижения необходимо иметь возможность ставить и решать конкретные задачи, связанные с дизайном и разработкой; актуальной (relevant) — необходимо убедиться в том, что добавляемые на страницу функции соответствуют потребностям пользователя и не усложняют выполнение его задачи; отслеживаемой (trackable) — отслеживание успешности или неуспешности дизайна в течение определенного временного периода очень важно для дальнейшего улучшения пользовательского опыта. Итак, еще раз посмотрим цели пользователей для упомянутой выше страницы товара и проверим, соответствуют ли они схеме SMART. Цель пользователя — найти в интернете конкретный предмет одежды, проверить его наличие, выяснить размер и цену. Цель пользователя — приобрести этот предмет одежды. В данном упражнении объединим первую цель со второй. Являясь достаточно общей, она все же представляет важную потребность пользователя с точки зрения дизайна страницы. 1. Конкретность — страница товара предоставляет пользователю всю нужную информацию, а также простой способ приобрести товар. 2. Измеряемость — мы можем отслеживать количество нажатий кнопки «Добавить в корзину» и завершений процесса оформления заказа. 3. Действенность — мы можем создать привлекающую внимание кнопку «Добавить в корзину» и разместить информацию о размере, наличии товара и цене на самом видном месте. 4. Актуальность — мы не хотим добавлять лишнюю информацию, которая занимает место на странице и отвлекает внимание пользователя от его основной задачи. Например, если товар доступен для самовывоза, мы не будем загромождать страницу информацией о конкретном магазине и его местонахождении. 5. Отслеживаемость — мы можем отслеживать статистику покинутых страниц, чтобы узнать, как долго пользователи остаются на странице, не нажимая

Глава 4. Исследование пользователей  113

кнопку «Добавить в корзину», и со временем провести дополнительные исследования, чтобы выяснить, находят ли они всю нужную информацию и что мешает им нажать кнопку «Добавить в корзину». Итак, установленные ранее пользовательские цели для страницы товара успешно прошли тест на соответствие SMART-критериям. Данные и результаты исследований имеют ключевое значение для улучшения пользовательского опыта с течением времени. Описанная выше схема позволяет убедиться в том, что цели пользователя являются достижимыми и эффективными. А это, в свою очередь, во-первых, позволяет отслеживать прогресс, и во-вторых, помогает ставить правильные цели для конкретных частей сайта и не зацикливаться на функциях и возможностях, которые не приносят пользы его посетителям. Фокусирование внимания на удовлетворении потребностей и желаний пользователей — это ключ к созданию успешного пользовательского опыта на сайте или в приложении.

4.2. Стратегии проведения пользовательских исследований Существует огромное количество методов проведения пользовательских исследований, и в следующих разделах мы рассмотрим несколько самых распространенных из них. Чтобы было проще разобраться в этих методах, разделим их на категории, используя две оси: на одной из осей будут качественные и количественные исследования, а на другой — исследования отношения и поведения (рис. 4.4). В зависимости от реализуемого проекта, у вас может быть доступ к проведению пользовательских исследований или не быть его. Например, если вы начинаете совершенно новый проект, то, скорее всего, не будет ни количественных данных, ни возможности их получить. Однако можно получить качественные данные, пообщавшись с потенциальными пользователями, и запланировать сбор дополнительных данных для тестирования разработок после запуска проекта. В других случаях перед вами может быть поставлена задача решения новой проблемы с уже работающим сайтом или приложением. Предположим, на ее существование указывает большой объем собранных количественных данных. Однако есть вопросы, для ответа на которые только количественных данных недостаточно, необходимо провести качественные исследования. Оба типа исследований важны, и каждый из них имеет свое место в проектном цикле. Каждая из категорий исследований может дать представление о других категориях и должна подтверждать их результаты. Если этого не происходит и вы, например, обнаруживаете, что результаты качественных исследований противоречат результатам количественных, то вам необходимо разобраться в причинах этого несоответствия.

114  Часть II. Пользовательский опыт Поведение Аналитика A/B-тестирование Юзабилити-тестирование

Количественные исследования

Качественные исследования Социальные медиа Сортировка карточек Фокус-группы Интервью

Опросы

Отношение Рис. 4.4. Виды пользовательских исследований и их место в спектре качественных и количественных методов, а также методов, ориентированных на изучение поведения и отношения пользователей

4.2.1. Качественные и количественные исследования Качественные исследования направлены на сбор нечисловых данных, то есть данных в свободной или, проще говоря, в словесной форме. Качественные данные собираются с помощью таких методов, как интервьюирование, фокусгруппы, наблюдение и непосредственное общение с пользователями. Собранная информация дает представление об отношении и поведении пользователей и позволяет приступить к проектированию того, что им нужно. Однако чтобы убедиться в том, что дизайн работает так, как задумано, необходимы количественные данные для подтверждения слов пользователей относительно их потребностей. Количественные исследования являются числовым аналогом качественных и отличаются от них тем, что направлены на сбор косвенных данных от пользователей с помощью таких методов, как опросы, или с помощью аналитических инструментов. При этом основное внимание уделяется цифрам и статистике. Примером количественных данных могут служить показатели кликов по страницам в системе Google Analytics (рис. 4.5).

Глава 4. Исследование пользователей  115

Рис. 4.5. Панель Google Analytics с подробным описанием кликов по элементам страницы и указанием средней продолжительности пребывания пользователя на ней. Эти данные являются количественными, поскольку представлены только цифрами, и не известно, какими причинами они обусловлены

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

4.2.2. Отношение и поведение пользователя На второй оси, представленной на рис. 4.5, находятся категории исследований, направленных на изучение отношения и поведения пользователей. Под отношением пользователей понимаются их чувства, мнения и суждения по поводу чего-либо, а под поведением — их фактические действия. Иногда эти данные не совпадают друг с другом. Пользователи могут выражать определенную точку зрения, но при изучении их действий выясняется, что их поведение не соответствует тому, что они говорят. Например, данные вашего аналитического инструмента, который отслеживает нажатия кнопок на вашем сайте, могут показать, что большинство пользователей не нажимают главную кнопку с призывом к действию или проводят на странице

116  Часть II. Пользовательский опыт больше ожидаемого периода времени, прежде чем на нее нажать. Эти данные можно объяснить тем, что пользователи с трудом находят путь к этой кнопке, то есть их поведение говорит о наличии проблемы. Однако в ходе опроса вы спрашиваете пользователей о том, насколько легко им было найти эту кнопку, и они отвечают, что не испытывают с этим трудностей. Налицо несоответствие между их словами и поведением. Для выяснения причин этого несоответствия можно провести интервью. Полученные данные помогут вам найти и решить связанную с дизайном проблему для увеличения числа нажатий главной кнопки с призывом к действию. Подобно качественным и количественным данным, результаты исследования отношения и поведения пользователей предоставляют ценные сведения о том, как следует создавать веб-продукты. Различные виды исследований пользовательского поведения помогают выявить проблемы с юзабилити или определить наиболее эффективные варианты дизайна. С другой стороны, изучение отношения пользователей помогает узнать о недостающих возможностях или функциях, которые пользователи ожидают увидеть в продукте и о которых разработчики не узнали бы, наблюдая лишь за поведением посетителей страницы. Оси качественных/количественных исследований и пользовательского отношения/поведения образуют четыре квадранта, как показано на рис. 4.4, и демонстрируют широкий спектр доступных методов, которые могут применяться для принятия обоснованных решений при разработке дизайна веб-сайта или приложения. Собранные данные также помогают разработчикам сосредоточиться на пользователе и его потребностях, а не на собственных предположениях о его желаниях и предпочтениях. По своему опыту я могу сказать, что дизайнерские решения, основанные на данных пользовательских исследований, являются гораздо более эффективными по сравнению с решениями, основанными на предположениях. Данные должны отвечать на вопрос о том, почему создаются именно те или иные функции. Если разработчики или другие заинтересованные лица начнут добавлять излишнюю информацию или функциональность, необходимость в которой не была подтверждена пользователями, это может негативно сказаться на пользовательском опыте. Дополнения могут оказаться не столь полезными пользователям и даже вызвать раздражение, что вынудит их отказаться от дальнейшего обращения к сайту или приложению. А потеря клиентов негативно сказывается на прибыли компании.

4.2.3. Методы исследования пользователей Итак, мы выделили две основные оси пользовательских исследований; теперь рассмотрим некоторые из наиболее актуальных методов, которые можно использовать при создании сайта или приложения. Из всех существующих обратимся лишь к тем, которые легче всего адаптировать и использовать при самостоятельной работе.

Глава 4. Исследование пользователей  117

Сортировка карточек Сортировка карточек чрезвычайно полезна для определения информационной архитектуры сайта или приложения и по сравнению с некоторыми другими методами является относительно недорогой. Говоря в общем, сортировка карточек представляет собой способ организации содержимого сайта или разработки его навигационного меню. При использовании данного метода разработчики просят пользователей сгруппировать страницы и контент в соответствии с тем, как они ожидали бы найти их в меню сайта. Чтобы воспользоваться данным методом исследования, напишите основные темы контента, который будет размещен на вашем сайте, на отдельных карточках или стикерах, а если вы работаете с виртуальными участниками, то используйте для этого один из онлайн-инструментов. В качестве недорогого варианта могу предложить использовать дизайнерскую программу Figma (https://www.figma.com/), позволяющую работать с артбордами. Если у вас есть названия разделов, можете использовать их. Затем выберите один из двух методов сортировки карточек: открытый или закрытый. При открытой сортировке карточек вы просите пользователей сгруппировать контент в соответствии с тем, как, по их мнению, это должно быть сгруппировано, а затем предоставить метку или название для получившихся групп. Эта метка или название поможет затем определиться с пунктами главного навигационного меню сайта. Проведите такую сортировку с участием трех или более пользователей, обращая внимание на то, как именно группируются фрагменты контента и какие метки применяются для указания их сходства. При закрытой сортировке карточек вы просите пользователей сгруппировать контент по заранее определенным категориям вместо того, чтобы предлагать им придумать названия для каждой из групп. При этом также следует обращать внимание на то, что и как именно группируется, чтобы выявить сходства или различия. В результате проведения любого из этих исследований вы получите реалистичное представление о структуре содержимого сайта, основанное на мнении пользователей о том, как оно должно быть организовано.

Конкурентный анализ Конкурентный анализ — это возможность проанализировать и сравнить продукты конкурентов, используя определенный список критериев. Этот список может содержать множество пунктов, в том числе: визуальный дизайн; контент; пользовательские сценарии для выполнения одинаковых или схожих задач на сайте;

118  Часть II. Пользовательский опыт функциональность; навигация; удобство использования; звучание бренда. Зафиксируйте то, что, по вашему мнению, конкуренты делают хорошо, а что — плохо. Выявление недостатков обычно помогает избежать тех же ошибок в процессе разработки дизайна. Чтобы не запутаться, при проведении конкурентного анализа ограничьтесь тремя-пятью основными конкурентами. В ходе этого исследования нужно определить те области, в которых ваш продукт или опыт превосходит продукты конкурентов, предоставляя то, чего не предоставляют они; области, в которых ваш продукт или опыт уступает продуктам конкурентов; недостатки продуктов конкурентов, которые вы можете использовать в своих интересах; и наконец, те области, в которых ваши конкуренты являются лучшими. Для проведения конкурентного анализа вы можете выбрать любые инструменты, например электронные таблицы вроде Microsoft Excel, а для большей наглядности — создать сравнительные артборды в Adobe Illustrator или Figma. При этом смело делайте заметки и скриншоты. При проведении конкурентного анализа также могут использоваться качественные и количественные данные. Качественные данные оказываются представлены в виде мнений о дизайне или функциональности, а количественные оценивают в численном выражении наличие или отсутствие той или иной функции в продукте или на сайте конкурента. Конкурентный анализ должен давать представление об общих чертах конкурентов, которые пользователи, вероятно, ожидают увидеть на вашем сайте, и о том, какого опыта следует избегать, а к какому стремиться. Однако не стоит увлекаться копированием конкурентов. Изучив продукты нескольких из них, вы сможете черпать вдохновение из разных источников. Ваш продукт или веб-сайт должен выделяться на фоне других и подчеркивать собственные достоинства, а не быть чьей-то копией.

Фокус-группы Фокус-группы — это разновидность качественного исследования, проводимого в форме дискуссии в группе численностью от 5 до 10 человек. Фокус-группы относятся к категории качественных исследований, поскольку их участники делятся своим мнением, отношением и убеждением по той или иной теме. По сравнению с другими формами исследований, такими как опрос, фокус-группы позволяют глубже изучить тему, поскольку в ходе сессии участники находятся

Глава 4. Исследование пользователей  119

рядом с вами. Вы можете задавать больше уточняющих вопросов и контролировать ход обсуждения, выясняя нужную информацию. Фокус-группы проводятся на любом этапе исследовательского процесса. К ним резонно обратиться в самом начале, когда вы пытаетесь получить представление о том, как пользователи воспринимают продукт. Даже если у вас еще нет разработанного дизайна, вы можете составить вопросы на основе анализа ваших конкурентов или обобщенного продукта без конкретного названия. Полученные ответы предоставляют ценные сведения о том, что нравится и что не нравится пользователям, позволяя вам улучшить те аспекты, которые они считают проблемными. При проведении фокус-групп следует тщательно подбирать участников. Там должны быть люди, которые разбираются в обсуждаемой теме. В группу обычно включают как тех, кто уже пользовался аналогичным продуктом, так и тех, кто является потенциальным пользователем. Целью фокус-группы является обсуждение, поэтому если участники не имеют представления о продукте или соответствующем направлении, они не смогут предоставить в ходе обсуждения никаких ценных сведений. Помимо ведения заметок следует делать запись сессии, чтобы впоследствии просматривать ответы участников и убедиться в том, что они были зафиксированы правильно, а также в том, что не упущено ничего важного. При составлении списка вопросов убедитесь в том, что они носят открытый характер. Если используете вопросы, требующие ответов типа «да/нет», подготовьте перечень уточнений, чтобы поддержать дискуссию. Начните с вводных вопросов, получите представление о группе и о том, насколько она осведомлена о теме, прежде чем переходить к более углубленному материалу. Вот несколько примеров вводных вопросов, которые можно было бы задать при проведении фокус-группы с участием потребителей мороженого: Как вы относитесь к мороженому? Как часто вы покупаете мороженое? Какие слова или фразы приходят вам на ум, когда вы думаете о мороженом? На что вы обращаете внимание при покупке мороженого? Какие бренды ассоциируются у вас с мороженым? Что вам не нравится в мороженом, представленном на рынке? Эти вопросы призваны открыть дискуссию перед озвучиванием более глубоких или уточняющих вопросов по теме. Фокус-группы — это отличный способ лично пообщаться с пользователями и получить ценную информацию об их восприятии и мнении относительно

120  Часть II. Пользовательский опыт конкретного продукта или маркетингового направления. Дополнительные диалоги между участниками фокус-группы способствуют развитию дискуссии и позволяют получить информацию, которую невозможно было бы получить в ходе индивидуального интервью.

Интервью Интервью — это еще один распространенный метод исследования, проводимого в формате «один на один». Как и в случае с фокус-группой, интервьюер задает открытые вопросы, чтобы узнать о поведении, отношении и убеждениях пользователей. Поскольку интервью предполагает формат «один на один», оно может проводиться как при личном присутствии, так и в режиме видео- или аудиоконференции. Интервью можно провести на любом этапе проектного цикла, чтобы убедиться в правильности выбранного решения. Следует проинтервьюировать как минимум 20 человек, чтобы выявить общие для многих пользователей темы, которые могут повлиять на продукт. Интервью должно иметь конкретную цель, которой вы хотите достичь. Что именно вы хотите узнать о пользователях вашего продукта? Вас интересует то, как они его используют? Как они относятся к продукту в целом, к конкретной его функции или возможностям? В примере с мороженым конкретная цель интервью может формулироваться так: «Как родители относятся к приготовлению десертов из мороженого для своих детей и как можно улучшить этот процесс?» С помощью этого вопроса мы хотим выяснить, как участники интервью относятся к процессу приготовления десертов из мороженого. Мы просим их рассказать о процессе его приготовления, о самых сложных его аспектах, о том, нравится ли он им и есть ли способ сделать его более приятным. Обязательно задавайте вопрос «Почему?», чтобы выяснить причину, по которой участники чувствуют и поступают определенным образом. Задавайте открытые вопросы даже в качестве уточняющих, например: «Что вы при этом почувствовали?» Используйте один и тот же набор вопросов в ходе каждого интервью и, как уже было сказано, обязательно определите цель, которой вы надеетесь достичь. Применение набора одних и тех же вопросов позволяет выявить общие для участников темы, способные указать на те вещи, которые вам имеет смысл акцентировать в своем продукте. При составлении списка не включайте в него наводящих вопросов, ведь надо получить от участников максимально непредвзятые ответы. Если из-за формулировки вопроса они подумают, что вы хотите получить конкретный ответ, они могут ответить неискренне. При проведении интервью также очень важно убедиться в том, что участникам комфортно и они чувствуют, что их слышат. Подтверждайте их ответы словами «Я понял (-а)», не перебивайте и не говорите за них. Интервью в формате «один на один» — это отличная возможность потренировать свою способность к эмпатии, которая поможет вам лучше понять точку зрения участников.

Глава 4. Исследование пользователей  121

Интервью — это еще один малозатратный способ сбора качественных данных. В ходе такой личной беседы есть возможность по-настоящему глубоко изучить мысли и отношение каждого человека к обсуждаемому вопросу.

Опросы Опросы целевой аудитории являются одним из самых недорогих и простых способов сбора качественных и количественных данных. Для проведения опросов существует множество бесплатных цифровых инструментов. Выбор подходящего инструмента зависит от личных предпочтений и функций, необходимых для проведения опроса. Некоторые инструменты позволяют разделять участников в зависимости от их ответов и задавать им разные вопросы. Как и в случае с другими методами исследования, вам следует заранее определиться с тем, что именно вы хотите узнать у своей целевой аудитории, и составить список вопросов, не выходящих за рамки поставленной цели. Если вы просите пользователей, например, выставить чему-нибудь оценку, обязательно дайте им возможность подробно рассказать о том, почему они оценили именно так. Когда я проводила опрос, чтобы получить представление о том, какие функции браузера находят отклик у веб-разработчиков, я спрашивала: «Насколько полезной вы считаете эту функцию по шкале от 1 до 10?» Однако я не предусмотрела необходимых уточняющих вопросов, чтобы выяснить, почему они считают или не считают ее полезной. Осознав это, я постаралась дать участникам опроса возможность подробно описать причину своего ответа. Делайте опросы короткими и целенаправленными. При проведении опросов относительно возможностей браузера я разбила длинный список его функций на такие категории, как CSS и JavaScript. На их основе я подготовила более короткие опросы, чтобы разработчики, не заинтересованные в функциях, связанных, например, с CSS, могли не участвовать в обсуждении соответствующих материалов. Как и в случае с любым другим методом, предполагающим ответы на вопросы, вам необходимо убедиться в том, что ваши вопросы не заставляют респондентов отвечать определенным образом. Вам также следует избегать вопросов, которые обеспечивают заведомо благоприятный результат с точки зрения поставленной цели. Такие вопросы не дают точного представления о чувствах участников опроса и могут исказить результаты исследования, в этом случае неизбежны негативные последствия в дальнейшем, когда сайт будет запущен. По сравнению с интервью опросы позволяют собрать данные у большего числа людей. Существуют упомянутые выше специальные сервисы для проведения опросов, осуществляющие набор участников, однако можно использовать и более неформальные способы, например поделиться информацией об опросе в социальных сетях, о чем я подробно расскажу чуть позже.

122  Часть II. Пользовательский опыт Юзабилити-тестирование Юзабилити-тестирование — это метод исследования пользователей, при котором вы наблюдаете за участниками, решающими некую задачу с помощью вашего продукта. Исследования этого типа могут проводиться различными способами в зависимости от того, на какой стадии процесса разработки вы находитесь. В идеале это тестирование должно проводиться до начала процесса веб-разработки, чтобы заранее выявить потенциальные проблемы дизайна и избежать необходимости переписывания кода. При проведении такого тестирования можно использовать кликабельные вайр­ фреймы или макеты. Многие приложения для создания визуального дизайна и вайрфреймов предлагают подобные интерактивные функции, что позволяет создавать такие кликабельные прототипы без необходимости писать код. Если у вас нет доступа к подобным приложениям, вы можете воспользоваться такой программой, как PowerPoint, и из своих вайрфреймов импортировать в нее экраны пользовательского сценария, которые хотите протестировать. Единственным отличием от использования интерактивного макета в данном случае будет являться необходимость ручного переключения между слайдами. Подробнее о прототипировании и тестировании мы поговорим в главе 11. Юзабилити-тестирование можно проводить и на работающем сайте, чтобы выявить возможности для улучшения пользовательского опыта. Допустим, ваши аналитические данные показывают, что люди активируют определенный инструмент в приложении, но закрывают его в течение 10 секунд, не переходя к дальнейшим действиям. Эти количественные данные могут послужить отличной отправной точкой для качественного юзабилити-тестирования. Вы можете составить список задач и вопросов по поводу приложения в целом и конкретно того инструмента, от использования которого люди быстро отказываются. Количественные показатели говорят о том, что пользователи отказываются от него, но мы не знаем почему. Выяснить это поможет модерируемое юзабилити-тестирование с наблюдением. Оно дает возможность фасилитаторам взаимодействовать с участниками в режиме реального времени и задавать им уточняющие вопросы. При проведении юзабилити-тестирования, как модерируемого, так и немодерируемого, важно убедиться в том, что задания являются лаконичными и понятными и не оставляют места для вопросов или интерпретаций, отличных от изначально изложенных. Если вы проводите юзабилити-тестирование самостоятельно, сделайте видеозапись сессии, чтобы впоследствии иметь возможность убедиться в точности сделанных вами заметок. Если же кто-то другой будет наблюдать за процессом и делать заметки, то их будет достаточно. По окончании сессии необходимо проанализировать полученные результаты, которые послужат основой для принятия конкретных решений. Другими словами, у вас должны появиться варианты возможных изменений в проекте, которые следует рассмотреть, прежде чем переходить к его реализации.

Глава 4. Исследование пользователей  123

В отличие от других рассмотренных методов исследования, юзабилити-тестирование может оказаться дорогостоящим. Существует несколько пунктов, в которых можно снизить затраты. Тем не менее набор участников для проведения тестирования (как правило, в обмен на затраченное время участнику предоставляется некое вознаграждение), построение исследования, сбор и анализ его результатов, а также место и способ проведения исследования требуют существенных затрат, как временных, так и денежных. Обязательно сформулируйте четко, какую информацию вы хотите получить в результате проведения юзабилити-тестирования, чтобы после его завершения вы могли принять конкретные решения. Несмотря на то что идеального пользовательского опыта не существует, юзабилити-тестирование подскажет, в каких направлениях можно улучшить дизайн, сэкономит драгоценное время разработчиков, избавив их от необходимости переписывать уже готовые функции.

Неформальные методы исследования Наконец, я хочу рассказать о неформальных методах исследования пользователей. Всемирная паутина — это огромный архив качественных и количественных пользовательских данных, которые можно найти, например, в социальных сетях, на форумах и досках объявлений. Одним из моих любимых неформальных методов исследования, позволяющих быстро получить как качественные, так и количественные данные, является проведение опросов в Twitter. Если у меня есть некие данные и гипотеза или я хочу получить информацию от разработчиков о том, нуждается ли что-то в более формальном исследовании, Twitter — моя палочка-выручалочка. Но это, разумеется, не единственный инструмент. Ваша аудитория в Twitter может представлять собой своеобразный информационный пузырь и иметь предвзятое мнение по тому или иному вопросу. Например, среди моих подписчиков есть не только технически подкованные люди, но и те, кто интересуется передовыми достижениями в области веб-разработки. Они хотят опробовать новый инструмент или фреймворк и, как правило, не ограничены в выборе используемого технологического стека. Чего нельзя сказать обо всем сообществе разработчиков. После проведения первоначального исследования в Twitter я обычно провожу отдельный опрос, чтобы дать возможность высказаться и другим участникам. При наличии ограниченного бюджета используйте социальные сети и другие онлайн-платформы для сбора дополнительных данных. Однако для подтверждения собранных данных, а также для того, чтобы убедиться в их достоверности и необходимости принятия мер на их основе, следует использовать более формальные методы исследования. Упомянутые неформальные методы представляют собой быстрое и недорогое решение для сбора только первичных данных, необходимых для начала реализации проекта.

124  Часть II. Пользовательский опыт

4.2.4. Исследование как непрерывный процесс В идеале исследования должны проводиться на всех этапах реализации проекта. Проведение исследований на протяжении всего процесса разработки обеспечит постоянное получение обратной связи от целевой аудитории и потенциальных пользователей. Таким образом, потребности пользователей будут находиться в центре вашего внимания на протяжении всего проектного цикла. Помните, что вы создаете свой сайт, приложение или продукт прежде всего для них. В главе 11 этот итеративный цикл будет подробно рассмотрен. Мы обсудим различные варианты прототипирования и некоторые практические методы тестирования, которые можно использовать в тех случаях, когда у вас уже есть готовый дизайн сайта или минимальный жизнеспособный продукт.

Резюме Начав реализацию проекта с исследования, позволяющего убедиться в том, что вы решаете реальную проблему бизнеса или пользователя, вы избежите создания ненужного продукта. Первоначальные исследования позволяют определить направление развития продукта. В русле этого направления будут затем приниматься дизайнерские решения, связанные как с пользовательским опытом, так и с визуальной составляющей. Прежде чем приступать к разработке дизайна, необходимо провести исследование, на основе результатов которого будут приниматься дизайнерские решения. Использование результатов исследований для принятия дизайнерских решений, особенно при реализации крупных проектов, позволяет избежать дорогостоящих изменений на более поздних этапах. Начиная проект с проведения исследований, вы получаете прочный фундамент для разработки дизайна и гарантируете, что при его реализации потребности пользователей будут поставлены во главу угла. Многочисленные методы исследования делятся на категории, позволяющие получить качественные и количественные данные, изучить поведение и отношение пользователей. Комбинируя эти методы между собой, можно собрать данные, подтверждающие достоверность результатов каждого из них. Числовые данные, например аналитические показатели, должны быть подтверждены качественными исследованиями или вопросами, ориентированными на получение качественных данных.

Глава 4. Исследование пользователей  125

Отношение, мнения и отзывы пользователей должны измеряться с помощью количественных данных, которые формируют базу, подтверждающую высказанные пользователями мнения. Если качественные данные не подтверждаются количественными или наоборот, то подобное несоответствие стоит тщательно изучить, поскольку может случиться, что пользователи при ответе неправильно поняли, о чем их спрашивают. Выявленную нестыковку следует использовать как возможность для предоставления пользователям большей ясности и улучшения их опыта. Исследование — это не одноразовое мероприятие. Есть разные методы его проведения: одни больше подходят для конкретного этапа реализации проекта, другие могут использоваться на протяжении всего проектного цикла.

5

Проектирование пользовательского опыта

В данной главе 33 Понятие информационной архитектуры, ее польза для планирования сайта и его контента. 33 Организация и структурирование данных и/или контента сайта. 33 Построение схем пользовательских сценариев для определения путей, по которым может пройти пользователь для выполнения задач на сайте или в приложении. 33 Наглядный цикл, начинающийся с создания вайрфреймов, за которым следует разработка визуального дизайна и прототипирование.

Прежде чем приступать к строительству дома, необходимо заложить фундамент. Именно таким фундаментом в веб-разработке служат результаты первоначального исследования пользователей. На основе этих результатов строится остальная часть сайта или приложения. Они позволяют начать проектирование дизайнерского решения, ориентированного на удовлетворение потребностей пользователей. Как уже говорилось в главе 3, проектирование пользовательского опыта — это обширное понятие, способное охватывать множество различных аспектов,

Глава 5. Проектирование пользовательского опыта  127

которые не всегда относятся к дизайну в его привычном понимании. Одна из должностей, в которой я работала, называлась «дизайнер опыта» и предполагала несение ответственности за тот этап работы, речь о котором пойдет в этой главе. Данный этап охватывает не только визуальное оформление сайта и пользовательского интерфейса, но и возведение своеобразных строительных лесов в виде информационной архитектуры сайта и вайрфреймов, а также дизайн взаимодействия и определение пользовательских сценариев. Он включает в себя планирование и создание всего визуального восприятия сайта перед переходом к этапу его разработки.

5.1. Информационная архитектура Если вы бывали в лабиринте, то знаете, каким пугающим он может показаться! Когда вы входите в лабиринт, вы не знаете, в какую сторону идти, чтобы выбраться из него. Если у вас нет никаких подсказок, вы просто блуждаете, надеясь на то, что выбранное направление не заведет вас в тупик, из которого потом придется возвращаться назад и выбирать новый путь, способный привести вас к цели. Когда пользователи попадают на сайт или в приложение, они стремятся достичь некой цели и должны иметь четкое представление о том, с чего начать свое путешествие по продукту. Когда посетитель впервые попадает на какую-то страницу вашего сайта, он должен быть в состоянии понять, по каким элементам нужно щелкнуть, чтобы найти то, что ему нужно. И так должно быть на всех страницах сайта. Вам не нужно, чтобы, находясь на вашем сайте, пользователи чувствовали себя как в лабиринте. Если клиенты заходят в тупик, вынуждены возвращаться назад или не знают, куда двигаться дальше, то их раздражение будет расти, а вместе с ним и вероятность того, что они покинут сайт, не решив свою задачу. Раздражение пользователя может привести к снижению уровня доходов и продаж. Таким образом, разработка правильной информационной архитектуры сайта является критически важной. На этом этапе проекта в дело вступают результаты пользовательских исследований. Если вы провели с пользователями упражнение по сортировке карточек, то его результаты могут помочь вам определиться с тем, как структурировать навигацию и сгруппировать контент в соответствии с ожиданиями пользователей. Информационная архитектура веб-сайта или приложения предполагает структурирование и организацию данных и содержимого, их маркировку, установление взаимосвязей между различными страницами и фрагментами контента. Она также определяет навигационную и контентную стратегию сайта. Успешная информационная архитектура помогает пользователям ориентироваться на сайте, точно указывая им, где они находятся, на что смотрят и чего могут ожидать при путешествии по сайту с целью решения стоящей перед ними задачи. При

128  Часть II. Пользовательский опыт правильном подходе эта архитектура позволяет пользователям не чувствовать себя потерянными и даже может служить в качестве исходного показателя для оценки удобства использования сайта. Например, при маркировке различных страниц и контента вы можете прийти к выводу о том, что для выполнения основной задачи сайта пользователю требуется совершить слишком много шагов, это не очень хорошо, поэтому их количество необходимо сократить. Планирование информационной архитектуры до создания вайрфреймов поможет выявить проблемные моменты, если таковые существуют, и улучшить пользовательский опыт. Такая подготовка позволит вам не тратить время на создание вайрфреймов и макетов для ненужных страниц или контента. Она также поможет выявить пробелы в пользовательском сценарии, где, например, может потребоваться добавление еще одной страницы или фрагмента контента. На данном этапе выполняется документирование структуры сайта и типов контента, который будет размещен на каждой из его страниц. Так закладывается фундамент, гарантирующий еще до начала процесса проектирования удо­ влетворение потребностей бизнеса и клиентов. Обычно для этого используется множество электронных таблиц, текстовых документов и диаграмм. Сведение всего этого материала в удобную для чтения электронную таблицу особенно полезно при работе с другими членами команды — писателями, копирайтерами или коллегами по бизнесу. Она наглядно представляет контент будущего сайта и может служить в качестве контрольного списка не только при разработке дизайна проекта, но и при написании контента. Документирование структуры и контента полезно при разработке сайта любого размера, но особенно важно для крупных сайтов, содержащих 50 и более страниц, например новостных или научных сайтов, посвященных исследованиям. Такое документирование структуры и контента является жизненно важным не только для обеспечения правильной группировки контента, но и для отслеживания во избежание дублирования работы, связанной с его написанием. Давайте рассмотрим несколько способов документирования информационной архитектуры сайта или приложения.

5.1.1. Картирование сайта Карта сайта — это схема, наглядно представляющая структуру и содержимое сайта. Обычно она имеет вид диаграммы, демонстрирующей иерархию и взаимосвязи между страницами с контентом. Часто карта также отражает навигацию верхнего уровня, но может и не содержать в точности всех деталей навигации. Все зависит от того, насколько подробно карта сайта описывает его контент. В общем случае она представляет собой разбивку всех основных целевых страниц и подстраниц. Рассмотрим сейчас несколько примеров карт сайта, начав с рис. 5.1.

Глава 5. Проектирование пользовательского опыта  129

Главная страница

Попробовать

Демоверсия инструмента

Документация

Установка

О сайте

Расширение для браузера

Руководство разработчика

Часто задаваемые вопросы

Расширение для среды разработки

Руководство пользователя

Журнал изменений

Интерфейс командной строки

Правила поведения Начало работы Инструкция

API Конфигурации Устранение неисправностей

Рис. 5.1. Пример оформления карты сайта

Создание карты сайта В зависимости от масштабов создаваемого сайта или приложения можно ограничить степень детализации карты сайта, чтобы сэкономить время разработчиков. Карта сайта должна давать общее представление о том, какое содержимое можно увидеть на странице. Нет необходимости включать в карту каждую страницу крупного сайта с большим количеством контента. Например, если вы работаете над сайтом интернет-магазина, содержащим сотни страниц с товарами, нет смысла описывать в карте сайта каждую из этих страниц — достаточно указать, как на них можно попасть. В конечном счете степень детализации карты сайта зависит от ожиданий клиента и от того, работаете ли вы совместно с командой дизайнеров. Например, карта,

130  Часть II. Пользовательский опыт представленная на рис. 5.2, не ограничивается документированием основных страниц входа. В качестве альтернативы можно сделать карту сайта в виде электронной таблицы, содержащей результаты аудита контента.

Рис. 5.2. Пример карты сайта в виде электронной таблицы

У карты сайта может быть и техническое применение: ее можно включить в футер уже работающего сайта, как показано на рис. 5.3. Наличие такой карты на сайте дает пользователям возможность просмотреть основные его разделы, что бывает полезно, когда они не знают, куда им идти. Разработчики могут пойти еще дальше и создать карту сайта в виде XMLдокумента либо вручную, либо с помощью специальных инструментов для генерации файлов такого типа. Этот документ предоставляет поисковым

Глава 5. Проектирование пользовательского опыта  131

Рис. 5.3. Карта сайта, отображаемая в футере и перечисляющая основные точки приземления

системам информацию о сайте и дает дополнительные преимущества с точки зрения поисковой оптимизации. Визуальная карта сайта, составленная на ранней стадии процесса, впоследствии может послужить основой для XML-документа, создаваемого на этапе разработки, и ускорить его построение в том случае, если вы пишете код вручную без использования автоматизированного инструмента. Карта сайта может быть построена различными способами, но ее конечная цель состоит в том, чтобы дать укрупненное и обобщенное представление о структуре сайта, иерархии страниц и, если это применимо, о том, как страницы связаны между собой. Впоследствии она может помочь в разработке пользовательских сценариев, также называемых картами путешествий, которые отражают путь, проходимый пользователем на сайте или в приложении; более подробно о картах путешествий мы поговорим в следующих разделах главы. СОВЕТ  Часто при создании сайта нам и нашим заказчикам может показаться, что мы лучше знаем, как следует группировать и отображать контент, поскольку находимся очень близко к продукту. Однако такой образ мышления не ставит во главу угла потребности пользователей. Подход посетителей к изучению контента сайта, скорее всего, будет отличаться от того, как это делаете вы или ваш заказчик. Поэтому очень важно провести исследование пользователей как минимум в форме сортировки карточек. Его результаты позволят понять ожидания пользователей относительно группировки содержимого сайта и помогут вам организовать сайт максимально эффективно.

Навигация по сайту и поиск пути Я часто создаю карты сайта, исходя из планируемой навигации по нему. Хотя разработка структуры навигации относится к этапу построения информационной архитектуры, она не является единственным соображением,

132  Часть II. Пользовательский опыт принимаемым в расчет, поскольку не учитывает взаимосвязи между страницами и контентом. Напротив, карта сайта и инвентаризация контента должны лежать в основе разработки главного навигационного меню и могут влиять на его дизайн в зависимости от количества уровней, предусматриваемых сайтом или приложением. Навигация не ограничивается главным меню сайта; она также берет на себя функцию информировать его посетителей о том, где именно они находятся. Допустим, есть сайт с меню в верхней части и выпадающим списком, содержащим ссылки на целевые страницы второго уровня, как показано на рис. 5.4. Пользователи, перешедшие на одну из этих страниц, могут столкнуться с дополнительными элементами навигации, ведущими их на три или четыре уровня вглубь сайта. Поскольку пользователи не могут попасть на эти страницы из главного навигационного меню, разработчику необходимо включить вторичное навигационное меню с разделами второго и более глубоких уровней, чтобы сориентировать пользователей и показать, как именно они попали на ту страницу, на которой они находятся.

Рис. 5.4. Навигация на этом сайте простирается за пределы навигационного меню, представленного в его верхней части. Боковая панель справа служит в качестве средства навигации по более глубоким уровням сайта, а также позволяет пользователю понять, откуда он перешел на текущую страницу

Глава 5. Проектирование пользовательского опыта  133

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

5.1.2. Контент-анализ и аудит Обычно контент-анализ проводится в ходе редизайна уже существующего сайта или приложения. При этом данные заносятся в электронную таблицу. Однако и когда я работаю над новыми проектами в отсутствие контента, использование электронных таблиц становится полезным для отслеживания того, какой именно контент необходимо подготовить для сайта. При этом значения в электронных таблицах могут быть несколько иными, чем при анализе существующего контента, но они дают четкое представление обо всем необходимом содержимом, сгруппированном по страницам или по другому принципу. Для новых сайтов этот список может быть гораздо короче, чем для существующих, контент которых, например посты в блогах, создавался в течение нескольких лет до проведения анализа. Использование электронной таблицы представляет собой недорогой способ, который может быть полезен для проведения анализа или аудита контента в будущем. Как правило, электронная таблица для анализа контента среди прочего включает следующую информацию: Страница, на которой находится конкретное содержимое. Метаданные страницы. Название или краткое описание фрагмента контента. Автор. URL-адрес. Формат файла (изображение, статья, фрагмент пользовательского интерфейса, загружаемый файл и т. д.). Описание фрагмента контента. Дата создания контента (если есть). При проведении анализа веб-контента можно фиксировать множество типов данных в соответствии с выявленными потребностями. Полученная в результате электронная таблица будет выглядеть примерно так, как показано на рис. 5.5.

134  Часть II. Пользовательский опыт A

Страница

Название

B

Контент

C

Описание

D

E

https://coolwebsite.com

Главная страница Название главного изображения Главное изображение

Описывает изображение + цель

Название подраздела

Содержание текста и изображения Описывает назначение контента

Поиск по документации

Поисковая строка и кнопка ввода

Руководство пользователя

Значок и текст

F

Автор/Владелец URL-адрес Дизайн и маркетинг Маркетинг

https://coolwebsite.com https://coolwebsite.com https://coolwebsite.com/docs

Документация

Руководство разработчика

Поиск по страницам документации Ссылка на руководство пользователя

https://coolwebsite.com

Ссылка на руководство разработчика

О сайте Журнал изменений

Значок и текст

Правила поведения

Значок и текст

Ссылка на журнал изменений

Рис. 5.5. Пример простой электронной таблицы с результатами инвентаризации контента

Как уже было сказано, я использовала документ для анализа контента при планировании содержимого новых сайтов. Использование электронной таблицы для отслеживания нужного контента, вне зависимости от того, работаете вы с копирайтером или нет, является простым и понятным способом сбора всего необходимого в одном месте. Если вы работаете над редизайном сайта, то анализ контента позволит вам получить представление о существующем содержимом и о том, как оно вписывается в результат редизайна. На этом этапе возникает необходимость в проведении аудита контента. Аудит контента — это не просто документирование содержимого сайта, но и оценка того, нужно ли его удалить и переписать или можно оставить все как есть. При проведении аудита необходимо задать следующие ключевые вопросы о каждом фрагменте контента: Достигает ли контент поставленных целей? Обеспечивает ли он ценность для конечных пользователей? Способствует ли он достижению целей пользователей? Способствует ли он достижению бизнес-целей? Соответствует ли он звучанию вашего бренда? Как обстоят дела с этим контентом? (Просматривается ли он?) Проведение аудита контента помогает разработать контент-стратегию сайта или приложения на будущее в соответствии с их пользовательскими и бизнесцелями. Именно контент привлекает пользователей на сайт или в приложение; без него дизайн не имеет значения. Проведение аудита позволяет согласовать усилия всех членов команды и направить их на достижение целей сайта и создание соответствующих материалов, будь то статья или другой медиаконтент.

Глава 5. Проектирование пользовательского опыта  135

5.2. Пользовательские сценарии и пути После составления иерархической структуры сайта в виде его карты и разработки компоновки сайта с учетом его информационной архитектуры можно приступить к определению пользовательских сценариев и составлению карты путей пользователя по сайту. Несмотря на то что пользовательский сценарий и карта пути пользователя кажутся одним и тем же, они отличаются по типу повествования. Пользовательский сценарий призван четко описать каждый шаг процесса решения задачи. Карта пользовательского пути выстраивает повествование с точки зрения персоны пользователя. Она отображает опыт вашей основной пользовательской персоны и включает эмоциональный элемент, позволяющий определить, о чем думает и что чувствует пользователь на каждом этапе своего путешествия по вашему продукту. При построении маршрута пользовательского пути крайне важно иметь достоверные данные о целевых пользователях, собранные в ходе исследований, чтобы не строить догадок относительно того, что происходит у них в голове при взаимодействии с вашим продуктом.

5.2.1. Пользовательские сценарии Пользовательские сценарии — это направления, по которым перемещаются пользователи на вашем сайте или в приложении при решении стоящей перед ними задачи. Эти сценарии начинаются с точки входа конкретной задачи и включают в себя все шаги между этой точкой и моментом достижения пользовательской цели. Пользовательские сценарии могут представлять собой простые блок-схемы с обозначениями всех взаимодействий, необходимых для выполнения задачи (рис. 5.6), или более детально проработанные вайрфреймы. Версии пользовательского сценария в виде блок-схемы и вайрфрейма имеют каждая свои уникальные преимущества. Например, блок-схема предоставляет объективный обзор каждого шага на пути, который может пройти пользователь для выполнения задачи. При этом не акцентируется внимание на макете или дизайне, как это было бы в случае с вайрфреймом. Такой подход имеет свои плюсы, поскольку при рассмотрении проекта заинтересованными сторонами визуальный дизайн и макет могут отвлекать внимание от получения обратной связи. А в фокусе интереса должны находиться шаги, необходимые для выполнения действия на разрабатываемом сайте или в приложении. Создание пользовательских сценариев до разработки вайрфреймов и визуального дизайна позволяет выявить точки, в которых пользовательский опыт может быть оптимизирован, и не тратить время на создание вайрфреймов, которые могут оказаться ненужными. Эти пользовательские сценарии затем помогут создать прототипы и убедиться в том, что никакой из запланированных аспектов пользовательского взаимодействия не был упущен на этапе разработки визуального дизайна. После создания вайрфреймов имеет смысл преобразовать блок-схему

136  Часть II. Пользовательский опыт

Нет Вход/ регистрация

Уже есть учетная запись?

Создать учетную запись Введите адрес электронной почты и пароль

Да

Дисплей/экран

Решение

Рис. 5.6. Простая диаграмма пользовательского сценария, отображающая точку входа в систему. Разные фигуры могут использоваться для представления различных точек, до которых может добраться пользователь. Видит ли он некий экран? Должен ли он выполнить какое-либо действие?

пользовательского сценария в вайрфрейм. Блок-схема позволит определить точки контакта, на которые необходимо сделать акцент на этапе разработки визуального дизайна, чтобы направить пользователей к тем элементам, по которым им нужно кликнуть, чтобы решить свою задачу. Пользовательские сценарии универсальны — их масштаб можно как уменьшить до конкретной задачи, которую пользователь выполняет на одной странице сайта или приложения, так и увеличить, чтобы рассмотреть более широкий сценарий, охватывающий несколько страниц. Сценарии являются полезными инструментами и при создании совершенно нового сайта, и при редизайне уже существующего. При редизайне они помогают объективно оценить и выявить те места, в которых сами потоки и дизайн можно улучшить или упростить.

5.2.2. Пути пользователей Пользовательские пути визуально отличаются от пользовательских сценариев и дают более полное представление о процессе взаимодействия пользователя

Глава 5. Проектирование пользовательского опыта  137

с продуктом. Несмотря на то что пользовательские пути основаны на пользовательском сценарии, они предоставляют дополнительную информацию и еще несколько слоев для оценки, создавая повествование с точки зрения целевой пользовательской персоны. Пути помогают произвести эмоциональную оценку и понять, что могут чувствовать пользователи при взаимодействии с продуктом. Они также позволяют выработать предложения по улучшению пользовательского опыта с учетом этих ощущений. Дополнительные слои карты, касающиеся пользовательского пути, делают ее чрезвычайно ценной, поэтому стоит описать эти слои или этапы, которые вы можете добавить в свою карту.

Создание карты пути пользователя Первым делом нужно определить целевую пользовательскую персону, с чьей точки зрения мы будем рассматривать создаваемый путь. Сосредоточьтесь на одной персоне и типе пользователя, поскольку разные аудитории могут совершать различные действия и по-разному перемещаться по сайту. Далее определите сценарий пути пользователя. Кто этот человек, какую цель он преследует, какую задачу пытается решить? Каковы его ожидания? Постарайтесь ограничить масштаб задачи или цели и будьте максимально конкретны для получения наиболее полного понимания. Далее следует сопоставить этапы сценария с тем, что пользователь может думать, делать или чувствовать во время выполнения каждого из них. Эти этапы могут быть как положительными, так и отрицательными моментами и имеют ключевое значение для анализа пользовательского сценария и принятия решений на основе эмпатии в отношении пользователя для обеспечения наилучшего пользовательского опыта. Наконец, с учетом всех этих моментов следует определить то, что нуждается в улучшении. В готовом виде карта пути пользователя может выглядеть примерно так, как показано на рис. 5.7. Карты пути могут выходить за пределы цифрового пространства и распространяться на физическое. Такие физические пространства называются точками контакта (touchpoints), а путь пользователя может представлять собой сочетание того и другого видов пространства. Допустим, вы создаете сайт или приложение для клиента, работающего в сфере здравоохранения. Скорее всего, ваши пользователи будут входить в цифровое пространство (сайт) и в физическое пространство (медицинское учреждение). Цифровые и физические точки контакта связаны между собой, и там, где это применимо, следует учитывать и то и другое. Создание карты пути для этих сценариев крайне важно для выявления пробелов, с которыми может столкнуться пользователь и которые способны негативно сказаться на его физическом опыте, например, в медицинском учреждении. Это отличный способ определиться с тем, какую информацию следует предоставить на сайте, чтобы уменьшить негативные впечатления. Необходимо выявить те негативные моменты, которые мешают пользователю добраться до физического места и заставляют преждевременно завершить свой путь.

138  Часть II. Пользовательский опыт Сценарий

Цели и ожидания

Ингрид планирует поездку на поезде, и ей необходимо заказать билеты.

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

Ингрид Этап

Исследование

Заказ билетов

Точки контакта

Поиск Социальные сети

Мобильное приложение

Веб-сайт

Телефон

Рутинная задача, для решения которой существует множество вариантов. Задача не вызывает ни возбуждения, ни напряжения.

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

Действия и чувства

Веб-сайт

Прибытие на станцию

Посадка на поезд

Мобильное приложение

Мобильное приложение

Личное общение с экипажем

Личное общение с экипажем

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

Найдя члена экипажа, она предъявляет свой билет и садится в поезд вовремя.

Общее впечатление

Возможности

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

Рис. 5.7. Простая карта пути пользователя, отражающая сценарий заказа билета на поезд и взаимодействие с приложением. Карты пути пользователей могут создаваться с помощью таких инструментов, как Figma, Illustrator и даже Microsoft Word

Пользовательские пути — это ключевой инструмент, позволяющий разработчику поставить себя на место целевых пользователей и понять, что они чувствуют при взаимодействии с продуктом. Для выявления негативного и позитивного опыта очень важно учитывать эмоциональное или психическое состояние, в котором могут находиться пользователи при работе с сайтом. Для чего они его посетили? Какие чувства они могут испытывать? Используйте эти сценарии для выявления препятствий на пути пользователя, чтобы упростить процесс решения им целевой задачи.

Глава 5. Проектирование пользовательского опыта  139

Создание пути пользователя, испытывающего стресс Однажды на конференции An Event Apart я присутствовала на выступлении Эрика Мейера, известного своими знаниями в области HTML, CSS и вебстандартов. Оно изменило мое представление о создании пользовательского опыта. При разработке карты путей для конкретных сценариев и пользователей подумайте о создании карты для посетителя вашего сайта, находящегося в состоянии стресса. Например, если вы работаете над банковским приложением, то таким человеком может быть клиент, чьи учетные данные были украдены и который наблюдает за опустошением своего банковского счета в режиме реального времени. Другим примером может быть человек, которому необходимо срочно заказать билет на самолет по причине болезни или смерти близкого человека. А может быть так, что у человека украли телефон, на который не было установлено приложение для отслеживания, и теперь этому человеку необходимо сообщить о краже телефона и заблокировать его. Карта путешествия должна предусматривать то, что эти люди, скорее всего, чувствуют себя растерянными и плохо соображают. То есть она должна быть направлена на устранение препятствий на пути людей, которые не могут думать так же ясно, как те, кто не находятся в состоянии стресса. Однажды я работала над сайтом для клиента, основной целью которого было предоставление информации ветеранам вооруженных сил, которые рассматривали возможность после окончания службы построения карьеры в сфере технологий. Этот сайт должен был предоставлять информацию о возможных вариантах, и при составлении карты путей пользователей по основным разделам сайта я задала следующие вопросы, чтобы попытаться поставить себя на их место: Что эти люди могут почувствовать, впервые попав на этот сайт? Каково их психическое состояние? Я подошла к проектированию пользовательского опыта, стараясь представить себя на месте человека, испытывающего стресс и переживающего завершение важного периода своей жизни. Обдумывание следующего жизненного этапа иногда бывает пугающим и эмоционально напряженным опытом. Я постаралась сделать информационную архитектуру сайта максимально понятной и исключить все тупики. Допуская то, что человек может дойти до конца раздела, так и не найдя нужных сведений, я добавила ссылки на другие страницы с информацией, точки входа, призванные помочь ему сориентироваться. После запуска сайта аналитика показала, что посетители проводят на нем в среднем семь минут. В мире, где люди покидают сайты менее чем через минуту, а то и полминуты, если сразу не находят то, что им нужно, такая длительность казалась огромным успехом. Клиент был очень доволен, и я до сих пор считаю этот проект одним из самых успешных в своей карьере, а может быть, и самым

140  Часть II. Пользовательский опыт успешным из всех проектов, реализацией которых я когда-либо руководила. На мой взгляд, этот успех был достигнут благодаря тому, что я подходила к проектированию пользовательского опыта с точки зрения эмпатии в отношении человека, находящегося в состоянии стресса. Самым замечательным в таком подходе является то, что если человек, испытывающий стресс, может легко найти необходимую информацию и решить свою задачу, то человек, находящийся в спокойном состоянии, тоже без труда сможет это сделать. В итоге от такого подхода выигрывают все пользователи, а также сам продукт.

5.3. Разработка дизайна сайта и приложения После проведения исследований, создания информационной архитектуры и определения пользовательского сценария или пути можно приступать к разработке макета сайта или приложения с применением принципов построения визуального дизайна. Предыдущие этапы обеспечивают основу для проектирования сайта, но прежде чем приступить к выбору шрифтов и цветовой палитры, необходимо создать основу и структуру сайта с помощью вайрфреймов. При строительстве дома вы не можете наносить краску или вешать жалюзи до возведения стен и установки окон. Фаза проектирования разбивается на подфазы и начинается с создания вайр­ фреймов, после чего разрабатываются статический визуальный дизайн и дизайн взаимодействия. Этапы разработки статического визуального дизайна и дизайна взаимодействия не обязательно должны следовать по порядку. К проектированию взаимодействия можно приступить и после разработки вайрфреймов. А можно создать кликабельные прототипы вместе с вайрфреймами, чтобы получить одобрение клиента и убедиться в том, что взаимодействие и пользовательский сценарий соответствуют предложенному макету сайта и схеме организации контента. Или даже можно приступить к проектированию взаимодействия после разработки статического визуального дизайна, уже имея детально проработанные макеты сайта или приложения. Затем на основе этих макетов становится легче создавать высокодетализированные прототипы вместо вайрфреймов. Порядок выполнения этих этапов во многом зависит от предпочтений разработчика и ожиданий заказчика.

5.3.1. Создание вайрфреймов Вне зависимости от того, хотите ли вы начать с проектирования взаимодействия или статического дизайна, этому этапу должно предшествовать создание вайр­ фреймов. Вайрфреймы представляют собой исходный визуальный план сайта или приложения, который отражает информационную архитектуру продукта с помощью визуальных средств.

Глава 5. Проектирование пользовательского опыта  141

Как видно на рис. 5.8, вайрфреймы сами по себе лишены всякой эстетики, поэтому на этапе их создания основное внимание следует уделять не выбору шрифтов, цветов и графики, а установлению взаимосвязей между содержимым различных страниц и продумыванию их ожидаемой функциональности. Что такое Характеристики (название продукта)?

Логотип

Тематические исследования

Поиск плана

Контакты

(Ссылки на разделы: при щелчке по элементу навигации происходит прокрутка вниз до выбранного раздела)

Вступительное сообщение

Призыв к действию

Полноэкранный главный слайдер — видео или изображение с прокруткой до трех слайдов

(Значки социальных сетей)

(главный слайдер)

Что такое (название продукта)?

фон брендового цвета

Загрузка одного листа

Часто задаваемые вопросы

графика/значок

графика/значок

фон брендового цвета

Рис. 5.8. Верхняя часть вайрфрейма, определяющего структуру сайта. В данном примере основное внимание уделяется главному разделу домашней страницы и расположенному под ним контенту

Мне приходилось отвечать за все этапы разработки веб-сайта, и рискну заявить, что на этапе создания визуального дизайна мои вайрфреймы всегда ложились в основу окончательного макета. Создание вайрфреймов должно быть итеративным процессом, а поскольку на этом этапе обычно еще не задумываются о цвете или типографике, их пересмотр и изменение не требует больших затрат. Поэтому их легко представить пользователям и заинтересованным сторонам проекта для того, чтобы получить обратную связь и убедиться в том, что вы движетесь в правильном направлении с точки зрения визуальной составляющей. Получение такой обратной связи и внесение изменений до применения цвета и типографики позволяет снизить затраты на разработку дизайна. Создание

142  Часть II. Пользовательский опыт детально проработанных страниц и их последующий пересмотр и переделка требует слишком много времени. При реорганизации контента на полностью спроектированной странице пришлось бы учитывать гораздо больше факторов, связанных с дизайном. А при работе с вайрфреймами обычно имеют дело с моделью сайта, выполненной в оттенках серого. В зависимости от поставленных задач вы можете создавать вайрфреймы разной степени детализации — низкой, средней или высокой. Создание вайрфреймов средней и высокой степени детализации может занять много времени, как и этап проектирования визуального дизайна (на котором вы выбираете цвета и шрифты). Поэтому, прежде чем тратить время на создание высокодетализированных вайрфреймов, вы можете разработать вайрфреймы низкой степени детализации, чтобы получить добро от заинтересованных сторон и убедиться в том, что вы движетесь в правильном направлении.

Низкодетализированные вайрфреймы Низкодетализированные вайрфреймы представляют собой обобщенную версию макета страницы с минимально возможным количеством деталей. Как правило, они выглядят как набор фигур, указывающих места расположения картинок и текста на странице, а расстояние между элементами является очень приблизительным. Эти схемы можно создать в цифровом виде или нарисовать на бумаге от руки. Вайрфреймы такого типа требуют наименьших затрат на разработку и служат для демонстрации основной идеи, подчеркивая характер взаимодействия и функциональность страниц самым простым способом (рис. 5.9).

Рис. 5.9. Низкодетализированные

   вайрфреймы передают общую идею Низкодетализированные вайрфреймы — это отличный инструмент для работы с пользователями при проведении исследований. Особенно они уместны на начальных этапах реализации проекта, когда прежде, чем тратить время на создание макета, необходимо выяснить, что подходит пользователям. Укрупненные вайрфреймы могут быть очень полезны при работе с многочисленной командой. Они часто помогают убедиться, что все члены команды придерживаются одного

Глава 5. Проектирование пользовательского опыта  143

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

Вайрфреймы средней степени детализации Вайрфреймы средней степени детализации содержат больше деталей, чем низкодетализированные. Они создаются с помощью таких цифровых инструментов, как Figma, Balsamiq или Axure RP, которые обеспечивают большую точность в определении интервалов, расположения, размеров и дизайна компонентов, но не с точностью до пикселя. При создании таких схем некоторые базовые элементы дизайна могут «расползаться», например если применяются шрифты разного веса для обозначения иерархии контента. Разрабатывая вайрфреймы, вы можете использовать принцип контраста, даже если они выполнены в оттенках серого. Различные оттенки серого цвета также используются для привлечения внимания к компонентам, которые должны выделяться на фоне остального содержимого страницы. Вместо изображений в этих схемах по-прежнему используются элементы-плейсхолдеры, хотя для демонстрации основного содержимого изображения могут быть добавлены простые линейные рисунки, а при необходимости и иконки. Такие основные фрагменты страницы, как навигация, заголовки и призывы к действию, можно наполнить примерным фактическим содержимым, но для подзаголовков и абзацев можно использовать заполняющий текст Lorem Ipsum. Такой текст можно получить с помощью программы для разработки вайрфреймов или воспользоваться бесплатным генератором текста из интернета.

Высокодетализированные вайрфреймы Из всех типов вайфремов высокодетализированные проработаны наиболее точно, вплоть до пикселя. Они являются наиболее точным представлением того, что будет спроектировано и построено на следующих этапах реализации проекта. Они тоже создаются в оттенках серого, однако для привлечения внимания к некоторым компонентам, например кнопкам, позволительно использовать цвет. Лично я стараюсь обходиться без цветовых элементов при создании вайрфреймов. Часто заказчик или заинтересованные стороны уделяют слишком много внимания выбору цвета в своем обзоре, хотя на данном этапе еще не принимаются окончательные решения по поводу цвета. Таким образом, цвет может отвлекать от основной цели вайрфреймов — прояснить характеристики, функциональность и организацию контента.

144  Часть II. Пользовательский опыт При построении высокодетализированных вайрфреймов следует использовать как можно больше контента и ограничить количество заполняющего текста. Если у вас есть изображения, то вы можете включить в схему их версии в оттенках серого. На месте изображений также можно использовать плейсхолдеры в виде прямоугольников вместо двух перекрещивающихся диагоналей или замещающую изображение иконку. Создание высокодетализированных вайрфреймов требует наибольших трудозатрат, и к нему следует приступать после разработки вайрфреймов низкой или средней степени детализации. К предельной детализации следует приступать только после окончательного утверждения компоновки всех элементов.

Комбинирование подходов к разработке вайрфреймов При создании вайрфреймов вовсе не обязательно создавать все три уровня детализации для всех страниц сайта или приложения. Низкодетализированные вайрфреймы отлично подходят для быстрой итерации и определения направления разработки вайрфреймов средней степени детализации. Может быть достаточно разработать высокодетализированные вайрфреймы лишь для нескольких страниц и затем сразу перейти к этапу создания макетов, на котором вы начнете применять цвет и типографику. Может случиться, что для перехода к этапу разработки дизайна вам будет достаточно вайрфреймов средней степени детализации, и вы решите не тратить время на создание их высокодетализированных версий. В итоге все зависит о того, каким количеством времени и средств вы располагаете, а также от ожиданий вашего клиента.

5.3.2. Дизайн пользовательского интерфейса и цветные макеты Вне зависимости от того, проектируете ли вы пользовательский интерфейс на основе вайрфреймов средней или высокой степени детализации, при создании этих схем вы уже начали задумываться о некоторых элементах визуального дизайна, в частности о композиции, расположении и взаимосвязях между различными фрагментами контента (помните принцип близости?). Дизайн пользовательского интерфейса имеет отношение как к визуальным, так и к интерактивным элементам сайта. При его разработке учитывается, как они взаимодействуют между собой, помогая пользователям решать их задачи на сайте или в приложении. В следующих главах мы рассмотрим навыки работы с цветом, пространством и типографикой. Создание сетки, подбор шрифтов, выбор и применение цветовой палитры — все это относится к визуальному дизайну, но рассматривается на разных этапах процесса проектирования. Начинается на стадии разработки вайрфреймов и заканчивается созданием полноцветных макетов интерфейса, в которых основное внимание уделяется эстетике сайта или приложения.

Глава 5. Проектирование пользовательского опыта  145

К моменту окончания работы над вайрфреймами вы должны определиться с общей структурой макета и сетки, а также с организацией контента. На следующем этапе вам необходимо преобразовать вайрфреймы в полноцветные макеты. При этом основное внимание должно быть сосредоточено на эстетике сайта, которая имеет такую же важность, как его информационная архитектура и структура. Прежде чем начать читать или изучать содержимое сайта, посетители оценивают его визуальный дизайн. Они обращают внимание на выбор цветов, использование пространства и легкость считывания шрифтов. На основе этого первого впечатления они решают, стоит ли продолжать взаимодействие с вашим сайтом. Принятые вами решения вызывают у пользователей эмоциональную реакцию, поэтому при разработке визуального дизайна следует делать выбор стратегически и осознанно. Решения, касающиеся всего, начиная с цветов и заканчивая шрифтами, передают образ бренда и определяют первое впечатление, которое возникает у человека еще до того, как он начинает изучать содержимое сайта. Макеты в цвете должны разрабатываться после создания вайрфреймов и утверждения концепции. На разработку вайрфреймов уходит наибольшее количество времени. Хотя этап создания вайрфреймов не очень подходит для экспериментов с организацией контента, он предоставляет возможность для исследования множества вариантов в плане внешнего вида и функциональности сайта или приложения. Уточните у клиента, сколько вариантов он хотел бы увидеть, и выберите одну или две страницы сайта для дальнейшей итерации. Некоторые из моих клиентов хотели видеть как можно больше вариантов в плане обработки изображений, цветов и типографики, и однажды мне пришлось продемонстрировать целых пятнадцать. Подобные запросы встречаются нечасто, но такое бывает. Другие заказчики могут пожелать увидеть всего три варианта. Обычно эти варианты позволяют клиенту выбрать основное направление, чтобы вы могли приступить к разработке остальных страниц. В зависимости от количества страниц на сайте вам может быть достаточно создать лишь несколько таких макетов, особенно если страницы имеют общий дизайн. Например, если несколько целевых страниц сайта организованы одинаковым образом, нет необходимости создавать макет для каждой из них, если клиент об этом не просит. Следует сосредоточиться на уникальных страницах и оптимизировать временные затраты, создавая один макет для группы страниц, обладающих общим дизайном. Разработка макетов в цвете является завершающим этапом перед началом создания функционирующего продукта, будь то прототип для тестирования пользователями или окончательный вариант веб-сайта. Подобные макеты демонстрируют внешний вид и функциональность сайта в статичном, то есть не интерактивном виде, хотя их можно сделать и интерактивными. На этом этапе важно получить одобрение заказчика или заинтересованных сторон, чтобы избежать радикального пересмотра дизайна на стадии разработки кода, такой пересмотр может очень дорого обойтись.

146  Часть II. Пользовательский опыт

5.3.3. Прототипирование Тестирование концепций, представленных в виде вайрфреймов или интерактивных версий, созданных на основе детализированных макетов пользовательского интерфейса, является неотъемлемой частью итеративного процесса работы с пользователями. Еще до начала разработки вам следует убедиться в том, что вы создаете нужный им сайт или приложение. Пользовательское тестирование концепций на ранних этапах работы позволяет избежать переписывания всего кода в связи с серьезным редизайном. Необходимость редизайна на основе результатов исследований и отзывов пользователей, полученных на более поздних этапах, как уже неоднократно здесь упоминалось, может дорого обойтись. Прототипирование позволяет проверить ваши проекты на предмет удобства использования. Как и в случае с вайрфреймами, вы можете создать прототипы разной степени детализации, исходя из целей проекта. Вне зависимости от того, работаете ли вы с высоко- или низкодетализированным прототипом, основная цель — выяснить, как пользователи будут взаимодействовать с вашим проектом, и получить обратную связь касательно удобства его использования. При этом каждая степень детализации имеет свое применение.

Низкодетализированные прототипы Низкодетализированные прототипы можно создать на ранних этапах реализации проекта с помощью ручки и бумаги или с использованием разработанных ранее низкодетализированных вайрфреймов. Такие прототипы могут просматриваться пользователем в ходе интервью. Следует учитывать, что их интерактивность будет ограничена, то есть человек не сможет щелкать по компонентам, особенно в случае с верхнеуровневым прототипом. Такие прототипы очень полезны на ранних этапах работы, поскольку они позволяют мгновенно отреагировать на полученную от пользователя обратную связь и предложить ему новые варианты. Создание низкодетализированных прототипов не требует больших денежных и временных затрат, что позволяет быстро представить их на суд пользователей. Такие прототипы помогают удостовериться в том, что пользовательский опыт является именно таким, каким он должен быть. Их можно применять для выполнения быстрых итераций на том этапе, когда вы еще только пытаетесь прояснить концепцию или функциональность ваших страниц.

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

Глава 5. Проектирование пользовательского опыта  147

Для тестирования конкретного сценария с одним путем, по которому будет двигаться пользователь, вы можете использовать программу PowerPoint и на каждом слайде изобразить отдельный экран, представляющий один шаг. В ходе тестирования любого прототипа необходимо задавать пользователям вопросы; однако если вы идете по пути имитации интерактивности с помощью слайд-шоу, следует также выяснить у пользователя, соответствуют ли шаги в сценарии тому, что он ожидает. Программа PowerPoint также используется и для создания низкодетализированных вайрфреймов. Создание высокодетализированных прототипов, особенно полностью кликабельных, может занять очень много времени, хотя некоторые приложения для создания вайрфреймов, например Axure, позволяют легко создавать кликабельные прототипы. Прототипы высокой степени детализации служат для выявления всех проблем, связанных с удобством использования страниц, если эти проблемы не были решены на ранних стадиях проектирования. И выявить их нужно прежде, чем переходить к этапу разработки.

Прототипирование как итеративный процесс исследования В предыдущей главе я говорила о том, что исследование — это итеративный процесс, который должен осуществляться постоянно на протяжении всего периода работы над проектом вплоть до достижения стадии разработки, поскольку внесение серьезных изменений в дизайн на этом этапе может оказаться дорогостоящим. Прототипирование — еще один инструмент, позволяющий сократить количество таких изменений. Если вы вообще не делаете прототипов, а сразу переходите к разработке, создаете сайт или приложение и запускаете его, то фактически все равно тестируете прототип. Разница лишь в том, что в роли прототипа выступит работающий продукт. Если пользователи столкнутся с проблемами в юзабилити, это может отрицательно сказаться на сайте в долгосрочной перспективе, поскольку возникнет риск того, что посетители не захотят вернуться на него или не сумеют выполнить поставленные задачи. Отсюда прямая дорога к снижению доходов, если сайт или приложение что-то продают. Для удержания пользователей, приходящих на ваш сайт, проводите тестирование часто и еще до запуска, чтобы убедиться в том, что ваш продукт обеспечивает наилучший пользовательский опыт. В главе 11 мы рассмотрим дополнительные способы тестирования, которые используются после этапа прототипирования и позволяют улучшить работу уже запущенного сайта или приложения. А в следующей главе поговорим о распространенных шаблонах макетов, применении сетки и доработке структуры вплоть до пикселя.

Резюме На этапе проектирования пользовательского опыта закладывается основа для сайта. Здесь основное внимание уделяется организации контента путем созда-

148  Часть II. Пользовательский опыт ния карты сайта, определению способов перемещения пользователей из точки А в точку Б, а также созданию общего макета сайта с помощью вайрфреймов. Информационная архитектура лежит в основе структуры и организации сайта и определяет контент-стратегию. Она должна быть разработана до создания вайрфреймов или визуального дизайна. Хорошая информационная архитектура определяет навигацию по сайту, но не обязательно отражает должное обозначение ее элементов. При выборе подходящих обозначений для страниц и контента следует опираться на результаты пользовательских исследований. Пользовательские сценарии представляют собой блок-схемы, демонстрирующие то, как пользователь выполняет ту или иную задачу на сайте или в приложении. Они позволяют выявить точки, в которых пользовательский опыт может быть оптимизирован. Пользовательские пути привносят эмоциональный элемент и фокусируются на одной целевой пользовательской персоне. Разработка пользовательских путей позволяет попрактиковаться в эмпатии, то есть поставить себя на место пользователя и выявить негативные и позитивные моменты в его взаимодействии с продуктом. Эти моменты должны предоставить возможности для улучшения пользовательского опыта посетителя сайта. Создание вайрфреймов — это первый шаг на пути преобразования результатов пользовательского исследования и информационной архитектуры в визуальное представление взаимодействия пользователя с сайтом. Вайр­ фреймы представляют собой визуальный план сайта, ориентированный на организацию и компоновку фрагментов контента. Дизайн пользовательского интерфейса объединяет интерактивные элементы сайта и его общую эстетику с помощью принципов визуального дизайна. Пользовательский интерфейс определяет первое впечатление, которое складывается у пользователя при попадании на сайт, и зачастую именно от него зависит, останется ли посетитель на сайте, чтобы продолжить изучать содержимое, или покинет его. Прототипирование имеет огромное значение для выяснения ожиданий пользователей в отношении удобства работы на ранних этапах разработки дизайна, а также для выявления проблем с юзабилити на этой стадии. Прототипирование — часть цикла тестирования и итерирования, которая выполняется перед этапом разработки с целью выявить существенные проблемы, поскольку внесение изменений на более поздних этапах может потребовать больших временных и денежных затрат.

Часть III Элементы визуального дизайна В третьей части рассматриваются основы языка визуального дизайна, то есть элементы, которые оживляют сайт! Мы обсудим основы верстки, распространенные шаблоны компоновки, а также способы их улучшения с помощью анимации. Затем поговорим о типографике и цвете, после чего вам предстоит применить знания, полученные из этой части книги, на практике. В главе 6 мы более подробно поговорим об определении структуры сайта и способах расположения контента. Прежде чем экспериментировать с компоновкой, можно воспользоваться распространенными шаблонами. В этой главе мы также поговорим об отзывчивом дизайне и различных форм-факторах, о которых следует подумать при адаптации макета под данный тип дизайна. В главе 7 мы немного развлечемся, обратившись к анимации для улучшения макета и дизайна в целом. Анимация может использоваться разными способами, чтобы сделать пользовательский опыт незабываемым или выполнить функциональную задачу. Мы рассмотрим некоторые возможные сценарии, способы планирования анимации и технические аспекты создания дизайна, насыщенного анимацией. В главе 8 представлен общий обзор темы типографики в веб-контексте. Типографика является ключевым визуальным элементом, поскольку выбранный шрифт может изменить общий тон дизайна. Мы поговорим о том, как сочетать шрифты, создавать наборы их параметров и вертикальный ритм, чтобы тем самым моментально сделать дизайн веб-страницы более гармоничным.

150  Часть III. Элементы визуального дизайна Глава 9 посвящена наиболее распространенной дизайнерской задаче, с которой сталкиваются разработчики, а именно использованию цвета. В этой главе мы рассмотрим взаимодействия цветов, их значение, терминологию, а также пошаговый процесс выбора и применения цветовой палитры. В главе 10 подытожим все, что было сказано о визуальном дизайне в главах 5–9, и разберем процесс создания веб-сайта на основе требований клиента. Мы будем последовательно применять элементы дизайна, рассмотренные в книге, пока не получим полностью готовую веб-страницу. В процессе изучения этой части вы овладеете инструментами, позволяющими применить принципы из главы 2 и элементы из глав с 5 по 9, для того чтобы сделать свой сайт более отшлифованным и структурированным.

6

Создание макета и композиция

В этой главе 33 Основы верстки для создания структуры сайта. 33 Создание и использование сеток для обеспечения последовательности и предсказуемости. 33 Применение принципов визуального дизайна при компоновке разделов и размещение компонентов для создания иерархии и ритма. 33 Пользовательские паттерны чтения, способные повлиять на макет страницы.

До середины 2010-х годов разработчикам был доступен весьма ограниченный спектр веб-технологий, позволяющих легко создавать уникальные и интересные макеты с использованием одних лишь языков HTML и CSS. Еще в начале 2000-х годов в веб-разработке, предполагающей создание структуры сайта, применялись специальные утилитарные CSS-классы для внесения в макет таких исправлений, как удаление плавающих элементов и их вертикальное выравнивание. Язык CSS хорошо подходил для создания макетов сайтов до тех пор, пока устройства не стали портативными; когда люди начали просматривать

152  Часть III. Элементы визуального дизайна веб-страницы с помощью телефонов, экраны стали более компактными, а их размеры — непропорциональными. С появлением отзывчивого веб-дизайна и смартфонов создание «резиновых» макетов, способных подстраиваться как под экран настольного компьютера, так и под экран телефона, стало важнейшей частью стратегии разработки сайта. Разработчики хотели предоставить пользователям единый опыт на обоих видах устройств. На этом этапе развития Всемирной паутины появились такие библиотеки, как Bootstrap. Они значительно упростили создание отзывчивых веб-сайтов, особенно с тех пор, как быстрая итерация и развертывание стали частью жизненного цикла проекта. Недостатком использования таких библиотек, особенно для верстки, является то, что многие сайты, разработанные с их помощью, выглядят одинаково: крупное главное изображение, обычно занимающее всю верхнюю часть макета и рассказывающее о теме сайта, а под ним — полоса, разбитая на три колонки, как на рис. 6.1. Каждая колонка содержит подзаголовок, текстовый фрагмент, а иногда и призыв к действию.

Рис. 6.1. Часто используемый макет веб-сайта, включающий крупное главное изображение, под которым    расположены три колонки

Многократное использование одной и той же компоновки сделало дизайн сайтов однотипным. Преимущество применения такого фреймворка, как Bootstrap, заключается в возможности быстро приступить к работе. А недостатком является получение многочисленных сайтов с одинаковым дизайном, обусловленным популярностью и простотой использования этого инструмента. Но такое сходство сайтов может негативно сказываться на брендах. Дополнительные знания основных принципов дизайна позволяют сделать сайт особенным даже при применении стандартной библиотеки и таким образом быстро получить удобный и красиво оформленный продукт. При отсутствии знаний в области дизайна вы, скорее всего, будете искать вдохновение на других сайтах и копировать чужие

Глава 6. Создание макета и композиция  153

приемы, чтобы создать затем нечто похожее. Однако не будем забывать, что на самом деле ваша главная цель — сделать уникальный запоминающийся сайт, который стимулировал бы пользователей возвращаться. Другим недостатком применения фреймворка является то, что вы вынуждены использовать чужой код и пытаться вписать свой дизайн в его рамки. Возможно, для получения желаемого результата вам придется сильно модифицировать этот код. Преимущества и недостатки этого подхода перечислены в табл. 6.1. Таблица 6.1. Преимущества и недостатки использования фреймворка Преимущества

Недостатки

Готовый код позволяет быстро приступить к работе

Дизайн ограничен рамками фреймворка, небольшой выбор компоновок

Для создания профессионально выглядящего сайта не требуются особые знания в области дизайна

При внесении существенных изменений в дизайн сайта с помощью фреймворка используется чужой код, который может быть сложнее поддерживать по сравнению с кодом, написанным с нуля

Имеется простая в использовании готовая библиотека кода

В зависимости от фреймворка в комплекте с ним может поставляться большой объем ненужного в текущем проекте дополнительного кода и компонентов, что приведет к увеличению размера файлов

Однако сегодня уже не обязательно использовать фреймворки для построения компоновки. Благодаря стандартизации Flexbox и CSS Grid можно создавать красивые отзывчивые макеты, подобные тем, что дает библиотека Bootstrap, но при этом иметь гораздо больший контроль над элементами макетов. Например, можно задать четырехколоночный макет с помощью CSS Grid и сделать так, чтобы наш заголовок занимал все четыре колонки. Используя несколько строк кода в CSS Grid, мы можем получить второй ряд содержимого, занимающий те же четыре колонки, что и заголовок, например две группы, занимающие по две колонки, или четыре группы, каждая из которых занимает одну колонку. С точки зрения компоновки CSS Grid позволяет использовать меньше кода для получения желаемого результата без применения фреймворка типа plug-and-play («подключи и пользуйся»). С помощью CSS Grid можно создавать дизайн, плавно адаптирующийся к любому экрану, при этом не понадобится писать большой объем собственного кода или перерабатывать чужой. Даже если вы используете фреймворк для создания сайта, важно помнить, что дизайн сайта не ограничивается его основной структурой. Основная структура призвана организовать и сгруппировать содержимое. Необходимо добиться, чтобы структура была надежной, и для этого можно обратиться к фреймворкам вроде Bootstrap, и это, как уже было сказано выше, довольно легко сделать.

154  Часть III. Элементы визуального дизайна А будет ли полученный дизайн выделяться на фоне остальных, зависит от того, как в нем использовать типографику, цвет, пространство и анимацию. Безусловно, надо начинать с построения надежной структуры, прежде чем красить стены и вешать портьеры, однако думать о цвете краски и типах портьер надлежит уже в процессе ее создания.

6.1. Создание структуры сайта К моменту перехода на этап разработки дизайна и планирования структуры сайта для создания вайрфреймов уже необходимо иметь представление о целях и задачах сайта, а также о типах контента каждой страницы, с которым надо определиться еще на этапе разработки карты сайта. А затем, конечно, нужно воплотить все это в жизнь с помощью визуальных средств, поэтому пришло время договориться, что размещать на странице. Прежде всего необходимо определиться с основными разделами сайта, то есть с тем, как делить страницу на части. Если представить себе готовый сайт в виде блюда, например пасты карбонара, то перед его приготовлением необходимо знать, что собой представляет каждый из ингредиентов. Кроме того, чтобы получить нужное блюдо, надо соблюдать определенный порядок при добавлении этих ингредиентов. Разделы сайта — это ингредиенты, и надо точно знать, что они собой представляют, прежде чем собирать их воедино. Как правило, веб-сайты предусматривают три раздела: заголовок, основное содержимое и футер. Заголовок содержит навигационное меню и логотип или название сайта; он может содержать и другие элементы, например строку поиска или ссылки на социальные сети. Заголовок сообщает о том, где именно во Всемирной паутине пользователь находится. Основной контент занимает самую большую часть страницы и должен нести ценность для пользователя, предоставляя ему то, что он ищет. Футер страницы содержит сведения об авторских правах и контактную информацию; он также может включать обобщенную карту сайта или другую потенциально актуальную информацию, например политику конфиденциальности и условия использования. Необходимость в футере зависит от типа страницы. Например, на сайте Twitter не имеется этого элемента. В зависимости от требований к сайту или странице боковая панель может использоваться в качестве еще одного раздела контента. Если разрабатываемый сайт предназначен для ведения блога или ежедневной публикации новостей, то, возможно, имеет смысл поместить боковую панель на главной странице. Боковая панель содержит вторичный контент, то есть менее важную информацию, не отображаемую в разделе с основным содержимым. Она также может использоваться в качестве вторичной навигации. Например, на сайтах с большим количеством страниц и подстраниц, уходящих на несколько уровней вглубь, целесообразно размещать ссылки на все эти страницы в боковой панели, а не в основном

Глава 6. Создание макета и композиция  155

навигационном меню. После того как пользователь перейдет в определенный раздел сайта, ссылки на дополнительные подстраницы могут быть отображены в боковой панели, что позволит сохранить основную навигацию сайта неперегруженной и упростить ее восприятие. После того как вы определились с основными разделами, необходимо решить, что в них будет содержаться. Это решение опять же зависит от целей сайта, но вы можете разбить основной раздел на подразделы с учетом их содержимого, например, следующим образом: изображение продукта в верхней части страницы с призывом к действию; описание продукта; основные сведения о продукте и ссылки на страницы с информацией о нем; отзывы; информация о возврате и обмене продукта. Имея эту информацию, можно приступить к обдумыванию способа ее расположения и принятию первоначальных решений, касающихся дизайна веб-страницы.

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

6.2.1. Определение сетки Сетка состоит из столбцов, строк и промежутков между ними. При использовании сетки основное внимание следует уделять столбцам для контента и тому, как элементы располагаются по вертикали, поскольку такое выравнивание создает невидимую четкую границу, которая придает странице организованный вид (рис. 6.2). Что касается четкого горизонтального края, то его не всегда удается добиться. На этот аспект влияет содержимое и объем текста. Например, на странице могут быть две колонки, расположенные рядом друг с другом: одна с изображением, а другая с текстом. Текст не обязательно будет заканчиваться вровень с нижней частью изображения, и вы, скорее всего, решите центрировать его по вертикали, как показано на рис. 6.3. Такое расположение контента обеспечит баланс в строке сетки без четких образуемых колонками линий, что в целом будет производить впечатление организованности.

156  Часть III. Элементы визуального дизайна

Рис. 6.2. Слева от логотипа образуется невидимая линия, идущая вниз вплоть до подзаголовка

Рис. 6.3. Выравнивание текста по центру обеспечивает баланс и организацию в тех случаях, когда заголовок и изображение не расположены друг над другом

Глава 6. Создание макета и композиция  157

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

6.2.2. Размеры сетки Чем больше колонок содержит сетка, тем более гибкой она является. Если сетка имеет только две колонки, то контент можно разместить только в две линии. При создании сетки надо помнить, что ширина колонок не должна определяться желаемым количеством в макете столбцов с содержимым, об этом мы поговорим в следующем разделе. Можно расположить содержимое в трех колонках сетки для получения одного столбца. На рис. 6.4 показан пример того, как из нескольких колонок сетки можно получить более крупные столбцы с контентом.

Рис. 6.4. Ширина каждого компонента задается четырьмя колонками сетки, что обеспечивает большую гибкость при разработке дизайна

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

158  Часть III. Элементы визуального дизайна сторон. Ни один фрагмент содержимого не будет выходить за пределы контейнера (рис. 6.5), что создаст невидимую линию вдоль левого края страницы сайта после размещения контента.

Рис. 6.5. Никакая часть содержимого не выходит за пределы, определяемые максимальной шириной контейнера и сетки

Чаще всего ширина экранов настольных компьютеров составляет 960 или 1200 пикселей. В интернете существует множество инструментов для быстрого построения сетки, которые я перечислила в приложении. Шаблоны помогают сгенерировать колонки для сетки и предоставляют размеры, необходимые для создания высокодетализированных вайрфреймов или макетов сайта. Количество и ширину колонок вы можете выбрать самостоятельно, однако чаще всего их количество составляет 12 для настольных компьютеров, 8 для планшетов и 4 для мобильных телефонов. Также необходимо задать отступ между колонками. На рис. 6.6 показан пример сетки с максимальной шириной 1200 пикселей и 8 колонками. На этапе создания дизайна редко приходится определять строки сетки. При использовании CSS Grid для построения макета длины строк сетки обычно определяются длиной содержимого. Если же макет точно соответствует CSS-сетке, как, например, макет в стиле кирпичной кладки (masonry layout), который мы рассмотрим чуть позже, то, возможно, стоит подойти к определению строк более строго. После определения сетки, то есть создания базовой организационной системы сайта, можно подумать о способах компоновки его содержимого.

Глава 6. Создание макета и композиция  159

Рис. 6.6. Максимальная ширина этой сетки составляет 1200 пикселей, ширина отступов слева и справа равна 22 пикселям; колонки имеют ширину 127 пикселей, а промежутки между колонками — 20 пикселей

6.3. Выбор макета Разные страницы сайта или приложения будут иметь уникальные цели, а значит, и уникальное содержимое. Элементы структуры макета должны быть одинаковыми для всего сайта, в частности хедер и футер, но структура и дизайн раздела с основным содержимым на главной странице и на подстраницах, скорее всего, будут разными. Выбор структуры макета зависит от целей страницы и от того, что именно на странице с наибольшей вероятностью обеспечит вовлеченность пользователей. Необходимо задержать их на странице, и, объединив принципы дизайна со знаниями о том, как люди обычно воспринимают контент сайтов, вы сумеете направить внимание пользователя так, как вам нужно. Для начала определимся со структурой контента и различными вариантами макетов. После составления списка содержимого необходимо решить, какой макет сайта будет построен на основе сетки. Как минимум необходимо определиться с количеством колонок в макете. Макет большинства веб-сайтов содержит от одной до трех колонок в версии для настольных компьютеров и сокращается до одной колонки на мобильных устройствах.

160  Часть III. Элементы визуального дизайна

6.3.1. Использование одноколоночных шаблонов Одноколоночные шаблоны чаще всего используются при создании сайтов, страницы которых содержат большое количество текстового контента и просматриваются с настольных компьютеров, например, для статей в блогах. Одноколоночный шаблон довольно легко определить. После создания структуры сетки необходимо выбрать количество колонок, которое будет составлять максимальную ширину содержимого. Рассмотрим наглядный пример, представленный на рис. 6.7. На рис. 6.7 показана сетка из 12 колонок шириной 1200 пикселей. Ширина каждой колонки равна 81 пикселю; ширина отступа между колонками, называемого желобом (gutter), составляет 20 пикселей, а ширина полей слева и справа — 0 пикселей. Вполне резонно использовать четное количество колонок для размещения содержимого, чтобы сделать одинаковым размер пространства справа и слева от него.

Рис. 6.7. Одноколоночный шаблон для сетки шириной 1200 пикселей, состоящей из 12 колонок

Глава 6. Создание макета и композиция  161

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

Рис. 6.8. 12 колонок сетки позволяют гибко варьировать размер основного столбца с содержимым. Изображение может занимать больше колонок, чем текст, разрывая тем самым поток страницы

6.3.2. Распространенные многоколоночные шаблоны В прошлом, до появления более совершенных возможностей верстки с помощью CSS Grid и Flexbox, создание адаптивных многоколоночных макетов было сопряжено с большими сложностями, и разработать макет, содержащий разное количество колонок в каждой из строк, было нелегко. Приходилось использовать плавающие элементы CSS и очищать поток, чтобы расположить содержимое на странице нужным образом. А когда мы уменьшили размер области просмотра

162  Часть III. Элементы визуального дизайна этих макетов на экранах портативных устройств, потребовалось еще больше кода, чтобы заставить их адаптироваться к маленькому экрану. Когда я только начала писать код, даже попытка заставить простейший шаблон, вроде представленного на рис. 6.9, изменять размер и правильно отображаться на небольших экранах, вызывала у меня головную боль.

Заголовок Боковая панель

Основной контент

Футер

Рис. 6.9. Распространенный шаблон веб-страницы с заголовком, боковой панелью, разделом для основного контента и футером

Создание адаптивных сайтов на заре появления смартфонов с браузером тоже было проблематичным. Оно было возможно, но не так удобно, как сегодня, когда в нашем распоряжении есть CSS Grid и Flexbox. Когда я работала в агентстве, где мне приходилось торопиться с реализацией проектов, эта проблематичность влияла на сам способ разработки дизайна. Используя плавающие элементы CSS, я не столь смело, как сегодня, подходила к выбору количества колонок для

Глава 6. Создание макета и композиция  163

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

Выбор многоколоночного макета для главной страницы Использование разного количества колонок для каждого из разделов контента на основной странице имеет место гораздо чаще, чем на подстраницах. Каждый раздел контента на основной странице должен представлять собой фрагмент, дающий представление о содержимом подстраниц. Использование разного количества колонок для каждого раздела также является естественным способом разграничения этих разделов сайта друг от друга и установления взаимосвязи между фрагментами содержимого. На рис. 6.10 показаны две колонки с контентом,

Рис. 6.10. Варьирование ширины фрагментов контента в разных строках помогает разделить содержимое и установить естественные взаимосвязи на основе сходства, в данном случае — ширины фрагментов

164  Часть III. Элементы визуального дизайна находящиеся поверх трех колонок. Несмотря на отсутствие какого-либо оформления, обеспечивающего их разделение, четко видно, что они разделены, поскольку каждый ряд отличается от другого. Возьмем из подраздела 6.1.1 список фрагментов контента, предназначенных для главной страницы сайта, который посвящен некой линейке продуктов. Логотип

Элемент меню

Элемент меню Элемент меню

Название продукта / заголовок

Призыв к действию

Заголовок

Рис. 6.11. Один из вариантов дизайна основной страницы, использующий распространенную схему с изображением, призывом к действию и описанием, за которым следует раздел с основными сведениями

Глава 6. Создание макета и композиция  165

Рассмотрим различные конфигурации колонок, которые могли бы использоваться в макете страницы, проанализируем их в формате вайрфрейма (рис. 6.11 и 6.12). Логотип

Элемент меню

Элемент меню Элемент меню

Название продукта / заголовок

Призыв к действию

Заголовок

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

166  Часть III. Элементы визуального дизайна Выбор многоколоночного макета для подстраниц Подстраницы сайта содержат более подробный контент по сравнению с основной страницей. При разработке макета для подстраниц, особенно с большим объемом контента, следует тщательно продумать количество колонок. Например, на странице документации основной раздел, скорее всего, будет содержать много текста и лишь несколько изображений. Чтобы сделать страницу более интересной в визуальном плане, можно выйти за пределы контейнера с основным текстом, используя для этого такие элементы, как изображения и выбранные из текста цитаты. Однако, когда речь идет об основном тексте, старайтесь придерживаться одного и того же количества колонок для обеспечения согласованности на всей странице. Рассмотрим пару примеров, представленных на рис. 6.13 и 6.14. Они демонстрируют эффективные способы варьирования количества колонок в макетах подстраниц. В зависимости от назначения подстраниц можно определить для них несколько различных типов макетов, однако для каждой из этих подстраниц следует использовать одну и ту же базовую структуру и шаблон. Например, если есть страницы товаров, то все они должны иметь одинаковый макет и дизайн. Если же вы по какой-то причине собираетесь отойти от этого макета, убедитесь в том, что он является достаточно уникальным, чтобы не сбить с толку посетителей, столкнувшихся с изменением пользовательского опыта при переходе с одной страницы на другую. Заголовок и футер должны иметь единый вид на всем сайте, выступая в роли якоря и обеспечивая определенную последовательность в дизайне каждой страницы, даже если основной контент главной страницы скомпонован не так, как контент подстраниц. Вне зависимости от способа компоновки основного контента разных страниц, заголовок и футер должны выглядеть одинаково. Далее мы рассмотрим несколько распространенных шаблонов многоколоночных макетов на основе сетки, которые могут использоваться для компоновки разделов сайта или для основного макета страницы.

Модульная сетка и макет в стиле каменной кладки Модульная сетка и макет в стиле кирпичной кладки похожи в плане концепции, но ведут себя по-разному. Если вы посещали сайт Pinterest, то видели макет в стиле кирпичной кладки в действии. Данный макет состоит из нескольких колонок и строк нефиксированной высоты. В отличие от модульной сетки, предусматривающей фиксированную высоту строк, в этом макете вертикальное пространство между блоками содержимого заполняется полностью вне зависимости от их высоты (рис. 6.15).

Глава 6. Создание макета и композиция  167

Рис. 6.13. В макете сайта Национального музея мексиканского искусства используются ряды из трех, двух и четырех колонок. (Источник изображения: Национальный музей мексиканского искусства; https://nationalmuseumofmexicanart.org/)

168  Часть III. Элементы визуального дизайна

Рис. 6.14. Данный макет состоит из трех рядов с разным количеством колонок: верхний ряд включает четыре колонки, асимметричный средний — две, а нижний — три

Макет такого типа является более наглядным по сравнению с обычным списком, его можно использовать для отображения такого контента, как изображения или карточки (например, для списка записей в блоге). Если посмотреть на реальный пример, скажем, Pinterest, который является, пожалуй, самым известным сайтом с подобным макетом, то легко заметить, как могут сочетаться фрагменты контента разного размера. Из-за различной длины заголовков постов карточки могут стать несколько отличающимися по размеру, что сделает страницу более интересной в визуальном плане по сравнению со списком элементов контента с одинаковым оформлением, просто уложенных друг на друга.

Глава 6. Создание макета и композиция  169

Рис. 6.15. Макет в стиле кирпичной кладки не предусматривает пустого пространства между фрагментами контента, даже если они имеют разную высоту

Выбор типа макета для каждой страницы является первым шагом при определении структуры сайта и способа компоновки его содержимого. Еще одним фактором, способным повлиять на выбор макета страницы, являются паттерны чтения.

6.3.3. Паттерны чтения Паттерны чтения выявляются исследователями с помощью методов отслеживания движений глаз для определения того, как пользователи читают или сканируют страницу. Некоторые из наиболее хорошо документированных исследований паттернов чтения были проведены компанией Nielsen Norman Group (NNG) и описаны на ее сайте. Хотя сами по себе паттерны чтения не лежат в основе способов компоновки страницы, они могут помочь принимать дизайнерские решения с учетом того, как пользователи обычно сканируют страницу. Благодаря этой информации можно более эффективно сгруппировать контент и определить, как именно его разместить с максимальной пользой для посетителей.

170  Часть III. Элементы визуального дизайна Следует отметить, что два паттерна, описанные в следующих разделах, основаны на особенностях людей, читающих слева направо. В культурах, в которых принято читать справа налево или сверху вниз, способы сканирования контента будут иными. Если разрабатываемый сайт планируется переводить на один из соответствующих языков, важно учесть эту разницу в процессе верстки. На самых ранних этапах реализации проекта следует определиться с тем, придется ли приспосабливать макет к языкам, читаемым как слева направо, так и справа налево и сверху вниз. Этот вопрос не стоит рассматривать после начала проектирования или на этапе разработки, поскольку может возникнуть задержка и потребоваться пересмотр задач и попытки вписать требования задним числом в макет вместо того, чтобы изначально разрабатывать его с учетом этих требований. Существует несколько паттернов чтения, но мы рассмотрим два наиболее распространенных — Z-образный и F-образный. Ссылки на более подробную информацию по этому вопросу имеются в приложении.

Z-образный паттерн Z-образный паттерн описывает то, как пользователь сканирует страницу с минимальным объемом текста. Траектория, по которой перемещается взгляд пользователя между ключевыми элементами, имеет Z-образную форму, как показано на рис. 6.16.

Рис. 6.16. Z-образный паттерн описывает то, как пользователь обычно сканирует страницу: слева направо, затем влево и вниз и снова    направо

Этот паттерн очень четко направляет внимание пользователя по странице и учитывается при разработке макетов многих современных сайтов (рис. 6.17).

Глава 6. Создание макета и композиция  171

Применяя принципы дизайна к компонентам и контенту, можно создать сценарий, подталкивающий пользователя к прочтению всей страницы, не зацикливаясь на какой-то одной ее точке.

Рис. 6.17. Заголовок в верхней части — это первый фрагмент контента, который воспринимает пользователь. Потом его внимание привлекает заголовок Work, а затем изображение

Итак, паттерн выступает в качестве схемы, которая может оказаться очень полезной при определении иерархии на странице сайта. Учитывая это, спросите себя: «Какое содержимое является наиболее важным?» и «Какова основная цель страницы?» Наложите фигуру в форме буквы Z поверх вашего вайрфрейма или макета и расположите вдоль нее наиболее важный контент. Этот паттерн чтения обычно используется для организации главных или целевых страниц, то есть тех страниц, которые не содержат большого количества текста. Такую схему расположения данных можно использовать многократно на одной странице (рис. 6.18). Кроме того, она может служить в качестве руководства, если вы только начинаете осваивать верстку и хотите научиться эффективно размещать компоненты и контент на главной странице и подстраницах, не содержащих большого объема контента.

172  Часть III. Элементы визуального дизайна

Рис. 6.18. Сайт CSS Tricks — еще один хороший пример использования Z-образного паттерна. Он скомпонован таким образом, что взгляд пользователя перемещается по каждой строке слева направо. (Источник изображения: CSS Tricks; https://css-tricks.com/)

F-образный паттерн В отличие от Z-образного паттерна, который может быть полезен при выборе места для размещения содержимого на странице, F-образный паттерн, показанный на рис. 6.19, позволяет выбрать способ компоновки страницы, приносящий максимальную пользу посетителям.

Глава 6. Создание макета и композиция  173

Рис. 6.19. F-образный паттерн чтения является очень распространенным и хорошо работает в случае со страницами, содержащими большой объем контента, например новостные статьи

По данным компании NNG, F-образный паттерн чтения является наиболее распространенным из всех паттернов, наблюдаемых в ходе исследований, и описывает то, как люди сканируют основное содержимое страницы, особенно содержащей большое количество текста. Посетители сайта, просматриваемого слева направо, начинают с левого угла и читают всю строку, затем перемещают взгляд вниз по левой стороне и снова сканируют строку слева направо. Наконец, они возвращаются назад и сосредотачивают внимание у левого края страницы. Как правило, они не просматривают следующую строку, хотя иногда это и случается. F-образный паттерн наглядно демонстрирует, как люди изначально сканируют страницу. Кроме того, он позволяет выявить проблемы с версткой, особенно если страница содержит много текста. Компания NNG обнаружила, что F-образный паттерн сканирования обычно используется на страницах, соответствующих трем критериям. Во-первых, он применяется к страницам или разделам страниц с большим объемом текста, не разделяемого с помощью каких-либо дополнительных визуальных эффектов.

174  Часть III. Элементы визуального дизайна В частности, речь идет о тексте, который не разбит на подразделы с подзаголовками, не выделен жирным шрифтом, не содержит выделенных цитат и маркированных списков, то есть представляет собой сплошное полотно. Во-вторых, компания NNG обнаружила, что пользователи сканируют страницу таким образом в тех случаях, когда хотят добиться наибольшей эффективности. И наконец, пользователи сканируют текст по F-образной схеме, когда не стремятся прочитать каждое слово. Если пользователи сканируют страницу, используя данный паттерн, значит, они пытаются понять, о чем идет речь, и выделить наиболее важные фрагменты, просканировав первые несколько строк, прежде чем переходить к следующему разделу. Если некоторые из страниц разрабатываемого сайта содержат большой объем контента, то F-образный паттерн может служить хорошим ориентиром для оценки того, насколько удобными для восприятия являются фрагменты, на которые разбит этот контент. Не нужно ли добавить ссылки в какие-нибудь места? Имеет ли смысл выделить какой-то текст жирным шрифтом или преобразовать его в список? Можно ли разбить содержимое на подразделы? Несмотря на то что F-образный паттерн является наиболее распространенным способом сканирования контента, он не является предпочтительным. Чтобы сделать страницу удобной для восприятия и дать пользователям возможность переключиться на другой паттерн чтения, необходимо воспользоваться некоторыми из описанных выше советов.

6.4. Использование пустого пространства Очень часто, работая над проектом с человеком, не являющимся дизайнером, я слышала фразу о том, что «пустого пространства слишком много», и это меня очень раздражало. Белое пространство — это не то, чего следует опасаться в дизайне. Это ключ к тому, чтобы сделать содержимое страницы более удобным для восприятия и использования. Белое или негативное пространство жизненно важно для создания четких фокусных точек и определения взаимосвязей между фрагментами контента на странице с помощью такого фундаментального принципа дизайна, как близость. Кроме того, оно предотвращает загромождение пользовательского интерфейса. Дизайн с достаточным количеством свободного места кажется пользователю гораздо менее подавляющим и направляет его внимание по странице. На рис. 6.20 представлен пример не очень эффективного использования пустого пространства. Так выглядели сайты конца 1990-х годов, когда разработчики практически никак не влияли на макет. Здесь нет пустого пространства между колонками, а расстояние между разделами и строками сильно ограниченно.

Глава 6. Создание макета и композиция  175

Рис. 6.20. На первых сайтах пустое пространство использовалось неэффективно, из-за чего страницы казались перегруженными

В примере, приведенном на рис. 6.20, все свалено в одну кучу. Заголовки всех разделов имеют одинаковый размер, поэтому пользователю не ясно, куда смотреть. Несмотря на то что средний раздел Featured больше боковых столбцов, расположенное над ним содержимое создает ощущение беспорядка. Нет ничего, что могло бы направить взгляд пользователя туда, куда ему следует смотреть в первую очередь. Рассмотрим вариант удачного использования негативного пространства на примере персонального сайта Генри Десроша (рис. 6.21). При прокрутке страницы наш взгляд притягивается к заголовку раздела, который четко указывает нам на то, где мы находимся. Мы знаем, на что должны смотреть, и ничто не отвлекает нас от этого. Использование негативного пространства на этом сайте создает ощущение элегантности. Как правило, негативное пространство используется в оформлении сайтов элитных брендов для создания ощущения роскоши, присущей соответствующим магазинам. В элитных магазинах предметы одежды и аксессуары не нагромождаются на одну вешалку, а демонстрируются по отдельности. Если предметы одежды и развешены, то их количество ограниченно и стратегически распределено так, чтобы для каждой вещи было достаточно места. Рассмотрим пример «до и после». На рис. 6.22 показано несколько текстовых фрагментов со ссылкой Подробнее в виде простой сетки с тремя колонками. На этом изображении все компоненты расположены плотно друг к другу, из-за

176  Часть III. Элементы визуального дизайна чего кажется, будто они составляют один большой блок контента. Это создает впечатление загроможденности и затрудняет восприятие содержимого.

Рис. 6.21. Использование негативного пространства создает фокусную точку для заголовка каждого раздела, на ней сосредоточивается внимание пользователя перед прокруткой содержимого Это заголовок

Это еще один

Еще один заголовок

Подробнее

Подробнее

Подробнее

Это заголовок

Это еще один

Еще один заголовок

Подробнее

Подробнее

Подробнее

Рис. 6.22. Несмотря на то что на странице размещены различные фрагменты контента, они расположены слишком близко друг к другу. В визуальном отношении мало что выделяет каждый из них. Все эти компоненты кажутся единым блоком контента

Глава 6. Создание макета и композиция  177

Если мы увеличим интервал между компонентами (рис. 6.23) и сделаем кнопки Подробнее более заметными, то облегчим восприятие страницы и сможем выделить каждый уникальный фрагмент контента. Благодаря большему количеству свободного пространства и дополнительному визуальному оформлению кнопок Подробнее будет понятнее, где начинается и заканчивается каждый из блоков содержимого. Это заголовок

Подробнее

Это заголовок

Подробнее

Это еще один

Подробнее

Это еще один

Подробнее

Еще один заголовок

Подробнее

Еще один заголовок

Подробнее

Рис. 6.23. Добавление пустого пространства и выделение кнопки Подробнее позволяет подчеркнуть каждый компонент и облегчает восприятие страницы

В ходе моей работы над печатными листовками и веб-страницами заказчики часто просили увеличить тот или иной элемент из-за слишком большого количества пустого пространства. Сталкиваясь с подобной обратной связью, надо учитывать точку зрения и опыт (или его отсутствие) заинтересованных сторон. Иногда эти люди очень далеки от дизайна. Если они просят заполнить пустое пространство (допустим, увеличить логотип), то на самом деле за этим может стоять непонимание ими предназначения этого пространства. А оно заключается в том, чтобы сделать интерфейс менее загроможденным и перегруженным. Каждое решение, принимаемое при разработке дизайна, имеет свое обоснование, поэтому надо постараться донести до заинтересованных сторон цель использования белого пространства, рассказать им, что именно оно привносит в дизайн, и объяснить негативные последствия его отсутствия (как, например, в случае с большим логотипом).

178  Часть III. Элементы визуального дизайна Все сказанное применимо к любому элементу дизайна интерфейса. Если кому-то из заинтересованных сторон не нравится тот или иной цвет, выясните причину. Объясните, почему вы используете именно эти цвета. Подобные диалоги помогают понять, почему людям не нравится тот или иной элемент дизайна, и могут привести к более плодотворной дискуссии о том, как решить эту проблему. Нельзя оставлять обратную связь на уровне аргумента «мне это не нравится», иначе в профессиональных отношениях возникнет напряженность и неудовлетворенность.

6.5. Соображения по поводу отзывчивого дизайна Сейчас, все мы знаем, можно получить доступ к интернету с помощью устройства, которое помещается в кармане. Для просмотра веб-страниц мобильные устройства используются чаще, чем настольные компьютеры. На заре развития мобильного интернета многие мобильные версии сайтов представляли собой уменьшенную версию сайта, разработанного для настольных компьютеров, и обеспечивали ужасный пользовательский опыт. Чтобы прочитать что-либо и щелкнуть по кнопке или ссылке, необходимо было увеличить масштаб. Простая навигация по странице в таких условиях вызывала раздражение. Со времен появления мобильных телефонов практика разработки отзывчивого дизайна прошла долгий путь, как и веб-технологии, и теперь стало возможно создавать дизайн, легко адаптирующийся к различным устройствам.

6.5.1. Разработка дизайна для мобильных устройств То, что мы работаем в условиях ограниченного экранного пространства, не значит, что дизайн и функциональность должны от этого страдать. Очень важно понимать потребности пользователей при взаимодействии с мобильной версией сайта или приложения. Цели таких пользователей могут слегка отличаться от целей посетителей, попадающих на сайт с настольных компьютеров. Для принятия решений, касающихся дизайна мобильной версии, следует использовать данные и результаты исследований. Рассмотрим основные моменты, которые необходимо учитывать при адаптации веб-сайта или приложения к небольшим экранам.

Минимизация и концентрация контента Интерфейс мобильной версии сайта должен быть как можно менее загроможденным. Нередко на мобильных устройствах приходится скрывать некоторые элементы или чуть иначе подавать информацию, по умолчанию отображаемую на настольных компьютерах. К примерам такого рода контента относятся основная навигация и компоненты, содержащие большое количество информации в формате списков. Не стоит загромождать пространство, отображая всю навигацию. Можно реализовать ее в виде оверлея, который открывается с помощью кнопки меню, как на рис. 6.24, вместо того чтобы отображать ее целиком, как на рис. 6.25.

Глава 6. Создание макета и композиция  179

Рис. 6.24. Скрыв меню за иконкой, по которой пользователь должен щелкнуть, можно сделать интерфейс неперегруженным

Например, на сайте со списком отелей в этом компоненте интерфейса должна отображаться только самая важная информация, в частности, название, цена, рейтинг, местоположение или район. Более подробные сведения могут быть представлены на дополнительной странице, на которую пользователь переходит по ссылке. Еще одним вариантом является создание меню-аккордеона, которое будет удерживать пользователя на странице со списком и наполнять компонент информацией, обычно скрываемой на маленьком экране (рис. 6.26). Предоставьте наиболее важную информацию, которую легко просмотреть, и дайте пользователю возможность отобразить дополнительные сведения с помощью интерактивного элемента интерфейса.

180  Часть III. Элементы визуального дизайна

Рис. 6.25. Отображение всех пунктов меню в верхней части страницы перегружает интерфейс и делает неочевидной иерархию навигации. В итоге получается просто блок ссылок, сливающийся    с расположенным ниже текстом

Кроме того, подумайте о том, какие элементы сайта, предназначенного для настольных компьютеров, могут негативно повлиять на время загрузки мобильной версии вашего сайта или приложения. Если на главной странице есть встроенное видео, которое не содержит особенно важной информации, можно ли заменить его более удобным для восприятия медиафайлом, например изображением? Есть ли на сайте изображения или видео, которые можно убрать без негативных последствий для пользовательского опыта? Подумайте о том, что пытаются сделать пользователи, посещающие ваш сайт со своего телефона, и оптимизируйте контент и пользовательский опыт под решение соответствующих задач.

Разработка дизайна для устройств с сенсорным экраном Еще один фактор, который необходимо учесть при адаптации дизайна к устройствам с небольшим экраном, — сенсорный ввод. Основным средством взаимодействия пользователей с мобильными телефонами является сенсорный экран, поэтому необходимо увеличить интерактивные элементы и сделать их более восприимчивыми к прикосновениям. Такие элементы, как кнопки на экране, должны быть более крупными. Кроме того, следует учитывать, как люди держат телефоны и взаимодействуют с экраном, пользуясь только одной рукой.

Глава 6. Создание макета и композиция  181

Рис. 6.26. Чтобы избежать информационной и визуальной перегруженности, нужно отображать только самую важную информацию и дать пользователям возможность найти дополнительные сведения в случае необходимости

На рис. 6.27 показаны зоны большого пальца для правши. Нужно добиться, чтобы интерактивные элементы находились в зеленой зоне с надписью «Естественная». Однако также следует подумать о том, имеет ли смысл поместить в это пространство навигационную панель или панель инструментов с привычными для пользователей действиями, чтобы им не приходилось тянуться к верхней части экрана для получения доступа к ним. Опять же, это зависит от целей сайта и потребностей его посетителей. Возможно, размещать навигацию в нижней части экрана не имеет смысла, а вместо этого лучше предусмотреть в этой области кнопку Наверх. При обдумывании целей касания также следует убедиться, что между такими элементами пользовательского интерфейса, как кнопки, остается достаточно места, вне зависимости от того, расположены они в один ряд или друг над другом. Кнопки должны быть достаточно крупными и располагаться достаточно далеко друг от друга, поскольку случайное нажатие неправильной кнопки может привести к путанице и вызвать раздражение.

182  Часть III. Элементы визуального дизайна

Труднодоступная

Требующая напряжения

Естественная

Рис. 6.27. Зоны большого пальца для людей, держащих телефон в правой руке. Учитывайте то, как пользователи взаимодействуют с вашим дизайном, и старайтесь располагать все    в естественной зоне

Разбивка контента для создания более управляемых потоков задач Когда речь идет об элементах длинных форм, особенно об адресе владельца банковской карты и адресе доставки, разбейте контент на части, чтобы создать более управляемый поток задач и сообщить пользователю о том, на каком этапе он находится. Например, можно наглядно представить шаги, которые ему необходимо выполнить. Вместо того чтобы отображать целую страницу с полями ввода платежных данных и адреса доставки, имеет смысл разбить форму на несколько частей: способ оплаты (рис. 6.28), адрес доставки и варианты доставки. И все это на отдельных экранах с понятными кнопками для перехода вперед и назад. Подобная разбивка контента делает задачу более выполнимой и не перегружает пользователя. Кстати, при разбивке задачи на отдельные этапы пользователю гораздо легче устранить такие проблемы, как ошибки при вводе данных, например, ввод неверного номера кредитной карты. Пользователь может сосредоточиться на устранении этой ошибки в соответствующей части ввода, а не исправлять множество ошибок на одной большой странице, содержащей все формы для ввода всех данных. Описанный подход позволяет оптимизировать опыт пользователя при выполнении им затребованных действий.

Глава 6. Создание макета и композиция  183

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

Поддержание единства визуального оформления на всех устройствах Наконец, при создании мобильной версии сайта используйте те же визуальные стили и элементы, что и в версии для стационарного компьютера. Можно изменить размер и сократить объем контента на мобильном сайте, однако не стоит менять цвета и типографику или визуальное оформление иллюстраций и фотографий. Эти элементы обеспечивают единообразие и узнаваемость бренда, что позволяет пользователям не запутаться при переходе с одной версии сайта на другую. Мобильный сайт должен выглядеть так же, как и основной, будучи адаптированным для более удобного использования на устройствах с небольшим экраном.

6.5.2. Разработка дизайна для многоэкранных и складных устройств В 2019 году, после почти двадцатилетнего периода создания похожих друг на друга устройств, на рынке появился новый класс систем. Многоэкранные «девайсы» складываются и раскладываются, подобно книге, и в зависимости от типа имеют либо два экрана, разделенных физическим сгибом, который может заслонять веб-контент, либо один экран, складывающийся пополам, который не мешает восприятию контента.

184  Часть III. Элементы визуального дизайна Инвестиции в производство устройств этого нового класса продолжаются. Разработка дизайна для подобных систем может показаться сложной задачей. Однако многоэкранные складные устройства являются следующим шагом в развитии отзывчивого дизайна и предоставляют уникальную возможность предложить пользователям расширенный опыт, задействующий оба экрана. Например, как показано на рис. 6.29, сайт с кулинарными рецептами может быть адаптирован так, чтобы список ингредиентов отображался на одном экране, а этапы приготовления блюда — на другом. Благодаря этому ингредиенты и их количество остаются доступными при прокрутке перечня шагов приготовления.

Рис. 6.29. Использование двухэкранных устройств позволяет разделить веб-макеты на две части

На момент написания этой книги API для создания макетов, адаптированных под двухэкранные устройства, являются экспериментальными и доступны не во всех браузерах. Тем не менее они позволяют заглянуть в будущее многоэкранных устройств и дают возможность для разработки усовершенствованного опыта, способного порадовать пользователей. Что касается написания кода, то API для JavaScript и CSS были реализованы с использованием уже знакомых концепций кодирования, таких как медиазапросы и переменные окружения. Таким образом, разработчикам не придется изучать новые идеи и принципы написания кода, адаптированного к двухэкранному устройству, и они смогут уделять больше времени обдумыванию способов использования двух экранов для создания более функционального и удобного пользователям дизайна.

Глава 6. Создание макета и композиция  185

Резюме Прежде чем применять какие-либо визуальные элементы, в  частности шрифты и цвета, необходимо определить и уточнить структуру сайта, создав его план. Определите все разделы контента, которые будут находиться на странице, например заголовок, футер и основной контент, а затем решите, как этот контент будет разделен. Определитесь с тем, какую сетку вы будете использовать для организации содержимого в перечисленных разделах. Эта сетка станет системой распределения содержимого на странице. Сетка состоит из колонок, строк и  промежутков между ними. Чаще всего для настольных компьютеров используется 12 колонок, для планшетов — 8, а для мобильных телефонов — 4. В Интернете можно найти множество бесплатных инструментов для определения сетки. Выбирая макет для сайта, учитывайте тип содержимого, которое будет отображаться на странице. Не все страницы должны иметь одинаковый макет, хотя страницы с похожим содержимым должны иметь одинаковую структуру. Например, чтобы избежать путаницы, при создании всех страниц с товарами следует использовать один и тот же шаблон, при этом он не должен совпадать с макетом основной страницы. Паттерны чтения, выявленные исследовательскими группами, описывают то, как пользователи сканируют страницу. Хотя эти паттерны не обязаны определять компоновку всей страницы, их можно учитывать при размещении некоторых фрагментов контента. Для создания более чистого и менее загроможденного пользовательского интерфейса следует использовать пустое пространство. Не стоит стремиться занять изображениями или другими компонентами каждый пиксель на странице. Промежутки между компонентами и блоками контента имеют очень большое значение для определения взаимосвязей между элементами на странице и облегчают ее сканирование и восприятие. При разработке дизайна для мобильных устройств не следует создавать миниатюрную версию сайта, предназначенного для настольных компьютеров. Вместо этого лучше сократить объем контента и предоставить пользователям возможность просмотреть дополнительную информацию, например, путем нажатия на тот или иной компонент. Основная задача — постараться обеспечить удобный пользовательский опыт для владельцев мобильных устройств, сохранив при этом фирменный стиль, свойственный сайту, предназначенному для настольных компьютеров.

7

Улучшение макета сайта с помощью анимации

В этой главе 33 Эффективное использование анимации для улучшения пользовательского опыта и повышения удобства работы с сайтом или приложением. 33 Когда стоит использовать анимацию и что она должна давать пользователям. 33 Планирование анимации на этапе разработки дизайна перед написанием кода.

Для веб-сайта или веб-приложения анимация значит то же самое, что и посыпка для кекса. Глазированный кекс и без посыпки остается таким же вкусным и съедоб­ным, однако посыпка (или другие украшения) создает уникальные вкусовые ощущения у того, кто его ест. Представим, что посыпка представляет собой золотые хлопья, элегантно окутывающие глазурь кекса. Такая подача уж точно создаст гораздо более запоминающиеся впечатления у человека, которому он будет преподнесен, чем обычный глазированный кекс. Вероятно, этот человек будет долго любоваться съедобными золотыми хлопьями, прежде чем съесть угощение. Возможно, узор из золотых хлопьев даже повлияет на его решение о том, как именно он будет есть этот кекс. Если же кекс просто покрыт масляной глазурью, на него, скорее всего, не обратят особого внимания. Он может быть

Глава 7. Улучшение макета сайта с помощью анимации  187

съедобен и даже вкусен, но он не запомнится и не порадует человека так, как это сделал бы кекс, украшенный удачно подобранной посыпкой. В случае с веб-сайтами аналогом посыпки для кекса является анимация. Хорошо выполненная анимация делает впечатления от сайта более запоминающимися и доставляет пользователю удовольствие. С другой стороны, плохая анимация может быть столь же запоминающейся, но оказывать противоположный эффект на посетителей сайта. Слишком большое количество анимации или игнорирование персональных настроек пользователей (например, связанных с уменьшением динамики) может сделать сайт менее удобным и доступным. Использование анимации не должно ухудшать пользовательский опыт. Она должна информировать пользователей и радовать их. Подобно кексу, который является съедобным и без посыпки, сайт должен быть удобным для использования и без анимации.

7.1. Зачем нужна анимация Анимацию следует использовать на сайте осторожно и осознанно. Ее не стоит добавлять только потому, что вы хотите привнести на свой сайт элемент движения. Есть ли у вас цель и план для той анимации, которую вы намерены использовать? Соответствует ли она бренду клиента, для которого вы создаете сайт? Например, я не ожидала бы увидеть большое количество анимации на сайте больницы или медицинского учреждения, предназначенного для пациентов с неизлечимыми заболеваниями. На нем может использоваться эффект прокрутки, а некоторые кнопки могут менять цвет или иметь едва заметный эффект наведения. Однако очень важно учитывать эмоциональное состояние пользователей при посещении подобного сайта и оценивать уместность применения анимации.

7.1.1. Повышение удобства использования Если ваш сайт полностью основан на анимации, как, например, сайт игры, то ее использование является необходимостью. Однако на маркетинговых сайтах и сайтах электронной коммерции анимация и движение должны применяться в первую очередь для повышения удобства использования. Анимацию можно сочетать с такими основными принципами дизайна, как контраст, чтобы давать пользователям более очевидные подсказки о том, куда им следует двигаться дальше, и направлять их по тому пути, который вы спланировали на этапе проведения исследований. Она также может демонстрировать способ использования сайта или указывать на функции того или иного элемента. Анимация должна помогать посетителям в процессе навигации по сайту или веб-приложению и ни в коем случае не мешать им в получении доступа к основному контенту. Ее основное предназначение — улучшать, а не ухудшать пользовательский опыт. Именно поэтому интерактивные прототипы необходимо тестировать при участии пользователей.

188  Часть III. Элементы визуального дизайна

7.1.2. Создание запоминающихся взаимодействий Помимо информирования пользователей о функции или назначении того или иного элемента пользовательского интерфейса, анимация может доставить им удовольствие и обеспечить запоминающийся опыт. Одной из моих любимых анимаций является снежный человек, изображенный на рис. 7.1, который отслеживает движения указателя мыши и анимируется при успешном заполнении формы. Анимация, отображаемая при отправке формы, не только информирует пользователя, но и привносит элемент игры в процесс, предшествующий ее отправке. Я как посетитель сайта с большой вероятностью запомню этот опыт взаимодействия с формой, потому что она не похожа ни на одну другую веб-форму, которую мне доводилось заполнять. По возможности постарайтесь найти способ порадовать пользователей. Это произведет на них неизгладимое впечатление и побудит вернуться на ваш сайт или даже рассказать о нем другим людям, что привлечет новых посетителей.

Рис. 7.1. Анимированная форма авторизации, созданная Дарином Сеннеффом, отображает разные состояния снежного человека в зависимости от заполняемой части формы. (Изображение предоставлено Дарином Сеннеффом)

7.1.3. Использование анимации в качестве украшения, вызывающего эмоциональный отклик Наконец, анимация может выполнять и просто декоративную функцию. При условии не слишком сильной перегруженности анимация способна вызвать эмоциональный отклик у посетителей сайта, что может послужить созданию запоминающегося пользовательского опыта или просто привнести в него развлекательный элемент. Возможно, это не побудит пользователя поделиться впечатлениями с кем-то другим, но зато сделает его пребывание на сайте более приятным.

Глава 7. Улучшение макета сайта с помощью анимации  189

В прошлом одна из моих любимых розничных компаний, имеющая как физические, так и интернет-магазины, в предновогодние дни отображала в верхней части сайта своего интернет-магазина рождественские гирлянды (как на рис. 7.2). Разноцветные огоньки мягко мигали, не отвлекая мое внимание от основной цели пребывания на сайте. Они создавали атмосферу и делали процесс покупок в интернете более праздничным, освобождая меня от необходимости стоять в очереди в физическом магазине.

Рис. 7.2. Пример заголовка сайта розничного магазина с рождественскими огнями, которые можно анимировать с помощью непрозрачности или изменения цвета

В качестве личного примера я могу привести свой технический блог и портфолио, где гиперссылки предусматривают жирное светло-фиолетовое подчеркивание, которое при наведении указателя мыши сдвигается вверх, выделяя слово целиком (рис. 7.3). Я реализовала эту функцию в чисто декоративных целях, Обычная ссылка

Анимация при наведении

Итоговое состояние ссылки

Рис. 7.3. Последовательность анимации при наведении на ссылку указателя мыши. Обычная ссылка — это состояние, в котором она находится вне какоголибо взаимодействия. При наведении на нее указателя мыши фиолетовая черта сдвигается вверх, а в финале анимации ссылка полностью выделяется цветом

190  Часть III. Элементы визуального дизайна пока экспериментировала с CSS-анимацией. Ваш персональный сайт, если он у вас есть, может стать отличной площадкой для подобных экспериментов. Вы можете попробовать то, что обычно не удается реализовать на сайте клиента. Кроме того, так у вас будет больше времени и свободы действий, чтобы понять, что работает, а что нет. Что касается моего эффекта наведения, я получила несколько положительных комментариев в социальных сетях по поводу этой анимации. То есть я добавляла его в декоративных и экспериментальных целях, и обнаружила, что он также позволяет обозначить кликабельность элемента, тем самым решая функциональную задачу таким способом, который вызывает реакцию у посетителей моего сайта.

7.2. Когда стоит использовать анимацию Анимацию следует применять для повышения удобства использования сайта, создания запоминающихся впечатлений и вызова эмоционального отклика у посетителей. Но как определить подходящий момент и сценарий для достижения этих целей? Рассмотрим несколько распространенных случаев, в которых имеет смысл добавить анимацию на сайт или в приложение.

7.2.1. Предоставление подсказок для навигации по сайту В зависимости от типа и стиля разрабатываемого сайта одним из поводов для добавления анимации может являться предоставление навигационных подсказок. Существуют способы, позволяющие сделать элементы динамичными, для того чтобы сообщить пользователю о необходимости совершения того или иного действия, например прокрутки страницы или нажатия кнопки Далее для получения дополнительной информации. Я часто видела в нижней части вебстраницы слово Scroll (Прокрутить), которое постепенно проявляется или медленно движется вверх и вниз. Такое движение привлекает достаточно внимания к анимированному элементу (особенно на сайте, где все остальные элементы являются статичными), чтобы пользователь заметил изменения на странице и выполнил соответствующие действия. Если вы создаете сайт, с которым пользователи будут взаимодействовать не один раз и возвращаться к нему довольно часто, то есть нечто, напоминающее приложение, анимация может использоваться для ознакомления пользователей с расположением тех или иных элементов и способами выполнения различных действий. Например, вы создали веб-приложение для ведения дневника сновидений. В идеале пользователи будут обращаться к этому приложению практически ежедневно. Поэтому для первого его запуска хорошо бы предусмотреть последовательно всплывающие подсказки, демонстрирующие выполнение тех или иных действий и расположение различных элементов. Они должны быть

Глава 7. Улучшение макета сайта с помощью анимации  191

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

7.2.2. Предоставление пользователям обратной связи при их взаимодействии с элементами пользовательского интерфейса Одним из наиболее простых способов внедрения анимации на сайт является предоставление посетителям визуальной обратной связи при взаимодействии с элементами пользовательского интерфейса на странице. Например, кнопка может менять цвет или положение при наведении на нее указателя мыши, некоторые элементы формы могут реагировать на взаимодействие, а цвет контура поля ввода текста может изменяться при щелчке по нему. Все эти варианты анимации сообщают пользователю о том или ином событии в ходе его взаимодействия с сайтом. Такой тип анимации может не только показывать факт взаимодействия, но и подтверждать, что это действие было успешным. В качестве распространенного примера приведу ввод пароля. Когда я ввожу неправильный пин-код в своем iPhone, точки в верхней части экрана быстро двигаются вперед-назад, указывая на возникновение проблемы. Хотя этот пример относится к операционной системе мобильного телефона, та же концепция может быть применима и к сайтам. Если при авторизации на сайте я ввожу неправильный пароль и замечаю, что форма входа в систему подрагивает, прежде чем сообщить мне о вводе неверного пароля, я могу быстрее понять: что-то пошло не так. Если же я ввожу неправильный пароль и появляется сообщение об ошибке, то мне требуется больше времени на ее обработку. При этом в форме не происходит никаких изменений, указывающих на то, что в процессе выполнения моей задачи чтото пошло не так. Мне приходится просканировать форму взглядом, найти сообщение об ошибке и разобраться в ситуации. Анимационный эффект тряски формы, указывающий на возникновение проблемы, дает мне немедленную обратную связь и снижает когнитивную нагрузку, связанную с попыткой понять, что именно пошло не так, в результате я могу быстрее ввести верный пароль и выполнить свою задачу. Для выявления потенциальных областей применения анимации на сайте следует определить точки соприкосновения сайта с пользователем, то есть элементы пользовательского интерфейса, с которыми пользователи будут взаимодействовать, щелкая по ним кнопкой мыши. Подумайте о том, какого рода обратную связь вы должны им предоставить. Заполняют ли они форму? Что происходит

192  Часть III. Элементы визуального дизайна после ее отправки? Что происходит при неудачной отправке формы? А при успешной? Может ли анимация предоставить пользователю визуальную обратную связь для прояснения его дальнейших шагов? Какое изменение состояния кнопки при наведении на нее указателя мыши даст понять посетителю, что она является кликабельной? Может быть, стоит сделать так, чтобы она слегка изменяла положение или цвет? Подобная обратная связь скажет пользователю о том, что элемент является интерактивным, и побудит его щелкнуть на нем.

7.2.3. Навигация и переходы между страницами Анимация перехода между страницами сайта или приложения — это еще один способ придать им динамику. Как правило, в мобильных приложениях переходы между страницами особенно заметны при переключении с одного экрана на другой. Например, вы просматриваете списки отелей в приложении на своем телефоне и выбираете интересующий вас вариант для просмотра более подробной информации. Для создания красивого перехода между страницами вы можете сделать так, чтобы объявление с рекламой конкретного отеля расширилось, превратившись в страницу с подробными сведениями. План подобной анимации будет выглядеть примерно так, как показано на рис. 7.4.

Рис. 7.4. Прогрессия перехода может быть показана с помощью вайрфрейма. На схеме справа показан результат перехода после щелчка по одному из объявлений слева

Глава 7. Улучшение макета сайта с помощью анимации  193

Анимация переходов между страницами помогает сориентировать пользователя в приложении и создает у него ощущение, будто он углубляется в приложение и его подстраницы. Возвращение пользователя на страницу со списком отелей может сопровождаться анимацией, которая является обратной версией первоначальной, то есть создает эффект сворачивания страницы в исходный список. В процессе просмотра сайтов на настольном компьютере при щелчке по ссылке новая страница обычно загружается без каких-либо переходов. Да, такие переходы гораздо чаще встречаются в мобильных приложениях, но некоторые фреймворки, в частности React и Vue.js, делают их доступными и для настольных компьютеров. Добавление таких переходов не только помогает сориентировать пользователя, как в мобильном приложении, но и делает навигацию по сайту более плавной. Отсутствие анимированных переходов между страницами не ухудшает пользовательский опыт, однако применение анимации в данном случае может сделать так, чтобы само путешествие по сайту доставляло пользователю удовольствие.

7.2.4. Указание статуса выполняемой задачи По словам Якоба Нильсена, соучредителя компании Nielsen Norman Group и эксперта в области веб-юзабилити, «когда пользователям известно текущее состояние системы, они узнают результаты своих предыдущих взаимодействий и определяют свои дальнейшие шаги» (http://mng.bz/MBM8). Информирование пользователей о том, где они находятся и что происходит при их взаимодействии с сайтом, — это еще одна причина использования анимации для предоставления им визуальной обратной связи. Наиболее простым способом использования анимации для указания статуса является добавление анимации загрузки. Вне зависимости от того, идет ли речь о переходе на другую страницу или об отправке формы, анимация загрузки представляет собой наглядный способ указать пользователю, что происходит некий процесс, для завершения которого требуется время. Это может быть актуально, если страница загружается недостаточно быстро или предоставление визуальной обратной связи не является немедленным. Без подобной анимации пользователь не сможет понять, происходит ли что-то вообще. Загружается ли страница? Или система зависла? Нужно ли обновить страницу? Если загружается содержимое страницы, то вместо типичного загрузочного спиннера можно показать скелетную загрузку (рис. 7.5). Он также может предусматривать анимацию, например, его цвет может слегка меняться, создавая эффект пульсации и впечатление, будто со страницей что-то происходит. То же самое относится и к отправке формы. Например, пользователь только что заполнил форму заказа и ввел платежные данные, а для обработки платежа требуется некоторое время. Пользователь отправляет форму, но не получает

194  Часть III. Элементы визуального дизайна

Рис. 7.5. Скелет содержимого не обязан состоять из серых квадратиков. Можно добавить в него несколько значков или использовать фирменный цвет, чтобы сделать создаваемое им впечатление не слишком стерильным

подтверждения вроде фразы Заказ успешно оформлен (или сообщения об ошибке в случае неудачной отправки формы). К тому же между нажатием кнопки Оформить заказ и получением окончательного сообщения об успехе или ошибке на сайте не отображается анимация загрузки. В результате пользователь может предположить, что что-то пошло не так или заказ не был принят. Это побудит его обновить страницу или начать все сначала, что вызовет у него раздражение. Более очевидным вариантом использования анимации для указания статуса является создание индикатора выполнения, будь то для отображения состояния загрузки, скачивания файла или для сообщения о более длительном, чем ожидалось, процессе. Я встречала разные варианты использования индикатора

Глава 7. Улучшение макета сайта с помощью анимации  195

выполнения заказа, наиболее запоминающимся из них была система онлайнзаказов пекарни Domino’s. После заказа пиццы она отображала страницу его выполнения. Это была простая полоса прогресса, разделенная на несколько различных этапов, таких как «Приготовление» и «Выпечка». Каждая из этих секций анимировалась вплоть до завершения соответствующего этапа. Эта анимация обогатила опыт заказа пиццы: анимированная полоса прогресса создавала ощущение, будто я наблюдаю за приготовлением пиццы. Еще одним примером анимации, создающей приятное и запоминающееся взаимодействие, является экран загрузки в немецком приложении BVG. Он позволяет любоваться завораживающей анимацией, пока пользователь ожидает завершения процесса покупки билета. Я никогда не устаю от этого зрелища, и время ожидания пролетает незаметно. В ходе воспроизведения анимации приложения разные поезда подпрыгивают и опускаются, переходя из одной формы в другую. Эта невероятно плавная и хорошо продуманная анимация дает понять: что-то происходит. Хотя точный статус выполнения операции не указывается, пользователю ясно, что процесс покупки билета продолжается.

Рис. 7.6. Слева направо показаны формы поездов, постепенно сменяющие одна другую. (Изображение предоставлено Франком Шрайером)

Информирование пользователей о статусе выполнения их задачи на сайте или в приложении является неотъемлемым условием хорошего юзабилити. Это позволяет им оставаться в курсе, какое действие они только что совершили, и указывает на их следующий шаг. Кроме того, именно на этом этапе взаимодействия пользователя с сайтом уместно реализовать анимацию, способную усовершенствовать пользовательский опыт.

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

196  Часть III. Элементы визуального дизайна серьезные проблемы. Ненужная анимация способна даже увеличить расходы конечного пользователя, связанные с передачей данных. Поэтому для наиболее иммерсивных анимаций, например тех, которые демонстрируют процесс использования продукта, важно предусмотреть возможность полного их отключения. Это может пригодиться посетителям, которые используют девайсы с ограниченной пропускной способностью канала связи и низкой скоростью интернет-соединения. Анимация, блокирующая пользовательский опыт, должна воспроизводиться только при первом посещении сайта; при повторном посещении пользователи должны иметь возможность пропустить анимацию. Постоянное воспроизведение даже небольших фрагментов анимации может вызвать у пользователей раздражение. При добавлении анимации на веб-сайт нужно думать на перспективу, учитывать, как именно пользователи будут взаимодействовать с сайтом и какова будет длительность анимации. Лучший способ определить, не мешает ли пользователям анимация и не раздражает ли она их, — провести тестирование с их участием. Вы можете создать грубый интерактивный прототип (он не обязан быть идеальным), с которым пользователи смогут взаимодействовать. Задайте им вопросы о пользовательском опыте и о том, как бы они себя чувствовали при многократной работе с ним, спросите, что они чувствуют при просмотре анимации. Будучи дизайнерами и проектировщиками пользовательского опыта, мы иногда чувствуем привязанность к создаваемым нами эффектам, но прежде всего необходимо убедиться в том, что они представляют ценность для пользователей. А в тех случаях, когда не привносим эффектами дополнительной ценности, мы как минимум не должны ухудшать опыт взаимодействия с веб-сайтом или приложением.

7.3. Планирование анимаций Как и при разработке дизайна сайта или приложения, очень важно иметь план того, что вы собираетесь анимировать. Этот план позволяет представить, как начинается взаимодействие, что происходит в середине и чем оно должно закончиться. Создание плана анимации не должно быть дорогостоящим, то есть не должно занимать много времени. И хотя некоторые аниматоры или моушендизайнеры создают тщательно проработанные планы, они не обязаны быть чрезмерно сложными для тех типов анимации, которые предстоит создавать на сайтах. План анимации называется раскадровкой. Раскадровка используется моушендизайнерами и аниматорами для низкодетализированного визуального планирования последовательности событий. Как правило, раскадровка представляет собой серию эскизов с изображением действий или событий. При планировании анимации для веб-сайта или приложения раскадровки можно использовать для

Глава 7. Улучшение макета сайта с помощью анимации  197

любых целей, начиная с создания простой анимированной кнопки (реагирующей на наведение указателя мыши) и заканчивая такой более сложной анимацией, как эффекты переходов и прокрутки. Самое главное, чтобы раскадровка давала представление о начале, середине и конце последовательности событий.

7.3.1. Создание раскадровки Чаще всего разработчикам приходится анимировать элементы пользовательского интерфейса, которые должны прокручиваться, реагировать на наведение указателя мыши или скользить по экрану. Для передачи этого эффекта движения и необходима раскадровка. Раскадровки могут представлять собой низкодетализированные, очень грубые и непропорциональные наброски. Упражнение: рисование раскадровки для анимированного объекта Давайте набросаем небольшую раскадровку для анимированной кнопки. Нарисуйте три пустых квадрата или прямоугольника. В этих фигурах будут изображены различные состояния кнопки. На первом эскизе изобразите кнопку в обычном состоянии. На втором нарисуйте кнопку в том состоянии, в котором она должна находиться при наведении на нее указателя мыши. Подумайте о том, что должно при этом произойти. Должна ли кнопка сдвинуться в каком-либо направлении? А может быть, увеличиться в размере или изменить форму? Набросайте эти состояния, используя такие элементы, как стрелки, для обозначения движения. Например, если кнопка должна сместиться вверх при наведении на нее указателя мыши, нарисуйте кнопку чуть выше ее исходного положения и добавьте несколько стрелок, указывающих направление ее сдвига. Затем на третьем эскизе изобразите конечное состояние, соответствующее нажатой кнопке и подтверждающее успешность совершенного действия. Должен ли при этом измениться цвет кнопки? А может быть, должно измениться что-то в самой кнопке, например текст? Как должно выглядеть ее конечное состояние? Выполнение этого упражнения должно занять всего несколько минут. Эти наброски следует делать быстро и без лишних деталей. В итоге вы получите раскадровку для анимированной кнопки!

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

198  Часть III. Элементы визуального дизайна

Рис. 7.7. Пример того, насколько низкой может быть степень детализации раскадровки при условии передачи общей сути истории

7.4. Технические аспекты анимации Как уже говорилось, анимацию следует использовать осторожно, поскольку нельзя перегружать пользователей в визуальном плане. Кроме того, слишком большое количество анимации может перегрузить их устройства. Обе эти причины важны, необходимо проявлять осторожность, поскольку добавление анимации сопряжено со снижением производительности, влияет на скорость работы сайта или приложения, а на некоторых людей может оказывать даже физическое воздействие.

7.4.1. Соображения по поводу производительности При неправильной реализации анимация может привести к замедлению работы пользовательского интерфейса. Реагирование на действия пользователя в ходе фоновой загрузки анимации может занимать время несколько большее, чем без нее. То, с помощью чего выполняется анимация, также может сыграть свою роль в замедлении работы сайта. Хотя CSS-анимация наименее затратна с точки зрения производительности браузера, анимирование некоторых CSS-свойств обходится дороже из-за того, как именно браузер обрабатывает анимацию. Наложение эффекта анимации на такие свойства элементов, как ширина, высота и размер шрифта, требует от браузера пересчета положения и формы, а затем перерисовки всего элемента, что сопряжено с затратами большого количества вычислительных ресурсов. К наиболее дорогостоящим анимируемым свойствам также относятся цвет, отступ и положение. Менее затратными свойствами считаются непрозрачность и трансформация, поскольку они не требуют от браузера перерисовки элемента или изменения макета. Подробный список CSS-свойств и действий браузера, связанных с их анимацией, можно найти на сайте CSS Triggers (https:// csstriggers.com).

Глава 7. Улучшение макета сайта с помощью анимации  199

Влияние анимации на производительность сайта — это ключевой фактор, который необходимо учитывать при ее планировании. Анимация должна вносить существенный вклад в пользовательский опыт, а если она несет исключительно развлекательную функцию, то, по крайней мере, не должна негативно влиять на этот опыт и замедлять загрузку сайта или приложения.

7.4.2. Соображения по поводу доступности При обдумывании анимации и ее потенциального влияния на пользовательский опыт необходимо учитывать ее доступность. Руководство по обеспечению доступности веб-контента (WCAG), разработанное Консорциумом Всемирной паутины, предусматривает различные уровни доступности веб-ресурсов, в том числе и анимации. При разработке дизайна следует учитывать два основных фактора, связанных с доступностью и анимацией: во-первых, необходимо предоставить пользователям возможность приостанавливать, отключать и скрывать анимацию, а во-вторых, необходимо предусмотреть обработку того, что в системных настройках у некоторых пользователей может быть активирован режим минимизации динамики. Этот режим особенно важен для людей, которым становится плохо от некоторых видов анимированного контента. Например, анимация с интенсивным миганием может вызывать эпилептический припадок, поэтому возможность отключить ее или вообще не показывать позволяет создать более приятный пользовательский опыт. Возможность остановить или скрыть анимацию необходимо предусмотреть для любого элемента пользовательского интерфейса, анимация которого запускается без участия пользователя или длится более пяти секунд. Примером служит целевая страница с фоновым видеороликом, который начинает воспроизводиться автоматически. Чтобы обеспечить ее соответствие требованиям WCAG, на этой странице пользователь должен иметь возможность приостановить воспроизведение видео. Настройки уменьшения динамики следует учитывать заранее, то есть еще при планировании анимации, а реализовать на этапе разработки. Для создания менее интенсивной анимации можно использовать в коде медиазапрос prefersreduced-motion.

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

200  Часть III. Элементы визуального дизайна Вполне обоснованно для лучшего ориентирования пользователей анимировать навигацию и переходы между страницами. Такие виды анимации служат подсказками при путешествии по сайту и предоставляют посетителям обратную связь при взаимодействии с элементами пользовательского интерфейса, помогая понять, что именно происходит на экране. Анимация часто используется для указания статуса выполняемой пользователем задачи. Цель анимации, например, отражающей перемещение пользователя по сайту или показывающей прогресс загрузки страницы, состоит в том, чтобы информировать и ориентировать пользователей на протяжении всего периода их пребывания на сайте. Стоит заранее задуматься, как анимация повлияет на пользовательский опыт в долгосрочной перспективе, она не должна влиять на него негативно. Не будет ли она мешать пользователям взаимодействовать с сайтом? Не будет ли она раздражать людей, посещающих сайт повторно? При ее планировании постарайтесь учесть эти вопросы. Раскадровка быстрых скетчей, отражающих изменение состояния того или иного элемента пользовательского интерфейса в процессе диалога с пользователем, не менее ценно, чем создание вайрфреймов, но благодаря очень низкой степени детализации требует гораздо меньше времени. Цель в данном случае заключается в передаче движения с указанием начала, середины и конца последовательности событий. Анимация может существенно замедлить загрузку страницы, поэтому нужно тщательно обдумывать, какие из анимационных фрагментов являются жизненно необходимыми для пользовательского опыта. По возможности следует анимировать элементы без использования CSS-свойств, требующих от браузера перерисовки или смещения фрагментов макета. Доступность является важнейшим соображением при разработке вебпроектов. За этим стоит обеспечение соответствия анимации рекомендациям WCAG, которые включают в себя возможность отключения, приостановки и скрытия анимации, которая автоматически запускается при загрузке страницы, а также создание с помощью медиазапроса prefers-reduced-motion варианта страницы для людей, использующих режим минимизации динамики.

8

Использование типографики на веб-сайте

В этой главе 33 Выбор шрифта для проекта. 33 Оценка эффективности работы шрифта в веб-контексте или на экране. 33 Моменты, которые следует учитывать при сочетании разных видов шрифтов. 33 Работа с типографикой, создание набора параметров шрифта и вертикального ритма для поддержания согласованности дизайна. 33 Удобочитаемость шрифтов и обеспечение их доступности.

Типографика является одним из самых мощных аспектов визуального дизайна, поскольку в зависимости от шрифта смысл слов может варьироваться весьма значительно, как в примере на рис. 8.1. Фраза «Я буду любить тебя вечно» приобретает зловещий смысл при использовании шрифта, показанного внизу, по сравнению с тем, который показан вверху. Comic Sans — это, пожалуй, самый известный пример использования цифрового шрифта для передачи смысла, противоположного изначально задуманному.

202  Часть III. Элементы визуального дизайна

Рис. 8.1. Смысл фразы «Я буду любить тебя вечно» становится зловещим при изменении рукописного шрифта на декоративный шрифт, предназначенный    для фильмов ужасов

Этот детский причудливый шрифт часто применяется при оформлении весьма серьезных (даже правительственных) сообщений. Впервые появившись в ОС Windows 95 компании Microsoft, он нередко использовался вполне уместно, например в рамках учебного процесса, но чаще всего его применяли в неподходящих ситуациях. Например, в 2019 году бывший адвокат президента США написал письмо, объясняющее причастность некоторых людей к политическому скандалу, и попал в газеты, поскольку использованный им шрифт оказался слишком неуместным для данной ситуации (http://mng.bz/gBlG). Оформление официального письма с помощью шрифта, напоминающего детские каракули, создает впечатление непрофессионализма и легкомыслия, чего не скажешь, например, о шрифте с засечками вроде Times New Roman. Визуальная составляющая шрифта передает сообщение, выходящее за рамки буквального смысла написанных на странице слов. Она способна вызывать у пользователей эмоции и при правильном применении задавать визуальный тон всему дизайну даже без помощи дополнительных графических элементов. Можно рассказать целую историю с помощью одного лишь оформления надпи­ сей, и я думаю, что далекие от дизайна люди часто недооценивают важность этого по причине ее недопонимания. В данном случае выбор не сводится к простому «нравится или не нравится» шрифт без засечек, шрифт с засечками, рукописный или декоративный шрифт. Шрифт способен передать серьезность или игривость бренда и задает основной тон всему пользовательскому опыту даже в самых незначительных случаях.

8.1. Основы типографики Перед тем как приступить к выбору шрифта для проекта, полезно разобраться с терминологией. Существуют различные классификации шрифтов, и каждая из их крупных категорий имеет особый характер, способный повлиять на выбор. Любой шрифт предусматривает различные стили и веса, что может усложнить процесс выбора, особенно если вы работаете с большим шрифтовым семейством.

Глава 8. Использование типографики на веб-сайте  203

8.1.1. Различие между гарнитурой и шрифтом Термины «шрифт» и «гарнитура» имеют различные значения, хотя часто используются как синонимы. Гарнитурой называется набор символов, например Avenir или Helvetica, а шрифт существует внутри гарнитуры. Одна гарнитура может предусматривать множество различных шрифтов. Под шрифтами понимаются варианты гарнитуры, имеющие различия в весе, размере и стиле начертания. Для проектов сначала выбираются гарнитуры, а затем конкретные шрифты внутри них. Скорее всего, вы не будете использовать всю гарнитуру, поскольку некоторые из них могут предусматривать 18 и более шрифтов. Чтобы наглядно увидеть разницу между гарнитурой и шрифтом, рассмотрим сайт библиотеки шрифтов Google, где вы можете выбрать гарнитуры для своих проектов (рис. 8.2).

Рис. 8.2. Здесь показана гарнитура Open Sans и предусмотренные в ней шрифты. Я часто использую шрифт Open Sans Regular 400 в своих веб-проектах, когда оказывается нужен читаемый шрифт для оформления основного текста

8.1.2. Различные классификации шрифтов На самом высоком уровне шрифты делятся на четыре основные категории: шрифты с засечками, шрифты без засечек, рукописные и декоративные шрифты. Помимо этих четырех основных категорий существует несколько подклассов шрифтов, но их обсуждение выходит за рамки данной главы. Четыре основные категории помогают сгруппировать гарнитуры, обладающие схожими характеристиками. При выборе гарнитур для проекта полезно понимать особенности

204  Часть III. Элементы визуального дизайна каждой категории и отдавать предпочтение тем, которые лучше всего соответствуют тону передаваемого посетителю сообщения.

Шрифты с засечками Шрифты с засечками получили свое название благодаря коротким линиям на концах более длинных штрихов (рис. 8.3). Эти короткие линии и называются засечками. Шрифты с засечками существуют уже более тысячи лет. Их использовали еще древние римляне, когда высекали слова на камне.

Рис. 8.3. Засечками называются короткие линии, отходящие от основных штрихов,    составляющих букву

Шрифты с засечками использовались в первых печатных станках, изобретенных в пятнадцатом веке, а в наши дни подобные начертания продолжают применяться для печати газет и книг. Они исключительно хорошо подходят для оформления текста, составляющего основное содержимое страницы. Однако современные инструменты предусматривают шрифты без засечек, которые читаются так же легко, как и шрифты с засечками. В нынешних условиях изобилия доступных вариантов выбор шрифта зависит от того, какие ощущения он вызывает. Шрифты с засечками, как правило, придают проекту более профессиональный и строгий вид. На моей первой постоянной работе в качестве дизайнера владельцы компании наняли стороннее агентство для редизайна нашего сайта. Будучи сотрудниками технологического стартапа, мы хотели показать свою современность и при этом профессионализм. На одном из макетов наш сайт был оформлен с использованием шрифтов с засечками. Я отметила, что этот вариант не выглядит современным и не создает впечатления технологического стартапа; финансовый директор сравнил варианты со шрифтами без засечек и с засечками и согласился со мной. Существуют ли более современные шрифты с засечками или способы придать старым шрифтам современный вид? Безусловно! Обычно я обращаюсь к определенным печатным изданиям, чтобы получить представление о том, как можно использовать шрифты с засечками в современных условиях; одним из моих любимых источников информации является журнал Vogue. Лучший способ понять, как использовать шрифт, — изучить то, что уже было сделано другими, и опираться на эти примеры для принятия нестандартных решений. Однако шрифты с засечками можно использовать и более традиционным способом, если

Глава 8. Использование типографики на веб-сайте  205

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

Шрифты без засечек Как уже наверняка стало понятно, шрифты без засечек отличаются от описанных выше шрифтов отсутствием коротких линий на концах основных штрихов, образующих буквы. Если в древности такие шрифты использовались для письма на табличках, то в полиграфии они стали применяться только в восемнадцатом веке. Они часто использовались для оформления рекламных объявлений, но обрели популярность только в 1920-х годах, когда стали разрабатываться дизайны стиля модерн. Поскольку буквы были трудно различимы в больших блоках текста, шрифты без засечек использовались в печати относительно редко — в основном для оформления коротких строк вроде крупных и жирных заголовков. Как правило, шрифты без засечек предполагают одинаковую толщину всех штрихов, образующих букву, в отличие от шрифтов с засечками, в которых толщина линий может варьироваться. На рис. 8.4 показано сравнение букв с засечками и без них.

Символ шрифта с засечками Baskerville

Символ шрифта без засечек Helvetica

Рис. 8.4. Сравнение шрифтов с засечками и без них. Символ шрифта с засечками, одна сторона которого значительно тоньше другой, имеет большую вариативность штрихов, чем символ шрифта без засечек

206  Часть III. Элементы визуального дизайна Редкое применение шрифтов без засечек в оформлении больших блоков текста в основном было связано с полиграфическими ограничениями; с появлением цифровой типографики шрифты без засечек получили весьма широкое распространение. Они хорошо работают и легко читаются на экране. Например, я использую шрифт Open Sans в оформлении основного текста своего персонального блога. Одно время руководство по юзабилити даже рекомендовало использовать шрифты без засечек в качестве предпочтительного стиля для обеспечения удобочитаемости веб-контента. В настоящее время благодаря усовершенствованию технологии отображения информации на экране в цифровом пространстве появилось гораздо больше свободы для использования шрифтов как с засечками, так и без них. Однако, как и при принятии любых других дизайнерских решений, важно учитывать интересы целевой аудитории пользователей, а также впечатление от бренда, которое шрифт должен передать. На экранах с низким разрешением шрифты с засечками могут слегка искажаться, поэтому, если продукт или сайт в основном ориентирован на обладателей устройств с относительно низким разрешением, следует оценить отображение создаваемого дизайна на подобном устройстве. Если необходимо показать, что бренд идет в ногу со временем, то шрифт без засечек — именно то, что нужно. Шрифты без засечек, как правило, придают дизайну более современное звучание и создают впечатление чистоты. Зачастую они предусматривают широкий диапазон стилей начертания, от ультратонких до жирных, что предоставляет множество возможностей для создания нужного впечатления от проекта.

Рукописные шрифты Рукописные шрифты — это шрифты, имитирующие человеческий почерк. Их стили могут варьироваться от предельно официального, как на рис. 8.5, до весьма легкомысленного, как на рис. 8.6. С ростом популярности рукописных писем в последние несколько лет более жирные шрифты непринужденного очертания стали широко использоваться при оформлении веб-сайтов, декораций и приглашений на такие мероприятия, как свадьбы.

Рис. 8.5. Более традиционный шрифт, имитирующий    человеческий почерк

Глава 8. Использование типографики на веб-сайте  207

Рис. 8.6. Более современный, игривый шрифт с крупными штрихами, напоминающими    мазки кисти

Спектр проектов, в которых использование таких шрифтов является уместным, несколько ограничен. Чаще всего я встречала их на свадебных сайтах, сайтах фотографов-фрилансеров и блогеров (включая мой собственный блог о стиле). Рукописными шрифтами, как правило, оформляются только крупные заголовки и названия, их ни в коем случае не следует использовать для оформления основного текста. Из-за высокой детализации таких шрифтов и ограниченного размера пространства, отведенного на сайте под основной текст, большие текстовые фрагменты, оформленные такими шрифтами, могут оказаться очень трудночитаемыми. Лучше всего приберечь их для крупных и коротких строк. Например, в своем блоге о стиле я оформляю заголовки разделов, комбинируя шрифты без засечек с рукописными шрифтами, как показано на рис. 8.7. Я использую минимальное количество рукописных символов, чтобы подчеркнуть название раздела. На рис. 8.7 показан заголовок раздела Shop Favorites (Фавориты продаж) с акцентом на слове Favorites, указывающем на отобранные мной товары. Данный заголовок также создает иерархию страницы, поскольку такое оформление встречается на ней неоднократно.

Рис. 8.7. Сочетание шрифта без засечек и жирного рукописного шрифта в оформлении заголовков разделов в блоге о стиле

208  Часть III. Элементы визуального дизайна При прокрутке вниз до раздела Latest Posts (Последние записи) (рис. 8.8) отмечается тот же стиль оформления, не похожий ни на какую другую типографику на странице. Благодаря жирному начертанию он направляет взгляд по странице, явно указывая на новый раздел.

Рис. 8.8. Использование на странице одного и того же стиля заголовков позволяет четко обозначить ее разделы

Рукописные шрифты встречаются реже, чем шрифты без засечек и с засечками, но они обладают несомненным достоинством — придают веб-странице индивидуальность. В зависимости от вида продаваемого продукта или типа сайта (например, блог) их использование может оказаться вполне уместным. Как всегда, если вы не уверены в своем выборе, протестируйте несколько вариантов дизайна с участием пользователей, чтобы получить от них обратную связь.

Декоративные шрифты Декоративные шрифты предусматривают орнаменты, украшения или другие виды оформления, которые делают их уникальными. На заре появления

Глава 8. Использование типографики на веб-сайте  209

LiveJournal и Myspace, когда я только осваивала программу Photoshop, мне особенно нравились шрифты в стиле гранж (рис. 8.9).

Рис. 8.9. Этот декоративный шрифт отличается грубоватым начертанием каждой буквы, и из-за особенностей стиля его нельзя отнести ни к одной из классических категорий шрифтов

Существуют весьма обширные подкатегории декоративных шрифтов. Декоративные шрифты, как и рукописные, не стоит использовать для оформления основного текста, а для заголовков их следует применять в относительно редких случаях. Эти шрифты больше подходят для оформления сайтов новинок или сайтов, посвященных каким-либо мероприятиям, например выставкам комиксов или музыкальным фестивалям. Они имеют свое место в дизайне, но обычно используются только для создания сайтов особой тематики. Если вы создаете приложение, то вместо декоративных шрифтов я бы рекомендовала вам использовать шрифт без засечек, который легко читается на небольших экранах. Чтобы посмотреть новые варианты декоративных шрифтов, загляните в раздел Novelty на сайте Font Squirrel (www.fontsquirrel.com/) или посетите сайт 1001 Fonts (www.1001Fonts.com) и обратитесь к категории Decorative.

8.1.3. Стили и вес шрифтов Каждое семейство шрифтов предусматривает несколько стилей начертания, начиная с курсивного и наклонного и заканчивая тонким и полужирным. Эти различающиеся стили часто используются для выделения слов. В зависимости от того, какой акцент вы хотите сделать, вы можете выбрать курсивное (наклонное) или полужирное начертание.

Курсив и наклонное начертание Несмотря на то что курсивный и наклонный стили начертания относятся к наклонным шрифтам, между ними существуют некоторые стилистические различия. Курсив больше напоминает рукописный шрифт, и его символы немного отличаются от символов обычной версии шрифта, как показано на рис. 8.10. Наклонные шрифты представляют собой просто наклоненные версии первоначальных шрифтов и не предусматривают никаких различий в дизайне символов помимо наклона. На рис. 8.11 показан наклонный шрифт из того же семейства шрифтов, что и на рис. 8.10.

210  Часть III. Элементы визуального дизайна Рис. 8.10. Курсив — это не просто наклонная версия шрифта. Он предусматривает элементы дизайна, делающие его похожим на человеческий   почерк

Рис. 8.11. Наклонный шрифт представляет собой просто наклоненную версию   исходного шрифта

Некоторые шрифты предлагают как курсивное, так и наклонное начертание, хотя для шрифтов без засечек истинный курсив разрабатывается редко. Выбор между курсивным и наклонным начертанием — это вопрос стилистики. Однако для включения курсивного начертания при написании кода следует учитывать некоторые нюансы. Если вы хотите использовать курсив для создания акцента, то подходящим HTML-тегом будет . Если курсив используется для передачи другого настроения или выделения определенного текстового фрагмента, например, по идиоматическим, техническим или таксономическим причинам, то следует использовать тег . Если же курсив используется исключительно в стилистических целях, то следует обернуть слово или слова в общий HTML-тег, создать CSS-класс и использовать свойство font-style: italic; в объявлении CSS. При написании кода необходимо стремиться к сохранению семантичности разметки и использовать правильные теги для обеспечения доступности, даже если речь идет о таких, казалось бы, незначительных вещах, как способ отображения определенных слов.

Вес шрифта Большинство шрифтов имеют как минимум два варианта начертания: нормальное и полужирное. Варьирование веса или уровня насыщенности шрифта — это способ привнести контраст в типографику. Особенно это верно в случае жирных шрифтов, которые легко привлекают внимание к определенным словам или строкам текста. Многие семейства шрифтов, которые я предпочитаю использовать в веб-контексте, в среднем предусматривают девять вариантов начертания. Однако я никогда не использую в своем дизайне все девять вариантов, и вам тоже не стоит этого делать. Использование такого большого количества вариантов начертания может привести к несогласованности дизайна сайта или приложения. Кроме того, вам будет

Глава 8. Использование типографики на веб-сайте  211

сложно поддерживать руководство по стилю, в котором обычно указывается, где и какие именно шрифты необходимо использовать. Да и с точки зрения производительности это плохая идея. Загрузка девяти шрифтов будет занимать много времени и приведет к увеличению размера файлов сайта, поэтому придерживайтесь минималистичного подхода и выбирайте шрифты осознанно. Обычно я использую три шрифта: один для оформления основного текста, один для крупных заголовков и еще один для небольших заголовков и фрагментов, которые должны выделяться на фоне основного содержимого. Эти шрифты могут относиться к одной и той же гарнитуре, однако я обычно использую одну гарнитуру для основного текста и другую для всего остального. При наличии девяти вариантов начертания можно использовать одну гарнитуру и выбрать из нее три различающихся по весу шрифта, обеспечивающих достаточный контраст. Шрифты с несколькими уровнями насыщенности обычно предусматривают систему нумерации в диапазоне от 100 до 900 с шагом 100, соответствующим тому или иному варианту начертания (табл. 8.1). Таблица 8.1. Уровни насыщенности шрифтов и их общепринятые названия 100

Тонкий

200

Сверхсветлый

300

Светлый

400

Нормальный (стандартный)

500

Средний

600

Полужирный

700

Жирный

800

Сверхжирный

900

Тяжелый

Вышеперечисленные значения используются при написании кода CSS для указания нужного веса шрифта с помощью свойства font-weight. Если вы хотите использовать на сайте сверхжирный шрифт для оформления небольших надпи­ сей на сайте, то после указания семейства шрифтов можете добавить фрагмент font-weight: 800; в соответствующий раздел кода CSS. При выборе стиля начертания старайтесь использовать менее жирные варианты для оформления крупного текста, поскольку мелкий текст, оформленный таким образом, читать гораздо труднее. Жирный шрифт можно использовать как для мелких, так и для крупных надписей, однако при этом следует учитывать, какая часть текста будет выделена таким шрифтом, поскольку жирный шрифт

212  Часть III. Элементы визуального дизайна привлекает внимание за счет создаваемого им контраста. Что касается семантической разметки, то для более светлого текста семантического HTML-тега не предусмотрено. В отличие от курсива или полужирного начертания, светлое начертание не имеет альтернативного значения и выполняет чисто эстетическую функцию. Для создания полужирного шрифта можно использовать два тега: и . Если вы хотите привлечь внимание к определенному слову или словам, используйте тег . Если же вы хотите указать, что определенное слово или слова имеют большую важность по сравнению с остальным текстом, рекомендую использовать тег . Наглядный пример семантического обращения к тегу показан на рис. 8.12.

Рис. 8.12. Текст, выделенный жирным шрифтом, имеет огромное значение, и выделение в данном случае служит    именно для передачи этой важности

Подобно тому как курсив может использоваться исключительно в эстетических целях, можно использовать полужирные шрифты, семантически не различая их в коде. Для этого используйте свойство font-weight в коде CSS, оберните слово или слова в общий HTML-тег и примените к нему CSS-класс.

8.2. Выбор шрифта для веб-проекта Типографика передает информацию о вашем бренде, выходящую за рамки его словесного описания. Она обладает собственной индивидуальностью и голосом. Дизайн выбранного шрифта рассказывает визуальную историю, которая должна вписываться в общее повествование о бренде и продукте. При огромном количестве вариантов выбор подходящего шрифта для проекта может оказаться весьма нелегкой задачей. Однако существует несколько факторов, связанных с восприятием вашего проекта. Учет этих факторов позволяет сократить количество рассматриваемых вариантов.

8.2.1. Характеристики хорошего веб-шрифта Если набрать в строке поисковой системы фразу «бесплатные шрифты», то одним из первых результатов в списке, скорее всего, будет сайт www.1001freefonts. com, который предоставляет 65 000 бесплатных шрифтов, и  www.dafont.com, на котором представлено 63 000 бесплатных шрифтов. Выбрать несколько шрифтов для проекта из такого огромного количества сложно даже мне. Однако

Глава 8. Использование типографики на веб-сайте  213

поскольку мы работаем над веб-сайтом или веб-приложением, нам нужны именно бесплатные шрифты, которые можно использовать во Всемирной паутине. Таким образом, сразу сокращаем количество вариантов, поскольку, скорее всего, из этих 63 000 шрифтов далеко не все будут оптимизированы для использования в веб-контексте, и многие из них более уместны в дизайне печатной продукции.

Что следует учитывать при выборе шрифта При выборе шрифта для веб-сайта главным критерием является его удобочитаемость и разборчивость при том размере текста, который предполагается использовать. Чем труднее будет его прочитать, тем выше вероятность того, что пользователи покинут сайт. Как было сказано в предыдущем подразделе главы, для оформления длинных фрагментов основного текста следует выбирать шрифты без засечек или с засечками и избегать использования декоративных шрифтов. Выбирайте разборчивый шрифт, обеспечивающий достаточный контраст на странице, чтобы пользователи могли быстро просканировать ее и найти нужную им информацию. Не уверены в разборчивости выбранного вами шрифта? Проведите тестирование с участием пользователей или с использованием устройства с низким разрешением. Тестирование — самый лучший способ убедиться в правильности сделанного выбора. При выборе шрифта также важно учитывать вопросы, связанные с лицензированием. Несмотря на то что на сайте 1001freefonts.com представлено 65 000 бесплатных шрифтов, возможность их встраивания и использования на сайте ничем не гарантируется. По этой причине я предпочитаю использовать библиотеку бесплатных веб-шрифтов Google Fonts (https://fonts.google.com/) и Font Squirrel (https://www.fontsquirrel .com/), особенно если требуется нечто более причудливое для оформления персонального проекта. Подборка шрифтов Font Squirrel предусматривает различные типы лицензий, но при этом она ссылается на владельца или дизайнера шрифта, что позволяет убедиться в том, что у вас есть право на его использование на своем сайте. Каталог шрифтов Google Fonts содержит контент с открытым исходным кодом, поэтому, выбирая шрифты из этой библиотеки, вы можете быть уверены в том, что они доступны для использования и оптимизированы для веб-контекста. Кроме того, в Google Fonts появились вариативные шрифты, которые еще лучше подходят для Всемирной паутины.

Вариативные шрифты Вариативные шрифты представляют собой расширение формата OpenType, позволяющее хранить все варианты начертаний в одном файле. Вместо того чтобы выбирать один или два уровня насыщенности шрифта, например 400 (нормальный) и 700 (жирный), вы можете использовать вариативный шрифт, предоставляющий вам доступ ко всем вариантам начертания в диапазоне между 400 и 700. Если вариант 400 (нормальный) покажется мне слишком светлым,

214  Часть III. Элементы визуального дизайна а 500 (средний) — более жирным, чем мне нужно, я могу выбрать значение 430, чтобы немного увеличить жирность и настроить шрифт в соответствии со своими потребностями. Преимущество вариативных шрифтов заключается в том, что, как уже указывалось, все варианты начертания содержатся в одном файле. При использовании обычных веб-шрифтов необходимо указывать в коде ссылку на их отдельные файлы, а включение слишком большого количества шрифтов может негативно сказаться на производительности. Не каждый веб-шрифт является вариативным, но если вы ищете хорошую типографику с широким набором параметров и при этом обладающую высокой производительностью, прежде всего стоит обратиться на сайт Google Fonts и отфильтровать там вариативные шрифты.

8.2.2. Сопряжение шрифтов и гарнитур Сопряжение шрифтов предполагает создание целостного типографического набора, который помогает определить иерархию на странице, направляет внимание пользователей и передает тон и индивидуальность бренда. Существует не только бесконечное множество шрифтов, но и бесконечное количество вариантов их сочетания. Далее описано несколько способов сопряжения шрифтов, которые помогут принимать решения по подбору.

Использование одного и того же семейства шрифтов Один из самых простых способов сопряжения шрифтов состоит в использовании разных шрифтов из одной гарнитуры или разных гарнитур из одного и того же шрифтового суперсемейства. Суперсемейство объединяет гарнитуры, имеющие одинаковый базовый дизайн и включает некоторые особенности, добавленные для создания новой классификации. Например, для добавления такой особенности можно попробовать получить шрифт с засечками из шрифта без засечек. На рис. 8.13 представлены шрифты Roboto и Roboto Slab из одного суперсемейства, которые хорошо сочетаются друг с другом.

Рис. 8.13. Шрифты Roboto Slab и Roboto принадлежат к одному суперсемейству Roboto и хорошо сочетаются друг    с другом

Глава 8. Использование типографики на веб-сайте  215

Шрифт Roboto Slab относится к так называемым брусковым шрифтам, представляющим собой подкласс шрифтов с засечками, и лучше подходит для оформления заголовков. А шрифт без засечек Roboto желательно использовать для основного текста. Каждое семейство шрифтов также предусматривает несколько вариантов весов и стилей, поэтому вы можете варьировать жирность заголовков для обеспечения большего контраста с основным текстом, как показано на рис. 8.14.

Рис. 8.14. Когда мы увеличиваем жирность шрифта Roboto Slab, иерархия становится более очевидной, а шрифты еще лучше    сочетаются друг с другом

Если у вас нет набора гарнитур, принадлежащих к какому-то суперсемейству, то вы можете поискать пару сочетающихся шрифтов в одном семействе, преду­ сматривающем большое количество стилей и уровней насыщенности. При оформлении фрагмента на рис. 8.15 я выбрала семейство шрифтов Fira Sans и использовала стиль 400 (нормальный) для основного текста и 800 (сверхжирный) для заголовка.

Рис. 8.15. Можно сочетать очень разные по весу шрифты из одного и того же семейства, предусматривающего несколько уровней    насыщенности

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

216  Часть III. Элементы визуального дизайна насыщенности. В противном случае заголовки и основной текст могут сливаться, как на рис. 8.16. Одинаковый по весу с текстом заголовок, несмотря на больший размер, не создает того иерархического эффекта, какой мог бы создать более жирный шрифт из этого семейства.

Рис. 8.16. При сопряжении различных шрифтов одной и той же гарнитуры следует убедиться, что они достаточно сильно различаются по размеру и стилю начертания. В противном случае иерархия не будет    достаточно очевидной

Сочетание шрифтов из различных категорий Другой способ сопряжения шрифтов предполагает сочетание гарнитур, относящихся к различным категориям и семействам: например, шрифт без засечек и с засечками, без засечек и декоративный, рукописный и с засечками и т. д. В данном случае контраст обеспечивается разницей в форме букв. На рис. 8.17 шрифт Pacifico сочетается со шрифтом без засечек Red Hat Display.

Рис. 8.17. Шрифт без засечек с большим количеством округлых букв хорошо сочетается с игривым рукописным шрифтом

   При выборе шрифтов важно продумать тон и смысл сообщения, которое вы хотите передать на сайте. Если это что-то легкомысленное, как на рис. 8.17, то оба шрифта должны привносить элемент игривости. На рис. 8.18 я заменила шрифт без засечек на более формальную гарнитуру Source Sans Pro, которая тоже работает, но не так хорошо, как Red Hat Display с ее более округлыми символами.

Глава 8. Использование типографики на веб-сайте  217

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

Рис. 8.18. Более официальный шрифт без засечек. Он предусматривает символы поуже и менее округлые, при этом кажется слишком строгим и формальным. Мы стремимся передать атмосферу веселья с помощью обоих шрифтов, даже если один из них является более при   глушенным, как на рис. 8.17

Сочетание шрифтов из одной и той же категории Те же правила действуют и при сочетании шрифтов из одной категории. Ищите шрифты, которые, несмотря на принадлежность к одной категории, выглядят совершенно по-разному, поскольку мы всегда стремимся к контрасту. Рассмотрим вариант сочетания шрифтов с засечками. Для оформления текстового фрагмента на рис. 8.19 я использовала шрифты Playfair Display и Merriweather.

Рис. 8.19. Вы можете сочетать гарнитуры из одной и той же категории, однако при этом следует выбирать шрифты с различными начертаниями символов для создания иерархии    и контраста

Шрифт Playfair Display имеет более жесткие засечки и линии, чем Merriweather. Упомянутая характеристика создает контраст и является хорошим поводом для создания пары из этих шрифтов. Теперь рассмотрим пример сочетания шрифтов без засечек. При оформлении текстового фрагмента на рис. 8.20 я выбрала семейство шрифтов Raleway для заголовка и Nanum Gothic для основного текста.

218  Часть III. Элементы визуального дизайна

Рис. 8.20. Как и при использовании шрифтов с засечками, выбирая два шрифта без засечек, следует отдавать предпочтение контрастным стилям начертания букв для достижения наилучшего    эффекта

Символы шрифта Raleway имеют более широкую и округлую форму по сравнению с символами шрифта Nanum Gothic. Этот контраст опять же позволяет создать естественную иерархию на странице.

8.2.3. Создание набора параметров шрифта Набор параметров шрифта (type ramp) содержит рекомендации по использованию шрифтов того или иного семейства, размера и стиля на сайте или в вебприложении. Этот набор правил обеспечивает упорядоченность и целостность сайта. Каждая его страница рассказывает часть общей истории и должна производить впечатление принадлежности к остальному сайту. Если я просматриваю описание товаров на сайте, а заголовок и основной текст отличаются по размеру от текста на странице, с которой я только что перешла, то это покажется мне нелогичным и, откровенно говоря, даже небрежным. Я часто сталкиваюсь с подобным, когда просматриваю описания книг на сайте Amazon.com. До сих пор не понимаю, почему некоторые страницы книг имеют более новую версию макета, чем другие. Когда я вижу один и тот же макет шесть или семь раз и внезапно сталкиваюсь с новым его вариантом, это вызывает у меня раздражение и заставляет перестраиваться, чтобы найти нужную информацию. Схожие между собой страницы должны быть оформлены в общем стиле, особенно это касается используемых на сайте шрифтов. Любой браузер уже предусматривает набор параметров шрифтов, используемых по умолчанию. Если создать в HTML-документе список элементов заголовков с  по без указания стилей и загрузить его в браузер, то он отобразит эти элементы с использованием своих стандартных параметров. Каждый заголовок имеет свой размер, который постепенно уменьшается по мере снижения его важности или заметности. Заголовок является наиболее заметным, а заголовок  — наименее заметным.

Глава 8. Использование типографики на веб-сайте  219

Мне еще ни разу не приходилось использовать все шесть тегов заголовков на странице, и с семантической точки зрения, когда речь идет о коде, эти теги заголовков являются лишь частью набора параметров шрифта. Дизайнер не станет использовать элемент для обертывания абзацев основного текста, поскольку этот элемент сообщает браузеру и экранным считывающим устройствам о том, что речь идет о заголовке раздела. Как же создать набор параметров шрифтов для сайта? Потребности в шрифтах варьируются от проекта к проекту, однако следует предусмотреть шрифты как минимум для следующих элементов: заголовок; подзаголовок; раздел; подраздел; основной текст; подпись. Заголовки, подзаголовки, разделы и подразделы будут соответствовать HTMLэлементам –, основной текст — элементу

, а подписи — тегу . Любые другие стили, которые могут понадобиться, скорее всего, будут применяться к элементу

с помощью CSS-класса. При написании кода CSS для набора параметров шрифта HTML-тег и соответствующий CSS-класс часто объединяются в пары, например , .heading, что позволяет применять стили заголовка к шрифту, который семантически не связан с элементом .

8.2.4. Задание размеров шрифтов При определении набора параметров шрифтов в коде CSS с использованием одних лишь HTML-элементов можно использовать размеры шрифтов, предлагаемые браузером по умолчанию. Однако при использовании CSS-классов придется задать эти размеры в своем CSS-коде. При этом очень важны числовые значения, которые вы выбираете для задания размеров шрифта. Такие пиксельные значения, как font-size: 16px;, запретят пользователям изменить размер шрифта в браузере при необходимости, например по причине плохого зрения или усталости глаз. Использование относительных единиц измерения, вроде rem или em, является более предпочтительным, особенно если стоит задача сделать типографику отзывчивой. При выборе размеров шрифта следует отталкиваться от размера основного текста. Обычно размер этого текста варьируется в диапазоне от 16 до 18 пикселей (1–1,125rem, если для font-size задано значение 16px, или 1em в теге ). После того как вы определитесь с размером основного текста, я рекомендую вам

220  Часть III. Элементы визуального дизайна воспользоваться специальным калькулятором для вычисления размеров остальных заголовков вместо того, чтобы рассчитывать их самостоятельно. Например, перейти для этого на сайт Pixels Converter (https://pixelsconverter.com/px-to-rem), указать базовый размер шрифта и поэкспериментировать с различными значениями. При использовании данного калькулятора и базового размера шрифта, равного 16px, вы получите значения, показанные в табл. 8.2. Таблица 8.2. Размеры шрифтов в пикселях и единицах rem Пиксели

Единицы rem

Название элемента страницы

16px

1rem

Основной текст (p)

24px

1,5rem

Подраздел (H4)

32px

2rem

Раздел (H3)

40px

2,5rem

Подзаголовок (H2)

48px

3rem

Заголовок (H1)

Если вам нужна шкала размеров шрифтов, основанная на математических пропорциях, я рекомендую использовать калькулятор Visual Type Scale Calculator (https://type-scale.com/). Этот сайт позволяет выбрать шкалы, в частности, на основе золотого сечения, большой терции и чистой кварты, предусматривает функцию предварительного просмотра, а также генерирует CSS-код для набора параметров шрифтов. Имея дело с типографикой, следует помнить о том, что одинаковых гарнитур не существует. Один шрифт в размере 3rem может выглядеть гораздо крупнее, чем другой, поэтому придется поэкспериментировать с различными значениями калькулятора, чтобы добиться нужных соотношений.

8.2.5. Создание вертикального ритма После определения базового размера шрифта необходимо задать высоту строки текста, которая будет создавать вертикальный ритм сайта. Вертикальный ритм определяет расстояние между всеми элементами на странице. Ваш текст должен быть выровнен вдоль базовой линии, проходящей по нижнему краю символов без учета нижних выносных элементов. Пример выравнивания текста вдоль базовой линии показан на рис. 8.21. Очень часто на сайтах высота строки составляет 150 % или 1,5em от высоты базового шрифта. Такое значение облегчает расчеты для остальных элементов системы шрифтов и создание вертикального ритма, поскольку мы можем вычислить высоту строки, просто умножив размер шрифта на 1,5 для получения

Глава 8. Использование типографики на веб-сайте  221

значения в пикселях. Еще одним преимуществом использования значения 150 % в качестве высоты строки является доступность. Согласно Руководству по обеспечению доступности веб-контента (WCAG) версии 2.1, минимальная высота строки основного текста должна составлять 1,5em. Что касается заголовков с более крупным шрифтом, высота строки может быть уменьшена до 120–140 %, так как значение 150 % создает слишком большой интервал между строками многострочных заголовков.

Рис. 8.21. Текст, выровненный вдоль базовой линии высотой 24px

В предыдущем разделе мы задали размер базового шрифта 16px, или 1em. Пиксельное значение высоты строки, которое мы получаем путем умножения размера шрифта в пикселях на высоту строки в единицах em (в нашем случае 16px × 1,5em), представляет собой число, на котором и будет основан вертикальный ритм. Оно помогает вычислить величину полей, отступов и высоту строк для шрифтов разного размера. Если вы используете для этого специальный инструмент, обращайте внимание на высоту строки для базового шрифта, поскольку это число будет использоваться при расчете величины полей и отступов для текста и изображений на странице. Для начала вы можете задать размер верхнего и нижнего полей для текстовых элементов равным 24px. На рис. 8.22 показано, как это выглядит. Обратите внимание на то, что браузер не отсчитывает величину поля от верхнего или нижнего выносного элемента букв, о чем свидетельствуют инструменты разработчика на рис. 8.23. Однако если посмотреть на рис. 8.22, то можно заметить, что никакой проблемы в этом нет: шрифт по-прежнему выровнен вдоль базовой линии, и, хотя заголовок выровнен по верхнему краю, он все равно находится в пределах сетки. Шрифт может не всегда попадать непосредственно на базовую линию, но пока он находится между этими линиями, ритм сохраняется.

222  Часть III. Элементы визуального дизайна

Это заголовок и мы тестируем высоту строки

Рис. 8.22. Поле величиной 24px применяется как к заголовку, так и к абзацам, что обеспечивает равномерное распределение содержимого по странице

Это заголовок и мы тестируем высоту строки

Рис. 8.23. При выделении текста в инструментах разработчика видно, что величина полей, акцентированных оранжевым цветом, не отсчитывается непосредственно от верхних или нижних краев букв

Глава 8. Использование типографики на веб-сайте  223

Предположим, для уменьшения интервала между строками многострочного заголовка была выбрана меньшая высота строки. Рассмотрим пример расчета величины полей и отступов для этой ситуации. На рис. 8.24 используются шрифты того же размера, что и на рис. 8.22. Размер основного текста по-прежнему равен 16px при высоте строки 1,5em, поэтому вертикальный ритм по-прежнему основан на значении 24px. Размер шрифта заголовка равен 48px. Будем использовать

Это заголовок и мы тестируем высоту строки

Это заголовок и мы тестируем высоту строки

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

224  Часть III. Элементы визуального дизайна высоту строки, равную 1,25em, чтобы получить число 60px, с которым довольно легко работать. Однако 60 не кратно 24, поэтому нужно добавить поля и отступы, чтобы вписаться в базовую сетку, основанную на значении 24. Следующим числом, кратным 24, является 72, но учитывая то, что высота строки составляет 60px, величина полей или отступов ограничивается значением 12px. Поэтому переходим к следующему числу, кратному 24, которое равно 96px. Вычитая 60px из 96px, мы получаем 36px. Итак, в примере на рис. 8.24 добавляем верхнее поле 24px и нижний отступ 12px, чтобы получить 36px для выбранного заголовка. Эти величины согласуются с числом 96px, кратным 24, и дают обоснование значениям полей и отступов. Расстояние между абзацами, расположенными под одним и тем же заголовком, должно составлять 1,5em, — полный интервал, соответствующий числу, лежащему в основе вертикального ритма. Как уже упоминалось при обсуждении принципов дизайна в главе 2, расстояние помогает установить взаимосвязи, поэтому желательно, чтобы абзацы, находящиеся под одним и тем же заголовком, были смещены чуть ближе друг к другу. В идеале расстояние между ними не должно превышать высоту строки. Элементы, расположенные дальше друг от друга, создают такое впечатление, будто они не являются частью одной группы, поэтому будьте осторожны при выборе интервалов между абзацами. Вместо этого лучше сосредоточьтесь на интервалах между группами содержимого. Добавьте интервалы между такими основными блоками контента, как заголовок, абзацы и любые медиафайлы, чтобы каждый из них выделялся на фоне остальных групп содержимого. Определение формулы вертикального ритма позволяет организовать поток контента, создающий ощущение упорядоченности. Это придает сайту дополнительный лоск и делает его контент более удобным для восприятия, что важно по многим причинам. Все, о чем было сказано, облегчает сканирование содержимого и увеличивает его доступность для посетителя сайта, однако обеспечение удобочитаемости не сводится к одному лишь выбору подходящей высоты строк.

8.2.6. Обеспечение удобочитаемости Удобочитаемость определяет то, насколько легко или трудно людям читать и понимать текст, находящийся у них перед глазами. Неудачный выбор шрифтов может помешать восприятию текста на сайте или в приложении, а мы хотим, чтобы людям было легко пользоваться нашими веб-продуктами. Выше мы обсудили высоту строки и теперь знаем, что недостаточное расстояние между строками представляет собой проблему доступности, о которой говорится в руководстве

Глава 8. Использование типографики на веб-сайте  225

WCAG. Помимо этого, есть еще несколько моментов, о которых следует подумать для обеспечения удобочитаемости текста на сайте.

Длина строки Существует оптимальная длина строки текста. Ведь строка может быть слишком широкой или слишком узкой, а нас интересует золотая середина между этими крайностями. В различных источниках оптимальная длина строки варьируется от 45 до 70 символов. Короткая строка позволяет людям быстрее просмотреть содержимое, в то время как на длинных строках, как правило, труднее сосредоточиться. Ограничьте ширину колонок или задайте значение max-width для заголовков и абзацев.

Межбуквенный интервал С помощью CSS-свойства letter-spacing можно регулировать горизонтальный интервал между буквами в слове или блоке текста. В некоторых случаях необходимо увеличить расстояние между буквами, чтобы заполнить ими всю строку, или уменьшить его, чтобы последнее слово не переносилось на следующую строку. Такие корректировки должны быть минимальными. Слишком сильное изменение межбуквенного интервала в ту или иную сторону понижает удобочитаемость блока текста, что негативно сказывается на пользовательском опыте (рис. 8.25). Внесите небольшие изменения в расстояние между буквами, если считаете, что это повысит удобочитаемость. Но единой рекомендации, насколько полезными будут эти изменения, дать нельзя: шрифты очень отличаются друг от друга. Лучше всегда проводить тестирование с участием пользователей или получить обратную связь от нескольких людей, если не уверены в правильности выбранного интервала. Текст со слишком маленьким интервалом между буквами может сливаться и сбивать читателя с толку. Те к с т с о с л и ш к о м б ол ь ш и м интервалом между буквами также м ож ет в ы з ы ват ь п р о бл е м ы , т р ебуя слишком много времени для чтения.

Рис. 8.25. Чрезмерное увеличение или уменьшение межбуквенного интервала может негативно сказаться на удобочитаемости текста

226  Часть III. Элементы визуального дизайна Упражнение: сопоставление шрифта и передаваемого им настроения Посмотрите на различные шрифты на представленном ниже изображении, а затем оцените последующий список определений. Какое настроение передает каждый из шрифтов? Какие эмоции он у вас вызывает?

Шрифты могут передавать различное    настроение. Вот некоторые из впечатлений, создаваемых разными шрифтами (к каждому из шрифтов может быть применимо более одного описания): причудливый; дружелюбный; классический; современный; формальный; смелый; приветливый; стильный. EB Garamond — это шрифт с засечками, имеющий классический и официальный характер. Museo Slab относится к брусковым шрифтам. Несмотря на то что это подтип шрифтов с засечками, он является менее официальным по сравнению с другими шрифтами этой категории, поэтому он кажется более дружелюбным, но в то же время смелым. Рукописный шрифт Madre кажется приветливым и причудливым, а Montserrat — современным и стильным.

Глава 8. Использование типографики на веб-сайте  227

Резюме Выбор шрифта является одним из мощнейших аспектов визуального дизайна, поскольку в зависимости от выбранной гарнитуры может измениться смысл передаваемого сообщения. Неформальный текст может стать формальным. Текст ласкового сообщения может приобрести зловещий смысл. И все из-за выбранного шрифта. Разработчики могут использовать бесплатные инструменты для подбора шрифтов, способных придать сайту или веб-приложению современный вид. Основными категориями шрифтов являются шрифты с засечками, шрифты без засечек, декоративные и рукописные шрифты, хотя существуют и другие подклассы. Шрифты с засечками, как правило, имеют более официальный и классический вид. Шрифты без засечек кажутся более современными. Декоративные шрифты способны передавать самые разные эмоции, но, как правило, производят впечатление новизны. Рукописные шрифты часто используются при оформлении свадеб и на сайтах фотографов, то есть там, где необходимо подчеркнуть индивидуальность. Ключевым моментом при выборе шрифтов является понимание того, какое настроение и эмоции должен передавать бренд. При выделении слов жирным и курсивным начертанием следует учитывать доступность и семантику. Используя курсив или полужирный шрифт исключительно в эстетических целях, убедитесь в том, что вы выбрали правильный HTML-тег или применили стили с помощью CSS-класса к общему HTML-тегу. Сочетание шрифтов позволяет создать визуальную иерархию на странице. Можно объединить гарнитуры из разных суперсемейств и категорий, например, рукописный шрифт со шрифтом без засечек, а также гарнитуры, принадлежащие одной и той же категории. В последнем случае убедитесь в том, что они достаточно сильно различаются между собой для обеспечения ясности. Вертикальный ритм страницы определяет взаимосвязи между различными элементами с помощью интервалов. Задание вертикального ритма привносит математический элемент, который упорядочивает и придает смысл выбранным величинам промежутков. Это определяет сетку и согласованный ритм для всего сайта. Удобочитаемость текста на странице является важнейшим условием обеспечения хорошего пользовательского опыта. Задайте достаточную высоту строки основного текста, не изменяйте межбуквенный интервал слишком сильно и ограничьте длину строки 45–70 символами.

9

Теория цвета

В этой главе 33 Цветовой круг и цветовые отношения. 33 Создание оттенков и соответствующая терминология. 33 Психология цвета. 33 Выбор и применение цветовой схемы с учетом соображений доступности. 33 Различные цветовые режимы и несоответствие цветов на разных экранах.

Если ввести в строку поисковой системы фразу «цветные оптические иллюзии», то можно получить множество результатов, в том числе и такие, которые производят впечатление движущегося изображения. Это иллюзорное движение обусловлено выбором цвета, строением наших глаз и особенностями нашего восприятия. Выбор цветов для создания подобной иллюзии рассматривается в такой дисциплине, как теория цвета. Одной из наиболее известных цветовых оптических иллюзий является иллюзия Адельсона, показанная на рис. 9.1. Из-за тени от предмета, падающей на шахматную доску, клетка A кажется нам темнее клетки B, хотя, если расположить их рядом друг с другом, можно убедиться в том, что они имеют один и тот же цвет.

Глава 9. Теория цвета  229

Рис. 9.1. Оптическая иллюзия Адельсона создает впечатление, будто клетки A и B различаются цветом, хотя это не так. (Изображение предоставлено Эдвардом    Адельсоном по лицензии CC BY-SA 4.0)

Теория цвета — это искусство и одновременно наука, изучающая вопросы применения и восприятия цветов, а также визуальные эффекты, возникающие при их смешении и сочетании, как в случае оптических иллюзий. На самом базовом уровне теория цвета предоставляет определенный набор рекомендаций и правил, которые помогают подбирать цвета с помощью цветового круга. По словам веб-разработчиков, одной из наиболее сложных дизайнерских задач, с которой они сталкиваются, является выбор и применение цветов. Понимание цветового круга и различных отношений между цветами является ключевым фактором при выборе цветов для проекта. Если возникают трудности при выборе цветовой схемы, то обращение к цветовому кругу и различным отношениям между цветами поможет принять правильное решение. Цвет является одним из мощнейших инструментов в дизайне благодаря своей способности влиять на человеческие эмоции, настроение и восприятие, зависящие от личных и культурных отношений с цветом. Один из моих любимых примеров отсылает к взаимодействию с клиентом в рамках работы над одним из проектов. Я разрабатывала сайт для технической программы, ее назначением было помочь ветеранам вооруженных сил США приобрести навыки, необходимые для перехода в сферу технологий после завершения военной карьеры. В одном из первоначальных макетов, который я показала клиенту, тоже бывшему военному, в качестве одного из акцентных цветов использовался ярко-красный. Его отзыв был следующим: «Мне не нравится красный цвет. Он является чрезвычайно агрессивным, особенно в военном контексте». Как дизайнер, я оценила эту обратную связь, поскольку клиент объяснил, почему этот цвет ему не подходит. У каждого человека есть свое мнение и личная реакция на цвет. Некоторым людям тот или иной цвет может просто не нравиться. С обратной связью, основанной на культурном или эмоциональном восприятии цвета, бывает трудно работать. Объяснение причин выбора конкретных цветов для проекта может привести к гораздо более продуктивным дискуссиям с заинтересованными сторонами и целевой аудиторией на этапе тестирования дизайна. Если представители этих сторон просто говорят: «Мне не нравится выбранный вами синий цвет»,

230  Часть III. Элементы визуального дизайна расскажите, почему вы выбрали именно его, и спросите пользователя о том, какие цвета ассоциируются у него с теми эмоциями или чувствами, которые вы пытаетесь передать с помощью своего дизайна. Однако иногда люди просто не приемлют тот или иной предложенный цвет. Поэтому принимайте во внимание отзывы разных пользователей. Если выбранные цвета неоднократно порождают проблемы, пересмотрите свой выбор и проведите еще один этап тестирования. Каждый человек воспринимает цвета по-своему, и, вероятно, именно поэтому выбор цвета является одной из самых сложных задач для разработчиков. В этой главе мы поговорим о том, как облегчить выбор цветов и палитры, основываясь на отношениях между цветами в цветовом круге. Если не считать эмоционального аспекта, цвет также является невероятно мощным инструментом для определения отношений между объектами, для создания контраста и направления внимания пользователя. Выбор палитры — это лишь один из этапов процесса понимания цвета. Вам также необходимо понять, как применить его в своем дизайне, чтобы он не конфликтовал с другими и не создавал ощущения перегруженности. Поэтому в данной главе мы также поговорим о применении цветовой палитры к веб-странице.

9.1. Терминология теории цвета Помимо цветов стандартного цветового круга существует невероятное количество цветовых вариаций. Однако прежде чем погрузиться в изучение отношений основных цветов цветового круга, необходимо ознакомиться с основной терминологией теории цвета, которая поможет лучше понять различные способы комбинирования цветов. С помощью этих терминов затем можно будет не только говорить о цветах, но и создавать вариации цветовых схем, основанных на цветовом круге.

9.1.1. Тень, оттенок и тональность Тени, оттенки и тональности — это различные вариации цвета, полученные путем добавления к нему черного, белого или серого. Тенью (shade) называется результат затемнения цвета путем добавления черного, оттенком (tint) — результат его осветления с помощью белого, а тональностью (tone) — результат его приглушения с помощью серого. Все эти вариации можно добавить в цветовую палитру, чтобы создать более широкий спектр на основе главных цветов сайта. Поскольку тени, оттенки и тональности являются производными от основного цвета в палитре, их можно применять для обеспечения целостности дизайна пользовательского интерфейса, при этом не перегружая его, обращаясь только к приглушенному характеру этих вариаций.

Глава 9. Теория цвета  231

Современные программы позволяют достаточно легко работать с цветами, предназначенными для веб-контекста. Я предпочитаю начинать работу над проектами в приложении Adobe Illustrator, поскольку мне хорошо знаком его интерфейс и в нем довольно легко экспериментировать с цветом. При использовании Adobe Illustrator я начинаю с базового цвета, на основе которого хочу получить тень, оттенок или тональность, и создаю фигуру с этим цветом в качестве заливки. С помощью ползункового регулятора яркости HSB я добиваюсь тени путем добавления черного. Для получения оттенка я снова начинаю с основного цвета и регулирую уровень насыщенности, чтобы сделать цвет светлее путем добавления белого. Результаты моих манипуляций показаны на рис. 9.2.

Базовый цвет

Тень

Оттенок

Рис. 9.2. Базовым цветом является ярко-фиолетовый, за которым следуют более темная тень и более светлый оттенок

9.1.2. Теплые и холодные цвета Цвета вызывают определенные эмоции, настроения и чувства, а разговор об эмоциональной природе цвета обычно начинается с его цветовой температуры. Цвета делятся на теплые и холодные. К теплым относятся красный, оранжевый и желтый, а к холодным — зеленый, синий и фиолетовый. Каждая из этих двух групп вызывает различные эмоции: теплые цвета ассоциируются с радостными и энергичными состояниями, а холодные — с более спокойными и расслабленными. Различные ощущения, вызываемые каждым из цветов, мы рассмотрим чуть позже. Несмотря на то что цвета цветового круга делятся на две группы в соответствии с их температурой, теплые цвета могут иметь более холодные вариации, а холодные — более теплые. Даже серый цвет может быть как более холодным, так и более теплым, как показано на рис. 9.3.

Рис. 9.3. Несмотря на то что серый цвет является нейтральным, он может иметь холодные или теплые оттенки

232  Часть III. Элементы визуального дизайна Теплые цвета сильнее выделяются и привлекают больше внимания, чем холодные. Благодаря этому такие цвета выходят на передний план композиции. Холодные цвета, наоборот, кажутся более отдаленными. Рассмотрим красную кнопку на синем фоне (рис. 9.4). Кажется, будто кнопка расположена поверх синей подложки, но что произойдет, если мы поменяем цвета? Теперь создается впечатление, будто кнопка находится дальше от нас, как бы в некотором углублении. Если посмотреть сверху в глубокую яму в земле, то можно заметить, что количество света уменьшается пропорционально ее глубине, пока он не исчезнет полностью. Такой «отступающий» эффект холодных цветов сильнее проявляется в искусстве, например в живописи, однако его можно заметить и в цифровых пользовательских интерфейсах.

   Рис. 9.4. Красная кнопка слева кажется выступающей на передний план в отличие от синей кнопки справа

В зависимости от цвета теплые оттенки также имеют тенденцию быть более агрессивными и возбуждающими. Красный цвет может оказаться чрезвычайно агрессивным и обычно используется в пользовательских интерфейсах для обозначения чего-то негативного, например отказа, предупреждения или ошибки. Он также может применяться для привлечения внимания к какому-либо элементу, например к значку с уведомлением в пользовательском интерфейсе, оформленном в нейтральных тонах. Хотя более холодный цвет, например зеленый, можно использовать для оформления уведомления о позитивном событии, он не будет так привлекать внимание, как красный. Более холодные цвета можно использовать для обозначения менее важных сообщений, не требующих от пользователя немедленного реагирования.

9.1.3. Тон, насыщенность и светлота При обсуждении цвета часто используется термин «тон» (hue). Под ним понимается чистый или базовый цвет (например, красный из группы основных цветов), к которому не был добавлен ни белый, ни черный или серый для создания оттенков, теней или тональностей. То есть тон — это просто чистый цвет.

Глава 9. Теория цвета  233

Под насыщенностью понимается степень выраженности или интенсивности цвета. На шкале от 0 до 100 значение 100 соответствует максимальной интенсивности. Вы наверняка видели регулятор «Насыщенность» при открытии фотографии в приложении для редактирования изображений. При увеличении насыщенности фотографии все цвета становятся невероятно яркими, а при уменьшении — тусклыми и блеклыми. Разница между насыщенным и ненасыщенным изображением показана на рис. 9.5.

Низкая насыщенность

Оригинал

Высокая насыщенность

Рис. 9.5. Результаты уменьшения и увеличения насыщенности изображения

При создании цветовых схем избыток несбалансированных и конфликтующих друг с другом насыщенных цветов может сделать пользовательский интерфейс неупорядоченным, перегруженным, как будто его создавали дилетанты. Насыщенные цвета можно использовать для создания контраста. Однако чрезмерно насыщенные фотографии способны породить проблемы с контрастом на сайте или в приложении, особенно если попытаться наложить поверх них текст. Выделяясь на фоне остальных элементов интерфейса, они будут постоянно отвлекать внимание пользователей. А если остальной интерфейс в основном оформлен в относительно нейтральных тонах, то из-за своей чрезмерной насыщенности эти изображения могут казаться неуместными. Слишком высокая насыщенность может создать подавляющее впечатление, поэтому дизайнеру лучше не использовать сразу несколько максимально насыщенных цветов до тех пор, пока он не будет чувствовать себя достаточно уверенно при использовании цветовой палитры и создании контраста. Наконец, под светлотой понимается то, насколько светлым или темным является цвет, то есть сколько черного или белого в нем содержится. Светлота относится к теням и оттенкам, о которых мы уже говорили. Увеличение количества белого в цвете делает его светлее вплоть до достижения чистого белого, а уменьшение делает его темнее вплоть до достижения чистого черного. На рис. 9.6 понятия тона, насыщенности и светлоты представлены наглядно. Теперь, когда мы разобрались с основными терминами теории цвета, поговорим о цветовых отношениях и построении цветовых палитр.

234  Часть III. Элементы визуального дизайна Тон

Насыщенность

Светлота/яркость

Рис. 9.6. Тон определяет чистый цвет, насыщенность — степень его интенсивности, а светлота или яркость — то, насколько светлым или темным он является

9.2. Цветовой круг Цветовой круг является основным инструментом теории цвета. Он используется для определения отношений между цветами (рис. 9.7) и представляет собой круговую диаграмму, отображающую весь цветовой спектр. В самом примитивном варианте цветовой круг содержит красный, оранжевый, желтый, зеленый, синий и фиолетовый цвета, хотя его можно разделить так, чтобы он включал цвета, расположенные между основными.

Рис. 9.7. Два цветовых круга с разными уровнями детализации. Слева показан базовый цветовой круг с 12 цветами, а справа —    с 24 цветами

9.2.1. Цветовые отношения Использование цветового круга — это самый простой способ определения отношений между цветами и нахождения их наилучших сочетаний. При этом сочетающиеся между собой цвета могут составлять как пары, так и триады.

Глава 9. Теория цвета  235

Прежде чем переходить к рассмотрению различных цветовых отношений, необходимо разобраться с наборами цветов, составляющих цветовой круг. Существует три основных, или первичных, цвета: красный, желтый и синий. Смешение этих цветов дает множество других компонентов цветового спектра. Вторичные цвета образуются путем смешения двух основных цветов; например, фиолетовый — это вторичный цвет, образованный в результате смешения красного и синего. Третичные цвета образуются при смешении первичного цвета с соседним вторичным цветом. К третичным относятся такие промежуточные цвета, как красно-оранжевый (янтарный) и сине-зеленый. Первичные, вторичные и третичные цвета показаны на рис. 9.8.

Первичные цвета

Вторичные цвета

Третичные цвета

Рис. 9.8. Цветовой круг разделен на первичные, вторичные и третичные цвета

Монохромная цветовая схема Монохромными называются цветовые схемы, состоящие из различных теней и тонов одного цвета. Такие цветовые схемы хорошо подходят для использования в качестве цветовой палитры, поскольку относятся к одному семейству цветов, например зеленых или синих. Монохромная цветовая схема позволяет экспериментировать, избегая при этом конфликта цветов или использования слишком большого их количества в своем дизайне. Она также помогает упростить дизайн или сделать его более гармоничным в тех случаях, когда содержимое уже создает ощущение перегруженности. Примеры монохромных цветовых схем представлены на рис. 9.9 и 9.10.

Рис. 9.9. Монохромная цветовая схема

236  Часть III. Элементы визуального дизайна

Рис. 9.10. Примером применения монохромной цветовой схемы в дизайне является сайт The Web We Want

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

Рис. 9.11. Пример комплементарной цветовой схемы на основе фиолетового    и желтого цветов

Глава 9. Теория цвета  237

Лично я испытываю сложности при работе с дополнительными цветами в вебконтексте из-за большого контраста между ними. Применение этих цветов в дизайне сайта требует дополнительного продумывания, и вероятность того, что удастся обойтись только этими двумя цветами, крайне мала. Скорее, придется использовать как минимум один нейтральный цвет (черный, белый или серый) и решить, какой из дополнительных цветов будет основным, то есть доминирующим на сайте, а какой — акцентным. Цветовые схемы на основе дополнительных цветов позволяют создать множество эффектов и визуальный контраст. Их можно использовать для привлечения внимания пользователей к определенным элементам сайта, так как экстремальный контраст, создаваемый дополнительными цветами, будет направлять их взгляд туда, куда захочет дизайнер. Пусть, например, в веб-приложении или на сайте есть элемент пользовательского интерфейса со значком уведомления, который должен не сильно выделяться на фоне остальных элементов, но при этом должен привлекать к себе внимание. Для создания контраста и привлечения внимания к этому значку можно использовать комплементарную цветовую схему. Комплементарные цвета, благодаря присущей им контрастности, можно использовать для внесения ясности в элемент пользовательского интерфейса, содержащий информацию о совершенно разных состояниях. Например, на графике фондового рынка, отображающем изменение цены отдельной акции в течение дня, можно использовать сочетание красного и зеленого цветов для указания роста и падения стоимости акции. В списке, отражающем дневную динамику цен на несколько акций, красный и зеленый цвета с соответствующими значками или символами (такими, как стрелки, указывающие вверх и вниз, или знаки «плюс» и «минус») моментально дают понять, какие акции подорожали, а какие — подешевели.

Аналогичное цветовое сочетание Аналогичное цветовое сочетание — это цветовая схема, состоящая из трех цветов, расположенных по соседству друг с другом на цветовом круге (рис. 9.12). От комплементарной цветовой схемы эта схема отличается более гармоничным сочетанием цветов и меньшей контрастностью. Кроме того, сочетание аналогичных цветов часто встречается в природе, поэтому данная цветовая схема нравится людям больше других. Например, когда мы любуемся закатом, мы видим богатый спектр желтых и оранжевых оттенков, иногда переходящих в красные. Если же посмотреть на восток, в противоположную от заката сторону, то мы увидим спектр от розового и фиолетового до глубокого синего цвета ночного неба. И в первом и во втором случае речь идет о сочетаниях аналогичных цветов. На основе аналогичных цветов можно создать гармоничную палитру, которая будет казаться более целостной и не такой броской, как палитры на основе

238  Часть III. Элементы визуального дизайна

Рис. 9.12. Пример аналогичной цветовой схемы, состоящей из различных оттенков фиолетового

контрастных цветов. Даже такие теплые цвета, как красный, оранжевый и желтый, при правильном использовании могут придать дизайну элегантность. Поскольку аналогичные цвета находятся рядом друг с другом на цветовом круге, цветовая палитра на их основе является чрезвычайно низкоконтрастной. Такая цветовая схема будет казаться безакцентной даже тем, кто не имеет проблем со зрением. Если использовать эти цвета для оформления графиков, то цвет не должен являться единственным способом выделения, например, столбики на гистограмме должны различаться и выделяться не только по цвету, но и дополнительным обозначением. Поэтому при оформлении гистограмм лучше использовать дополнительное наложение узоров и не полагаться только на цветовой ключ. Цвета этой схемы из-за проблем с контрастностью следует применять к отдельным элементам пользовательского интерфейса, не перекрывающим друг друга. Первым делом выберите нейтральный цвет в качестве основы для дизайна сайта и используйте аналогичные цвета поверх него для привлечения внимания посетителей к элементам пользовательского интерфейса. Вы также можете использовать тень или оттенок одного из цветов палитры для создания дополнительного визуального контраста между элементами, сохранив при этом впечатление насыщенной цветовой схемы с аналогичными цветами.

Триадическая цветовая схема Триадические цветовые схемы состоят из цветов, равномерно распределенных по цветовому кругу. Простейшим примером такой схемы является сочетание основных цветов: красного, желтого и синего. На рис. 9.13 видно, что цвета Рис. 9.13. Фиолетовый, оранжевый и зеленый цвета образуют триадическую    цветовую схему

Глава 9. Теория цвета  239

расположены на цветовом круге равномерно, образуя треугольник. Такая цветовая схема может быть весьма интенсивной, и обычно имеет смысл выбрать один цвет в качестве основного, а два других использовать в качестве акцентных. При создании графики и оформлении пользовательского интерфейса некоторые дизайнеры используют применяемое в дизайне интерьеров правило пропорции 60:30:10. Согласно этому правилу, основной цвет должен занимать 60 % площади страницы, 30 % должно приходиться на дополнительный, а 10 % — на цветовые акценты. Еще можно использовать тени и оттенки каждого из цветов, чтобы снизить их интенсивность, или создать более нейтральный цвет, например серый с примесью того или иного оттенка, чтобы избежать использования чисто серого цвета для обеспечения контраста. Это правило применимо к любым рассмотренным цветовым комбинациям, состоящим из трех цветов. Оно бывает особенно полезно в случае триадических и расщепленных комплементарных схем, поскольку позволяет выбрать основной, дополнительный и акцентный цвета, которые не конфликтуют между собой и не борются за господство, например, при использовании смелых цветовых схем.

Расщепленная комплементарная цветовая схема Подобно триадической цветовой схеме, расщепленная комплементарная схема включает в себя три цвета и является последним из рассматриваемых в книге цветовых отношений. В данной схеме дополнением одного из цветов служит не комплементарный цвет, расположенный в цветовом круге напротив него, а два цвета, находящиеся по соседству с ним. Как видно на рис. 9.14, основным цветом является фиолетовый, а дополнительными — желто-зеленый и желто-оранжевый. Рис. 9.14. Пример расщепленной комплементарной цветовой схемы, состоящей из фиолетового, желто-зеленого    и желто-оранжевого

9.2.2. Изучайте разные примеры использования цветов Цветовая палитра не должна создавать впечатление перегруженности и содержать цвета, которые борются за господство на странице. Знание различных цветовых отношений должно помочь в составлении цветовой палитры, а применение правила 60:30:10 позволит определиться с количеством того или иного цвета, которое следует использовать. Цвет является, пожалуй, одной из самых сложных концепций, и хотя данная глава закладывает основу для понимания того, как создавать палитры и применять цвета (чуть позже я подробно опишу

240  Часть III. Элементы визуального дизайна этот процесс), я рекомендую постоянно изучать примеры использования цветов в оформлении сайтов и пользовательских интерфейсов. В качестве источника вдохновения я часто использую сайт Dribbble и хочу порекомендовать такую последовательность действий на нем или на другом подобном. Выберите понравившийся дизайн, сохраните его на своем компьютере, откройте любимую графическую программу, поместите в файл найденный пример и создайте палитру из используемых в нем цветов с помощью инструмента выбора цвета. Можете ли вы определить, какие цветовые отношения используются в этом дизайне? Используются ли в нем тени, оттенки или насыщенные цвета? Возможно, соотношение цветов отличается от пропорции 60:30:10. Хотя точно определить их процентное соотношение довольно трудно, вы вполне можете заметить, что их пропорция составляет, например, 70:15:15. Несбалансированный цвет способен сделать пользовательский интерфейс перегруженным. Кроме того, он может не обеспечить достаточного контраста для направления внимания пользователя по странице. Как избыток, так и недостаток контраста является проблемой, поскольку и то и другое может привести к путанице, мешающей пользователю определиться с дальнейшими действиями. Если при первом посещении страницы посетитель столкнется со слишком большим количеством конфликтующих цветов, он, скорее всего, покинет ее. Таков эффект первого впечатления, складывающегося у пользователя, и если вы не относитесь к людям, обладающим врожденной способностью к выбору и применению цветов, то изучение примеров и практика помогут вам развить этот навык.

9.3. Психология цвета На тему психологии цвета написано множество книг. Эмоции, вызываемые различными цветами, связанные с цветами ассоциации и их влияние на человека изучались на протяжении многих лет. Одним из пионеров в этой области был Карл Юнг. Несколько дополнительных источников, посвященных этой обширной и увлекательной теме, можно найти в приложении. Цвет очень важен в дизайне продукта, поскольку он влияет на восприятие этого продукта людьми. Неудачная цветовая схема или несогласованность цветов в пользовательском интерфейсе или дизайне логотипа сообщают покупателям гораздо больше, чем вы бы хотели. Если цветовые схемы подобраны неудачно, то совершенно не важно, что именно обозначают выбранные цвета, поскольку неприятное для глаз оформление создает впечатление непрофессионализма. В конечном счете плохое цветовое решение отвлекает от сообщения или настроения, которое вы пытаетесь передать. Но что вообще можно передать с помощью цвета? Рассмотрим краткий список основных групп цветов и связанные с ними ассоциации. Красный — яркий и смелый цвет, относящийся к теплой части цветового спектра. Символизирует силу, доминирование, власть, войну, опасность,

Глава 9. Теория цвета  241

сексуальность, любовь и страсть. Красный цвет привлекает внимание. В моем районе проживает много владельцев суперкаров, и красные Ferrari выделяются гораздо сильнее, чем черные. Ярко-красные знаки остановки четко видны на перекрестке. В фильме «Матрица» во время тренировочной симуляции внимание главного героя Нео отвлекает женщина в красном платье. Оранжевый — еще один теплый цвет, привлекающий внимание. Как правило, он символизирует творчество, развлечение, авантюризм, энергию и активность. Он может предупреждать об опасности (например, конусы, выставляемые строительными бригадами на дорогах), поскольку хорошо выделяется на фоне других цветов. В США оранжевый цвет часто используется в логотипах спортивных команд и фитнес-компаний. Желтый цвет тоже относится к теплому спектру, как оранжевый и красный. Благодаря своей заметности он также часто используется в качестве предупреждения (примером может служить жилет повышенной видимости). Он может символизировать позитив, оптимизм, веселье и счастье. Желтый является еще одним цветом, привлекающим внимание. Однако он не слишком популярен, а избыток некоторых его вариаций даже может казаться подавляющим и неприятным. Тем не менее желтый цвет позволяет привлечь внимание, особенно если использован на фоне более темного цвета для обеспечения контраста. Зеленый цвет тяготеет к холодному спектру. Он может символизировать рост, природу, безопасность, исцеление, расслабление и свежесть. Это один из самых спокойных цветов по сравнению с энергичными красным, оранжевым и желтым. Зеленый цвет часто используется в иллюстрациях и логотипах, связанных с защитой окружающей среды, активным отдыхом и здоровьем, например, в оформлении спа-салонов, для передачи ощущения расслабленности и исцеления. Синий — это холодный цвет, символизирующий спокойствие, невозмутимость, доверие, авторитет и верность. Благодаря своей нейтральности он является одним из самых популярных цветов в мире и часто используется в логотипах. Как правило, это не очень яркий цвет, и, несмотря на то, что в США он считается мужским, на самом деле является достаточно нейтральным. Синий цвет также ассоциируется с природой, в частности с океаном и небом, и может оказывать на людей успокаивающее воздействие. Фиолетовый, как правило, относится к холодным цветам. Однако, поскольку он образован путем смешения синего, самого холодного первичного цвета, и красного, самого теплого первичного цвета, он предусматривает гораздо больше холодных и теплых оттенков, чем другие цвета. Фиолетовый цвет ассоциируется с королевской властью и роскошью. Он может символизировать двойственность, таинственность, индивидуализм и духовность. Кроме того, он также связан с верой и религией, особенно в христианстве. Черный цвет представляет собой полное отсутствие света и технически не является цветом. Как правило, он ассоциируется с темнотой, властью,

242  Часть III. Элементы визуального дизайна изысканностью, элегантностью, трауром и злом. Стереотипный кинозлодей всегда одет в черное. С другой стороны, многие модные дома используют черные логотипы в силу чистоты и элегантности этого цвета. Кроме того, черный является хорошим нейтральным цветом, который может мгновенно придать дизайну сайта ощущение возвышенности и престижности. Этот цвет способен и хорошо работать сам по себе, и создавать мощный динамический контраст в сочетании с более светлыми цветами цветового круга.

9.4. Выбор и применение цветовой схемы Мы рассмотрели основы теории цвета, которая предоставляет ориентиры для выбора цветовой схемы на базе отношений компонентов цветового круга. Следующим шагом является применение цветовой схемы к пользовательскому интерфейсу. Прежде всего, вне зависимости от используемой цветовой схемы, вам следует выбрать один цвет в качестве базового. Этот цвет станет основным для всего сайта и будет чаще всего встречаться в пользовательском интерфейсе, вне зависимости от того, используете ли вы монохромную или расщепленную комплементарную цветовую схему. Затем выберите один или два дополнительных цвета в качестве акцентных. На основе этих образцов вы можете создать несколько теней и оттенков для дальнейшей работы. Теперь вам следует выбрать несколько оттенков серого. Чтобы сделать нейтральную палитру более целостной, лучше добавить в эти серые цвета оттенок основного цвета вашего бренда. Определившись с цветами, вы сможете применить их в оформлении пользовательского интерфейса сайта или приложения. Если вы не уверены в пропорции этих цветов, следует вспомнить правило 60:30:10, широко используемое в дизайне интерьеров. Это простое правило поможет сбалансировать цветовые сочетания. Далее мы подробно рассмотрим процесс выбора цветовой схемы и ее применения в пользовательском интерфейсе сайта.

9.5. Руководство по выбору и применению цветовой схемы В этом разделе я расскажу о том, как применить цветовую схему в оформлении целевой страницы туристического сайта. Я выбрала монохромную цветовую схему, а для построения палитры использовала ползунок цвета HSB в программе Adobe Illustrator, как показано на рис. 9.15. При создании палитры я начинаю с основного фиолетово-синего цвета, а затем настраиваю степень насыщенности с помощью ползунка HSB в Adobe Illustrator. Мне нужно получить два дополнительных цвета из основного: средний тон и очень светлый тон, на который можно наложить текст. Я уменьшаю степень насыщенности до 60 % для получения второго цвета и до 10 % — для получения третьего.

Глава 9. Теория цвета  243

Рис. 9.15. Ползунковый регулятор    HSB программы Adobe Illustrator

Для создания палитры серых оттенков я сохраняю тон неизменным, но уменьшаю насыщенность каждого из выбранных серых цветов. А также уменьшаю и значение яркости до 45 %. При создании первых трех цветов серой палитры начинаю с 20 % насыщенности, поскольку мне нужно добиться, чтобы самый темный серый цвет имел фиолетово-синий оттенок. Затем я последовательно уменьшаю насыщенность следующих двух образцов на 5 %, чтобы избавиться от этого оттенка. Для получения самого светлого (четвертого) серого я оставляю насыщенность на уровне 5 % и увеличиваю яркость до 60 %. В итоге получается цветовая палитра, представленная на рис. 9.16.

Рис. 9.16. Цветовая палитра, которую я применяю на своей целевой странице

На следующем этапе я применяю полученную цветовую палитру к целевой странице. Начинаю с вайрфрейма высокого уровня детализации, в котором все цвета являются одинаковыми, как в книжке-раскраске (рис. 9.17). Итак, я определилась с типографикой и структурой страницы, но на ней пока нет ни цвета, ни графики. Я начинаю с базового цвета, который должен быть наиболее ярким и привлекающим внимание, как показано на рис. 9.18. Применяю его к основному заголовку, кнопке поиска (поскольку это основной призыв к действию, на который я хочу обратить внимание посетителей), а также использую его в качестве заливки установленных флажков.

244  Часть III. Элементы визуального дизайна

Рис. 9.17. Вайрфрейм высокого уровня детализации для целевой страницы без применения цвета

Затем я добавляю акцентные цвета и некоторые из серых оттенков. Для оформления логотипа использую дополнительный цвет, так как не хочу, чтобы он отвлекал внимание посетителей от основного призыва к действию и заголовка. После этого я использую третий цвет в качестве фона для разделов со второстепенной информацией, которую нужно выделить. Опять же, я не хочу отвлекать внимание от основного призыва к действию, но эти разделы должны быть следующими элементами, на которых необходимо сфокусировать внимание пользователей. К шрифтам я применяю два серых цвета: самый темный серый с оттенком основного цвета используется для заголовков, навигации и подзаголовков, а более нейтральный серый — для шрифтов меньшего размера в форме и в основном тексте, как показано на рис. 9.19. На рис. 9.20 иконки выделены чуть более темным серым цветом для создания легкого контраста.

Глава 9. Теория цвета  245

Применяемые цвета

Рис. 9.18. Результат применения основного цвета к пользовательскому интерфейсу

Наконец, я добавляю изображение, чтобы создать контраст в главном разделе сайта и сделать страницу более интересной в визуальном плане (рис. 9.21). Добавление в главный раздел полупрозрачного изображения обеспечивает контраст со следующим разделом, имеющим белый фон. Тем самым привлекается еще больше внимания к форме поиска жилья для отпускной аренды. При добавлении фоновых изображений важно обеспечить легкость считывания текста на их фоне, поэтому я добавила белую подложку и немного уменьшила степень ее непрозрачности.

246  Часть III. Элементы визуального дизайна

Применяемые цвета

Рис. 9.19. Результат применения акцентных цветов и оттенков серого к шрифтам

Глава 9. Теория цвета  247

Применяемые цвета

Рис. 9.20. Результат окрашивания иконок в серый цвет, который является чуть более темным по сравнению с цветом текста в форме

248  Часть III. Элементы визуального дизайна

Рис. 9.21. Изображения заполняют некоторые пробелы в содержимом и делают область заголовка более заметной

Само по себе изображение не несет никакой смысловой нагрузки помимо намека на отдых в тропиках. Однако оно делает главный раздел более заметным и визуально интересным, а также помогает разбить страницу на фрагменты. Если бы я не отрегулировала степень непрозрачности, мне пришлось бы пересмотреть цветовые решения в главном разделе и области навигации (рис. 9.22). Без наложения белого слоя на изображение текст показался бы нечитаемым даже людям с нормальным зрением. Выбор и сочетание цветов, обеспечивающих легкость считывания и доступность текста, является ключевым фактором, гарантирующим хороший пользовательский опыт для всех посетителей сайта или пользователей веб-приложения. Цвет — это один из важнейших элементов, который необходимо учитывать при создании доступного интерфейса. Далее мы рассмотрим некоторые факторы, влияющие на степень этой доступности.

Глава 9. Теория цвета  249

Рис. 9.22. Без настройки степени непрозрачности фонового изображения текст становится нечитаемым

9.6. Соображения доступности Выбирая цвета для оформления веб-страниц, следует убедиться в том, что они обеспечивают доступность контента для людей с нарушениями зрения. В США существует закон, обязывающий владельцев веб-ресурсов обеспечивать их доступность. Данная задача не сводится к выбору контрастных цветов, однако их использование является одним из наиболее простых шагов для обеспечения доступности. Требования к цветовому контрасту относятся к тексту, графическим объектам и таким компонентам пользовательского интерфейса, как контур и цвет фона HTML-формы для ввода текста. Например, слишком светлый серый цвет на белом фоне и отсутствие контура сделает такое поле трудноразличимым даже для людей с нормальным зрением.

250  Часть III. Элементы визуального дизайна

9.6.1. Тестирование цветового контраста После выбора цветовых схем и определения цвета шрифтов надо протестировать эти сочетания цветов в программе проверки цветового контраста. Убедитесь в том, что они отвечают требованиям к цветовому контрасту, прежде чем применять их к своим макетам, чтобы в дальнейшем не пришлось вносить значительные изменения в готовый дизайн. Для проверки контрастности цветов существует множество инструментов. В зависимости от выбранного инструмента может быть доступен плагин для проверки контрастности цветов прямо в процессе работы. Например, такой плагин предусмотрен для приложения Figma. Кроме того, существуют онлайн-инструменты, позволяющие определить степень соответствия введенных в них кодов цветов фона и переднего плана требованиям WCAG. Лично я последние несколько лет использую для проверки контрастности инструмент WebAIM (https://webaim.org/). Выполнять проверку выбранных цветов нужно как можно раньше и затем сделать ее частью рабочего процесса. Необходимо выявлять потенциальные проблемы, особенно связанные с цветами самого бренда. Помимо проверки цветов также следует интегрировать в процесс разработки сайта этап проверки доступности остального содержимого, чтобы не оставлять это на потом.

9.6.2. При обозначении состояния или статуса нельзя полагаться только на цвет В лифтах парковочного гаража аэропорта Сиэтл-Такома кнопка этажа с прямым доступом к терминалу имеет тускло-бронзовый цвет. Она очень потертая и старая и в некоторых лифтах едва заметна. В ряде других аэропортов для ориентирования на пол нанесены две линии разного цвета, а табличка указывает, вдоль какой из них нужно следовать для того, чтобы попасть в те или иные точки аэропорта. При этом на этажах, на которые ведут эти линии, нет никаких дополнительных указаний. В обоих случаях я часто думаю о людях, страдающих дальтонизмом или нарушениями зрения. Им невозможно отличить бронзовую кнопку от всех остальных или понять, вдоль какой из разноцветных линий в аэропорту нужно следовать. Цвет не должен быть единственным средством информирования людей о функции или важности элемента. Например, если вам необходимо подчеркнуть серьезность предупреждения или сообщения об ошибке, простого использования желтого или красного фона будет недостаточно. По возможности дополните цвет иконками или текстовыми надписями. Не все люди воспринимают цвет одинаково, поэтому внесение дополнительной ясности с помощью контекста

Глава 9. Теория цвета  251

является ключевым фактором для создания доступного и удобного пользовательского опыта.

9.7. Цветовые режимы для веб Определить выбранные цвета в коде можно несколькими способами. Работа с цветом в цифровом пространстве отличается от его использования в реальном мире пигментов и красителей. Все цвета, отображаемые на цифровых экранах, являются аддитивными, то есть состоят из вариаций красного, зеленого и синего света. Смешение красного, зеленого и синего в равных количествах дает белый цвет. Однако если в реальности смешать красный, зеленый и синий пигменты, то получится не белый цвет, а некая грязноватая смесь. Противоположностью аддитивного смешения цветов является метод субтрактивного смешения. Данный метод предполагает использование сине-зеленого (cyan), пурпурного (magenta), желтого (yellow) и черного (black) цветов. Этот цветовой режим называется CMYK, при этом буква K в названии означает «ключ» (key), которым является черный цвет. Если при работе в Adobe Illustrator изменить цветовой режим документа с RGB на CMYK, то можно заметить разницу в цветах из-за различий в методах их создания. На экране монитора цвета CMYK будут отображаться иначе, поскольку изначально монитор использует модель RGB. В картриджах цветного принтера используются пигменты сине-зеленого, пурпурного и желтого цветов. Но мы сосредоточимся на аддитивной модели, поскольку именно она применяется при определении цветов во Всемирной паутине, однако базовое представление о различных способах создания цветов в любом случае будет полезно.

9.7.1. Режимы RGB и RGBA Режим RGB использует красный (red), зеленый (green) и синий (blue) цвета, каждый из которых определяется числовым значением от 0 до 255. Добавление буквы A, обозначающей альфа-канал, позволяет контролировать степень непрозрачности цвета, которая принимает значение в диапазоне от 0,0 до 1,0. Ранее при определении цвета с помощью функции rgba() каждое цветовое значение нужно было отделять запятыми, например: rgba(255, 255, 255, 0.8). Однако, в соответствии со спецификацией CSS Color Module Level 4, запятые между значениями красного, синего и зеленого цветов больше не требуются, а для отделения альфа-значения используется косая черта (/), например: rgba(255 255 255 / 80%). Такая запись воспринимается чуть легче, чем предыдущая. Язык CSS не поддерживает того, что в вышеуказанной спецификации называется

252  Часть III. Элементы визуального дизайна «традиционным синтаксисом для определения цвета», в частности, синтаксис с использованием запятых. Чтобы получить нужный цвет при использовании RGB-синтаксиса, следует изменять значения его составляющих: красного, зеленого и синего цветов. А для внесения корректировок или создания палитры, скорее всего, придется ссылаться на инструмент для работы с цветом. Цветовые режимы RGB и RGBA поддерживаются всеми основными современными браузерами. Однако определение цветов с помощью RGB-синтаксиса не является интуитивно понятным по сравнению с HSL-синтаксисом, который рассмотрен в подразделе 9.6.3.

9.7.2. Шестнадцатеричные цветовые коды Использование шестнадцатеричных кодов — еще один способ определения цветов. Такие коды являются, пожалуй, самой распространенной цветовой нотацией во Всемирной паутине. При их использовании значения RGB объявляются в виде #RRGGBB. Первые две буквы соответствуют красному каналу, следующие две — зеленому, а последние две — синему. При условии дублирования значений трехзначная нотация позволяет использовать сокращенную форму записи цвета. Например, значение #11EECC можно записать в виде #1EC. Хотя шестизначная шестнадцатеричная нотация не позволяет указать степень непрозрачности цвета, можно использовать восьмизначную нотацию, в которой альфа-значение задается с помощью последних двух цифр. Однако, несмотря на то, что восьмизначная нотация поддерживается в основных современных браузерах, предназначенных для настольных компьютеров, она в меньшей степени поддерживается в некоторых мобильных браузерах, а также в браузерах, занимающих меньшую долю рынка.

9.7.3. Режимы HSL и HSLA Режим HSL (не путать с HSHL (High-Level Shader Language)) расшифровывается как hue (тон), saturation (насыщенность) и lightness (светлота) и, очевидно, является интуитивно понятным способом изменения цветов без постоянного обращения к инструменту для работы с цветом. В HSL значения записываются в той же нотации, что и в RGB, но диапазон этих значений является иным. Значение тона, то есть чистого цвета, задается в диапазоне от 0 до 360 в соответствии с градусом цветового круга. Степень насыщенности и светлоты задается процентным значением от 0 до 100 %. Последнее, альфа-значение, позволяет регулировать степень непрозрачности и представляет собой число в диапазоне от 0,0 до 1,0. Таким образом, получается что-то вроде hsla(210, 60%, 20%, 0.5). Упомянутое ранее изменение спецификации, касающееся использования запятых (см. подраздел 9.6.1) при применении режима RGBA, распространяется и на

Глава 9. Теория цвета  253

режим HSLA. Таким образом, цветовое значение может быть записано в виде hsla(210 60% 20% / 0.5). Использование режима HSLA представляет собой интуитивно понятный способ создания цветов, поскольку после выбора тона можно изменять его насыщенность и светлоту для создания различных теней и оттенков, регулируя соответствующие процентные значения. Также возможно задать насыщенность и светлоту, а затем изменить тон для создания нескольких разных цветов в пределах одного и того же диапазона оттенков или теней. Режим HSLA поддерживается всеми основными браузерами, включая устаревший Internet Explorer 9.

9.7.4. Режимы CIE Lab и LCH CIE Lab и LCH — это новые цветовые режимы, включенные в спецификацию веб-стандарта CSS Colors. Lab и LCH — аппаратно-независимые цветовые пространства, охватывающие те цвета, которые способен воспринимать человек. То есть они предоставляют доступ к гораздо большему количеству цветов, чем пространство RGB. Lab — это цветовое пространство, определенное Международной комиссией по освещению (CIE). Буква «L» обозначает светлоту (lightness), а буквы «a» и «b» — расстояние по осям a и b в этом цветовом пространстве соответственно. Таким образом, цвет, заданный в коде CSS, может выглядеть, например, так: lab(32.556% 19.2835 30.0664);. Мишель Баркер описывает эти новые цветовые пространства в своей статье A Guide to Modern CSS Colors в журнале Smashing Magazine (http://mng.bz/e1Aq). Она рекомендует использовать в программе Photoshop цветовой режим Lab, который является оптимальным выбором, если вы хотите, чтобы цвет, напечатанный, например, на футболке, выглядел так же, как на экране. Название режима LCH образовано из первых букв слов lightness (светлота), chroma (цветовая насыщенность) и hue (тон). И хотя этот режим похож на HSLA, он совершенно иначе обращается со светлотой. При настройке светлоты в HSLA воспринимаемая светлота может быть разной в зависимости от выбранного тона. Применив два разных тона с одинаковыми параметрами светлоты, вы можете заметить, что один из них выглядит намного темнее другого. Под цветовой насыщенностью понимается количество цвета, которое мы хотим отобразить. Изза ограничений, связанных с устройством мониторов, мы не можем увидеть на экране максимально насыщенный цвет. Однако в настоящее время существует технология, позволяющая получить доступ к более широкому диапазону цветов, что в будущем позволит создавать более красочные веб-страницы. Цветовые пространства CIE Lab и LCH являются относительно новыми, поэтому их поддержка пока ограниченна, и помимо спецификации CSS о них мало где можно найти информацию. В приложении перечислено несколько источников,

254  Часть III. Элементы визуального дизайна включая статью Мишель Баркер для журнала Smashing Magazine. Там можно найти ссылки на демонстрационные примеры для тестирования этих цветовых пространств. Обратите внимание на то, что необходимо использовать браузер, поддерживающий эти цветовые режимы.

9.7.5. Выбор цветового режима Тремя наиболее распространенными цветовыми режимами являются HSLA, шестнадцатеричный и RGB. Какой из них использовать, решать вам. Однако если вы собираетесь регулировать степень непрозрачности или анимировать цвета, то будет проще работать с HSLA и RGBA, хотя цвета можно анимировать и при использовании шестнадцатеричных кодов. Таким образом, выбор режима зависит от того, с чем удобнее работать!

9.8. Несоответствие цветов на разных экранах Обычно я пишу код и разрабатываю дизайн на компьютерах под управлением macOS и время от времени задействую монитор, не являющийся продуктом компании Apple. Я сталкивалась с ситуациями, когда критическая разница в отображении цветов, связанная с настройками, приводила к исчезновению некоторых функций в пользовательских интерфейсах таких известных приложений, как, например, Microsoft Word. На одном из моих мониторов при изменении различных настроек серый фон документа Microsoft Word становится настолько размытым, что сливается с белым цветом отображаемой на экране страницы. Изображения на разных экранах будут выглядеть по-разному в зависимости от их разрешения и битовой глубины, которая представляет собой количество битов, используемых для кодирования цвета одного пикселя (чем больше битовая глубина, тем больше количество пикселей на экране и тем лучше цвета). По возможности надо стараться тестировать дизайн на мониторе более низкой ценовой категории. А при использовании монитора с разными настройками отображения посмотреть, как их изменение влияет на цвета. В частности, единственно правильное решение — убедиться в том, что изменение этих настроек не делает менее заметными критически важные для взаимодействия с пользователем элементы.

Резюме Цвет является одним из мощнейших инструментов визуального дизайна, поскольку он способен вызывать эмоции и менять настроение людей. Неудачная цветовая схема может оттолкнуть человека от сайта или веб-приложения,

Глава 9. Теория цвета  255

если будет слишком интенсивной и вызывающей бурную негативную реакцию. При выборе цветовой схемы для определения цветовых отношений следует опираться на цветовой круг. Цветовая схема может быть основана на монохромном, комплементарном, аналогичном, триадическом и расщепленном комплементарном сочетании цветов. На основе базового цвета можно с легкостью создавать тени и оттенки, регулируя светлоту и насыщенность в выбранной программе. Разные цвета означают разные вещи и вызывают разные эмоции и чувства. Если вы никак не можете выбрать цветовую схему, подумайте о том, какие чувства вы хотите вызвать у пользователя с помощью своего дизайна, и выберите основные цвета, соответствующие желаемым эмоциям. При выборе цветовых схем следует учитывать соображения доступности, поэтому необходимо использовать инструмент проверки контрастности, чтобы убедиться в удобочитаемости текста при его оформлении выбранным цветом. Также следует избегать использования одного лишь цвета для передачи информации и включать дополнительный контекст, например иконки или надписи.

10

Построение сайта

В этой главе

33 Создание целевой страницы на основе требований клиента. 33 Организация контента с помощью основных принципов проектирования пользовательского опыта. 33 Принятие решений, связанных с визуальным дизайном, и их пошаговая реализация.

В предыдущих главах мы рассмотрели основные принципы проектирования пользовательского опыта, обсудили необходимость разобраться в бизнес-требованиях перед разработкой вайрфреймов, способы создания вайрфреймов, распространенные макеты веб-сайтов, методы использования пустого пространства, работу с типографикой и то, как она передает тон бренда, а также способы применения цвета. Теперь займемся применением полученных знаний на практике и рассмотрим процесс создания целевой страницы для сайта туристического агентства. Приводимый сценарий является лишь одним из подходов к разработке дизайна, и у разных профессионалов он может протекать по-разному. Со временем каждый разработчик определяется с тем, что подходит именно ему. А пока предлагаю в этой главе познакомиться с пошаговым планом разработки дизайна, начиная с создания вайрфрейма и заканчивая полноцветной версией макета.

Глава 10. Построение сайта  257

10.1. Требования к сайту проекта Итак, мы разрабатываем сайт для нового туристического агентства, ориентированного на людей, планирующих роскошный отдых по приемлемым ценам. Тур­ агентство хочет, чтобы его сайт выглядел современным, модным и роскошным, но при этом сохранял профессиональный стиль, внушающий доверие. Первая цель сайта заключается в том, чтобы побудить потенциальных клиентов забронировать путевки, и вторая — проинформировать их о дополнительных услугах компании, таких как организация экскурсий и групповых поездок. Команда сотрудников этого агентства предоставила нам список пунктов, на которых необходимо сосредоточиться при проведении редизайна. Агентство хочет добиться увеличения числа бронирований от постоянных клиентов и для этого провело собственное исследование, чтобы определить, что необходимо сделать с целевой страницей для достижения бизнес-цели. В частности, агентство хотело бы акцентировать: возможность удобного поиска туристических пакетов и направлений; преимущества бронирования через данное агентство; популярные пакеты и направления; услуги по организации групповых поездок, хотя они являются менее прио­ ритетными; простоту регистрации, функция которой не должна быть слишком назойливой до тех пор, пока в ее использовании не возникнет необходимость; отзывы; атмосферу уверенности и обещание того, что клиенты получат роскошный опыт по более низкой цене без ущерба для качества других услуг, таких как клиентская поддержка. Этот список дает нам исчерпывающую информацию, позволяющую приступить к созданию вайрфрейма для целевой страницы.

10.2. Организация контента с помощью вайрфрейма Прояснив требования клиента, можно приступить к разработке вайрфреймов. Самые первые из них позволят затем определиться с организацией и расположением фрагментов контента. На этом этапе не стоит беспокоиться о точных измерениях, интервалах и проработке деталей дизайна. Требования клиента предоставляют разработчикам кусочки головоломки, которую и необходимо

258  Часть III. Элементы визуального дизайна решить. И хотя мы не собираемся копировать наших конкурентов, изучение того, что уже было сделано другими, может послужить вдохновением при принятии дизайнерских решений. На рис. 10.1 показан исходный вайрфрейм. Клиент хочет, чтобы его сайт ассоциировался с роскошью и высококлассными путешествиями, а также предоставлял пользователям возможность быстрого

Рис. 10.1. На этом этапе мы определяем примерное расположение блоков контента, чтобы принять решения относительно дальнейшей группировки содержимого и основной иерархии страницы

Глава 10. Построение сайта  259

поиска путевок. Под навигацией и логотипом, составляющими заголовок в верхней части страницы, мы планируем поместить крупное изображение и сделать акцент на функции поиска туристических пакетов. Непосредственно под строкой поиска перечислим преимущества пользования услугами именно этого турагентства. Под этим списком мы разместим раздел с популярными направлениями. Для туристического сайта очень важны изображения, привлекающие внимание пользователей, поэтому в данном разделе расположим несколько качественных фотографий различных туристических объектов. Последний раздел перед футером будет посвящен групповым поездкам, которые являются одной из специализаций, указанной на главной странице, пусть это направление деятельности агентства и обладает меньшим приоритетом. Создание данного вайрфрейма является первым этапом разработки дизайна. Затем мы предоставляем клиенту эскиз главной страницы и нескольких подстраниц на утверждение, после чего приступаем к доработке вайрфреймов, превращая их в отшлифованные макеты с точными размерами для дальнейшей передачи разработчику.

10.3. Создание системы сеток и задание расстояний После того как заказчик одобрит список разделов и общую схему организации контента, приходит время приступить к доработке структуры сайта. В данном проекте мы будем использовать 12-колоночный макет для больших экранов. Максимальная ширина макета составляет 1220px (это значение выбрано с учетом очень больших окон просмотра), а интервал между колонками (желоб) — 16px. Таким образом, имеем 12 колонок шириной 87px каждая. Данная сетка не предусматривает никаких полей. Контент будет выравниваться по краю контейнера сетки. Помните о том, что при выборе максимальной ширины контейнера не существует какого-то одного правильного значения. Она будет зависеть от дизайна и типа устройства, на которое вы ориентируетесь. Это может быть как большой дисплей или экран обычного ноутбука, так и мобильное устройство. Более подробную информацию о выборе значения ширины контейнера можно найти в приложении. На рис. 10.2 показан наш вайрфрейм с наложенной на него сеткой. Мы не будем добавлять поля у левого или правого края внешнего контейнера с учетом размера экрана настольного компьютера. Основное содержимое, расположенное под главным изображением, заполнит все пространство контейнера. После задания сетки мы можем немного поэкспериментировать с каждым фрагментом содержимого, чтобы подобрать подходящие размеры различных элементов пользовательского интерфейса, например, выровнять по сетке края поисковой строки, перекрывающей главное изображение.

260  Часть III. Элементы визуального дизайна

Рис. 10.2. Мы регулируем ширину фрагментов содержимого, чтобы выровнять их по сетке

Сетка помогает поддерживать структуру даже при различной ширине фрагментов контента в разных разделах. Например, три плейсхолдера в разделе «Преимущества бронирования у нас» занимают всю ширину 12-колоночной сетки, а расположенная над ними строка поиска — нет. Раздел «Популярные пакеты», расположенный под разделом «Преимущества», будет представлять

Глава 10. Построение сайта  261

собой слайдер-карусель, по обе стороны от него необходимо предусмотреть кнопки навигации. Таким образом, хотя основное содержимое этого раздела не занимает все 12 колонок, компонент, дополненный иконками, займет их полностью. Поскольку высота этих иконок меньше высоты соседних полей, от них до края вышерасположенного раздела будет проходить невидимая линия. Различия в ширине фрагментов контента в разных разделах помогают направлять взгляд пользователя по странице и группировать содержимое, устанавливая взаимосвязи между разделами. Ширина строки поиска равна суммарной ширине блоков карусели, что помогает связать элементы дизайна воедино. Весь контент организован и расположен в пределах сетки, как показано на рис. 10.2.

10.4. Выбор типографики Если проанализировать люксовые бренды, то можно заметить, что во многих новых логотипах используются шрифты без засечек. Такие шрифты, как правило, делают дизайн более актуальным и свидетельствуют о том, что бренд идет в ногу со временем. Шрифты без засечек с более округлыми буквами выглядят, скорее, игриво. Мы не стремимся к этой игривости, поэтому остановимся на более строгой, но при этом современной гарнитуре. На нашем сайте будет использоваться шрифт без засечек Montserrat, который я выбрала в библиотеке Google Fonts. Мы применим этот шрифт для оформления заголовков и названий. Теперь необходимо подобрать к нему шрифт для оформления основного текста. Этот шрифт должен легко читаться, поэтому формы букв должны быть четко различимыми. Помните о том, что шрифты без засечек с более округлыми и геометрическими формами читаются хуже. Для оформления основного текста также не следует использовать специализированные (например, рукописные) шрифты. Они хорошо подходят для крупных заголовков и коротких строк текста, но не годятся для оформления таких больших текстовых фрагментов, как абзацы, особенно при использовании шрифта небольшого размера. Вес шрифта также имеет большое значение. Тонкие шрифты будут нечитаемыми при небольших размерах, а чрезмерно жирные шрифты будут казаться слишком интенсивными. Итак, нужен нормальный или средний по весу шрифт. Хорошим нейтральным шрифтом без засечек является Albert Sans, который также доступен в библиотеке Google Fonts. Он не слишком геометричен, но при этом не является таким жестким и сжатым, как, например, Open Sans. Кроме того, в нем есть намек на индивидуальность. Теперь, когда мы выбрали шрифты, создадим шкалу их размеров и вертикальный ритм. Чтобы не усложнять, будем использовать сетку 4pt, на основе которой зададим поля и отступы, кратные четырем, для поддержания целостности дизайна. Использование такой сетки обеспечит большую гибкость, позволит корректировать размеры компонентов с меньшим шагом. Если используемые интервалы и размеры шрифтов будут кратны четырем, они более органично впишутся в эту сетку.

262  Часть III. Элементы визуального дизайна Использование сетки 8pt уменьшит эту гибкость, так как при умножении на 8 будут получаться гораздо большие числа: 8 – 16 – 24 – 32 вместо 4 – 8 – 12 – 16. Итак, главным преимуществом сетки 4pt является гибкость. Кроме того, большинство экранов имеют размер, кратный 4 или 8, поэтому наш дизайн будет хорошо масштабироваться в соответствии с размерами экранов.

10.5. Задание вертикального ритма Для выбора размеров шрифтов необходимо установить базовую линию. Базовая линия — это линия, на которой располагаются все символы шрифта, вне зависимости от их размера, а также направляющая, обеспечивающая согласованность всех страниц. Поскольку мы используем сетку 4pt, расстояние между базовыми линиями должно быть кратным 4. Остановимся на значении 12px, а в качестве базового размера шрифта зададим 16px, что является хорошей отправной точкой; в дальнейшем мы сможем изменить его в большую или меньшую сторону в зависимости от выбранного семейства шрифтов. Поскольку размер шрифта кратен четырем, можно легко рассчитать высоту строки, величину полей и отступов (путем добавления чисел, кратных 4), необходимых для того, чтобы символы шрифта оставались на базовой линии. На рис. 10.3 показана сетка базовых линий, занимающая всю страницу. Далее предстоит создать набор параметров шрифтов для оформления трех типов заголовков и основного текста. Пока этих шрифтов будет достаточно для оформления сайта, однако если в дальнейшем понадобится создать дополнительные шрифтовые вариации, на помощь придет математика, лежащая в основе вертикального ритма. При оформлении текста мы будем использовать такие элементы, как H1 (основной заголовок), H2 (подзаголовок), H3 (название подраздела) и P (основной текст). Выберем нужный размер шрифта для каждого из них, а затем, определившись с высотой строки, вычислим величину полей. Размер H1 будет составлять 48px, размер H2 — 36px, а размер H3 — 28px. Подробная разбивка представлена в табл. 10.1. Уже указывалось, что для вычисления высоты строки мы можем умножить размер шрифта на некий коэффициент (табл. 10.2). Например, 16px × 1,5 = 24px. Как видно на рис. 10.4, высота строки основного текста кажется слишком большой, поэтому уменьшим ее до 20px, используя коэффициент 1,25. Это изменение приведет к нарушению выравнивания текста по сетке базовых линий, поскольку число 20 не кратно 12. Исправим это с помощью полей и добавим верхнее поле величиной 16px ко всем фрагментам основного текста, обернутым в тег

: 20 (высота строки) + 16 (размер шрифта) = 36, а 36 кратно 12. На рис. 10.5 показано сравнение двух текстовых фрагментов с разной высотой строки.

Глава 10. Построение сайта  263

Рис. 10.3. Расстояние между базовыми линиями является постоянным и составляет 12px. Эта базовая линия задает вертикальный ритм и влияет на величину полей и отступов для остальных компонентов пользовательского    интерфейса Таблица 10.1. Размеры шрифтов Тип элемента

Неформальное название

Размер шрифта

Размер шрифта (масштаб 1,25)

H1

Основной заголовок

48px

25px × 1,25 = 31,25px

H2

Подзаголовок

36px

20px × 1,25 = 25px

H3

Название подраздела

28px

16px × 1,25 = 20px

P

Основной текст

16px

16px (базовый шрифт)

264  Часть III. Элементы визуального дизайна Таблица 10.2. Высота строки Тип элемента

Размер шрифта

Коэффициент корректировки высоты строки

Размер шрифта × коэффициент = высота строки (в пикселях)

H1

48px

1

48px × 1 = 48

H2

36px

1

36px × 1 = 36

H3

28px

1,25

28px × 1,25 = 35

P

16px

1,25

16px × 1,25 = 20

Рис. 10.4. Высота строк основного текста кажется слишком большой для разрабатываемого дизайна

Рис. 10.5. Результат уменьшения высоты строки основного текста

Волшебного числа для получения идеальной высоты строки не существует. Чем больше вы будете работать с типографикой, тем быстрее сможете определять, что хорошо читается, а что — нет. Кроме того, помимо высоты строки, на легкость считывания могут влиять и другие факторы, в частности длина строки. Согласно результатам некоторых исследований в этой области, большая длина строки воспринимается сложнее в случае крупных блоков текста. Что касается размеров заголовков H1 и H2, высота строки при использовании коэффициента 1,5 является слишком большой для выбранных нами шрифтов. Как видно на рис. 10.5, высота заголовка H1 составляет 48px; если умножить 48 × 1,5, то получим 72px. Однако, как видно на рис. 10.6, это создает слишком большой интервал между строками. Поэтому при вычислении высоты строки для заголовков H1 и H2 лучше использовать коэффициент 1.

Глава 10. Построение сайта  265

Высота основного заголовка 48px Высота основного заголовка 48px Высота подзаголовка 36px Высота названия подраздела равна 28px и не кратна 12 Рис. 10.6. В первом заголовке между строками остается слишком много места, поэтому скорректируем высоту строки, чтобы сделать его более компактным

Мы не собираемся делать заголовки H1 и H2 слишком длинными, поэтому для них вполне допустим относительно тесный промежуток, равный интервалу между базовыми линиями. Итак, высота строки равна размеру шрифта, а размеры элементов H1 и H2 кратны интервалу между базовыми линиями. Таким образом,

266  Часть III. Элементы визуального дизайна в дополнительных полях или отступах нет необходимости. Однако мы все-таки добавим их для увеличения интервала между заголовками и другими элементами пользовательского интерфейса. При этом опять же будем использовать значения, кратные измерениям сетки базовых линий. Для заголовка H1 добавим верхнее поле величиной 60px. Элемент H1 — это основной заголовок, который сообщает пользователю о содержимом страницы. Согласно лучшим практикам веб-дизайна, каждая страница должна содержать только один заголовок H1. Если страница содержит два тега H1, то большое верхнее поле обеспечивает достаточное расстояние между ними для того, чтобы показать, что они относятся к разным темам. Расстояние между объектами устанавливает взаимосвязи между ними. На веб-странице тег H1, скорее всего, будет являться первым фрагментом содержимого, находящимся сразу под заголовком. Необходимо показать, что содержимое страницы и заголовок являются отдельными, но все же связанными между собой частями. Интервал в 60px является хорошей отправной точкой и вполне соответствует выбранному вертикальному ритму. В качестве размера верхнего поля для тега H2 зададим значение 48px, которое также кратно расстоянию между базовыми линиями. Благодаря коэффициенту корректировки высоты строки не нужно выполнять никаких математических операций для добавления полей, обеспечивающих выравнивание содержимого по сетке. Что касается размера названия подраздела H3, то мы уже знаем, что коэффициент 1,5 не работает ни для одного из наших заголовков, поэтому попробуем значение 1,25: 28px × 1,25 = 35. Однако 35 — это нечетное число, чуть меньшее числа 36, кратного интервалу между базовыми линиями. Вовсе незачем применять поля величиной 1px, чтобы вписаться в сетку. Однако все заголовки нуждаются в добавлении полей для создания интервала между разделами. Мы можем добавить поле величиной 13px сверху, но при этом промежуток над заголовком окажется слишком маленьким, поэтому следующим возможным значением будет 60px. Для его получения прибавим 25px к 35px. Значения, задающие вертикальный ритм на странице, представлены в табл. 10.3. Таблица 10.3. Вертикальный ритм Тип элемента

Размер шрифта

Коэффициент корректировки высоты строки

Размер шрифта × коэффициент корректировки высоты строки

Верхнее поле

H1

48px

1

48px × 1 = 48

60px

H2

36px

1

36px × 1 = 36

48px

H3

28px

1,25

28px × 1,25 = 35

25px

P

16px

1,25

16px × 1,25 = 20

16px

Глава 10. Построение сайта  267

На рис. 10.7 показано, как определенный нами набор параметров шрифтов отображается в браузере. Теперь можно отталкиваться от интервала между базовыми линиями величиной 12px, чтобы добавлять поля и отступы между элементами, которые не являются текстом. Совокупные размеры отступов и полей должны быть кратны 12. В данном случае работает принцип близости. Следует использовать меньшие поля и отступы для элементов, входящих в одну группу, а те, которые относятся к разным группам, располагать дальше друг от друга.

ЭТО ЗАГОЛОВОК

ЭТО ПОДЗАГОЛОВОК

ЭТО НАЗВАНИЕ ПОДРАЗДЕЛА

ЭТО ПОДЗАГОЛОВОК

Рис. 10.7. Выбранные нами параметры шрифтов, отображаемые в браузере. Мы оставляем больше места над подзаголовками, чтобы указать на начало нового раздела. Название подраздела, расположенное под подзаголовком, находится немного ближе к нему. Становится ясно, что этот подраздел является частью соответствующего раздела

Используем выбранную типографику для оформления текста в макете, чтобы проверить выравнивание вдоль базовой линии (рис. 10.8) и при необходимости скорректировать поля и отступы.

268  Часть III. Элементы визуального дизайна

Рис. 10.8. Здесь применен выбранный шрифт к тем заголовкам, которые необходимо было выделить. В процессе дальнейшего построения страницы предстоит решить, где еще можно использовать этот    шрифт

Используя инструмент CSS Flexbox, легко расположить пункты меню в области заголовка следующим образом: #menu { display:flex; justify-content: space-between; }

Глава 10. Построение сайта  269

Flexbox позаботится о расстоянии между элементами за вас, а при уменьшении размера области просмотра реализует мобильное вертикальное меню.

10.6. Выбор изображений При выборе изображений для любого сайта следует использовать источники высококачественной графики, если нет доступа к библиотеке изображений бренда. Ничто так не портит впечатление и не снижает доверие к бренду, как сайт, заполненный размытыми картинками низкого разрешения. Подобное оформление не ассоциируется с высоким качеством. Вне зависимости от того, делается это намеренно или нет, такое оформление может создавать впечатление, будто внимание к деталям не является для бренда приоритетом.

10.6.1. Использование изображений для задания тона Даже если вы используете высококачественные изображения, несоответствие способов обработки фотографий и применяемых к ним фильтров может нарушить целостный вид сайта. Одни изображения могут быть блеклыми, другие — очень насыщенными, а третьи отличаться более холодными оттенками или более яркими тенями. Для изменения фотографий существует множество различных фотофильтров. Фильтры в Instagram являются прекрасным примером того, как различные настройки могут повлиять на изображения. Не стоит применять три разных фильтра к трем изображениям и размещать их все на одной странице, поскольку они будут конфликтовать между собой. Для сайта турагентства я предлагаю выбрать яркие изображения, но не содержащие большого количества разных цветов, чтобы не создать впечатление перегруженности. На рис. 10.9 показан макет страницы после добавления изображения. В изображении, выбранном для области заголовка, преобладают голубой и белый цвета. Частный бассейн с видом на океан создает впечатление простора и роскоши. Это простое и элегантное изображение эффективно передает образ бренда и тип путешествий, интересующий пользователей. Изображения в разделе «Популярные пакеты» привлекают внимание к отдельным направлениям. Каждая из этих фотографий сфокусирована на конкретном объекте, и их цвета не конфликтуют между собой. На них изображены не города, а особенности местности. Для Новой Зеландии это горы, для Бордо — виноград, а для Таиланда — намек на роскошный спа-салон с горами на заднем плане. Фотография для раздела, посвященного групповым поездкам, также должна быть светлой и яркой. Использование изображения пустыни хорошо сочетается с акцентным цветом из выбранной палитры и разбавляет количество синих тонов, содержащихся в остальных изображениях.

270  Часть III. Элементы визуального дизайна

Рис. 10.9. Мы добавили яркие изображения, которые не кажутся перегруженными и передают ощущение    роскоши и приключений

10.6.2. Наложение текста поверх изображений При наложении текста поверх изображений важно сделать его легким для чтения. Это не только обеспечит доступность контента, но и положительно скажется на опыте пользователей, у которых нет проблем со зрением. В течение многих лет мне приходилось сталкиваться с наложением тонкого белого шрифта поверх изображений, которые были недостаточно темными или слишком перегруженными деталями, что затрудняло чтение текста. Если необходимо наложить текст на недостаточно темное или светлое изображение, можно повысить его удобочитаемость несколькими способами.

Глава 10. Построение сайта  271

Например, обработать изображение, чтобы затемнить его. Лично я обычно применяю к изображению темный градиент и стиль слоя в программе Illustrator или Photoshop. На рис. 10.10 показан градиент без применения стиля слоя, а на рис. 10.11 — с его применением. Стиль слоя накладывает градиент на изображение, делая его более светлым или темным и обладающим большей или меньшей контрастностью, как показано на рис. 10.12. С помощью градиента эти эффекты могут быть применены к изображению частично, чтобы повысить удобочитаемость

Рис. 10.10. Черно-белый градиент, степень непрозрачности которого составляет 100 %, как видно в соответствующем интерфейсе программы Illustrator. Черная точка градиента сдвинута ближе к его середине и дальше от чистого черного цвета

272  Часть III. Элементы визуального дизайна наложенного на него текста. В программах Adobe Illustrator или Photoshop этих эффектов можно добиться путем регулирования степени непрозрачности. В приложении Figma аналогичные функции доступны в разделе Layer UI.

Рис. 10.11. Чтобы избавиться от дымки, вызванной черно-белым градиентом, сделаем обе точки градиента черными. Степень непрозрачности одной из них уменьшим до 0 %, а другую оставим на уровне 100 %. После настройки градиента можем скорректировать степень его непрозрачности и выбрать стиль слоя. В качестве стиля слоя оставим вариант Normal (Нормальный) и уменьшим общую степень непрозрачности до 85 %, чтобы добиться желаемого эффекта

Глава 10. Построение сайта  273

Еще один способ — добавить позади текста фигуру, залитую сплошным цветом, и оценить цветовой контраст между текстом и его фоном. Это является наиболее простым способом обеспечения удобочитаемости текста.

Стиль слоя: Normal (Нормальный), непрозрачность 85 %

Стиль слоя: Multiply (Умножение), непрозрачность 85 %

Стиль слоя: Color Burn (Затемнение основы), непрозрачность 85 %

Стиль слоя: Overlay (Перекрытие), непрозрачность 85 %

Рис. 10.12. Мы можем применять к черному градиенту на изображении различные стили слоя для получения желаемых эффектов

10.7. Выбор и применение цветовой палитры Предположим, клиент хочет добавить на сайт немного цвета, не желая использовать нейтральную палитру на основе только черных оттенков. Многие люксовые бренды предпочитают использовать строгую палитру, состоящую из черного, белого и серого цвета, но этот клиент работает в туристической отрасли, а путешествия ассоциируются с чем-то красочным. Тем не менее ему нужна несколько приглушенная цветовая палитра, которая не является слишком яркой или кричащей. Синий — это нейтральный цвет с точки зрения вызываемой эмоциональной реакции. Это самый беспроигрышный вариант, если нет уверенности

274  Часть III. Элементы визуального дизайна в выборе цвета для бренда. В качестве основного цвета будем использовать приглушенный синий с чуть сниженной насыщенностью. Используя приемы построения цветовой палитры, описанные в предыдущей главе, создадим несколько оттенков основного цвета. Синий цвет является дополнительным по отношению к желтому; в данном случае в качестве дополнительного цвета применим золотисто-желтый. Он не является слишком ярким и кричащим, но одновременно служит хорошим акцентным цветом, способным направлять внимание посетителя по сайту. Он также позволяет привлечь внимание к тем элементам интерфейса, с которыми пользователю предстоит взаимодействовать, например, при поиске туристических пакетов. Готовая цветовая палитра показана на рис. 10.13. Теперь применим выбранные цвета. На сайте довольно много изображений, поэтому не стоит перегружать цветом фон разделов, так как это может загрязнить дизайн, особенно в том случае, если основной синий или акцентный цвет будет использоваться в полную силу. На главной странице не так уж много элементов пользовательского интерфейса, к которым можно было бы применить цвет. Применим фирменный синий цвет для оформления заголовка и футера, а навигацию разместим под заголовком на отдельной панели с фоном приглушенного синего цвета. Благодаря такому расположению заголовок не будет казаться слишком тяжелым или перегруженным из-за своей высоты. Акцентный цвет появится в оформлении кнопки поиска и элементов слайдера «Популярные пакеты». Это позволит привлечь внимание пользователя к следующему разделу страницы. То же самое сделаем с кнопкой в разделе «Групповые поездки». Этот последний цветовой штрих будет направлять внимание пользователя в оставшейся части страницы. Чтобы еще больше отделить раздел «Преимущества бронирования у нас» от раздела «Популярные пакеты», используем в качестве его фона самый светлый из наших голубых оттенков. Наконец, необходимо подумать о цвете шрифтов. Назначим основной синий цвет для оформления заголовков и темно-серый для оформления основного текста. Что касается надписей на различных элементах пользовательского интерфейса, например на кнопках, то для них выберем белый цвет, который послужит завершающим цветовым штрихом при оформлении главной страницы.

Глава 10. Построение сайта  275 РОСКОШНЫЙ ЛОГОТИП

Рис. 10.13. После определения цветовой палитры начнем использовать ее для задания иерархии страницы. Золотистый акцентный цвет позволяет выделить области, на которых необходимо сосредоточить внимание пользователя, и направить его далее по странице

276  Часть III. Элементы визуального дизайна

10.8. Завершающие штрихи Применение цветовой палитры является последним этапом сборки сайта. В качестве завершающих штрихов добавим несколько иконок в раздел «Преимущества» и на кнопку поиска. Выбор иконок аналогичен выбору изображений. Чтобы обеспечить целостность дизайна, следует выбирать иконки из одного набора, чтобы все они имели одинаковую толщину штриха или стиль оформления. На рис. 10.14 показан готовый дизайн нашего сайта для настольных браузеров.

  

Рис. 10.14. Использование всего, о чем говорилось в предыдущих главах, позволило нам получить готовую версию дизайна сайта для настольных браузеров

Глава 10. Построение сайта  277

10.9. Отзывчивый дизайн При создании версии сайта для настольных браузеров мы использовали 12-колоночную сетку; для планшета мы можем использовать 8-колоночную сетку, а для телефона — 4-колоночную. Макеты для планшетов и телефонов будут служить разработчикам ориентиром в плане того, как должен выглядеть сайт на экранах разных размеров. Соответствующие значения ширины области просмотра также послужат контрольными точками, заданными в CSS-файле для указания момента, когда макет должен адаптироваться под экран другого размера. Веб-платформы для построения макетов продвинулись в своем развитии настолько далеко, что теперь, в зависимости от потребностей разрабатываемого сайта, можно не задавать при верстке строгие контрольные точки в медиазапросах, такие как @media (min-width: 768px). Браузеры и язык CSS способны легко создавать резиновые и отзывчивые макеты с помощью инструментов CSS Grid и Flexbox. Если на сайте содержится много компонентов пользовательского интерфейса помимо текста и изображений (например, аналитические графики), то легко задать соответствующие точки для большего контроля. Энди Белл, глава Set Studio, выступил на одной из конференций с докладом об использовании возможностей браузера для повышения адаптивности макета. Его выступление доступно на YouTube по адресу https://www.youtube.com/watch?v=5uhIiI9Ld5M.

10.9.1. Дизайн сайта для планшета, восьмиколоночная сетка Разработка дизайна сайта для планшета может оказаться непростой задачей, поскольку размеры экрана одних планшетов сопоставимы с размерами небольшого ноутбука, а другие лишь немногим превосходят самые крупные из современных телефонов. Мы разработаем дизайн, ориентированный на планшет большего размера, поскольку именно с ним могут возникнуть проблемы. Напомню, наша цель — добиться, чтобы при сжатии сайта в небольшом горизонтальном пространстве он оставался читаемым и не требовал значительных изменений для повышения удобства использования. Клиент хочет получить макет, демонстрирующий то, как его сайт будет выглядеть на планшете и мобильном телефоне, поэтому построим восьмиколоночную сетку и адаптируем под нее разработанный ранее дизайн. Будем использовать планшет с областью просмотра шириной 768px и высотой 1024px, а слева и справа от основного контейнера добавим поля величиной 32px. Ширину интервала между колонками (желоб) зададим равной 16px. Благодаря нашим усилиям сайт легко масштабируется по размеру планшета, поэтому в него не придется вносить слишком много изменений. Дизайн сайта для планшетов показан на рис. 10.15–10.17.

278  Часть III. Элементы визуального дизайна

Рис. 10.15. Накладываем восьмиколоночную сетку и немного изменяем ширину плиток и строку поиска

Рис. 10.16. Дизайн сайта без наложения сетки

Рис. 10.17. Отображение нижней    половины страницы на планшете

Глава 10. Построение сайта  279

10.9.2. Дизайн сайта для мобильного устройства, четырехколоночная сетка При разработке дизайна сайта для мобильного телефона очень удобно создавать систему сетки на скриншоте его экрана. Это помогает представить устройство, для которого разрабатывается дизайн, особенно если учесть, что оно является очень компактным по сравнению с планшетом и настольным компьютером. Создавая дизайн в артборде той или иной программы даже при использовании правильных размеров можно легко упустить из виду контекст, для которого это делается. На большом экране при уменьшении масштаба дизайн может выглядеть вполне нормально, но его будет не очень удобно использовать, это показано на рис. 10.18.

Рис. 10.18. Если уменьшить масштаб страницы без внесения изменений в ее дизайн, то она станет менее читабельной    и не очень удобной для использования

Создавая версию сайта для мобильных телефонов, мы стремимся к тому, чтобы по ней было легко перемещаться с помощью большого пальца. Точки соприкосновения в таком дизайне должны быть крупными. Не стоит вынуждать пользователя увеличивать масштаб страницы, для того чтобы щелкнуть по ссылке или нажать на кнопку. В данном случае крупнее значит лучше. При разработке макета, который мы покажем нашему клиенту, будет использоваться телефон с областью просмотра шириной 360px и высотой 640px. Ширина полей и желоба будет равна 16px. На основе этого 12-колоночного макета мы можем легко создать четыре группы по три колонки, чтобы получить четыре больших столбца, как показано на рис. 10.19.

280  Часть III. Элементы визуального дизайна

Рис. 10.19. Мы можем создать 4-колоночную сетку из 12-колоночной. При этом надо не забыть убрать внешние поля    у четырех столбцов

На рис. 10.20–10.22 показана четырехколоночная сетка и скорректированный макет. Основная цель сайта заключается в том, чтобы побудить пользователей найти туристическую путевку. Учитывая это, увеличим размер поисковой

Рис. 10.20. Скорректирован размер фрагментов содержимого, чтобы вписать их в уменьшенное пространство 4-колоночной сетки

Рис. 10.21. Мобильная версия сайта без наложения сетки

Глава 10. Построение сайта  281

Рис. 10.22. Нижняя половина сайта после   изменения сетки

строки, а для поддержания баланса вместо того, чтобы пытаться втиснуть три компонента разделов «Преимущества» и «Популярные пакеты» в маленький экран, расположим их друг над другом. Это создаст дополнительное пространство и облегчит процесс взаимодействия с сайтом с помощью большого пальца. Также преобразуем раздел «Преимущества» в слайдер, по которому пользователи смогут перемещаться, как по разделу «Популярные пакеты». Надо постараться максимально упростить процесс использования версии сайта для мобильных телефонов и сделать ее удобной для навигации. Для облегчения этой задачи можно увеличить фрагменты контента до размера области просмотра.

10.9.3. Дизайн по принципу Mobile First При разработке веб-сайта многие специалисты используют технику, которая называется mobile-first design (дизайн по принципу «сначала мобильные»). Они начинают с проектирования версии сайта для самого маленького экрана, после чего переходят к созданию версии для настольных компьютеров. Такой подход позволяет дизайнерам сосредоточиться на наиболее важных аспектах пользовательского опыта. Нельзя забывать, к чему стремятся посетители сайта. При разработке версии для небольшого экрана следует отталкиваться от того контента, который поможет пользователям в достижении поставленных целей.

282  Часть III. Элементы визуального дизайна

Резюме Бизнес-требования к контенту помогают разработчикам приступить к группировке и расположению содержимого в вайрфрейме. После одобрения вайрфреймов клиентом можно приступать к доработке дизайна. При создании дизайна версии сайта для настольного компьютера 12-колоночные сетки обеспечивают большую гибкость. Если вы затрудняетесь с выбором размеров сетки, воспользуйтесь одним из множества онлайн-генераторов. Эти инструменты помогут вам определиться с шириной контейнера, величиной полей и отступов (желобов). Несколько таких генераторов перечислено в приложении. Определение базовой линии — это первый шаг в задании вертикального ритма сайта. Базовая линия влияет на высоту строки в шкале размеров шрифтов и может использоваться для вычисления размеров полей и отступов для остальных элементов сайта. При расчете этих величин используйте значения, кратные расстоянию между базовыми линиями. При выборе изображений и иконок следует отдавать предпочтение тем, которые обладают сходством в плане обработки и дизайна. Не смешивайте изображения с разными фотоэффектами и не выбирайте иконки, выполненные в разных стилях. Как правило, настольный сайт без особых проблем адаптируется к планшету, однако создание версии для мобильного телефона требует более тщательного продумывания и приоритизации фрагментов, отображаемых на небольших экранах.

Часть IV После разработки визуального дизайна Теперь, когда мы овладели основными принципами дизайна и создали дизайн сайта, пришло время оценить его готовность к передаче в разработку. Достигнув стадии разработки, посмотрим на то, как наши решения влияют на пользовательский опыт. Цикл проектирования не заканчивается созданием макета: этап разработки является частью этого цикла. В главе 11 мы вновь обратимся к основным принципам создания пользовательского опыта и познакомимся с циклом проектирования. В ней поговорим об определении готовности дизайна к тестированию, рассмотрим ряд наиболее распространенных его видов и обсудим способы применения его результатов. Заключительная 12 глава посвящена веб-разработке, то есть техническому воплощению визуального дизайна. Веб-разработка является важнейшей частью процесса проектирования пользовательского опыта. Именно на этом этапе пользователи начинают взаимодействовать с вашим сайтом. Если вы планируете постоянно вносить в сайт обновления, то этот этап является началом нового цикла. Теперь можно вернуться к проведению исследований, чтобы убедиться в том, что созданный дизайн соответствует изначально сформулированным требованиям, и приступить к следующей итерации.

11

Тестирование, проверка и итерации

В этой главе 33 Оценка готовности дизайна к тестированию. 33 Виды тестирования и возможность их применения. 33 Приоритизация результатов тестирования.

Как уже говорилось в главе 4, посвященной проведению исследований на этапе проектирования пользовательского опыта, процесс разработки дизайна является итеративным. Там мы обсуждали итеративный процесс, реализуемый на ранних стадиях разработки дизайна, то есть до создания выверенной до пикселя версии макетов. Именно эти макеты разработчикам предстоит превратить в работающий сайт. Основное внимание на первых стадиях проектирования уделяется определению пользовательских сценариев, связанных с решением задач. Такое раннее тестирование очень важно и может выполняться с использованием низкодетализированных макетов. Однако проводить тестирование можно не только на ранних этапах процесса разработки дизайна. Важно обращаться к нему и после создания выверенных до пикселя финальных макетов. Фокус внимания при проведении тестирования на более поздних этапах зависит от того, на какой стадии итеративного процесса разработки дизайна вы находитесь и чего вы ожидаете от результатов тестирования.

Глава 11. Тестирование, проверка и итерации  285

11.1. Цикл проектирования Как и в случае со всеми остальными стадиями проектного цикла, в тестировании дизайна должны участвовать дизайнеры, разработчики и менеджер по продукту, который определит, какие аналитические показатели необходимо отслеживать для получения представления о потребителях. Если вы работаете в одиночку на протяжении всего процесса проектирования и разработки, то вам необходимо внедрить аналитику в посещаемые пользователями страницы и пользовательские сценарии, чтобы понять, как посетители используют ваш продукт. Например, клиент предоставил вам данные, отражающие регулярные всплески числа регистраций или авторизаций в определенной точке пользовательского сценария. После внедрения новой версии дизайна вам необходимо будет отслеживать количество регистрирующихся или входящих в систему пользователей. Снижение или стабилизация их количества будет свидетельствовать о наличии проблемы в новом пользовательском опыте. Она может быть связана с проблемами юзабилити или навигации, которые не были учтены при разработке нового дизайна. Все это хорошо, но когда именно следует приступать к тестированию?

11.1.1. Замена существующего дизайна Если вы уже завершили весь цикл разработки проекта и запустили сайт в производство, то тестирование должно быть направлено на оценку удобства использования нового интерфейса по сравнению со старым. При этом необходимо убедиться в том, что пользовательский опыт не ухудшился. Его ухудшение может привести к росту числа негативных отзывов клиентов, затруднить выполнение их задач, а если сайт что-либо продает, — негативно повлиять на уровень продаж и доходов компании. Вы можете протестировать новую версию дизайна, привлекая пользователей к выполнению задач в среде, инсценирующей обычный пользовательский опыт, наблюдая при этом, как они используют продукт, и задавая им вопросы. Полученные в ходе этих сессий отзывы следует использовать для приоритизации проблем и обновления дизайна перед реализацией нового опыта на уже работающем сайте. Еще одним вариантом является проведение A/B-тестирования, в ходе которого пользователям реального сайта демонстрируются различные варианты дизайна. Подробнее об A/B-тестировании мы поговорим в подразделе 11.2.3.

11.1.2. Минимально жизнеспособный продукт Минимально жизнеспособный продукт (MVP, minimum viable product) представляет собой раннюю итерацию проекта, удовлетворяющую базовым требованиям.

286  Часть IV. После разработки визуального дизайна Я сталкивалась с термином MVP в двух разных карьерных сферах и пришла к выводу, что в зависимости от рода деятельности человека он означает разные вещи. Менеджер по продукту в сфере технологий понимает под MVP функционирующий продукт. Это может быть содержащая ошибки бета-версия, которую клиенты используют, предоставляя обратную связь. Когда я работала в сфере дизайна, MVP означал первую итерацию макета, выверенного до каждого пикселя. После одобрения вайрфрейма заказчиком я добавляла визуальные элементы и воплощала сайт в жизнь. Затем полученные макеты можно было предоставлять на суд пользователей. Существуют инструменты, позволяющие сделать макет кликабельным без написания кода и имитировать настоящий пользовательский сценарий. Такой подход существенно упрощает тестирование визуального дизайна любого MVP.

11.1.3. Оценка готовности дизайна к тестированию Как человек, который занимался дизайном всего, начиная от инфографики и заканчивая инструментами для разработчиков, я могу утверждать, что вы вряд ли когда-либо сочтете свой дизайн законченным и будете стремиться постоянно вносить в него небольшие изменения. По словам дизайнеров, им приходится создать от 10 до 20 вариантов дизайна, прежде чем решить, что у них есть что показать клиенту. Возможно, это связано с тем, что мы являемся для себя самыми строгими критиками. Простейшим критерием, по которому можно определить готовность продукта к тестированию, является соответствие дизайна требованиям, определенным в самом начале реализации проекта. Если он им соответствует, но вы все еще вносите небольшие коррективы, то лучшее из того, что можно сделать, — это прекратить доработку и начать тестирование. Получайте обратную связь от пользователей и корректируйте дизайн по мере необходимости; в противном случае вы будете стремиться сделать дизайн идеальным, прежде чем кому-то его показать. Однако в данной сфере деятельности нет ничего идеального. Всегда найдутся способы улучшения и другие подходы к решению задач. Убедитесь в том, что требования проекта выполнены, и получите от клиента одобрение MVP, а затем приступайте к тестированию и построению продукта.

11.2. Виды тестирования Дизайн можно протестировать различными способами. Определение готовности к тестированию и способ его проведения зависит от того, что именно подвергается анализу. Рассмотренные далее виды тестирования — это лишь некоторые из доступных методов оценки визуального дизайна или степени удобства использования уже созданного и функционирующего в интернете продукта.

Глава 11. Тестирование, проверка и итерации  287

11.2.1. Проведение интервью с клиентами Проведение интервью с клиентами и получение их отзывов о визуальных элементах и пользовательских сценариях — основной способ тестирования статических дизайнов, то есть тех, которые еще не реализованы в виде кода и не развернуты во Всемирной паутине. Этот шаг важен для определения того, хороший ли у вас пользовательский опыт или еще необходимы улучшения. Сначала надо определиться с тем, какую обратную связь желательно получить. Возможно, вас интересует то, какие эмоции испытывают пользователи во время работы с вашим сайтом или продуктом. Какие ощущения вызывают у них ключевые аспекты дизайна: цвет, шрифты и изображения? Затрудняют ли визуальные элементы навигацию по сайту? Не кажется ли им, что дизайн перегружен? Понятна ли им иерархия? Ответы на эти вопросы помогут вам улучшить пользовательский опыт. Также следует задавать вопросы о пользовательских сценариях. Легко ли посетителям находить то, что им нужно? Насколько эффективно элементы дизайна направляют их внимание по странице? Удается ли им найти главный призыв к действию и перейти к следующему шагу сценария? Сценарий интервью должен быть ориентирован на тот тип обратной связи, который вас интересует. При проведении интервью, касающегося визуальных элементов, имеет смысл задавать конкретные вопросы и следовать строгому регламенту, хотя это и не обязательно. Тестирование пользовательского сценария может быть спонтанным. Например, стоит попросить участника рассказать о том, как он собирается решать свою задачу, опираясь на предоставленные макеты. Затем задайте вопросы, касающиеся описанных им шагов, и сделайте подробные записи (или запишите всю сессию с разрешения участника, чтобы иметь возможность обратиться к ней позже).

11.2.2. Тестирование в производственной среде Иногда график работы над проектом не предусматривает времени на тестирование статического дизайна. Вместо этого приходится запускать то, что есть, а затем уже проводить тестирование. В таких случаях необходимо позаботиться об инструментарии для отслеживания ключевых показателей, свидетельствующих об успехе или о проблемах, мешающих посетителям использовать сайт. Существует множество аналитических инструментов, среди которых весьма распространенным является сервис Google Analytics, предоставляющий огромное количество информации о поведении пользователей на сайте. Однако необходимо помнить, что у него есть некоторые проблемы, связанные с Генеральным регламентом ЕС о защите персональных данных (General Data Protection

288  Часть IV. После разработки визуального дизайна Regulation, GDPR). При внедрении аналитики нужно убедиться в том, что используемые инструменты соответствуют местному законодательству. Например, Netlify обеспечивает анонимное отслеживание данных. Netlify соответствует требованиям GDPR, но не позволяет отслеживать такие метрики, как число кликов и показатель отказов. Другие провайдеры, в частности Segment и Amplitude, предоставляют углубленный анализ воронки конверсии пользователей, что позволяет увидеть путь, который те проходят при использовании продукта. С помощью этих инструментов также можно получить информацию о том, какие кнопки нажимают. Если вы реализуете проект для клиента, будучи фрилансером, обсудите его потребности, связанные с аналитикой. Скорее всего, задача настройки соответствующего инструментария будет возложена на вас. При работе в команде этим может заниматься отдельная группа. В любом случае важно определить критерии успеха и необходимости во внесении изменений для его достижения. Рассмотрим некоторые виды тестирования, направленные на оценку дизайна и удобства использования сайта или отдельной функции.

11.2.3. A/B-тестирование Если при реализации проекта вы переходите от макета к функционирующему MVP без всяких тестов, то вы можете провести так называемое A/Bтестирование для выбора дизайна, способствующего достижению бизнес-целей. A/B-тестирование включает в себя реализацию различных вариантов дизайна определенной части интерфейса и их демонстрацию разным группам представителей потенциальной аудитории. Например, тот или иной призыв к действию может быть оформлен несколькими способами, но пока неизвестно, какой из них окажется более эффективным и приведет к увеличению числа кликов по соответствующему элементу. В таком случае реализуются два варианта дизайна, с которыми будут сталкиваться посетители. С помощью аналитики вы можете отследить, какой из вариантов работает лучше, и усовершенствовать пользовательский опыт с учетом полученных результатов. Скажем, можно показать разные заголовки или основные разделы двум разным аудиториям и проследить, какие из вариантов обеспечивают наивысшую степень вовлеченности пользователей (рис. 11.1). После этого вы сможете внести изменения, чтобы предоставить доступ к этому дизайну остальным посетителям. A/B-тестирование является хорошим вариантом и для того случая, когда проект связан с заменой существующего дизайна. Хотя результаты ранних исследований пользовательского опыта позволяют получить представление об ожиданиях посетителей сайта, самой лучшей обратной связью являются результаты отслеживания эффективности дизайна на этапе производства. Вместо того чтобы сразу развертывать его новую версию, вы можете провести A/B-тестирование, чтобы убедиться в том, что она работает по крайней мере не хуже текущей.

Глава 11. Тестирование, проверка и итерации  289

Рис. 11.1. В процессе A/B-тестирования два уникальных варианта дизайна демонстрируются разным пользователям действующего сайта

Сбор данных о том, как люди используют новый дизайн, является ключевым моментом при определении того, следует ли полностью заменить текущую версию новой или достаточно внести в нее изменения и провести дополнительное тестирование. Для проведения A/B-тестирования существует множество инструментов. Список некоторых из них приводится в приложении.

11.2.4. Поэтапное развертывание Подобно A/B-тестированию, поэтапное развертывание является способом тестирования проектов на этапе производства. Этот подход является наиболее эффективным в случае разработки продукта, который предполагается непрерывно совершенствовать. В случае запуска нового сайта проведение поэтапного развертывания не имеет особого смысла. Вам необходима существующая база пользователей, работающих с вашим сайтом или продуктом. Только тогда вы сможете постепенно внедрять обновления. Предположим, необходимо пересмотреть пользовательский опыт на веб-сайте. Чтобы выявить проблемы до того, как новый опыт будет полностью реализован, его можно распространить на 5 % пользователей, а затем постепенно увеличивать этот процент. Опираясь на результаты проведенных тестов, вы можете определиться со своими дальнейшими действиями. Этими результатами могут быть количество кликов, число посетителей, которые быстро покидают сайт (хороший показатель для оценки проблем с производительностью) или доходят до страницы оформления заказа, но не завершают транзакцию (что может объясняться проблемой с производительностью или с оплатой). Все эти результаты можно использовать для определения плана дальнейших действий, которые могут сводиться к продолжению исследования или непосредственно к редизайну.

290  Часть IV. После разработки визуального дизайна Есть вероятность, что придется вернуться к началу и провести дополнительные исследования с участием пользователей, чтобы собрать больше данных перед дальнейшим внедрением. А возможно, результаты тестирования не позволят принять решение о целесообразности продолжения процесса внедрения. Например, вы внедряете новую функцию, которая не приводит к росту числа ее пользователей. Следующим шагом является выяснение причины, по которой эта функция не используется так, как вы ожидали. Может статься, ее не так легко обнаружить, как вы думали. В этом случае следует снова обратиться к клиентам и провести дополнительные интервью или тесты для оценки возможности ее обнаружения. Несмотря на то что поэтапное развертывание и A/B-тестирование выполняются на стадии разработки и не фокусируются исключительно на визуальном дизайне, эти методы позволяют убедиться в том, что дизайн работает так, как нужно. Реализация проекта предполагает сотрудничество команд дизайнеров, разработчиков и создателей продукта, и именно на этапе тестирования все эти три команды непосредственно взаимодействуют между собой.

11.2.5. Методы первоначального исследования пользователей Выше в этой главе мы сосредоточились на методах тестирования, применяемых уже после разработки дизайна. Но и на этом этапе, и на промежуточных являются актуальными методы первоначального исследования пользователей, рассмотренные в главе 4. Если вы работаете над продуктом, находящимся в процессе непрерывной разработки, то интервью с пользователями является тем источником данных, к которому можно и нужно постоянно обращаться. Это не просто инструмент, который применим только на начальных стадиях реализации проекта; с его помощью выполняется итеративное тестирование с участием представителей целевой аудитории.

11.3. Применение результатов тестирования После тестирования дизайна, будь то в производственной среде или нет, необходимо оценить полученные результаты. При проведении A/B-тестирования аналитические данные сами укажут на предпочтительный вариант дизайна, поэтому принять решение о том, какой именно дизайн следует внедрять, будет очень легко. Если результаты тестирования разных вариантов окажутся примерно одинаковыми, то это будет свидетельствовать о том, что вам необходимо вернуться к началу и разработать новый дизайн, который обеспечит нужные вам результаты. При тестировании функции или сайта в производственной среде аналитика является ключевым фактором для оценки успеха. В зависимости от используемого

Глава 11. Тестирование, проверка и итерации  291

инструмента вы можете проследить то, как человек выполняет ту или иную задачу, и выявить те этапы, на которых у него возникают проблемы. Собранные данные также могут помочь при проведении дополнительного тестирования в рамках интервью с пользователями. Все эти инструменты взаимосвязаны и помогают достичь желаемых результатов. При оценке визуальных аспектов дизайна вам может быть непросто отсеять шум, если вы не знаете, на что следует обращать внимание. У каждого человека есть личные предпочтения в отношении таких вещей, как размер и цвет (особенно цвет), а отзывы наподобие «мне не нравится фиолетовый просто потому, что он мне не нравится» вам не помогут. Уточнив у людей, почему им что-то не нравится, можно получить более конструктивные результаты. Если выбранный вами цвет не нравится одному человеку, то вам не стоит ориентироваться на его отзыв. Однако получение множества подобных отзывов от группы участников интервью говорит о том, что в этом вопросе стоит разобраться подробнее. При тестировании визуального дизайна следует обращать внимание на общие темы в ответах участников интервью и разрабатывать на их основе план дальнейших действий. Способ приоритизации отзывов зависит от конкретного проекта. Как правило, следует считать приоритетными отзывы нескольких членов группы, объединенные общей темой, и фокусироваться на обратной связи, свидетельствующей о том, что тот или иной аспект визуального дизайна ухудшает опыт пользователя продукта или сайта.

Резюме Дизайнеру бывает трудно определить готовность своего продукта к тестированию. Это связано с особенностями отношения создателя к собственным творениям. Важно помнить о том, что дизайн можно улучшать всегда и постоянно, поскольку его разработка является итеративным процессом. Тестирование дизайна можно начинать сразу после создания минимально жизнеспособного продукта, который представляет собой статичный макет или функционирующий сайт, пусть даже неотшлифованный и содержащий ошибки. Дизайн считается готовым к тестированию, если он удовлетворяет требованиям, определенным на начальных этапах реализации проекта. Для получения обратной связи относительно аспектов визуального дизайна лучше всего подходят интервью с клиентами. Вы можете провести качественное исследование, выявив общие мнения в плане того, какие чувства вызывает у пользователей созданный вами визуальный дизайн, и скорректировать его затем, опираясь на эти оценки.

292  Часть IV. После разработки визуального дизайна Отзывы по поводу визуального дизайна часто бывают основаны на личных предпочтениях. Старайтесь отличать такие отзывы от действенной обратной связи, способной повлиять на пользовательский опыт, выясняя причину негативного отношения участника исследования к тому или иному аспекту визуального дизайна. При проведении A/B-тестирования двум группам пользователей демонстрируются разные варианты дизайна, внедренные в производственную среду, и оценивается, насколько один из вариантов превосходит другой по заданным параметрам. Поэтапное развертывание может быть реализовано только в том случае, если проект уже находится в производстве. При этом вы демонстрируете обновления небольшому проценту пользователей и оцениваете их эффективность перед дальнейшим развертыванием. Результаты тестирования нужно проанализировать, чтобы выявить общие мнения в полученной качественной обратной связи. Только после этого принимается решение о необходимости внесения изменений в визуальный дизайн. В случае сбора количественной обратной связи, если результаты окажутся неубедительными, необходимо будет провести дополнительное тестирование или пересмотреть дизайн для достижения лучших результатов. Необходимо приоритизировать негативные отзывы, связанные общей темой, а также любые данные и обратную связь, свидетельствующие о том, что созданный дизайн мешает достижению тех целей, для реализации которых он предназначен.

12

Решения разработчиков и пользовательский опыт

В этой главе 33 Написание кода как часть цикла проектирования. 33 Принятие ключевых решений при написании кода с учетом их влияния на пользовательский опыт. 33 Оценка возможностей создания хорошего веб-опыта на базе HTML.

Разработчиков следует привлекать к реализации проекта еще на этапе планирования. Ведь именно они воплощают дизайн в жизнь. Без кода, написанного разработчиками, не будет никакого пользовательского опыта, на улучшении которого можно было бы сосредоточиться. Без кода приложения и веб-сайты были бы статичными объектами, на которые можно смотреть, но с которыми нельзя взаимодействовать. Разработка является частью процесса проектирования, поскольку технические решения, принимаемые разработчиком, оказывают решающее влияние на создаваемый пользовательский опыт. Знание основных принципов создания визуального дизайна и проектирования пользовательского опыта, почерпнутое на этапах исследования и планирования, поможет вам как разработчику более эффективно взаимодействовать с коллегами. Вы сможете обсуждать технические ограничения и потенциальное негативное влияние функций интерфейса или анимации на пользовательский опыт, во всяком случае, ту их часть, которая обусловлена кодом. При этом вы будете иметь

294  Часть IV. После разработки визуального дизайна более ясное представление о причинах принятия того или иного дизайнерского решения. Такое понимание поможет вам участвовать в дискуссиях и находить компромиссы в тех случаях, когда предложенные дизайнерские решения невозможно будет реализовать (а также объяснять почему). Выбор, который вы делаете как разработчик, представляет собой дизайнерское решение, а код, который вы пишете, должен быть максимально тщательно продуман.

12.1. Влияние написанного кода Без кода, воплощающего дизайн в жизнь, не было бы ни опыта, ни пользователей, которых можно было бы привлечь к участию в юзабилити-тестировании. Решения, принимаемые при написании кода, столь же важны для пользовательского опыта, как и определение пользовательских сценариев и обеспечение удобства дизайна на практике. Выбранные вами инструменты и фреймворки могут повлиять на производительность и время загрузки сайта. Если страница не реагирует на запросы или загружается слишком долго, пользователи, скорее всего, покинут ваш сайт, что негативно скажется на доходах в том случае, если этот сайт создан для продажи того или иного товара. Внедрение функциональных возможностей, зависящих от сторонних разработчиков, а не от вас, также может повлиять на пользовательский опыт. Кроме того, сторонние инструменты могут создавать уязвимости в системе безопасности, которые, хоть и не связаны с дизайном, но тоже влияют на общее восприятие бренда и могут иметь пагубные последствия. Вы можете выбрать одну из множества библиотек с готовыми компонентами и шаблонами, чтобы ускорить процесс разработки, но при этом важно понимать, что вы используете чужие решения. Оптимизированы ли они под создаваемый вами в данном проекте опыт? Удовлетворяет ли дизайн этих компонентов и шаблонов потребности пользователей? Может быть, и так, но их все равно необходимо протестировать. Существуют ли какие-то зависимости, которые необходимо учитывать при внедрении библиотеки? Могут ли они негативно сказаться на создаваемом пользовательском опыте? Все эти факторы влияют на впечатления пользователя от взаимодействия с разрабатываемым продуктом, сайтом или приложением. Код — это скелетная система и внутренние органы, поддерживающие жизнь проекта. Даже его внешний слой, то есть визуальный дизайн, зависит от CSS-кода.

12.1.1. Важность написания качественного HTML-кода Пользовательский опыт не ограничивается рамками визуального дизайна и пользовательских интерфейсов. Некоторые люди не используют мышь и клавиатуру

Глава 12. Решения разработчиков и пользовательский опыт  295

для навигации по веб-сайтам. Они применяют для этого устройства для чтения с экранов и другие вспомогательные технологии. Помните, что вы пишете свой код в том числе и для этой группы пользователей. А начинается все с написания кода HTML.

Семантический HTML-код В Twitter мне очень часто встречается один и тот же мем с вопросом о том, к какой разновидности разработчиков вы себя относите. При этом с одной стороны изображен вайрфрейм сайта, каждая ячейка которого обозначена тегом , а с другой — тот же вайрфрейм, в котором разные ячейки обозначены соответствующим семантическим HTML-тегом, например , или . Применение семантических элементов вместо тегов и правильных тегов заголовков в содержимом гарантирует, что людям, использующим вспомогательные технологии для получения доступа к сайту или приложению, будет удобно. Вспомогательные технологии анализируют ваш код, опираясь на семантические HTML-теги, чтобы максимально точно транслировать его конечному пользователю. Использование семантического HTML-кода имеет и ряд других преимуществ. Например, это упрощает другим разработчикам поисковую оптимизацию и поддержку кодовой базы. В конце концов, вы не можете знать, как именно каждый из пользователей будет обращаться к вашему сайту, однако написание семантического HTML-кода гарантирует создание наилучшего опыта для всех пользователей.

Последствия использования кода JavaScript вместо HTML и CSS При желании можно создать целый сайт на языке JavaScript и опубликовать его во Всемирной паутине. Разработчики так уже делали и будут делать. Однако обращение к JavaScript может негативно сказаться на опыте пользователя сайта или веб-приложения. Если у пользователя в браузере отключен JavaScript, то в зависимости от того, насколько активно код на этом языке применяется в проекте, этот посетитель сайта может столкнуться с ошибками. В 2020 году разработчик и консультант Хейдон Пикеринг продемонстрировал данный подводный камень, связанный с использованием JavaScript. Когда посетители заходили на его сайт (www.heydonworks.com) с включенным JavaScript, этот сайт не загружался, пока не отключался JavaScript, как показано на рис. 12.1. Многие люди писали ему в Twitter о том, что, когда они уходили с его сайта (JavaScript при этом оставался выключен), некоторые посещаемые ими ресурсы оказывались неработоспособными. Большинство пользователей интернета было бы этим недовольно. Несмотря на то что некоторые сайты требуют использования JavaScript для осуществления тех или иных видов взаимодействия, тот факт, что для этих сайтов не предусмотрено резервных вариантов на случай отключения

296  Часть IV. После разработки визуального дизайна JavaScript, свидетельствует о недостаточном внимании к различным категориям потенциальных пользователей этих сайтов или веб-приложений.

Рис. 12.1. В 2020 году консультант Хейдон Пикеринг разработал свой сайт таким образом, чтобы он не отображался при включенном    в браузере JavaScript

При воплощении дизайна в жизнь и обдумывании пользовательского опыта, обеспечиваемого разрабатываемым кодом, важно учитывать такие крайние случаи. Лучше работать с HTML и CSS и как можно меньше использовать JavaScript. Следует обеспечить основную функциональность сайта и применять JavaScript для расширения возможностей владельцев современных устройств. При таком подходе те люди, которые не используют современные устройства или которым по каким-то причинам необходимо отключить JavaScript, при любых обстоятельствах смогут беспрепятственно использовать продукт.

Глава 12. Решения разработчиков и пользовательский опыт  297

Прогрессивное улучшение начинается с семантического HTML-кода. Если CSS не загрузится, то содержимое страницы будет предоставлено пользователю с предусмотренными браузером стилями, примененными к семантическим HTMLтегам. Такой подход позволяет создать базовый опыт, дающий пользователям представление о визуальной иерархии содержимого. И оно будет обеспечиваться браузером так же, как в тех случаях, когда JavaScript-код по какой-то причине не загружается. А даже минимальный опыт всегда лучше, чем его полное отсутствие. Все эти вопросы необходимо обсудить с дизайнером на ранних этапах работы. Что произойдет, если CSS-код не загрузится? Что будет, если не загрузится JavaScript? Разработка плана действий на случай возникновения проблем позволит обеспечить более качественный пользовательский опыт и предотвратить раздражение посетителей в тех случаях, если что-то пойдет не так.

12.1.2. Производительность и загрузка страниц Приходилось ли вам открывать веб-страницу, которая загружалась слишком долго? Бывало ли так, что, дождавшись ее загрузки, вы обнаруживали, что остальная часть сайта работает медленно, неуклюже и является сложной для навигации? А сколько раз вы вообще покидали сайт, потому что просто не хотелось ждать? Одним из наиболее важных аспектов пользовательского опыта, который вы можете оценить самостоятельно, является производительность сайта. Насколько быстро загружается страница? Загружаются ли элементы страницы настолько долго, что макет изменяется в тот момент, когда пользователь пытается щелкнуть по какому-то из них? Я часто сталкиваюсь с такой проблемой. Бывает так, что я загружаю страницу и собираюсь щелкнуть по кнопке или ссылке, но в тот момент, когда я это делаю, макет смещается вследствие завершения загрузки какого-то элемента, и в итоге я щелкаю не там, где намеревалась. Подобный пользовательский опыт раздражает посетителей и увеличивает вероятность того, что они покинут сайт или приложение. Низкая производительность может не только создать негативные впечатления у пользователей, способные отрицательно сказаться на бизнесе заказчика, если они покинут сайт, не купив товар или не выполнив поставленной задачи. Она также может повлиять на поисковую оптимизацию и место вашего сайта или приложения в результатах поисковой выдачи. Низкая производительность может привести к тому, что ваш сайт окажется ниже в этом списке, а это будет означать снижение его видимости и уменьшение числа посетителей. Сервис Google предоставляет множество инструментов, позволяющих протестировать производительность сайта и получить обратную связь, в том числе в виде отчета Core Web Vitals, который можно использовать для улучшения пользовательского опыта. Например, отзывчивость и быстрая загрузка сайта являются

298  Часть IV. После разработки визуального дизайна признаками удобства его использования. Кроме показателей отзывчивости и времени загрузки страниц, отчет Core Web Vitals содержит множество других метрик, которые вы можете использовать в качестве статистических данных о пользовательском опыте, обусловленном особенностями построения сайта.

12.1.3. Веб-технологии, не имеющие кроссбраузерной поддержки Помимо разработки плана реагирования в случае проблем с загрузкой JavaScriptкода или с работой какой-то ключевой функции, также необходимо позаботиться о том, чтобы базовый пользовательский опыт не ухудшался при использовании веб-технологий, которые поддерживаются не всеми браузерами. Использование новых функций веб-платформ по мере появления их поддержки в браузерах — это отличный способ обеспечения актуальности дизайна и улучшения пользовательского опыта. Однако ключевым словом в данном случае является «улучшение»: весь опыт не должен страдать от отсутствия в чьем-то браузере поддержки какой-то одной функции. И здесь в игру снова вступает концепция прогрессивного улучшения. Позаботьтесь о базовой функциональности вашего сайта или приложения, а затем добавьте новые функции для обеспечения еще более качественного пользовательского опыта. Добавление этих функций может осуществляться разными способами. Вы можете использовать полифил или функциональный запрос @supports, который позволяет определить, поддерживает ли браузер ту или иную CSS-функцию. При этом следует применять именно этот набор CSS; в противном случае браузер вернется к использованию CSS вне функционального запроса. Подобное наслаивание — отличный способ опробовать новые функции, способствуя развитию веб-платформы и в то же время обеспечивая хороший пользовательский опыт для тех, кто работает с браузером, в котором эти новые функции еще не реализованы. Хотя все эти методы относятся к этапу разработки проекта, они крайне важны и для пользовательского опыта. Усилия, вложенные в создание хорошо спроектированного веб-сайта или приложения, окажутся бессмысленными, если этим сайтом или приложением нельзя будет пользоваться.

12.2. Продукты, ориентированные на разработчиков В зависимости от создаваемого вами продукта или сервиса частью вашей ауди­ тории пользователей могут являться разработчики, особенно если речь идет о продаже технологий или кода. Учитывая это, в дополнение к базовому пользовательскому опыту вам необходимо спроектировать опыт разработчиков. Каким

Глава 12. Решения разработчиков и пользовательский опыт  299

должен быть опыт разработчиков, использующих API или инструмент? Где будет находиться документация? Используется ли в этом продукте фирменный стиль бренда и принципы дизайна, на которых основан базовый опыт? Проектируя опыт, ориентированный на разработчиков, важно убедиться в том, что документацию легко найти, ценность продукта ясна, а код или API — хорошо задокументированы. Плохой опыт для разработчиков может привести к созданию плохого пользовательского опыта. Возьмем, к примеру, пользовательские элементы управления HTML-формами. В настоящее время, спустя 25 лет после их создания, группы, занимающиеся разработкой веб-стандартов, переделывают их, поскольку эти элементы были реализованы таким образом, что современные разработчики не могут придать им нужный стиль или настроить их в соответствии со своими потребностями. Те часы, которые разработчики тратят на воссоздание компонентов ради их стилизации, не оказываются потерянными для работы, которая могла быть направлена на улучшение других аспектов пользовательского опыта. Если вы создаете свой продукт для разработчиков, убедитесь в том, что его функции хорошо документированы, а дизайн продуман с учетом именно их потребностей, — не важно, идет речь об основном сайте или о подсайте, содержащем специализированную информацию. Создание хорошего пользовательского опыта начинается с обеспечения хорошего опыта для разработчиков. С точки зрения разработчиков, хороший опыт означает предоставление хорошей документации. Вне зависимости от того, имеется в виду сопроводительная документация в коде или подробное пошаговое руководство, эта документация жизненно важна для поддержания пользовательского опыта на протяжении длительного времени. Тем более, что код может быть передан другим разработчикам по разным причинам, и они вынуждены будут сопровождать продукт. Я видела, что происходит в тех случаях, когда API не документирован, а создавшие его инженеры давно покинули компанию. Остальным приходится часами разбираться в коде, пытаясь его задокументировать. Представьте, как бы вы себя чувствовали, если бы, будучи новичком на своей должности или в проекте, получили фреймворк или API, не предусматривающий документации. Вместо того чтобы сразу включиться в работу над продуктом, вам пришлось бы разбираться в чужом коде. Одна из ваших правок вполне могла бы вывести сайт из строя. Таким образом, плохой опыт для разработчиков рикошетом негативно влияет на опыт пользователей, а это именно то, чего мы все хотим избежать.

Резюме Создание дизайна и разработка являются взаимосвязанными процессами в работе над проектом. Без кода макеты веб-сайтов не имели бы никакого смысла. Это были бы просто красивые, но абсолютно нефункциональные интерфейсы.

300  Часть IV. После разработки визуального дизайна От выбранного способа написания кода зависит то, насколько удобным для пользователей будет созданный дизайн. Хороший веб-опыт начинается с использования семантического HTML-кода. Написание такого кода гарантирует хороший пользовательский опыт в том числе и для людей, обращающихся к сайту с помощью таких технологий, как, например, устройства для чтения с экранов. Код JavaScript может применяться при разработке веб-продуктов, однако его использование вместо HTML и CSS слишком часто оказывается неоправданным и может пагубно сказаться на пользовательском опыте в том случае, если JavaScript-код не загрузится или будет отключен в браузере. Высокая производительность и скорость загрузки страниц крайне важны для обеспечения качественного пользовательского опыта. Если страница загружается слишком долго, возрастает вероятность того, что пользователь просто покинет сайт. Низкая производительность способна негативно повлиять как на поисковую оптимизацию, так и на доходы компании. Используйте подход прогрессивного улучшения, обеспечив функциональность сайта на базовом уровне и постепенно добавляя новые функции для повышения качества пользовательского опыта. Убедитесь в том, что пользовательский опыт для разработчиков продуман так же хорошо, как и базовый опыт, особенно если разработчики составляют часть вашей пользовательской аудитории. Составляйте и поддерживайте хорошую документацию для разработчиков, чтобы им было легче использовать ваш сервис или код. Хороший опыт для разработчиков является важнейшим условием обеспечения качественного опыта остальных пользователей.

Приложение. Дополнительные ресурсы Пользовательский опыт Atlassian. Customer journey mapping // Atlassian Team Playbook. https://www. atlassian.com/team-playbook/plays/customer-journey-mapping. Basalmiq wireframing resources. https://balsamiq.com/learn/. Fong D. The S.M.A.R.T. user experience strategy // Smashing Magazine. September 13, 2011. https://www.smashingmagazine.com/2011/09/the-s-m-a-r-t-user-experiencestrategy/. Gibbons S. Journey mapping 101 // Nielson Norman Group. December 9, 2018. https:// www.nngroup.com/articles/journey-mapping-101/. Gray C. Better user research through surveys // UX Mastery. November 20, 2014. https://uxmastery.com/better-user-research-through-surveys/. Pernice K. User interviews: How, when, and why to conduct them // Nielson Norman Group. October 7, 2018. https://www.nngroup.com/articles/user-interviews/. Wireframe tooling. https://wireframe.cc.

Структура сетки и макет Bell A. Be the browser’s mentor, not its micromanager // All Day Hey! (YouTube). May 5, 2022. https://www.youtube.com/watch?v=5uhIiI9Ld5M. Doreng-Stearns N. Using F and Z patterns to create visual hierarchy in landing page designs // 99designs, 2016. https://99designs.com/blog/tips/visual-hierarchy-landingpage-designs/.

302  Приложение. Дополнительные ресурсы Gilyead J., Mudford T. Fluid grid calculator. https://utopia.fyi/grid/calculator/. Marcotte E. Responsive web design // A List Apart. May 25, 2010. https://alistapart. com/article/responsive-web-design/. McGrane K. Rolling out responsive // A List Apart. November 24, 2015. https:// alistapart.com/article/rolling-out-responsive/. Nielsen N. K. Grid calculator. http://gridcalculator.dk/. Pernice K. Text scanning patterns: Eyetracking evidence // Nielson Norman Group. August 25, 2019. https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/. Stimac S. Building web layouts for dual-screen and foldable devices // Smashing Magazine. March 3, 2022. https://www.smashingmagazine.com/2022/03/building-weblayouts-dual-screen-foldable-devices/.

Анимация CSS Triggers. https://csstriggers.com/. Head V. Accessible web animation: The WCAG on animation explained // CSS Tricks. September 22, 2020. https://valhead.com/2020/09/30/accessible-animation-thewcag-on-animation-explained/. Head V. Designing ‘invisible’ UI animations. May 7, 2015. https://valhead. com/2015/05/07/getting-to-invisible/. Head V. Including animation in your design system // Smashing Magazine. February 21, 2019. https://www.smashingmagazine.com/2019/02/animation-design-system/. Head V. UI animation and UX: A not-so-secret friendship // A List Apart. February 11, 2014. https://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship/. Mozilla. Animation performance and frame rate // MDN Docs. October 5, 2022. https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_ and_frame_rate https://developer.mozilla.org/ru/docs/Web/Performance/Animation_ performance_and_frame_rate.

Типографика Adobe Fonts (поиск по изображению). https://fonts.adobe.com/. Church J. Type scale generator. https://type-scale.com/. Font Squirrel. https://www.fontsquirrel.com/. Google. Google Fonts. https://fonts.google.com.

Приложение. Дополнительные ресурсы   303

Mills H., Weatherford D., Mills S. Font Pair. https://www.fontpair.co/. Pamental J. Typography tips. https://rwt.io/typography-tips. Penny L. Axis-Praxis Variable font playground. https://www.axis-praxis.org/. Sherman N. Variable fonts v0.2. https://v-fonts.com/. TypeType Foundry. https://typetype.org/. Wilson M. Trump’s old lawyers really, really love Comic Sans // Fast Company. October 8, 2019. https://www.fastcompany.com/90414127/trumps-old-lawyers-reallyreally-love-comic-sans.

Цвет Adobe Color. https://color.adobe.com/create/color-wheel. Barker M. A guide to modern CSS colors // Smashing Magazine. November 18, 2021. https://www.smashingmagazine.com/2021/11/guide-modern-css-colors/. Color Designer, Color palette generator from an image. https://colordesigner.io/colorpalette-from-image. Colorkit. Color palette generator. https://colorkit.co/color-palette-generator/. Verou L. LCH colors in CSS, what, why and how. https://lea.verou.me/2020/04/lchcolors-in-css-what-why-and-how/. April 4, 2020. Williams O. The expanding gamut of color on the web // CSS Tricks. May 27, 2020. https://css-tricks.com/the-expanding-gamut-of-color-on-the-web/.

Тестирование дизайна Chan N. A complete guide to accessibility tooling // Smashing Magazine. June 16, 2021. https://www.smashingmagazine.com/2021/06/complete-guide-accessibility-tooling/. Kadlec T. Understanding the true cost of client-side A/B testing.https://timkadlec. com/remembers/2021-01-12-cost-of-client-side-ab-testing/. January 12, 2021. Launch Darkly (A/B testing). https://launchdarkly.com/. Whitenton K. How to test visual design // Nielson Norman Group. June 17, 2018. https://www.nngroup.com/articles/testing-visual-design/.