Секрет убийственного UX-дизайна: все дело в микровзаимодействиях
Опубликовано: 2016-11-13Дизайн в деталях.
На днях я написал сообщение старой подруге, которое было нелегко написать, потому что это было послание, в котором я выражал свои соболезнования в связи с потерей ее матери. Мы говорили по телефону несколько раз в начале недели, но я хотел отправить ей быстрое сообщение в приложении Facebook Messenger, чтобы она знала, что я думаю о ней. Я закончила составлять сообщение и решила добавить в конце немного «сердечка».
Этот простой акт нажатия на сердце превратился в восхитительный взрыв красных сердечек на экране моего телефона, который также сопровождался несколькими глупыми звуковыми эффектами. Этот момент времени, хотя и короткий и мимолетный, принес мне несколько секунд удивления и радости в трудное время.
Вот что произошло с моим экраном после нажатия на красное сердце.
Эти крошечные детали, также известные как микровзаимодействия, могут сделать взаимодействие между пользователем и устройством/продуктом более увлекательным, простым, эффективным и человечным. Мы часто даже не замечаем эти микровзаимодействия.
Они искусно тонкие и иногда почти невидимые; но они могут сделать продукт тем, что нравится пользователям, а не чем-то, к чему они относятся равнодушно.
Другими словами, микровзаимодействия могут волшебным образом преодолеть разрыв между пользователем и технологией через эмоциональную и человеческую связь, а также побуждать их возвращаться снова и снова.
Что такое микровзаимодействия?
Микровзаимодействия основаны на выполнении одного момента или задачи посредством предоставления восхитительного опыта и полезной обратной связи для пользователей. Эти микромоменты — это то, что в конечном итоге ведет пользователя по потоку интуитивно понятным и эффективным способом.
Дэн Саффер, автор книги «Микровзаимодействия» и вице-президент по продуктам Mayfield Robotics , определяет микровзаимодействия как «содержащиеся в продукте моменты, которые вращаются вокруг одного варианта использования — у них есть одна основная задача. Каждый раз, когда вы меняете настройку, синхронизируете свои данные или устройства, устанавливаете будильник, выбираете пароль, входите в систему, устанавливаете сообщение о состоянии, добавляете что-то в избранное или ставите лайк, вы участвуете в микровзаимодействии. Они повсюду: в устройствах, которые мы носим с собой, в бытовой технике в нашем доме, в приложениях на наших телефонах и настольных компьютерах, даже встроены в среду, в которой мы живем и работаем. Большинство устройств и некоторые приложения полностью построены на одном микровзаимодействии».
По словам Саффера, микровзаимодействия хороши для:
- Выполнение одной задачи и только одной задачи.
- Взаимодействие с отдельными данными, такими как температура или оценка песни.
- Управление текущим процессом, например, громкостью песни в Spotify.
регулировка настройки. - Просмотр или создание небольшого фрагмента контента, например статуса на Facebook.
включение или выключение функции или функции.
Зачем включать микровзаимодействия в ваши проекты?
- Они помогают побудить пользователей взаимодействовать с вашим сайтом, будь то нажатие кнопки, обмен контентом или ответ на сообщение или уведомление.
- Они немедленно дают обратную связь пользователям.
- Они помогают пользователям перемещаться по сайту.
- Они помогают пользователям интуитивно и легко ориентироваться в потоке.
Саффер описывает четыре части микровзаимодействий как триггер, правила, обратную связь, циклы и режимы. Давайте углубимся в то, что означает каждый из этих шагов.
Курок
Триггер — это то, что инициирует взаимодействие. Это сигнал, визуальный или иной, который побуждает пользователя к действию. Триггером может быть трепетание значка, побуждающее пользователя коснуться или щелкнуть его. Синяя кнопка, которая всплывает в верхней части вашей ленты Твиттера с надписью «новые твиты» со стрелкой, указывающей вверх, заставляет вас щелкнуть по ней, чтобы увидеть все новые твиты, которые были опубликованы с тех пор, как вы отсутствовали.
Некоторые из лучших триггеров — это те, которые действительно предвосхищают потребности пользователя, не заявляя о своих потребностях . Это требует от дизайнера сбора данных о пользователях и поведенческих данных, чтобы помочь предсказать, какими будут потребности пользователя, и соответствующим образом разработать триггеры.
Правила
Триггер взаимодействует с правилами. Эти правила определяют, что происходит во время взаимодействия. Правила должны казаться естественными для пользователя, и они существуют, чтобы помочь свести к минимуму ошибки. Отличным примером этого является то, что если вы попытаетесь отправить электронное письмо через Gmail, не вводя строку темы, Gmail сообщит вам, что ваше «электронное письмо не имеет строки темы», спросив, хотите ли вы его отправить.
Рекомендуется для вас:
Как Metaverse изменит индийскую автомобильную промышленность
Что означает положение о борьбе со спекуляцией для индийских стартапов?
Как стартапы Edtech помогают повысить квалификацию рабочей силы Индии и стать готовыми к будущему ...
Технологические акции нового века на этой неделе: проблемы Zomato продолжаются, EaseMyTrip публикует...
Индийские стартапы срезают путь в погоне за финансированием
Цифровая маркетинговая платформа Logicserve Bags Финансирование 80 CR INR, ребрендинг как LS Dig...
Обратная связь
Обратная связь основана на правилах и предоставляет пользователям информацию о том, что происходит в данный момент времени. Мне особенно нравятся отзывы, которые я получаю о формах, разработанных с учетом потребностей пользователей. Включение встроенной проверки в ваш дизайн в правильном контексте может быть очень полезным для пользователя.
Например, при вводе имени пользователя, если я вижу зеленую галочку, я знаю, что могу перейти к заполнению поля пароля. Я не могу сказать вам, сколько раз я заполняю поля имени пользователя и пароля, нажимаю «Отправить», и мне говорят красным, что имя пользователя или пароль неверны.
Проблема в этой ситуации в том, что я совершенно не понимаю, какое поле или буква неверны . Если я смогу внести правильные изменения по пути, это значительно облегчит весь процесс. Эти маленькие зеленые галочки, какими бы незначительными они ни казались, имеют большое значение в том, как пользователь себя чувствует во время и после процесса заполнения формы, и могут привести к более высоким показателям заполнения.
Форма регистрации в Твиттере — отличный и простой пример того, как следует использовать встроенную проверку. Флажки появляются в правой части поля формы, когда я завершаю действие. Красное сообщение об ошибке также оказывается полезным, говоря мне, что мне нужно сделать, чтобы правильно заполнить форму.
Приложение для путешествий Hopper также разумно использует микровзаимодействия. После ввода дат и пунктов назначения, о которых я хочу узнать больше, милый маленький кролик прыгает вокруг, пока приложение «думает» и выводит результаты для меня. Никто не любит ждать. Тем не менее, наблюдение за прыгающим кроликом приносит немного удовольствия в это короткое ожидание, а также дает пользователю понять, что что-то действительно происходит, и результаты будут показаны в ближайшее время.
Петли и режимы
Циклы и режимы определяют более крупные метаправила взаимодействия. Если микровзаимодействие используется неоднократно, важно учитывать, как соответственно меняются взаимодействия. Подумайте о том, как это взаимодействие адаптируется в зависимости от поведения пользователя. Чем микровзаимодействие при первом использовании отличается от 7-го?
Попробуйте создать циклы, которые со временем адаптируются, обогащая опыт каждый раз, когда они взаимодействуют с ним. Функция Facebook «Воспоминания об этом дне» — отличный пример того, как создавать опыт, который адаптируется каждый раз, когда он используется.
Большинство пользователей Facebook проверяют свои новостные ленты несколько раз в день. Наличие функции, которая время от времени выводит обновление статуса или изображение 4-летней давности, может оказать эмоциональное (надеюсь, положительное) влияние на пользователя. Это конкретное микровзаимодействие может иметь негативный эффект. Например, показ старого поста, который может вызвать у пользователя грусть или стресс, может привести к непредвиденным негативным последствиям. Я предлагаю Facebook подумать о том, как предотвратить возникновение негативного опыта.
О чем следует помнить при разработке микровзаимодействий
Не переусердствуйте с дизайном . Микровзаимодействия не должны казаться странными или загружаться слишком долго. Они должны служить цели, органично вписываясь в общий дизайн.
В первый раз, когда кто-то испытывает микровзаимодействие, он не должен чувствовать себя так же, как когда он использует его в 10-й или 100-й раз. Сделайте микровзаимодействия адаптируемыми к контексту. Если это первый раз, используйте стрелки для навигации по приложению. Дайте им возможность больше не показывать это сообщение, чтобы оно не раздражало в будущем.
Это подводит меня к третьему совету. Не начинайте с нуля . Понимайте своих пользователей, их мотивы и контекст, проводя исследования пользователей. Собранная вами информация даст вам информацию, необходимую для того, чтобы сделать ваше решение более эффективным и полезным. Если они там в 20-й раз, выясните, каковы их мотивы и цели, и создайте микровзаимодействия на основе ваших выводов.
Помните, цель состоит в том, чтобы эти взаимодействия были тонкими и эффективными. Убедитесь, что стиль микровзаимодействия естественным образом соответствует стилю вашего общего дизайна интерфейса. Взаимодействия не должны казаться неуместными или запутанными, а микровзаимодействия должны быть связаны с общим дизайном приложения.
6 примеров правильного микровзаимодействия
Сюрприз на рукаве
Я слышал, как кто-то описывал, как годами носил одну и ту же мягкую, уютную рубашку с длинным рукавом. Однажды во время пробежки по затененной тропе, обсаженной деревьями, в той же рубашке с длинными рукавами бегунья рассказала, что ей стало холодно, и она натянула дополнительную ткань, предназначенную для холодных дней, чтобы прикрыть руки, чтобы накинуть верх на руки. На ткани под ней было написано «вы любимы».
Эти слова, тайно напечатанные в точном месте на ткани, были спрятаны, чтобы показываться в такие моменты, как этот, удивляя тех, кто носил его, микромоментом восторга .
Slack Emojis
Сайт Little Big Details предлагает несколько отличных примеров микровзаимодействий. Один из примеров, который они демонстрируют, — это когда вы ищете смайлик в Slack, а искомый смайлик не существует, в качестве опции предлагается смайлик «плакать». Вместо того, чтобы раздражать пользователя, когда он не может найти то, что хочет, смайлик «плач» заставляет его чувствовать себя удивленным .
Гугл переводчик
Когда вы нажимаете кнопку «прослушать» во второй раз в Google Translate, он повторяет перевод с меньшей скоростью, предполагая, что вам нужно немного больше времени, чтобы понять, что он сказал.
Ночной режим на Google Картах
Мне всегда нравилось, как фон приложения Google Maps становится черным в зависимости от времени. Ночной режим предназначен для обеспечения ночного видения и безопасности и является полностью автоматическим.
Заставь меня пульсировать
Посетите этот сайт Make Me Pulse, чтобы получить поистине восхитительный интерактивный опыт. Использование микровзаимодействий ( индикаторы выполнения, звуки, цвета ) помогает пользователям ориентироваться в потоке с помощью триггеров, правил, обратной связи и циклов.
Полосы прокрутки
Даже маленькая серая полоса прокрутки в правой части этой страницы — замечательный и простой пример того, как микровзаимодействие может быть полезным и эффективным, позволяя вам, как читателю, узнать, сколько материала осталось прочитать в этой статье.
Надеюсь, эта статья вдохновит вас на внедрение микровзаимодействий в ваши проекты. У них есть потенциал, чтобы преобразовать опыт ваших пользователей с вашим дизайном от просто нормального до чего-то действительно запоминающегося.
[Это сообщение впервые появилось на Proto.io и воспроизведено с разрешения.]