UXPUB

UXPUB - спільнота з 4,706 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Как небольшие анимации оказывают большое влияние? Исследование
Редакція
Редакція

Опубліковано

Как небольшие анимации оказывают большое влияние? Исследование

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

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

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

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

UX-флоу прототипа. Вы можете попробовать его здесь

Чтобы измерить влияние анимации, я создал две версии прототипа в Quant-UX и провел A / B-тест. В статической версии кнопка оформления заказа видна сразу же, тогда как в анимированной версии она исчезает через 0,7 секунды. Эта анимация длится 0,5 секунды. Дополнительный индикатор состояния, показывающий количество товаров в корзине, появляется через 1,2 секунды.

Корзина для покупок анимирована, чтобы привлечь внимание

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

Я попросил 78 пользователей удаленно поучаствовать в этом эксперименте. Каждому пользователю случайным образом был назначен статический или анимированный прототип. Пользователям статического прототипа требовалось в среднем 8,6 секунды и 2,9 взаимодействия, чтобы нажать кнопку оформления заказа, тогда как пользователям анимированного прототипа потребовалось в среднем 6,6 секунды и 1,9 взаимодействия. Это означает улучшение времени завершения в среднем на 21% и уменьшение кликов на 30%.

Анимации уменьшили время выполнения задачи на 21%

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

Таким образом, потребовался более подробный анализ времени и количества взаимодействий. Для этого я использовал коробчатую диаграмму. Коробчатая диаграмма показывает, как распределены наблюдаемые измерения. Она показывает минимальное и максимальное значения в виде линии, а среднее значение – в виде красной черты. Кроме того, вокруг среднего значения отображается полоса. Размер полосы соответствует дисперсии в наборе данных. Чем больше полоса, тем выше дисперсия. В этом контексте высокая дисперсия означает, что пользователи ведут себя по-разному, и что может быть несколько групп пользователей, и у некоторых групп есть проблемы с пониманием дизайна.

Пользователям статической версии потребовалось больше времени и кликов

Что это значит для моих дизайнов? Более низкие средние значения указывают, что пользователям анимированной версии легче обнаружить кнопку оформления заказа. Но при более детальном рассмотрении обнаружилось несколько иное. У большинства пользователей не было проблем с выполнением задач, но в статической версии у многих пользователей были проблемы с обнаружением кнопки оформления заказа: 10 из 38 пользователей сделали в статической версии более 4 кликов, тогда как только 2 из 40 имели проблемы в анимированном прототипе. Эти результаты показывают, что анимация помогла найти кнопку и снизила процент потерянных пользователей.

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

Я сделал кнопку оформления заказа более очевидной

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

Я провел еще один A / B-тест, на этот раз с 72 участниками. Пользователям статической версии потребовалось 8,8 секунды, чтобы найти кнопку оформления заказа, и было необходимо 3,8 клика, тогда как пользователям анимированной версии потребовалось 6,6 секунды и, опять же, 1,9 клика. Диаграмма разброса подтверждает наблюдения первого теста: у большинства пользователей не было проблем с поиском кнопки оформления заказа, но количество потерянных пользователей было значительно меньше; 12 из 40 пользователей сделали 4 или более кликов, тогда как всего 4 из 32 пользователей столкнулись с этой проблемой в анимированном прототипе.

Опять же, у пользователей анимированной версии было меньше проблем с поиском кнопки оформления заказа

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

Количество потерянных пользователей сократилось более чем в 3 раза.

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

Я использовал Quant-UX для создания обоих прототипов и проведения анализа. Quant UX – это инструмент с открытым исходным кодом, который может использовать каждый. Вся графика была напрямую скопирована из Quant-UX. Вы можете попробовать прототипы здесь и здесь.


Перевод статьи uxdesign.cc

Обговорення (0)