Гайд: 6 способов увеличить читаемость интерфейса

На конференции DevGAMM 2021 арт-директор Owl Studio Вера Величко рассказала о способах улучшения читаемости интерфейсов.

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

По словам Веры, существует два главных критерия оценки интерфейсов:

юзабилити;

внешний вид.

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

Элементы интерфейса должны выделяться на более спокойном фоне.

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

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

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

Разберём ещё три примера. По словам Веры, ошибка первого слева интерфейса — слабый контраст. К примеру, синие шкалы трудно заметить на фоне эмблемы.

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

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

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

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

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

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

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

Ещё один способ повысить читаемость интерфейса — с помощью контраста цветовых гамм, объёмов и прочих стилистических элементов. К примеру, можно сочетать объёмные элементы и плоские, текстурные и гладкие.

В обоих примерах нечитаемых интерфейсов (см. выше) слишком много активных объёмных элементов. Все они конкурируют за внимание пользователя.

На третьем примере показан интерфейс, где объёмные элементы контрастируют с плоским фоном. Вокруг иконок и кнопок много свободного пространства.

Выше — ещё один пример, где объёмные элементы хорошо выделяются на плоском фоне.

Такие эффекты, как свечение, тени и объём помогают выделить важные элементы интерфейса, даже если он выполнен в самой простой стилистике.

На примерах, приведённых выше, главные элементы отделены от фона с помощью теней и эффекта выдавливания. Такие небольшие детали делают интерфейс тактильнее.

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

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

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

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

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

Интерфейс должен одинаково хорошо читаться:

когда он большого размера;

когда он маленького размера;

в градациях серого;

с размытием.

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

статьи по теме UI дизайн;

книга Александры Корольковой «Живая типографика» (есть в свободном доступе) — про тексты, вёрстку и логотипы. Поможет разобраться с основами контрастов, читаемости и композиции.

Комментарии: 0