16 небольших, но важных правил UI-дизайна
Как разработать интерфейс, следуя правилам логики? Публикуем перевод исследования продакт-дизайнера Адама Дэннеуэя c UX Planet
UI-дизайн довольно сложен. Имея в распоряжении изобилие шрифтов, цветовых сочетаний и библиотек принимать дизайнерские решения очень непросто. А когда нужно учитывать удобство интерфейса, доступность для всех пользователей и психологические триггеры, это становится еще труднее.
К счастью, благодаря определенным правилам, создание интерфейса можно упростить. Почти за 20 лет работы продакт-дизайнером я понял, что большинство моих решений по визуалу и взаимодействиям интерфейса с пользователем продиктованы именно логикой, а не художественным чутьем или волшебной интуицией.
Система логических правил помогает принимать обоснованные дизайнерские решения. Без нее создавать дизайн сложнее — вы просто будете использовать свой художественный вкус, чтобы двигать туда-сюда элементы интерфейса, пока он не начнет выглядеть красиво.
К счастью, благодаря определенным правилам, создание интерфейса можно упростить. Почти за 20 лет работы продакт-дизайнером я понял, что большинство моих решений по визуалу и взаимодействиям интерфейса с пользователем продиктованы именно логикой, а не художественным чутьем или волшебной интуицией.
Система логических правил помогает принимать обоснованные дизайнерские решения. Без нее создавать дизайн сложнее — вы просто будете использовать свой художественный вкус, чтобы двигать туда-сюда элементы интерфейса, пока он не начнет выглядеть красиво.
Пример UI-дизайна до и после применения правил
Но, хоть я и люблю правила и логику, решения в дизайне редко бывают строго ультимативными. Поэтому предлагаю использовать следующие советы не как аксиомы, а как полезные рекомендации, которые работают в большинстве случаев (но есть и исключения).
Самый быстрый способ научиться чему-то — это практика, так что начнем.
Самый быстрый способ научиться чему-то — это практика, так что начнем.
Исправим интерфейс, используя логические правила
На скриншотах — страница из приложения для краткосрочной аренды недвижимости с информацией о конкретном объекте. Первый скриншот — оригинальный дизайн, второй — после применения правил.
Даже если у вас нет большого опыта в UI или UX, вы можете заметить, что оригинальный дизайн выглядит неряшливо, он сложный и неудобный. В нем много мелких недочетов, которые затрудняют взаимодействие пользователя с интерфейсом.
Давайте исправим недочеты, используя эти рекомендации:
- Группируйте связанные между собой элементы;
- Следите за согласованностью;
- Убедитесь, что похожие визуально элементы работают схожим образом;
- Создайте четкую визуальную иерархию;
- Удалите ненужную информацию и элементы;
- Используйте цвет с умом;
- Проверьте, что элементы интерфейса имеют контрастность не менее 3:1;
- Убедитесь, что текст имеет контрастность 4,5:1;
- Не используйте в качестве индикатора только цвет;
- Используйте шрифты без засечек;
- Выбирайте шрифты с высокими строчными буквами;
- Не увлекайтесь верхним регистром;
- Используйте только обычный и жирный шрифт;
- Избегайте черного цвета;
- Выравнивайте текст по левому краю;
- Междустрочный интервал в основном тексте должен быть полуторным.
1. Группируйте связанные между собой элементы
Разбивка информации на небольшие группы помогает структурировать интерфейс и делает его более организованным. Люди проще воспринимают его и запоминают, как с ним взаимодействовать. Группировать элементы можно одним из этих способов:
- Поместите связанные элементы в рамку или на подложку;
- Расположьте их близко друг к другу;
- Сделайте так, чтобы элементы выглядели похожими;
- Выровняйте их так, чтобы они стояли вдоль одной воображаемой линии.
Еще один простой и эффектный способ — использование пустого пространства, которое отделяет одни элементы от других. Также вы можете комбинировать несколько методов группировки, чтобы показать связь элементов более четко.
В нашем примере интерфейс выглядит сложным и загроможденным из-за слишком маленьких отступов между блоками контента. Просто добавив воздуха, мы сгруппировали содержимое, сделав дизайн более структурированным и понятным.
2. Следите за согласованностью
Согласованность в UI-дизайне означает, что похожие элементы выглядят и работают аналогично друг другу. Согласованность должна соблюдаться и в отдельно взятом интерфейсе, и в сравнении с другими известными продуктами. Когда людям не нужно постоянно запоминать, как работает тот или иной элемент, они лучше воспринимают интерфейс и делают меньше ошибок.
В нашем примере иконки выполнены в разных стилях: одни из них закрашены, а другие — нет. Это сбивает с толку, потому что закрашенные значки в других интерфейсах обычно означают, что предмет выбран. Мы оставили все иконки незакрашенными — нарисованные линией в 2pt, с закругленными углами, они теперь согласованы между собой и имеют одинаковый визуальный вес.
В нашем примере иконки выполнены в разных стилях: одни из них закрашены, а другие — нет. Это сбивает с толку, потому что закрашенные значки в других интерфейсах обычно означают, что предмет выбран. Мы оставили все иконки незакрашенными — нарисованные линией в 2pt, с закругленными углами, они теперь согласованы между собой и имеют одинаковый визуальный вес.
Также мы скорректировали подписи, чтобы люди понимали, что означает та или иная иконка. Это особенно важно для пользователей, которые используют скринридеры — специальные программы, которые описывают интерфейс с помощью речи или шрифта Брайля.
3. Убедитесь, что похожие визуально элементы работают схожим образом
Если элементы выглядят одинаково, люди будут ожидать, что они и работают однотипно. Поэтому постарайтесь, чтобы похожие элементы и работали похоже. Если элементы выполняют разные функции, то и выглядеть они должны максимально по-разному.
В нашем примере иконки с подложками выглядят так же, как кнопка «Book now» — кажется, будто на них тоже можно нажать, но это не так. Чтобы пользователи не принимали иконки за интерактивные элементы, достаточно перекрасить их в другой цвет и убрать подложки.
В нашем примере иконки с подложками выглядят так же, как кнопка «Book now» — кажется, будто на них тоже можно нажать, но это не так. Чтобы пользователи не принимали иконки за интерактивные элементы, достаточно перекрасить их в другой цвет и убрать подложки.
4. Создайте четкую визуальную иерархию
Не вся информация в интерфейсе одинаково важна. Постарайтесь разработать четкую иерархию информации, сделав важные элементы более заметными.
Визуальная иерархия помогает быстро просматривать информацию, останавливаясь на интересных для пользователя фрагментах. Также это делает интерфейс более эстетичным, придавая ему упорядоченность. Визуальная иерархия создается за счет размера, цвета, контрастности элементов, интервалов между ними, положения в интерфейсе.
Вот пример главного баннера сайта без четкой визуальной иерархии.
Визуальная иерархия помогает быстро просматривать информацию, останавливаясь на интересных для пользователя фрагментах. Также это делает интерфейс более эстетичным, придавая ему упорядоченность. Визуальная иерархия создается за счет размера, цвета, контрастности элементов, интервалов между ними, положения в интерфейсе.
Вот пример главного баннера сайта без четкой визуальной иерархии.
А вот тот же баннер, но с расставленными по иерархии элементами.
Самый быстрый и простой способ проверить визуальную иерархию сайта — прищурить глаза и посмотреть на дизайн, либо отодвинуться подальше от экрана или заблюрить интерфейс. Даже при таком рассмотрении должно быть понятно, какие элементы более важны.
Если мы применим этот прием к нашему примеру, то увидим несколько одинаковых по визуальной важности элементов, конкурирующих за внимание пользователя. А призыв к действию в левом нижнем углу вообще не заметен.
Если мы применим этот прием к нашему примеру, то увидим несколько одинаковых по визуальной важности элементов, конкурирующих за внимание пользователя. А призыв к действию в левом нижнем углу вообще не заметен.
Призыв к действию, как правило, должен быть самым заметным элементом интерфейса. Для этого в его оформлении используется контрастный цвет фона и жирный шрифт.
Проверим обновленный дизайн — призыв к действию стал самым заметным элементом.
Визуальная иерархия стала более четкой, но можно ещё улучшить дизайн. Например, блок основного текста все еще слишком заметен, хотя он не так важен. Ниже рассмотрим несколько правил типографики, которые помогут это скорректировать.
5. Удалите ненужную информацию и элементы
Ненужная визуальная информация отвлекает внимание и увеличивает когнитивную нагрузку — пользователям приходится больше напрягать мозг, чтобы использовать интерфейс. Избегайте ненужных цветов, фигур, фона и анимации, чтобы интерфейс был более простым и не требовал усилий для фокусирования.
В примере пустое пространство и граница вокруг изображения создают ненужную визуальную нагрузку. Они не передают никакую информацию и не группируют элементы, поэтому мы можем безболезненно удалить их, чтобы упростить дизайн.
6. Используйте цвет с умом
Не стоит добавлять цвет бесцельно, чисто для украшения — это сбивает с толку и отвлекает. Используйте цветовые акценты целенаправленно и не злоупотребляйте ими. Начните с черного и белого, а там, где нужно выделить элемент по смыслу, можно добавить цвет.
Самое простое и эффективное использование цветовых акцентов — это добавить фирменный цвет на интерактивные элементы (ссылки и кнопки). Так станет понятно, с чем пользователи могут взаимодействовать. При этом на неактивных элементах фирменный цвет лучше не использовать.
Но не переборщите — если на интерактивных элементах уже есть визуальные подсказки, фирменный цвет можно не использовать. Например, в следующем примере и так ясно, что карточки активны, даже если не выделять ссылку синим.
Самое простое и эффективное использование цветовых акцентов — это добавить фирменный цвет на интерактивные элементы (ссылки и кнопки). Так станет понятно, с чем пользователи могут взаимодействовать. При этом на неактивных элементах фирменный цвет лучше не использовать.
Но не переборщите — если на интерактивных элементах уже есть визуальные подсказки, фирменный цвет можно не использовать. Например, в следующем примере и так ясно, что карточки активны, даже если не выделять ссылку синим.
В нашем примере синий цвет в заголовке и рейтинге выглядит неплохо, но это создает путаницу — кажется, что элементы активны. Поэтому мы оставили цвет только в интерактивных элементах — ссылке на отзывы и кнопке с призывом к действию. Это значительно упрощает понимание — пользователи сразу видят, с какими элементами можно взаимодействовать.
7. Проверьте, что элементы интерфейса имеют контрастность не менее 3:1
Контрастность — это визуальная разница в яркости между двумя смежными цветами на экране, выражается она в соотношении, а ее диапазон значений — от 1 до 21. Наименьшая контрастность у черного текста на черном фоне — 1:1. А наибольшая — у черного на белом, 21:1. Измерить контрастность можно с помощью различных онлайн-инструментов.
Чтобы ваш сайт был доступен для всех пользователей, в том числе, и с особенностями зрения, используйте международные рекомендации по обеспечению доступности веб-контента (WCAG). В них сказано, что UI-элементы (формы, кнопки и т. д.) должны иметь контрастность не менее 3:1.
В нашем примере у стрелки слишком низкая контрастность. Чтобы увеличить ее до соотношения 3:1, мы добавили градиент на верхнюю треть изображения и тень к самой стрелке. Так элемент будет хорошо виден на любом фоне.
Чтобы ваш сайт был доступен для всех пользователей, в том числе, и с особенностями зрения, используйте международные рекомендации по обеспечению доступности веб-контента (WCAG). В них сказано, что UI-элементы (формы, кнопки и т. д.) должны иметь контрастность не менее 3:1.
В нашем примере у стрелки слишком низкая контрастность. Чтобы увеличить ее до соотношения 3:1, мы добавили градиент на верхнюю треть изображения и тень к самой стрелке. Так элемент будет хорошо виден на любом фоне.
Контрастность главной кнопки тоже была слишком низкой. Мы уже сделали ее ярче, когда говорили о визуальной иерархии, но здесь этот пример тоже можно упомянуть.
Если у кнопки будет низкая контрастность, то люди с особенностями зрения могут ее не распознать и не нажать. Увеличив контрастность, мы сделали кнопку доступной для всех пользователей и скорректировали визуальную иерархию.
Наш дизайн становится все более удобным и доступным, но есть еще несколько недочетов, которые предстоит исправить.
Наш дизайн становится все более удобным и доступным, но есть еще несколько недочетов, которые предстоит исправить.
8. Убедитесь, что текст имеет контрастность 4,5:1
Чтобы пользователи с особенностями зрения смогли без труда читать текст, WCAG рекомендует придерживаться следующих правил:
- Для текста небольшого размера (18 пикселей и меньше) контрастность должна быть не менее 4,5:1.
- Для крупного текста (более 18 пикселей жирным шрифтом или более 24 пикселей обычным шрифтом) нужна контрастность 3:1.
Текст с информацией о местоположении тоже недостаточно контрастен. Тонкий шрифт еще больше затрудняет чтение. Мы сделали серый цвет текста более темным — так его легче прочитать. Позже мы внесем в него еще изменения, чтобы дополнительно улучшить восприятие.
9. Не используйте в качестве индикатора только цвет
Некоторые пользователи имеют особенности цветового восприятия — например, они не отличают красный цвет от зеленого или вовсе не различают цвета. Поэтому для передачи смысла в интерфейсе нельзя использовать только цвет — нужны дополнительные визуальные подсказки.
В нашем примере синий указывает на кликабельность ссылки, но если убрать цвет, то текст ссылки будет выглядеть так же, как и основной. Поэтому пользователь с особенностями восприятия не поймет, что элемент интерактивен. Если мы подчеркнем текст, это укажет, что перед нами ссылка.
В нашем примере синий указывает на кликабельность ссылки, но если убрать цвет, то текст ссылки будет выглядеть так же, как и основной. Поэтому пользователь с особенностями восприятия не поймет, что элемент интерактивен. Если мы подчеркнем текст, это укажет, что перед нами ссылка.
10. Используйте шрифты без засечек
Гарнитура — это комплект шрифтов одного рисунка, но разных размеров и начертаний. Например, есть гарнитура Helvetica, а в ее составе — шрифты Helvetica bold (жирный) и Helvetica regular (обычный). В дизайне лучше использовать шрифты без засечек (семейства sans-serif), потому что они более нейтральны, просты и легче читаются.
В нашем примере в заголовке используется шрифт с засечками — он довольно сложен для восприятия. Также у него ярко выражен стиль, который может не сочетаться с некоторыми фото в приложении. Заменив его на шрифт без засечек, мы упростили восприятие заголовка и сделали его более эстетичным.
В нашем примере в заголовке используется шрифт с засечками — он довольно сложен для восприятия. Также у него ярко выражен стиль, который может не сочетаться с некоторыми фото в приложении. Заменив его на шрифт без засечек, мы упростили восприятие заголовка и сделали его более эстетичным.
11. Выбирайте шрифты с высокими строчными буквами
Шрифты с высокими строчными буквами и большим интервалом между ними легко читаются, даже если надпись мелкая. Высота строчных букв в шрифте обозначается как x-height.
Сравнение x-heigth шрифтов Gill Sans и Lato
В нашем примере используется шрифт Gill Sans с небольшой x-height. Если мы заменим его, например, на Lato, читабельность станет выше.
Вот как выглядит пример после замены шрифта Gill Sans на Lato.
12. Не увлекайтесь верхним регистром
Верхний регистр выглядит так, как будто вы КРИЧИТЕ НА ЛЮДЕЙ — ЭТО ОЧЕНЬ ТРУДНО ЧИТАТЬ. Если у вас нет веской причины для крика, не стоит использовать Caps Lock.
Когда вы читаете, то воспринимаете общую форму слова, а не каждую отдельную букву — форма помогает быстрее распознавать слова. Если писать текст только заглавными буквами, то они будут иметь одинаковую прямоугольную форму. Это вынуждает читать слово не сразу целиком, а букву за буквой.
Когда вы читаете, то воспринимаете общую форму слова, а не каждую отдельную букву — форма помогает быстрее распознавать слова. Если писать текст только заглавными буквами, то они будут иметь одинаковую прямоугольную форму. Это вынуждает читать слово не сразу целиком, а букву за буквой.
В нашем примере текст, который указывает местоположение, написан заглавными буквами. Если мы напишем его классическим способом, это заметно улучшит читабельность.
13. Используйте только обычный и жирный шрифт
В каждой гарнитуре доступно несколько различных начертаний шрифтов, но не стоит использовать их все сразу — это придаст интерфейсу неряшливость и добавит визуальный шум. Также это негативно сказывается на согласованности элементов.
Пусть ваш дизайн будет простым и лаконичным — используйте только обычное и жирное начертание.
Пусть ваш дизайн будет простым и лаконичным — используйте только обычное и жирное начертание.
Вот несколько советов:
- Используйте жирный шрифт для заголовков, чтобы выделить их;
- Используйте обычный шрифт для любого другого текста;
- Если вы все же хотите использовать ультратонкое или очень жирное начертание, применяйте его в заголовках или текстах, набранных крупным кеглем — мелкие надписи могут получиться трудночитаемыми.
14. Избегайте черного цвета
Черный цвет очень контрастен по отношению к белому: яркость черного равна 0%, а белого — 100%. Большая разница в яркости заставляет глаза работать интенсивнее — это вызывает напряжение и усталость при чтении текста. Поэтому в UI-дизайне мы, как правило, избегаем чисто черного цвета, используя вместо него темно-серый.
В примере для нескольких элементов использован черный цвет — если мы заменим его на темно-серый, это улучшит читабельность. Говоря о визуальной иерархии, мы отметили, что текст с описанием объекта слишком яркий. Чтобы улучшить иерархию, мы заменили цвет текста на светло-серый. Так он менее заметен и не отвлекает внимания от более важных по иерархии элементов.
В примере для нескольких элементов использован черный цвет — если мы заменим его на темно-серый, это улучшит читабельность. Говоря о визуальной иерархии, мы отметили, что текст с описанием объекта слишком яркий. Чтобы улучшить иерархию, мы заменили цвет текста на светло-серый. Так он менее заметен и не отвлекает внимания от более важных по иерархии элементов.
15. Выравнивайте текст по левому краю
Текст на нашем языке читается слева направо, поэтому для лучшей читабельности выравнивайте его по левому краю. Выровненное по центру полотно текста гораздо хуже воспринимается — особенно людьми с особенностями зрения. Дело в том, что начальная точка новой строки постоянно меняется, и глазам нужно больше работать, чтобы каждый раз ее находить.
Выравнивание по центру может подойти только для заголовков и короткого текста, который можно быстро прочитать.
Выравнивание по центру может подойти только для заголовков и короткого текста, который можно быстро прочитать.
В нашем примере текст описания объекта выровнен по центру. Выровняв его по левому краю, мы улучшили читаемость и согласованность с текстом выше.
16. Междустрочный интервал в основном тексте должен быть полуторным
Междустрочный интервал — это расстояние между двумя строками текста по вертикали. Если он будет слишком маленьким, есть риск повторного прочтения одной и той же строки — глазам будет сложно перестроиться на следующую. Чтобы текст (особенно длинный) было удобнее читать, используйте интервал от полуторного до двойного.
В нашем примере исходный интервал одинарный. Увеличив его до 1,6, мы повысили читабельность.
Исправленный дизайн готов!
С помощью простых, но эффективных рекомендаций по UI-дизайну мы быстро нашли и устранили целую кучу проблем в интерфейсе.
Надеемся, что ваше понимание UI улучшились и вы увидели, что дизайн пользовательского интерфейса — это не так сложно. Хотя на первый взгляд UI-дизайн может показаться волшебным видом искусства, на самом деле он подчиняется конкретным правилам — наподобие тех, которые мы рассмотрели в статье. И если использовать объективную логику, а не субъективное мнение, то это значительно упростит и ускорит разработку интуитивно понятных, доступных и красивых интерфейсов.