Я давно хотел написать что-либо полезное на такую благородную тему, как эта, но мне постоянно удавалось найти какую-то другую, более легкую в восприятии читателей тему, и всё таки сегодня я решился.
Написать именно сегодня я решил спонтанно, неожиданно, т.к. не нашел никакой конкретной информации об этом инструменте юзабилити в рунете. Зарубежом я нашел всего несколько статей посвященных whitespace в очеловечивании сайта, но они оказались довольно таки полезными, и я их с удовольствием почитал, а теперь хочу восполнить пробел и в статьях рунета.
Как ни странно и загадочно бы это звучало, но данный вид разделителя накорню забывается практически всеми начинающими юзабилистами — ведь кажется, что лучше использовать линии, цвета, полосы, чтобы отделить несколько блоков друг от друга — это самая большая ошибка, которую только можно допустить.
Изначально пустое, белое пространство — чистый лист. Я думаю, вы наверняка рисовали когда-то на обычном листе А4 формата. Так вот — когда вы рисовали несколько рисунков я глубоко сомневаюсь, что вы использовали в качестве раздлителя своих каляк-маляк линии. Наверняка вы рисовали небольшие рисунки в разных частях листа, и это помогало воспринимать их как отдельные элементы. Та же ситуация и в сайтостроении — чтобы показать, что какой-либо элемент не принадлежит другому, или не является с этим самым другим одним целым — их нужно разделить. Логично? Я думаю да. А делить мы будем девственным, белым пространством.
Что?
Итак, для начала давайте подумаем над самим определением для белого пространства, или как его называют зарубежом — whitespace.
WhiteSpace (или Белое пространство) — расстояние между несколькими логическими блоками на сайте, которое помогает эти же блоки отделить друг от друга, улучшает общую композицию на сайте. Делится на два разряда — макро, микро, что позволяет определить специфику воздействия на пользователя для каждого из них.
Что нужно понимать под макро и микро? Я думаю вы уже догадались чисто интуитивно, что макро — это большое белое пространство, которое определяет между собой сами логические блоки на сайте. Микро же — определяет пустое пространство между несколькими элементами уже в самом блоке.
Зачем?
Что это за зверь я думаю вы поняли, и вопросов по этому поводу быть не должно. Зато наверняка будут вопросы зачем же белое пространство вообще нужно? С этим всё просто — пустое пространство нужно как альтернатива линиям, полосам, и другим неблагородным элементам.
Да, линии, и т.п. подобные вещи помогают разделить логические блоки между собой, но в ущерб качеству в общем и композиции. Линии — это вообще жуткая жуть из всех самых жутких способов разделить что-то. Линии — вещь слишком опасная для юзабилити и использовать её нужно только в самых крайних случаях.
Итак, всё же зачем? Для того чтобы отделить несколько логических блоков между собой. Как уже сказано выше — линия не самым лучшим образом играет эту роль, поэтому и приходится обращаться за помощью к пустому, благородному пространству.
Белое пространство также помогает разделить логические части между собой и в тексте. Кстати этот прием напрямую идет из типографики.
Как?
Использовать белое пространство нужно с умом. Просто наляпав побольше пустоты в различных местах удобства не добьешься. Добавлять белое пространство стоит только в определенные места на сайте, а именно:
- Между заголовком и основным текстом
- Между двумя явными блоками (На моем примере — «Рубрики» и «Последние записи».
- Между элементами в отдельном блоке, которые никак логически не связаны
- Между двумя схожими элементами, дабы избежать каши в головах пользователей (см. выше мою подписку на rss — между двумя элементами есть пустое микро-пространство)
- Между изображением и текстом (Я решил эту задачу добавив 10-пиксельную окантовку в каждом сопровождающем изображении, это тоже выход)
Причем явно не стоит использовать whitespace в таких ситуациях как:
- Если между двумя элементами есть заметная логическая связь
- Если между два блока определены как единое целое, и не могут быть разорваны, чтобы не ухудшить восприятие.
Выводы
Использовать белое пространство не просто можно, но и нужно. Причем не в сочетании с другими способами разделения, а в одиночестве — выкиньте на свалку раздражающие глаз линии, полосы и т.п. мишуру, которая в замен требует ухудшения восприятия вашего сайта. Ударим по линиям благородным, чистым пространством.
Тем временем
1. Мишка Квакин придумал усыГи... Жуть какая-то.
2. Юра Гугнин пишет о моде на треш в дизайне.
3. Сергей Чаботько обозревает СЕО блоги.
4. Футуриус раскрывает планы относительно будущего своего блога.