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



 

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

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


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

Группа: Active User
Сообщений: 948
Регистрация: 22.7.2013
Поблагодарили: 911 раз
Репутация:   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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Где можно найти хорошего копирайтера?
10 megi 1060 23.5.2018, 13:23
автор: Halcy0n
Открытая тема (нет новых ответов) Ваши первые действия после создания сайта
представьте что вы создали новый сайт
10 HavingingWorld 467 23.5.2018, 0:05
автор: JOHNY
Открытая тема (нет новых ответов) Нарисую дизайн для лендинга, банера, бесплатно.
1 unbur 598 10.5.2018, 11:09
автор: EvilGomel
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыНарисую дизайн лендинга или сайта-визитки за 1000р
83 Alex_100 17101 5.5.2018, 13:34
автор: Alex_100
Открытая тема (нет новых ответов) Куплю технологию создания контента для ПС
индивидуально, в одни руки
0 Eji 504 2.5.2018, 14:03
автор: Eji


 



RSS Текстовая версия Сейчас: 28.5.2018, 0:03
Дизайн