источник: http://www.boxesandarrows.com
автор: Milissa Tarquini
24.07.2007

Миф о том, что зона выше сгиба – лучше

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

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

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

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

Было время, когда вертикальная прокрутка запрещалась в компании AOL. Статьи, списки и иной контент, который приходилось бы скроллировать, размещался в полях бегущего текста или в оконных списках, пользование которыми не составляло труда для наших пользователей. Наши страницы, основанные на наших собственных технологиях, разрабатывались так, чтобы помещаться в клиентском приложении, и одним из самых строгих указаний было указание делать так, чтобы рабочая поверхность самого приложения не прокручивалась. Страницы с контентом держались в центре интерфейса приложения и отодвигались от полосы прокрутки так далеко, чтобы пользователь не замечал, если полоса появлялась. Даже если страницы обрезалась, как диктуют сегодняшние лучшие методы, это было настолько необычно для наших пользователей, что они думали, что приложение «сломалось». Нам приходилась прививать немыслимую дисциплину во всех отделах организации, занимающихся производством этих страниц — отделы по созданию контента, дизайна и разработки, для обеспечения того, чтобы контент обязательно помещался на этих маленьких страницах.

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

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

Но, даже несмотря на более крупные размеры наших новых страниц, нам все равно приходилось размещать длинные списки над сгибом — списки, которые невозможно было вместить. Всего было слишком много для такого ограниченного вертикального пространства.
Например, чтобы реклама считалась ценной и эффективной, ее определенная часть должна отображаться выше сгиба 1024×768. Брендинг должен быть выше сгиба. Навигация должна быть выше сгиба — или, по крайней мере, начало списка пунктов навигации. (Если список хорошо организован и правильно отображается, то его просмотр должен был поспособствовать тому, чтобы пользователи переходили к нижней части страницы.) Крупный контент (основной контент сайта) должен начинаться над сгибом. Некоторые ребята из области маркетинга считают, что фактическое количество информационных единиц и звеньев над сгибом является стратегическим дифференциатором, имеющим большое значение для достижения успеха в бизнесе. Учитывая ограниченность вертикальной «жилой площади», желание впихнуть туда множество рекламных блоков и функциональные возможности, описанные выше, открытый дизайн становился невозможным.
А почему? Потому, что люди думают, что прокруткой никто не пользуется. Джейкоб Нильсен написал о возрастающем принятии и понимании прокрутки еще в 1997 г., однако, спустя 10 лет, мы все равно слышим истории о том, что пользователи не прокручивают.
Тут мы постепенно переходим к исследованию, разоблачающему этот миф. И прекрасным примером этого нам послужит отчет, доступный на ClickTale.com. В этом отчете исследователи при помощи собственного ПО измерили пользовательскую активность на 120 000 страницах. В результате они получили информацию о вертикальной высоте страниц и о точках, до которых пользователи их прокручивают. Выяснилось, что к скроллингу прибегают 76% пользователей, и бОльшая их часть прокручивает страницу до самого низа, независимо от высоты экрана. Даже самые длинные страницы прокручиваются до самого дна. Единственное, о чем в исследовании не упоминается, это сколько времени пользователи проводят внизу, поэтому кто-то может возразить, что они просто прокручивали, не уделяя никакого внимания тем вещам, что там расположены.
Здесь начинается самое интересное

Я просмотрела отчеты по некоторым сайтам AOL и выяснила, что объекты, расположенные внизу, широко используются. Пожалуй, лучшим примером послужит сайт, посвященный сплетням о знаменитостях TMZ.com. Объектом, получившим наибольшее количество кликов, оказалась ссылка, расположенная в самом низу главной страницы, и ведущая на следующую страницу. Заметьте, что длина главной страницы TMZ.com зачастую достигает 15 000 пикселей, что подтверждает результаты исследования ClickTale — отношение к прокрутке не зависит от высоты экрана. Пользователи так увлекались контентом сайта, что следовали до самого конца страницы, где их ждала ссылка на следующую страницу.
Может быть, сайт о сплетнях про знаменитости и не самый лучший пример. Все-таки, не все из нас занимаются дизайном такого соблазнительного контента, как проступки красивых людей. Поэтому, давайте взглянем на что-нибудь поскучнее.
Например, AOL News Daily Pulse. Внизу страницы вы увидите опросы со счетчиками проголосовавших, каждый из которых превышает 300 000. Это значит, что эти ребята не только прокрутили более 2 000 пикселей до конца страницы, но и потратили время, чтобы проголосовать. Сотни тысяч людей, принявших участие в опросах внизу страницы — это можно считать успехом.

Вы можете возразить, что все эти страницы выполнены в формате блога. Наверное, блоги более способствуют прокрутке, чем другие типы страниц. Меня это не убеждает, так как блог относится к сайтам, на которых новейший контент размещается сверху, но это может быть правдой. Однако, просматривая страницы, выполненные не в формате блога, мы наблюдаем такую же тенденцию. На главной странице AOL Money & Finance пользователи находят и используют модули последних котировок и портфелей ценных бумаг, даже когда они располагаются намного ниже сгиба 1024×768.
Другой пример: на сайте AOL Money & Finance есть фотогалерея под названием Top Tax Tips. Несмотря на то, что ее длина составляет почти 2 500 пикселей, она получает от 200 тыс. до 400 тыс. просмотров в зависимости от положения страницы Taxes.
Очевидно, что это уже становится менее важным — где оказывается объект по отношению к сгибу. Пользователи пользуются прокруткой, чтобы найти то, что они хотят, и находят это. Все дело в самом контенте — если он того стОит, то пользователи пойдут за ним куда угодно.

Когда сгиб имеет значение?

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

Это, наверное, основная проблема. Метод дизайна, при котором применяется обрезающие изображения или текст, сработает, только если вам известно местонахождение сгиба. О том, как место сгиба нерегулярно, написано много. И опять очень четкую картину представляет сайт ClickTale. Во время того же исследования прокруток страниц фиксировалась информация и относительно их сгибов на основании используемого разрешения экрана и браузера. Это очень печально, но единая точка наивысшей концентрации места расположения сгиба (около 600 пикселей) соответствует лишь менее чем 10% всех пользователей. Эта величина соответствует экранному разрешению 1024×768. Браузеры забирают различную долю вертикальной площади под свои интерфейсы (панели инструментов, адресные строки, и т.д.). Каждый браузер слегка отличается размером, поэтому не у всех пользователей с разрешением 1024×768 сгиб появится в одном и том же месте. Исследование показало, что самыми распространенными точками сгиба являются 570, 590 и 600 пикселей — видимо в зависимости от браузера, работающего при разрешении 1024×768. Но общий разбег местоположений сгиба варьируется настолько, что даже эти три точки составляют менее 26% всех посещений. Что это значит? Если вы выберете определенное место для сгиба при разработке дизайна, то в лучшем случае сгиб появится там, где должен, лишь у 10% посетителей.
Так что же нам делать?

Прекратите волноваться по поводу сгиба. Не топите свои лучшие методы, но прекратите впихивать все выше определенной точки. Этим вы никому не поможете. Сделайте свой дизайн открытым и дайте пользователям визуальное пространство, чтобы они могли «дышать» свободно. Если ваш контент интересен, то они дочитают до конца.
Рекламодатели в настоящее время хотят, чтобы их реклама размещалась выше сгиба, и так будет продолжаться еще какое-то время, пока не начнется отлив. Но уже совершенно ясно, что остальная часть страницы так же ценна — а может даже ценнее — для контекстной рекламы. Что касается меня, то я бы, забыв о верхушке, разместила свою рекламу в самом низу страницы TMZ..
Лучший урок, который можно вынести из всего этого — если вы применяете визуальные подсказки (обрезающие изображения и текст) и ваш контент интересен, пользователи будут прокручивать страницу, чтобы посмотреть все. Следующим великим рубежом веб-дизайна должна стать нижняя область страницы. Вы сделали свою работу, а пользователь прокрутил страницу до самого конца, потому что был увлечен контентом. А что дальше? Разве футер это все что мы можем ему предложить? Если мы уже знаем, что они там, почему бы не дать им что-либо еще? Можно разместить что-нибудь контекстное, или естественный переход к другой части сайта, или что-нибудь интерактивное (опрос) — все это они бы неплохо встретили, а главное — использовали.