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

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

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

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

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

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

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

1. Старайтесь избегать непоследовательного выравнивания

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

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

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

2. Убедитесь, что текст имеет коэффициент контрастности 4,5:1

Чтобы люди с нарушениями зрения могли легко прочитать текст, он должен соответствовать уровню контраста AA:

• Обычный текст (менее 19px с жирным начертанием, менее 24px с обычным начертанием) должен иметь минимальный контраст 4,5:1.
• Крупный текст (19px и более с жирным начертанием или 24px и более с обычным начертанием) должен иметь минимальный контраст 3:1.

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

3. Рассмотрите возможность удаления контейнеров для упрощения интерфейса

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

Есть несколько способов это сделать:

• Разместить связанные элементы в одном контейнере
• Разместить связанные элементы близко друг к другу
• Сделать связанные элементы визуально похожими
• Выровнять связанные элементы в непрерывную линию

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

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

4. Используйте минимум начертаний шрифта

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

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

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

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

В нашем примере карточка каждой статьи содержит 3 разных начертания шрифта. Несмотря на то, что текст с начертаниями «extra light» и «thin» имеет коэффициент контрастности выше 4,5:1, некоторым людям все равно может быть трудно его прочитать. Поэтому мы заменим начертание на «regular», а для заголовков статей используем «semi-bold», чтобы сделать на них акцент.

И вот какой результат мы получили:

5. Будьте последовательны

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

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

6. Не путайте минимализм с простотой

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

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

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

7. Сбалансируйте иконки и текст

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

В нашем примере иконки и их подписи кажутся немного несбалансированными. Они имеют одинаковый цвет, но иконки массивнее и крупнее, и поэтому выглядят более акцентными. Мы сделаем текст немного темнее, чтобы уравновесить эти элементы. Увеличение контрастности текста до минимум 4,5:1 также обеспечивает его доступность для людей с нарушениями зрения.

Готово!

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

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

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