Основные принципы дизайна

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

Зрение

Легкость и простота. Дизайн должен восприниматься легко и просто. Чем ненавязчивее выглядят элементы дизайна, тем проще считывается информация.

Знаменитый маркетолог Джозеф Шугерман писал: «Основная задача любого графического элемента (на странице) – заставить человека прочитать первое предложение рекламного послания».

Возьмем для сравнения два сайта.

• На одном сайте информация плохо структурирована, на странице мало свободного места, доминируют кислотный розовый и зеленый цвета.

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

Не нужно делать по 40 кнопок «заказать» на одном экране. Это неудобно, некрасиво и усложняет восприятие.

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

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

Наглядность. Каждый элемент лендинга нужно подтвердить чем-либо: картинкой, фоном, фотографией. Если вы даете гарантию, то она может быть оформлена в виде сертификата. Если вы цитируете газету, то вставьте на сайт логотип этого СМИ. Иллюстрации служат для пользователя дополнительным источником информации.

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

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

Рис. 5.1. Что продает этот сайт?

Раскроем интригу: это крупная компания по продаже мебели. Здесь, как любят у нас в России, все очень красиво и богато, но ни один принцип дизайна – легкость, простота, функциональность, наглядность, удобство восприятия – не соблюдается.

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

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

Единственная конверсионная форма – «Подписаться на новостную рассылку», что явно не способствует увеличению входящих звонков.

Второй пример – обратный (рис. 5.2). Google AdWords – легкий для восприятия сайт, мало текста, выгода сразу ясна, есть заголовок. Пользователю понятно, что делать, какую кнопку нажимать, каждый элемент находится на своем месте. Пользователь вводит запрос и видит в объявлении ключевое слово.

Рис. 5.2. Google AdWords

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

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

Память

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

Для группировки элементов используются фон, заголовок, подзаголовок, визуальные элементы (фото, иллюстрации, графика и т. д.).

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

Чтобы показать выгоды в заголовке, по максимуму задействуйте подзаголовки. Например, в заголовке вы пишете одну выгоду и в подзаголовке еще три.

Принцип четырех элементов действует для всех блоков посадочной страницы. Хотите сделать пакетные предложения продукта, разные варианты комплектаций товаров? Сделайте 3–4 варианта комплектаций, больше не нужно, иначе клиент в них запутается.

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

Самая сложная борьба – это заставить человека вообще что-то сделать. Поэтому нужно постоянно просить человека с вами связаться и оставить свой контакт.

Обратите внимание на одностраничник (рис. 5.3). Это сайт, продающий услуги разработки дизайна интерьеров. Выгоды представлены триггерами с правильным количеством элементов.

Рис. 5.3. Пример дизайна одностраничника

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

Русскоязычная аудитория воспринимает информацию и читает слева направо, сверху вниз. Это так называемый F-образный шаблон восприятия (рис. 5.4).

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

Рис. 5.4. F-образный шаблон

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

Избегайте лесенок с текстом. Посетителю сайта будет сложно перепрыгивать взглядом со строки на строку.

Обратите внимание на этот скриншот. Человек лучше воспринимает то, что находится в левой колонке, а то, что в правой, – вне зоны его внимания.

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

Рассмотрим рисунок, на котором изображена поисковая выдача «Яндекса» (рис. 5.5).

Рис. 5.5. Поисковая выдача «Яндекса»

Везде информация представлена в виде буквы F: заголовок, текст объявления, домен. Это скриншот старый, сейчас объявления в «Яндекс.Директ» выглядят немного по-другому, так как разработчики компании постоянно тестируют сайт. Зайдите на него, возможно, вы найдете для себя пару интересных решений.

В следующий раз также обратите внимание, как спроектированы сайты, которые вы часто просматриваете. Вы увидите, что практически все построено по F-образному шаблону.

Внимание

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

Важные элементы выделены. Важные элементы нужно выделять. Человеческое внимание концентрируется на чем-то одном. Обычно на том, что выделено из общего. Но будьте осторожнее…

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

Всегда учитывайте, что существует два типа пользователей:

• пользователи-логики, которые дотошно и внимательно просматривают весь сайт и читают все тексты, записывают, анализируют и составляют итоговую Excel-табличку;

• пользователи-торопыги, которые быстро принимают решения и читают только заголовки, подзаголовки и то, что выделено жирным.

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

Обратите внимание на рис. 5.6. Понятно, что это карточка товара, и ясно, что продается книга. Единственное, что не вошло в скриншот, – это кнопка заказа. Все элементы сгруппированы, выделена категория, подкатегория, картинка, цена.

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

Рис. 5.6. Пример карточки товара

Рис. 5.7. Пример посадочной страницы

Одна группа элементов находится на одном экране (рис. 5.7). Это просто идеальный пример посадочной страницы от компании Optimizely. Разработчики пошли еще дальше и сократили даже основные элементы до минимума.

Причина в том, что Optimizely – известная компания по оптимизации сайтов. Они оставили только заголовок, поле для ввода ссылки и кнопку «начать тест».

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

Слух

Человек воспринимает сайт как книгу. Человек взаимодействует с любым предметом на основе предыдущего опыта. Например, люди неосознанно воспринимают сайты как книги.

Звук – это сигнал опасности. Не используйте звуки. Почему многие пользователи не любят звонить? Почему они заказывают обратные звонки или отправляют заявки? Ведь позвонить гораздо проще?

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

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

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

Приведем пример немного из другой плоскости.

Любой резкий звук – это сигнал опасности. По этой причине все видео, которые загружаются на «автоплей» (когда происходит автозапуск видео на сайте) или когда вы закрываете сайт и на экране компьютера появляется форма stop exit: «Подождите, я хочу подарить вам подарок!», – нас очень пугают. Эти часто применяемые в последнее время «фишки», как правило, только снижают конверсию в дальней перспективе, а не увеличивают ее. Ведь мы вряд ли захотим возвращаться в место, где нас ждет опасность.