О чём пойдёт разговор?
Речь сегодня пойдет о юзабилити-оптимизации карточки товара. Возьмем реальный интернет-магазин и попытаемся улучшить UX существующего функционала. Поищем неэффективности в текущем интерфейсе, зная наперёд несколько актуальных проблем в продукте.
Каков план действий?
Внешний вид компонентов не меняем, т.е. остаемся в рамках текущего UI. Но можно воздействовать на типографику: размер и плотность текста менять разрешается. Будем использовать Axure для создания максимально реальной картины. То есть в арсенале будут все доступные приемы интерактивного прототипирования: интерфейсная анимация, смена состояний, смена текста внутри меток, динамическое сокрытие/показ объектов и т.п. Каждый прием будет рассмотрен отдельно ниже. Разрешается немного манипулировать, чтобы призвать пользователя к нужным нам действиям, которые требуются бизнесу.
Какие всё же актуальные проблемы?
Для интернет-магазина Adverti, который продает корпоративные сувениры и подарки, очень важно сделать акцент на нанесении. Это когда вы печатаете свою айдентику на футболке, ручке, календаре и т.п.
Если взглянуть на текущую версию карточки товара Футболка, то всплывает ряд проблем:
- функционал нанесения запрятан так далеко, что для клиента неочевидна его ценность (читайте: клиент не видит)
- для некоторых товаров доступно много параметров, которые запрятаны в выпадающие списки и требуют множества лишних кликов
- в блоке корзины справа много цифр и значений, расставленных практически хаотично и поэтому они сумбурны
Можно ли совместить функционал нанесения и фотографию?
Звучит как оптимальный вариант. На фото — товар и для него мы предлагаем выбрать для него нанесение. Логичная связь. Сюда неплохо подходит концепция простого конструктора: размечаем область доступную для нанесения и делаем её кликабельной. Область будет соответствовать будущему месту нанесения. Последнее время часто использую динамику в тексте, т.е. получается подобие подсказки в соответствии с новым событием. Поэтому, наведя курсор, вы заметите как меняется тултип сверху, улучшая доступность:
Кроме того, в перспективе планируется развитие конструктора. Будет больше функционала для выбора нескольких нанесений на разные стороны той же футболки или джерси. Поэтому такая “разметка” заложена и на перспективу.
А что по поводу анимации?
Использование самого простого динамического ресайза подложки под фотографией улучшает понимание связи между новым функционалом и объектом. Поэтому фон расширяется правее, обязательно с нелинейной анимацией. Выглядит так, будто футболка породила новые компоненты. Все лишнее в этот момент прячем: выбор цвета в этом подсценарии запрещаем. Чистейший пример анимации во имя UX. А чтобы снова выиграть немного пространства — пишем вместо цены в label’e новый заголовок — “Конструктор нанесения”. Разумеется тем же цветом, что и цвет рамки подложки конструктора для усиления общности. Это кажется мелочью, но важной.
Заметили как после подтверждения запрыгала область нанесения на правом плече? Еще один живой пример как анимацией мы даем визуальный feedback. Эта небольшая положительная манипуляция вниманием немного агрессивнее фокусирует клиента на том, что два нанесения успешно выбраны.
Какие изменения будут в центральной колонке?
В текущей версии на первом месте вообще артикул! Если мне просто нужно 500 ручек со своим логотипом и только, то артикул — последнее, что меня волнует. Добавляем к инпутам стрелки ▼▲, чтобы дать возможность накрутить себе тираж побольше, не прибегая к клавиатуре:
Разумеется побольше, потому как шаг у стрелок делаем в 100 единиц. Сразу +5% к продажам! И разумеется о таком шаге мы предупреждаем сразу по onhover’у. Из-за такой фичи инпуты пришлось переложить налево, но мне кажется так этим элементам удалось еще и приоритет повысить. Теперь весь функционал формирования заказа сконцентрирован в одной области:
Что изменится в правом блоке заказа?
В этом блоке много цифр и с этим ничего не поделать. Я по-прежнему уверен, что одна-две цифры там точно лишние, но клиент утверждает, что все эти цифры важны для бизнеса. Тут остаётся только усовершенствовать типографику и выровнять данные по классическим принципам упорядочивания данных в таблице.
А если нанесение всего на одну зону?
Таких товаров в ассортименте множество. Например, в случае с надувным мячом всего одна область нанесения, а значит из выпадающего списка оптимально вынести всё на 1-й уровень (вместо выпадашек). А стоимость динамически появляется вместо label’a “Добавьте нанесение”. То есть вновь используем уже существующий элемент для новой цели в рамках текущего сценария:
А если для товара много параметров?
Встречаются в магазине такие товары, для которых доступно более 3-х параметров нанесения. Сейчас все они запрятаны в выпадающих списках. Основных минусов — два: вся опциональность скрыта за кликом по выпадашке; лишних кликов суммарно приходится делать много. Пришлось создать новый UI-компонент, но зато удалось всё вынести на первый уровень и сократить количество кликов для этого товара.
Было:
Стало:
В качестве заключения
Визуальные фидбеки, тултипы в контексте определенных событий и простейшая интерфейсная анимация помогают бизнесу направлять клиента по выгодному пути. В наши дни эти приёмы даже не дань моде и технологиям — а необходимость, чтобы быть на шаг впереди конкурирующего продукта. За счёт такого несложного, но необходимого подхода сокращаются риски отказов; повышается доступность продукта и, как следствие, можно ожидать повышения конверсии в будущем.
P.S.
Можете сами покликать по интерактивному прототипу, но не усердствуйте. Некоторый функционал отсутствует по причине очевидности. Шапка и футер просто отпринтскринены с текущей версии сайта и сделаны картинками.
Автор: Роман Камушкен
