Логические блоки
Дизайн сайтов как минимум на 50% состоит из проектирования.
Любой состоявшийся предприниматель скажет вам, что в 50% акций - это контрольный пакет. Точно так же и в вебе, 50% проектирования - это больше любой другой составляющей дизайна сайтов; это основа. А основой проектирования является логика.
Логика для сайта подобна фундаменту для здания. Как и фундамент, зачастую, ее удобно раскладывать на составляющие - логические блоки.
Логический блок - это фиксированная область или элемент веб-страницы, где действуют внутренние правила/принципы/законы.
Таким блоком может стать любое меню, модуль, виджет и даже баннер.
Логические блоки упрощают навигацию и делают сайт более гибким в вопросе общих правил.
Рассмотрим варианты правильного и неверного применения логических блоков на примерах реальных сайтов.
Перед вами всем известная внутренняя страница портала «Мэйл.ру». Возьмем за пример два логических блока.
Блок 1 (меню) содержит логическую ошибку - в конце этого блока стоит рекламный баннер, замаскированный под меню, но выделенный цветом для привлечения внимания. Хуже было бы только если его не выделяли цветом, т.к. у пользователя не оставалось бы шансов с ходу понять, что эта вкладка к меню не имеет никакого отношения.
Блок 2 (новостная лента) - корректный. Ссылки на новости одного цвета, ссылки на рекламу/сервисы - другого; все просто и понятно. Таким образом навигация внутри этого блока очевидна и удобна пользователю, он в ней не запутается, не смотря на то, что этот принцип навигации не распространяется на остальной сайт.
Взглянем на пару логических блоков новостного портала «Актуальные комментарии».
Блок 1 (меню) - максимально прост, удобен и корректен.
Блок 2 (темы) - неудобен, т.к. ссылки внутри него хаотичным образом разделяются на два типа, отличия между которыми, без углубленного знакомства с сайтом, понять не представляется возможным.
Перед вами сайт консалтинговой компании «Кор групп».
Блок 1 (меню) - прост и понятен, не смотря на то, что вообще на сайте цветом ссылок является красный.
Блок 2 (колонка новостей) отличается от прочих частей сайта тем, что ссылки в ней не подчеркнуты. Даже если пользователю не вполне очевидно зачем это нужно, это не делает такое решение неверным для этого логического блока, так как внутри него все абсолютно согласовано. Вряд ли кто-то не догадается, что текст, выделенный красным цветом в этом блоке - это гипертекст.
Вы смотрите на главную страницу отечественной версии шведского мебельного магазина «Икея».
Блок 1, который трудно хоть как-то охарактеризовать, представляет из себя невнятную кашу разных ссылок, которые серьезно отличаются друг от друга как внешне, так и тематически. Чем это обосновано и почему они вообще поставлены рядом - совершенно непонятно. Вероятно, в этот угол сваливают все то, что не знают куда еще сунуть, но при том эти элементы являются важными ссылками и должны быть на видном и досягаемом месте. Кошмарное, катастрофичное решение во всех возможных смыслах.
Блок 2 (меню) обладает хромающей логикой, потому что кому-то взбрело в голову, что пункты «все товары» и «новинки» должны кардинально разниться с остальными пунктами меню. Возможно, хозяевам портала нужно, что бы по этим разделам чаще кликали, а может быть, они проанализировали трафик сайта и решили упростить навигацию, выделив наиболее востребованные пункты меню. Так или иначе, на деле это лишь осложняет навигацию и добавляет путаницы на сайте.
Блок 3 (вероятно, вспомогательные сервисы) корректен с точки зрения навигации, но с точки зрения наполнения это вновь сборная солянка, которую они не могли придумать куда поставить.
Все та же главная страница «Икеи», но промотанная до конца вниз.
Блок 1 представляет из себя набор из активно продвигаемых компанией предложений, объявлений, сервисов и пр. Тут все просто, удобно и понятно.
Блок 2 (похожий на дублированную навигацию, что бы не проматывать обратно вверх) логически верен внутри себя. Однако, ссылки внутри него выполнены неотличимо от обычного текста на сайте, что является критической ошибкой, т.к. пользователь не может знать гипертекст это или нет, пока не наведет на него мышь.
Вывод: Логические блоки удобны прежде всего своей автономностью, но действительно удобный сайт должна пронизывать система общих правил, подобно тому, как законы физики влияют на каждый элемент реальной жизни при всем их разнообразии. Чем очевидней эта система, тем удобней сайт.
Что бы упростить восприятие информации, в статье я выбирал по два-три логических блока за пример. Не нужно объяснять, что сайты состоят из этих блоков как дома из кирпичей.