Как использовать персонажей в интерфейсах, и почему сова из Duolingo пугает пользователей

Это «Атвинта». Для рекламы и пиара мировые бренды придумывают маскотов — они могут быть дружелюбными, забавными или даже токсичными. Мы перенесли персонажей в контекст интерфейсов и рассказали, как создать своего маскота и как он поможет в общении с клиентом на сайте или в сервисе.

Зачем маскот нужен бренду

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

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

<p>Имя Мистера Пропера в зарубежных странах — Mr. Clean</p>

Имя Мистера Пропера в зарубежных странах — Mr. Clean

Через персонажей бренд закрывает множество задач:

  • транслирует маркетинговые смыслы («Ешь чипсы и будешь такой же крутой, как Честер»);
  • формирует визуальную ассоциацию с брендом («Да это же полковник Сандерс из KFC!»);
  • помогает отстроиться от конкурентов («У Арсенала динозавр, а у Челси — лев»);
  • обеспечивает эмоциональную связь с аудиторией за счет имитации человеческого поведения — маскот может говорить и попадать в разные ситуации, что вызывает у людей эмпатию («Вот блин, эти Эмэндемсы Санту напугали, он аж в обморок упал, ну дают»);
  • увеличение продаж за счет привязанности к персонажу («Мам, купи этот молочный коктейль со Смешариками»);
  • возможность продвигать мерч («Ура, новые стикеры со Сберкотом»).
<p>Сберкот помогает подружиться с финансами</p>

Сберкот помогает подружиться с финансами

Удобно, что маскота можно использовать в любом пространстве, где находится целевая аудитория:

  • в сети (картинка на баннере в группе ВК или конкурс от лица маскота);
  • на ТВ (реклама на популярном канале);
  • в жизни (промоушн с ростовой куклой в ТЦ).

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

Улучшаем пользовательский опыт

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

Сквозная визуальная коммуникация

Обычно у компании есть несколько площадок в интернете, например, сайт, приложение и аккаунты в соцсетях.

<p>Главная страница сайта Cheetos</p>

Главная страница сайта Cheetos

Знакомый персонаж, использованный в визуалах на всех площадках, поможет быстро привыкнуть к интерфейсу, так как он наполнен уже знакомой атрибутикой.

<p>Интерфейс приложения Cheetos (приложение превращает вас в чипсы)</p>

Интерфейс приложения Cheetos (приложение превращает вас в чипсы)

Этим приемом активно пользуются компании, персонаж которых уже является неотъемлемой частью бренда.

<p>Посты Cheetos ВК </p>

Посты Cheetos ВК

Дополнительные эмоции

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

Главная страница сайта клиники «Энергетик» (by Атвинта)

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

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

Подробнее о проекте писали на VC:

Подсказки

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

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

Игрофикация

В продуктах, где есть атрибут прогресса, маскот будет органичен в роли наставника или приятеля, который поддерживает пользователя на пути развития. От лица персонажа можно выдавать ачивки, выводить мотивационные сообщения или отправлять push-уведомления с напоминаниями: например, чтобы пользователь прошел урок или выпил стакан воды для водного баланса.

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

<p>Мем про Duolingo</p>

Мем про Duolingo

Только аккуратнее с количеством и стилем коммуникации. Например, пользователей сервиса изучения языков Duolingo пугают навязчивые и пассивно-агрессивные сообщения от совы, которая сопровождает весь процесс обучения. В сети даже гуляют мемы о токсичности этого персонажа.

<p>Еще мем</p>

Еще мем

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

Игры

Многие компании выпускают брендированные игры. Это может быть спецпроект к празднику с розыгрышем подарков или инструмент, дополняющий основной продукт компании. Если у компании есть маскот, то он может стать главным героем таких игр.

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

<p>Интерфейс портала финансовой грамотности (by Atwinta)</p>

Интерфейс портала финансовой грамотности (by Atwinta)

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

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

<p>Интерфейс инвестиционной игры (by Atwinta)</p>

Интерфейс инвестиционной игры (by Atwinta)

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

<p>Подсказки и сообщения от Финграмчика </p>

Подсказки и сообщения от Финграмчика

Прием с переносом человеческих качеств на животных и неодушевленные предметы называется антропоморфизмом. С помощью этого подхода мы:

  • упростили обучающий процесс — через фантазийный мир Финграмчика мы можем приводить более простые примеры, что особенно актуально для начинающих инвесторов;
  • сделали геймплей развлекательным — забавно, когда с динозавром происходят обычные житейские ситуации, например, ремонт машины или наследство от дяди. Все это развлекает игрока и улучшает игровой опыт;
  • перенесли негативные кейсы с игрока на персонажа — в некоторых кейсах с Финграмчиком случаются не самые приятные события вроде сломанной лапы. Так мы не связываем негативные ситуации напрямую с игроком, но при этом оставляем такие события в сценарии для реалистичности.
<p>События из жизни Финграмчика</p>

События из жизни Финграмчика

Все эти преимущества будут актуальны и для любого другого маскота, поэтому в формат игр персонажи ложатся идеально.

Как разработать маскота: 3 способа

Разберем несколько основных способов разработки персонажей.

Превратить продукт в персонажа

Самый простой вариант — оживить продукт и сделать его маскотом. Примером служат все те же конфеты M&Ms, коробочки McDonald’s и мистер Мишлен, который собран из покрышек.

<p>Коробочки Хэппи Мил — немного безумные, но им это к лицу</p>

Коробочки Хэппи Мил — немного безумные, но им это к лицу

Основное преимущество в очевидности — аудитория видит оживленный продукт и сразу понимает, к какому бренду он относится. Более сложный нюанс здесь — в создании характера персонажа. Каким будет лицо вашей продукции: энергичным, меланхоличным, рассудительным или безбашенным? Эти вопросы должны решаться в связке между аналитиками, маркетологами и дизайнерами.

<p>Красный и Желтый на промо-сайте </p>

Красный и Желтый на промо-сайте

Метод подходит компаниям с физическим товаром, для остальных более актуален следующий.

Выстроить персонажа на смыслах и отсылках

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

Финграмчик — маскот Цифровой платформы финансовой грамотности населения Кузбасса (by Атвинта)

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

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

<p>Французский сайт Milka</p>

Французский сайт Milka

Еще один пример — коровка Милка, маскот одноименного шоколадного бренда.

Персонаж ассоциируется с молоком, и именно молочный шоколад является флагманским продуктом производителя. К тому же Милка пасется на самых зеленых и самых красивых Альпийских лугах, что создает позитивную ассоциацию с природой и экологичностью продукта.

Ассоциировать персонажа с целевой аудиторией

Другой способ влюбить клиентов в маскота — наделить его характеристиками целевой аудитории. Подумайте:

  • чем занимаются ваши клиенты?
  • как они одеваются?
  • какой сленг используют?
  • какие качества им присущи?

Выявленные элементы внедрите в образ персонажа. Например, так сделала компания Nestle, создав маскота для какао Nesquik — энергичного кролика Квики.

<p>Квики на сайте Nesquik</p>

Квики на сайте Nesquik

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

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

Каким нишам стоит обратить внимание на маскота

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

Продукт для молодой аудитории

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

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

<p>Funko POP даже выпустили фигурку с Честером</p>

Funko POP даже выпустили фигурку с Честером

Если вы делаете сайт или сервис для молодежи и детей — смело создавайте маскота и делайте упор на коммуникацию с персонажем.

Образование

Выше мы указали преимущества маскота в EdTech нише:

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

Сейчас мы в Атвинте работаем над игрофикацией учебного процесса в SMITUP — это образовательная платформа, которую мы разработали для онлайн-школы по подготовке к ЕГЭ, олимпиадам и сессиям.

Подробный кейс по проекту можно посмотреть на VC:

<p><a href="https://vc.ru/design/501466-kak-dizayn-pomogaet-prinimat-resheniya-biznesu-i-gosudarstvu-delaem-dashbordy-kotorymi-budut-polzovatsya" rel="nofollow noreferrer noopener" target="_blank">Дашборд </a>ученика на онлайн-платформе SMITUP (by Атвинта)</p>

Дашборд ученика на онлайн-платформе SMITUP (by Атвинта)

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

<p>Интерфейс <a href="https://vc.ru/design/501466-kak-dizayn-pomogaet-prinimat-resheniya-biznesu-i-gosudarstvu-delaem-dashbordy-kotorymi-budut-polzovatsya" rel="nofollow noreferrer noopener" target="_blank">дашборда</a> игрофикации (by Атвинта)</p>

Интерфейс дашборда игрофикации (by Атвинта)

В будущем персонажей можно будет кастомизировать, что сделает коммуникацию с ними еще более интересной. Сразу после внедрения в продукт мы получили позитивную обратную связь от учеников онлайн-школы — они просят добавить больше взаимодействия с ними.

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

Основные выводы и важное предупреждение

  • Маскот — это персонаж бренда, который решает обширные задачи: от позиционирования до роста продаж.
  • В интерфейсах персонажей можно использовать для улучшения пользовательского опыта.
  • Иногда маскот может выйти из-под контроля и завируситься в сети как мем.
  • Наиболее органично персонажи впишутся в образовательные сервисы и веб-продукты для людей младше 21 года.

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

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

PS И никогда не забывайте проходить уроки в Duolingo. Никогда...

Видео с Youtube-канала surreal entertainment

Классная статья! Где мне найти Атвинту кроме VC?

Здесь:

наш сайт

наш ВК

• наша почта: info@atwinta.ru

4747
38 комментариев
Комментарий удалён модератором

Это как раньше я не боялся ни роботов не зайцев пока не увидел его....

2
Ответить

тоже как-то не реагировал, даже когда мемы всякие пошли с ней, но тут.. ужас 😂😂

1
Ответить

простите 😂

Ответить

Ещё один мемасик про Duolingo

5
Ответить

😀😀 версия для тех, кто все-таки пропускал уроки по английскому:

6
Ответить

Уважаемый Владислав, при этом Школа увеличила % в сезон, пока не часто смотрю. У моего товарища больше платформа по функционалу ☀️

Ответить