Улучшенный UX благодаря микровзаимодействиям

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

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

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

Преимущества микровзаимодействий

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

Детали не детали. Они делают дизайн.

Некоторые ключевые преимущества включения микровзаимодействий в продукт:

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

Лучшие практики дизайна микровзаимодействий

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

Определите и поймите проблему пользователя

Первое правило в любом дизайне взаимодействия с пользователем — выявлять и понимать проблемы пользователей — то же самое относится и к микровзаимодействиям. Лучший способ понять, что нужно пользователю, — это провести опросы или интервью или понаблюдать за поведением посредством исследования пользователей. Дизайнер Toptal Иван Анников более подробно рассказывает о потребностях пользователей в своей статье «Going Guerrilla: Affordable UX Research Tips And Alternatives».

Сохраняйте микровзаимодействия естественными

Цель состоит в том, чтобы преодолеть разрыв между пользователем и продуктом интуитивно понятным и естественным образом, поэтому избегайте странных анимаций, которые загружаются слишком долго или могут отвлекать пользователя. Вместо этого создавайте дизайн, который органично сочетается с продуктом. Тонкость — ключ к микровзаимодействиям. Не оставляйте пользователя озадаченным и думающим: «Что это было?»

Тестируйте и повторяйте результаты пользовательского тестирования

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

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

Следуйте структуре микровзаимодействий

По словам Дэна Саффера, старшего штатного дизайнера продуктов в Twitter и автора книги «Микровзаимодействия: проектирование с учетом деталей», микровзаимодействие состоит из четырех частей.

1. Триггер — триггер инициирует микровзаимодействия. Один тип триггера — это тумблер, который включает и выключает функцию.
2. Правила . Правило определяет, как микровзаимодействие реагирует на триггер, и определяет, что происходит во время взаимодействия. Например, приложение фонарика использует кнопку в качестве триггера, который включает и выключает свет.
3. Обратная связь — обратная связь сообщает пользователю, что происходит во время микровзаимодействия. Примером обратной связи является форма регистрации со встроенной проверкой — цвет границы становится зеленым, если поле заполнено правильно, и красным, если что-то не так. Таким образом, пользователь мгновенно узнает, что что-то правильно или неправильно.
4. Циклы и режимы . Циклы и режимы определяют метаправила микровзаимодействия и то, как микровзаимодействие изменяется при повторном использовании. Например, в электронной коммерции кнопка «Купить сейчас» может измениться на «Купить другой», если пользователь приобрел товар ранее.

Деконструкция дизайна микровзаимодействий

Чтобы показать мыслительный процесс, лежащий в основе разработки микровзаимодействий, давайте разберем микровзаимодействие Google: микровзаимодействие с предложением имени файла в Google Docs.

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

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

Проблема пользователя

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

Решение Google

Google Docs обрабатывает это двумя способами, в зависимости от выбора пользователя: 1) Пользователи могут щелкнуть поле имени и изменить имя документа сразу перед вводом какого-либо содержимого, а также изменить «Документ без названия» на имя по своему выбору, или 2 ) Как только пользователь вводит первую строку текста, Google автоматически подставляет ее в качестве имени документа. Пользователь может оставить это как есть или изменить.

Разберем детали:

Триггеры

Может быть несколько возможных триггеров для присвоения имени документу, используя функцию меню « Файл»> «Сохранить как » или нажав cmd+s на Mac ( ctrl+s в Windows) на клавиатуре, как в настольных приложениях. Но ни один из них не использует преимущества интерактивной природы Интернета и не особенно улучшает поток пользователей.

Вместо этого основной триггер Google Docs — просто щелкнуть поле имени документа. При наведении на поле отображается всплывающая подсказка «Переименовать». Вторичный триггер — File > Rename , который выделяет поле ввода имени.

Правила

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

Обратная связь

Изменение цвета границы поля ввода – это распространенный шаблон взаимодействия, и Google Docs использует его здесь, чтобы предоставить пользователю немедленную обратную связь.

Петли и режимы

Пользователь успешно создал имя документа, и триггер остается на месте с одним ключевым отличием: теперь документу присвоено имя.

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

Результат

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

Микровзаимодействия в действии: примеры из реальной жизни

Изменение порядка списка задач

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

Реакция на сообщения в социальных сетях

«Нравится» контент, нажав кнопку или значок «палец вверх», стал распространенным шаблоном дизайна UX во многих приложениях и веб-сайтах. Facebook построил это взаимодействие, добавив множество опций помимо «лайка» посредством тонкого микровзаимодействия.

Подсветка фирменного текста

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

Поделитесь своим местоположением

Google Hangouts предполагает, что один из случаев, когда пользователь может захотеть поделиться своим местоположением, — это когда кто-то отправляет текстовое сообщение «Где ты?»

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

Смахивание для выбора

Микровзаимодействия можно использовать для ответов на простые вопросы «да» или «нет» в приложении. Tinder делает это, заставляя пользователя проводить пальцем влево или вправо (нет/да) в зависимости от того, нравится ему или не нравится их возможное совпадение.

Расширение поиска

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

Быстрое добавление контактной информации друга

SeatGeek упрощает процесс заполнения форм, автоматически заполняя информацию из контактов пользователя нажатием кнопки «Добавить из контактов».

Узнайте больше о микровзаимодействиях

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

Чтобы узнать больше о микровзаимодействиях в целом, посетите Microinteractions, веб-сайт, созданный как дополнение к ранее упомянутой книге Дэна Саффера «Микровзаимодействия: проектирование с учетом деталей». На сайте есть подробные объяснения микровзаимодействий, а также информация о происхождении известных микровзаимодействий, таких как автозамена, автозаполнение и вырезание и вставка. Первая глава книги также доступна для бесплатного скачивания.

Чтобы вдохновиться микровзаимодействиями, посетите Little Big Details, тщательно подобранную коллекцию микровзаимодействий в цифровых продуктах. В нем показаны примеры того, как такие компании, как Apple, Trello и Stack Overflow, реализуют микровзаимодействия и анимацию пользовательского интерфейса.

Чтобы узнать, как создавать микровзаимодействия во Framer, прочитайте Toptal Designer, статью Войцеха Добры, Учебное пособие по Framer: 7 простых микровзаимодействий для улучшения ваших прототипов.

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Принципы дизайна и их важность
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Изучение гештальт-принципов дизайна
• Adobe XD против Sketch — какой UX-инструмент вам подходит?
• 10 UX-результатов, которые используют лучшие дизайнеры