Редизайн и улучшение UI/UX интернет-магазина «Четыре глаза»
Онлайн-проект компании Levenhuk
Редизайн и улучшение UI/UX интернет-магазина «Четыре глаза»
Онлайн-проект компании Levenhuk
4glaza.ru — интернет-магазин, принадлежащий ПАО «Левенгук». В каталоге представлен огромный выбор товаров: любительские и профессиональные микроскопы, телескопы всех известных оптических схем для новичков и опытных астрономов, бинокли, приборы ночного видения и прицелы, лупы, лазерные дальномеры и зрительные трубы. В магазине есть отдельная линейка измерительных приборов под брендом Ermenrich о котором мы рассказывали в одном из наших кейсов.
«Четыре глаза» — это международная сеть магазинов, существующая с 2002 года. В Европе она имеет собственное имя «Zoom'n'Joy». Магазины расположены в России, странах СНГ, Европе, Азии и Северной Америке. Оптическая техника бренда Levenhuk также представлена на крупнейших торговых интернет-площадках.
«Четыре глаза» — это международная сеть магазинов, существующая с 2002 года. В Европе она имеет собственное имя «Zoom'n'Joy». Магазины расположены в России, странах СНГ, Европе, Азии и Северной Америке. Оптическая техника бренда Levenhuk также представлена на крупнейших торговых интернет-площадках.
Интернет-магазин работает с 2002 года. С тех пор развитие интернет-технологий и e-com шагнуло далеко вперед. В ритейле выросла конкуренция, поисковые системы и покупатели стали более требовательными к качеству контента и дизайну. Последние всё чаще используют мобильные устройства для поиска, сравнения и покупок.
Проведенные исследования подтверждают, что получение негативного пользовательского опыта (UX), как и неудовлетворённость пользовательским интерфейсом (UI) сайта, для подавляющего большинства является весомым аргументом, чтобы перестать его посещать.
Проведенные исследования подтверждают, что получение негативного пользовательского опыта (UX), как и неудовлетворённость пользовательским интерфейсом (UI) сайта, для подавляющего большинства является весомым аргументом, чтобы перестать его посещать.
Цифры говорят сами за себя.
- 70%Доля населения, имеющая мобильный телефон
- 62%Доля мобильного трафика
на e-com платформы - 78%Доля пользователей, совершающих онлайн-покупки с мобильных устройств
- 80%Уровень отказов от покупок с мобильных устройств из-за недостаточной адаптации сайтов под мобильные экраны
- 67%Пользователей уходят с платформы, если «кнопки и ссылки слишком маленькие»
- 44%Доля пользователей, сравнивающих товары и цены на мобильных устройствах перед покупкой
UI
UX
Маркетинговые метрики и финансовые результаты иногда дают повод проверить то, как воспринимают сайт его посетители, ведь UX/UI оказывает влияние на настроение человека и его способность принимать решение о покупке.
B2B-cайты часто имеют простой и лаконичный стиль с минимумом ярких деталей и анимации. Но интерфейс здесь более сложный, так как он обслуживает специфичную бизнес-логику. Специалисту по закупкам неважно насколько детально можно рассмотреть клеточные структуры через микроскоп. Ему важна маржинальность, известность бренда, процент брака и другие показатели.
Эффективный B2C-сайт, наоборот, должен вызывать у посетителя эмоциональный отклик. Он должен видеть, как будет решена его задача и каким будет желаемый результат.
B2B-cайты часто имеют простой и лаконичный стиль с минимумом ярких деталей и анимации. Но интерфейс здесь более сложный, так как он обслуживает специфичную бизнес-логику. Специалисту по закупкам неважно насколько детально можно рассмотреть клеточные структуры через микроскоп. Ему важна маржинальность, известность бренда, процент брака и другие показатели.
Эффективный B2C-сайт, наоборот, должен вызывать у посетителя эмоциональный отклик. Он должен видеть, как будет решена его задача и каким будет желаемый результат.
«Четыре глаза» до редизайна
Так выглядела мобильная версия интернет-магазина.
Для своего времени это был отличный дизайн.
Для своего времени это был отличный дизайн.
Не только дизайн ограничивал возможности команды, которая управляла онлайн-магазином. Администрирование веб-проектов обычно строится на базе какой-либо из CMS-систем, а у «Четырех глаз» её не было. Обмен шёл на php-скриптах, которые выгружали товары и цены из 1С на сайт, загружали обратно заказы, синхронизировали их статусы и делали много другой важной работы. Контент (описания, фотографии товаров, видео-обзоры, статьи и т.д.) готовили и загружали в БД Postgre вручную, откуда их забирала 1С и передавала на сайт при очередной синхронизации.
Это трудоемкий и затратный процесс, особенно если продажами нужно активно управлять. Поэтому внедрение CMS — хороший способ сделать такую работу проще и эффективнее. Например, для организации новой маркетинговой активности не нужно каждый раз привлекать программиста, т.к. в CMS уже есть готовые блоки которые можно настраивать, а потом использовать повторно. С ней удобно автоматизировать процессы, сокращая объемы ручного труда, обеспечивать удобство использования сайтом со всех устройств, быстрее и бюджетнее интегрировать новый функционал и сервисы.
Это трудоемкий и затратный процесс, особенно если продажами нужно активно управлять. Поэтому внедрение CMS — хороший способ сделать такую работу проще и эффективнее. Например, для организации новой маркетинговой активности не нужно каждый раз привлекать программиста, т.к. в CMS уже есть готовые блоки которые можно настраивать, а потом использовать повторно. С ней удобно автоматизировать процессы, сокращая объемы ручного труда, обеспечивать удобство использования сайтом со всех устройств, быстрее и бюджетнее интегрировать новый функционал и сервисы.
Наша задача
Предыдущая версия интернет-магазина была создана в эпоху веб-античности. Скорость интернета и возможности HTML тогда сильно ограничивали дизайнеров и разработчиков. За более чем 20 лет компания шагнула далеко вперед, но движок и внешний вид магазина практически не изменились. Чтобы двигаться дальше, наращивать прибыль и акционерную стоимость нужно было модернизировать один из важных каналов продаж.
Ранее был кардинально обновлен дизайн другого проекта компании Levenhuk — сайта для B2B-клиентов. Предстояло взять его механику за основу и адаптировать под особенности розничного магазина, осовременив внешний вид и формат. Параллельно требовалось внедрить систему управления контентом, заново настроив интеграции с учетной системой и внешними сервисами.
Ранее был кардинально обновлен дизайн другого проекта компании Levenhuk — сайта для B2B-клиентов. Предстояло взять его механику за основу и адаптировать под особенности розничного магазина, осовременив внешний вид и формат. Параллельно требовалось внедрить систему управления контентом, заново настроив интеграции с учетной системой и внешними сервисами.
Этапы работ
1
Разработка дизайна
Дизайн не менялся с начала 2000-х, поэтому резких движений в стилистике решили не делать. Тренды важны, но магазина должен оставаться понятным широкой аудитории. Поработали над дизайном и функциональностью: разгрузили пространство, сделав его легче и прозрачнее, обновили типографику, пересмотрели структуру страниц, оптимизировали сценарии и навигацию.
2
Верстка макета
Оживить статичный макет в html — работа не сложная, но требует внимательности. Основная задача на этом шаге — обеспечить корректное отображение сайта на различных устройствах и в браузерах. Так как макет розничного магазина накладывался на структуру и функционал оптового, то возникало множество нюансов при адаптации элементов верстки, а что-то пришлось создавать с нуля.
3
Тестирование
Мало сверстать дизайн, сделать code review, прогнать через тестировщика, менеджера проекта и представителя заказчика. Нужен еще и «человек без опыта», который обратит внимание на вещи, которые дизайнеру и разработчику кажутся очевидными и рабочими, но в реальности негативно отражаются на конверсии. Благодаря ему удалось вовремя поправить более 20 разного рода недочетов на front/back и спасти конверсию.
4
Интеграция с 1С
В качестве учетной системы интернет-магазин использует значительно переработанную 1С. Интеграция предполагала частичную доработку панели администрирования, методов выгрузки контрагентов, складов, товаров, цен, заказов из 1С на сайт, методов обмена статусами, а также другие точечные доработки. Все изменения требовалось задокументировать.
5
Настройка интеграции с сервисами доставки и платежной системой
Быстрая доставка — важное преимущество любого магазина. Чтобы покупатель остался доволен покупкой процесс должен быть простым и легким. Обеспечить такую легкость не всегда просто. Нужно связать способы оплаты со способами доставки, транспортными компаниями, курьерскими службами, платежными системами, 1С, настроить рассылку уведомлений и чеков в условиях мультиязычности.
6
Перенос SEO-атрибутов
Каждая страница сайта имеет собственный URL, title, description, оптимизированный текст. Всё это предстояло проверить на ошибки и аккуратно перенести на новую версию, сохраняя микроразметку, вес страниц, редиректы и перелинковку. Иначе могли пострадать внутренние технические и контентные факторы, влияющие на ранжирование.
При проектировании макетов придерживались классических паттернов дизайна e-commerce.
Например, ознакомление с каталогом — одно из целевых действий. Одновременно каталог и поисковая строка — основные методы поиска товаров. В идеальном мире они должны быть заметны и располагаться рядом, элементы каталога не должны слипаться во избежание ошибочных кликов. Вход в каталог должен быть один.
В старой версии поисковая строка была очень маленькой, а каталог — списком категорий, расположенных в линию. В середине страницы он дублировался в виде номенклатурной сетки.
Новый каталог — это удобная навигация по всем группам товарных категорий, а строка всегда на виду и умеет искать по большему количеству атрибутов.
Например, ознакомление с каталогом — одно из целевых действий. Одновременно каталог и поисковая строка — основные методы поиска товаров. В идеальном мире они должны быть заметны и располагаться рядом, элементы каталога не должны слипаться во избежание ошибочных кликов. Вход в каталог должен быть один.
В старой версии поисковая строка была очень маленькой, а каталог — списком категорий, расположенных в линию. В середине страницы он дублировался в виде номенклатурной сетки.
Новый каталог — это удобная навигация по всем группам товарных категорий, а строка всегда на виду и умеет искать по большему количеству атрибутов.
Каталог и поисковая строка
Дизайн
Примеры страниц ДО и ПОСЛЕ
Каталог
Раньше
Сейчас
Группа номенклатуры
Раньше
Сейчас
Страница медиаконтента
Раньше
Сейчас
Маркетинговые акции
Раньше
Сейчас
Тестирование UI/UX
При разработке дизайна можно полагаться исключительно на свой опыт и проверенные временем практики, но часто этого бывает недостаточно. Индикатором, говорящим о наличии проблем с интерфейсом и работой компонентов, являются маркетинговые метрики. Например, конверсия из корзины в заказ. Если после редизайна конверсия снижается, то это может намекать на наличие причин, мешающих пользователю завершить покупку.
Посмотрите примеры ошибок, которые могли бы испортить конверсию, но у них не получилось. Звёзды — показатели критичности недочетов для поведенческих факторов и конверсии.
Посмотрите примеры ошибок, которые могли бы испортить конверсию, но у них не получилось. Звёзды — показатели критичности недочетов для поведенческих факторов и конверсии.