Создайте лучшую домашнюю страницу с помощью StoryBrand Framework

Опубликовано: 2022-03-11

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

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

Какова цель домашней страницы?

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

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

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

Используя эти аналитические данные, UX-дизайнеры могут оптимизировать размещение призыва к действию, повысить скорость сайта, провести A/B-тестирование, использовать видео для привлечения посетителей, использовать высококачественные изображения, чтобы привлечь внимание людей, и включить инструменты обмена сообщениями для повышения производительности сайта. домашняя страница. Однако гарантирует ли это лояльность и доверие со стороны потребителей?

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

Три распространенные ошибки при разработке домашних страниц

Компании и дизайнеры расширений сталкиваются с тремя основными ловушками при создании домашней страницы:

  1. Они не сосредотачиваются на важных вещах. Они рассказывают людям все о характеристиках их услуги или продукта. Людей это не волнует. Они хотят знать, что бизнес решит их проблему и улучшит их жизнь.
  2. Предприятия не передают свое сообщение четко. Как говорит Тони Хейл из Chartbeat, у веб-сайта есть менее 15 секунд, чтобы привлечь внимание посетителя.
  3. У них плохой продукт, который не решает ничьих проблем. В этом случае дизайнер мало что может сделать для бизнеса.

Что такое фреймворк StoryBrand?

Вопреки тому, во что верят некоторые компании, логотип не равен бренду. Отнюдь не; бренд — это обещание, за которым кроется причина их существования.

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

Сторителлинг широко используется предпринимателями для соблазнения инвесторов в презентациях и социальных сетях. Такие компании, как Apple, понимают и используют силу ясного и простого повествования во всем, что они делают. Они знают, что это не о них; это об их клиентах.

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

Фреймворк StoryBrand — это формула повествования, созданная Дональдом Миллером, чтобы помочь компаниям просто и ясно донести свои самые сильные идеи. В своей книге Building a Story Brand Миллер утверждает: «Ваш покупатель должен быть героем истории, а не брендом. Это секрет, который понимает каждый феноменально успешный бизнес».

Как использовать StoryBrand с клиентом

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

Миллер сравнивает создание StoryBrand с написанием истории для сценария. Он разбивает его на семь сюжетных пунктов.

Базовая структура фреймворка StoryBrand
Изображение из книги «Создание сюжетного бренда» Дональда Миллера.

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

Эту структуру можно распознать почти в каждом успешном фильме. Это также может относиться к бизнесу и его клиентам. Следующим шагом для клиента является написание истории своего бренда в соответствии со следующей структурой:

  1. Персонаж : герой истории всегда покупатель, а не бренд. UX-дизайнеры должны выяснить, чего клиенты хотят от бренда, обычно с помощью UX-исследований и пользовательского тестирования. Им нужно сосредоточиться на желаниях, которые движут людьми, таких как сохранение финансовых ресурсов, экономия времени, создание социальных сетей или получение статуса.
  2. Имеет проблему : Злодей в сюжетной арке StoryBrand — это проблема персонажа. Полезно персонифицировать эту проблему и понять, что продукты компании подобны оружию, которое покупатель может использовать для ее победы. Компании, как правило, сосредотачиваются на решении внешних проблем, а клиенты покупают решения внутренних проблем. У людей есть три уровня конфликта:
    - Внешний (большинство предприятий пытаются решить внешние проблемы)
    - внутренние (такие как разочарование, запугивание, неуверенность)
    - Философский (почему эта история имеет значение?)
  3. И встречает гида : Гид это бизнес или бренд. Клиентам нужен кто-то, кто позаботится о проблеме. Их восприятие бренда будет иметь решающее значение для их доверия. Две вещи должны быть сообщены:
    - Эмпатия (покажите понимание боли, которую может испытывать клиент)
    - Авторитет (это даст покупателю уверенность в том, что бренд способен ему помочь)
  4. Кто дает им план : бизнес показывает клиенту, что им нужно делать дальше. Клиенты все еще не уверены, стоит ли покупать, пока не будет показан простой план действий. UX-дизайнеры могут точно описать следующие шаги для клиентов. Они также могут облегчить любое беспокойство клиента, решая проблемы, связанные с продуктом или услугой.
  5. И призывает их к действию : эффективные призывы к действию облегчают покупку или регистрацию.
  6. Это помогает им избежать неудач : что поставлено на карту для клиента? Что они потеряют, если не будут покупать у этого бренда?
  7. И заканчивается успехом : расскажите клиентам, как это конкретное действие может изменить их жизнь. Покажите им, как будет выглядеть их жизнь после того, как они купят продукт, и какие чувства вызовет у них это решение. Рассказчики заканчивают рассказ тремя надежными способами: позволяя персонажу:
    - Завоевать власть или положение
    - Найдите кого-то или что-то, что сделает их целыми
    - Испытайте некоторую форму самореализации, которая также сделает их цельными

Рабочий лист фреймворка StoryBrandБазовая структура фреймворка StoryBrand
Изображение из StoryBrand Brandscript.

Как использовать StoryBrand Framework на главной странице

Домашняя страница никогда не должна быть о бизнесе. Речь должна идти о его потенциальном покупателе.

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

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

Заголовок

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

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

Создайте доверие, демонстрируя авторитет

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

  • Включая отзывы важных клиентов, которые рекомендуют бренд
  • Отображение логотипов компаний, с которыми работал бренд
  • Отображение конкретных данных о количестве пользователей, транзакций и т. д.
  • Благодаря наградам и похвалам, опубликованным работам, выступлениям в СМИ и аналогичным достижениям.
  • Показ изображений команды или штаб-квартиры компании

Лучшие практики дизайна домашней страницы: ориентируйтесь на клиента
Домашняя страница ZeBrand фокусируется непосредственно на покупателе.

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

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

Существует два вида призывов к действию:

  1. Прямые призывы к действию предназначены для людей, которые знают, что готовы совершить покупку или зарегистрироваться, и содержат такие формулировки, как «Купить», «Зарегистрироваться» или «Начать». Нажав на эти CTA, покупатель перейдет прямо к форме для завершения транзакции.
  2. Переходные призывы к действию предназначены для посетителей, которые еще не совсем готовы совершить покупку. Им может понадобиться больше времени и информации, прежде чем они сделают это. Они представлены в виде кнопок «Подробнее», «Попробовать бесплатно» или «Связаться».

Некоторые призывы к действию могут сочетать эти две функции или располагать их рядом (часто это выглядит как пара кнопок «Купить сейчас» и «Подробнее»).

Советы по дизайну главной страницы: сочетание кнопок призыва к действию
Canary Labs имеет заметный призыв к действию для совершения покупки, а также менее заметную кнопку для получения дополнительной информации.

Привлекательные изображения

Независимо от того, насколько серьезным является содержание домашней страницы, структура StoryBrand требует счастливого конца. Выбирая изображения, имейте в виду, что некоторые из них должны вызывать ощущение «долго и счастливо».

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

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

Короткий текст

Чем меньше текста, тем лучше. Многие потребители не будут читать длинные блоки текста, поэтому лучше передать сообщение бренда как можно меньшим количеством слов.

UX-дизайнеры должны помочь клиентам поделиться своей историей самым простым способом.

Хороший дизайн домашней страницы включает меньше текста
Squarespace использует минимум текста на своей домашней странице.

Успешные домашние страницы отвечают на ключевые вопросы

Успешная домашняя страница сможет заинтересовать посетителей менее чем за пять секунд. Оттуда у него будет около 15 секунд, чтобы ответить на три вопроса, которые люди задают себе (часто подсознательно) при посещении домашней страницы:

  • Что они делают?
  • Как они могут мне помочь?
  • Что мне нужно сделать, чтобы купить или привлечь?

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


Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

  • Все ли тренды того стоят? 5 самых распространенных ошибок UX, которые допускают веб-дизайнеры
  • Как создать эффективную целевую страницу
  • Создан для конвертации — лучшие практики дизайна целевой страницы
  • Полное руководство по дизайну веб-сайта электронной коммерции
  • Всеобъемлющее руководство по информационной архитектуре