Як покращити юзабіліті контентної сторінки та не втратити SEO-показники

Оптимізатора ми заспокоїли, заручників звільнили, але потреба впорядкувати спільну роботу проектувальників та СЕОшників – залишилася.

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

Текст для роботів та текст для людей

Головна особливість будь-якої контентної сторінки - переважання СЕО-тексту над текстом, що продає.

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

1. Заголовки, текст, що продає, і важливі блоки "про що сторінка" виводяться на передній план за допомогою явних візуальних акцентів.
2. Кілобайти тексту з ключовими словами - на другий план засобами дизайну і верстки.

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

Робот у вихідному коді сторінки бачить, що текст рівномірно розподілений екранами, є ієрархія заголовків h1-h6, немає концентрації СЕО-матеріалів внизу сторінки. Бінґо!

Загальні рекомендації щодо реалізації

Верстати контентні блоки краще без будь-яких вишукувань. Цього достатньо, щоб продати макет будь-якої складності. Табличні дані – стандартною html таблицею. В даному випадку, просте рішення – правильне.

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

Файли стилів повинні кешуватися та не впливати на основний код сторінки. Це прискорює завантаження та зменшує витрати часу на повторне відкриття сторінок.

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

Усі об'ємні (більше 15-20 рядків) JS-скрипти аналогічно виділяються у файли, крім тих випадків, коли інтеграція скрипту в код сторінки – критична та обов'язкова умова його роботи. Також можна більш лояльно ставитися до скриптів невеликого розміру.

Куди сховати нудний СЕО-текст

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

Бургер - не фастфуд, а засіб навігації

Іконка з трьох горизонтальних смужок набула популярності після того, як з'явилася в мобільному додатку Фейсбука у 2010 році. Після цього вона стала стандартом UI, перекочувала спочатку в адаптивні інтерфейси і, нарешті, в десктопні.

Не обов'язково використовувати "бургер" виключно на маленьких екранах. Іконка може стати приємною для ока заміною довгого списку навігаційних посилань.

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

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

Бургер не шкодить оптимізації сторінок, посилання у меню добре індексуються роботами.

Карусель замість трьох екранів із текстом

Рішення, що лежить на поверхні: використовувати звичні в сучасному Інтернеті інтерактивні блоки для розміщення в них тексту.

Окремі слайди містять підрозділи тексту, рівномірно розподілені, щоб не було стрибків висоти при перегортанні. Блок займає на сторінці так менше, скільки слайдів використано.

Не потрібно зловживати кількістю кадрів, оптимально використовувати 3-4. Автоматичне гортання - не стане в нагоді, досить зробити добре зрозумілі кнопки "вперед\назад".

Для робота в коді сторінки цей блок буде виглядати як кілька схожих HTML-елементів з різним контентом

Скролимо або свайпаємо текст по горизонталі

Мобільні програми принесли до веб-розробки кілька нетипових UI кейсів. Один із них - свайп довгого ряду картинок або карток, які частково приховані за правим краєм блоку. Як засіб приховування зайвого контенту - чудове рішення.

Текст розбивається приблизно на рівні блоки, як для каруселі. Блоки можуть мати підзаголовки, нумерацію або іконки, щоб не виглядати нудно. В результаті виходить досить цікаве та зручне рішення для реалізації об'ємних маркованих та нумерованих списків, тез, переваг без необхідності займати 2-3 екрани.

Можна компонувати СЕО-текст, що продає: розмістити у видимій області щось читабельне і розбавити контентом для індексації. Робот криміналу не побачить.

Табів багато/мало не буває!

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

Яскравий приклад - товарна сторінка з докладними характеристиками, відгуками, cross-sale, підказками щодо гарантії, оплати та доставки. Адекватне рішення – таби.

Використовуючи таби, потрібно враховувати вимоги оптимізації:

1. Кожен таб повинен сприйматися роботом як окрема сторінка зі своїми URL та meta-тегами. Це можна легко реалізувати через додавання якірного посилання. Якщо цього не зробити, буде проіндексовано лише перший елемент, який завжди відкрито за промовчанням.
2. Для реалізації використовується лише простий html. Якщо динамічно малювати таби за допомогою JS – справа погана.
3. Задля підвищення рівня пошукової оптимізації блоку, у першому тобі рекомендується розмістити максимум СЕО-орієнтованого тексту, решту інформації - у другому та наступних. Якщо щось піде не так, основна URL-адреса сторінки з оптимізованим вмістом не вилетить з видачі.

З боку досвіду користувача - таби дуже зручний засіб для полегшення доступу до інформації. До того ж, їх можна використовувати як ненав'язливий dashboard із зазначенням, скільки елементів знаходиться всередині таба. Приклад: 56 відгуків, схожих товарів 16.

Тут і зараз: підказки та модальні елементи

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

Рекомендується враховувати особливості поведінки користувачів та базові вимоги до доступності інтерфейсу:

• Елемент, що викликає модальне вікно, має бути досить великим, щоб легко потрапити по ньому курсором або пальцем на мобільному екрані.
• Дія для відкриття має бути однозначною, а спрацьовування чітким. Наприклад, якщо елемент відкривається по hover, неприпустимо ставити відчутні затримки або transition - користувач не встигне отримати відгук інтерфейсу і перемістить курсор.
• Відкриття спливаючого елемента по hover недоступне для людей з обмеженими можливостями, які використовують для навігації клавіатуру, а не курсор.

Завантажити ще 12 товарів безкоштовно, без СМС

У багатосторінкових каталогах користувачі не дуже усвідомлено використовують вибір конкретної сторінки - частіше вибирають наступну сторінку або випадкові сторінки навмання.

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

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

Оптимізатори вносять свої корективи: кожна сторінка повинна мати унікальну URL-адресу та meta-теги. В іншому випадку робот сприйматиме всі сторінки як одну і може не проіндексувати частину контенту.

Є й альтернативне рішення – нескінченний скролл. Він має багато недоліків, головний з яких – не інтуїтивна робота та некоректне спрацьовування кнопки “назад” у браузері.

Спойлери, скрізь спойлери!

Якщо частина контенту не важлива для СЕО-показників і вторинна для користувача, можна сміливо використовувати спойлер "Показати більше" або "Розгорнути".

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

Виняток: спойлер добре проявляє себе на мобільних екранах, тому що в адаптивному відображенні не впливає на СЕО, але дозволяє значно зменшити область відведену під текстовий контент для роботів.

Акордеон тут не “про музику”

Акордеон - комбінація двох рішень: каруселі та спойлера. Рішення, що не дуже підходить для СЕО, з форматуванням контенту. Через те, що більшість тексту за замовчуванням прихована, пошуковий робот ігнорує все, крім розгорнутого елемента.

В іншому ситуація близька до каруселів: не більше 3-5 елементів поспіль, зручні та зрозумілі сценарії перемикання, інформування про статус за допомогою ікон.

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

Як це впливає на користувачів

Якщо використовувати рішення зменшення видимої частини виключно СЕО-тексту - вплине нейтрально чи позитивно.

Для навігації і елементів, що продають - може вплинути негативно, якщо немає інтуїтивного розуміння, що контенту насправді набагато більше. Обов'язково рекомендується подбати про передбачуваність та керованість UI.

Основні помилки, що погіршують юзабіліті частково прихованого контенту:

• Слайди в каруселях перемикаються дуже швидко і не мають механізму відстеження уваги користувача для припинення анімації. Рекомендується зупиняти автоматичне перемикання, якщо користувач навів курсор на карусель або скористався кнопками “вперед/назад”.
• Усі блоки акордеону можна розкрити одночасно. Сенс застосування акордеону таки полягає у тому, щоб показувати контент порціями, спираючись на сенс заголовків. Якщо розгорнути всі блоки одразу – вийде стіна тексту.
• Горизонтальний скролл чи свайп не дає користувачеві інформації про реальний розмір контенту. Блок повинен містити підказки: частина останнього видимого сегмента, що виступає, прогрес-бар, елемент управління, за який можна "потягнути" і т.д.
• У таби заховано багато надмірної інформації, назви табів не зрозумілі. Рекомендується не зловживати табами, давати їм кришталево ясні назви, не лінуватися додавати інформацію про кількість вмісту, якщо вона представлена окремими блоками.
• Посторінкова навігація за допомогою "Завантажити ще N" додає на сторінку занадто багато елементів, погіршує сприйняття та створює навантаження на сервер. Не варто завантажувати більше одного або півтора екрана з новим контентом. Якщо його буде занадто багато, користувач швидше за все пропустить перші ряди елементів і сконцентрується на останніх.

Не всі користувачі - однакові

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

Багатьом із таких користувачів доводиться використовувати асистивні технології введення та виведення інформації, відмовлятися від звичних для нас видів взаємодії.

У контексті цієї статті ключові проблеми з інтерфейсами для людей з обмеженими можливостями:

1. Відключений функціонал tab або неявна стилізація псевдоселектора focus забирає можливість здійснювати навігаційні дії без миші лише за допомогою клавіатури. Приклад: користувач без допомоги миші не зможе перемикати елементи акордеону.
2. Спливаючі елементи, що викликаються за допомогою наведення курсору, не доступні людям з обмеженою функціональністю та концентрацією. Людина просто може зробити необхідне активації елемента дію.
3. Занадто швидка чи незворотна зміна слайдів у каруселях – доступність контенту дуже обмежена у часі.
4. Неможливість зафіксувати стан спливаючого елемента докладного вивчення. Приклад: меню, яке закривається, коли курсор залишив передбачену область.
5. Анімації та transition, що уповільнюють взаємодію.

Загальні висновки:

Метод покращення юзабіліті, описаний у цій статті – зменшення місця, відведеного під СЕО-текст та оптимізація верстки контентних блоків.

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

Якими засобами цього досягти і як це вплине на СЕО-показники:

1. Бургер меню - нешкідливо для SEO просування, але не завжди доречно. Потрібно враховувати звички користувачів, що може простежуватися зниження активності використання навігації в деяких випадках. Стандартний кейс в адаптивній верстці.
2. Каруселі (слайдери) з текстовими блоками - безпечні при просуванні сторінки. Якщо є хоча б натяк, що текст читатимуть, потрібно вміститися в 3-4 слайди і зручно розмістити елементи керування. Автоматичне перегортання - ні.
3. Горизонтальний скролл блоку (аналог свайпа карток у мобільних додатках) - не несе небезпеки для СЕО. Не завжди зручний, потребує розуміння ситуації від дизайнера. Не годиться для інтернет-магазинів, є ризик, що користувачі не побачать частину товарів. Рекомендується розміщувати у видимій області важливу інформацію або заклики до дії.
4. Таби - можна використовувати, дотримуючись вимог:
   • Унікальний URL кожного таба зі своїми мета-тегами.
   • Усередині таба - простий html. Не огортати java-script, не вантажити вміст табів асинхронно.
   • Перший таб, відкритий за замовчуванням, повинен містити текст СЕО. Для товарної сторінки інтернет-магазину це можуть бути характеристики та опис товару.
5. Спливаючі та модальні елементи (навігація, підказки тощо) - впроваджувати з огляду на зрозумілість для користувача. Потрібне чітке розуміння, яке дію (click, tap, hover) призводить до активації елемента. Може погіршувати показник доступності сторінок. Рекомендується для контекстних підказок та другорядних цільових дій.
6. Посторінкова розбивка з “Завантажити ще N”- - можна використовувати, дотримуючись вимог:
   • Кожна наступна сторінка має унікальні URL-адреси та мета-теги.
   • Явно вказувати, скільки нових елементів буде показано.
   • Дублювати за допомогою класичної нумерації сторінок і давати можливість користувачеві вибрати потрібну сторінку самостійно.
   • Можна використовувати разом з “лінивим завантаженням” для оптимізації навантаження - завантажувати елементи рядково у міру прокручування сторінки
7. Спойлер "Розгорнути, показати більше" - рекомендується використовувати для зменшення видимості тільки контенту, який не шкода вивести з-під індексації. Знижується вага ключових слів та посилань.
8. Акордеон з текстовими блоками - аналогічно спойлеру, що перешкоджає вільній індексації контенту та передачі ваги посилань. Можна використовувати для формування блоків із відгуками, faq та іншими схожими елементами, які розміщуються на кількох сторінках сайту без змін.

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

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