William Ng, продуктовый дизайнер-фрилансер, рассказал о редизайне приложения для шоппинга от Zara. Telegraf публикует перевод его статьи.

Zara: юзабилити кейс

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

Расстановка акцентов

Пользовательские персонажи

Первым шагом, который я предпринял, было онлайн-исследование клиентской базы Zara. Затем я создал пару приблизительных персонажей, которые бы захватили внимание самой широкой аудитории бренда: для охвата гипотетической, самой большой группы клиентов: квалифицированные специалисты в возрасте от 20 до 30 лет с уровнем дохода выше среднего.

Пользовательская история

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

Тестирование юзабилити

Имея теперь больше представления о пользователе, я отправился в торговый центр, где есть магазин Zara, и выбрал посетителей из торгового центра для проведения партизанского исследования юзабилити. Я отобрал людей для исследования и убедился в том, что они хотя бы иногда пользовались онлайн-шоппингом до тестирования. В итоге я работал с 7 пользователями.

Я попросил каждого из них представить себя в типичной ситуации и пройти серию таких заданий, как:

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

Определить и проанализировать

Карта связей

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

Анализ 2×2

Чтобы облегчить определение приоритетности проблем, я использовал карту 2×2, чтобы ранжировать категорию проблем по тому, насколько они важны для бизнеса (ось X) и для пользователей (ось Y). Предполагая, что основной бизнес-задачей приложения является мобильная выручка, я решил, что болевые точки, связанные с редактированием товаров в корзине являются самыми важными для бизнеса и пользователей. В итоге вот те проблемы, которые я включил в задачи редизайна.

Определение проблемы

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

Пытаясь редактировать товар в корзине:

• Только 1 из 7 пользователей сделал это без проблем
• 6 из 7 пользователей нажимали на объект, а это действие только подгружало изображение
• 4 из 7 пользователей пробовали провести пальцем влево по объекту, что не приводило к желаемому результату
• 2 из 7 пользователей случайно удалили товар из корзины

Другие проблемы

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

Представить и воплотить

Черновые UI эскизы

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

Готовые мокапы

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

Мои решения представлены ниже:

Галерея

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

Галерея

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

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

Прототип

Готовы оценить часть моего прототипа?

Во-первых, представьте, что вы закончили делать покупки в приложении Zara и теперь можете выйти из него. Однако сначала вы хотите отредактировать некоторые элементы в корзине. Теперь попробуйте сделать это на моем прототипе!

Проверка

Я проверил свой дизайн — попросил 7 пользователей отредактировать на рабочем прототипе количество и размер товаров в корзине. Все справились без проблем.

В результате редизайна, показатель успешно выполненной задачи, когда пользователь хочет отредактировать элемент в корзине, увеличился с 33% до 100%.

Когда пользователи хотели редактировать товар в корзине:

Галерея

Короче говоря

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

Спасибо, что прочитали. Если вы хотите сотрудничать, у вас есть для меня предложение или вы просто хотите поболтать, пишите мне на e-mail [email protected] или связывайтесь через Linked-In.

С оригиналом статьи можно ознакомиться здесь.