Илья Сидоренко Дизайнер интерфейсов

9. Основные элементы интерфейса
В этой главе мы обсудим основные элементы, из которых формируется
интерфейс.
9.1. Навигация

---

Навигация – это своего рода карта, благодаря которой пользователь
ориентируется на сайте или в сервисе. Уделите ей достаточно времени,
а не слепо копируйте шаблонные варианты. Конечно, всегда полезно
проанализировать, какие паттерны используются в вашей отрасли, но
при этом старайтесь находить глубинную причину их использования.
Возможно, что-то более актуально для других сервисов, но абсолютно не
подходит вам.
Начните работу над навигацией в текстовом редакторе – так будет
проще вносить изменения. Начав в графическом редакторе, вы можете
остановиться на первом же варианте из-за недосмотра или лени.
Старайтесь, чтобы в навигации было не более трех уровней.
Хорошо подумайте над текстом. Чаще всего у пользователя возникают
проблемы с поиском контактной информации. Если в вашей компании
много филиалов, то логичнее вынести их на отдельную страницу. В
обратном случае адрес и номер телефона можно разместить в шапке,
футере или на странице «О компании».
При адаптиве пункты меню лучше сворачивать в иконку «гамбургер».
Единственное – вы можете оставить кнопки «Войти» или
«Зарегистрироваться» в одном ряду с логотипом, так как это ключевые
действия и хорошо, если у пользователя будет к ним быстрый доступ на
любом устройстве.
Не забывайте показывать, где пользователь находится в данный момент.
Это можно сделать цветом, степенью прозрачности, подчеркиванием или
подсвечиванием.
Хороший способ предоставить пользователю доступ к навигации из
любого места – «приклеить» ее к верху страницы. Но если ваш сервис
подразумевает активную работу с контентом (изучение графиков) или
потребление информации (чтение статей), то навигация может отнять
много ценного места. В этом случае лучше скрывать ее по скроллу вниз
и показывать по скроллу верх. Таким образом, она не отвлекает
пользователя от изучения информации, но к ней всегда остается
быстрый доступ. Навигацию можно и вовсе оставить статичной, а в
случае необходимости – добавить кнопку-иконку «наверх».
Нажатие на лого должно вести на домашнюю страницу. Это всем
привычный паттерн, и не стоит его нарушать. Но что делать, если
пользователь и так находится на домашней странице? Вы можете ничего
не делать, и это будет правильно (хотя на сайте «Студии Артемия
Лебедева» при клике по логотипу на главной странице воспроизводится
видеоролик).
При скролле страницы часть элементов навигации можно скрыть,
оставив только ключевые действия и основные пункты. Это особенно
актуально для сайтов с большой шапкой, содержащей логотип, филиалы

---

компании, выбор языка и номер телефона (такое часто можно увидеть на
банковских и телекоммуникационных сайтах).
В футере можно раскрыть пункты меню, добавить контакты, ссылки на
социальные сети, мобильные приложения и форму подписки.
И не забывайте, что цель навигации – не создать хорошую композицию,
а помочь пользователю лучше ориентироваться в вашем сервисе.
9.2. Кнопка
Кнопка должна выглядеть как кнопка.Пожалуй, это главное правило, так
как пользователь должен без сомнений понимать, на какие элементы
страницы можно нажать и что после этого произойдет.
Текст на кнопках не должен вводить в заблуждение. Например, в форме
удаления вместо вариантов «Да» и «Отмена» лучше предложить
«Удалить» и «Отмена». Еще несколько примеров: не «Подтвердить», а
«Зарегистрироваться», «Войти», «Создать (заказ)», «Оплатить» и т. д.
У кнопки должно быть несколько состояний. Помимо активного и
неактивного, заранее подумайте, как будет выглядеть кнопка при
наведении и нажатии. При наведении цвет кнопки должен становиться
чуть темнее. При нажатии опускайте текст на один пиксель, создавая
реалистичный эффект. Если активация определенного действия требует
времени, добавьте спиннер загрузки после нажатия. Если событие
завершено успешно, поменяйте спиннер на галочку. Действие должно
активироваться только после того, как кнопка отпущена. Если действий
много, не стоит показывать все кнопки сразу. Покажите ключевые, а
остальные спрячьте в выпадающее меню под тремя точками или кнопкой
«Еще».
В большинстве случаев основное действие (удалить, сохранить)
располагается справа. Единственное исключение – когда дизайнер хочет
выровнять все элементы формы по левому краю, чтобы взгляд меньше
«прыгал» слева направо. В этом случае ключевое действие оставьте
слева.
Ключевое действие следует выделить определенным цветом. Если это
критическое действие, то логичней будет использовать красный. В
других случаях для этого подойдет основной цвет бренда.
Кнопки в виде иконки лучше использовать только в том случае, если
действие понятно. Например, все знают, что «+» – это «добавить», а
мусорная корзина – «удалить».
Ширина кнопки рассчитывается следующим образом: ширина текста +
отступы слева и справа. Если ключевое действие получилось по ширине
меньше, чем второстепенное, можно увеличить кнопку.

---

9.3. Поле для ввода
Если вы не на Dribbble, то у полей должны быть четкие края, которые
видны не только на дисплее Retina, но и на старых мониторах (советую
проверять все оттенки серого).
Плейсхолдер (подсказка внутри поля формы) в привычных полях не
обязателен. Довольно глупо вставлять в поле с заголовком «Имя»
плейсхолдер «Иван Иванов» или «Введите ваше имя», так как это
очевидно. Но в полях, где могут возникнуть вопросы, не помешает
добавить пояснение. Например, если минимальная длина пароля –
шесть символов, неплохо бы об этом сообщить. Хороший вариант –
использовать плейсхолдер, который плавно становится заголовком.
Сообщения об ошибках выдавайте красным цветом под полем или в
отдельном всплывающем окне. Не помешает окрасить рамку в красный.
Если все поля, кроме одного, обязательны, то не нужно ставить
звездочку у каждого. Лучше напишите у единственного дополнительного
поля, что его можно пропустить. Если обязательных для заполнения
меньше, то ставьте звездочки.
Не забывайте: многие поля типизированы – например, номер телефона
или карты. Поэтому не помешает подстроиться под их формат. Вы
упростите процесс заполнения полей и избежите возможных ошибок.
Если поле часто редактируется, добавьте справа крестик, который будет
его очищать.
9.4. Форма
Группируйте поля для ввода по типу информации: личная информация,
работа, контакты. Благодаря этому создается визуальная иерархия и
форма считывается легче.
Длинную форму лучше разбить на несколько шагов, показав при этом
прогресс ее заполнения в виде полосы или цифр (например, «1/4»).
Иначе, увидев большую форму, пользователь может и вовсе уйти.
Собирайте контактную информацию на первом шаге, чтобы в случае
ухода у вас остались данные для связи.
Поля для ввода и кнопки выравнивайте по левому краю, тогда взгляд
пользователя не будет скакать слева направо и обратно.
Делайте автофокус на первом поле, чтобы пользователь мог без лишних
кликов начать вводить информацию.
В сложных местах делайте подсказки с помощью попапа под иконкой с
вопросительным знаком или с помощью текстовых подписей. Уверен, вы
часто видите подсказки, которые поясняют что такое код CVC на карте.

---

Если требуете конфиденциальную информацию, объясните, зачем она
вам нужна. Во время оплаты вопросов о необходимости данных карты
возникнуть не должно, но, когда при регистрации вы запрашиваете
номер карты или паспорта, нужно хорошо аргументировать свои
требования, иначе новый пользователь уйдет.
Если какое-либо поле введено неверно, лучше оповестите об этом сразу
после перехода на следующее. Это поможет избежать ситуаций, когда
после нажатия кнопки действия пользователю ударят в глаза красные
подчеркивания и крестики напротив неправильно заполненных полей.
И не спрашивайте пароль дважды. Его всегда можно восстановить с
помощью почты.
9.5. Таблица
Таблицы используются для отображения большого количества данных и
их удобного изучения.
Добавляйте «воздуха» между элементами таблицы, иначе ее будет
сложно анализировать.
Заранее подумайте, в каком порядке располагать данные. Если это
таблица контактов, то логичнее начать с имени. Если база заявок, то,
скорее всего, информацию нужно отсортировать по дате или статусу (всё
зависит от бизнеса). Предоставьте пользователю возможность
сортировать таблицу по нажатию на заголовок столбца.
Возможные действия со строками (редактировать, удалить и т. д.)
показывайте только при наведении, иначе пользователь столкнется с
переизбытком возможных действий.
Не добавляйте в таблицу столбец ID. Чаще всего этот элемент
добавляют автоматически на уровне разработки, хотя смысловой
нагрузки он не несет (если только это не номер заказа). Многие
используют его как ссылку, но почему бы не сделать ссылкой всю строку
или первое значение?
В больших таблицах не помешает выделять строку серым цветом. Это
сэкономит массу усилий человеку, который будет ее анализировать.
Если ваша таблица длинная, не помешает добавить фиксированную
шапку. Таким образом, пользователю будет проще соотносить данные с
заголовками, когда информации много и она схожих типов. Попробуйте
открыть финансовый отчет крупной организации – и поймете, в чем
дело.
Цифровые значения в таблице выравнивайте по правому краю, а
текстовые по левому. Заголовки выравнивайте соответственно контенту.
9.6. Модальное окно

---

Используйте модальные окна только в тех случаях, когда они
действительно необходимы. Например, когда вам нужно сообщить
важную информацию или потребовать определенное действие. Во
многих других случаях, чтобы сообщить какую-либо информацию, будет
достаточно всплывающей подсказки.
Дайте возможность закрыть модальное окно любым удобным способом:
• нажав на иконку крестика в правом углу окна;
• кликнув вне модального окна;
• клавишей «Esc»;
• кнопкой «Отменить».
Но если в модальном окне вводится важная информация, то случайный
клик может привести к потере данных. Поэтому в данном случае лучше
закрывать окно по нажатию на иконку крестика или кнопку «Отменить».
Для создания больших сущностей (проектов, заказов) используйте
отдельную страницу. Небольшие же можно создать в модальном окне,
не вырывая пользователя из контекста использования сервиса.
Старайтесь избегать наложения одних модальных окон на другие.
9.7. Ссылка
Ссылка используется для перехода на другие страницы и представляет
собой текст с подчеркиванием или закрашенный определенным цветом,
чаще всего синим. При наведении ссылку лучше подчеркнуть.
Если ссылка ведет ко второстепенной информации, то открывайте
страницу в новом окне. Если же она продолжает сценарий пользователя,
то открывайте новую страницу в текущем. Представим, что вы читаете
резюме кандидата, в котором указана ссылка на портфолио. Ее лучше
открывать в новом окне, так как портфолио будет справочной
информацией, а не продолжением сценария.
Избегайте коротких названий, так как на такую ссылку будет трудно
нажать.
10. Пошаговый процесс создания сайта
По дизайну написаны тысячи статей и записано столько же вебинаров,
но начинающих специалистов год за годом заботит один и тот же
резонный вопрос: «Так что же мне конкретно делать?»
В этой главе мы на реальном примере рассмотрим, какие действия
нужно совершать для создания простого дизайн-проекта, нацеленного на
решение задач бизнеса. В качестве примера я выберу транспортную
сферу, а точнее – сайт сервиса по заказу такси премиум-класса.

---

10.1. Дизайн-процесс
Вариаций возможных дизайн-процессов в интернете много, поэтому я
остановлюсь на классическом варианте, который мы обсуждали ранее:
1. Погружение в задачу.
2. Исследование и анализ конкурентов.
3. Продумывание сценариев.
4. Создание фреймворка.
5. Поиск визуального стиля.
6. Дизайн-макет.
Прежде чем приступить, хочу напомнить, что дизайн-процесс – не
строгая последовательность действий. Вполне возможно, вам придется
несколько раз возвращаться на предыдущие этапы, а может, некоторые
и вовсе перемешаются друг с другом.
Ориентируйтесь на описанный процесс, но не будьте его заложником.