Логические блоки

топ 100 блогов hao_one26.08.2010  
Дизайн сайтов как минимум на 50% состоит из проектирования.
Любой состоявшийся предприниматель скажет вам, что в 50% акций — это контрольный пакет. Точно так же и в вебе, 50% проектирования — это больше любой другой составляющей дизайна сайтов; это основа. А основой проектирования является логика.
Логика для сайта подобна фундаменту для здания. Как и фундамент, зачастую, ее удобно раскладывать на составляющие — логические блоки.

Логический блок — это фиксированная область или элемент веб-страницы, где действуют внутренние правила/принципы/законы.
Таким блоком может стать любое меню, модуль, виджет и даже баннер.
Логические блоки упрощают навигацию и делают сайт более гибким в вопросе общих правил.
Рассмотрим варианты правильного и неверного применения логических блоков на примерах реальных сайтов.



Логические блоки

Перед вами всем известная внутренняя страница портала «Мэйл.ру». Возьмем за пример два логических блока.
Блок 1 (меню) содержит логическую ошибку — в конце этого блока стоит рекламный баннер, замаскированный под меню, но выделенный цветом для привлечения внимания. Хуже было бы только если его не выделяли цветом, т.к. у пользователя не оставалось бы шансов с ходу понять, что эта вкладка к меню не имеет никакого отношения.
Блок 2 (новостная лента) — корректный. Ссылки на новости одного цвета, ссылки на рекламу/сервисы — другого; все просто и понятно. Таким образом навигация внутри этого блока очевидна и удобна пользователю, он в ней не запутается, не смотря на то, что этот принцип навигации не распространяется на остальной сайт.



Логические блоки

Взглянем на пару логических блоков новостного портала «Актуальные комментарии».
Блок 1 (меню) — максимально прост, удобен и корректен.
Блок 2 (темы) — неудобен, т.к. ссылки внутри него хаотичным образом разделяются на два типа, отличия между которыми, без углубленного знакомства с сайтом, понять не представляется возможным.



Логические блоки

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



Логические блоки

  Вы смотрите на главную страницу отечественной версии шведского мебельного магазина «Икея».
Блок 1, который трудно хоть как-то охарактеризовать, представляет из себя невнятную кашу разных ссылок, которые серьезно отличаются друг от друга как внешне, так и тематически. Чем это обосновано и почему они вообще поставлены рядом — совершенно непонятно. Вероятно, в этот угол сваливают все то, что не знают куда еще сунуть, но при том эти элементы являются важными ссылками и должны быть на видном и досягаемом месте. Кошмарное, катастрофичное решение во всех возможных смыслах.
Блок 2 (меню) обладает хромающей логикой, потому что кому-то взбрело в голову, что пункты «все товары» и «новинки» должны кардинально разниться с остальными пунктами меню. Возможно, хозяевам портала нужно, что бы по этим разделам чаще кликали, а может быть, они проанализировали трафик сайта и решили упростить навигацию, выделив наиболее востребованные пункты меню. Так или иначе, на деле это лишь осложняет навигацию и добавляет путаницы на сайте.
Блок 3 (вероятно, вспомогательные сервисы) корректен с точки зрения навигации, но с точки зрения наполнения это вновь сборная солянка, которую они не могли придумать куда поставить.



Логические блоки

Все та же главная страница «Икеи», но промотанная до конца вниз.
Блок 1 представляет из себя набор из активно продвигаемых компанией предложений, объявлений, сервисов и пр. Тут все просто, удобно и понятно.
Блок 2 (похожий на дублированную навигацию, что бы не проматывать обратно вверх) логически верен внутри себя. Однако, ссылки внутри него выполнены неотличимо от обычного текста на сайте, что является критической ошибкой, т.к. пользователь не может знать гипертекст это или нет, пока не наведет на него мышь.


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

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

 

Оставить комментарий

Предыдущие записи блогера :
Архив записей в блогах:
Художник П. Пустаи. Журнал «Ludas Matyi» 1966 №25 Когда художник, придумавший Юцику, скончался, первое что сделала его вдова – сожгла все оригинальные рисунки с изображением ненавистной ей девушки. Но репродукции уже остались в многочисленных газетах и журналах, а сегодня их можно ...
Георгий: - Она пахнет духами и сексом, и чем-то тревожным, Она слишком умна. Улыбается, слушая лесть, Коль она не захочет - заставить ее невозможно, Ее надо понять и принять лишь такою, как есть. Она - дивный цветок, но сорвать его не для любого, Ее нужно не просто хотеть, а безумно ...
Заметила закономерности своего поведения в ЖЖ в зависимости от гомонального фона моего организма. Вот сейчас у меня ПМС. Я начну постить печальные душещипательные истории, буду цапаться с мужичками-Омегами в комментариях в чужих ЖЖ... ПМС пройдет и наступит нейтральная фаза. Цапаться с муж ...
«Политическая провокация с показом киномерзости «Мумия» показала, что нам надо сначала разобраться в своем доме. В России навести порядок с исторической памятью. «Мумия» — это удар не по партии, «Мумия» — это удар в спину России, удар по будущему России» ...
Режиссер Роберт Земекис по сценарию Кларка Грегга снял один из лучших своих фильмов – захватывающий сверхъестественный триллер «Что скрывает ложь». Достоверности фильму придает и ...