Как улучшить пользовательский опыт с помощью микровзаимодействий

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

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

И как дизайнеры, мы понимаем это, так ведь? Все это можно отнести к пользовательскому опыту. Тут главное не просто закрыть дверь, а важен сам процесс. У BMW это один звук, звук безопасности, надежности и роскоши. Микровзаимодействия в веб-дизайне оперируют схожими понятиями.

Что такое микровзаимодействия?

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

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

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

Самая худшая причина использовать анимацию в веб-дизайне – это «потому что она круто смотрится». Особенно если единственная задача микровзаимодействия – это показать сам эффект.

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

Когда использовать микровзаимодействия

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

Это статичный элемент, и что-то дополнительное приведет пользователя в замешательство (замешательство = плохой пользовательский опыт). Давайте разберем кнопку отправки формы. Это будет микровзаимодействие, так как нам необходимо визуально сообщить, что…

с кнопкой можно взаимодействовать сейчас, или

с кнопкой можно будет взаимодействовать потом, или

с кнопкой уже ведется взаимодействие,

…чтобы навести пользователя на отправку формы.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Микровзаимодействия как диалог

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

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

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

Проектирование цели/триггера

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

Целям взаимодействия иногда могут потребоваться подсказки, как лейблы возле полей формы и front-end валидация, чтобы пользователь сразу понял, правильно ли он ввел данные или нет. Это помогает снизить вероятность ошибок и повторного выполнения задачи.

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Как правила помогают четко формулировать ответ

Итак, триггер похож на триггер, и он был активирован. Замечательно! Теперь интерфейс должен как-то ответить. В формах это может быть довольно сложно, так как может быть очень много условий, которые необходимо соблюсти перед отправкой данных. Тем не менее, даже простейшие запросы (как переход по ссылке на страницу 404) могут быть с ошибками. И когда такое происходит, интерфейс должен объяснить, что случилось, и попытаться помочь вам двигаться дальше. Полезный ответ – использует красный цвет для выделения и объясняет, что не так.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Плохой ответ – расплывчатый ответ и непонятная кнопка.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Полезный ответ – предлагаются альтернативные направления.

Как улучшить пользовательский опыт с помощью микровзаимодействий

Плохой ответ – заводит в тупик.

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

Ответ с полезной обратной связью

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Информируйте пользователей во время ожидания

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

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

Как улучшить пользовательский опыт с помощью микровзаимодействий

Как улучшить пользовательский опыт с помощью микровзаимодействий

Заключение

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

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

Автор: Daniel Schwarz

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные тенденции веб-разработки

За ближайшие 5 дней мы составим ваш пошаговый алгоритм профессионального роста с нуля в сайтостроении...

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree