Что значит UX/UI?

В веб-дизайне от соблюдения принципов UX и UI зависит визуальное восприятие, логика и функциональность сайта.

User Experience (UX) берёт во внимание “пользовательский опыт”, и от качества UX-дизайна зависят впечатления, которые останутся у пользователя после взаимодействия с сайтом. Если веб-ресурс понятен и логичен, если на нём легко находить нужную информацию и совершать целевые действия, то вероятность оформления заказа и новых визитов возрастает.

User Interface (UI) отвечает за пользовательский интерфейс. Сюда входит внешний вид сайта: композиция, цветовые решения, шрифты и другое визуальное наполнение. Важно, чтобы все элементы сайта сочетались друг с другом, были читаемы и эстетичны. Также именно UI-дизайн передаёт характер бренда и делает сайт узнаваемым.

О клиенте

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

Запрос клиента

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

• возникали сложности в работе сайта;
• сайт выглядел несовременно;
• функционально сайт был неудобным для пользователей;

Заказчик прокомментировал проблему так:

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

Аналитика и исследования

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

1. Обновление UI решений

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

2. Адаптация UX решений

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

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

Регистрация пользователя:

Чтобы упростить процесс и улучшить пользовательские ощущения, мы запланировали снизить количество данных до минимума.

3. Налаживание исправной работы на различных устройствах

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

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

Выводы на основе исследования

Для совершенствования функциональности и дизайна сайта предстояли следующие работы:

1. адаптация дизайна под различные экраны и типы устройств;
2. устранение трудностей во взаимодействии с ресурсом доработкой UX решений;
3. улучшение впечатлений от пользования сайтом исправлением UI решений.

Реализация проекта

После выявления проблем мы определили список необходимых действий, расставили приоритеты и командой приступили к переработке веб-продукта.

Что делали в направлении UX

UX: Доработали элементы фильтрации в каталоге

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

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

Было:

Стало:

UX: Упростили регистрацию

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

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

Было:

Стало:

Что делали в направлении UI

UI: Переработали навигацию

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

Было:

Стало:

UI: Обновили интерфейс основного меню

Для облегчения восприятия навигации мы улучшили верстку текста.

Было:

Стало:

UI: Изменили главную страницу

Для улучшения визуальной составляющей сайта мы:

• Изменили слайдер на главной странице;
• Переработали блок “хиты продаж”;
• Переработали вторичные блоки на главной странице.

Этими решениями мы усовершенствовали эстетическое восприятия сайта и избавились от ощущения посещения “старого магазина”.

Было:

Стало:

Было:

Стало:

Было:

Стало:

UI: Доработали интерфейс каталога

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

UI: Доработали карточки товаров

Обновили дизайн в карточке товара согласно дизайн-коду: минимум акцента на интерфейс при максимальном акценте на фотографии товара.

Было:

Стало:

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

Итог UI и UX доработок

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

Про адаптивную версию сайта

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

Так выглядит версия для ПК каталога товаров:

Версия для каталога товаров Ipad:

Мобильная версия каталога товаров:

Внедрение адаптивной версии сайта несёт за собой не только удобство для пользователя — такое решение ускоряет в 2 раза внедрение изменений, а также экономит до 30% бюджета на последующих доработках.

Заключение

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

Руководитель интернет-проектов и директор French Pharmacy Владимир Орестов как заказчик комментирует этот проект так:

Читайте полную версию отзыва French Pharmacy по этой и другим оказанным услугам.