|
|
|
|
|
На протяжении многих лет, как непререкаемая истина воспринимался тот факт, что самая важная информация должна располагаться в верхней части экрана. Мы изо всех сил пытались впихнуть в эти несчастные 600 пикселей весь контент нашего лендинга.
Однако, появление смартфонов и планшетов навсегда изменило то, как люди воспринимают информацию и ориентируются на сайтах. Сенсорные экраны облегчили навигацию на сайтах и дизайн страниц соответственно тоже изменился. А что насчет первого экрана? По прежнему ли он важен для привлечения внимания покупателей?
Из истории вопроса.
Понятие «первый экран» пришло из газет, когда газеты на прилавке лежали в согнутом виде и покупатели могли видеть только верхнюю часть с заголовками. Поэтому самую важную информацию старались помещать выше линии сгиба. Это увеличивало продажи.
Что касается интернет сайтов, то здесь первым экраном считается область, которую видит посетитель без прокрутки. Считается, что информация, размещенная в этой части экрана, лучше воспринимается и способствует повышению конверсии.
При разрешении экрана 1366x768 пикселей, контент выделенный розовым цветом, находится в верхней части экрана.
Актуальна ли концепция первого экрана в 2014 году?
Действительно, информация расположенная в верхней части экрана, по прежнему притягивает 80% нашего внимания.
Главное отличие сейчас в том, что посетители стали нетерпеливыми из-за переизбытка информации. Исходя из этого, не нужно пытаться впихнуть всю информацию с лендинга в эту область. Вместо этого, она должна давать четкое представление того, то получит пользователь, прокрутив вниз. Если мы расположим форму заказа в самом верху страницы, это будет равнозначно приглашению купить кота в мешке.
Возможен ли единый дизайн для всех устройств?
У каждого пользователя теперь свой размер первого экрана. Пользователь, просматривающий сайт со смартфона и с широкоформатного ПК, увидят разный первый экран. И для работающего за большим экраном будет странно видеть сайт, на котором попытались все впихнуть в пресловутые 600 пикселей.
Что можно сделать в этой ситуации? Не существует универсального решения, но есть несколько хитростей, которые заставят посетителя прокрутить вниз.
Чтобы узнать, какое разрешение экрана использует большинство ваших посетителей, выполните следующие действия:
1. Откройте Google Analytics.
2. Во вкладке "Audience" откройте "Technology" и выберите "Browser & OS".
3. Затем кликните на "Screen Resolution".
Как посмотреть сайт в различных разрешениях.
Чтобы проверить, где проходит полоса прокрутки при различных разрешениях, воспользуйтесь функцией "Inspect Element" в Chrome для определения собственного разрешения экрана.
1. Щелкните правой кнопкой мыши в любом месте страницы в Chrome и выберите пункт "Inspect Element".
2. Нажмите на значок шестеренки в правом нижнем углу экрана.
3. Кликните "Overrides" и и установите флажок "Включить". В "Device metrics" установите желаемое разрешение экрана. Обратите внимание, что при закрытии этого окна, разрешение снова станет дефолтным.
Дизайн для второго экрана.
Как вы уже поняли, основная функция первого экрана – привлечь внимание пользователей и заставить их читать дальше. Исследование проведенное Clicktale показало, что если на сайте имеется полоса прокрутки, 76% используют ее в той или иной мере, 22% прокрутят до конца.
Поскольку, для мобильных пользователей прокрутка уже стала привычным делом, наша задача показать, что во второй части экрана тоже есть что-то интересное.
3 способа побудить пользователей прокрутить вниз.
1. Колонки с текстом разной длины.
Размещая текст на разной высоте, мы тем самым показываем, что у страницы есть продолжение и стимулируем пользователей читать дальше. Этим приемом часто пользуются сайты с электронными версиями газет, как New York Times и BBC.
2. Стрелочки и другие указатели.
Следуя указателям, пользователь незаметно для самого себя перемещается дальше. Прекрасным примером здесь будет Руководство по Wordpress от Simply Business.
3. Иногда достаточно просто сказать.
Вместо того, чтобы придумывать всякие ухищрения, заставляющие пользователя прокручивать вниз, достаточно просто сказать, что внизу их ждет еще что-то, как это сделали на сайте Put Things Off, продвигающем мобильные приложения.
Выводы.
Информация, размещенная до полосы прокрутки, по прежнему притягивает максимальное внимание. Но не нужно пытаться уместить вверху всю информацию, кнопки call-to-action и форму заказа. Следуйте логике и размещайте элементы и кнопки в нужных и ожидаемых местах.
Прокрутка стала привычным действием для интернет пользователей. Наша задача — добавить визуальные подсказки, показывающие что это не конец страницы и мотивировать посетителя изучать сайт.
Оригинал статьи на английском языке: http://moz.com/blog/life-above-and-beyond-the-fold |
|
|
|
|
|
| не получилось сделать другой размер экрана, за то я теперь знаю где можно отключать Js если что - спасибо) |
|
|
|
|
|
|
|
Гугл недавно опубликовал советы вебмастерам для страниц с бесконечной прокруткой
Чтобы не возникало проблем с индексацией страниц, специалисты поисковика советуют произвести пагинацию, то есть разбить контент постранично.
|
|
|
|
|
|
|
|
|
