Емоційний landing page? Воу воу, легше

«Продавайте емоцію, а не товар», «Розкажіть про тривалий ефект від покупки» – саме ці заголовки в одній із статей зіпсували одного разу мені ранок.


Пародія на надмірну емоційність в інтерфейсах

А почалося все з клієнта, котрий прочитав статтю про «правильної» техніці продажів і поставив під сумнів мою компетенцію. Та стаття коштувала 2-х годинної розмови і змусила розкласти питання емоційності в інтерфейсах по-поличках.

Продавай емоції, бро!
Причиною нашого спору з клієнтом був прототип посадкової сторінки «допомога студентам у написанні дипломних/курсових/інших робіт». У його поданні (після прочитання статті), інтерфейс повинен був звертатися до відчуттів успішності, бажанням швидше покінчити з цим навчанням і увійти в доросле життя. Ми так не думали.

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

Грунтуючись на цих даних складаються персонажі – збірні образи, що поєднують сумарний користувальницький досвід в конкретну (вигадану) особистість. Зазвичай, достатньо 1-3 персонажів, але в складних продуктах їх може бути багато – по одному на кожен сегмент аудиторії.

Персонажі – загальноприйнята практика в проектуванні інтерфейсів, дозволяють абстрагуватися від власних «хотілок» та спроектувати інтерфейс з урахуванням потреб конкретного сегмента цільової аудиторії.

Маючи чітке розуміння, яку мету переслідують клієнти і з якими завданнями відвідують проект, ми можемо внести відповідні емоції.

Здрастуйте, я Маша

Маша – ключовий персонаж проекту. Деталі і фотографія реального людини викликають більш сильне співчуття у порівнянні зі списком вимог на листку в блокноті. Цей портрет користувача значно спрощено для статті. Робочий образ містить більше деталей.

Маша – студентка 3-го курсу економічного факультету МГТУ, яка вперше за час навчання вирішила схалтурити і замовити виконання курсової. Маша зарекомендувала себе дуже відповідальною студенткою і їй соромно зізнатися самій собі в намірах, не кажучи вже про те, щоб розповісти одногрупникам.

Увечері після роботи, Маша використовуючи планшет, переглядає сайти компаній, які виконують роботи для студентів. Її головна мета – знайти виконавця, який напише їй курсову роботу. І, щоб задовольнити цю головну мету, інтерфейс повинен дозволити Маше:

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

Далеко не всі потреби є важливими і реалізуються тільки засобами інтерфейсу. Але головне те, що в реалізації мети «замовити курсову роботу», у Маші немає потреби швидше закінчити навчання або стати успішною. Це глобальні цілі і до самого інтерфейсу вони мають досить опосередковане відношення.

Реалізуючи в інтерфейсі реальні потреби Маші ми гарантуємо задоволення від взаємодії і створюємо емоцію довіри. В результаті Маша з більшою впевненістю залишить заявку і стане клієнтом компанії.

Обґрунтувавши свою позицію і завершивши проект, ми вже в перший тиждень отримали конверсію ~ 9.77% і позитивні відгуки відвідувачів. Клієнт залишився задоволений. Але було б так, якщо б ми пішли на поводу? Напевно, варто спитати у тих, хто досі шаблонно клепає щось іменоване «сторінкою захоплення», емоційно «упаковуючи» щось «продає».

Емоції в інтерфейсі


Не вдаючись у деталі конкретних емоцій, інтерфейси можна розділити на дві групи:

емоційний інтерфейс – взаємодіє з користувачем на рівні яскравих образів і асоціацій.
раціональний інтерфейс – взаємодіє на рівні деталей і фактів.

І якщо з раціональним інтерфейсом все більш менш зрозуміло, то емоційний викликає багато питань і помилкових інтерпретацій.

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

Насправді спектр можливих емоцій куди більш широкий і залежить в першу чергу від сукупності фактів:

  • призначення продукту/послуги
  • цільової аудиторії та її потреб
  • джерела трафіку
Щоб краще зрозуміти цю залежність, розглянемо конкретні приклади інтерфейсів.

Приклад емоційного інтерфейсу: Шльопанці з трави
Проектуючи інтерфейс посадкової сторінки для бізнесу, продає шльопанці з нейлоновою трави, ми враховували наступне:

  • ЦА: дівчата 17-26 років
  • клієнти прямо не зацікавлені в продукті
  • основні джерела трафіку: instagram і публікації у фешн-блоги
Використовуючи знання про джерела трафіку і мотивації ЦА, інтерфейс був сфокусований на великому поданні продукту з коротким текстовим супроводом.



Кожне велике фото презентував одну з особливостей продукту або ненав'язливе подання контексту можливого застосування.

Завершивши презентацію продукту, інтерфейс фокусував увагу на соціальному підтвердження.

В той час, як більшість досі вважає єдиним соціальним підтвердженням 3-5 придуманих відгуків від умовних клієнтів, соціальна активність бренду дозволила вчинити інакше.



Бренд був дуже активно представлений в пабликах відомих ТВ-зірок і фешн-блоги. Все що залишалося – закумулювати цю активність і правильно подати.

Так в інтерфейсі з'явилися посилання на публікації ТВ-зірок в Instagram і цитати з блогу провідного фешн-блогера Росії.

Враховуючи початкові потреби ЦА, ми змогли донести через інтерфейс емоційну складову продукту. І це спрацювало.

Приклад емоційного інтерфейсу: Збільшення потужності авто
Проектуючи інтерфейс для проекту, що займається збільшенням потужності автомобілів, ми зіткнулися з проблемою відсутності в достатній кількості цільової аудиторії – такої, яка б вже знала, що таке, наприклад, «павук», навіщо він потрібен і як його заміна вплине на збільшення потужності. Разом з тим в інтернеті досить популярна інша родинна тема – чіп-тюнінг. Він менш затратний, більш простий в установці і дає деякий приріст потужності. І саме з нього зазвичай починається шлях кардинальної прокачування потужності автомобіля.


Скріншот з прототипу

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

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


Скріншот з прототипу

Досвідченому стрітрейсеру досить просто побачити фото кастомного «павука», щоб захопитися досвідченістю майстра. У нашому випадку будь-яке фото супроводжується детальною інформацією: що це і який ефект дає.

Періодично нагадуючи, що чіп-тюнінг — це «більше для дівчаток», інтерфейс стає провідником у світ серйозного тюнінгу, ставлячи головним завданням запросити в тюнінг-ательє, де можна познайомитися з реальними стритрейсерами, побачити прокачані тачки і можливо навіть покататися на одній з них.


Скріншот з прототипу

Емоційність у даному інтерфейсі була побудована в більшій мірі на провокації – виклику, що дуже характерно для нашої ЦА. При цьому був спроектований і другий інтерфейс – для досвідченого сегмента ЦА, які вже «в темі» і їм потрібно просто знати, хто може зварити їм «павук», «даунпайп» або виконати «пайпинг интекуллера». Не дивлячись на спорідненість теми і, фактично, одну ЦА, другий інтерфейс абсолютно позбавлений образів потужності, швидкості і жодних провокацій – все сухо і по справі. Різниця лише в тому, що перший інтерфейс орієнтований на менш підготовлену аудиторію, другий – на тих, хто вже «в темі».

Приклад раціонального інтерфейсу: Проекти ексклюзивних будинків
Всупереч першому думку, інтерфейс проектного бюро – має бути раціональним.


Скріншот першого екрана сторінки прототипу

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

Будь-яке загравання зі статусом (на кшталт «покажи сусідам, кілька ти крут») буде лише дратувати ЦА і вказувати на несерйозність компанії.

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



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

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

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

Потрібно яскравий прояв емоційності в інтерфейсі чи достатньо обійтися «сухим викладом» – залежить сукупності факторів.

У питанні інтерфейсів завжди слід покладатися, в першу чергу, на потреби ЦА. Вони – фундамент, основа всього. Вміючи правильно зрозуміти, що потрібно вашій аудиторії, ви зможете створити дійсно ідеальний інтерфейс незалежно від будь-яких шаблонів і штампів. Чи буде в цьому інтерфейсі прояв яскравій емоційності або сухий виклад фактів – не суть. Головне – ваша ЦА повністю задовольнить свої потреби. І у відповідь обов'язково задовольнить потреби вашого бізнесу.

Перестаньте чіплятися за відмінні переклади західних статей. Той факт, що матеріал був написаний на заході ще не робить його винятковим. Якщо черговий західний маркетолог закликає розповідати про тривалий ефект від покупки, зупиніться і задумайтеся – наскільки підходить і підходить взагалі це конкретно вашого продукту або послуги. Думайте про вашої ЦА, виявити реальні потреби і відображайте в інтерфейсі тільки те, що дійсно потрібно вашим клієнтам.

Образність в інтерфейсі
Як, окрім усього іншого, зрозуміти, яким потрібен інтерфейс вашої ЦА? Ми прийшли до однієї простої ідеї – представляти інтерфейс аналогією з реального світу. Якщо ваш продукт вино – дозвольте інтерфейсу бути сомельє. Якщо ви агентство нерухомості – надайте йому риси професійного ріелтора. Правильно підібраний образ у поєднанні з потребами цільової аудиторії дозволить максимально реалізувати органічну емоцію у ваших інтерфейсах.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.