AIDA структура лендинга

 

aida-seonicВ этой статье мы обсудим, как с помощью дизайна можно использовать принципы модели АИДА (термин в области маркетинга, а не название итальянской оперы Джузеппе Верди) и создать продаже-ориентированные веб-страницы.

АИДА — модель покупательского поведения под воздействием рекламы, предполагающая привлечение внимания (Attention) пробуждение интереса (Interest), стимулирование желания (Desire) и побуждение к совершению покупки (Action); эти четыре шага и составляют процесс продажи продукта, как считал американский специалист в области рекламного бизнеса

Элмер Левис, который и сформулировал эту модель. АИДА может быть применена в различных ситуациях, связанных с продажей товаров или услуг, но в этой статье мы сконцентрируемся на способах создания веб-дизайна, который будет работать на каждом из принципов модели.

Принципы AIDA особенно актуальны в проектировании целевых страниц, где, как правило, маркетинг и веб-дизайн взаимодействуют одновременно. А суть целевых страниц, как нам известно, — это продажа какого-либо продукта, услуги или получение подписки.

Начнём.

A: Attention — привлечение внимания.

Внимание — первый шаг из модели AIDA, и тот, на котором формируются все остальные. В конце концов, как вы сможете подтолкнуть своего пользователя к какому-то действию, если вам не удастся заполучить его внимание уже с самого начала?

В рамках сферы веб-дизайна существует много обсуждений на тему важности привлечения внимания: ведь клиенты хотят, чтобы их сайт был замечен.

Такие понятия как «поверх сгиба» (или «до прокрутки») и «правило трёх секунд» регулярно вызывают дискуссии, ведь оба из них сосредоточены на необходимости быстро привлечь внимание пользователей.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/abovethefold.jpg
Life Below 600

Эта страница является отличным решением в задаче привлечь к себе внимание: хороший или уникальный дизайн сам по себе примечателен. Тем не менее, можно использовать отдельные элементы дизайна, чтобы сфокусировать и привести внимание пользователей к конкретным областям на странице.

Однако следует отметить и негативные ощущения от излишества в количестве элементов на странице, которые прямо-таки соперничают за внимание пользователя. Если акцент делается на всём, то не существует никакой иерархии важности в принципе, и пользователь может почувствовать себя под давлением или даже ощущать страх.

Естественно, методы привлечения внимания изменяются с течением времени наряду с развитием тенденций и технологий в сфере дизайна, но вот несколько популярных методов, используемых в настоящее время.

Большой текст


Действительно, большой текст уже довольно продолжительное время популярен в веб-дизайне. Обычно он используется, чтобы сразу сделать громкое заявление: поприветствовать пользователя или объяснить природу сайта (например, «Мы делаем сайты»). Огромные размеры текста по отношению к остальным элементам страницы прочно закрепляют его в верхней части визуальной иерархии.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/bigtextone.jpg
Carsonified

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/bigtexttwo.jpg
Mark Hobbs

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/bigtextthree.jpg
Big Cartel

Слайдеры


В течение последних нескольких лет массовых трендом являются слайдеры, созданные на базе Javascript (чтоб в этом убедиться, достаточно просмотреть несколько наиболее загружаемых файлов на Themeforest). Такая популярность неспроста — слайдеры неизменно привлекают внимание и производят первое яркое впечатление. Суть слайдера в соединении изображений с движением и анимацией, и сейчас они становятся всё более продвинутыми в техническом смысле, начиная с простого затемнения и переходов с картинки на картинку до профессиональных 3D эффектов, как у CU3ER, компании, специализирующейся на разработке цифровых трёхмерных слайд-систем, а также (на базе Flash) сайта Piecemaker.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/sliderone.jpg
Marcs Design

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/slidertwo.jpg
Piecemaker

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/sliderthree.jpg
Modernize Theme

Анимация

Для создания сложной, детально разработанной и интересной анимации на своей странице раньше можно было бы традиционно полагаться на Flash, но сейчас есть куда больше возможностей. CSS3 анимация становится всё более усовершенствованной, а возможности поддержки такой анимации браузером прогрессируют вместе с ней.

Анимация, — при условии её грамотного использования, — отличный способ выделения вашего сайта среди массы других и привлечения внимания пользователей.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/animationone.jpg
The Expressive Web

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/animationtwo.jpg
Reverdand Danger

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/animationthree.jpg
Quazar

I: Interest — пробуждение интереса.

Следующий принцип модели АИДА — интерес. Внимание клиента мы привлекли, сейчас нам следует заинтересовать пользователей в том, что мы им предлагаем. Как это сделать?

Предполагается, что, вместо рассказов о свойствах продукта или услуги мы объясняем их преимущества. Этот подход смещает фокус снова на пользователя, а не на товар/услугу, и позволяет человеку идентифицировать это предложение на личном уровне.

Как мы можем подойти к этому через дизайн: необходимо чётко и лаконично представить эти преимущества. Пользователи не будут читать полотна информации, выискивая что-то для себя полезное: разделение информации на блоки, визуальное маркирование важных моментов, создание списков, иконок и другие информативные сопутствующие детали — всё это значительно способствует быстрой передачи информации.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/interestone.jpg
Evernote демонстрирует три основных преимущества своих услуг (текстово в сочетании с изображениями), как только вы загружаете их страницу. https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/interesttwo.jpg
Дизайн целевой страницы Basecamp сразу переходит к делу, перечисляя три ключевых момента полезности их услуг.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/interestthree.jpg
Разработчики веб-страницы сайта Sparrow используют чёткие визуальные блоки, в которых отображаются преимущества данного приложения.

D: Desire — стимулирование желания

Хорошо, внимание привлечено, интерес вызван, сейчас нужно сделать так, чтобы пользователи сами захотели получить то, что мы предлагаем. Займёмся стимулированием желания.

Генерирование желания — обширная тема, бизнес-предприятия используют целые маркетинговые отделы, чтобы создать сложные и привлекательные кампании в достижении своей цели. Мы же сосредоточимся на том, как это можно сделать посредством веб-дизайна.

На данном этапе у вас есть внимание пользователя и его интерес, таким образом, они будут готовы уделить сайту больше своего времени. Используя это терпение по существу, мы даём себе шанс представить пользователям более подробную информацию, будь она выражена в форме изображений, видео или текста. На этом этапе нету необходимости спешить.

Покажите продукт или услугу во всей его красе

Само собой разумеется, что вам нужно представить свой продукт в лучшем свете. Люди могут судить о продукте, основываясь исключительно на эстетическом впечатлении, они будут ассоциировать хороший дизайн с более высоким уровнем качества. Выглядеть достойно должен не только веб-сайт, но и сам продукт (если таковой имеется).

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/desireone.jpg
Короткое видео для приложения Clear отлично справляется с этой задачей и действительно демонстрирует приложение со всеми его возможными преимуществами. Высокое качество, заманчивые изобразительные элементы и профессиональные видео — чрезвычайно мощные средства в создании положительного образа вашего продукта. Разработчики страницы Apple сделали потрясающую работу: компания демонстрирует свои продукты с использованием больших изображений и анимации.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/desiretwo.jpg

Выбирайте лучший способ представления своего товара. Например, для тех, кто продаёт цифровую продукцию, такую как приложения или веб-дизайн, наиболее частым и предпочтительным вариантом будет отображение этих продуктов на устройствах — мониторах, дисплеях лэптопов и телефонах.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/desirethree.jpg

Социальное доказательство

Социальное доказательство является одним из самых мощных и распространенных способов стимулирования желания. Оно может принимать различные формы, и вы наверняка часто сталкивались с этим явлением много раз в вашей жизни.

Социальное доказательство — сложная психологическая концепция, но на базовом уровне она описывает явление, когда люди получают сигналы к действию благодаря другим людям. Если остальные находят что-то приемлемым, то отдельно взятый человек, скорее всего, будет думать так же.

Отзывы и обзоры являются отличным примером этого эффекта, так как они показывают, что другие уже приобрели хороший опыт от взаимодействия с услугой или продуктом. Осознание того, что другие пользуются этим продуктом и даже рекомендуют его, снижает чувство риска и, в свою очередь, увеличивает желание.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/socialproofone.jpg

Хорошее решение — задействовать мнения экспертов или знаменитостей. У таких людей много последователей и внимательных слушателей, и их точка зрения имеет большую ценность и вызывает доверие.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/socialprooftwo.jpg

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

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/socialproofthree.jpg

Но в вашу пользу может сыграть не только качество, но и количество. Размещайте на сайте информацию о большом количестве ваших последователей на Twitter, число лайков на Facebook и подписчиков на RSS-ленту.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/hub.png

A: Action — совершение действия

Мы проделали всю тяжёлую работу и теперь пришли к заключительной стадии — к действию. Конечная цель целевой страницы — подвести пользователя к совершению некоего действия, таким образом, превратить клиента в покупателя либо своего подписчика. И именно на этой стадии важно не провалить такое ответственное задание.

Призыв к действию

Элемент веб-страницы «Призыв к действию» (call-to-action) говорит сам за себя. Обычно такие элементы представлены в виде кнопки, призывающей пользователя к какому-то действию, например, «Купить сейчас» или «Подписаться». Звучит довольно просто, но есть некоторые детали, о которых нужно помнить при их создании.

В первую очередь (это касается любого элемента действия), должно быть совершенно ясно и очевидно, что пользователь может с ним взаимодействовать. Кнопки должны быть определенного стиля, с чётко определенной областью или с визуальным ощущением объёма.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/actionone.jpg

Потом мы можем дифференцировать этот элемент действия с помощью множества методов. Используйте цвет, размер, детали и много свободного пространства в ваших интересах и для дальнейшего выделения элемента.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/actiontwo.jpg

Используйте прямые формулировки фраз на кнопках, чтобы призвать пользователя к действию и создать ощущение срочности. Ясный и краткий язык фраз будет не только способствовать действию, но и поможет пользователю понять, чего ему ждать от взаимодействия с элементом.

Также необходимо максимально упростить пользователю процесс действий, предоставляя ему для этого многочисленные возможности. В идеале, элемент призыва к действию должен присутствовать на странице с самого начала, напоминания же о нём либо аналоги самой кнопки призыва могут встречаться и дальше на сайте.

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/actionthree.jpg

Но всё равно важно держать баланс. Вряд ли мы хотим подавлять пользователя своими предложениями и заставлять чувствовать его некомфортно от этой настойчивости. Слишком много элементов призывов к действию будут казаться назойливыми и могут произвести противоположный эффект того, что мы хотим. А вот два или три таких элемента, пожалуй, хороший вариант.

Z-макет визуального пути

Макет такого визуального восприятия обсуждался ранее на сайте туториалов для дизайнеров Webdesigntuts, но сейчас мы вспомним его ещё раз, поскольку он имеет прямое отношение к целевым страницам и их способности привести пользователя к действию.

‘Z-макет’ представляет собой простой, но эффективный макет веб-страницы, который направляет пользователя по определённому пути через различные точки на странице и, в конечном итоге, приводит к элементу призыва к действию. Такое расположение является идеальным способом реализации принципов AИДА: пользователь проходит каждый шаг этой маркетинговой модели и в конце получает возможность проявить себя через действие.

Преимуществом такого визуального макета является его гибкость и то, что он может быть использован самыми разными способами. Форме символа ‘Z’ не обязательно нужно быть настолько категоричной, вполне допустимо, чтобы она расширялась или сжималась, для охвата разнообразных форм контента. И, должно быть, вы уже много раз видели примеры такой Z-образной схемы, которые заметно отличались друг от друга.

Вот несколько примеров ‘Z-макетов’ непосредственно в действии. Убедитесь, что вы следуете предполагаемой Z-траектории. https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/zlayoutone.jpg

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/zlayouttwo.jpg

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/zlayoutthree.jpg

https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/329_aida/zlayoutfour.jpg

Подведём итоги

Знание теории, основанной на принципах модели АИДА, а также умение применить каждый из её уровней в дизайне — крайне ценно для веб-дизайнера.

Техники, которые мы рассмотрели выше, являются воспроизведением индивидуальных замыслов разработчиков, и, в целом, они относительно просты и даже широко распространены в сфере веб-дизайна, но совсем другое дело — уметь комбинировать их таким образом, чтобы создавать эффективные, целенаправленные веб-страницы.

Если эта статья вызвала у вас интерес к использованию маркетологической модели АИДА, советую тематический туториал о создании целевой страницы по принципам этой модели Designing a Landing Page Using AIDA Principles (для англоязычных читателей).

Спасибо за внимание!

Life Below 600 («некоторые люди полагают, что вы не будете читать этот текст. Почему? Потому что он располагается ниже прокрутки”)

Источник перевода