Дизайн

“Тренды 2020” или графика в дизайне интерфейсов

07 июля 2020

Пусть вас не смущает столь громкое название, но при работе над одним из недавних проектов я столкнулся с проблемой последней пары лет и понял, что в будущем придется слегка скорректировать свой подход при выборе графического оформления ряда скринов. А столкнулся я с возмущением ЦА при тестировании, когда они видели на скринах графику, не соответствующую их гендерным, расовым и прочим ожиданиям. Но для начала немного общей информации: зачем и где нужна графика в интерфейсах. 

 

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

1. При переходе на несуществующую страницу или при возникновении какой-либо ошибки системной (замечательный пример дрибббла, который даже в случае перехода на несуществующую страницу не оставляет вас без результатов и предлагает посмотреть другие шоты).

 

2. При входе в систему первый раз мы проводим пользователя по системе (или просто онбординг слайд-шоу, где показана общая инфа, или же мы проводим пользователя по тестовому сценарию и принуждаем выполнить ряд действий для того, чтобы точно на практике закрепить основное).

 

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

 

4. Ожидание выполнения/завершения какого-либо действия – дабы не оставлять пользователя в неведении с вопросами “что происходит?!” или “а что-то вообще происходит сейчас?!” мы также добавляем на экран или какие-то компоненты по типу прогресс бара, или же полноценную анимированную графику, говорящую пользователю о том, что что-то происходит и ему просто необходимо подождать (согласен, на фото не самая вдохновляющая графика от всем известного банка, но мне пришлось сделать перевод, чтобы получить этот скрин – лайк за это! 🙂 ).

 

 5. Ну и не стоит забывать про экраны в конце пути (экраны благодарности и т.п.) + различные сплеш-скрины при запуске приложения или при старте какого-нибудь сценария, ведь всем нам приятно, когда нас хвалят или благодарят.

 

Все это необходимо для избегания негативного опыта пользователя (1, 2, 3 и 4 пункты) + для получения положительных эмоций как на старте, так и при завершении какого-либо сценария/флоу (5 пункт). И не стоит забывать, что негативный опыт может быть даже в 5 пункте. Не всегда человек, к примеру, что-то покупает или же делает финансовые переводы по своему желанию. Например, скидываетесь вы на подарок коллеге, а кому-то не очень хочется скидываться. Или же есть необходимость что-то купить срочно, но эта покупка сейчас очень не вовремя. И мы при помощи приятного экрана благодарности за выполнение этого действия смягчаем негатив у нашего пользователя, благодаря его за это или даже указывая, что он поступил правильно и ему эта покупка будет служить долго и качественно (+ там же можно предоставить скидку на какую-то следующую услугу или покупку, тем самым придавая ценность выполненному действию и увеличивая вероятность возврата пользователя в будущем – примером этому служит набор скидок на выбор после любой транзакции в приват24).

 

И вот во время работы над одним из последних проектов я столкнулся с тем, что графика на вышеперечисленных скринах не вызывает положительных эмоций (ну или хотя бы не блокирует негативные). Более того, она не решает свою задачу вовсе не потому, что она не подходит по смыслу, до смысла пользователи вообще не добираются, ибо ЦА при виде графики сразу задавала вопросы: “А почему тут мужчина, а не женщина?”, “почему цвет кожи не <какой-либо>?” и т.д. Ниже я привожу примеры графики, оттуда я исключил явно привязанные к проекту элементы (кроме цветов, само собой) и любые текстовые блоки + компоненты, дабы не нарушить НДА:

 

Ну и вывод, который я для себя сделал: видимо, (в свете последних событий, когда важно учесть и не зацепить интересы разных рас, полов, меньшинств и прочих) гораздо проще избавиться от изображений человека (если не считать маскотов брендов, с которыми они ассоциируются) в сопроводительной графике в интерфейсах, чем попытаться учесть интересы всех и никого не обидеть одновременно. Это не значит, что я вообще не буду применять изображения человека в графике, просто если я буду понимать, что есть риск, что до меня докопаются с этим, то тогда лучше не юзать графику с людьми, а если ЦА не критично смотрит на это в свете последних веяний, то конечно же я без проблем воспользуюсь графикой с присутствием людей.

Почитай еще 3 последних статьи: