Как продумать UX-дизайн интернет-магазина

Статистический мобильный покупатель просматривает товары или услуги с помощью смартфона в перерыве между другими действиями, управляя устройством одной рукой. Его внимание обычно рассеяно по ряду различных занятий и лишь изредка сосредотачивается на чем-то конкретном. Именно поэтому так важно добиться высокой эффективности на уровне правильной подстройки под свои нужды. Ниже приведен список из 5 рекомендаций по улучшению пользовательского опыта.

1. Добавление в избранное без регистрации

Возможность добавления в избранное является отличной поддержкой при просмотре каталога товаров — она дает возможность запомнить товар «на потом», не добавляя его в корзину, что всегда связано с намерением купить. Стоит убедиться, что возможность добавления в избранное доступна незарегистрированным пользователям. Благодаря этому пользователь сможет плавно перемещаться по магазину без необходимости регистрации, что может иметь положительный эффект, особенно при первом длительном посещении.

2. Основное действие видно на первом экране (в верхней части экрана)

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

3. Подходящая клавиатура в текстовых полях

На сенсорных устройствах пользователь вводит данные с помощью экранной клавиатуры. Современные браузеры позволяют подогнать представленную клавиатуру к характеру вводимых данных — например, рядом с полем номера телефона должна быть представлена цифровая клавиатура с большими кнопками, а рядом с полем адреса должна быть представлена буквенная клавиатура. Оставление буквенной клавиатуры с маленькими цифровыми кнопками вызывает разочарование у пользователя и увеличивает вероятность ввода неправильного номера телефона, здания, почтового индекса или PIN-кода. Это вызывает ненужные проблемы и затраты на стороне обработки заказов. Стоит позаботиться о том, чтобы настроить экранную клавиатуру на ожидаемое содержимое поля формы. Такой подход сделает заполнение формы более удобным и позволит допустить меньше ошибок и ошибок.

4. Ошибки отмечены не только цветом

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

5. Статус фильтра виден всегда

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