2.07.2018
38

Содержание Гайда:

Часть 1. С чего начинается: что такое продукт, какие есть примеры успешных проектов, почему не всегда нужен сайт и как продавать без него. Главное про идею и теоретическую подготовку перед стартом.

Часть 2. Что представляет собой UX проектирование. Первые шаги в создании сайта.

Часть 3. Что такое Landing Page. Обязательные компоненты и структура страницы.

 

В 4-й части поговорим о дизайне главной страницы. Рассмотрим важные правила оформления на примерах.

 

Главная страница часто становится «первым касанием» бизнеса и потенциального клиента, это своего рода «лицо» компании. Поэтому ее важность сложно переоценить. У нее несколько функций:

 

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

 

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

 

Общие правила

 

При разработке главной есть два ключевых правила — про стабильность и про доверие.

 

Во-первых, все на сайте должно быть стабильно, в едином духе. К примеру:

 

  • если у компании сине-черный фирменный стиль, то главная не может быть розово-сиренево-зеленой;
  • выбранная цветовая гамма должна прослеживаться на всех страницах. Допускается добавление акцентов или вспомогательных  цветов для более удобного восприятия (красный для «удалить»,«ошибка», и зеленый для «принять», «успешно»;
  • если кнопки круглые, то они круглые везде; если фотографии со скругленными углами — то тоже все, без исключений;
  • если для переключения слайдеров есть горизонтальные стрелочки, то все слайдеры на сайте должны быть с горизонтальными стрелочками. Никаких вертикальных бегунков, точечек и чего-то еще;
  • если выбрали шрифтовые пары, не добавляйте на главной другие шрифты — будет бардак;
  • если общаемся с пользователем на «ты» в контенте, значит, на кнопке регистрации тоже должно быть «зарегистрируйся», а не «зарегистрируйтесь».

 

Во-вторых, главная страница должна вызывать доверие и создавать правильное впечатление у пользователя:

 

  • хоть у интернет-магазина, хоть у корпоративного сайта на главной нужны контакты: адрес, номера телефонов, e-mail, формы обратной связи, заказ обратного звонка. По возможности средств связи должно быть несколько: кому-то удобнее звонить, кому-то писать — не ограничивайте аудиторию;
  • реальные фотографии привносят больше доверия, нежели стоковые. Это правило касается не только товаров и услуг компании, но и например, фото менеджера. Пусть он и не модель Calvin Klein, пользователю удобней видеть, с кем он общается. Стоковые Джимы и Мэри — это не «нейтрально» по шкале привлекательности, это «очень негативно»;
  • чтобы показать отличия от конкурентов, используйте краткие иллюстрированные факты — и пишите не о себе, а о том, чем вы можете помочь клиенту. Например, «гарантия 5 лет», «полный цикл работ»;
  • если делаете отзывы, просите реальных клиентов писать их, но не заказывайте у копирайтеров. Сложно навскидку вспомнить что-то, что хуже фейковых отзывов. Добавляйте к ним ссылки на профили клиентов в Facebook, фотографии заказчиков.
отзывы на странице сайта
Функционал WOW! TOUCH позволяет отображать и текстовые отзывы, и фото к ним, и видеоотзывы — в комплексе это работает лучше стандартного формата

Элементы главной страницы должны быть выдержаны в одном стиле со всем сайтом и вызывать доверие пользователя — и не должны спорить между собой.

Как оформить первый экран

Above the fold — это «первый экран», та часть страницы, которая видна после загрузки без прокручивания вниз. И она самая важная, потому что с нее начинается формирование пользовательского мнения. Как и в человеческой психологии, пользователю достаточно 3-5 секунд на первое впечатление и понимание, соответствует сайт его запросу или нет.

Исходя из этого, на первом экране обязательно должны быть:

  • логотип и название компании;
  • предложение;
  • меню.

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

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

Давайте на примерах.

Смотрите, это главная страница сайта Make Up.

главная страница сайта Make Up

Что мы на ней видим?

Первое — название, оно сразу бросается в глаза и раскрывает сегмент бизнеса.

Второе — крупная картинка, на ней акционное предложение — это плюшка пользователю.

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

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

А вот второй пример. Есть бизнес WOW! TOUCH по продаже бьюти-боксов. Что такое бьюти-боксы? Да черт знает, какие-то коробки красоты. Или красивые коробки. Это незнакомый пользователю продукт, значит, его надо объяснить. Как компания делает это на первом экране, чтобы дать общее понимание пользователю?

При помощи текста и видеофона.

оформление главной страницы WOW! TOUCH

Фраза в «В коробке WOW! TOUCH косметика…» сразу отвечает на вопрос «что это?» — косметика. А видеофон показывает, что за косметика и почему именно «бокс», «коробка», а не просто косметика.

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

Первый экран должен отвечать на вопрос «Что это за компания и что она предлагает»

Как наладить контакт

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

I. Интуитивно-понятный интерфейс

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

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

II. Подсказка направлений

Сайт должен подсказывать пользователю, как и куда двигаться дальше:

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

Также важно расставить подсказки на «развилках» — тех местах, где у пользователя более 1 варианта действий. Подсказывайте самый выгодный путь и не делайте варианты равноценными — возможность выбора не всегда играет вам на руку, на самом деле.

К примеру, такая ситуация с тарифными планами.

У компании Юздеск сразу выделяется один тариф — самый дешевый для покупателя и самый выгодный для компании. Наглядно, не отвлекает, сразу видно, куда смотреть:

тарифы на странице

А вот у Lifecell таблица с тарифами не имеет вообще никаких выделений:

таблица с тарифами без выделения

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

 

Вывод: не будьте как Lifecell, будьте как Юздеск.

 

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

 

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

таблица тарифов

III. Дозировка предложений

 

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

 

Как не спугнуть потенциального клиента

 

Если человек зашел на сайт, значит, он заинтересован, но не факт, что уже готов на заказ. Тут нужно действовать аккуратно и не давить.

 

Что заставляет посетителей бежать с вашего сайта:

 

  • назойливый поп-ап — признак лохотрона, да и попросту бесит;
  • сложная регистрация: в норме достаточно имени и номера телефона; а если нет, можно разбить регистрацию на несколько этапов, медленно подводя пользователя к самым «трудозатратным» полям;
  • жесткие рамки ввода информации: ввод номера телефона исключительно в формате (+380…) или четкая последовательность «Фамилия → Имя» и ни в коем случае не наоборот;
  • отсутствие «указательных знаков»: длительную загрузку страницы скрасит полоса загрузки или отображения процентов выполнения задачи; после действия хочется видеть оповещения «Товар добавлен в корзину», «Изменения сохранены», «Ваш заказ принят и обрабатывается. Ожидайте звонок в ближайшее время» и т.д.

Чек-лист качественной главной

Какой должна быть главная, чтобы работать на бизнес, а не против него? Мы собрали короткий чек-лист для проверки.

  1. Информативность:
    1. есть данные о бизнесе;
    2. информация про продукт (товар/услугу);
    3. выгоды компании перед конкурентами;
    4. отзывы;
    5. контакты и соцсети компании.
соцсети компании на странице
  1. Коммуникация с клиентом:
    1. везде используется единый стиль общения, обращения, узнается «голос компании»;
    2. компания говорит про клиента и пользу для него, а не про себя;
    3. контент говорит на языке клиентов (без непонятного сленга и аббревиатур).
  2. Ценность — чем продукт важен, принципиально нов, почему его стоит заказать.
  3. Функциональность:
    1. навигация удобная, пользователю понятно, куда двигаться дальше;
    2. регистрация/авторизация не слишком сложная;
    3. есть кнопка обратного звонка;
    4. страница адаптирована для мобильного просмотра;
    5. страница загружается быстро.
  4. Конверсии:
    1. есть СТА;
    2. есть возможность совершить конверсию сразу или приблизиться к своей цели.
  5. Визуальная привлекательность:
    1. цветовая гамма в фирменном стиле;
    2. все элементы дизайна в одном стиле: кнопки одной формы и т.д.;
    3. использованные изображения не нарушают авторские права, среди фото нет стоковых;
    4. все элементы дизайна несут пользу и не используются ради номинального присутствия на странице;
    5. информация легко считывается, шрифт не меньше 12 кегля, цвет фона и текста контрастный, важная информация написана печатным шрифтом, не рукописным.
    6. не больше трех шрифтов на странице.

 

Было полезно? Ставьте ♥ и проверьте свою главную!

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

Обновлены комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • ALT + LeftMouseClick - для сбора фраз