Багато досліджень юзабіліті показують, що користувачі (як новачки, так і досвідчені), часто використовують кнопку «повернутися назад» в браузері. На жаль, розробники інтерфейсів і маркетологи рідко замислюються, які наслідки це може мати для юзабіліті - з огляду на сучасні моделі веб-дизайну, які використовують програми, анімацію, відео та інше. Часто технічна структура таких макетів некоректно реагує на функцію «повернутися назад», ніж розриває ментальний шаблон користувачів і погіршує їх досвід.

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

З цієї статті ви дізнаєтеся:

• що очікують користувачі від кнопки «повернутися назад»;
• які 5 найпоширеніших помилок;
• просте рішення цих проблем.

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

очікування користувачів

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

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

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

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

1. Накладення і лайтбокси

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

2. Фільтри та сортування

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

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

3. Форма реєстрації / оплати

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

Подібний підхід може принести проблеми, простий приклад - людина хоче повернутися на крок назад в заповненні форми, щоб відредагувати введену інформацію. Натискання кнопки «назад» повертає його в кошик, і видаляє всі (!) Введені дані. Роздратування і догляд з сайту - закономірний ефект.

4. Використання AJAX

Технологія AJAX може не виправдати очікування користувачів: технічно кожна сторінка AJAX знаходиться під тим же URL, однак складається враження, що відкриваються нові сторінки.

У контексті електронної комерції у користувачів є чітке сприйняття того, що сторінка 3 і сторінка 4 - окремі, і з четвертої до третьої можна перейти за допомогою кнопки «назад».

Його користувачі не готові відмовитися від кнопки «назад»

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

Особливо полюбилася кнопка «повернутися назад» користувачам мобільних додатків і сайтів. Як показало дослідження мобільних версій сайтів, більшість користувачів використовувало цю функцію на всіх запропонованих ресурсах. Причому використання кнопки не обмежується відкотом однієї сторінки - деякі випробовувані натискали її до 15 (!) Разів поспіль.

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

Рішення

Хороша новина: HTML5 може запропонувати відносно просте рішення проблеми, і називається воно HTML5 History API. Конкретніше - функція history.pushState () дозволяє змінювати URL без перезавантаження сторінки. Відповідно сайт буде вести себе адекватно очікуванням користувача, натиснувши кнопку «повернутися назад».

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

Будьте розумні

Постарайтеся не перестаратися з використанням history.pushState (). Ця сила повинна бути застосована розумно. Не варто ставити окремий URL для кожного слайда з фотогалереї та інших дрібних деталей. Інакше користувач не відчує різницю: як і раніше, при натисканні «назад» йому буде потрібно пройти крізь десятки незначних змін.

Будь-яке значне візуальне і контекстуальне зміна, сприймається як окрема сторінка, має бути під своїм URL.

Високих вам конверсій!

за матеріалами baymard.com , image source MD

22-05-2014