UX/UI улучшения для интернет-магазина лечебной косметики
UX/UI улучшения для интернет-магазина лечебной косметики
Переход на адаптивную версию сайта
Что значит UX/UI?
В веб-дизайне от соблюдения принципов UX и UI зависит визуальное восприятие, логика и функциональность сайта.
User Experience (UX) берёт во внимание “пользовательский опыт”, и от качества UX-дизайна зависят впечатления, которые останутся у пользователя после взаимодействия с сайтом. Если веб-ресурс понятен и логичен, если на нём легко находить нужную информацию и совершать целевые действия, то вероятность оформления заказа и новых визитов возрастает.
User Interface (UI) отвечает за пользовательский интерфейс. Сюда входит внешний вид сайта: композиция, цветовые решения, шрифты и другое визуальное наполнение. Важно, чтобы все элементы сайта сочетались друг с другом, были читаемы и эстетичны. Также именно UI-дизайн передаёт характер бренда и делает сайт узнаваемым.
О клиенте
Интернет-магазин FrenchPharmacy занимается продажей лечебной и эстетической косметики. В магазине представлено более 20 марок продукции, а карточки товаров распределены по разным категориям.
Запрос клиента
У компании был работающий, созданный в 2018 году сайт. Однако из-за неадаптивного интерфейса (отдельно мобильная и десктопная версии) и устаревших решений:
- возникали сложности в работе сайта;
- сайт выглядел несовременно;
- функционально сайт был неудобным для пользователей;
Заказчик прокомментировал проблему так:
«Неработающий сайт денег не приносит».
Поэтому было принято решение его усовершенствовать. Рассказываем о том, как именно и над чем мы работали.
Аналитика и исследования
Для доработки сайта до комфортного и полезного для пользователей веб-ресурса предстоял анализ действующего продукта с целью выявления точек роста, а также поиск способов решить проблемы в его использовании. Были выявлены следующие зоны развития:
1. Обновление UI решений
Исходный продукт работает с 2018 года, и его визуальное содержание не обновлялось с момента запуска. Для улучшения пользовательского опыта мы рекомендовали создать новый визуальный ряд, отражающий современные методы работы с контентом. Пример элементов, нуждающихся в переработке:
2. Адаптация UX решений
Интерфейс выглядел запутанно даже при беглом знакомстве, особенно в части фильтрации каталога:
Переработка структуры подачи данных может значительно увеличить степень удобства, повысить скорость поиска и заполнения параметров, и тем самым улучшить ощущения пользователя от использования сайта. Например, большое количество полей в анкете вызывает дополнительные препятствия для регистрации и заставляет тратить лишнее время на заполнение данных:
Регистрация пользователя:
Чтобы упростить процесс и улучшить пользовательские ощущения, мы запланировали снизить количество данных до минимума.
3. Налаживание исправной работы на различных устройствах
Переданный в работу сайт плохо подстраивался под различные размеры экранов, скрывая часть контента и навигации. Это значительно затрудняло взаимодействие с ресурсом. Предстояло выстроить адаптивный интерфейс с учётом всех типов экранов.
Мы уделили отдельное внимание доработке десктоп и мобильной версий, поскольку именно ими пользуется большая часть посетителей сайта.
Выводы на основе исследования
Для совершенствования функциональности и дизайна сайта предстояли следующие работы:
- адаптация дизайна под различные экраны и типы устройств;
- устранение трудностей во взаимодействии с ресурсом доработкой UX решений;
- улучшение впечатлений от пользования сайтом исправлением UI решений.
Реализация проекта
После выявления проблем мы определили список необходимых действий, расставили приоритеты и командой приступили к переработке веб-продукта.
Что делали в направлении UX
UX: Доработали элементы фильтрации в каталоге
Для улучшения пользовательского опыта мы изменили расположение фильтров.
- Мы разделили вторичные фильтры и “тег”-фильтры между собой. Это разграничивает логику функциональных элементов на визуальном уровне, позволяя эффективнее пользоваться возможностями сайта.
- В облаке тегов мы исправили количество элементов. Мы занесли фиксированное значение с возможностью “посмотреть все”. Такое решение уменьшает нагрузку интерфейса и позволяет сместить акцент внимания непосредственно на каталог.
Было:
Стало:
UX: Упростили регистрацию
Мы уменьшили количество опций для заполнения, облегчив и ускорив процесс регистрации. Это же решение влияет на создание позитивного опыта у пользователя.
Например, при совершении покупки незарегистрированный пользователь будет тратить меньше времени на различные действия, не относящиеся к самой покупке.
Было:
Стало:
Что делали в направлении UI
UI: Переработали навигацию
Мы изменили иконки навигации устранением цветового акцента со вторичного меню и улучшили логику построения блоков. Теперь сайт выглядит современно, а внимание пользователя фокусируется на основном меню.
Было:
Стало:
UI: Обновили интерфейс основного меню
Для облегчения восприятия навигации мы улучшили верстку текста.
Было:
Стало:
UI: Изменили главную страницу
Для улучшения визуальной составляющей сайта мы:
- Изменили слайдер на главной странице;
- Переработали блок “хиты продаж”;
- Переработали вторичные блоки на главной странице.
Этими решениями мы усовершенствовали эстетическое восприятия сайта и избавились от ощущения посещения “старого магазина”.
Было:
Стало:
Было:
Стало:
Было:
Стало:
UI: Доработали интерфейс каталога
Для улучшения визуального восприятия раздела мы собрали карточки товаров в каталог и использовали более нейтральные акценты в интерфейсе.
Было:
Стало:
UI: Доработали карточки товаров
Обновили дизайн в карточке товара согласно дизайн-коду: минимум акцента на интерфейс при максимальном акценте на фотографии товара.
Было:
Стало:
Также мы улучшили раздел с описанием товара использованием табов: разделили контент на несколько секций, что позволяет быстро находить нужную информацию без дополнительных “скроллов”.
Итог UI и UX доработок
Визуальная переработка сайта позволила нам его осовременить, создать визуальную иерархию внутри структур (Главная, Каталог товаров, Карточка товаров), а также убрать излишние акценты и перенаправить внимание пользователя на товары.
Про адаптивную версию сайта
Одним из самых важных этапов работы команды стало создание адаптивной версии для комфортного доступа пользователей и взаимодействия с продуктами с любого устройства с любой популярной платформы.
Так выглядит версия для ПК каталога товаров:
Версия для каталога товаров Ipad:
Мобильная версия каталога товаров:
Внедрение адаптивной версии сайта несёт за собой не только удобство для пользователя — такое решение ускоряет в 2 раза внедрение изменений, а также экономит до 30% бюджета на последующих доработках.
Заключение
В ходе работ нам удалось исправить все проблемы, заявленные заказчиком, а также выявленные в ходе анализа. Интерфейс был переработан до современного и повышена его функциональность.
Руководитель интернет-проектов и директор French Pharmacy Владимир Орестов как заказчик комментирует этот проект так:
“Благодаря вашей команде дизайнеров, верстальщиков, программистов во главе с Дмитрием Сильновым нам удалось перейти на адаптивную версию. Также мы обновили дизайн до современного и повысили степень удобства нахождения на сайте для наших клиентов с учётом накопившихся недочётов”.
Читайте полную версию отзыва French Pharmacy по этой и другим оказанным услугам.