Infotecs - Компания по разработке программного обеспечения в Санкт-Петербурге

Контекст

Задача

- Дать комментарии по улучшению дизайна страницы с точки зрения UX/UI
- Создать модальное окно подтверждения очистки корзины для десктопной и мобильной версии

Время выполнение
проекта

1 неделя

Улучшение страницы с точки зрения UX/UI

Проблема

В первую очередь рассматриваю и анализирую исходные макеты.

Из того, что видно на фокусе (рис. 1) можно понять, что большую часть внимания пользователь отдает левой стороне. Но если проследить за логикой взгляда, пользователь смотрит примерно как на рисунке 2. Следовательно стоит и кнопки расположить там, а также сделать цену более контрастной.

Тесты e-commerce показывают, что пользователям необходимо в любой момент иметь возможность видеть весь список товара с его изображением и кратким описанием. Чтобы пользователь банально не перепутал товары при оформлении.

На исходном макете показан вариант с превышением лимита, можно предположить, что в таком случае оформить заказ невозможно. Чтобы не путать пользователя primary кнопкой “оформить заказ”, её следует сделать неактивной.

Также у пользователя внимание заостряется на “превышен лимит”, но информация какой вообще лимит плохо считывается. Следует это изменить.

Фокус внимания (рис. 1)

Взгляд пользователя (рис. 2)

В случае с мобильным макетом лимит считывается гораздо лучше.

Таблица товаров выглядет плохо и по ui, и по ux. Во-первых, её неудобно листать, во-вторых, информация считывается хуже. У пользователя нет всех данных перед глазами, и ему будет труднее принять решение. Таблицу с товарами стоит пересобрать.

Бенчмаркинг

Анализирую корзины в других сервисах для выявления лучших практик.

Вывод

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

Общие паттерны

Четкие изображения товаров (5/5)

Краткие описания (5/5)

Изменение количества прямо в корзине (5/5)

Прозрачный расчет итоговой стоимости с учетом налогов и доставки (5/5)

Возможность видеть стоимость каждого товара и общую сумму, включая скидки (5/5)

Модальные окна (4/5)

Адаптация под мобильные устройства (5/5)

Решение/макеты

Благодаря изменениям:

Пользователь быстрее считывает информацию о продукте благодаря изображениям;
Фокус внимания на цене стал больше;
Информация о лимите стала доступнее.

Решение/макеты

Благодаря изменениям:

Таблицу стало удобно просматривать;
Информация теперь считывается лучше;
У пользователя все данные перед глазами, и он может их редактировать.

Модальное окно подтверждение очистки

Проблема

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

Адаптивность: Модальное окно должно быть адаптивным к разным размерам экранов.

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

Дизайн и пользовательский опыт: Важно уделить внимание дизайну модального окна, чтобы оно было удобным и соответствовало общему стилю сайта.

Исследование

Для начала рассматриваю и анализирую варианты модальных окон на других сервисах и в приложениях.

Можно заметить что все они так или иначе разные, но их объеденяет несколько критериев:

Предостережение;
Возможность пользователя отменить действие и вернуться.

Решение/макеты

Делаю макеты на основе исследования.

Соблюдаю привычный для пользователя UX-паттерн: подтверждение очистки требует обозначения красным цветом, т.к. действие деструктивное.

Решение/макеты

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

Связаться со мной