Внимание, long read!
Перевод статьи из блога "Злых Марсиан". Автор оригинала: Alena Kirdina (Twitter, GitHub)
Ищете вдохновение, чтобы улучшить внешний вид вашего продукта? Воспользуйтесь подсказками популярных видеоигр, чтобы создать увлекательный пользовательский интерфейс для Интернета и мобильных устройств. Узнайте, как игровые дизайнеры привлекают внимание игроков с помощью трюков из книг по психологии и применяют эти методы в своих приложениях.
Нажмите "Старт" чтобы начать
Никто не любит, когда ему читают лекции. Большинство людей, если их попросят изучить 20-страничное руководство перед игрой, вероятно, выберут другое времяпрепровождение (дорогие поклонники настольных игр, пожалуйста, не принимайте это на свой счет).
Геймдизайнеры прекрасно это понимают и стараются сделать первый шаг в игре максимально легким. Нажмите кнопку, чтобы запустить, нажмите ее дважды, чтобы прыгать, нажмите другую кнопку, чтобы стрелять. Вот и все, первое достижение разблокировано! Достаточно для игрока, чтобы узнать некоторые веревки и почувствовать себя погруженным в мир игры. Просто достаточно информации, прежде чем пришло время узнать что-то еще.
Лучшие внутриигровые обучающие программы вплетены в сюжет и не прерывают сюжет. Игрок начинает с малого и изучает более продвинутые шаблоны, продвигаясь по игре.
Тот же подход оправдывает себя при создании веб-приложений или мобильных приложений. Пользователи хотят опробовать продукт как можно скорее, поэтому они склонны пропускать длительные уроки. Если ваш интерфейс не может быть использован сразу, не ожидайте, что посетители останутся.
Лучший способ представить продукт - это подтолкнуть пользователей к выполнению небольших действий, вводя новые функции по мере развертывания.
Хорошим примером является Teamweek: онлайн-календарь для команд. После регистрации вы попадаете прямо на доску, где вас просят добавить и отредактировать задачу, перепланировать ее и изменить ее длину. Все сделано в стиле «повтори за мной». Плавающие подсказки не прерывают рабочий процесс, и их легко отклонить.
Выбери своего персонажа
Ваши внутриигровые предпочтения могут отличаться. Некоторые игроки хотят утолить свою жажду власти, побеждая врагов с помощью оружия. Некоторые выпускают своего внутреннего "мастера" и возятся с виртуальными предметами. Некоторые из них существуют для неоткрытых земель и сюжетных поворотов. Другие принимают социальную составляющую: привлечение офлайн-друзей в игру и создание новых онлайн.
Уровни сложности существуют также не просто так. Некоторые игроки предпочитают прогуливаться по игре неторопливо, как будто они смотрят фильм с попкорном в руке. Другие ищут больше проблем и поворачивают настройку сложности до максимума.
Многопользовательские игры настолько волшебно затягивают, потому что они знают, как угодить каждому типу игроков.
Что вдохновляет здесь, чтобы быть примененным к продукту UX? Представьте себе средний сайт продавца автомобилей. Топ-модель обычно отображается на целевой странице, в то время как остальные автомобили находятся в каталоге, отсортированном по модели, марке и году. Дизайнеры часто упускают из виду тот факт, что посетители определяют свои категории: семейный человек будет искать универсал, юный профессионал, вероятно, пойдет на что-то компактное, чтобы сэкономить на топливе и легко припарковаться, успешный предприниматель среднего возраста может выбрать спортивный автомобиль.
При проектировании навигации следует учитывать различные типы посетителей и их повседневные потребности. Не просто реплицируйте структуру базы данных!
Попробуйте разбить свои предложения на категории, которые обращаются к различным демографическим показателям. “Уровень сложности " (количество функций) также может варьироваться от сегмента к сегменту. Подумайте о разных точках входа для разных групп пользователей – один продукт может иметь несколько лиц, каждый со своей индивидуальностью.
Достижение разблокировано
Нет игры без награды. Победите босса и получите новый уровень с редкой новой рукой оружия. Откройте для себя новую территорию и получите немного местного уважения. Чтобы заставить нас остаться в игре, разработчики предлагают подарки в виде игровых денег или бесплатных предметов. Удовольствие, которое мы получаем от этих наград, основано на простом факте: наш мозг относится к игровым предметам, как если бы они были реальными.
Было установлено, что моментальные вознаграждения непосредственно активируют части мозга, ответственные за эмоции.
Короткий цикл обратной связи втягивает игроков в игру: если ваше действие вознаграждается, вы, скорее всего, повторите его.
Игроки мотивированы на выполнение миссий, потому что они знают, что находятся на пути к верной награде. В то же время рандомизация механизма вознаграждения приводит к еще более увлекательному (некоторые могут сказать, захватывающему) опыту – тот же самый принцип стоит за азартными играми.
Как мы можем улучшить наш неигровой опыт с помощью этих наблюдений? Не стоит недооценивать силу "виртуальной" награды. Подумайте о награждении лояльности ваших пользователей, введя некоторую форму системы достижений. Чтобы сделать вознаграждение еще более полезным, подумайте о добавлении некоторой случайности в процесс.
Untappd, социальное приложение для любителей пива, сильно опирается на психологию вознаграждений. На момент написания этой статьи, есть 10 673 доступных значков: некоторые из них должны быть заработаны, некоторые награждаются случайным образом, чтобы заманить вас обратно в игру
Надо Поймать Их Всех!
Помните длинные списки квестов в World of Warcraft? Несмотря на то, что большинство задач довольно однообразны, игроки все равно стараются сделать эти списки короче.
Одним из первых исследователей, заметивших, что незавершенные задачи имеют на нас особое влияние, был советский психолог Блюма Зейгарник. Эффект Зейгарника утверждает, что любая задача, помеченная как незавершенная, остается доступной в когнитивном “буфере”, а завершенная быстро забывается. Коллега Зейгарника, Мария Овсянкина, также заметила, что прерванное задание порождает навязчивые мысли, направленные на то, чтобы снова и снова браться за него.
Разработчики игр постоянно используют эти "эффекты": контрольные точки миссий, списки задач и индикаторы выполнения. Все, чтобы напомнить игроку, что они еще не сделали.
К концу каждой задачи психологическое давление для достижения результата становится еще сильнее. Это известно как эффект одаренного прогресса. В качестве документа, описывающего его состояния:
"Преобразуя задачу, требующую восьми шагов, в задачу, требующую 10 шагов, но с двумя уже завершенными шагами, задача переформулируется как выполненная и незавершенная, а не еще не начатая.”
Если просто войдя в игру, вы уже разблокировали первые два уровня из 100, зачем останавливаться сейчас?
Конечно, не все в вашем продукте может быть количественно оценено. Но если вы ставите перед пользователем какие-то цели (заполнить анкету, перечислить пункт, написать отзыв), то неплохо превратить их в контрольный список простых задач. Обязательно предварительно проверьте некоторые из них.
Социальное управление медиа-платформа светоносной представляет процесс адаптации как простой контрольный список. Просто зарегистрировавшись, вы выполняете 2 из 5 задач. Кажется, довольно легко добраться до конца, не так ли?
Магический урон +6
Что только что произошло? Я что-то купил? Я ни во что не врезался? Всех этих вопросов можно избежать, если каждое действие, которое предпринимает игрок, дает своевременную и предсказуемую обратную связь. Обратную связь можно рассматривать как состоящую из двух частей: краткосрочного сигнала и долгосрочного эффекта. Например:
Действие: игрок произносит заклинание.
Сигнал: в игре персонаж делает жест, и цель поджигается.
Эффект: цель теряет очки здоровья. Свиток с заклинанием пропадает.
Немедленная обратная связь с действием игрока вызывает выброс дофамина или адреналина, в зависимости от результата. Это становится процедурой обучения, похожей на классическое обусловливание, открытое Иваном Павловым, ученым, прославившимся благодаря собакам. Однако сигнал должен прийти быстро: если он не последует в первые 200-500 миллисекунд, то не будет сильной связи между причиной и следствием.
Быстрая, предсказуемая реакция гарантирует игрокам, что они контролируют ситуацию, и оставляет их довольными своими действиями. Кривая обучения продолжается.
Как вы можете применить это к своему интерфейсу? Подумайте об основных функциях вашего продукта и о том, какие действия вы хотите, чтобы ваш пользователь выполнял регулярно. Разработайте четкую и содержательную обратную связь для каждого из этих действий. Используйте следующую последовательность: действие → наблюдаемый сигнал → эффект.
Давайте возьмем Uber в качестве примера:
Действие: подтвердите местоположение посадки с помощью крана.
Сигнал: экран заблокирован анимацией "поиск ближайших водителей", которая является информативной и ненавязчивой.
Эффект: водитель найден, вы можете отслеживать их путь.
Легко и предсказуемо, стимул попробовать еще раз!
Выберите свой цвет
Важно, чтобы игровые интерфейсы были интуитивно понятными, чтобы они не отвлекали внимание от игрового процесса. В Dota 2 друзья выделяются зеленым цветом, а враги красным, в то время как каждое заклинание имеет уникальную анимацию. В Starcraft вы можете отличить одну расу от другой с первого взгляда, несмотря на разнообразие дизайна юнитов.
Если бы мошенник-дизайнер присоединился к команде Starcraft и перекрасил одного из Терранов в золото, это вызвало бы много путаницы, так как этот цвет уже взят Протоссами.
В интернете часто можно увидеть множество стилей на одной странице, даже если элементы имеют схожую функциональность. Не повторяйте эту ошибку, попробуйте придумать последовательное руководство по дизайну для вашего продукта и сделайте это как можно раньше. Придумайте различные шаблоны взаимодействия, где каждое уведомление имеет уникальный набор признаков: цвет, форма, анимация.
Например, серый универсально означает нейтральные взаимодействия, зеленый – положительную обратную связь, а красный – ошибки и предупреждения. Значки, анимации, даже области экрана, где появляются уведомления, также могут быть различными.
Документируйте внешний вид и поведение различных элементов. Следуйте этим рекомендациям через проект – у пользователя будет меньше шансов заблудиться. Разработчики это тоже оценят.
Первому игроку приготовиться!
Почти в каждой игре есть соревновательный элемент. Даже однопользовательские аркады имеют лучшие рейтинги игроков. Психологию, стоящую за этим, стоит изучить.
Американский социальный психолог Леон Фестингер выдвинул свою теорию социального сравнения в 1954 году: он утверждал, что у индивидов есть стремление получить самооценку и, при отсутствии четких стандартов, начать сравнивать себя с другими. Самое интересное заключается в том, что, по словам Фестингера, вы гораздо чаще сравниваете себя с кем-то, чьи способности и мнения похожи на ваши. Напротив, если человек сильно отличается от вас, вы будете меньше вынуждены сравнивать свой прогресс с их прогрессом.
Отсюда следует, что мы предпочитаем конкурировать с теми, кто находится в нашей собственной группе: по возрасту, по профессии, по образованию и так далее. Чем ближе вы подходите к "вершине" этой группы, тем выше ваша самооценка.
Та же теория может быть полезна при разработке интерфейса продукта. Попробуйте разделить пользователей на группы на основе некоторого сходства и сравнить эти группы друг с другом. Он хорошо работает для абстрактных понятий: набранные очки, сожженные калории, оценка любого рода. Если определенная метрика приближает пользователя к вершине, выделите ее.
Настройки интерфейса (HUD)
Сколько вещей вы можете держать в голове одновременно? Часто цитируемый закон Миллера, названный в честь когнитивного психолога Джорджа А. Миллера, утверждает, что число объектов, которые средний человек может удерживать в рабочей памяти, равно семи, плюс-минус два. Этот магический номер также отвечает (вместе с Миллером лично) за телефонные номера, обычно имеющие семь цифр: это предел нашего “цифрового диапазона”.
Конечно, в любой игре, которая достаточно сложна, есть гораздо больше информации для отображения и обработки. И тут на помощь приходит "кускование" (chunking): с единицами данных, сгруппированными вместе, гораздо проще работать. 25101982 выглядит как неприятное число, чтобы помнить, но 25.10.1982 имеет гораздо больше смысла. Список покупок, организованный по разделам (молочные продукты, овощи, рыба), более эффективен, чем один столбец элементов. Взгляните на следующий скриншот, сделанный в XCom 2:
Оружие, цели, боевая информация, панель управления игрока, цель, основной геймплей-всего шесть регионов, каждый из которых содержит множество предметов. Каждый "кусок" воспринимается как единое целое и не загромождает экран или рабочую память игрока.
Тот же принцип может быть применен ко всему дизайну продукта.
Группируйте связанные элементы в "куски" и следите за законом Миллера! Гораздо проще иметь дело с пятью четко определенными областями, чем с одним блоком текста.
Используйте интервал для разделения кусков, избегайте ненужной информации, и ваше приложение будет приятно использовать.
Играйте на ходу
Геймдизайнеры знают, как воспользоваться преимуществами различных платформ, чтобы игроки оставались в игре. Мы проводим часы за компьютером или консолью, и как только мы занимаемся своим делом, мы можем убить немного больше времени, обратившись к экрану смартфона или портативной игровой системе и выбрав, где мы остановились. Разные платформы подразумевают разные стили игры и разные наборы элементов управления: ПК имеет клавиатуру и мышь, консоли имеют геймпады с ограниченным количеством кнопок, смартфоны используют сенсорное управление и датчики. VR гарнитуры дают нам 360° вид на игровой мир. Все эти возможности (и ограничения!) требуют различных подходов к UX.
Франшиза Need For Speed является хорошим примером геймплея, адаптированного к платформе. При игре на ПК, кликабельные элементы расположены в углах экрана, где до них легко добраться с помощью мыши. Клавиши W, A, S и D управляют движением. Существует развитая сюжетная линия, чтобы следовать.
На экране смартфона разработчики Need For Speed борются за пространство. Меню выглядят проще и содержат большие элементы. Основная информация смещается в сторону нижней части экрана, которая является наиболее доступной зоной на смартфоне. Движение можно контролировать либо с помощью акселерометра, наклоняя телефон, или нажимая на большие области по бокам экрана. Сюжет сокращен, а геймплей сосредоточен вокруг быстрой гонки – идеально подходит для коротких перерывов.
Но как насчет нашего продукта? Мы можем изучить, как пользователи взаимодействуют с ним на разных устройствах и в различных условиях жизни.
Пользователь за ноутбуком или настольным экраном более сосредоточен и готов тратить больше времени на ваш продукт. На мобильных устройствах быстрый доступ к наиболее важным функциям имеет важное значение, так как время взаимодействия имеет тенденцию быть коротким.
Не забывайте о "физике" каждой платформы: на мобильных устройствах ссылки и кнопки должны быть легко нажиматься и не должны полагаться на наведение. Если вы хотите, чтобы пользователи взаимодействовали с вашим приложением на гигантском экране (через Apple TV или Chromecast) – не заставляйте их щуриться, чтобы разглядеть более мелкие детали. Используйте все средства, которые дает вам платформа, а не просто “изменить размер” вашего интерфейса, чтобы соответствовать на разных экранах.
Не осталось жизней? Купите набор из 5
Только большие бюджетные игры могут взимать изрядную сумму за загрузку. Небольшие и независимые студии полагаются на внутриигровые покупки. Мы можем разделить их на три категории: расходные материалы, товары длительного пользования и подписки.
Расходные материалы необходимы для быстрого прохождения игры. Вы можете играть в Harry Potter: Hogwarts Mystery неторопливо, ожидая, пока ваша “энергия” подзарядится и позволит сделать следующий ход, или же вы можете запастись заранее, потратив реальные деньги и играть без перерывов.
Товары длительного пользования более популярны в MMORPG: вы можете купить свой следующий уровень, следующее оружие, редкий магический предмет или совершенно другого персонажа. Вы видели мой новый блестящий космический челнок, на который я потратил свои с трудом заработанные доллары? О чудо!
Другая модель основана на подписке: вы получаете бесплатный пробный период, а затем периодически платите установленную сумму, чтобы продолжать играть. Или заплатить еще больше и разблокировать премиум-функции!
В мире веб-стартапов, где человек человеку – волк, трудно получить пользователей, попросив их заплатить авансом.
Вы должны либо выделить ценное пространство экрана для объявлений, которые раздражают людей, либо придумать модель ценообразования, как описано выше.
На мой взгляд, Tinder является отличным примером приложения, которое зафиксировало цены. Установка бесплатна, а также полное путешествие по базовому функционалу: проведите пальцем, совпадите и общайтесь. Тем не менее, если вы ищете больше, Tinder Plus и Tinder Gold обещают расширить свой опыт, предлагая неограниченное количество лайков, возможность “путешествовать” по разным странам, не выходя из своей комнаты, или даже увидеть, кто “понравился” вам в первую очередь.
Ключом к успешной покупке является своевременность предложения. Tinder попросит вас обновить подписку в момент, когда у вас закончились лайки. Это ценный урок, который нужно усвоить – показывать предложение только тогда, когда оно действительно нужно пользователю.
Игра еще не закончена
В видеоиграх существует куда больше вдохновений, которые можно открыть: продолжайте играть и держите глаза в остро в поисках подсказок! Конечно, мы не призываем вас превратить ваше банковское приложение или бухгалтерское программное обеспечение в MMORPG, но успех игровых тайтлов основан на годах проб и ошибок в практиках юзабилити. Смело заимствуйте эти трюки и сделайте свой продукт отличным от конкурентов.