Давайте соберем сайт цветочного магазина. По шагам и с примерами.
При создании поставим себя на месте покупателя: будет ли ему удобно и понятно сделать заказ на странице. Совместно с нашим партнером системой автоматизации и управления цветочным бизнесом Posiflora пройдемся по юзабилити существующих сайтов и разберемся, какие решения в 2020 году устарели.
Каждый элемент сайта должен отвечать главной цели – заинтересовать клиента и сделать его путь к покупке максимально простым и коротким. В этом случае у сайта будет высокая конверсия в реальную итоговую покупку через площадку. Если же сайт просто красивый, но неудобный и неинформативный, то в лучшем случае клиент позвонит и заедет лично, в худшем – закроет страницу.
1 блок: Header
Навигация
В хедере размещаем основную навигацию. Простая и удобная навигация — важный элемент сайта, так как позволяет оценить разделы магазина и ассортимент. Чем лучше сделан этот элемент, тем больше шансов, что клиент найдет нужный товар. Не стоит думать, что поиск заменит удобную навигацию. Сделать пару кликов проще, чем придумать и ввести поисковый запрос.
Добавляем основные разделы: каталог, категории товаров, контакты, раздел «о нас», доставка и оплата, корзина, избранное и личный кабинет, если есть.
Пример неудачного хедера
Сборная солянка: забитый нечитаемый блок, шапка содержит чересчур много информации и иконок. Пользователь растеряется в навигации.
Пример удачного хедера
Интуитивно понятный хедер. Простой в навигации, с указанием главных разделов сайта.
Блок 2: наполнение сайта
Главная
Под хедером размещаем первый экран с промо-предложением и красивой графикой. Визуал цветочных сайтов – главный продающий инструмент. Клиенты сразу же закроют страницу, если их быстрый взгляд не оценит содержимое первого экрана.
На этом сайте неудачный «первый экран». Визуал изображения устарел, на баннере отсутствует кнопка «call to action». Например, такая как «перейти в каталог» или «узнать больше».
На другом примере сайта удачный «первый экран». Минималистичный визуал, промо на баннере с кнопкой «выбрать» для перехода в каталог.
Каталог
Каталог – главный раздел на сайте, от которого зависит дальнейшая покупка клиента. Понятный и наглядный рассказ об ассортименте увеличит конверсию продаж.
Если ваш магазин может похвастаться многообразием выбора, это хорошо. Но читаемый каталог еще лучше. Все смешалось в доме цветочном: здесь и цветы по знаку зодиаку, и товары для сада, и ритуальные венки.
Если позиции из каталога отсутствуют – уберите лишние элементы. Они только «засоряют» раздел.
Пример удачного каталога. Понятное деление на категории: по цене, размеру, цветам. Там же дополнительные опции: упаковка и возможность сконструировать свой букет.
Карточка товара
Карточка товара должна быть информативной и отвечать на вопросы покупателя: цена, скидка, состав. Размещайте изображения букетов так, чтобы клиент мог рассмотреть букет, не заходя в товар. Дополнительные ракурсы будут плюсом: крупнее, букет в руках, макросъемка. Это поможет принять решение о покупке без лишних кликов.
Визуал и юзабилити отдельной карточки товара не менее важен. Такая карточка выглядит забито и нечитаемо: текст полотном и обилие информации.
Карточка со всем нужным: изображением товара, описанием, ценой, количеством товара и возможностью добавить в корзину. Выглядит понятно и просто для покупателя.
Корзина
Корзина – это предпоследняя «остановка» пользователя перед оплатой. Главное, что покупатель должен увидеть, – выбранный букет, цену и кнопку «оформить заказ».
Чем проще, тем лучше. Вы можете добавить призыв к допродажам, как в прикассовой зоне в офлайн, но аккуратно. Не так, чтобы пришлось напрягать глаза в поисках нужной кнопки.
Пример удобной корзины. Размещены все важные элементы, в том числе блок с доппродажами и поле для входа в личный кабинет. Страница выглядит просто для пользователя, с интуитивно понятной навигацией.
Оформление заказа: доставка и оплата
Финишная прямая покупателя. Главная задача раздела – обеспечить быструю и простую форму для оплаты и доставки.
Неудачная форма заказа
Описание доставки сплошным полотном, c лишними деталями. Длинная форма «оформления заказа».
Удачный пример формы заказа
Понятное и простое описание доставки. Подробная форма оформления заказа, при этом лаконичная и структурированная.
3 блок: Footer
Завершающий блок сайта. В подвале страницы размещаем: разделы сайта, карту сайта, политику конфиденциальности, контакты, ссылки на соцсети.
В футере не допускаем двух ошибок: отсутствие логики и нечитаемости. Например, как на этом сайте. Все вперемешку: под контактной информацией сразу же идет «навык от Алисы» и рейтинг в Яндексе.
Еще один пример неудачного футера. Неоднородный фон, на котором с трудом читается текст.
Совершенствуйте юзабилити путем проб и ошибок. Анализируйте показатели с помощью сторонних сервисов, например: Вебвизор от Яндекс или Google Analytics. Это поможет отследить и выявить уязвимые места сайта. Собирайте небольшие фокус-группы для устранения недочетов. Это могут быть ваши друзья или родственники, которые раньше не заходили на сайт. Отмечайте удачные решения и избавляйтесь от спорных. Со временем вы создадите удобный для клиентов инструмент вашего бизнеса.
А если вы хотите больше знать о ведении цветочного бизнеса –подписывайтесь на блог https://posiflora.com/blog/
