Конверсия сайта. Превращаем посетителей в покупателей (стр. 24 )

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

На рис. 7.22 показан раздел страницы интернет-магазина, дизайн которой я недавно переделывал. Заметьте, что у каждого элемента есть достаточно белого пространства вокруг, что делает его легким для чтения. Не поддавайтесь соблазну размещать контент плотнее друг к другу — это загромождает страницу!

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

Эффекты 3D

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

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

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

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

Заметьте, как заголовок «Синхронизируйте файлы между офисами… Быстро, безопасно, просто» выделяет рынок продукта. Подобное решение может заинтересовать IT-специалистов в организациях, у которых есть несколько офисов. Так что заголовок ориентирован на строго определенный рынок, исключая остальные и также включает в себя три важных уточнения.

Движение

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

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

Рис 7.23. Сайт synctus использует иллюзию трехмерного пространства, чтобы привлечь внимание к продукту и главному контенту

Тестирование и исправление заметности

На рис. 7.24 показаны результаты интересного эксперимента. Сначала я переделал дизайн строки заголовка towelsdirect. co. uk, чтобы больше сосредоточиться на выгодах для покупателя. (Чтобы провести тест, я использовал Google Website Optimizer, о котором рассказано в главе 11.)

Вот изменения, которые я протестировал:

■ Я увеличил заметность логотипа, телефонного номера и трех ключевых свойств.

■ Я разработал новый рекламный девиз (фразу, которая идет вместе с логотипом, чтобы объяснить предложение).

■ Я добавил рисунок знака, заявляющий «Выбор № 1».

Результатом стало значительное падение коэффициента конверсии на 45,4%.

Рис. 7.24. Три заголовка на towelsdirect. co. uk, показывающие огромное изменение в коэффициенте конверсии от нескольких на первый взгляд незначительных изменений

Я задал себе вопрос «Что могло вызвать такое негативное влияние?» Могли ли знак и остальные свойства отвлекать внимание от контента? Чтобы ответить на эти вопросы, я создал третий заголовок, на котором я убрал знак и уменьшил размер и контрастность текста. Это вызвало увеличение конверсии на 46,5% по сравнению с оригинальным заголовком! Что же стало отвлекающим фактором:

■ Возможно, знаку «Выбор № 1» не хватало достоверности.

■ Может быть, заголовок был слишком загроможденным и визуально отвлекающим.

■ Или дело было в том, что наиболее заметные элементы были не тем контентом, который искали люди.

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

Предупреждение

Увеличение заметности второстепенного элемента может оказать негативное влияние на успех. Если вы сделали что-то более заметным или читаемым, а конверсия падает, посмотрите внимательнее на то, что привлекает внимание. Так ли важен этот элемент?

Навигация

Постоянное меню навигации вашего сайта делает три вещи:

■ Сообщает вам, где вы.

■ Сообщает, куда еще вы можете пойти.

■ Предоставляет возможность попасть туда.

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

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

Совокупность изображений

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

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

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

Замечание

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

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

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

Показать человеческое лицо — это простой способ повысить привлекательность страницы. Улыбающееся и обращенное к зрителю лицо привлекает еще больше внимания.

Рисунок 7.26 демонстрирует две версии главного изображения продукта со страницы продаж клиента (). Оригинальная картинка была показана в виде графика, но не давала представление ни о размере, ни о деталях.

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

Рис 7.26. Добавление улыбающегося человека увеличило конверсию на 38%

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

Внешний вид

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

Если страница выглядит неправильно или если пришедший посетитель задается вопросом: «Туда ли я попал?», вы плохо начали.

Признаки «правильности» страницы, в первую очередь, отображаются в ее внеш=Ѐльный контент, чтобы поддержать конкретные положительные моменты или ответить на конкретные возражения.

■ На странице о доставке разместите отзыв о том, как быстро прибыла вещь.

■ Около кнопки оплаты (или на странице оформления покупки) покажите отзывы, подтверждающие правильность выбора посетителя. Все дело в разрешении сомнений. Цитаты, расхваливающие ваш сервис или говорящие о возможном скором повторном обращении, помогут заставить нерешительного посетителя сделать еще один шаг вперед.

■ Если вы описываете преимущества или свойства продукта, с помощью цитат и рассказов посетителей, подчеркните эти преимущества, как показано на рис. 8.8.

Рис. 8.7. Это я написал, оцените текст

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

Аудио - и видеоотзывы

Люди общаются и отвечают людям. Отзыв в виде текста работает, но не так хорошо, как аудио - или видеоотзыв.