Інтернет-магазин стріл для підводного полювання
Про проект і завдання
Сайт 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. Інтернет-магазин адаптивний і зручний не тільки у здійсненні покупок для користувачів, але й в управлінні для клієнта завдяки простій і зрозумілій адмін-панелі.
