UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как проектировать эмоциональный интерфейс для скучного приложения
Редакція
Редакція

Опубліковано • Оновлено

Как проектировать эмоциональный интерфейс для скучного приложения

#ux

Медведь выскакивает из трубы, затем когтистая лапа начинает указывать на панель инструментов моего браузера, и появляется заголовок: «Start your bear-owsing!» От изумления я забыл, что искал. Такие продукты, как VPN сервисы, редко вызывают восхищение или любые другие эмоции, если на то пошло. Их не для этого создали. Но, поскольку TunnelBear делает это, я выбираю его и рекомендую своим друзьям. Люди не могут долго выносить скуку, поэтому программы, которые созданы для выполнения скучных, повторяющихся задач, часто остаются заброшенными и пылятся на компьютерах и телефонах. Но скука, по мнению психологов – это просто отсутствие стимула, чувство неудовлетворенности деятельностью. Итак, что, если мы используем интерфейс, чтобы простимулировать пользователя? Я общался с продакт-дизайнерами из MacPaw (они создают не очень сексуальные вещи, например, программы поиска дубликатов и приложения для шифрования), и они поделились со мной пятью секретами создания более эмоционального интерфейса: геймификация, юмор, анимация, иллюстрации и маскоты (персонажи). Нет, никаких магических фокусов, но у нас есть статьи, книги и методики вебинаров, которые мы можем использовать для улучшения своих работ.

Игры, в которые играют люди

В сфере интерфейсов обсуждается вопрос об использовании геймификации: например, 24 эмпирических исследования, пришли к разным выводам относительно того, насколько она эффективна. Но опять же, эффективность зависит от того, что вы пытались достичь, создавая эти блестящие значки достижений. Для многих создателей продукта, включая Akar Sumset, геймификация сама по себе не позволяет пользователям получать удовольствие – она мягко подталкивает их к определенному поведению. Достижения, ранги, таблицы лидерства используют человеческую потребность в уважении, стимулируют дух соперничества и якобы побуждая пользователей делать то, что вы хотите. Например, добиваться прогресса, продолжать возвращаться в приложение или делиться прогрессом в социальных сетях. Геймификация может быть удачной или нет, но она однозначно достигает эмоционального ответа. Наш мозг заполнен клетками, которые контролируют уровень дофамина – одного из основных гормонов счастья. Когда происходит что-то приятное, эти нейроны возбуждаются и вызывают высвобождение дофамина в кровь. Но, если это приятное событие является регулярным и может быть предсказано, они возбуждаются и высвобождают дофамин, прежде чем это произойдет. Что это значит для вашего интерфейса? Ожидание такой приятной вещи, как следующее достижение, даст пользователям немного счастья на протяжении всего их опыта работы с продуктом.

Геймификация в интерфейсе: Gemini 2 и Duolingo

При разработке Gemini 2 – новой версии программы по поиску дубликатов для Mac, у нас была серьезная проблема. Анализ гигабайт файлов был невероятно скучным, и некоторые пользователи жаловались, что выходили из программы, не дождавшись окончания поиска. Поэтому с помощью системы достижений, мы пытались добиться аналогии с вычеркиванием пункта в списке дел, что является единственным позитивным моментов при выполнении утомительных задач. Космическая тема, невольно заданная названием приложения и используемая в интерфейсе, была идеальна для геймификации. Наша аудитория выросла на «Звездных войнах» и «Стар треке», поэтому научно-фантастические ранги понравились им. Через несколько дней после релиза мы начали получать твиты от пользователей, просящих подсказки на пасхалку, которая откроет последнее достижение. Год спустя после релиза Gemini 2 получил награду Red Dot Award за дизайн, который демонстрирует «ясность и эмоции». Поэтому, хотя трудно измерить, насколько наша система достижений мотивирует, она наверняка не оставила людей равнодушными. Gemini 2 Еще один продукт, который делает это правильно и, безусловно, имеет самый геймифицированный интерфейс, который я видел – это Duolingo, онлайн-сервис и мобильное приложение для изучения языков. Попытка освоить иностранный язык с нуля – это сложная задача, особенно если вы пытаетесь освоить его самостоятельно без учителя. Учитывая, как быстро люди теряют интерес к изучению языка Duolingo должен был держать вас на крючке. И он делает это. Всякий раз, когда вы заканчиваете быстрый 5-минутный урок, вы зарабатываете 10 очков. Занимаетесь 30 дней подряд? Получаете достижение. Выполнили 20 уроков без единой опечатки? Разблокируйте другое достижение. За каждый крохотный шаг, который вы делаете, вас вознаграждают триумфальными звуками и красочной графикой, которые вызывают выработку дофамина. В конце концов, вы начинаете ассоциировать Duolingo с чувством совершенства и гордости – чувства, к которому вы хотите вернуться. Интерфейс Duolingo Если вы хотите глубже изучить тему геймификации, отличный способ начать с книги Гейба Зикерманна «Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps».

Вы должны шутить

Victor Yocco сформулировал случаи использования юмора в веб-дизайне, в качестве инструмента создания незабываемых впечатлений, общения с пользователями и выделения вашей работы. Но самая большая сила шуток в том, что они эмоциональны. Пока мы еще не полностью понимаем природу юмора, ясно одно: он делает людей счастливыми. Согласно исследованиям изображений мозга, забавные картинки активируют в лимбической системе сеть вознаграждения – та же сеть, которая реагирует на еду, музыку, секс и наркотики, изменяющие настроение. Другими словами, хорошая шутка дает людям своеобразный эмоциональный подъем. Хотели бы вы подобную реакцию на свой интерфейс? Разумеется, но сложность не только в том, что юмор субъективен, но и в том, что наша реакция на него во многом зависит от контекста. И хотя все люди наслаждаются юмором в той или иной форме, важно знать свою аудиторию: что они находят забавным, а что может показаться неуместным или грубым. Совсем как в реальной жизни.

Юмор в интерфейсе: Authentic Weather и Slack

Authentic Weather – это приложение, которое использует юмор не только как дополнение, а как уникальное торговое предложение. Приложения прогнозов погоды – яркий пример утилитарных продуктов. Люди используют их для получения информации, точка. Но с Authentic Weather вы получаете намного больше. Независимо от погоды, приложение собирается удивить вас забавным комментарием. Когда вы используете Authentic Weather, вы не просто открываете его для прогноза – вы хотите увидеть, что он еще придумает, а рутинная задача, такая как проверка погоды, станет ожидаемым утренним ритуалом. Мрачный комментарий о погоде, полный ругательств и презрения, вероятно, будет неинтересным для моей мамы. Но, представители поколения миллениума, к которым отношусь и я, сочтут его забавным. Это доказывает, что юмор работает, если вы знаете свою аудиторию. Authentic Weather Другая программа, интерфейс которая хорошо использует юмор – это Slack. Для приложения, которое люди ассоциируются с работой, Slack создает более гуманный опыт, не в последнюю очередь благодаря своим шуткам. С такой разнообразной демографией юмор тоже разнообразен, поэтому Slack выбирает безопасный вариант – тупые каламбуры и добродушное подшучивание. Такие шутки точно не заставят вас кататься по полу от смеха, но они не будут раздражать и, что важно, не обидят. В лучшем случае пользователь будет хихикать и поделится скриншотом экрана в соц. сетях; в худшем случае он просто закатит глаза. Геймификация в Slack Больше о юморе: «Просто шучу: эффективное использование юмора» от Луиса Р. Францини.

Мир в движении

Почти все интерфейсы используют анимации. Это естественный способ перехода от одного состояния к другому. Но анимации в пользовательском интерфейсе могут гораздо больше, чем обозначать изменение состояния – они могут помочь вам привлечь внимание и сообщить, что происходит. Причем намного лучше, чем статические визуальные эффекты или текст. Движение стимулирует как визуальное, так и кинестетическое обучение – это означает, что пользователи с большей вероятностью будут сосредоточены и выяснят, как использовать эту программу. Это хорошие причины включить анимацию в свой дизайн, но почему именно они пробуждают у пользователей эмоции? Simon Grozyan, работавший над приложениями Encrypto и Gemini Photos, считает:

 «Мы привыкли видеть вещи в движении. Все вокруг нас либо движется, либо меняет внешний вид из-за света. Статичность – эквивалент смерти».

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

Анимация в интерфейсе: Encrypto и Shazam

Encrypto – это крошечное приложение для Mac, которое шифрует и дешифрует ваши файлы, чтобы вы могли безопасно отправлять их другим пользователям. Это незаменимый инструмент для тех, кто заботится о конфиденциальности и безопасности данных, но не тот инструмент, к которому вы бы привыкли. Тем не менее, на сегодняшний день Encrypto является моим любимым приложением с необычным дизайном, благодаря анимированной панели в стиле «Матрицы», которая скользит по вашему файлу и преобразует его в защищенный объект. Шифрование оживает – это уже не скучный процесс, это завораживающая цифровая магия. Encrypto анимация Анимация лежит в основе отличного интерфейса Shazam – приложения, которое, вероятно, установлено на вашем телефоне. Когда вы используете Shazam, чтобы узнать, что за песня играет, кнопка, которую вы нажимаете, начинает посылать концентрические круги наружу и внутрь. Такое сходство с пульсирующим динамиком делает интерфейс практически осязаемым, физическим. Вы как будто слушаете свой любимый альбом на мощной звуковой системе. Shazam анимация Подробнее об анимации: «Как функциональная анимация помогает улучшить пользовательский опыт».

Искусство повсюду

Как утверждает Блэр Кулбрет, интерфейсам уже недостаточно просто быть безупречными. Ожидается, что дизайн будет элегантный и профессиональный, но также будет иметь персонализированные детали, которые вызовут у пользователей улыбку. Иллюстрации могут быть такой деталью. В отличие от общих изображений, иллюстрация является эмоциональной, потому что она передает больше смысла. Она несет положительные ассоциации с мультфильмами, которые каждый человек смотрел в детстве, показывает вещи более игриво, творчески, и, самое главное, содержит оттенок индивидуальности художника. «Думаю, что, когда художник создает иллюстрацию, он всегда вкладывает в нее часть своего личного опыта, свой контекст, свою историю», – говорит Макс Кукурудзяк, один из наших дизайнеров. Теория звучит правдоподобно – человеческий фактор с большей вероятностью цепляет пользователя.

Иллюстрация в интерфейсе: Gemini Photos и Google Calendar

Один из наших новейших продуктов Gemini Photos – приложение для iPhone, которое помогает вам убирать ненужные фотографии. Подобно Gemini 2 для настольных компьютеров, оно требует от пользователей утомительного анализа, поэтому даже с удобным и красивым интерфейсом мы с трудом удерживаем их внимание. Как и во многих наших предыдущих приложениях, мы использовали анимацию и звуки, чтобы оживить интерфейс, но иллюстрации стали изюминкой этого опыта. Как было сказано выше, научно доказано, что неожиданные приятные вещи вызывают прилив гормона счастья. Поэтому, используя причудливые иллюстрации в неожиданных местах, мы не просто заполнили пустой экран – мы добавили немного удовольствия в монотонную деятельность. Gemini Photos Еще один пример того, как иллюстрация может сделать продукт более привлекательным – это Google Calendar. До недавнего времени веб-версия и приложение iOS поразительно отличались. В то время, как первый вариант обладал примитивной «привлекательностью» электронной таблицы, последний мгновенно завоевал мое сердце одной замечательной деталью. Google Calendar иллюстрирует много типов событий, основываясь на ключевых словах, которые он выбирает из названий событий. Таким образом, ваши планы на неделю выглядят более захватывающими, даже если это поход спортзал и визит к стоматологу. Но это еще не все. Я понял, что всякий раз, когда я создаю новое событие, я в тайне надеюсь, что у Google Calendar найдется иллюстрация для него и я искренне рад, когда это так. Именно так, использование календаря перестало быть необходимостью и стало источником положительных эмоций. И, по-видимому, эксперимент с иллюстрациями сработал не только со мной, потому что Google недавно опубликовал веб-версию своего календаря с теми же иллюстрациями. Google Calendar Подробнее об иллюстрациях: «Иллюстрация, которая работает: профессиональные методы для художественного и коммерческого успеха» от Грега Хьюстона.

Что такое персонаж

Симпатичные персонажи, олицетворяющие продукты, использовались в веб-дизайне и маркетинге в течение многих лет (вспомните Рональда Макдональда и Человечка Мишлен). Однако, в интерфейсах – не так активно. Маскоты (талисманы) в интерфейсе могут восприниматься как навязчивые и раздражающие, особенно если они отвлекают пользователя от важного действия или закрывают экран. Печально известный пример неудачного маскота – это Clippy (скрепка) от Microsoft: он не вызывал ничего, кроме страха и отвращения (что, конечно, тоже эмоции, но не те, которые вы ищете). В то же время, исследования показывают, что люди легко персонифицируют вещи, даже если они всего лишь геометрические фигуры. А с живыми существами легче устанавливать взаимосвязь, понимать их поведение и вообще испытывать эмоции. Более того, анимированному персонажу легче сформировать личность, поэтому вы можете передавать характеристики своего продукта посредством этого персонажа – сделать его игривым, нетерпеливым и полезным, или таким, как вам нужно. Благодаря такому потенциалу маскоты идеально подходят для неэмоциональных продуктов. Фокус в том, чтобы вовремя появляться. Clippy был настолько неприятным, потому что он казался незваным и прерывал совершенно несвязанные задачи. Но, если маскот появится в подходящий момент – например, пользователь только что завершил задачу – он справится с возложенной на него задачей.

Маскоты в интерфейсе: Remembear и Yelp

Недавно TunnelBear Inc. выпустила симпатичную бета-версию другой утилиты. RememBear – это менеджер паролей, а пароли это не шутки. Но весь блеск медвежьих рисунков в RememBear в том, что их не видно, пока вы делаете серьезные, важные вещи, например, создаете новую запись. Зато медведь обнимает вас, когда вы закончите первый этап регистрации приложения и еще не перешли на второй – сохранение вашего первого пароля. Подобное использование маскота не мешало, но заставило меня улыбнуться, когда я этого меньше всего ожидал. Remembear иллюстрации Как и RememBear, Yelp — широко известное приложение для обзора ресторанов – идеально использует маскот. Смешной хомяк впервые появился внизу страницы настроек приложения для iOS. Он стал для пользователей своего рода пасхальным яйцом. «В Yelp мы всегда стремимся сделать наш продукт и бренд приятным и восхитительным», – говорит Yoni De Beule – менеджер дизайна продукта в Yelp. «Мы отражаем индивидуальность Yelp во всем: от наших забавных постеров и смешных заметок до внутренних проектов и Yelp Elite вечеринок. Когда мы обнаружили, что наша страница настроек iOS-версии слишком серьёзная, мы решили это  исправить». Хомяк в приложении iOS позже получил компанию, так как команда разработала велоцираптора для Android версии и собаку для веб-версии. Поэтому всякий раз, когда вы используете Yelp (не важно на каком устройстве), вы хотите получить все возможные рекомендации, чтобы увидеть другую версию восхитительного персонажа. Yelp иллюстрации Если вы хотите узнать, как создать своего собственного маскота, есть хорошее руководство от Sirine (aka ‘Miss ChatZ’) на Envato Tuts+.

В заключение…

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


Перевод статьи Alice Кotlyarenko

Топ коментарі (0)