Дизайн пользовательского интерфейса – это сложно. При таком количестве вариантов на выбор в отношении макета, интервалов, типографики и цвета принятие дизайнерских решений может быть непосильным. Когда вы добавляете удобство использования, доступность и психологию, это становится еще сложнее.
К счастью, дизайн пользовательского интерфейса не должен быть таким сложным. За почти два десятилетия работы дизайнером продукта я понял, что большинство моих решений по визуальному дизайну и взаимодействию с клиентами руководствуются системой логических правил. Не художественное чутье или волшебная интуиция, а простые правила.
Наличие системы логических правил помогает вам эффективно принимать обоснованные дизайнерские решения. Без логической системы вы просто используете внутреннее чутье, чтобы перемещать материал, пока он не будет выглядеть красиво.
Я люблю правила и логику, но дизайнерские решения редко бывают черно-белыми. Вместо строгих правил, которым вы должны следовать, воспринимайте следующие советы как полезные рекомендации, которые хорошо работают в большинстве случаев.
Самый быстрый способ научиться – это делать, так что давайте начнем.
Давайте исправим этот пример, используя логические правила
Следующие 2 дизайна предназначены для страницы сведений о недвижимости в приложении для краткосрочной аренды недвижимости. Первый – оригинальный дизайн. Второй – результат применения некоторых логических правил или рекомендаций.
Даже не имея большого опыта визуального проектирования или взаимодействия, вы, вероятно, заметите, что оригинальный дизайн кажется неряшливым, сложным и неудобным в использовании. Это потому, что он содержит много проблемных деталей дизайна, которые создают риск для удобства использования. Возможно, вы уже заметили некоторые из них?
Давайте исправим проблемы с оригинальным дизайном по очереди, используя следующие логические правила или рекомендации:
- Используйте пробел для группировки связанных элементов
- Будьте последовательны
- Убедитесь, что похожие элементы функционируют одинаково
- Создайте четкую визуальную иерархию
- Удалите ненужные стили
- Используйте цвет целенаправленно
- Убедитесь, что элементы интерфейса имеют коэффициент контрастности 3: 1
- Убедитесь, что текст имеет коэффициент контрастности 4,5: 1
- Не полагайтесь только на цвет в качестве индикатора
- Используйте один шрифт без засечек
- Используйте шрифт с более высокими строчными буквами
- Ограничьте использование заглавных букв
- Используйте только обычный и жирный шрифт
- Избегайте чисто черного текста
- Выровнять текст по левому краю
- Используйте высоту основного текста не менее 1,5 строки
1. Используйте пробел для группировки связанных элементов
Разбиение информации на более мелкие группы связанных элементов помогает структурировать и организовать интерфейс. Это ускоряет и упрощает его понимание и запоминание людьми.
Вы можете сгруппировать связанные элементы, используя следующие методы:
- Поместите связанные элементы в один контейнер
- Элементы, связанные с пространством, расположены близко друг к другу
- Сделайте так, чтобы связанные элементы выглядели похожими
- Выровняйте связанные элементы непрерывной линией
Использование контейнеров – самый сильный визуальный намек на группировку элементов интерфейса, но это может привести к ненужному беспорядку. Ищите возможности использовать другие методы группировки, они часто более тонкие и могут помочь упростить дизайн.
Использование пространства, в частности, является очень эффективным и простым способом группировки связанных элементов. Вы также можете комбинировать методы группировки, чтобы более четко отображать группировки.
В нашем примере из-за нехватки места между контентом дизайн выглядит загроможденным и трудным для понимания. Увеличение интервала помогает четко сгруппировать контент, делая его более организованным и понятным.
2. Будьте последовательны
Согласованность в дизайне пользовательского интерфейса означает, что похожие элементы выглядят и работают аналогичным образом. Это должно быть верно как в вашем продукте, так и при сравнении с другими хорошо зарекомендовавшими себя продуктами. Эта предсказуемая функциональность улучшает удобство использования и уменьшает количество ошибок, поскольку людям не нужно постоянно изучать, как все работает.
В нашем примере стили значков несовместимы, поскольку некоторые из них заполнены, а другие нет. Это может сбить с толку некоторых людей, поскольку заполненные значки часто указывают на то, что элемент выбран. Выделение всех значков штрихом в 2 пункта и закругленными углами улучшает согласованность и придает каждому значку одинаковый визуальный вес.
Текстовые надписи также добавляются к значкам, чтобы люди могли понять, что они означают, особенно те, кто использует программы чтения с экрана (программное обеспечение, описывающее интерфейс с помощью речи или шрифта Брайля для тех, кто его не видит).
3. Убедитесь, что похожие элементы функционируют одинаково
Если элементы выглядят одинаково, люди будут ожидать, что они будут работать аналогичным образом. Поэтому постарайтесь обеспечить согласованную визуальную обработку элементов с одинаковой функциональностью. И наоборот, постарайтесь, чтобы элементы с разной функциональностью выглядели по-разному.
В нашем примере контейнеры значков имеют визуальный стиль, аналогичный кнопке “забронировать сейчас”. Это придает им вид интерактивности, хотя это не так. Удаление синего цвета и оформления кнопок из значков помогает избежать их принятия за интерактивные элементы.
4. Создайте четкую визуальную иерархию
Не вся информация в интерфейсе имеет одинаковый уровень важности. Стремитесь представить информацию в порядке важности, сделав более важные элементы более заметными.
Четкий порядок важности, или визуальная иерархия, помогает людям быстро просматривать информацию и фокусироваться на областях, представляющих интерес. Это также улучшает эстетику, создавая ощущение порядка. Вы можете создать четкую визуальную иерархию, используя вариации размера, цвета, контраста, интервала, положения и глубины.
Вот пример баннера-героя веб-сайта без четкой визуальной иерархии, за которым следует баннер с элементами, четко представленными в порядке важности.
Быстрый и простой способ проверить, понятна ли ваша визуальная иерархия, – это использовать тест на прищур. Просто прищурьте глаза и посмотрите на свой дизайн. В качестве альтернативы вы можете отодвинуться подальше от экрана или размыть свой дизайн. Вы все равно должны уметь определять наиболее важные элементы и понимать, для чего предназначен интерфейс.
Давайте применим тест на косоглазие к нашему примеру. Мы видим, что существует множество элементов с одинаковой заметностью, конкурирующих за внимание. Между тем, основное действие в левом нижнем углу вообще не выделяется.
Основное действие, как правило, должно быть самым заметным элементом интерфейса. Для достижения этой цели используется высококонтрастный цвет фона и жирный шрифт. Это также устраняет проблему доступности кнопки с низкой контрастностью, которую мы рассмотрим позже.
При применении теста косоглазия к обновленному дизайну основное действие, несомненно, является наиболее заметным элементом.
Визуальная иерархия теперь стала более понятной, но еще есть возможности для улучшения. Например, блок основного текста все еще слишком заметен по сравнению с его уровнем важности. Вскоре мы изучим несколько кратких рекомендаций по типографике, которые помогут скорректировать визуальную иерархию.
5. Удалите ненужные стили
Ненужная информация и визуальные стили могут отвлекать и увеличивать когнитивную нагрузку (количество мозговых усилий, необходимых для использования интерфейса). Избегайте ненужных линий, цветов, фона и анимации, чтобы создать более простой и сфокусированный интерфейс.
В нашем примере пробелы и границы вокруг изображения создают ненужную визуальную сложность. Они не нужны для передачи информации или группировки элементов, поэтому мы можем безопасно удалить их, чтобы упростить дизайн.
3. Используйте цвет целенаправленно
Используйте цвет экономно и целенаправленно. Старайтесь избегать использования цвета исключительно для украшения, так как это может сбивать с толку и отвлекать. Начните с черного и белого и вводите цвет там, где он передает смысл.
Простой и эффективный подход заключается в применении фирменного цвета к интерактивным элементам, таким как текстовые ссылки и кнопки. Это помогает научить людей тому, что интерактивно, а что нет. Старайтесь избегать использования фирменного цвета на неинтерактивных элементах.
Вам не нужно добавлять цвет ко всем интерактивным элементам, поскольку у некоторых уже есть визуальные подсказки, указывающие на то, что они интерактивные. Например, карточки в следующем примере по-прежнему выглядят интерактивными, с синей ссылкой или без нее.
В нашем оригинальном примере синий заголовок может выглядеть красиво, но из-за него текст кажется интерактивным. Чтобы избежать путаницы, мы убрали синий цвет из заголовка, поскольку он не является интерактивным.
Мы также удалили синий цвет из других неинтерактивных элементов, таких как рейтинг звезд. Это значительно упрощает понимание того, что интерактивно, а что нет.
7. Убедитесь, что элементы интерфейса имеют коэффициент контрастности 3: 1
Контрастность – это мера разницы в воспринимаемой яркости двух цветов. Она выражается в соотношении от 1: 1 до 21: 1. Например, черный текст на черном фоне имеет наименьшее соотношение контрастности 1: 1, тогда как черный текст на белом фоне имеет наибольшее соотношение 21: 1. Существует множество онлайновых инструментов, которые помогут вам измерить контрастность между различными цветами.
Чтобы люди с нарушениями зрения могли четко видеть детали интерфейса, стремитесь, по крайней мере, соответствовать Рекомендациям по обеспечению доступности веб-контента (WCAG) 2.1 уровня цветовой контрастности AA. Это означает, что элементы пользовательского интерфейса, такие как поля формы и кнопки, должны иметь коэффициент контрастности не менее 3: 1.
В нашем примере контрастность значка со стрелкой слишком мала. Добавление тени к значку и градиентного наложения на верхнюю треть изображения придает значку достаточную контрастность 3: 1, независимо от того, на каком изображении он расположен.
Контрастность основной кнопки в исходном примере также была слишком низкой. Мы исправили это ранее при рассмотрении визуальной иерархии, но об этом также стоит упомянуть здесь.
Риск использования кнопки с низкой контрастностью заключается в том, что люди со слабым зрением могут не распознать ее как кнопку, поскольку они не могут видеть форму кнопки. Увеличение коэффициента контрастности кнопки выше 3: 1 делает кнопку доступной, а также помогает скорректировать визуальную иерархию.
Увеличение контрастности стрелок и кнопок до соотношения выше 3: 1 дает нам следующий дизайн. Мы постепенно добиваемся этого, но нам еще предстоит исправить больше проблем.
8. Убедитесь, что текст имеет коэффициент контрастности 4,5: 1
Чтобы люди с нарушениями зрения могли четко читать текст, он должен соответствовать следующим требованиям к контрастности WCAG 2.1 уровня AA:
- Для текста небольшого размера (18 пикселей и менее) требуется минимальная контрастность 4,5: 1.
- Для большого текста (более 18 пикселей жирным шрифтом или более 24 пикселей обычным шрифтом) требуется минимальный контраст 3: 1.
В нашем примере мелкий текст в элементе “Количество фотографий” имеет недостаточную контрастность. Мы увеличиваем коэффициент контрастности выше 4,5: 1, увеличивая непрозрачность серого контейнера, а также добавляя тень от текста.
Контрастность текста о местоположении также слишком мала. Тонкий шрифт еще больше затрудняет чтение. Использование более темного оттенка серого помогает сделать текст более доступным. В ближайшее время мы внесем дополнительные обновления в текст, чтобы улучшить его.
9. Не полагайтесь только на цвет в качестве индикатора
Существует много различных типов дальтонизма, и в основном они поражают мужчин. Обычно дальтоникам трудно отличить красный от зеленого, но некоторые вообще не способны различать цвета.
Чтобы обеспечить доступность интерфейса для людей с дальтонизмом, нельзя полагаться только на цвет для передачи смысла или различения визуальных элементов. Для различения элементов интерфейса необходимо использовать дополнительные визуальные подсказки.
В нашем примере синий цвет используется в тексте “отзывы”, чтобы указать, что это ссылка. Если убрать цвет, текст ссылки будет выглядеть так же, как и другой текст, поэтому дальтоник не сможет определить, что это ссылка. Подчеркивание текста ссылки четко отличает его от другого текста при отсутствии цвета.
10. Используйте один шрифт без засечек
Шрифт – это набор связанных начертаний со схожим стилем или эстетикой. Примером шрифта является Helvetica. Шрифты – это вариации внутри начертаний, такие как вес или размеры. Например, Helvetica bold и Helvetica regular – это два разных шрифта в наборе Helvetica.
Безопаснее всего использовать один шрифт без засечек для дизайна интерфейса, поскольку они, как правило, наиболее разборчивы, нейтральны и просты.
В нашем примере в заголовке используется подробный шрифт с засечками, который немного сложен для чтения и может кого-то отвлечь. Он также обладает индивидуальностью, которая может не соответствовать некоторым фотографиям в этом приложении для аренды недвижимости. Упрощение его с помощью шрифта без засечек может помочь улучшить удобство использования и эстетику.
11. Используйте шрифт с более высокими строчными буквами
Ищите шрифты с более высокими строчными буквами и большим интервалом между буквами, поскольку они, как правило, более разборчивы при небольших размерах. Высота строчных букв в шрифте известна как x-height.
В нашем примере используется шрифт Gill Sans, который имеет относительно небольшую высоту x. Изменение шрифта на шрифт с большей высотой x, например Lato, помогает улучшить читаемость.
Вот как выглядит наш пример после обновления шрифта с Gill Sans на Lato.
12. Ограничьте использование заглавных букв
Если вы не кричите на людей, то не так уж много веских причин использовать заглавные буквы. ОНИ ГРОМКИЕ И ИХ ТРУДНО ЧИТАТЬ.
Когда вы читаете, вы смотрите на форму слова, а не на каждую букву. Форма помогает вам быстрее распознать слово. Все слова в верхнем регистре имеют одинаковую прямоугольную форму. Это вынуждает вас читать каждую букву одну за другой.
В нашем примере в тексте местоположения используется верхний регистр. Изменение его на регистр предложения, где с заглавной буквы пишутся только первое слово и имена собственные (названия людей, мест или вещей), помогает улучшить читаемость.
13. Используйте только обычный и жирный шрифт
То, что в шрифте доступно множество весов шрифтов, не означает, что вам нужно использовать их все в своих проектах. Использование большого количества разных весов шрифтов может добавить шума и беспорядка в ваш интерфейс. Это также затрудняет последовательное использование веса каждого шрифта.
Сделайте вашу систему дизайна простой и лаконичной, используя только обычный и жирный шрифт.
Советы по быстрому использованию:
- Используйте жирный шрифт для заголовков, чтобы подчеркнуть их.
- Используйте обычный шрифт для другого текста меньшего размера.
- Если вы решите использовать очень тонкие или толстые шрифты, зарезервируйте их для заголовков и текста большего размера, поскольку при меньших размерах их может быть трудно прочитать.
В нашем примере в тексте местоположения используется легкий шрифт. Даже несмотря на то, что мы увеличили контрастность выше требуемого соотношения 4,5: 1, некоторым людям все равно будет трудно читать тонкие символы. Увеличение веса шрифта до обычного помогает улучшить читаемость и упрощает дизайн.
14. Избегайте чисто черного текста
В дизайне пользовательского интерфейса, как правило, безопаснее избегать чисто черного цвета, поскольку он очень контрастен с белым. Этот высокий контраст может вызвать напряжение глаз и усталость при чтении текста.
Яркость черного цвета равна 0%, а белого – 100%. Большая разница в яркости цветов заставляет наши глаза работать интенсивнее. Безопаснее избегать чисто черного на фоне белого и выбирать вместо него темно-серый.
В нашем примере чистый черный цвет используется для нескольких элементов. Изменение его на темно-серый помогает улучшить читаемость. Ранее, рассматривая визуальную иерархию, мы заметили, что текст описания свойств слишком выделялся. Чтобы убедиться, что элементы интерфейса представлены в порядке важности, мы используем более светлый серый цвет для текста описания свойств, чтобы уменьшить его заметность.
15. Выравнивайте текст по левому краю
Английский и русский читаются слева направо, вниз в виде буквы Е. Поэтому лучше выровнять текст по левому краю для оптимальной читаемости. Для длинного основного текста безопаснее избегать текста, выровненного по центру. Его сложнее читать, особенно людям с когнитивными нарушениями.
Выравнивание по центру может подойти для заголовков и короткого текста, поскольку его можно быстро прочитать. Однако выравнивание по центру затрудняет чтение более длинного основного текста, поскольку начальная точка каждой строки постоянно меняется. Вашим глазам нужно больше работать, чтобы найти начальную точку каждой строки.
В нашем примере текст описания свойства выровнен по центру. Выравнивание текста по левому краю улучшает читаемость, а также согласуется с текстом, выровненным по левому краю выше.
16. Используйте высоту основного текста не менее 1,5 строки
Высота строки – это расстояние по вертикали между двумя строками текста. Промежуток между строками помогает людям не перечитывать одну и ту же строку текста. Это также выглядит и ощущается более удобным для чтения.
Для доступности и удобочитаемости, особенно для длинного основного текста, убедитесь, что высота строки составляет не менее 1,5 (150%). Обычно хорошо поддерживать высоту строки от 1,5 до 2.
В нашем примере высота строки равна всего 1 (100%). Увеличение ее до 1,6 (160%) помогает улучшить читаемость.
Мы это исправили!
С помощью нескольких простых, но действенных рекомендаций по дизайну пользовательского интерфейса мы быстро нашли и устранили целую кучу проблем с нашим примером дизайна.
Я надеюсь, вы начинаете понимать, что дизайн пользовательского интерфейса не обязательно должен быть таким сложным. Это может показаться волшебным видом искусства, но многое в нем составлено из логических правил или руководств, подобных тем, которые мы только что изучили. Использование объективной логики, а не субъективного мнения, позволяет быстрее и проще создавать интуитивно понятные, доступные и красивые интерфейсы.
Автор статьи: Adham Dannaway