Статья
Базовые принципы дизайна интерфейсов. Гайд для недизайнеров, создающих дизайн
Благодаря вайбкодингу руководители всё чаще самостоятельно создают сервисы и инструменты без привлечения дизайнеров. В таких проектах часто встречаются ошибки, которых можно избежать, если знать базовые принципы дизайна. Разберём их в этой статье.
Референсы
Перед тем как приступать к реализации, посмотрите, как ту же задачу решают другие сервисы. Это могут быть прямые конкуренты или сервисы из других сфер, если они решают похожую задачу.
Многие команды уже прошли через ошибки и доработки в таких сценариях. Их решения помогут не начинать с нуля и могут подсказать идею, до которой вы сами дошли бы не сразу. Но имейте в виду, что у вашей аудитории могут быть другие потребности, поэтому не стоит бездумно всё копировать.
Учитывайте устройства и контекст использования
Есть подходы mobile-first и desktop-first: в первом случае проектирование начинают с телефона, во втором — с большого экрана. Выбирайте отправную точку по своей аудитории. Если большинство людей пользуется сервисом с телефона, мобильному сценарию нужно уделить больше внимания и часто начинать именно с него.
Важен и контекст. На заводе интерфейс могут смотреть на старом или грязном мониторе; курьер пользуется телефоном на улице под солнцем. В таких условиях бледные подписи, маленькие кнопки и действия, спрятанные за горизонтальной прокруткой, будут мешать сильнее.
Пример. Посмотрите доли устройств в аналитике. Затем пройдите основной сценарий на самом частом устройстве и в условиях, близких к реальным: например, на улице при ярком свете.
Иерархия и управление вниманием
Дизайнер может и должен управлять вниманием пользователя. Визуальная иерархия задаёт порядок, в котором человек замечает элементы. Её формируют размер, цвет, отступы, группировка и разделительные линии. Акцент помогает выделить важное, но если акцентировать всё, иерархия исчезнет.
Также стоит учитывать модель «Z-паттерн», которая описывает, как взгляд человека естественным образом сканирует страницу. Согласно этой модели, взгляд сначала идёт слева направо по верхней части, затем по диагонали вниз и снова слева направо. Поэтому не уводите важную кнопку в правый нижний угол: внимание обычно доходит туда в последнюю очередь.
Выравнивания
Старайтесь выравнивать элементы на странице по одной и той же стороне — так пользователю будет легче считывать информацию. Помимо удобства, соблюдение выравнивания влияет и на ощущение красоты: упорядоченная композиция воспринимается приятнее.
Выберите основной способ выравнивания для страницы и придерживайтесь его. Если заголовки и контент стоят по левому краю, не центрируйте отдельные поля и кнопки. Если композиция построена по центру, поддержите эту ось и в остальных элементах.
Теория близости
То, что расположено рядом, человек воспринимает как связанное. Если связанные элементы — кнопки, поля формы или абзацы текста — расположить компактно, а независимые отделить пространством, пользователь быстрее увидит структуру, поймёт связи и решит свою задачу.
Контраст
Контраст — это заметная разница между элементами. Он помогает выделить важное и добавляет композиции выразительности и красоты. Мозгу легче воспринимать страницу, когда рядом есть отличия: крупный объект и маленький, светлый текст на тёмном фоне, спокойная область и яркая кнопка.
Если все элементы одинаковы по масштабу и тону, интерфейс выглядит плоским и скучным. Выделяйте только то, что действительно важно: если акцентировать всё подряд, разница перестанет работать.
Ритм
В дизайне ритм — это повторение элементов и интервалов, которое создаёт предсказуемый визуальный порядок: одинаковые карточки, заголовки одного уровня, равные отступы.
Ритм влияет и на то, насколько аккуратной и привлекательной кажется страница: мозг любит порядок и системность. Например, если в карточке отступ слева и справа без причины отличается, она выглядит неаккуратно.
Консистентность
Интерфейс должен работать одинаково на всех страницах. Если основное действие то вверху справа, то внизу слева, а одинаковые поля выглядят по-разному, пользователю приходится каждый раз заново разбираться в правилах.
Переиспользуйте способ навигации, расположение основных действий, вид кнопок и полей, названия похожих операций. Соберите эти элементы один раз и применяйте их во всех разделах. Так человек переносит уже освоенный опыт на новый экран.
Пример. Если добавление объекта в одном разделе находится в правом верхнем углу, придерживайтесь того же принципа и в других разделах.
Чем больше текста, тем меньше вероятность, что его прочитают
К сожалению, пользователь далеко не всегда читает весь текст на странице. Чаще он быстро сканирует экран: ищет знакомые слова, нужное поле или кнопку, чтобы перейти к своей задаче. Длинная инструкция в таком режиме просто не работает.
Не рассчитывайте, что текст объяснит запутанный интерфейс. Сначала сделайте понятными название действия, порядок шагов и расположение элементов. Затем сократите пояснения до сути: что нужно сделать, какое есть ограничение или как исправить ошибку.
Пример. Если для создания задачи нужен абзац инструкции, попробуйте вместо него понятные названия полей и кнопку «Создать задачу». Пояснение оставьте только там, где без него нельзя догадаться о действии.
Когнитивная нагрузка. Больше функций и информации — не значит удобнее и лучше
Когнитивная нагрузка — это усилие, которое человек тратит, чтобы разобраться в информации и выбрать действие. Чем больше вариантов, терминов и обязательных шагов вы показываете сразу, тем больше этого усилия требуется.
Пользователь хочет решить свою задачу, а не изучать руководство. Он может пропустить онбординг и не прочитать длинную справку. Выясните, что ему нужно сделать чаще всего, и дайте короткий путь к результату. Редкие настройки покажите тогда, когда они понадобятся.
Ставьте себя на место целевой аудитории. То, что понятно вам, не обязательно понятно пользователю
Одна из главных задач дизайнера — смотреть на интерфейс глазами человека, который будет им пользоваться. У людей разный опыт, информационные пузыри и рабочий контекст. То, что давно известно вам и кажется очевидным, может быть совершенно непонятно другому человеку.
Учитывайте язык и привычки аудитории. В приложении для людей старшего возраста не стоит полагаться на молодёжный сленг, мелкий шрифт, скрытые свайпы или обязательные шорткаты. Проверьте это на реальных людях: попросите выполнить задачу без подсказок и посмотрите, где они остановятся.
Аналитика и обратная связь от пользователей
Доработка дизайна продолжается и после запуска сервиса. Пользователи сталкиваются с трудностями и подсказывают, чего им не хватает. Поэтому улучшения должны опираться на то, как люди реально работают с сервисом.
Подключите аналитику: Яндекс Метрику, BI или собственный дашборд. Смотрите, где люди бросают сценарий и какими функциями пользуются. Предусмотрите простой способ написать о проблеме или пожелании прямо из интерфейса.
