Калькулятор продуктов
на сайте
на сайте
Улучшение пользовательского опыта главного калькулятора сайта selectel.ru
Проблема
Непонятная логика добавления продуктов в расчет
Моя роль
Предложение решений по улучшению ux калькулятора на этапе тестового задания, после уже работая в компании; изучение обратной связи, обсуждение с разработкой, реализация lo-fi и hi-fi макетов, передача в разработку. Реализация новой логики была запланирована уже после моего ухода из компании.
UI
Дизайн разработан в рамках существующей дизайн-системы сайта
Процесс
1) Найти и потыкать калькулятор самостоятельно
2) Узнать, кто предоставил фидбэк
3) Выяснить, кто пользователи и кто целевой пользователь
4) Конкурентный анализ: есть ли паттерны на рынке IT-инфраструктуры и какие?
5) Сформулировать 1 главную гипотезу, чтобы быстро её проверить на ux-тестировании
6) Обработать результаты ux-теста
7) Подготовить следующую итерацию для проверки гипотезы
8) Обсудить с разработкой технические аспекты решения на каждом этапе проектирования
9) Подготовить финальные макеты для разработки и план исследования
10) Обработка результатов будет уже без меня
2) Узнать, кто предоставил фидбэк
3) Выяснить, кто пользователи и кто целевой пользователь
4) Конкурентный анализ: есть ли паттерны на рынке IT-инфраструктуры и какие?
5) Сформулировать 1 главную гипотезу, чтобы быстро её проверить на ux-тестировании
6) Обработать результаты ux-теста
7) Подготовить следующую итерацию для проверки гипотезы
8) Обсудить с разработкой технические аспекты решения на каждом этапе проектирования
9) Подготовить финальные макеты для разработки и план исследования
10) Обработка результатов будет уже без меня
Калькулятор на момент начала работы:
Проблемы этого калькулятора
- Логическая составляющая: пользователям непонятно, почему добавились продукты. Значит ожидаемое поведение было другое.
- UI-составляющая: красная точка не самый понятный элемент для обозначения состояния “элемент добавлен”, конечно привязка к логике тут тоже есть, т.к. при клике не на каждую вкладку появлялась эта точка.
Быстрый модерируемый ux-тест
Конкурентный анализ
В первую очередь смотрела прямых конкурентов из РФ сегмента. На западном онлайн-рынке конфигураторов с такой же свободой и количеством продуктов или нет или мне не вышло их найти. Те, что нашла, чаще всего имели очень старый UI и не всегда очевидный UX.
Параметры для сравнения:
Параметры для сравнения:
- есть только тарифы или можно посчитать отдельно по разным продуктам
- количество продуктов и терминология в рамках них
- выбор продуктов
- добавление продуктов в расчет
- саммари продуктов, удаление/добавление продуктов в саммари
- веб и мобайл версии
- нулевое состояние калькулятора
Гипотеза и исследование
В первую очередь хотелось быстро проверить самую простую гипотезу: проблема в красной точке.
Скорее всего это не так, но проверить нужно.
Итак, добавление продуктов кликом на вкладку - это странно. Ввод данных через вкладку это неестественный паттерн, так что мы берем естественный - кнопки или около того. Как дать понять, что продукт добавлен, что его можно добавить или удалить? Добавление и удаление это довольно часто плюс и минус.
Давайте посмотрим, как это будет работать для пользователей.
Скорее всего это не так, но проверить нужно.
Итак, добавление продуктов кликом на вкладку - это странно. Ввод данных через вкладку это неестественный паттерн, так что мы берем естественный - кнопки или около того. Как дать понять, что продукт добавлен, что его можно добавить или удалить? Добавление и удаление это довольно часто плюс и минус.
Давайте посмотрим, как это будет работать для пользователей.
Результаты теста
Из 19 респондентов:
Таким образом, проблема оказалась точно не в точке.
- 4 решили, что плюс и минус должны раскрывать выпадающий контент
- 6 не поняли, что точно значат плюс и минус, что минус удалит продукт из расчета
- у 5 не возникло затруднений с добавлением и удалением продуктов
- 11 респондентов отметили, что пересчет цены при клике на вкладки — не очень очевидное поведение
- 4 респондента отметили, что они хотят просто смотреть продукты по клику, но чтобы они не добавлялись сами
Таким образом, проблема оказалась точно не в точке.
Переработка логики калькулятора
Что изменилось в новом калькуляторе
- Логика осознанного добавления: продукт добавится в расчёт только если пользователь нажал соотв-ю кнопку.
- Продукты вынесены наверх. Плюсы: продукты сразу перед глазами, больше места под «начинку» продукта. Минусы: если будет быстро добавляться много продуктов, их перечень сверху будет занимать много места, но про планы выпуска я уточнила, и в лучшем случае будет добавлено ещё 3 за пару лет, что не так критично.
- Пересмотрены алерты: в старом калькуляторе алерт появлялся в правом верхнем углу экрана, когда взгляд сконцентрирован по центру и чуть ниже приходилось двигать глазами и головой. Перенесла алерты ближе к рабочей области пользователя
Дальнейшие планы
- Итеративная разработка. В рамках глобального редизайна проект нового калькулятора был одобрен внутренними пользователями и руководством, так что калькулятор сразу отправится на прод. Сначала будет адаптирована сетка, после — добавлена логика осознанного добавления.
- Исследование на внешних пользователях: модерируемое ux-тестирование на разных аудиториях
- Следить за метриками добавления продуктов: каждый элемент взаимодействия размечен в posthog, также в Qlik’е можно построить более сложную воронку до скачивания КП и перехода в панель управления
