16 маленьких UI-хитростей, которые сделают ваш дизайн лучше

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

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

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

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

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

Самый быстрый способ научиться — это практика, так что давайте начнем.

Давайте исправим этот пример, опираясь на систему логических правил

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

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

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

1. Используйте отступы для группировки связанных между собой элементов

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

Сгруппировать связанные элементы можно следующими способами:

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

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

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

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

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

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

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

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

3. Убедитесь, что похожие элементы функционируют одинаково

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

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

4. Создайте четкую визуальную иерархию

Не вся информация в интерфейсе одинаково важна. Постарайтесь представить контент в порядке важности, выделяя самые значимые элементы.

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

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

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

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

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

Снова проводим тест с прищуриванием. Вуаля, теперь кнопка целевого действия — самый заметный элемент.

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

5. Удалите ненужные стили

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

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

6. Используйте цвет с умом

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

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

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

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

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

7. Обеспечьте достаточную контрастность элементов интерфейса (3:1)

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

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

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

Контрастность основной кнопки в исходном примере также была слишком низкой. Мы исправили это в п. 4, но и здесь стоит об этом упомянуть.

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

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

8. Обеспечьте достаточную контрастность текста (4.5:1)

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

  • Контрастность мелкого текста (18px и менее) должна составлять минимум 4.5:1.
  • Крупный текст (более 18px с жирным начертанием или более 24px с обычным начертанием) должен иметь контрастность не менее 3:1.

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

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

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

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

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

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

10. Используйте одну гарнитуру без засечек

Гарнитура — это набор родственных шрифтов, похожих по стилю и эстетике. Пример — Helvetica. Шрифты — это вариации внутри гарнитуры (разные начертания или размеры). Например, Helvetica bold и Helvetica regular — это два шрифта одной гарнитуры Helvetica.

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

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

11. Выбирайте гарнитуры с достаточно высокими строчными буквами

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

В нашем примере используется гарнитура Gill Sans, которая имеет относительно небольшую x-height. Мы заменим ее на гарнитуру с более высокими строчными буквами, например Lato, — это повысит читабельность.

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

12. Ограничьте использование прописных букв

Веских причин для использования прописных букв не так много, если только вы не хотите виртуально накричать на людей. ТАКОЙ ТЕКСТ ПРОСТО ВЫСКАКИВАЕТ С ЭКРАНА, И ЕГО ТРУДНО ЧИТАТЬ.

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

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

13. Используйте только обычное и жирное начертания

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

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

Советы:

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

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

14. Чисто черный текст — не лучшее решение

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

Яркость черного цвета — 0%, а белого — 100%. Большой разрыв в яркости цветов заставляет наши глаза напрягаться. Поэтому лучше сделать текст, размещенный на белом фоне, не чисто черным, а темно-серым.

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

15. Выравнивайте текст по левому краю

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

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

16. Высота строки не менее 1,5 для основного текста

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

Обычно высота строки составляет от 1,5 до 2. Чтобы основной текст оставался доступным и разборчивым, высота строки должна быть не менее 1,5 (150%).

В нашем примере высота строки составляет всего 1 (100%). Мы увеличим ее до 1,6 (160%), чтобы улучшить читабельность.

Мы исправили все ошибки!

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

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

Источник:
Medium
arrow