Веб-дизайн / Теория

809

21-08-2018

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

1. Контент не разбит на логические блоки
Если использовать маленькие отступы между блоками, то содержимое лендинга трудно усваивается и неясно, какой текст должен идти с каким блоком. Для пользователя легче, когда информация сгруппирована логически. Устанавливайте значение padding в диапазоне 120 px-180 px и разделяйте блоки с текстом с помощью цветного бэкграунда.

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

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

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

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

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

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

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

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

10. Неправильная иерархия заголовков
По правилам юзабилити заголовок должен быть больше всех остальных заголовков по размеру. Или же по крайней мере не меньше. В приведенном ниже примере заголовок в шапке значительно меньше по размеру, чем в следующем блоке. Это сбивает с толку. Почему? Он что, более важен? Если же иерархия соблюдена, то вся информация выглядит последовательной и логичной.

11. Двойственный смысл одного элемента
Иногда возможны ситуации, когла один логический элемент в дизайне приобретает два смысла. Например, в данном случае полноэкранное изображение после текста напоминает отдельный независимый блок. Хотя по сути это галерея с картинками. Если же вокруг галереи добавить отступы, то вся композиция будет выглядеть цельной за счет единого заднего фона.

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

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

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

15. Перегруженное меню
Люди посещают сайты, чтобы найти решения их проблем. Помогите им! Используйте меню, чтобы помочь людям ориентироваться на сайте и найти то, что им нужно быстро и легко. Не перегружайте их лишней информацией. Достаточно иметь 5-7 пунктов меню.

Источник: tilda.cc