10 порад щодо створення прекрасної вітрини для веб-магазинів

У підприємців та роздрібних торговців, які хочуть розширитись в Інтернет-магазинах, доступні більше варіантів, ніж будь-коли, але вони також мають більше міркувань щодо веб-сайтів та технічних варіантів розшифровки. Побудова ефективного веб-магазину все ще має постачальників "під ключ", таких як магазини Wix, які дозволяють швидко і просто вискочити вашу первинну присутність. Але ті, хто по-справжньому серйозно ставиться до розширення свого інтернет-бізнесу, виявлять, що їх потреби розвиваються поза цими послугами під ключ досить швидко.

Є багато питань, на які потрібно відповісти спочатку, перш ніж щось з'явиться в кіберпросторі, а потім набагато більше, ніж бізнес дозріє. Збір даних про покупців - чудовий приклад та головне питання сьогодні, особливо для будь-яких магазинів, які бажають отримати доступ до європейських ринків. Конвертація валют та різні закони про електронну комерцію все ще залишаються важкими проблемами на цих ринках, але тепер вам також доведеться розібратися із Загальним регламентом захисту даних (GDPR), який вимагає набагато більш ретельного процесу обробки даних про клієнтів.

Безпека транзакцій - це ще одне ключове питання, оскільки це означає, що потрібно збалансувати потребу в безпеці клієнта з кількістю обручів, які вам знадобляться, щоб перескочити, перш ніж вони зможуть зробити покупку. І незалежно від того, які рішення ви приймаєте для свого стандартного веб-сайту, вам потрібно буде провести ті ж самі дискусії щодо його мобільної ітерації. Тому що, хоча мобільність, безумовно, була однією з минулорічних улюблених лайків, додаткові 12 місяців жодним чином не зменшили її значення.

Поточне мислення означає, що веб-розробники повинні спершу спроектувати мобільний досвід, а потім адаптувати робочий стіл за потребою.

"Кожен елемент, кожен фрагмент вмісту повинен бути функціональним для мобільних пристроїв", - сказав Джиммі Родрігес, головний операційний директор (3d-картка). "Якщо ви починаєте з нуля, ви розробляєте для мобільних пристроїв. Завдяки чуйному дизайну ви можете створити веб-сайт для запуску з мобільних пристроїв, а потім перенести його на робочий стіл."

Щоб допомогти вам створити вітрину електронної комерції як для мобільних, так і для настільних користувачів, ми зібрали 10 важливих порад нижче. Однак Родрігес рекомендує, перш ніж підприємства включити будь-який із них у свої вітрини, вони повинні перевірити ці функції на певних сторінках товарів, щоб побачити, як вони діють, перш ніж розгорнути їх на весь свій веб-сайт.

1. Клейка навігація по заголовкам

Ми всі були там: ми прокручували донизу сторінку продукту, щоб прочитати відгуки користувачів або деталі продукту, і тепер ми готові залишити сторінку, щоб повернутися до меню, щоб продовжити наш похід по магазинах. На жаль, для того, щоб повернутися до меню, нам зазвичай доводилося натискати кнопку "Page Up" на клавіатурах настільних ПК або натискати у верхній частині екрана на наших мобільних пристроях.

З допомогою липких заголовків під час прокрутки вниз меню змінюється розмір і коригується. Меню простежує вас під час вашої подорожі, щоб зберегти навігацію на екрані, якщо вам потрібно швидко перейти на сторінки. Ви можете це побачити на сайті Bose.com. Незважаючи на те, що перебуваєте на середині сторінки, ви все одно можете отримати доступ до основної навігації сторінки, не повертаючись до верхньої частини екрана.

2. Меню гамбургера

Хоча меню Hamburger звучать як функція, найкраще підходить для ресторанів швидкого харчування, вони швидко стають необхідними для компаній, які роблять багато бізнесу на мобільних пристроях. Ви їх бачили і раніше: Меню Hamburger стали стандартним мобільним значком для мобільної навігації та меню.

Вони містять три горизонтальні лінії, які при натисканні пропонують випадаюче меню навігації веб-сайту. Вони особливо корисні на мобільних пристроях, де екранна нерухомість переважає. Але ми починаємо їх бачити і на веб-сайтах настільних ПК, тому споживачі мають подібний досвід на веб-сайтах компанії незалежно від пристрою, який вони використовують.

"Дуже багато людей бачать меню Гамбургера, і вони знають, що це означає, але вони не знають, що це в основному новий стандарт", - сказав Родрігес. "Мобільні відвідувачі дізналися значення цього символу, а веб-сайти повинні сприймати його як стандарт для мобільної навігації".

Меню Hamburger можна побачити у правому верхньому куті Target.com та на мобільному веб-сайті Target. Ви також можете побачити її на фото нижче.

3. Паралельна прокрутка

Менше функціональних можливостей і більше способів поліпшити естетику вашого веб-сайту, Parallax Scrolling використовує великі банери, які сповнені зображень високої роздільної здатності, щоб додати художній колорит до вашого веб-сайту. Скориставшись великими зображеннями на повну ширину, ви можете створити ефект зміщення між фоновим зображенням вашого веб-сайту та зображенням, яке знаходиться безпосередньо перед вашим споживачем.

Як ви бачите на зображенні нижче від RimmelLondon.com, під час прокручування сторінки фонові зображення веб-сайту змінюються. Однак зміна відбувається тонко, коли фонові та фонові зображення змішуються між собою. Знимок екрана нижче показує веб-сайт прямо в той момент, коли фонове зображення змінюється від фіолетового на рожеве.

4. Нескінченна прокрутка

Нескінченна прокрутка звучить більше як техніка катування, ніж функція електронної комерції. Однак цей чудовий інструмент дозволяє вашим користувачам постійно переглядати нові продукти, не потребуючи натискання та завантаження нової сторінки. Ось як це працює: Коли ви прокручуєте вниз до нижньої частини сторінки електронної комерції, сторінка автоматично завантажує більше елементів у нижній частині сторінки. Вони все ще каталогізовані як сторінки на звороті, але відвідувач цього не знає.

Ви можете побачити подібну функцію на UnderArmour.com. На жаль, "Under Armor" вимагає натиснути кнопку "Завантажити більше", щоб побачити додатковий вміст. Деякі веб-сайти оснащені механізмом автоматичного відкриття, який покаже вам більше вмісту, не вимагаючи клацання.

5. Плаваюча кнопка "Додати в кошик"

Подібно до інструменту навігації Sticky Navigation, плаваючі кнопки "Додати в кошик" дозволяють вашим споживачам додавати товари в кошик, незалежно від того, де вони знаходяться на сторінці товару. Раніше користувачі прокручували б відгуки користувачів, деталі продукту та інші елементи нижньої сторінки, а для того, щоб додати товар у свій кошик, їм доведеться прокручувати назад до верхньої частини сторінки. Тепер такі компанії, як Diesel.com, дозволяють побачити ціну, кількість, параметри кольору та зображення товару, а також кнопку "Додати в кошик", незалежно від того, де ви знаходитесь на сторінці товару.

6. Використовуйте закон Фітта

Ми не набриднемо вам математикою, що лежить у законі Фітта, але це, по суті, теорія, що чим більший і ближчий нам предмет, тим більше шансів на те, щоб ми з ним взаємодіяли. Той самий основний принцип може бути застосований до електронної комерції. Якщо ви хочете направляти користувачів на сторінки товарів, кошики для покупок та акції, тоді вам слід зробити ці кнопки великими, барвистими та максимально наближеними до центральної середини сторінки.

Якщо ви ігноруєте закон Фітта і розміщуєте крихітні, чорно-білі кнопки уздовж рейок або внизу сторінок, то ви можете втратити потенційних покупців. Не робіть цієї помилки.

7. Відобразити відгуки та відгуки клієнтів

Ви не хочете, щоб клієнти відвідували ваш веб-сайт, переглядали ваші товари, а потім відправлялися на Amazon.com, щоб перевірити відгуки користувачів. Зрештою, Amazon.com може продати товар дешевше, або клієнт може віддати перевагу покупок Amazon.com вашому веб-сайту.

Якщо ви надаєте своїм клієнтам можливість оцінювати та переглядати товари, ви зможете відстояти тих обережних клієнтів, яким потрібна впевненість у думках інших споживачів, перш ніж здійснити покупку. Більшість інструментів електронної комерції роблять рейтинги та огляди простими у застосуванні, тому не цурайтесь впровадження цієї практики.

8. Ефективна служба обслуговування клієнтів

Взаємодія з вашим клієнтом є критично важливим для успіху роздрібної торгівлі, і ніде це не простіше чи ефективніше, ніж у відділенні обслуговування клієнтів. Догляд за розлюченим, незадоволеним або навіть просто заплутаним клієнтом - один з найнадійніших шляхів для повторення бізнесу. Сьогоднішній сервісний стіл та додатки довідкової служби спрощують його як ніколи. Використання одного з цих додатків не лише впорядковує запити клієнтів, але також дозволяє збирати дані клієнтів та відповіді, які ці зустрічі генерують та передають їх вашим системам управління відносинами з клієнтами (CRM), маркетингу та бізнес-аналітиці. Це дозволяє вам уважніше стежити за тим, що думають клієнти про ваш магазин та його продукцію.

Там, де ви розміщуєте якірні сервісні зв’язки та точки дотику, важливо для загального досвіду роботи з клієнтами. Незалежно від того, чи ця взаємодія має форму простої сторінки контактів, чи йде так далеко, щоб відкрити вікно чату з будь-ким, хто залишається на веб-сайті більше 60 секунд, це щось, що залежить від типів продуктів, які ви продаєте, та середня статистика відвідувань веб-сайту для вашого магазину.

Але успіх роботи служби обслуговування клієнтів - це більше ніж програмне забезпечення. Ви повинні переконатися, що хтось професіонал є для вирішення цих запитів, або це марно витрачена інвестиція. Клієнти, які зіткнулися з проблемою, натиснувши кнопку "Звернутися до служби підтримки клієнтів", сподіваються отримати допомогу від реальної людини. Ви можете керувати цим за допомогою телефону або за допомогою миттєвого чату - функції, яка стає все частішою у постачальників служб довідкової служби. І якщо ви прив’язані до персоналу, ви можете передати роботу з обслуговування клієнтів інтелектуальними чатовими роботами, які "звучать" по-людськи, одночасно вміючи обробляти низку вхідних запитів на базовому рівні, передаючи лише більш складні запити фактичним гомосексуалістам sapiens.

9. Хлібний замок

Коли клієнти виїжджають з вашого магазину, вони люблять знати, де вони знаходяться в процесі, як далеко від їх закінчення та як легко повернутися назад, не втрачаючи всіх даних, які вони вже ввели. Breadcrumb Checkout показує клієнтам, де саме вони перебувають у процесі, використовуючи лінійну кнопку навігації, яка дозволяє споживачам клацати вперед і назад від входу, опцій оплати, опцій доставки, замовлення замовлень або продовжувати покупки. Без цього макета споживачі можуть натиснути кнопку "Назад", побачити, що їх інформація не реєструється, засмучується, а потім залишають веб-сайт.

10. 360-градусні види

Коли-небудь купувати, здавалося б, скромний піджак в Інтернеті, тільки щоб зрозуміти, що він отримав облягаючий страз назад? Що ж, повернувши цей товар, ви витратили свій власний час і час продавця, і коштуєте компанії гроші. Не хвилюйся, це не твоя вина. Більш ніж ймовірно, продавець мав лише зображення спереду та збоку куртки. Якби продавець запропонував зображення на 360 градусів, ви помітили б ці стрази і натиснули кнопку Скасувати замовлення.

Не робіть цієї самої помилки на власному веб-сайті. Окрім того, щоб дозволити клієнтам збільшувати зображення, надайте їм можливість обертати чи переглядати кілька кутів зображення, як це робить Kenneth Cole.com. Таким чином, вони не здивовані, коли вони відкривають коробку доставки і витягують товар, якого вони не очікували.