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

Есть струящаяся линия из единиц и нулей, которая исчезает за большой желтой трубкой. Медведь выскакивает из трубы, когда когтистая лапа начинает указывать на панель инструментов моего браузера, и появляется заголовок, говорящий: «Начинай медвежонок!»

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

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

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

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

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

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

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

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

Геймификация пользовательского интерфейса: Gemini 2 и Duolingo

При разработке Gemini 2, новой версии нашего средства поиска дубликатов для Mac, у нас возникла серьезная проблема. Просматривать гигабайты файлов было душераздирающе скучно, и некоторые пользователи жаловались, что бросали, не закончив. Итак, чего мы пытались добиться с помощью системы достижений, так это усилить ощущение вычеркнутого пункта в списке дел, что является единственным преимуществом утомительных задач. Космическая тема, невольно заложенная в названии приложения и использованная в интерфейсе, идеально подходила для геймификации. Наша аудитория выросла на «Звездных войнах» и «Звездном пути», поэтому ранги, вдохновленные научной фантастикой, пришлись им по душе.

Через несколько дней после релиза мы начали получать твиты от пользователей, которые просили подсказки о пасхальном яйце, которое откроет финальное достижение. Через год после выпуска Gemini 2 получил награду Red Dot Award за дизайн, демонстрирующий «четкость и эмоциональность». Так что, хотя трудно измерить, насколько мотивирующей была наша система достижений, она точно не оставила людей равнодушными.

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

Всякий раз, когда вы завершаете быстрый 5-минутный урок, вы получаете 10 баллов. Брать уроки 30 дней подряд? Получите достижение. Пройти 20 уроков без единой опечатки? Разблокировать другой. За каждый ваш маленький шаг ваши чувства вознаграждаются торжествующими звуками и красочной графикой, которые вызывают выброс этого сладкого, сладкого дофамина. В конце концов, вы начинаете ассоциировать Duolingo с чувством выполненного долга и гордости — чувством, к которому вы хотите вернуться.

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

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

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

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

Юмор в пользовательском интерфейсе: аутентичная погода и Slack

Одно из приложений, в котором юмор используется не только как дополнительный комический элемент, но и как уникальное торговое предложение, — это Authentic Weather. Погодные приложения — яркий пример утилитарных продуктов: люди используют их для получения информации, и точка. Но с Authentic Weather вы получаете гораздо больше. Вне зависимости от погоды, он рассмешит вас язвительными комментариями, такими как «Никогда не мерзнет», «Иди домой, зима» и моим личным фаворитом: «Все в порядке. Посмотрите снаружи, чтобы получить дополнительную информацию».

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

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

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

Подробнее о юморе: «Шучу: эффективное использование юмора» Луи Р. Францини.

Заставьте мир двигаться

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

Все это хорошие причины для включения анимации в ваш дизайн, но почему именно она вызывает эмоции? Саймон Грозян, работавший над нашими приложениями Encrypto и Gemini Photos, считает, что это потому, что в физическом мире мы интерпретируем анимированные объекты как живые:

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

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

Анимация в пользовательском интерфейсе: Encrypto и Shazam

Encrypto — это крошечное приложение для Mac, которое шифрует и расшифровывает ваши файлы, чтобы вы могли безопасно отправлять их кому-либо. Это незаменимый инструмент для тех, кто заботится о безопасности и конфиденциальности данных, но не тот инструмент, к которому вы будете привязаны. Тем не менее, Encrypto, безусловно, является моим любимым приложением MacPaw с точки зрения дизайна благодаря анимированной панели в стиле Matrix, которая скользит по вашему файлу и превращает его в новый защищенный объект. Шифрование оживает; это больше не скучный процесс на вашем компьютере — это завораживающая цифровая магия.

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

Подробнее об анимации: «Как функциональная анимация помогает улучшить взаимодействие с пользователем».

Искусство везде

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

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

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

Иллюстрация в пользовательском интерфейсе: Gemini Photos и Google Calendar

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

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

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

Но это даже не самое лучшее. Я понял, что всякий раз, когда я создаю новое событие, я втайне надеюсь, что в Календаре Google будет для него иллюстрация, и искренне радуюсь, когда это происходит. Таким образом, использование календаря перестало быть необходимостью и стало источником положительных эмоций. И, судя по всему, эксперимент с иллюстрациями не удался мне одному, потому что Google недавно выкатил веб-версию своего календаря с тем же артом.

Подробнее об иллюстрации: «Иллюстрация, которая работает: профессиональные методы для художественного и коммерческого успеха» Грега Хьюстона.

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

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

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

Хитрость заключается в выборе времени.

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

Талисманы в пользовательском интерфейсе: RememBear и Yelp

TunnelBear Inc. недавно запустила бета-версию еще одной утилиты, которая симпатична как кнопка (без каламбура). RememBear — это менеджер паролей, а с паролями не должно быть шуток. Но великолепие мультяшных медведей в RememBear заключается в том, что их нигде не видно, когда вы делаете серьезные важные вещи, например, создаете новую запись. Вместо этого вы получаете медвежьи объятия, когда закончите первый этап регистрации в приложении и еще не перешли ко второму этапу — сохранению вашего первого пароля. Разместив талисман в этом месте, RememBear не стал мешать, но заставил меня улыбнуться, когда я меньше всего этого ожидал.

Как и RememBear, Yelp — широко известное приложение для обзоров ресторанов — идеально подходит для своего талисмана. Забавный хомячок впервые появился в нижней части настроек iOS-приложения, чтобы пользователь обнаружил его, как пасхальное яйцо.

«В Yelp мы всегда стремимся сделать наш продукт и бренд забавными и восхитительными», — говорит Йони Де Бьюль, менеджер по дизайну продуктов Yelp. «Мы отражаем индивидуальность Yelp во всем: от забавного дизайна постеров и забавных заметок к выпуску до внутренних проектов хакатонов и вечеринок Yelp Elite. Когда мы обнаружили, что нашей странице настроек iPhone серьезно не хватает веселья, мы решили засучить рукава и исправить это».

Хомяк в приложении для iOS позже получил компанию, так как команда разработала велоцираптора для версии для Android и собаку для Интернета. Поэтому когда бы и где бы вы ни использовали Yelp, вы почти хотите, чтобы у вас закончились рекомендации, чтобы вы могли увидеть другую версию восхитительного персонажа.

Если вы хотите узнать, как создать свой собственный талисман, есть хороший учебник от Sirine (она же «Miss ChatZ») на Envato Tuts+.

Подвести итог…

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

Дальнейшее чтение

• «Эмоциональный дизайн: почему мы любим (или ненавидим) повседневные вещи», Дон Норман
• «Соблазнительный дизайн взаимодействия: создание игривого, веселого и эффективного взаимодействия с пользователем (голоса, которые имеют значение)», Стивен П. Андерсон.