Инструкция дизайнера

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

Куратор Илья Саблин

Десять принципов качественного дизайна:

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

— Дитер Рамс, немецкий промышленный дизайнер, ведущий дизайнер фирмы Braun с 1962 по 1995

Подход к проектированию

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

Элементы сайтов и приложений и их функции

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

Визуальное форматирование, верстка

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

Работа с текстом

Текст на странице или в интерфейсе должен быть максимально простым. заказчик редко предоставляет хороший текст, поэтому его необходимо редактировать, предварительно согласовав это.
Если текст кажется сложным, скучным, непонятным — его надо переписать.
Текст должен быть разбит на параграфы.
Предложения должны быть максимально короткими и понятными.
Если в тексте говорится о чем-то неочевидном или сложном — необходимо снабдить текст иллюстрацией, графиком, таблицей — чем-либо, упрощающем восприятие информации.
Следует избегать переноса одного слова. Решить эту проблему можно используя неразрывные пробелы или принудительные переносы в других местах.
Не стоит использовать перенос внутри слов.
Если есть возможность (например, когда длина строк фиксирована), переносы нужно расставлять так, чтобы на одной строке стояли связанные по смыслу словосочетания.
Короткие слова и предлоги не должны стоять в конце строки, передними необходимо использовать неразрывный пробел.
Ширина макета как правило около 1400 пикселей. Этот размер условный: макет демонстрирует, как страница выглядит на экране среднего размера. Сверстанная же страница должна корректно отображаться на экранах любых размеров (следует тестировать от 320 до 1920 пикселей).