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

Адаптивный дизайн

Что происходит с вашим необыкновенно красивым и дорогим сайтом, когда кто-либо просматривает его на мобильном телефоне или iPad? До недавнего времени никто особо не задумывался, как дизайн выглядит на различных устройствах, так как мобильные технологии появились относительно недавно. Владельцы сайтов заботились лишь о том, как все будет выглядеть на экране компьютера. Но реальность такова: визуальные разделители, видимые части экрана, контент и изображения смешиваются в ужасном беспорядке в зависимости от устройства просмотра (планшет или телефон). У каждого телефона свои размеры экрана, более того — новые модели появляются на рынке почти ежедневно. Такое буйство технологии озадачивает дизайнеров: приходится думать и о том, как размер экрана влияет на восприятие. Постепенно все осознают, что опыт работы с сайтами может сильно отличаться от восприятия и опыта использования альтернативных устройств.

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

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

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

Компании, применяющие адаптивный дизайн и соответствующие стратегии, получают выдающиеся показатели конверсии. Всегда хочется думать, что вы нанимаете дизайнерскую компанию, действительно способную создать адаптивный сайт. Но прошу вас: не верьте мне на слово. Воспользуйтесь сервисом Google Analytics, чтобы получить информацию об устройствах и размерах экранов ваших пользователей. Велико ли число посетителей, использующих мобильные устройства, чтобы под них оптимизировать конверсию? Только анализ данных может дать ответ; в дополнение ознакомьтесь с результатами исследований других организаций и институтов в этой области. Обоснованное решение вы сможете принять и после изучения трендов индустрии мобильных устройств. Правда, могут возникнуть трудности: не каждая дизайнерская компания озадачивается оптимизацией конверсий, поэтому грамотно выбирайте дизайнеров.

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

Типичные ошибки графического дизайна

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

Не забывайте, что текст — также часть дизайна. Подача текста на странице на самом деле неотъемлемая и важная составляющая графического оформления. Шрифты должны быть комфортны для чтения. Не делайте выбор в пользу более красивого шрифта, а не удобства чтения; вы можете выбрать красивый шрифт только в том случае, если провели тестирование и получили подтверждающие такую необходимость результаты. Остерегайтесь использовать курсив: он, как правило, труден для прочтения онлайн. Если нужно выделить слово или фразу, используйте подчеркивание, жирный шрифт, цвет или контраст.

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

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

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