Веб-дизайн електронного магазину: обґрунтування типографіки
Швидке завантаження? Перевірено! Проста навігація? Перевірено! Переконливі кнопки із закликом до дії? Перевірено! Високоякісні зображення продукту? Перевірено! Потужний вміст продукту? Перевірено! Захищений процес виїзду? Перевірено!
Типографіка? Справді?! Чи має значення типографіка? – Питання, яке виникне в голові багатьох підприємців електронної комерції, які готові відкрити свій магазин онлайн.
Відповідь «ТАК» – і ця стаття доведе вам цей факт!
В ідеалі підприємці-новачки в електронному магазині сповнені завзяття та ентузіазму, щоб перетворити свій звичайний магазин на прибутковий онлайн-бізнес. Поспішаючи побачити, як їхні веб-сайти запрацюють, багато з цих підприємців можуть просто зосередитися на більших і ширших питаннях; ігнорування деяких невеликих, але дуже впливових елементів дизайну, таких як типографіка.
Але справа в тому, що типографіка є одним із найважливіших елементів веб-дизайну, ігнорування якого може негативно вплинути на доходи.
Отже, давайте перейдемо до дрібниць типографіки, щоб зрозуміти її важливість і вплив на продажі в електронному магазині:
Типографіка: що це саме?
Ось визначення Wiki :
«Типографія — це мистецтво й техніка впорядкування шрифтів, щоб зробити письмову мову розбірливою, читабельною та привабливою під час відображення. Розташування шрифту передбачає вибір гарнітури, розміру в пункті, довжини рядка, міжрядкового інтервалу (літерину) та міжлітерного інтервалу (відстеження), а також налаштування інтервалу між парами літер (кернінг)».
Вплив типографіки на взаємодію з користувачем
Типографіка розмовляє з вашими відвідувачами.
Люди дивляться на вашу домашню сторінку в цілому, скануючи текст, тип шрифту, розмір літер і довжину рядків. Тепер, якщо вони не знайдуть ваш вміст читабельним, вони негайно покинуть сайт і перейдуть на сайт вашого конкурента. Це не свідоме рішення. Але дизайн сайту (що включає тип, розмір шрифту, колір і пробіли) спонукає їх це зробити.
Було проведене дослідження, яке доводить той факт, що шрифти мають великий вплив на те, як ми обробляємо інформацію. Одне дослідження було проведено лауреатом премії «Оскар» документалістом Ерролом Моррісом під назвою «Ви оптиміст чи песиміст?» У цьому цікавому дослідженні він виявив, що читачі з більшою ймовірністю довірятимуть твердженню, написаному шрифтом Baskerville, ніж поданому будь-яким іншим шрифтом, таким як Georgia, Comic Sans, Computer Modern, Helvetica або Trebuchet.
З цього дослідження чітко видно, що просто мати сторінки, багаті ключовими словами, або якісний вміст (опис продукту, зображення продукту та відео про продукт) недостатньо для збільшення продажів; але не менш важливо мати правильний тип і розмір шрифту у вашому веб-магазині.
Вибір правильної типографіки забезпечить виняткову взаємодію з користувачем для ваших відвідувачів. Це допоможе надовго утримати увагу відвідувача; переконайтеся, що відвідувачі повністю зосереджені на продуктах/послугах, які ви пропонуєте. Концентрована увага допоможе вам збільшити продажі.
Вплив типографіки на рейтинг Google
Пошуковий алгоритм ранжування Google враховує майже 200 сигналів, щоб ранжувати веб-сайт. Типографіка наразі не отримала місця в цьому списку факторів ранжирування. Отже, вибір правильного гарнітури та розміру шрифту безпосередньо не допоможе вам зайняти високі позиції в результатах пошуку.
Однак усі веб-дизайнери електронних магазинів добре усвідомлюють той факт, що надання відвідувачам хорошого досвіду користувача допоможе їм отримати вищі позиції в Google порівняно з веб-сайтами, які мають низький рівень взаємодії з Інтернетом. Зі згаданого вище було зрозуміло, що типографіка відіграє важливу роль у забезпеченні хорошої взаємодії з користувачами. Отже, рівняння тепер таке:
Ось Стів Джобс на друкарні
Ось що Стів Джобс, по праву відомий як хрещений батько шрифтів, сказав про типографіку в одній із найнадихаючіших промов, які він виголосив у Стенфордському університеті:
Фактори, які слід враховувати перед вибором типографіки
Тепер, коли ми знаємо вплив типографіки на коефіцієнти конверсії, давайте поглибимося, щоб зрозуміти, як ви можете приймати рішення, пов’язані з типографікою:
Немає єдиної формули типографіки, яка б працювала для всіх електронних магазинів. Це залежить від деяких важливих факторів, таких як цільова аудиторія, імідж вашого бренду, галузь, до якої належить ваш бізнес, чи є це компанія B2B чи B2C, продукти/послуги, які ви хочете продавати, і повідомлення, яке ви хочете донести до своїх відвідувачів. Критична оцінка всіх цих факторів допоможе вам вибрати правильну типографіку для вашої фірми.
Наприклад, компанія B2B повинна використовувати такі шрифти, як sans serif, які допомагають їй завоювати повагу та довіру в цифровому просторі. Yapstone, постачальник послуг онлайн-платежів, наприклад, використовує шрифт Gotham, який надає бренду гідного довіри іміджу. Gotham навіть використовувався в агітаційних матеріалах Барака Обами на президентських виборах 2008 року.
Джерело: Yapstone.com
З іншого боку, електронний магазин, який продає дитячі товари, як-от одяг чи іграшки, повинен обирати шрифти, які створюють відчуття гри та веселощів. Подивіться, як Childrensplace вдається завоювати наші серця своєю типографікою:
Джерело: Childrensplace.com
Ще один важливий фактор, який необхідно враховувати, це мобільна аудиторія. Оскільки все більше і більше людей переходять на електронну комерцію, вам потрібно пам’ятати про мобільну аудиторію, перш ніж зосередитися на типографіці.
Одним словом, після ретельного аналізу вищезазначених факторів виберіть типографіку, яка правильно відповідає іміджу вашого бренду.
Елементи типографіки
Зрозуміло, що типографіка покращує враження від відвідувачів. Тут я детально описав кілька елементів типографіки, щоб покращити звичайний рейтинг вашого сайту та покращити взаємодію з користувачем:
колір:
Колір є одним із найважливіших елементів типографіки. Правильний колір привертає увагу відвідувачів, і в той же час погані кольори на домашній сторінці підвищать показник відмов вашого сайту.
Багато популярних веб-сайтів, таких як Skype, WordPress, Twitter, LinkedIn, використовують синій колір на своїй домашній сторінці. Однією з головних причин цього є те, що синій колір символізує надійність і чесність. Тому для веб-дизайнерів життєво важливо мати глибоке розуміння психології кольору та його впливу на конверсії електронної комерції. В експерименті Monetate виявив, що сині CTA перевершують помаранчеві CTA на 9%.
Джерело: Monetate.com
Однак ми бачили, як Amazon, найбільший роздрібний продавець електронної комерції в світі, має помаранчеві CTA на своїх сторінках продуктів. Тому бажано не проводити узагальнених експериментів і вибрати найкращий колір, який підходить для іміджу вашого бренду та приверне увагу.
Довжина рядка та міжрядковий інтервал:
Занадто довгі або занадто короткі лінії виглядатимуть не естетично. Середня довжина рядка становить 45-90 символів, включаючи пробіли.
Міжрядковий інтервал — це відстань між двома рядками тексту. Рекомендований міжрядковий інтервал становить від 120% до 145% від розміру шрифту.
Пробіл:
Пробіли надають елегантного вигляду макету вашого веб-сайту. Сторінка продукту, яка захаращена всією інформацією про продукт, як-от опис продукту, зображення, відео та заклики до дії, конвертуватиме менше порівняно зі сторінкою продукту з невпорядкованою інформацією про продукт. Крім того, це дозволяє онлайн-покупцям легко знайти потрібну інформацію про продукт.
Правильно використовуйте пробіли, щоб зробити ваші сторінки продуктів візуально приголомшливими.
Розмір і тип шрифту:
Шрифти відіграють важливу роль у читабельності вмісту. Важкочитані шрифти відвернуть ваших відвідувачів. Крім того, правильні гарнітури спонукатимуть відвідувачів виконати бажану дію.
Виберіть той, який є читабельним, сумісним з усіма браузерами та розмірами екрану, а також той, який найкраще відповідає іміджу вашого бренду. Не використовуйте більше 2 гарнітур. Виберіть один шрифт для заголовків і інший для опису продукту.
Маленькі або дрібні шрифти забирають більше часу на читання і тому можуть негайно відштовхнути відвідувачів веб-сайту. Тому переконайтеся, що розмір шрифту достатньо великий, щоб відвідувачі могли легко читати вміст.
Хоча ідеального розміру шрифту чи гарнітури для дизайну електронної комерції не існує, емпіричне правило полягає в тому, щоб вибрати той, який робить його читабельним, відповідає іміджу вашого бренду та відповідає продуктам, які ви продаєте.
Наприклад, як ви думаєте, який із 3 наведених нижче шрифтів справлятиме враження надійності та достовірності для онлайн-магазину медичних препаратів?
Неважко здогадатися, що дизайнери медичних інтернет-магазинів зупинять свій вибір на шрифті Arial.
Оцініть ефективність своєї типографіки
Ви встановили гарнітуру, розмір шрифту, кольори ваших CTA та всі інші елементи дизайну вашої типографіки. Але чи працює це на вашому веб-сайті електронної комерції?
Найкращий спосіб дізнатися, чи працює вибрана типографіка для вашого електронного магазину чи ні, це провести A/B спліт-тестування. Багато власників інтернет-магазинів стверджують, що у них немає часу на тестування типографіки. Хіба це не те саме, що сказати: «Я не встигаю зупинитися, щоб заправити, тому що я зайнятий за кермом»? (Аналогія взята з бестселера Робіна Шарми – «Чернець, який продав свій Ferrari») Зрештою ви заплатите за це ціну; і постраждалі показники: кількість відвідувачів, показник відмов і коефіцієнт конверсії.
З іншого боку, тестування дасть вам зрозуміти, чи справляє вибір кольорів, типу шрифту, розміру шрифту, накреслень і пробілів бажаний вплив на ваші продажі чи ні. Експериментуйте та подивіться, що найкраще підходить для вашої цільової аудиторії!
Загортання
Типографіка є ключовим інгредієнтом у рецепті веб-дизайну електронної комерції. Підприємець електронної комерції, який витратив тисячі доларів на наймання дорогого агентства з розвитку для розробки передової платформи електронної комерції, може зазнати невдачі, якщо проігнорувати цей основний і важливий елемент дизайну.
Він має бути достатньо простим, щоб його можна було читати та водночас достатньо переконливим, щоб переконати цільову аудиторію переглядати веб-сайт і довше залишатися на веб-сайті.
Надійна типографіка створить сильну ідентичність бренду, залучить нових відвідувачів і спонукає клієнтів повернутися до вашого сайту; тим самим збільшуючи продажі та прибутки для вашого бізнесу.
Чи надсилаєте ви правильне повідомлення своїм потенційним клієнтам за допомогою типографіки? Які шрифти ви використовуєте для свого бізнесу, щоб отримати максимальну кількість конверсій? Поділіться своїми ідеями чи запитаннями з нами в коментарях нижче.