Как доработка UX помогла сократить время прохождения сценария заказа еды на 70%. Часть 2
Всем привет, на связи дизайнеры студии Focus. В первой части статьи мы рассказывали, как к нам пришла идея доработки UX приложения сети ресторанов Mama Mia, а также, как проводили интервью и изучали ЦА. А сегодня поделимся результатами тестирования текущего приложения и покажем, как проводили конкурентный анализ.
Анализ проводился весной 2022 года. На момент выхода статьи приложение может отличаться от приведенного в статье
Тестирование текущего приложения
Итак, как мы уже знаем из первой статьи, у нас уже есть респонденты, готовые приступить к тестированию. Но, чтобы получить качественные результаты, нужно грамотно подготовиться. А именно, прописать сценарий юзабилити-тестирования, по которому респонденты будут оценивать удобство приложения, а мы замерять результаты.
Сценарий юзабилити-тестирования — это, по сути, план, где, с одной стороны, набор заданий и вопросов для участников, а с другой — метрики и гипотезы, которые мы проверяем и фиксируем. Сейчас мы покажем структуру исследования, которая получилась у нас.
1. Цели и задачи
Планирование тестирования начинается не с составления текста заданий, а с проработки целей и задач исследования.
В нашем случае цель тестирования — проверка степени удобства заказа еды в приложении Mama Mia и поиск инсайтов для доработки юзабилити.
Задачи:
- Провести тестирование.
- Получить инсайты.
- Зафиксировать проблемные моменты.
- Проанализировать результаты.
- Составить список доработок приложения.
2. Гипотезы
На основе отзывов людей и собственного опыта пользования приложением мы провели аудит и сформировали список проблем и вопросов. И на основе этого списка мы сформировали гипотезы:
1. Лоадер при переходе между страницами раздражает пользователей.
2. Пользователям неудобно, что нельзя добавить блюдо в корзину со страниц меню.
3. Пользователям нужна возможность редактирования состава блюд.
4. Отсутствие возможности поиска усложняет сценарий заказа.
5. Возможность оплатить картой в приложении отсутствует и это снижает лояльность пользователей.
6. Сценарий оформления заказа неудобен для пользователя.
7. В приложении сложная регистрация.
8. Визуальный стиль приложения устарел.
9. В приложении нужна функция отслеживания заказа
3. Целевая аудитория:
В сценарий мы фиксируем краткие данные по целевой аудитории, полученные из опроса, о котором писали в предыдущей статье. Прописываем, кто входит в ЦА и не входит, чтобы не упустить эту информацию.
Целевая аудитория продукта находится в диапазоне от 16 до 45 лет.
- Мужчины и женщины от 16 до 25 лет, которые заказывают еду на праздники, вечеринки. обращают внимание на скидки и акции. Предпочитают заказывать пиццу и роллы.
- Мужчины и женщины от 20 до 45 лет, которые заказывают еду на ужин, в основном это салаты и горячие блюда.
- Офисные работники (20– 45 лет), заказывают преимущественно обеды. Предпочитают бизнес-ланчи, пиццу и роллы.
- люди с опытом заказа еды через интернет и обладающие средней компьютерной грамотностью.
В целевую аудиторию не входят:
- Люди, которые никогда не заказывали еду через интернет, не умеющие пользоваться интернетом.
- Люди, живущие за пределами доставки и транспортной доступности.
- Пенсионеры.
4. Задания
Один из способов лучше вовлечь пользователей — добавить в сухое задание реальную историю и контекст. Например, вместо «Закажите ужин домой» предложите следующее: «Вечером с мужем вы решили поужинать. Вы оба любите азиатскую кухню, но конкретно вы не любите лук и всегда убираете его из блюд. С работы вы приходите к 19:00 и хотели бы, чтобы к этому времени ужин уже был на столе». Это поможет человеку проявить эмпатию к персонажу и сопоставить себя с ним.
Мы решили протестировать основной сценарий заказа еды и еще дополнительный — отслеживание текущего заказа. Так как основной сценарий достаточно объемный, мы разделили его на 4 задания, чтобы респондентам было проще его проходить, а нам фиксировать результаты и их эмоции от каждого этапа.
Сценарий 1
Задание 1. Найти и добавить в корзину лапшу курица-карри, убрав из состава лук.
Задание 2. Найти и добавить в корзину фунчозу с нежной телятиной.
Задание 3. Найти и добавить в корзину салат цезарь с курицей.
Задание 4. Оформить заказ на доставку по адресу: Тула, Улица Болдина, 74 к 19:00. Оплатить заказ онлайн.
Сценарий 2
Задание 1. Проверить статус текущего заказа.
После составления всех заданий переходим к самому тестированию. Для начала нужно определиться каким образом будем собирать данные.
5. Метод сбора данных
Существуют разные способы сбора данных тестирования, давайте расскажем о самых популярных.
- Наблюдение. Тестируемого во время выполнения заданий оставляют наедине с продуктом и он ведет себя так, как посчитает нужным. Затем респондентом заполняется опросник и он общается с модератором Этот метод считается наиболее «чистым», При его проведении участник ведет себя естественно и есть возможность наиболее точно измерить необходимые показатели.
Однако не освещенными остается много качественных данных. По поведению участника тестирования, невозможно понять, почему он так действует. Если спросить его после окончания теста, то респондент, вероятнее всего, будет помнить только последнее задание. Во время тестирования его мнение может измениться, и вы получите только итоговые впечатления.
- Мысли вслух. Чаще всего этот метод используется в юзабилити-тестированиях. Смысл его в том, что вы просите участника тестирования озвучивать все мысли, возникающие при работе с интерфейсом, и комментировать свои действия.
Используя этот метод можно понять, почему пользователь ведет себя тем или иным образом, и какие эмоции вызывает у него этот тест. Однако при озвучивании своих мыслей, респондент начинает задумываться перед выполнением заданий, и часть естественности теряется.
- Диалог с модератором. Этот способ используется для тестирования концепций и прототипов. Во время выполнения заданий модератор активно общается с пользователем. В нужные моменты модератор выясняет причины поведения тестируемого и задает уточняющие вопросы. Иногда модератор может выдавать незапланированные задачи во время разговора.
С помощью этого метода собирается наибольшее количество качественных данных. Применять его можно, если вы уверены в профессионализме своего модератора. Неправильно составленные или не заданные вовремя вопросы могут сильно повлиять на поведение и впечатления участника и результаты теста будут неточными. При использовании этого способа нельзя измерить практически никакие метрики.
- Ретроспектива. Это сочетание двух методов “Наблюдение” и “Мысли вслух”. Пользователь сначала самостоятельно выполняет все задания, а потом перед ним проигрывается видеозапись его работы. Он комментирует свое поведение и отвечает на вопросы модератора, Этот способ требует значительных затрат времени.
В своем тестировании мы использовали метод — “Мысли вслух”, т.к. решили, что этот способ будет оптимальным. Мы потратили немного времени и сразу получили комментарии по барьерам, затрудняющим выполнение задания.
Советы при проведении тестирования:
Не подсказывайте. Задания должны быть составлены так, чтобы не подсказывать участнику правильные действия. Проследите за вопросами модератора, особенно за теми, которые приходят от команды во время тестирования.
Следите за терминологией. Не нужно использовать непонятные для пользователя слова и обозначения. Мы, привыкнув ежедневно пользоваться какими-то терминами, забываем, что не профессионал в сфере IT их просто не поймет.
Думайте о тайминге. Нужно расставить приоритеты задач. Уставший респондент не будет полезен, он будет думать как быстрее закончить тест. Хороший тест длится не более 1,5 – 2 часов. В это время входит не только прохождение самих заданий, но и интервью, и подготовка к тестированию.
Оценивайте полезность задания. Подумайте, действительно ли оно соответствует вашим гипотезам.
6. Метрики
Метрики — это количественные метрики юзабилити. В результате тестирования вы получаете набор найденных в интерфейсе проблем. Эти показатели помогут понять, насколько все хорошо или плохо, а также провести сравнительный анализ с предыдущими версиями дизайна или другим проектом.
Показатели, которые мы использовали:
Успешность выполнения заданий. Можно использовать бинарный код, в котором есть два варианта: выполнено задание или не выполнено. Мы воспользовались подходом Нильсена и выделили три вида оценок успешности:
- справился с заданием практически без проблем — 100%;
- столкнулся с проблемами, но выполнил задание самостоятельно — 50%;
- задание не выполнено— 0%.
Процент успешности — простой и наглядный показатель, используется, если в заданиях четко определены цели. По графику успешности можно быстро определить самые проблемные места интерфейса.
Если из 12 респондентов 4 справились с заданием легко, 6 — с проблемами, а 2 потерпели фиаско, то средняя успешность по этому заданию будет 58%.
Время выполнения заданий. Эта сравнительная метрика. Например, как можно понять хорошо или плохо пользователем выполнена задача, на которую затрачено 30 секунд? Никак. А вот то, что время на оформление сократилось по сравнению с выполнением той же задачи в предыдущей версии дизайна – это хороший показатель. Есть интерфейсы, где сокращение времени на выполнение задач критично — например, рабочий интерфейс сотрудника колл-центра.
Оценка удовлетворенности. Пользователь оценивает удобство работы с системой. Выявляется она при помощи опросников, которые участники заполняют в процессе или после тестирования.
В нашем случае мы просили оценить, насколько сложно было выполнить задание по пятибалльной шкале, где 1 – сложно, 5 – легко.
После каждого задания провели небольшой опрос и замерили результаты. Аналогично поступили и с дополнительным сценарием. Итоги тестирования зафиксировали таблице.
Итоги
По итогу тестирования подтверждены 3 гипотезы, 4 – частичное подтверждение и 2 не подтверждены. Все данные зафиксировали, по каждой гипотезе написали выводы, а также обозначили список идей по доработке интерфейса.
Сценарий 1
Задание 1
- В целом навигация респондентам понятна, не возникло затруднений в поиске нужного блюда. Но трудности возникли в отсутствии возможности редактирования состава.
- Большая часть респондентов решила написать в комментарий, часть не выполнила задание.
- Также не совсем удобен сценарий выбора доставки/самовывоза, который всплывает в самом начале.
Идеи:
- В карточке блюда сделать возможность редактирования состава с добавлением и удалением ингредиентов.
- Структурировать информацию в карточке для удобства (граммовку обозначить более очевидно).
- Переработать сценарий выбора доставки/самовывоза.
Задание 2
У большей части аудитории не возникло трудностей с навигацией и поиском нужного блюда. На этом этапе отметили неудобные моменты:
- малозаметная граммовка;
- отсутствие возможности добавить блюдо в корзину без перехода в карточку;
- долгая загрузка при переходе между страницами;
Идеи:
- Убрать лоадер загрузки между страницами.
- Добавить возможность добавления в корзину непосредственно из меню.
Задание 3
Все респонденты выполнили задание, но с затруднениями:
- У блюд очень короткие названия, заложенные в интерфейс, длинные обрезаются.
- Все отметили неудобное взаимодействие с модальным окном "Добавки".
Идеи:
- Изменить превью блюд, чтобы больше символов помещалось в заголовок.
- Переработать механику модального окна "Добавки".
Задание 4
На этом шаге у всех респондентов возникли затруднения:
- Механика авторизации и регистрации перегружена.
- Ввод и выбор адреса из выпадающего списка неудобен.
- Вызывает дискомфорт, что нет возможности заказать ко времени и не понятно, если написать комментарий прочитают его и учтут ли пожелания?
- Непонятны формулировки выбора способа оплаты и переадресация на сторонний сервис.
- Смутило большое кол-во баннеров в корзине.
- Неудобный способ подтверждения заказа только по телефону, без возможности связаться через чат.
Идеи:
- Упростить сценарий авторизации/регистрации.
- Переработать стр “Корзина”, облегчить, сделать интуитивно понятной.
- Упростить заполнение полей.
- Добавить возможность заказа ко времени.
- Изменить формулировки выбора способа оплаты.
- Добавить возможность оплаты в приложении.
- Добавить возможность обращения в поддержку через чат.
Сценарий 2
Задание 1
Задание не было выполнено на 100%. Возникли затруднения:
- Неочевидное расположение раздела "Заказы".
- Нет информации о статусе.
- Непонятный интерфейс самих заказов.
Идеи:
- Упростить навигацию до “Заказов”.
- Сделать интерфейс заказов интуитивно понятным, с разделением на активные и завершенные заказы.
- Добавить статусы текущего заказа.
- Добавить возможность отмены.
- Поработать над формулировками.
В поиске референсов
Прежде чем переходить к проектированию, нужно посмотреть лидеров отрасли, отследить привычные для людей сценарии и собрать интересные фичи.
Хоть бюджет проекта не позволяет провести глубокий конкурентный анализ, совсем исключить этот этап мы не могли. Из прямых конкурентов выбрали такие приложения: Додо Пицца, Автосуши, Пицца Фабрика, Томато. Еще мы рассмотрели популярные сервисы, относящиеся к косвенным конкурентам: Delivery Club и Яндекс.Еда.
Додо Пицца
Сеть пиццерий № 1 в России по доставке пиццы.
Что понравилось:
- Приятное впечатление по визуалу, дружелюбный интерфейс (задает настроение).
- Удобное расположение меню (табы).
- Нарисованные, стилизованные иллюстрации.
- Качественные фото.
- Удобный нижний таббар.
- Удобное отслеживание заказа (видео).
- Удобная связь с техподдержкой.
- Контент персонализируется в зависимости от выбранного способа получения.
Что показалось неудобным:
- Интерфейс карточки блюда при добавлении в корзину не меняется, не понятно, какие блюда положены в корзину (при большом заказе).
- Нет возможности удалить из корзины все товары сразу.
- В функционале “Убрать ингредиенты” странно выбрано расположение кнопок “Сохранить” и “Сбросить”. Хочется переместить их вниз.
Наша субъективная оценка — 9 из 10.
Автосуши
Сеть кафе японской кухни с доставкой.
Что понравилось:
- Возможность положить из каталога блюдо в корзину и изменение интерфейса, когда товар положили в корзину.
- Есть возможность заказать ко времени
- Если оплата наличными, то сразу всплывает окошко с вводом для сдачи.
- Информация о блюде (КБЖУ).
- Навигация по категориям и подкатегориям удобная и понятная.
Что показалось неудобным:
- Внешний вид каталога, огромные буквы.
- Мелковат шрифт на карточках.
- “Добавить в избранное” очень мелко (на разводящей есть, а в самой карточке нет).
- Нет возможности редактирования состава.
- Неудобная механика работы фильтра.
- Неудобная механика работы поиска (не выдает сразу блюда, а то при клике “Найти”, не выдает подсказки, что блюда нет, мелкий текст и кнопка сброса).
- Нет возможности очистить корзину.
- Устаревший дизайн.
Наша субъективная оценка — 6.
Томато
Рестораны-пиццерии Томато - итальянская кухня по лучшим рецептам.
Что понравилось:
- Удобное расположение меню (табы).
- Есть возможность редактировать состав для пиццы.
- Удобный нижний таббар.
- Светлый простой интерфейс.
- Регистрация по номеру телефона.
- Если оплата наличными, то сразу всплывает окошко с вводом для сдачи.
- Удобное отслеживание заказа.
Что показалось неудобным:
- Не видно количество блюд в корзине.
- Нет возможности редактировать состав блюд.
- Не полностью видно блюдо.
- Перегруженное оформление заказа.
- Разное расстояние между пунктами меню вверху.
Наша субъективная оценка — 8.
Пицца Фабрика
ПиццаФабрика – быстрая доставка от 30 минут. Меню на любой вкус: пицца, роллы, воки, напитки.
Что понравилось:
- Яркие ярлыки к блюдам.
- Персональный конструктор вока, пиццы и роллов.
- Есть состав с КЖБУ.
- Есть доставка ко времени.
- Есть бесконтактная доставка.
- Есть чат с поддержкой.
Что показалось неудобным:
- Регистрация только после совершения заказа, не очень понятная.
- В подкатегориях висят общие баннеры, которые мешаются.
- Нельзя положить блюдо в корзину из каталога.
- В карточке стрелка “Назад” рядом с кнопкой “В корзину” непривычное расположение.
- Кнопки мелковаты.
- Поле для промокода не явное, выглядит как кнопка.
- В корзине в блоке рекомендации при скролле грубое белое затемнение.
- В оформлении заказа при выборе адреса на карте, сам адрес не отображается.
- В оформлении заказа выбор оплаты (табы) визуально непривлекательные.
- При ошибках переносит в начало экрана, нет якорей.
- Долгая загрузка между страницами.
- Навигация “Назад” вверху страницы не фиксируется.
Наша субъективная оценка — 6.
Delivery Club
Крупнейший сервис доставки еды и продуктов в России.
Что понравилось:
- Удобное расположение разделов(табы).
- Простой светлый дизайн.
- Используются эмоджи, к которым привыкли пользователи.
- Удобный нижний таббар.
- Можно добавить блюдо из разводящей и изменить кол-во (только для блюд без добавок).
- Индивидуальный дизайн иконок (3D).
- Вход по номеру телефона.
- Поиск по категориям, кухне, рейтингу.
- Удобное отслеживание заказов с картой.
- Есть возможность редактировать блюдо.
Что показалось неудобным:
- Перегруженность акциями и баннерами.
Наша субъективная оценка — 10.
Яндекс.Eда
Сервис заказа еды с доставкой из любимых ресторанов и магазинов.
Что понравилось:
- Удобное расположение разделов(табы).
- Простой светлый дизайн.
- Удобный нижний таббар.
- Можно добавить блюдо из разводящей и изменить количество (только для блюд без добавок).
- Индивидуальный дизайн иконок (3D).
- Проявление заботы (пластик, помощь людям).
- Дружелюбные тексты.
- Возможность заказа другому человеку.
- Возможность оставить заказ у двери.
- Удобная регистрация (по номеру телефона или аккаунт яндекс).
- Удобные большие кнопки.
- Реализована возможность редактировать состав в некоторых позициях.
- Есть онбординг при первом запуске приложения.
- Удобное оформление заказа.
- Яркие ярлыки к блюдам.
Что показалось неудобным:
- Недостатков не нашли.
Наша субъективная оценка — 10.
Заключение
Грамотная подготовка и тестирование помогли нам проверить свои гипотезы и определить узкие места текущего приложения. Исследование конкурентов позволило найти привычные и удобные механики, на которые можно ориентироваться при проектировании нового интерфейса.
В следующей части статьи, мы спроектируем User Flow, и покажем обновленный дизайн приложения.