Донецкий техникум промышленной автоматики

Як кнопка «Назад» здатна знищити юзабіліті сайту?

Багато досліджень юзабіліті показують, що користувачі (як новачки, так і досвідчені), часто використовують кнопку «повернутися назад» в браузері

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Використання 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

Виправимо цю помилку?
Виникає питання: що саме користувачі інтерпретують як нову сторінку?