На конференции DevGAMM 2021 арт-директор Owl Studio Вера Величко рассказала о способах улучшения читаемости интерфейсов.
Выбрали самое важное — почему одни интерфейсы лучше других, как быстро протестировать читаемость, и что погуглить, если хотите разбираться в теме глубже.
По словам Веры, существует два главных критерия оценки интерфейсов:
юзабилити;
внешний вид.
Главный показатель качества визуальной части — читаемость. Ниже — шесть принципов, соблюдение которых поможет сделать интерфейс нагляднее и удобнее.
Элементы интерфейса должны выделяться на более спокойном фоне.
Выше приведены три варианта интерфейса. Первые два, по словам Веры, читаются плохо, а третий — хорошо. Проблема первого слева интерфейса в том, что фишки уровней не выделяются за счёт контраста и насыщенности, а вот фон слишком пёстрый.
Второй интерфейс — более удачный: большая красная кнопка и колесо Фортуны выделяются на синем фоне, но элементы, которые находятся по бокам, сливаются друг с другом.
Третий интерфейс — самый наглядный. Функциональные элементы вынесены на контрастную подложку, а их цветовая гамма отличается от фона. Однако прогресс-бар под персонажем заметить сложно — его можно было сделать ещё контрастнее.
Разберём ещё три примера. По словам Веры, ошибка первого слева интерфейса — слабый контраст. К примеру, синие шкалы трудно заметить на фоне эмблемы.
Второй интерфейс — иконки и текст сливаются с подложками, поэтому пользователю трудно с первого взгляда найти нужную информацию.
Разработчики третьего интерфейса использовали правило «Тёмное — на светлом, светлое — на тёмном». Поэтому светлые иконки, кнопки и тексты выделяются на тёмном фоне и хорошо считываются.
Вера упомянула, что, проектируя интерфейс, нужно убедиться, что окно не перегружено и не отвлекает от информации, которую несёт пользователю.
Первый пример — элементы интерфейса слишком насыщенные. «Тяжёлая» рамка, блики на кнопках и глубокие тени под подложками перетягивают внимание на себя, и зритель теряет точку фокуса.
Второй интерфейс — красивые, но слишком массивные элементы интерфейса конфликтуют с простой информацией, которую нужно донести — игрок получил новый уровень и трофей. По словам Веры, нужно было оставить вокруг функциональных элементов больше пустого пространства и сделать их контрастнее.
Третий интерфейс читается хорошо, потому что пользователь сразу понимает, где функциональные элементы, а где декор. Интерактивные элементы — самые яркие и контрастные.
Выше — ещё один пример сложного, но читаемого интерфейса. Вокруг каждого функционального элемента много пустого пространства. Иллюстрация в центре не мешает восприятию — она не спорит с функциональными элементами, которые вынесены на подложку и сгруппированы.
Ещё один способ повысить читаемость интерфейса — с помощью контраста цветовых гамм, объёмов и прочих стилистических элементов. К примеру, можно сочетать объёмные элементы и плоские, текстурные и гладкие.
В обоих примерах нечитаемых интерфейсов (см. выше) слишком много активных объёмных элементов. Все они конкурируют за внимание пользователя.
На третьем примере показан интерфейс, где объёмные элементы контрастируют с плоским фоном. Вокруг иконок и кнопок много свободного пространства.
Выше — ещё один пример, где объёмные элементы хорошо выделяются на плоском фоне.
Такие эффекты, как свечение, тени и объём помогают выделить важные элементы интерфейса, даже если он выполнен в самой простой стилистике.
На примерах, приведённых выше, главные элементы отделены от фона с помощью теней и эффекта выдавливания. Такие небольшие детали делают интерфейс тактильнее.
Однако эффекты нужно использовать осторожно — если тени, цвета и обводки сделать слишком активными, внимание пользователя быстро расфокусируется.
Разное расстояние между элементами позволяет группировать их и делать более читаемыми для пользователя — чем ближе элементы друг к другу, тем больше они воспринимаются как единое целое.
Ошибка первых двух интерфейсов в том, что на них очень много элементов, и они расположены слишком близко друг к другу, поэтому визуально их сложно разбить на группы.
Иногда, даже если художники заранее продумали все важные детали, читаемость интерфейса может потеряться при сборке макета техническими специалистами. Вера отметила, что в этом случае ответственность за контроль качества лежит на художнике.
Если игра будет издаваться на нескольких платформах, нужно протестировать читаемость интерфейса на каждой из них.
Интерфейс должен одинаково хорошо читаться:
когда он большого размера;
когда он маленького размера;
в градациях серого;
с размытием.
Если во всех четырёх случаях функциональные элементы интерфейса выделяются на фоне декоративных, значит он будет понятен для игрока.
статьи по теме UI дизайн;
книга Александры Корольковой «Живая типографика» (есть в свободном доступе) — про тексты, вёрстку и логотипы. Поможет разобраться с основами контрастов, читаемости и композиции.