Как нарисовать удобную корзину для VK Маркет

Предыстория

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

Задача

"Ваша задача — сделать более удобный и простой интерфейс Корзины
для покупки товаров в VK Маркет".

Как выглядит корзина сейчас

Я никогда не пользовалась VK Маркетом, поэтому для начала я прошла путь пользователя от выбора товара до оформления заказа. На этом этапе у меня
уже сформировались некоторые гипотезы, но они требовали подтверждения.

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

Выявленные UX - проблемы

Их достаточно много, начиная с лага отображения количества товаров в корзине, заканчивая растерянностью пользователя после оформления заказа без оплаты. Уверена, фраза "Продавец скоро свяжется с Вами" успокоила бы его. Я случайно два заказа оформила и не понимала, как отменить, пока мне не написал продавец.

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

1) Несколько корзин

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

Я решила уточнить этот момент у службы поддержки, может быть, всё таки можно в настройках или как-то сделать единую корзину для всех товаров
или хотя бы одну кнопку "Оформить заказ".

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

2) Изменение цвета, размера и количества товара

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

VK Маркет позволяет менять цвет и размер прямо в корзине, но происходит
это через неочевидный *жмяк* на синий текст (никто из опрошенных мной
не догадался, что нужно туда нажать) и выпадающие снизу шторки. Хочешь изменить и цвет, и размер, и количество? Будь готов нажать на текст и закрыть шторку трижды.

3) Как удалить товар из корзины?

Думаю, вы уже заметили, как в "Количестве" притаилась кнопка "Удалить товар". Многие искали её во время тестирования. А ещё случайно обнаружилось, что можно удалять товары свайпом влево. Но это, наверное, просто я редко свайпаю что-либо, поэтому функция была неочевидной.

Стоит отметить, что после нажатия на кнопку "Удалить" не появилось окно подтверждения, толстовка просто пропала из списка. То есть пользователь
не защищен от случайного удаления товара. А искать его потом заново — долго.

Анализ других маркетов

Мне нравится анализировать корзины различных онлайн-маркетов. И у меня есть свои фавориты. Но субъективного мнения для выполнения ТЗ недостаточно, поэтому я просмотрела корзины топовых, согласно исследованию E-commerce Checkout Rank 2021 от Markswebb, маркетов.

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

У всех есть общие черты: изменение количества товаров через иконки плюс
и минус, возможность отметить товары для заказа с помощью галочки (если хотите заказать пока только пару вещей из корзины, а другие оставить на потом), возможность удалить товар из корзины с помощью иконки и добавление товара
в избранное.

У Лабиринта всё немного сложнее: чтобы менять характеристики товаров и их количество, нужно перейти в раздел "Редактировать".

Но, в целом, все эти корзины нативны и похожи друг на друга, они не вызывают
у пользователя растерянность и страх нажать не на ту кнопку, как случилось
с моей знакомой, когда она оформляла заказ в VK Маркет. Когда речь идёт
об интерфейсах, цель которых как можно скорее "заставить" пользователя совершить покупку, мы должны ориентироваться на привычные для него вещи
и не создавать лишние барьеры.

Мой фаворит - SHEIN

Мне нравится, как здесь реализована функция изменения цвета и размера. Открывается всего 1 шторка, которая представляет собой мини-экран товара.
В пару кликов мы меняем нужные характеристики, нажимаем на "Обновление"
и всё. Никаких добавлений новой позиции в корзину или множества шторок.
Всё просто и очевидно.

Мое решение

После анализа и подтверждения своих гипотез я начала рисовать экраны. Задачу упростила (а местами и усложнила) дизайн-система VK.

1) Единая корзина

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

Эти "папочки" не раскрываются, их цель — просто показать, что товары из одного магазина.

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

Также я оставила функцию связи с продавцом и возможность удаления всех
его товаров

2) Функционал карточек

Я постаралась добавить все привычные пользователю функции. В идеале, я бы ещё увеличила длину карточки, чтобы иметь больше пространства, но стиль VK не подразумевает большие прямоугольники (в дизайн-системе карточки имеют размер 104х96 pt, но длины в 96 не хватило на весь функционал, поэтому у меня квадраты 104х104).

Я добавила:

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

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

2) Изменение количества товара через привычные всем иконки плюс и минус. Ещё мне нравится, когда можно нажать на минус при единице и товар просто удалится (редко встречаю такое, но прикольно же).

3) Отображение суммы заказа в каждой группе.

4) Удаление товаров. Иконку взяла прямо из шаблонов в дизайн-системе VK.
В системе иконок была другая, но эта мне понравилась больше :)

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

5) Возможность изменения цвета и размера одним кликом.

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

3) Кнопка "Перейти к оформлению"

Мне нравится видеть сумму заказа сразу, а не только в конце экрана.

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

Технические моменты

Работать с дизайн-системой было очень удобно, но иногда приходилось создавать новые компоненты или сильно переделывать старые, просто потому что например карточки товара в системе нет, и я создала её из такой штуки.

Также я немного запуталась с отступами, но надеюсь, что в итоге поняла закономерность :) Немного удивила частота в 12 pt в шаблонах, раньше чаще видела и использовала 8 и 16 pt.

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

Небольшой прототип, если захочется посмотреть и пощёлкать макет (следуйте подсказкам Figma, куда нажимать).

P.S.

Это мой первый пост, ещё не разобралась с полным функционалом Teletype, неужели здесь невозможно красиво выровнять текст? Плак плак...