Мы решили выяснить почему клиентам нравятся «перенасыщенные» дизайны, почему не нужно загромождать дизайн второстепенными элементами и как важно расставить акценты на основных элементах сайта. Какое оптимальное расстояние между блоками и текстами на сайте? И как пустое пространство влияет на восприятие дизайна?
Цель статьи: разобраться, почему клиентам нравятся «перенасыщенные» дизайны; выяснить, почему важно не загромождать дизайн второстепенными элементами и как важно расставить акценты на основных элементах сайта.
Большинство клиентов не имеют опыта в создании сайтов. Они хотят, чтобы в дизайне их ресурса было много всего красивого, множество иллюстраций, блоков и т.д.
У нас есть болезнь — попытка вывалить все и сразу. То есть нам всегда хочется сказать, что мы можем то, мы можем это, мы хорошие, у нас есть 200 тысяч товаров, посмотрите их, пожалуйста, по очереди. Естественно, этого никто не делает, и поэтому у нас несколько больше проблем с интернет-торговлей, чем за рубежом.
Дизайн сайта должен быть ненавязчивым. Не нужно делать чересчур сложный дизайн, цвета не должны быть слишком контрастными.
Имейте ввиду, что большинство пользователей проведут на сайте 15-30 секунд и закроют страницу. По сути, у вас есть, в лучшем случае, полминуты чтобы зацепить внимание пользователя. Отсюда вывод: если у вас на сайте нет мультимедиа-контента, то нужно привлечь внимание пользователей к тексту, который должен выделяться и хорошо читаться.
А что должно окружать тот самый текст, изображение и блоки? Пустое пространство… Воздух… Тот самый воздух, которым дышит и сайт, и бизнес, и все живое!
1. Что такое «воздух»?
Согласно восточной философии, именно пространство первично по отношению к форме. Без внутренней ёмкости кувшин — это просто ком глины, и только наличие пустоты внутри делает его сосудом, о чем гласит одиннадцатый афоризм Лао-Цзы:
- Тридцать спиц сходятся в ступице, но как раз промежутки меж ними составляют суть колеса.
- Из глины делают горшки, но как раз пустота внутри них и составляют суть горшка.
- Стены с дверями и окнами образуют дом, но как раз пространство между ними составляет суть дома.
Вывод: тексты, блоки, изображения на сайте несут пользу, но именно пустое пространство помогает увидеть общую концепцию сайта, заставляет работать все элементы правильно.
Воздух, или контрастное пространство — это отступы между элементами композиции.
Поговорим о том, как правильно этот воздух использовать и почему не нужно бояться переборщить c пустым пространством.
Внимательно рассмотрите проект, представленный ниже.
Он сделан довольно хорошо: здесь достаточно воздуха, и каждый элемент может работать так, как ему полагается. Есть яркое меню, презентация компании, есть конкретные элементы, которые обеспечивают конверсию (то есть человек по ним зашел, задал вопрос, что-то заказал и т.д.), есть достаточное расстояние между текстовыми блоками — все это делает сайт читабельным.
Рассмотрим еще один проект.
Здесь внимание рассеивается: непонятно, куда смотреть и что главное, не удается «быстро» воспринять сайт. Шрифт под блоками не читается из-за насыщенного красного цвета, который сам по себе притягивает слишком много внимания.
2. Что помогает сайту «жить» и «дышать»?
У каждого сайта должны быть этапы, на которые делится взаимодействие с пользователем.
Сначала человек приходит на сайт и в течении 5-10 секунд решает, нужен он ему или нет. То есть информация на сайте должна быть структурирована, а элементы располагаться по иерархии.
У любого сайта должно быть достаточно много «входных точек» — объектов, которые цепляют взгляд. Минимум 4-5 таких элементов должны располагаться где-то наверху страницы.
Пример. Я захожу на сайт, у меня есть проблемы:
- меня не понимают на работе;
- я хочу в Испанию;
- у меня болит голова;
- я хочу заняться скалолазанием;
- я не знаю, как солить сало.
То есть на сайте обязательно должны быть поданы основные элементы (информация об Испании, курсы скалолазанья, рецепты и т.д.), и они должны восприниматься максимально быстро: быстро просмотрел — и за что-то зацепился.
Нужно привлекать человека к его проблемам.
Предположим, у вас есть страшная проблема. Она убьет вас, если вы ее не решите, а на этом сайте вы можете найти что-то, что вам поможет.
И, соответственно, должно быть много белого пространства между блоками, хороший контраст:
- яркие вещи — они всегда зацепляют;
- вещи вторичные — с ними человек знакомится более подробно, уже когда решит, что остается на этом сайте и будет его читать;
- должно быть пространство, чтобы элементы не склеивались; когда сайт превращается в сплошное пятно, это смерть для него.
3. Еще раз о воздухе и структуре
Остерегайтесь излишней «богатости» — она склеивает сайт в одно большое пятно.
Когда на вашем ресурсе переизбыток различных стилевых элементов (иллюстраций, ярких фонов), его хочется как можно быстрее покинуть — проще найти то, что нужно, у конкурентов.
Помните о структуре и смысле — оформление должно их подчеркивать.
Сначала нужно хорошо изучить свою аудиторию: понять, чего она боится, о чем мечтает, к чему стремится, какой язык лучше всего понимает. После этого желательно нарисовать некую модель взаимодействия — это предварительная стадия, которая необходима перед дизайном.
Что касается текстов, то в идеале их нужно написать еще до того, как вы пойдете заказывать сайт, чтобы в дизайне было видно, как это по-настоящему будет работать.
Рецепт проверки, как работает воздух и структура: покажите своему клиенту сайт на 5 секунд, после чего спросите, о чем он и что там интересного.
4. Что больше всего мешает пользователям на сайте?
- Незаметные маленькие заголовки или их отсутствие
- Маленький междустрочный интервал
- Однородный текст, отсутствие списков
- Маленькие отступы перед абзацами
Кто-то рассчитывает, что человек сядет на полчаса и будет внимательно рассматривать весь сайт. Так не бывает. Человека сначала нужно заинтересовать.
Работайте над заголовками! Делайте их достаточно большого размера. Делайте отступы перед ними и после них. Не пытайтесь спрятать заголовки за картинками.
Старайтесь сделать сам заголовок интересным. Помещайте в него проблемы вашей аудитории, их стремления и желания — заголовок должен быть «вкусным».
Когда хороший копирайтер пишет продающий текст, он, как правило, 15 % времени тратит на основной заголовок.
Посмотрите, как может выглядеть один и тот же текст с разным междустрочным интервалом:
Длинный кусок текста и маленькое расстояние между строчками — как правило, такое читать невозможно. Старайтесь, чтобы расстояния было больше, чтобы чувствовался «воздух», чтобы текст можно было пробежать взглядом быстро:
Однородный текст также читать сложно. Можно добавить списки, графики, фотографии, подзаголовки, сделать более короткие абзацы.
Также рекомендуется делать абзацы в начале строк. Абзац должен быть заметен. Заметен хорошо! В таком случае показатель отказов на сайте значительно снижается.
Вывод: красота начинается, прежде всего, из простоты. Чем проще, тем лучше — тем понятнее.
Вы же любите своих пользователей? Вот и делайте все, чтобы им было комфортно находиться у вас на сайте.
Мы желаем вам правильно управлять воздухом на ваших сайтах, чтобы поток посетителей не заставил себя долго ждать.