Помилки першого екрану сайту, або Міф про лінкуватих користувачів

Опубліковано: 10.09.2015 |
Автор: Володимир Столбов|
Рубріка: Юзабіліті

SEO все більше переплітається з юзабіліті та дизайном. Тепер у процесі аудиту доводиться аналізувати зручність використання сайту, те, як користувачі взаємодіють з ним. Зрозуміло, ми часто стикаємося з поняттям першого екрану.

«Перший екран» – це та область, яку відвідувач бачить, потрапивши на сторінку, без використання «прокрутки».

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

 

Напевно, саме звідси пішла помилка, що всю важливу інформацію необхідно обов'язково розміщувати в першому екрані. Пояснюють це так: користувачі не будуть дивитися нижче області, видимої відразу, оскільки дуже ледачі.

 

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

 

Головне – це не додати якомога більше інформації в перший екран, а:

  • розмістити саме те, що буде стимулювати відвідувача переглядати сторінку нижче;
  • надати можливість для комфортного перегляду сторінки.

 

Найбільша помилка, яку можна допустити в організації першого екрану, – це створення візуального бар'єру, який змушує користувача думати, що нижче вже нічого немає. Таким візуальним бар'єром може стати як порожній простір, так і яскрава лінія.

 

Далі ми на конкретних прикладах розповімо, як краще, на наш погляд, розташовувати інформацію в першому екрані на найпоширеніших типах сторінок, щоб це допомагало в просуванні сайту та було зручно вашим відвідувачам.

  • Аналізуючи "перший екран», слід враховувати, що для монітора, залежно від роздільної здатності, він свій. Є велика кількість сервісів і плагінів, що дозволяють підлаштувати браузер під потрібну вам роздільну здатність, щоб зрозуміти, що бачить користувач. Зрозуміло, в першу чергу слід орієнтуватися на найпопулярніші розміри екранів у вашому сегменті.

 
Так, продавцю автомобілів не варто надавати багато уваги різним мобільним пристроям із маленьким дисплеєм, а ось сайту евакуаторів, навпаки, в першу чергу слід орієнтуватися саме на них.

Перший екран головної сторінки

Порівнюючи сайт зі звичайним магазином, можна сказати, що головна сторінка – це ваша вітрина, яка виходить на жваву вулицю. Саме вона переконує відвідувачів увійти всередину.

 

Крім того, головна сторінка виконує навігаційну роль, допомагаючи користувачеві знайти шлях до того розділу, каталогу або статті, які йому цікаві.
Враховуючи все вищевикладене, рекомендуємо в першому екрані розташувати:

  • ваші товари / послуги;
  • меню, що охоплює розділи сайту.

Зрозуміло, вони не обов'язково повинні повністю потрапляти в перший екран. Достатньо, якщо користувач бачив початок меню (якщо мова йде про вертикальне меню) і частину каталогу товарів / розділів. Наприклад, так:

pomilki_pershogo_ekranu_1

Помилка, яку дуже часто доводиться зустрічати, – наявність великого банеру, що не несе ніякої інформації.

 

Такі банери порушують одне з найважливіших правил, яке можна застосувати до всієї сторінки загалом:

  • Кожен елемент на сторінці повинен мати призначення і бути корисним для користувача! Непотрібні елементи слід видаляти зі сторінки.

 

Використовувати великий банер на головній сторінці можна тільки, якщо він повідомляє про великі знижки, проведення акцій або інші «вибухові пропозиції».

 

Але і в цьому випадку він не повинен займати 70-80% всього першого екрану.

 

Наприклад, такий дизайн головної сторінки ми б рекомендували змінити, зменшивши розмір шапки сайту:

pomilki_pershogo_ekranu_2

Перший екран сторінки категорії або каталогу

Вибачте за тавтологію, але найважливішим на сторінці каталогу є каталог. Усі інші елементи, наприклад, текст, – другорядні. Незважаючи на простоту цього, здавалося б, зрозумілого твердження, на багатьох сайтах зустрічається однакова помилка – у першому екрані розташований текст, і тільки під ним можна побачити каталог.

 

Каталог обов'язково повинен потрапляти в перший екран. Це може бути тільки частина зображень верхнього ряду товарів, головне, щоб користувач розумів, що на цій сторінці є те, що він шукає, тоді він обов'язково проскролить нижче.

 

Над каталогом слід розташовувати тільки дуже важливу інформацію. Це може бути обов'язкова умова замовлення або інформація, без якої користувач не зможе зробити замовлення. Весь другорядний контент повинен бути розташований нижче каталогу.

 

Наприклад, так робити не треба:
pomilki_pershogo_ekranu_3

Перший екран сторінки товару

Дуже часто даним сторінкам приділяють мало уваги, оскільки просуваються в основному сторінки категорій, які оптимізуються під ВЧ і СЧ запити, однак це неправильно. Особливо актуальним питання розміщення контенту на сторінках товарів стало після того, як Яндекс почав враховувати комерційні чинники ранжування.

 

Зараз пошукова система аналізує те, наскільки зручно й логічно представлена інформація про товари.

 

Найбільш часта помилка, яку ми зустрічаємо на картках товарів, – це перевантажений перший екран. Адже так хочеться надати користувачеві велику фотографію, ціну, кнопку «Купити», інформацію про товар, доставку, знижки, акцію, надати поради з вибору, а ще… Перелік можна продовжувати довго.

 

На наш погляд, обов'язково в першому екрані  треба розміщувати  тільки:

  • якісне фото;
  • ціну;
  • кнопку «Купити»;
  • інформацію про доставку;
  • короткі характеристики.

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

 

Наприклад, у випадку з мобільним телефоном будуть важливі: діагональ екрану, процесор, наявність другого слота sim-карти, об'єм батареї, технологія дисплея. Всі інші параметри вторинні і можуть бути розташовані нижче першого екрану.

 

Усілякі докладні описи товару, комплекти «Купи разом, зі знижкою» тощо можуть розташовуватися нижче. Для комфортного перегляду цих блоків у першому екрані можуть бути розміщені посилання-якорі.

 

Наприклад, так зроблено на сайті Wikimart:

pomilki_pershogo_ekranu_4Після натискання на посилання, підкреслене пунктирною лінією, екран плавно переміщується до області сторінки, яка містить інформацію, потрібну відвідувачу.

 

Важливо, щоб переміщення було поступовим, – тоді користувач розуміє, куди саме його «перенесли». Моментальне переміщення викликає розгубленість, особливо, якщо сторінка містить багато інформації та досить довга.

 

Поряд зі спробами розмістити все в одному екрані ми зустрічаємо ситуацію, коли простір не використовується та немає акценту на найбільш важливій інформації.
Наприклад:

pomilki_pershogo_ekranu_5Таким чином, формуючи перший екран, необхідно з розумом підходити до використання простору, не перевантажуючи його, але й не створюючи пробілів. 

 

У підсумок можна сказати, що насправді задача першого екрану – не дати відвідувачу всю інформацію, а зацікавити його, переконати, що на сторінці є те, що буде корисним для нього. 

 

Головне правило формування першого екрану – аналізувати, що очікує побачити ваш користувач.

 

 Оригінал статті – http://siteclinic.ru/blog/usability/pervyj-ekran/