7 Смертных грехов веб-дизайна

Posted on by riasevastopol

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

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

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

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

1. Через чур небольшой шрифт

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

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

Согласно данным исследований рынка, средняя длительность концентрации внимания пользователей всемирной сети в 2013 году упала до 8 секунд, что на секунду меньше, чем у золотой рыбки. В том же изучении сообщается, что визитёры сайта просматривают в среднем лишь 28% слов.

7 Смертных грехов веб-дизайна

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

Дабы сходу привлечь интерес визитёров, необходимо:

  • Создать сильные, вызывающие интерес заголовки.
  • Писать весьма интересно, дабы хотелось прочесть больше 28% контента.
  • Применять для заголовков большой шрифт.
  • Убедиться, что главный текст написан удобным для чтения шрифтом.

Для всех перечисленных выше пунктов актуально следующее: за последние пара лет размер шрифта увеличился. Сейчас минимальный стандарт образовывает 14 пикселей, но многие сайты не применяют шрифт меньше 18 пикселей, в особенности в случае если речь заходит о громадных текстах.

Пара примеров хорошего веб-дизайна со шрифтами совершенного размера:

  • 8 актуальных трендов веб-дизайна лендингов

KISSmetrics

Заголовок: 35 пикселей
Футер: 15 пикселей

Vero

Заголовок: 41 пиксель
Главный текст: 18 пикселей

Help Scout Blog

Введение: 26 пикселей
Главный текст: 19 пикселей

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

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

Шрифт текста в футере возможно маленьким, но если вы желаете, дабы визитёры прочли написанное в том месте, выбирайте шрифт не меньше 16 пикселей.

Совет от специалистов: Дабы верно подобрать размер и тип шрифта, скачайте приложение WhatFont. Это плагин для Гугл Chrome, определяющий параметры шрифта по клику на него. Открывайте сайты, дизайн которых вам понравился, и собирайте данные.

  • Как типографика воздействует на конверсию

2. Слайдеры

Тяжело осознать, из-за чего так много целевых страниц все еще применяют подвижные слайдеры. Это трудится? Конверсия растет?

Информация доносится лучше?

Как правило ответ будет отрицательным.

Пип Лайя (Peep Laja), основатель одного из самых известных блогов по оптимизации конверсии ConversionXL, в статье «Игнорируйте моду на карусели и слайдеры (Don t Use Automatic Image Carousels or Sliders)» приводит цитаты специалистов в сфере интернете-маркетинга:

«Мы много раз тестировали динамические блоки и убедились в том, что это малоэффективный метод позиционирования контента» — Крис Говард, CEO WiderFunnel.

«Динамические баннеры — полное зло, и они должны быть срочно удалены» — Тим Эш, CEO SiteTuners

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

Первое изучение проводил юзабилити-гуру Джекоб Нильсен (Jakob Nielsen). Он совершил опрос визитёров сайта Siemens о особом оффере про стиральные машины на основной странице. Сообщение о скидках было написано 98-пиксельным шрифтом , но визитёры его не увидели — оффер затерялся в переключающихся блоках слайдера.

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

Второе изучение проводилось в Университете Нотр-Дам (Индиана, США). Исследователи узнали, что на слайдер кликает около 1% визитёров сайта, причем 84% кликов приходится на первый слайд.

Для чего размещать слайдер, что займет полезную площадь основной страницы и возьмёт только 1% CTR? Для чего досаждать визитёрам мелькающими картинами, за которыми непросто уследить? Быть может, стоит предложить им один вариант, в случае если большая часть и без того выберет первую картину слайдера?

Так отчего же, будучи такими неэффективными, слайдеры так популярны?

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

Но как раз обладатель лендинга/сайта обязан отдавать себе отчет, будет ли данный слайдер действенным и вправду ли это лучший метод донесения информации. Пип Лайя, Крис Говард (Chris Goward, Тим Эш (Tim Ash)) и многие другие узнаваемые интернет-маркетологи больше не верят в это.

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

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

Дизайнеру удалось убедить клиентов отказаться от слайдера и установить на основной странице легко копию флаера, добавив контакты и СТА-кнопку для обратной связи. Вот, что оказалось.

Лендинг с высокой конверсией и отличным дизайном в полной мере обошелся без слайдера. Хорошая работа, не так ли?

С целью достижения подобных результатов на своем ресурсе следуйте этим правилам:

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

3. Неконтрастные шрифты

Еще одна громадная неточность — применение низкоконтрастных шрифтов.

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

Содержимое посадочной страницы должно быть максимально читабельным. В соответствии с изучениям, с возрастом роговица глаза пропускает меньше света: в 40 лет через нее проходит вдвое меньше света, чем в 20, к 60 годам количество поступающего в глаз света уменьшается еще на 20%.

Прибавьте к этому людей с более значительными проблемами со зрением (среди американцев — 9% слабовидящих).

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

Низкий контраст шрифта — это неизменно нехорошая мысль. Ответ простое — постоянно используйте контрастные шрифты: яркие на чёрном фоне и напротив. Иногда появляется необходимость применять цветной шрифт кроме тёмного либо белого. Время от времени дизайнеры применяют светло-серый шрифт на белом фоне и голубой- — на темно-светло синий. Для чего? Неужто так эргономичнее просматривать?

Либо внешние эффекты стали ответственнее содержания текста? Книги печатаются тёмными чернилами на белой бумаге по одной несложной причине — так эргономичнее просматривать. Лендинги и сайты должны направляться этому правилу.

Примеры текста с высоким контрастом:

Help Scout Blog

Evernote

А вот пример контрастного текста поверх изображения, чего не так.

Harry s

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

Дополнительный совет: ответственна не только контрастность текста. Кроме этого будьте аккуратны с применением реверсивного шрифта. Реверсивный шрифт — это белый текст на тёмном (либо цветном) фоне вместо тёмного на белом.

Дэвид Огилви, величайший маркетолог современности, утверждал, что в рекламном тексте ни при каких обстоятельствах не нужно применять реверсивный шрифт. Колин Уилдон, редактор наибольшего в Австралии автомобильного ресурса, решил проверить эту теорию. Полученные им результаты поразительны:

  • тёмный текст на белом фоне: 70% прекрасно, 19% удовлетворительно, 11% не хорошо
  • белый текст на тёмном фоне: 0% прекрасно, 12% удовлетворительно, 88% не хорошо
  • белый текст на фиолетовом фоне: 2% прекрасно, 16% удовлетворительно, 82% не хорошо
  • белый текст на светло синий фоне: 0% прекрасно, 4% удовлетворительно, 96% не хорошо

Страно: результаты тёмного текста на белом фоне фактически противоположны обратному сочетанию!

  • Психология текста: шрифт, цвет, форматирование

4. Неверная высота строчка

Высота строчка в большинстве случаев упускается из виду. Большая часть дизайнеров шепетильно выбирают шрифт, размер, а высоту строчка ставят произвольно.

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

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

Нехорошая новость: дизайнер среднего уровня может не подметить неприятности и выбрать неверное ответ.

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

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

  • Как применять правила дизайна для повышения конверсии

5. Через чур долгая строка

Еще одна вероятная неточность — через чур громадная ширина текста.

Существует ли оптимальная протяженность строчка?

В опубликованной исследовательским университетом Бэймард статье сообщается, что оптимальная протяженность строчка образовывает 50-60 знаков, но повышение впредь до 75 знаков считается приемлемым ответом.

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

Через чур маленькие — нагружают глаза, что скоро утомляет.

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

Для решения данной неприятности университет Бэймард рекомендует выставить большую ширину текста в 516 пикселей, что при применении шрифта 18 пикселей образовывает 65 знаков в строчке. Эти самые комфортные параметры текста для чтения онлайн приведены на картине ниже

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

6. Отсутствие цветовых выговоров на СТА кнопках

Следующий в перечне грехов веб-дизайна — пренебрежение цветовыми выговорами.
Умелые интернет-маркетологи знают, что для привлечения внимания кнопка призыва к действию должна быть яркой. Если вы побуждаете «Приобрести» либо «Попытаться безвозмездно», эти кнопки должны завлекать внимание, дабы визитёры кликали и делали ожидаемые действия.

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

Пара рекомендаций по оформлению кнопок призыва к действию:

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

На картине ниже кнопка призыва к действию оранжевая. Она выделяется на белом фоне, поскольку оранжевый больше не употребляется в дизайне сайта (за исключением небольшой подробности логотипа, но она мала, дабы завлекать внимание).

  • Как дизайн CTA-кнопки может расширить конверсию?

7. Нарушение привычных правил дизайна

И последний, самый тяжёлый грех — отказ от стандартов дизайна.

Стив Круг (Steve Krug) пишет об этом в собственной книге «Не заставляйте меня думать». Он очень выделяет, что визитёры сайтов и лендингов привыкли к определенным функциям в определенных местах. К примеру к тому, что логотип и слоган находятся в левом верхнем углу сайта, а меню — в правом верхнем.

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

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

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

  • Из-за чего стереотипныe лендинги и сайты конвертируют лучше?

Заключение

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

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

Высоких вам конверсий!

По данным: jamesclear.com, image source photographer23

Случайные статьи:

Максим Павлов Notamedia Москва 10 заповедей и 7 смертных грехов веб дизайнера


Подборка похожих статей:

riasevastopol

More Posts