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

Руководствуйтесь логикой, а не интуицией.

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

Но есть и хорошая новость: UI-дизайн не обязательно должен быть таким сложным. За более чем 20 лет работы в качестве продуктового дизайнера я обнаружил, что в основе большинства моих решений лежит четкий набор логических принципов. Не художественный гений или интуиция, а простые правила.

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

Давайте же перейдем к практике.

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

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

Сейчас мы шаг за шагом разберем и исправим все ошибки.

1. Отступы между элементами должны соответствовать тому, насколько эти элементы связаны (правило близости)

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

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

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

Заранее установите отступы, кратные 8 (это также известно как 8 point grid). Для большей детализации и контроля вы можете использовать шаг в 4 пункта. Такой подход гарантирует, что все интервалы в интерфейсе будут пропорциональными.

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

Вот как выглядит наш пример до и после применения системы отступов:

2. Убедитесь, что элементы интерфейса имеют коэффициент контрастности 3:1

Контраст — это разница в воспринимаемой яркости двух цветов. Он выражается в виде соотношения от 1:1 до 21:1. Например, черный текст на черном фоне имеет самый низкий коэффициент контрастности 1:1, а черный текст на белом фоне — самый высокий — 21:1. Существует множество инструментов и плагинов Figma, которые помогут вам измерить цветовой контраст. Мои любимые — это онлайн-инструмент проверки контраста Web AIM и  Figma-плагин Contrast.

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

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

3. Используйте одну основную кнопку для наиболее важных действий

Большинство сайтов и приложений включают 3 уровня кнопок, оформление которых варьируется в зависимости от важности действий: основные, вторичные и третичные. Если интерфейс достаточно сложный, вам могут понадобиться дополнительные кнопки меньшего и/или большего размера.

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

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

Рекомендации:

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

• Не используйте несколько основных кнопок на одном экране. Они могут конкурировать за внимание и сбивать людей с толку.

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

4. Убедитесь, что кнопки имеют достаточный размер 

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

Постарайтесь придерживаться следующих рекомендаций при проектировании кнопок (и других интерактивных элементов):

• Сделайте область нажатия размером не менее 48pt на 48pt. Это соответствует сетке 8pt и немного больше, чем рекомендуемые WCAG 44pt на 44pt.

• Сделайте часто используемые кнопки еще больше, чтобы повысить их эффективность и видимость.

• Сделайте отступ между кнопками не менее 8pt, чтобы люди не нажимали по ошибке не туда.

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

5. Убедитесь, что важный контент остается видимым

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

В нашем примере действия скрыты внутри меню. Поскольку здесь есть место для отображения двух иконок («Поделиться» и «Добавить в закладки»), мы сделаем их видимыми.

6. Уменьшите межбуквенное расстояние в большом тексте

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

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

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

7. Не полагайтесь исключительно на цвет

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

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

Взгляните на 3 вкладки над списком статей. В исходном дизайне неочевидно, что Articles — выбранная вкладка. Причина в том, что для ее обозначения используется малозаметное различие в цвете. Добавив подчеркивание, мы развеем все сомнения.

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

Заключение

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