Интернет-магазин стрел для подводной охоты
О проекте и задаче
Сайт Super Spear Shaft посвящён стрелам для подводной охоты и ориентирован на западный рынок. Клиент пришёл к нам с готовыми макетами за разработкой функционального, адаптивного и мультиязычного интернет-магазина. Получил ли он то, что хотел? Давайте посмотрим.
Технологическое решение
CMS WordPress
Итак, этап разработки дизайна клиент прошёл самостоятельно. От нас зависела техническая реализация проекта: вёрстка и настройка функциональности. А той силой, которая привела сайт «в движение», стала CMS WordPress. Это платформа, на основе которой работает 43% всех существующих в интернете сайтов. И этому есть множество объяснений:
- высокая безопасность и производительность,
- настраиваемый дизайн и адаптивность,
- удобное управление контентом,
- мультиязычность и мультивалютность,
- SEO-оптимизация и другие возможности для расширения функциональности сайта.
К тому же, движок совершенно бесплатный и вместе с разнообразием плагинов и интеграций значительно ускоряет разработку, и, следовательно, уменьшает её стоимость.
Дизайн и навигация
Главная страница в динамике
Заходя на главную страницу, пользователь будто попадает на глубину океана, где солнечные лучи завораживают своей игрой. Такой эффект вызывает видео, использованное в качестве бэкграунда главной страницы. Наряду с динамическим фоном «морской» логотип и стрела вдоль всего экрана подчёркивают тематику сайта и выступают дополнительными ориентирами для потенциальных клиентов. Поэтому страстные любители подводной охоты как бы оказываются в своей привычной среде.
Стрела в нижней части экрана играет также и роль разделителя, под чертой которого видим 3 главных раздела сайта: «FAQ», «Order now» и «Super Tips & Parts». Эти и все остальные разделы скрыты в бургер-меню, рядом с которым находится ссылка на личный кабинет и корзину. Как видим, запутаться на главной странице довольно сложно.
Но несмотря на всю простоту, сайт имеет весьма необычный для интернет-магазина эффект. Дело в том, что в дизайне клиента не был предусмотрен индикатор страниц, поэтому вместо привычных пользователям баннеров мы реализовали смену слайдов главной страницы по скроллу с автоматическим переключением на следующий экран через 10 секунд. Каждый из слайдов иллюстрирует основной вид товара — стрелы, подкреплённые текстом об их преимуществах.
На один из слайдов мы поместили логотипы Европейского фонда регионального развития и EAS, обозначающие, что проект Super Spear Shaft получил грант на международную патентную защиту спортивного инвентаря. При наведении курсора на логотипы слева появляется расшифровка и более подробная информация о гранте:
FAQ
Блок часто задаваемых вопросов достаточно прост: он помещается в один экран и реализован в виде раскрывающегося списка с ненавязчивыми эффектами подъёма. Пользователи могут легко найти нужный вопрос и, кликнув по нему, получить ответ:
Раздел с товарами Order now
Собственно, это основная «витрина» интернет-магазина с главными товарами — стрелами для подводной охоты. Ввиду того, что позиций на сайте немного, данный раздел поместился в один экран. Это стало возможным ещё и благодаря удобной навигации, позволяющей пользователям сразу отфильтровать товары по категориям. На выходе покупатель получает окончательную цену и переходит в корзину для оформления заказа:
Раздел Super tips & parts с комплектующими деталями
Небольшой ассортимент деталей в виде наконечников, адаптеров и переходников так же уютно расположился на одном экране. Раздел содержит наименования и цены товаров с анимированными кнопками для заказа:
Адаптивность
Благодаря адаптивности движка CMS WordPress интернет-магазин прекрасно отображается на всех устройствах. Все блоки и элементы сайта автоматически адаптируются под любой размер экрана: от смартфонов до стационарных компьютеров.
Единственное различие в том, что слайды главной страницы в мобильной версии листаются только при горизонтальном свайпе. Причина в том, что вертикальный свайп в мобильной версии недоступен: он нужен для скролла, ведь всё содержимое сайта не помещается в один экран.
Это объясняется небольшим дисплеем мобильного устройства. Отсюда и главное правило адаптивного дизайна — читабельность и удобство прежде всего:
Функциональность
Личный кабинет
Ссылка на личный кабинет («Log in») находится в шапке сайта, и при её нажатии пользователю предлагается 2 лаконичных формы: для авторизации или регистрации. Формы содержат 1-2 текстовых поля (в том числе поле проверки подлинности учётных данных) и кнопку входа, а также флажок «Запомнить меня» и пункт «Забыли пароль?»
Попадая в личный кабинет, клиент видит перед собой минималистичный интерфейс в виде панели управления («Dashboard»), где он может легко управлять своими заказами («Orders») и адресами доставки («Addresses»), а также редактировать личные данные («Account details») и покинуть учётную запись («Logout»):
Оформление заказа
Логично, что оформление заказа начинается с основной витрины товаров Order now. Мы уже затрагивали эту страницу и рассмотрели удобную навигацию с фильтрами в виде конструктора стрел. Однако чтобы реализовать простую на первый взгляд панель, нам пришлось постараться и учесть много различных переменных (класс, тип наконечников, длина, диаметр и стоимость). После того, как пользователь отфильтровал товары и сделал свой выбор, он кликает на кнопку и тем самым добавляет покупки в корзину.
Корзина и калькулятор доставки
Чтобы довести шоппинг до логического завершения, пользователь кликает на ссылку «View cart» или на кнопку корзины в правом углу меню сайта. На экране пользователь видит интерфейс с перечнем, количеством, ценой и общей стоимостью товаров. И не просто товаров, а вместе с суммой доставки.
Это стало возможным благодаря встроенному калькулятору («Сalculate shipping»), который предлагает заполнить пару полей, а затем автоматически определяет ориентировочную сумму доставки исходя из страны получателя. В итоге клиент получает общую стоимость заказа, состоящую из суммы товаров и доставки:
Корзину можно обновить (кнопка «Update cart»), а можно оформить добавленные товары с помощью кнопки «Proceed to checkout» и перейти на страницу заказа.
Страница заказа Billing & Shipping
Разрабатывая дизайн, наш клиент не предусмотрел, как будет выглядеть страница оформления заказа, поэтому данный блок сайта мы взяли на себя. В результате получилась довольно минималистичная страница с учётом общей стилистики сайта:
Страница содержит развёрнутую форму для заполнения данных, информацию о заказе, а также пункты способов оплаты в виде виджета radio buttons, предполагающий выбор одного из 3-х возможных пунктов. После заполнения всех полей пользователь кликает на кнопку «Proceed to checkout» и переходит к оплате заказа:
Интеграция с платёжной системой
Онлайн-покупки на сайте требуют подключения к платёжной системе. Мы реализовали решение платежей э-торговли с помощью банковской системы SEB, так как наш клиент уже имел счёт в этом банке. После осуществления оплаты на почтовый ящик покупателя падает уведомление о совершенном заказе:
Мультиязычность сайта
Изначально клиент нуждался в реализации мультиязычного сайта на 3-х языках: английский, немецкий и русский. Однако впоследствии было решено оставить только английский язык и временно скрыть русский с возможностью в будущем вернуть его в пакете с немецким и английским. В результате мы реализовали переключатель языков, но из-за отсутствия перевода текстов на русском и немецком временно скрыли его.
Итоги
Благодаря эффективному сотрудничеству ожидания клиента по разработке интернет-магазина аксессуаров для подводной охоты оправдались с лихвой. Мы сверстали дизайн в полном соответствии с макетам и дали сайту жизнь с помощью движка WordPress. Интернет-магазин адаптивен и удобен не только в совершении покупок для пользователей, но и в управлении для клиента благодаря простой и понятной админ-панели.
Комментарии