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

На рис. 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 демонстрирует две версии главного изображения продукта со страницы продаж клиента (bibletimelihe.net). Оригинальная картинка была показана в виде графика, но не давала представление ни о размере, ни о деталях.

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

 

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

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

 

Внешний вид

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

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

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

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

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

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

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

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

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

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

 

Рис. 7.27. Два подхода к оформлению tile.co.uk… Но как выбрать правильный?

 

Тесты на доступность

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

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

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

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

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