Сайт с однотипным фоном любой цветовой гаммы, закрывают чаще, чем с меняющейся цветовой гаммой фона.
Рассмотрим 2 примера лендинг пейдж с одинаковым содержанием:
1 вариант
2 вариант
На практике 2 вариант будут просматривать дольше, а первый многие даже не будут прокручивать вниз. Соответственно у 2 варианта будет в разы больше заказов, чем у первого.
Важно: Как показывают наблюдения на сайтах с меняющимся фоном, время просмотра страницы выше, чем с однородным. Меняющийся фон на бессознательном уровне воспринимается как блок с другим смысловым содержанием. Создается эффект сюрприза, ведь фон ассоциируется с чем-то новым.
Посетителю просто интересно узнать что находится в блоке отличающимся цветом, т. к. любопытство — это естественная черта любого человека. Проще говоря, если посетитель увидит внизу экрана другой цвет фона, то с большей вероятностью прокрутит страницу и прочитает содержание этого блока, чем если бы он был однотонным.
Как вы понимаете, чем дольше получится удержать посетителя на вашем сайте, тем больше ваших преимуществ он узнает, следовательно повысится уровень доверия и вероятность звонка или оставления заявки. Сайты с однотонным фоном прокручивают значительно реже, чем с меняющимся.
Правило чередования работает только в том случае, если посетитель увидит это чередование. По статистике около 60% посетителей вообще не прокручивают страницу вниз, это означает, что если вы сделаете на сайте чередующийся фон и его не будет видно на первом экране, то толку от него будет значительно меньше.
Важно: Фон должен меняться уже на первом экране, т. е. зайдя на страницу посетитель должен видеть часть другого фонового цвета без прокрутки страницы. Именно эта часть другого цвета увеличит желание прокрутить страницу.
Правильно
Неправильно
Не переборщите с яркостью. Старайтесь, чтобы в области просмотра видимой части сайта одновременно было не более 2 ярких цветов, иначе может рябить в глазах. Проще говоря, при частом чередовании (более 2-3 раз в видимой области), уменьшайте яркость используемых красок, чтобы сайт не рябил в глазах.
Правильно (Стандартное и контрастное чередование)
Правильно (более мягкие цвета, при частом чередовании)
Как вы можете видеть, во 2 примере выше необязательно делать отличающие цветом полоски во всю ширину экрана, как у landing page. Можно просто выделять абзацы, разным цветом.
Важно проверить как ваш сайт выглядит на мобильных устройствах и компьютерах, чтобы вы знали где заканчивается первый экран и насколько умещаются разные цветовые блоки по высоте. Учтите, что размер видимой области зависит от разрешения экрана(количество пикселей), поэтому рекомендуется проверять сайт на наиболее популярных разрешениях, указанных в таблицах ниже.
| Компьютеры и ноутбуки | |
| Разрешение | % от всех посетителей |
| 1366x768 | 20.74 % |
| 1920x1080 | 12.22 % |
| 1280x1024 | 6.84 % |
| 1600x900 | 4.48 % |
| Телефоны и планшеты | |
| Разрешение | % от всех посетителей |
| 360x640 | 18.78 % |
| 375x667 | 4.45 % |
| 320x568 | 3.84 % |
| 1024x768 | 4.10 % |
Данные в таблицах выше указаны на основе статистики счетчика hotlog за март 2018 г.
Указанные выше данные статистики, обобщенные и в реальности могут существенно меняться в зависимости от вашей тематики. Например, если ваши посетители офисные работники, то около 80% из них будут заходить с ноутбуков, компьютеров и 20% с телефонов, планшетов. Если ваша целевая аудитория — женщины, то все может быть наоборот, т. к. они чаще пользуются телефонами и планшетами.
Важно: В связи с тем, что соотношения используемых разрешений экрана в разных тематиках может отличаться, лучше ориентироваться не на таблицу выше, а на реальные данные счетчиков вашего сайта, в частности Яндекс метрики, если они были установлены.
Статистику по счетчику нужно смотреть за период, в котором было не менее 100-200 уникальных посетителей(чем больше, тем лучше), иначе будет большая погрешность и искаженные данные.
Если же вы только разрабатываете сайт и у вас нет статистики разрешений посетителей, то ориентируйтесь на указанные выше обобщенные данные в таблицах.
Аналогичные правила применяйте для остальных частей сайта, т. е. на протяжении всей страницы должно происходить чередование цветов в тех же пропорциях, что и на первом экране, т. е. высота слоя с каждым цветом должна быть в идеале не более 90% от высоты видимой области.
Неправильно
Неправильно
Конечно же, сделать высоту различных блоков с чередующимся фоном для всех разрешений, по описанным выше правилам, задача трудоемкая и не всегда реализуемая из-за цены, времени на разработку и других ограничений. Поэтому можно ограничиться оптимизацией под наиболее популярные разрешения экрана, это повысит удобство и позволит увеличить время просмотра сайта.
Вы можете столкнуться с ситуацией когда содержание смыслового блока не умещается в область 1 экрана, в этом случае возможны 2 варианта:
1. Экономный. Разделить цветом отдельные смысловые части, даже если их высота более 90% от видимой области экрана. Как говорится, это лучше, чем ничего.
2. Сбалансированный. Разделить цветом отдельные смысловые блоки + сократить их высоту до 90% от высоты экрана и поставить кнопку подробнее, при нажатии на которую откроется полное содержание уменьшенной части на этой же странице, которое по умолчанию скрыто. Также можно один смысловой блок содержания разделить на несколько.
На примере показан фрагмент статьи на сайте, в которой внутри единой смысловой части происходит дополнительное разделение фрагментов текста, чтобы повысить интерес к чтению.
Конечно, же описанное выше не просто реализовать, но чем ближе к этому идеалу вам удастся приблизиться, тем больше заявок с сайта вы будете получать.
