Оптимизация UI часто вызывает сложности из-за разнообразия шрифтов, цветовых схем и расположения элементов. Мы поможем сформировать основные правила, которые помогут улучшить ваш дизайн.
В WIS Software мы собрали 16 простых, но эффективных правил UI-дизайна, которые значительно улучшат ваш сайт для пользователей:
- Группируйте похожие элементы
- Соблюдайте последовательность
- Делайте элементы одного типа схожими по функции
- Создайте четкую иерархию
- Удалите ненужные стили
- Используйте цвет с «пользой»
- Создавать контраст между элементами
- Придерживайтесь стандартов контрастности уровня AA
- Используйте цвет не только как единственный индикатор
- Пользуйтесь единым шрифтом
- Используйте шрифт с более высокими строчными буквами
- Ограничьте использование заглавных букв
- Используйте только обычное и жирное выделение текста
- Избегайте чисто черного текста
- Выравнивайте текст по левому краю
- Используйте 1,5 интерлиньяжа для текста
1. Группируйте похожие элементы
Чтобы сделать интерфейс понятным, важно распределить элементы на небольшие группы. Так вы сделаете его удобным и понятным для пользователей. Есть несколько способов:
- Соберите связанные элементы вместе в одном контейнере
- Поместите их близко друг к другу
- Сделайте их похожими
- Разместите их в линию
Использование контейнеров - это яркий способ выделить группы в интерфейсе, но часто бывает, что он создает беспорядок. Поэтому стоит присмотреться к другим способам группировки, которые менее заметны и помогут сделать дизайн проще.
Использование пространства - отличный способ группировать связанные элементы. Просто оставьте небольшие расстояния между ними. Также можно комбинировать разные способы группировки, чтобы выделить группы более четко.
2. Соблюдайте последовательность
В области UI-дизайна очень важно поддерживать единообразие. Это значит, что элементы интерфейса, выполняющие похожие функции, должны выглядеть и работать похожим образом. Такой подход облегчает понимание и использование продукта, уменьшит количество ошибок и сделает интерфейс более предсказуемым и удобным.
Например, если одни иконки имеют заливку, а другие нет, это может сбивать пользователей с толку. Чтобы сделать дизайн более привлекательным, можно добавить всем иконкам обводку одинаковой толщины и скруглить углы.
Совет: добавляйте текстовые подписи к иконкам, чтобы помочь пользователям лучше понять их назначение, особенно тем, кто пользуется специальными программами для чтения экрана.
3. Делайте элементы одного типа схожими по функции
Важно, чтобы элементы пользовательского интерфейса, выполняющие одинаковые функции, имели схожий визуальный стиль. Это помогает пользователям понимать, как использовать интерфейс, и создает ощущение удобства и предсказуемости. Если элементы выглядят похоже, пользователи ожидают, что их функционал будет аналогичным.
С другой стороны, элементы с различной функциональностью должны выглядеть по-разному, чтобы их не путали между собой.
Чтобы избежать путаницы, стоит изменить внешний вид иконок, убрав из них элементы, характерные для кнопок, например, синий цвет или определенный стиль оформления.
Такие изменения помогут четко разграничить интерактивные и не интерактивные элементы интерфейса.
4. Создайте четкую иерархию
В дизайне интерфейсов важно соблюдать визуальную иерархию, располагая элементы по степени важности. Используйте различия в размере, цвете и контрасте для выделения ключевых элементов.
Тест "Зажмите глаза" помогает проверить, насколько четко выражена эта иерархия: прищурившись, можно оценить, какие элементы выделяются. В нашем случае, основное действие должно быть более заметным, которое можно подчеркнуть с помощью яркого фона и жирного шрифта.
После корректировки, основное действие станет более выразительным. Что улучшит восприятие и удобность интерфейса.
5. Удалите ненужные стили
Лишние декоративные элементы, такие как необоснованные линии, цвета, фоны и анимации, могут усложнять восприятие и отвлекать от основного содержания.
Удаление лишних элементов сделает интерфейс более чистым и сфокусированным на важных деталях.
6. Используйте цвет с “пользой”
Используйте цвет в интерфейсе только там, где это нужно. Для начала делайте дизайн в черно-белых тонах, добавляйте цвета, чтобы выделить важные элементы, например, кнопки или ссылки.
Совет, не используйте яркие цвета для обычного текста или неактивных элементов, чтобы не сбивать пользователей с толку.
Если вы используете синий для активных элементов, не делайте синими обычные заголовки или звезды рейтинга, которые не интерактивные. Так можно будет легко понять, что можно нажимать, а что нет.
7. Убедитесь, что элементы интерфейса имеют контрастное соотношение 3:1
Контраст - это разница в яркости между двумя цветами. Он измеряется соотношением, например, черный текст на черном фоне имеет соотношение 1:1, а черный на белом - 21:1. Чтобы сделать дизайн доступным для людей с нарушениями зрения, следуйте стандартам доступности, требующим контраста хотя бы 3:1.
Например, если у вас есть значок стрелки с низким контрастом, добавьте ему тень или градиентное наложение, чтобы достичь соотношения контраста 3:1. Также увеличьте контраст кнопок до того же уровня. Кнопки с низким контрастом могут быть незаметны для людей с плохим зрением, поэтому повышение контрастности улучшает их видимость и поможет упорядочить визуальную иерархию.
После увеличения контраста значка стрелки и кнопки, вы получите дизайн, который станет более доступным и понятным.
8. Придерживайтесь стандартов контрастности уровня AA
Чтобы текст в интерфейсах был доступен для людей с нарушениями зрения, он должен соответствовать стандартам контрастности уровня AA Веб-стандартов доступности контента (WCAG) 2.1.
Например:
- Маленький текст (18px и меньше) должен иметь минимальный контраст 4.5:1.
- Большой текст (жирным шрифтом выше 18px или обычным шрифтом выше 24px) требует минимального контраста 3:1.
Также важно увеличить контраст текста с местоположением, особенно если он выполнен тонким шрифтом. Использование более темного оттенка серого улучшит читаемость и доступность текста.
9. Не полагайтесь только на цвет в качестве индикатора
Цветовая слепота мешает людям различать некоторые цвета. Поэтому в дизайне интерфейсов важно не использовать только цвет для важной информации.
Лучше добавить дополнительные подсказки, например, подчеркивать текст ссылок, чтобы помочь всем пользователям, включая тех, кто плохо различает цвета.
10. Пользуйтесь единым шрифтом
В дизайне интерфейса лучше использовать простые шрифты без засечек, такие как Helvetica, потому что они читабельны и нейтральны.
Шрифт - это семейство шрифтов с похожим стилем, а шрифты - это вариации внутри этого семейства, например, Helvetica bold и Helvetica regular.
Если в вашем интерфейсе заголовок использует сложный шрифт с засечками, который трудно читать или не соответствует стилю приложения, его стоит заменить на более простой и чистый шрифт без засечек. Это улучшает читабельность и общий внешний вид интерфейса.
11. Используйте шрифт с более высокими строчными буквами
Шрифты с большей высотой строчных букв, известной как x-высота, и более широким межстрочным интервалом обычно лучше читаются при малых размерах.
Замена шрифта с низкой x-высотой на шрифт с высокой x-высотой может существенно повысить удобство пользования интерфейсом и общее впечатление от него.
12. Ограничьте использование заглавных букв
Использование заглавных букв в тексте часто делает его труднее для чтения. Когда мы читаем, мы сканируем форму слов, а не отдельные буквы. Заглавные буквы создают прямоугольную форму, заставляя нас читать каждую букву отдельно, что замедляет процесс чтения.
13. Используйте только обычное и жирное выделение текста
Не нужно использовать все выделения шрифта в дизайне интерфейса, так как это может создать визуальный шум и беспорядок. Лучше держать дизайн простым, используя только основные начертания, такие как обычное и жирное.
Вот несколько советов по использованию начертаний:
- Используйте жирное начертание для заголовков, чтобы выделить их.
- Для обычного текста подойдет стандартное начертание.
- Если хотите использовать очень тонкие или толстые начертания, лучше делать это только для крупного текста или заголовков, так как они могут быть плохо читаемы при маленьком размере.
Например, если в вашем дизайне текст местоположения выполнен тонким начертанием, это может быть неудобно для чтения, даже при достаточном контрасте. Замените его на стандартное начертание. Это улучшит читаемость и сделает дизайн более чистым и понятным.
14. Избегайте чисто черного текста
В UI-дизайне лучше избегать использования чисто черного цвета, особенно на белом фоне, так как высокий контраст между черным и белым может вызвать усталость глаз. Черный цвет имеет 0% яркости, а белый - 100%, что создает большую нагрузку на глаза.
Вместо чисто черного цвета лучше использовать темно-серый. Это уменьшит контраст и сделает текст более приятным для чтения.
Также, если вы хотите снизить заметность определенных элементов, таких как описание недвижимости, можно использовать более светло-серый цвет. Это поможет подчеркнуть более важные элементы и обеспечит более эффективную визуальную иерархию в дизайне.
15. Выравнивайте текст по левому краю
Для улучшения читаемости текста в пользовательском интерфейсе, рекомендуется выравнивать текст по левому краю, особенно для длинных текстов.
Выравнивание по центру подходит для заголовков и коротких текстовых блоков, которые можно быстро просмотреть. Однако для более длинных текстов это неудобно, так как начальная точка каждой строки меняется, что заставляет глаза искать начало каждой новой строки.
16. Используйте 1,5 интерлиньяжа для текста
Интерлиньяж - это пространство между строками текста. Правильный интерлиньяж помогает избежать повторного чтения одной и той же строки и делает текст более комфортным для восприятия.
Для лучшей доступности и читаемости, особенно при длинных текстах, рекомендуется установить интерлиньяж не менее 1,5 раза больше размера шрифта, что составляет 150%. Идеально поддерживать интерлиньяж в диапазоне от 1,5 до 2 раз размера шрифта.
Дизайн интерфейса может показаться сложным на первый взгляд, но на самом деле он основывается на логических правилах и руководящих принципах.
Применение объективной логики вместо субъективного мнения позволяет создавать интуитивно понятные и доступные интерфейсы легко и быстро.
Это доказывает, что хороший дизайн доступен каждому, кто готов следовать проверенным методикам и принципам!