Дизайн сложных интерфейсов: принципы создания и практические советы

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

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

Прежде чем перейти к конкретным рекомендациям и примерам, поговорим о двух принципах работы со сложными системами:

• Польза.
• Удобство.

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

1. Сбор информации от пользователей.

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

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

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

На следующем этапе нужно понять, удастся ли решить все задачи пользователя без накрутки UI? Если да, то можно приступать к проработке визуала.

2. Глубинные интервью и тестирование.

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

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

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

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

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

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

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

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

Числа желательно набирать моноширинным шрифтом (все знаки одинаковой ширины). Такое написание упрощает сравнение числовых значений.

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

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

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

Кликабельные элементы необходимо выделять дополнительно, например, с помощью цветовых акцентов.

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

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

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

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

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

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

• Три главные категории в количественном выражении отображаются на больших карточках вверху экрана, а справа — две главные в денежном.
• Все остальные данные представлены на диаграммах. Они не повторяются, чтобы пользователь быстрее отличал их друг от друга и не мог перепутать.
• Автоматизированные виджеты работают автономно и обновляются каждые пять минут.

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

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

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

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