Есть такая пословица: «Встречают по одежке, а провожают по уму». Эта пословица актуальна и в наши дни, ведь когда мы не знаем человека, можем составить наше представление только по внешнему виду.
Данная пословица применима и к дизайну сайта, ведь первое представление о сайте в течение 1-2 секунд складывается на основании визуального оформления. Если посетителю не понравится дизайн, то он может закрыть сайт, даже не читая содержание, т. к. во многих нишах большая конкуренция. Посетителю проще зайти на 10-20 сайтов, выбрать несколько понравившихся по внешнему виду и сравнить на них условия, чем подробно изучать первый попавшийся, а особенно с посредственным дизайном. В данной статье мы рассмотрим как создать продающий дизайн сайта.
Под первым экраном подразумевается область сайта, которая отображается у посетителя без скролинга(прокрутки страницы). Зрительная информация воспринимается значительно легче и быстрее, чем текстовая, поэтому в первые секунды изображение или визуальное оформление играет главное значение. Дизайн вашего сайта — самый первый критерий, на основании которого посетитель решает будет ли он просматривать содержание или сразу закроет его.
Если посетитель в первые 1-2 секунд на первом экране не увидит визуального подтверждения, что на сайте есть необходимая для него информация, то скорее всего, закроет его в первые же секунды, причем часть людей даже не будет читать текст.
Конечно, даже без визуального подтверждения найдутся посетители, которые будут читать текст, даже если не найдут визуальных тематических изображений в первые секунды, но их будет меньше, а значит количество заказов тоже ниже. Чтобы получать максимум заказов, дизайн продающего сайта должен отражать его содержание, иначе говоря, если убрать текст, то должно быть понятно о чем ваш сайт.
Посмотрев на сайт у посетителя в первые 1-2 секунду должно появиться понимание, что здесь есть информация, которую он ищет. Например, если вы занимаете ремонтом телевизоров, то на первом экране должен быть изображен телевизор, если вы продаете подушки, то они должны быть на первом экране без прокрутки.
Важно: Как и где будет располагаться визуальная информация внутри дизайна или в основном содержании — не так принципиально. Главное, чтобы посетитель увидел визуальное подтверждение тематики сайта именно на первом экране без прокрутки страницы. Чем выше будет визуальная информация, тем она заметнее.
Также учтите, что сейчас около половины посетителей заходят с мобильных телефонов и планшетов, у которых размер экрана меньше, чем у ноутбука или монитора компьютера, поэтому обязательно проверяете как выглядит ваш сайт на разных мобильных устройствах.
 |
 |
На первом экране без прокрутки есть визуальное отражение сферы деятельности(в нашем случае ноутбук), посетитель в первые 1-2 секунды понимает, что на этой странице может найти решение.
 |
 |
На первом экране выше без прокрутки нет визуального подтверждения сферы деятельности, такие сайты многие посетители закрывают в первые 1-2 секунды, даже не читая текст. Сайты без тематических изображений просматривать неинтересно и скучно, особенно если у конкурентов они есть.
Важно: Для интернет-магазинов, визуальное оформление должно быть проще, чему у обычного сайта потому что, чем больше визуальной информации вы используете в дизайне, тем менее заметны становятся сами товары, вследствие — снижение покупок. Если у вас интернет магазин, то рекомендуется вообще не использовать в его дизайне товары, чтобы не отвлекать внимание от продающихся.
Остальные правила для интернет магазина такие же — на первом экране посетитель должен увидеть визуальное подтверждение, что попал туда куда хотел, т. е. на первом экране должны быть видны фотографии товаров на всех страницах каталога. И чем выше товары будут находиться на странице, тем заметнее и будет больше заказов.
Посмотрите на дизайны крупнейших интеренет магазинов:
 |
 |
Выше представлены дизайны 2 наиболее крупных интернет магазинов в России. Как видите, у них нет никакого фона с изображением техники и других декоративных элементов. Для интернет магазина, чем проще оформление, тем лучше, чтобы все внимание было к товарам, а не к декорации.
А теперь посмотрите как не надо делать дизайн интернет магазина:
 1 |
 2 |
На 1 сайте совсем ненужная красная шапка, которая привлекает к себе внимание ярким цветом, уводя взгляд от товаров. Также много пустого места в верхней части, которое только снижает видимость товаров, а значит и вероятность покупки.
Если разместить все элементы компактно, чтобы не было пустых мест и ненужной ярко-красной части сверху, то на первом экране можно будет разместить еще 3 товара, а значит конверсия вырастит, т. к. многие не прокручиваются страницу вниз.
На 2 сайте такая же ошибка — ненужная шапка с гирляндами, оттягивающая внимание от товаров и понижающая их видимость.
3
У 3 сайта в шапке дизайна изобразили товары, которые нельзя купить. Они также отвлекают от просмотра остальных товаров и уменьшают их общее количество, которое можно разместить на странице без прокрутки.
Вывод: Чем проще дизайн интернет магазина и выше на странице находятся продающиеся товары, тем лучше.
В одних тематиках дизайн должен быть очень простым и аскетичным, в других более насыщенным. Ниже подробно описана зависимость степени насыщенности графикой от типа сайта и целевой аудитории.
а. Посетители по рекламе (средняя насыщенность оформления). Посетители, перешедшие по рекламе наиболее требовательны, т. к. сравнивают вас с конкурентами, поэтому их нужно чем-то зацепить в первые 1-2 секунды. Насыщенный дизайн может быть одним из способов вызывающим интерес к просмотру остального содержания.
б. Постоянные клиенты (низкая насыщенность оформления). Посетители, которые повторно обращаются за совершением заказа более лояльны, чем перешедшие по рекламе, поэтому нет смысла вызывать интерес насыщенным оформлением, чтобы они остались на сайте. Дизайн для них практически не играет роли, значительно большую роль играет удобство поиска необходимых товаров или услуг и совершение заказа.
Насыщенное визуальное оформление, наоборот, может отвлекать, мешая сконцентрироваться на выборе и совершении заказа.
Сайт с обыденным, рутинными услугами(низкая или средняя насыщенность оформления). Если вы предоставляете обыденные услуги(курьеры, клининг, металлопрокат и т. п.), в которых мало творческого подхода, то и больших требований к оформлению не будет. Причина в том что сайт ассоциируется с компанией, и если творческий подход не влияет на качество ваших услуг, то и посетитель не будет искать подтверждения ваших творческих способностей в дизайне.
В то же время не нужно делать сайт совсем простым т. к. насыщенность оформления позволит зацепить посетителя в первые секунды и повысит интерес к просмотру содержания. Визуальное оформление поможет сделать сайт более запоминающимся среди остальных. Также визуальное оформление поможет закрыть пустоту на экране.
Клининговая компания с простым дизайном(рутинные услуги).
Срочные товары или услуги(низкая насыщенность оформления). Существуют товары или услуги, которые требуются срочно, например: «Стоматология, эвакуатор, доставка суши,...» В этом случае изобилие графики может только снизить конверсию, потому что любой яркий элемент притягивает к себе взгляд, мешая сконцентрироваться на основном содержании, в итоге посетитель получит меньше информации о вашем предложении, поэтому вероятность заказа будет меньше. Помните, что темный текст лучше читается на светлом фоне, чем светлый текст на темном фоне.
Сайт услуг эвакуатора без насыщенного оформления(срочные услуги).
Сайт с творческими услугами(высокая насыщенность оформления). Если вы предоставляете творческие услуги(дизайн, праздники, декор и т. п.), то посетители захотят увидеть в оформлении сайта подтверждение ваших креативных возможностей. Более насыщенное оригинальное оформление поможет выделиться среди конкурентов, зацепить посетителя в первые секунды и он с большей вероятностью продолжит просмотр содержания страницы.
В общем, дизайн на сайте творческих услуг ассоциируется с уровнем ваших творческих возможностей, поэтому используйте насыщенное и креативное оформление, это повысит доверие к вам.
Сайт компании по дизайну интерьеров с насыщенным оформлением.
Интернет магазин(низкая насыщенность оформления). Также как и в случае с информационным сайтом, красочное оформление интернет магазина будет притягивать к себе взгляд и отвлекать от товаров, в результате снижение продаж. Свободное пространство на сайте лучше использовать для подкатегорий, различных фильтров, сортировок(цена, популярность) и др. навигационных ссылок, помогающих быстрее выбрать интересующие товары.
Дизайн интернет магазина Ozon без насыщенного оформления.
Небольшой интернет магазин (средняя или высокая насыщенность оформления). Если у вас небольшой интернет магазин, например, на 20-30 товаров, то может быть пустое место. Это пустое пространство в обычных магазинах обычно используется для панели навигации (ссылки подкатегорий, фильтры, сортировки и др.). Но для небольшого интернет магазина панель навигации очень простая и небольшая, т. к. товаров мало, поэтому свободное пространство лучше заполнить элементами оформления дизайна.
Дизайн небольшого интернет магазина Bork c насыщенным оформлением, чтобы закрыть пустоту, которая появляется из-за малого количества товаров и фильтров для их сортировки.
Информационный сайт (низкая насыщенность оформления). Цель посетителя на информационных сайтах — узнать информацию, поэтому насыщенность красок должна быть сведена к минимуму, чтобы оформление не отвлекало взгляд от информационного наполнения. Например, на сайтах поисковых систем, справочниках и др. ресурсах вы не увидите красочного оформления.
Товары и услуги для творческих людей с гуманитарным складом ума(высокая насыщенность оформления). Как правило, у творческих личностей, особенно с гуманитарным складом ума хорошо развито правое полушарие мозга, отвечающее за воображение, поэтому для них важно, чтобы визуальное оформление было насыщенным. Аскетичный и простой дизайн для творческих людей может показаться скучным и неинтересным.
Школа фотографов с насыщенным дизайном.
Товары и услуги для людей с математическим складом ума(низкая насыщенность оформления). У людей с математическим складом ума, как правило, хорошо развито левое полушарие мозга, отвечающее за логику, поэтому факты, технические характеристики и другая детальная информация будет важнее, чем визуальное оформление.
Школа шахмат с аскетичным дизайном.
Даже сейчас встречаются сайты, от посещения которых рябит в глазах, происходит это от переизбытка ярких цветов. У особо чувствительных людей может начать болеть голова или даже появится головокружение, соответственно такие сайты стараются избегать и сразу закрывают, потому что при их просмотре приходится сильно напрягаться.
Один из вопиющих примеров(производитель изделий из металла) ниже:
После посещения такого сайта, сразу хочется его закрыть.
1. Поделить все элементы на высокоприоритетные(кнопки заказа, цены, акции), нейтральные(изображения, иконки, основной текст и т. п.) и низкоприоритетные(доп. возможности, навигационные ссылки меню, фон сайта и т. д.)
2. Использовать яркие цвета только для самых важных элементов на сайте, а для остальных более бледные.
3. Правило 30%. По возможности все приоритетные яркие элементы располагать в одной области экрана(слева, справа, снизу или сверху) так, чтобы они все уместились области не более 30% от высоты и ширины общего экрана, т. е., чтобы не было 2 ярких кнопок в противоположных частях экрана, например, сверху и снизу или слева и справа. Иначе одни яркие цвета будут притягивать взгляд, уводя от других, не давая сконцентрироваться на одной области. Вследствие, взгляд будет постоянно бегать между яркими элементами, пока посетитель не решит закрыть сайт от напряга.
В каталоге интернет магазина, кнопки «Подробнее» сделали бледными, чтобы они выделялись меньше, чем фото товара и не отвлекали от выбора. Если кнопки сделать ярко-желтыми, то будет нарушено правило 30% и взгляд начнет бегать между ними, мешая сконцентрироваться.
В данном интеренет магазине есть только один яркий красный элемент — информация о быстрой доставке и он занимает не более 30% от длины и ширины экрана.
Важно: Если яркие элементы не умещаются в одной области не более 30% от длины и ширины экрана, то их цвет нужно делать более бледным до тех пор, пока их яркость не сравняется с другими элементами, иначе сайт будет напрягать.
Как проверить степень яркости: Отвернитесь от экрана, а потом поверните голову и посмотрите, куда ваш взгляд уходит в первую секунду, это и будет наиболее яркий элемент.
Посмотрите на примеры ниже и вы убедитесь, что просматривая пестрый сайт, взгляд постоянно бегает по самым ярким элементам и тяжело сконцентрироваться на основном содержании, вследствие появляется желание его закрыть, т. к. он напрягает глаза и нужно тратить больше усилий, чтобы найти нужную информацию.
 |
 |
В обоих вариантах, показанных выше, не соблюдается «правило 30%» и взгляд бегает по ярким элементам, вследствие тяжелее пользоваться сайтом и находить нужную модель в каталоге. Нужно либо уменьшить количество ярких элементов согласно «правилу 30%», либо все яркие элементы сделать более бледными до той степени, чтобы их яркость не превосходила яркость остального, т. е. если отвернуться и посмотреть на экран, то в течение первой секунды взгляд должен концентрироваться не на текущих ярких элементах, а на основном содержании.
Чем больше цветов находится в видимой области на сайте, тем тяжелее им пользоваться, потому что взгляд начинает по ним бегать, вследствие сложнее сконцентрироваться и появляется желание закрыть раздражающий сайт. Выход — использовать не более 4-5 цветов в видимой области экрана. Например: черный(текст), белый(текст, фон), синий(фон, ссылки), зеленый(кнопки online заявок).
В принципе вы можете использовать любое количество цветов на сайте, но важно, чтобы в видимой области было не более 4-5. Никто не мешает, вам сделать синий фон сверху, в середине зеленый, а внизу темный, главное, чтобы они располагались на расстоянии друг от друга, чтобы в видимой области экрана не было более 4-5 цветов.
Сейчас около половины посетителей в интернете заходят с мобильных телефонов и планшетов. В одних нишах доля мобильных посетителей может быть выше 90%, в других менее 10%. Точные данные можно узнать, посмотрев вашу статистику(в Яндекс метрике «Отчеты»->«Станадртные отчеты»->«Технологии»->«Устройства») за последний месяц или год.
В большинстве сфер деятельности доля мобильных посетителей будет существенной, поэтому постарайтесь избегать ошибок, описанных ниже, чтобы повысить число заявок с сайта.
Cайт отображается частично. Если часть сайта выходит за пределы экрана, то посетителю потребуются дополнительные действия для просмотра закрытой области содержания, а значит и заявок будет меньше, потому что многие не листают страницу, если на первом экране сразу не находят ответ на свой запрос.
Сайт некорректно отображается. Такие страницы сразу закрывают, поэтому убедитесь что у вас все хорошо.
Важно: Ваш сайт ассоциируется с качеством ваших товаров или услуг, поэтому когда страница некорректно отображается, доверие к вашей компании снижается, а значит и заявок будет меньше. К тому же, в голове посетителя начинают появляться мысли, что если компания не может позволить себе качественный сайт, значит она небольшая и ненадежная.
Обязательно проверьте как ваш сайт выглядит:
- на мобильном телефоне, а лучше нескольких;
- на планшете, а лучше нескольких;
- на ноутбуке или компьютере с разными разрешениями(1024x768; 1280x720; 1600x900; 1920x1080 и выше 1920x1080).
Также можно проверить как отображается сайт с помощью специальных сервисов( google test, mattkersley.com, responsinator.com и др.), но учтите, что эти сервисы могут предоставлять некорректную информацию, поэтому лучше смотреть на реальных устройствах.
Все проверки лучше делать минимум в 2 разных браузерах на всех устройствах.
