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

■ доступность;

■ заметность;

■ навигация;

■ зрительный образ;

■ вид и ощущение.

Доступность

Если посетители могут найти знаки, чтобы ответить на золотой вопрос («Я в нужном месте?») в первые несколько секунд, они, скорее всего, решат, что движение вперед более интересно, чем отказ от движения, это означает, что вы получили их внимание. Если они не найдут эти знаки, вы потерпели поражение в битве за внимание.

Я называю качество того, как легко «дойти» до цели страницы, доступностью.

Первая задача страницы состоит в том, чтобы утверждать «Да — вы в нужном месте». Когда у страницы хорошая доступность, посетители скажут: «Я понимаю ее и я знаю, что делать дальше», и им не требуется особенно задумываться. Нужные им признаки выскочат прямо на них. Это означает, что эти ключевые признаки должны быть первым, что они заметят.

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

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

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

Один из самых эффективных способов повысить доступность — это избавиться от всех ненужных вещей. Выявите свойства, которые могут помочь ответить на вопрос «Я в нужном месте?», и попробуйте убрать все, что не может. В результате должно освободиться больше места для контента, имеющего значение, что может только повысить ваши шансы привлечения чьего-то внимания. Чистая простота поисковой страницы Google с одной основной функцией, которая приковывает внимание, является одним из главных факторов его успеха.

Вы можете упростить любую составляющую контента или дизайна, включая макет. Рисунок 7.18 иллюстрирует эксперимент, который мы проводили над предыдущей версией страницы продаж «Сохраните пиксель». Убрав колонку слева с навигационными опциями, заменив поле подписки на новостные рассылки и дополнительную информацию, мы увеличили продажи на 20,5%. Поскольку уменьшилось количество вещей, рассеивающих внимание посетителя, оставшиеся стали выглядеть более акцентированными на основной идее.

Рис. 7.18. Убрав боковую колонку со старой страницы «Сохраните пиксель», мы получили рост продаж на 20,5% благодаря акценту на предложении

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

Заметность

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

Рис. 7.19. имеет минималистский дизайн, который сосредоточивает внимание на значимом контенте

Я выделяю восемь факторов дизайна, которые могут повлиять на заметность:

■ размер;

■ контраст;

■ жирность;

■ цвет;

■ расположение;

■ пространство;

■ эффекты;

■ движение.

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

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

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

Размер

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

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

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

Рис 7.20. Уменьшение количества визуальных элементов позволяет привлечь внимание к самым важным местам

Контраст

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

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

Рисунок 7.21 показывает дизайн EventRight с использованием размытия, основное внимание привлекают логотип (сверху и слева), главный слоган (сверху и справа), полоса навигации, фотографии внизу справа и черный заголовок в верхней части контента. Заголовок на полосе заголовка не так уж заметен, потому что был использован белый цвет на фоне средней насыщенности, попробуйте использовать черный текст или сделать фон контрастнее.

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

Рис. 7.21. Используйте тест с размытием, чтобы проверить, сколько контрастных областей используется на вашей странице

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

Интенсивность

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

Цвет

Цвет работает аналогично контрасту — создает различия между элементами. У страниц должна быть общая цветовая гамма (которая может быть неброской и гармоничной или дерзкой и кричащей в зависимости от бренда).

Существует два базовых принципа использования цвета:

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

■ Используйте контрастные цвета (обычно с противоположных сторон цветового круга), чтобы привлечь внимание к конкретным свойствам.

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

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

Расположение

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

Не размещайте вверху страницы слишком много, ваш ключевой контент рискует оказаться «за линией сгиба» (то есть посетителю придется прокрутить страницу, чтобы его увидеть)!

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

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

Пространство

Свободное пространство вокруг любого элемента делает его заметнее. Форму (силуэт) объекта легче узнать, если она не зажата другими элементами.

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