Семь простых принципов дизайна, ориентированного на конверсию (ДОК) и способы их использования

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

Дизайн, ориентированный на конверсию (ДОК) существует, чтобы помочь дизайнерам создать пользовательский интерфейс, который управляет единой бизнес-задачей.

Это может быть так же просто, как перейти на другую страницу или не менее сложно, чем обеспечить продажи или регистрации на сайте.

Оригинал статьи: https://www.interaction-design.org/literature/article/the-seven-simple-principles-of-conversion-centred-design-ccd-and-how-to-use-them

И наоборот, ДОК позволяет легко определить, когда дизайн не увенчался успехом, поскольку он не в состоянии сыграть свою роль в преобразовании посетителей в клиентов. Как и во всем, ДОК — это гибрид искусства (визуальный, UX и контент-дизайн) и статистики (измерение и анализ результатов).

Оли предлагает использовать 7 принципов, которые, по его словам, являются основой для создания ДОК для ваших проектов:

Внимание! Важно использовать на сайте элементы, привлекающие внимание
Контрасты
Направление движения
Использование большого количества «белого» (свободного) пространства
Срочность и ограниченность во времени
Тестирование перед покупкой
Отзывы (социальное доказательство)

Давайте рассмотрим их подробно и с некоторыми примерами.

7 принципов ДОК

Первый принцип — Внимание

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

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

Примеры элементов (кнопки социальных сетей):

Author/Copyright holder: Free Stock Images. Copyright terms and licence: CC BY 2.0

Второй принцип ДОК — Контраст

Поместите большую красную кнопку на ярко-красный фон. Что происходит? Она становится неотличимой от фона.

Что важно в ДОК? Не цвет, который вы используете имеет значение, а контрастность фона.

Если ваш призыв к действию смешался со всем остальным, кто это увидит? Никто. Сделайте материал выделяющимся при помощи контраста. Белый на черном. Зеленый на красном. Не знаете, как создать наибольшие уровни контраста? Проверьте цветную звезду ниже (точки друг напротив друга обеспечивают максимальный уровень контрастности):

Author/Copyright holder: Kwamikagami. Copyright terms and licence: CC BY-SA 4.0

Третий принцип ДОК – Направленность действия

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

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

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

Author/Copyright holder: Pixabay. Copyright terms and licence: Free to use

Четвертый принцип ДОК — Использование большого количества свободного пространства

Чем больше «белого» пространства, тем лучше, тем меньше загромождены ваши проекты — тем легче будет понять, где и как нужно действовать. Это также упрощает передачу отдельного ключевого сообщения вашему пользователю.

Нет лучшего примера мощного использования свободного пространства, чем главная страница Google.

Пятый принцип ДОК – Срочность и ограниченность во времени

Если вы хотите, чтобы люди сделали что-то здесь и сейчас, вы должны дать им повод сделать это. Психологи утверждают, что вы можете заставить людей действовать, ограничивая время принятия решения. Вы можете сделать это либо за счет нехватки ресурсов — «Только 7 камер по этой цене!», либо ограничивая во времени — «Осталось 23 минуты, чтобы заказать доставку на завтрашнее утро!».

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

Как вы можете видеть на этом снимке с сайта Amazon — эта специальная цена действует ограниченное количество времени, и уже заказано 35% товара. Сообщение дает понять: сейчас или никогда!

Author/Copyright holder: Unknown. Copyright terms and licence: Fair Use

Шестой принцип CCD — Тестирование перед покупкой

Если вы когда-либо были в супермаркете, то вам предлагали образец продукта. Вам предложили этот образец не из щедрости производителя. Это поможет вам принять решение купить продукт, если вам это понравится. Да, невозможно дать кому-то глоток Колы или кусочек сыра он-лайн, но вы можете все равно использовать эту идею, даже в цифровом исполнении. Например, бесплатная глава из книги или 10 минут учебного видео.

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

Вот пример из «The Reading Room», в котором даются для предварительного просмотра бесплатные главы продающихся там книг:

Author/Copyright holder: Unknown. Copyright terms and licence: Fair Use

Седьмой принцип ДОК – Отзывы (социальное доказательство)

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

Они могут быть представлены в виде «звездных» рейтингов (например, в приведенном выше примере для чтения) или полных отзывов, подобных приведенным ниже от «Legal and General» (страховщик):

Также хорошо для понимания использовать (как в примере выше) небольшое объяснение с рекомендацией.

Пример ДОК в действии — Wistia.Com

Давайте рассмотрим страницу Wistia и посмотрим, какие правила ДОК они используют:

Фраза «Создать учетную запись» полностью инкапсулирована, и она явно контрастирует с фоном. На экране вообще не так много выбора, и это дает много свободного места и четко направляет пользователя: заполните форму, пожалуйста. Они также предлагают опцию «попробовать перед покупкой»: «2-недельная бесплатная пробная версия … убедитесь, что вас все устраивает, прежде, чем платить нам десять центов».

Фактически, единственное, чего не хватает — это отзывы.

Важно отметить, что не нужно приспосабливать концепцию ДОК к каждой разрабатываемой странице. Просто сконцентрируйтесь на принципах, которые призывают к действию.

Почему мы выбрали Wistia для этого примера? HubSpot выбрал его как лучшую целевую страницу 2015 года.

Взять с собой.

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

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

Семь простых принципов дизайна, ориентированного на конверсию (ДОК) и способы их использования

Семь простых принципов дизайна, ориентированного на конверсию (ДОК) и способы их использования