X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Секрет создания хорошего лендинга. Первый экран и конверсия.
MissContent
MissContent
Topic Starter сообщение 20.2.2014, 15:52; Ответить: MissContent
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 881
Регистрация: 22.7.2013
Поблагодарили: 897 раз
Репутация:   93  


На протяжении многих лет, как непререкаемая истина воспринимался тот факт, что самая важная информация должна располагаться в верхней части экрана. Мы изо всех сил пытались впихнуть в эти несчастные 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


--------------------
Реальный конверт с реальной Фарма ПП!
Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org


Поблагодарили: (2)
7
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Первый опыт, прошу совета.
5 b3rsus 572 Сегодня, 7:55
автор: b3rsus
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыНарисую дизайн лендинга или сайта-визитки за 1000р
72 Alex_100 13419 7.12.2017, 13:38
автор: Realkent
Открытая тема (нет новых ответов) Первый хостинг по справедливой цене
9 cadedic 1426 6.12.2017, 17:16
автор: cadedic
Открытая тема (нет новых ответов) EssayPartner.com - до 60% за первый заказ, до 35% за ребиллы, современные ленды и WL для всех
14 EssayPartner 2559 5.12.2017, 13:42
автор: EssayPartner
Открытая тема (нет новых ответов) PSD-макеты лендинга и сайта по теме тепличный бизнес
2 0pium 1354 3.12.2017, 14:35
автор: 0pium


 



RSS Текстовая версия Сейчас: 12.12.2017, 14:39
Дизайн