Меню

+380979398298

Что такое сплит-лейаут (зиг-заг, или z-лейаут) ?

  • 07
  • 03
  • 2013

Как веб-дизайнеры, мы следуем многим парадигмам и принципам дизайна: сетки, вертикальная последовательность , F-лейаут , Z-лейаут , правило третей, Золотое сечение и так далее. Акцентируя внимание на этих принципах создаем визуально привлекательный и функциональный дизайн. Давайте теперь посмотрим на простое деление страницы на две равные половины.

Хотя и в начале это может показаться немного глупым и очевидным, эта принципиальная схема может быть очень эффективной. Наши глаза имеют тенденцию следовать зигзагообразным движениям при просмотре страницы. Если глаза действительно следуют горизонтальной прямой линии — как в Z-лейауте, взгляд концентрируется (или пытается) на конечных точках. Поскольку 90% пользователей, которые приходят на ваш сайт не уделяют контенту должного внимания, но сделав вашу страничку дружелюбной для беглого просмотра, вы безусловно заставите их просмотреть ваш контент.

Движения глаз и Зиг-Заг

Из Yahoo!, исследования Eye Tracking :

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

Веб-пользователи всегда спешат. У них есть другие дела, и задержаться, чтобы оценить красоту и эстетику вашего сайта это последнее, что вы можете ожидать от них. Несмотря на хороший дизайн имеет большое значение, то что он не в полной мере внушает посетителю принять решение — нажать кнопку «Купить сейчас» или «Узнайте больше».

Мы не можем винить их. Всегда помните, когда Вы хотели детально посмотреть что-нибудь? Вы спешите к первому результату поиска в Google, а затем быстро нажимаете на него, далее бегло просмотрите общую страницу. Большую часть времени потратите чтобы проскролить вниз, не обращая большого внимания на сам контент. После этого этапа, если вы решили, что страница стоит вашего времени, вы прокрутите наверх, а затем примите фактические усилия, чтобы читать и обращать внимание.

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

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

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

Мы иначе смотрим на дизайн. Дизайн — это не то, как продукт выглядит и воспринимается. Дизайн — это то, как он работает. -Стив Джобс

Вы могли бы (например) эффективно использовать эту особенность такой компоновки (Half Split) для того чтобы позиционировать превью своих работ в портфолио, или важные особенности вашего продукта или услуги, так чтоб посетители быстро их запомнили. В конечном итоге это поощряет их оставаться больше времени на вашем сайте, и таким образом убеждает их, предпринять действия. Результат? Лучший коэффициент конверсии для вас и лучший пользовательский опыт для них.

Применение Сплит лейаута для дизайна

Оформление»зиг-заг совместимого» дизайна и верстки очень прост. В самом деле, это так просто, как разделить вашу страницу на две равные половины! Равные половины работают хорошо, потому зиг-заг конечные точки выровнены более или менее к центру из этих половин. Действуя в суперпозиции, они хорошо работают вместе. Поместите важные элементы вашей страницы на красной конечной точке зиг-зага. Это основная концепция Half Split, или 1/2-лейаута.

Недавно я работал над посадочной страницей типа «Coming Soon». Я экспериментировал с различными раскладками, но ничего не работало хорошо. Я попробовал все — Решетки, Золотое сечение, F-макет. Решение пришло в тот момент, когда я просто разделить страницу на две равные половины. Решение было так просто! Макет выглядел элегантным и аккуратным и напомнил мне тот важный факт, что просто не обязательно плохо. Видели ли вы новый логотип Microsoft?

Простота  - это крайняя степень изощренности. -Леонардо да Винчи

Вы видите, как половинки дают хорошую визуальную иерархию. Во-первых, хорошо заметная надпись в виде красной ленты «Coming Soon» . Далее, виден логотип. Теперь, по ходу зигзага, как я упоминал ранее, посетитель взглядом попадает на изображения в карусели на правой половине и, наконец, на электронную почту формы.

Теперь давайте посмотрим, насколько хорошо разбиение макета на половины работает для портфолио веб-дизайнера. Цель галереи на странице портфолио в том, чтобы быстро показать потенциальным клиентам объем работы. Есть множество вариантов для них, так как эта отрасль довольно насыщена. Почему они должны платить вам? Отличное оформление и первое впечатление может склонить чашу весов в вашу сторону. Давайте посмотрим, что мы можем сделать по этому поводу.

Данный макет разделен на две половины, но из этого не следует «зиг-заг» принцип, который я упоминал ранее.

Хотя это кажется хорошей планировкой и простой для глаза, это становится довольно скучным после первых двух элементов. Нарушение потока для увеличения визуального интереса поможет. И не только это, но когда вы пытаетесь просмотреть(просканировать взглядом) макет выше, ваши глаза должны увидеть первое изображение, а затем перейти к тексту второго пункта. Поскольку ваши посетители не имеют намерения чтения на этом этапе, они прыгают в некоторой другой точке, или покидают ваш сайт целиком!

Что если вы сделаете простые изменения, как эти?

Гораздо интереснее, правда? Просто меняя положения текста и изображений каждого элемента увеличиваете визуальный интерес, так что последовательность не дает вашему посетителю заскучать. Вы также можете разместить кнопку призыва к действию в конце Zig-Zag шаблона.

«Связаться со мной» кнопка теперь будет иметь больше шансов быть замеченными, и нажал на несколько ваших посетителей (почему бы не запустить тест А / Б чтобы проверить, что?)
Дизайн плана для организации элементов таким образом, лучшее для достижения определенной цели. -Чарльз Эймс

Примеры Split Layout в действии

Разбиение макета на две части попал в центр в центре внимания с новым дизайном Timeline Facebook. Обратите внимание, как ваш взгляд легко «перетекает» с одной записи на другую.

Apple тоже сделали разбиение макета. Вот на странице Ipad мини можно увидеть, как легко связываются изображение и описание характеристики. Информация воспринимается очень легко.

Microsoft были отмечены в связи с использованием новых способов отображения информации связанного с их недавним ребрендингом, вот после разбиения лейаута на своих информационных страницах о Surface.

Stacey является минималистской демонстрацией 1/2-лейаута.

Я люблю домашнюю страницу Quora . Разве можно проще продемонстрировать разбиение макета?

Consumerbarometer.com выходит на новый уровень с его анимацией и треугольной вариацией зиг-заг лейаута.

Подведем итоги

Итак, что же мы узнали?

  • Люди принимают решения о вашей странице всего лишь за три секунды.
  • Чтобы привлечь внимание посетителей и снизить отказы, мы должны попытаться сделать наши макеты дружественными для беглого просмотра(для сканирования взглядом).
  • Разделив макеты прямо в центре, и размещение важных элементов с концами «зиг-заг лейаута» гарантирует, что ваши посетители запомнят подробности после того, как просканируют взглядом страницу.

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

Оригинал статьи можно посмотреть здесь. Автор Amit S Namboothiry

 

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

Ваш e-mail не будет опубликован.