Дизайн сайту впливає на конверсію більше, ніж ви думаєте. Перший контакт відвідувача з сайтом найважливіший, і один із способів залишити гарне враження в пам’яті споживача — це створити образ героя.
Що таке образ героя?
Образ героя – це зображення або серія зображень на видному місці головної сторінки. Ви бачили їх раніше. Вони виглядають так:
Героєм може стати:
- Зображення, яке заслуговує на довіру;
- Фото або відео рішення, що ілюструє актуальність;
- Контекст, що містить емоції підтримки, навчання чи переконання клієнта.
Герой – не картинка на головній сторінці сайту, це зображення рішення, привносящее ясність і контекст для відвідувачів, це фото, що виражає певну мету.
Навіщо використовувати образ героя?
Користувачам подобаються сайти, які легко:
- Читати;
- Сприймати;
- Юзати.
На формування першого враження у вас від сили 0,05 секунди, тому зображення вашого героя – найшвидший спосіб допомогти відвідувачу правильно сприйняти інформацію і посилання.
Кілька інших досліджень згодні з цією цифрою, включаючи і власне дослідження Google.
Використовуючи образ героя, не варто забувати і про основну пропозицію. Не створюйте хаос, яким би чіпляти і яскравим він не був. Герой простий, і він веде.
Як створити і вибрати образ вашого героя
До речі, розробка і вибір образу героя – більше мистецтво, ніж наука. А конверсія його, як правило, залежить від брендингу.
7 пунктів, яким повинен відповідати ваш персонаж:
У рідкісних випадках досить вибрати тільки чотири направляючих:
- Відповідність;
- Зрозумілість;
- Цінність (для клієнта);
- Залучення уваги.
Чи відповідає ваш образ героя того, що ви пропонуєте? Він зрозумілий? Він привертає увагу (при швидкому перегляді сайту, наприклад)?
4 типи зображення образів героя
До них відносяться:
- Зображення продукту;
- Контекстні зображення;
- Відомі творці;
- Випадають з контексту зображення.
Я не буду вам казати, яка з цих категорій працює краще або гірше (A/B тестування – кращий спосіб з’ясувати це самостійно), але наведені нижче приклади можуть надихнути вас на нові варіації.
Зображення продукту
Зображення образу героя продукту – саме інтуїтивно зрозуміле. Це велика картинка у гарному якості. Анімованого або статичного продукту – не важливо, його основне завдання – доповнити опис цінності наочною демонстрацією. Ось пара прикладів:
1. Bivan
Bivan — сайт з продажу цілого дивана. Аналогічну продукцію представляє бренд Ламзак, що дозволяє в будь-якій ситуації мати під рукою компактну меблі. Зображення (в нашому випадку відео) продукту по центру дає краще розуміння і візуальний образ того, що ви отримаєте.
2. Tinkoff
Tinkoff — банк на просторах інтернету. Їх персонаж з усіма іконками можливого маршруту руху допомагає додати трохи контексту про те, для чого потрібно це додаток.
3. Coffee Cup
Coffeecup.city — додаток, що дозволяє пити каву зі знижкою до 70% у найкращих місцях вашого міста. Образ героя демонструє людини з чашкою кави в руках і мобільний додаток, яке і є сам продукт. На екрані телефону можна спостерігати соціальне доказ того, скільки чашок кави випито і скільки користувачів користується сервісом.
4. Bookmate
Bookmate — сервіс для читання електронних книг з передплати для всіх, у кого є мобільний телефон. Головне фото демонструє, як легко і зручно можна читати ваші улюблені книги, не тягаючи їх з собою. Не погано, на наш погляд.
Образ героя в контексті
В такому випадку, компаніями використовується не просто картинка з продуктом, а зображення, що додає контекст підтримку способу життя споживача.
5. Art-techs
Art-techs — сайт дизайнера інтер’єрів. Тут два в одному: і сам продукт – послуга дизайнера, і контекст — гарний інтер’єр, де відвідувачі можуть ознайомитися з роботою фахівця.
6. Nikshow.by
Вашій увазі сайт «Наукове Шоу божевільного професора Ніколя». На наш погляд, є повне занурення в контекст. Яскраво, дохідливо і читабельно.
7. Blablacar.ru
Бла бла кар — це найбільше співтовариство попутників; майданчик, що об’єднує водіїв та пасажирів, яким по дорозі. На головній сторінці – дорога. Зрозуміло, що мова йде про подорожі, але самого продукту і результату від продукту не видно.
8. Chefmarket.ru
Шефмаркет – сервіс з доставки продуктів для готування вдома. В своєму образі героя компанія показує набір свіжих та смачних інгредієнтів.
Образ героя знаменитого творця
По суті, це зображення творця сервісу або сайту. Як правило, зміст такої сторінки – це багато корисного контенту, заснованого на особистих талантах або досягнення. Зображення найчастіше розташоване на головній сторінці і використовується у зв’язку з пропозицією підписатися на розсилку.
9. Azamatushanov.com
Особистий блог Азамата Ушанова. На головній сторінці ми видем фотографію Азамата, а сайт-барі розташовується пропозицію підписатися на корисну розсилку від нього ж.
10. Jeffwalker.com
Jeffwalker — блог автора бестселера Нью-Йорк Таймс, у якому він ділиться формулою просування і продажу будь-якого продукту на ринку з нуля. На головній сторінці одразу пропозицію підписатися на розсилку від того самого Jeffwalker-а.
11. Igor-mann.ru
Ігор Манн — особистий блог, прес-кіт і візитна картка маркетеров, спікера і автора десятка книг про маркетинг, PR та продажу Ігоря Манна. Сайт викликає довіру. Ти відразу розумієш, куди перейшов і що тебе чекає.
Випадає з контексту образ героя
Це зображення, що не вписується в контекст. Зазвичай його вставляють, тому що воно прикольно виглядає або тому що модно, проте, воно зовсім не підходить до пропозиції або лэндингу.
12. Rocketbank
Які зображення можна використовувати:
Висновок
Правильно вибране візуальне зображення доповнює і додає контекст до вашої пропозиції, збільшуючи тим самим простоту сприйняття та цінність.
Така робота над помилками допомагає «упакувати» ваш продукт і викликати довіру у користувача. «Золота лихоманка» з лэндингами проходить, тому негайно сідайте і створюйте свого героя!
