Автор – Мадс Сегард (Mads Soegaard)

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

Оригінал статті: https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experiencey

Юзабіліті замінив застарілий термін “дружелюбний для користувача” (“user friendly”) на початку 1990-х років. З визначенням поняття “юзабіліті”, яке використовується сьогодні, були певні труднощі. Існували різні підходи до того, що робило продукт “придатним для використання”. З одного боку, розглядали з погляду продукту свідомості (тобто ергономічний дизайн, такий як вигнута клавіатура); інший аспект був пов’язаний з точкою зору користувача (як багато працює і скільки задоволення/розчарування він/вона відчуває при цьому); а також аспект активності користувача, який пов’язаний з тим, як легко працювати з продуктом, якщо він використовуватиметься у реальному світі.

Юзабіліті відноситься до простоти доступу та використання продукту або веб-сайту. Це розділ UX дизайну. Хоча UX дизайн та юзабіліті у свій час взаємозамінювали один одного, тепер ми повинні розуміти, що юзабіліті є важливою частиною UX, проте не стосується всього сприйняття. Ми можемо точно визначити юзабіліті.

Дизайн не є практичним чи непрактичним сам собою; його функції разом з користувачем (як користувач хоче їх використовувати, та середовище користувача під час виконання завдань) визначають рівень зручності використання продукту. Практичний інтерфейс має три основні вимоги:

• Користувачеві має бути легко та просто ознайомитись, і стати компетентним у використанні інтерфейсу при першому контакті з сайтом. Якщо візьмемо до прикладу сайт турфірми, що добре спроєктований, то користувач повинен, пройшовши через низку дій, швидко забронювати квиток.
• Користувач повинен легко досягти своєї мети за допомогою сайту. Якщо користувач задумав забронювати квиток, хороший дизайн поведе його найлегшим шляхом, щоб отримати потрібний квиток.
• Інтерфейс повинен легко запам’ятовуватись, щоб ним можна було просто скористатися при наступних відвідуваннях. Таким чином, гарний дизайн на сайті турфірми означає, що користувач повинен навчитися з першого разу та замовляти квиток вдруге так само легко.

Це не єдиний набір вимог до юзабіліті. Наприклад, практичний інтерфейс буде пов’язаний із використанням без помилок.

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

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

Ми повинні враховувати вимоги користувача у всіх сенсах щодо юзабіліті. Щоб наші дизайни були практичними, їм потрібно пройти тест із мінімальною кількістю критеріїв. Якби нашим продуктом була мишка, а не веб-сайт, нам довелося б переконатись, що вона відповідає стандартам (щоб отримати таку важливу позначку «CE»). Для сайту можливо легше оцінити рівень дизайну серед конкурентів. Повернімося до сайту турагента та подивимося, як ми можемо покращити наш дизайн.

Наш дизайн

• Користувач може перейти до кнопки “купити” в середньому за 294 секунди.
• У повторний захід користувач переходить до кнопки “купити” за 209 секунд.
• 18% користувачів купили квиток на цільовій сторінці (лендинг пейдж).
• 42% користувачів переходять далі після лендингу пейдж.

Дизайн Happy Huzzah’s Getcha There, Inc.

• Користувач може перейти до кнопки “купити” за 198 секунд.
• У повторний захід користувач переходить до кнопки “купити” за 135 секунд.
• 32% користувачів купили квиток на цільовій сторінці (лендінг пейдж).
• 12% користувачів переходять далі після лендінг пейдж.

Ці показники нам дещо розкажуть. Нам потрібно з’ясувати, що таке “Happy Huzzah’s Getcha There, Inc.” робить у веб-дизайни, тому що дещо там безперечно добре працює.

Елементи юзабіліті

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

Сервер

Сервери, які використовуються для розміщення веб-сайтів, є аспектом юзабіліті. Два головні критерії, котрі варто виділити, при виборі серверу:

• Швидкість – Google певною мірою ранжує по юзабіліті. Як швидко завантажується ваша сторінка теж є одним із факторів ранжування, тому швидкість завантаження також є турботою пошукової оптимізації (SEO). Сайт, що повільно завантажується та повільно відгукується на запити, відлякує від себе користувачів. Вплив серверів на те, як швидко завантажиться сторінка, залежить від їхньої місткості, спеціалізації тощо. Звичайно, не тільки сервери впливають на швидкість завантаження сторінки, веб-дизайнери сильно впливають на цей процес, за допомогою того, як вони обробляють картинки, графіки і т.п.
• Час простою — Під час простою веб-сайт недоступний. Чесно кажучи, більшість веб-сайтів будуть час від часу недоступні, коли відключають сервера. Однак деякі страждають найбільше. Вибір надійного сервера дозволяє забезпечити найкращі умови для роботи користувача. За одного невдалого досвіду використання сайту, користувач зітхне та ненадовго піде, але незабаром повернеться знову. Тоді як при більшій кількості невдач, користувач вже просто може піти в інше місце.

HTML

Зосередьтеся на коді HTML, який ви використовуєте для забезпечення кращого досвіду користувача (user experience). Хоча сьогодні тільки мобільні веб-сайти виграють від рейтингу user experience в Google, ймовірно, справедливо слід зробити висновок, що в майбутньому це також буде вірно для всіх платформ. Деякі ключові моменти для вашого HTML:

• Використовуйте ALT-теги. ALT-теги використовуються разом із зображеннями; вони дозволяють передавати додаткову інформацію про зображення, яке не відображається як частина основного тексту. ALT-теги допомагають індексувати в пошукових системах (вони дають вам можливість повідомляти пошуковій системі щодо змісту зображення). Вони також допомагають з описом скрін-рідера для читачів з ослабленим зором.
• 404 сторінку не знайдено (404 Not Found Page). Посилання, що не працюють, трапляються, особливо на великих веб-сайтах. В ідеалі, ви повинні регулярно тестувати всі посилання та швидше виправляти будь-які зламані, добре мати план на випадок, коли користувачі стикаються з посиланням, що не працює. Цим планом є «404 Not Found Page» — адже добре спроектована сторінка 404 намагатиметься допомогти користувачеві повернутися до позитивного досвіду. Сторінка 404 за умовчанням не приносить користі щодо цього. Незграбна і примітивна, вона створює у користувачів враження, що вони добігли кінця ескалатора, який не прикріплений до підлоги. Вони не хочуть впасти та приземлитися на застаріле повідомлення. Як дизайнер, ніколи не упускайте це з уваги. Бо ця невелика ввічливість грає важливу роль.

Візуальні фактори

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

• Розмір та колір шрифту – вибирайте шрифт, який легко читається. Це означає високий рівень контрасту з фоном і розмірами шрифтів, досить великими, щоб користувачі могли легко прочитати. Якщо деякі з ваших баз користувачів включають людей похилого віку або людей з ослабленим зором, зробіть шрифти ще більшими.
• Брендінг (Branding) – брендинг, зокрема логотип компанії, допомагає користувачам дізнатися, де вони знаходяться в Інтернеті. Ґрунтуючись на характері руху очей, ідеальним місцем для логотипу є лівий верхній кут екрана. Це те місце, на яке користувачі, що читають ліворуч, найімовірніше подивляться, коли вперше потраплять на сайт.
• Колір макета – кольори мають бути послідовними, щоб передавати брендинг, а також розвивати естетичну привабливість. Найчастіше їм також потрібно вірно передати ієрархію інформації.
• Навігація – щоб користувачі могли отримати максимальну користь від сайту, їм потрібно дістатися від точки A (точки входу) до точки B (де вони хочуть бути) якнайшвидше та простіше. Тому потрібно забезпечити корисні навігаційні системи, у тому числі (для більших веб-сайтів) функції пошуку, щоб цей перехід полегшити.
• Контент – дизайнер може бути або й не бути відповідальним за створення копії сайту, але є елементи дизайну у тому, як ви показуєте цю копію для досвіду користувача.
• Заголовки — структуруйте контент на керовані частини за допомогою заголовків та підзаголовків. Це означає розробку схеми для послідовного відображення кожного типу заголовка на сайті, який забезпечує постійний досвід роботи користувачів по всьому сайту.
• Параграфи — робіть параграфи зрозумілими та легко впізнаваними, щоб запобігти ситуації, коли користувач перевантажений «лавиною тексту». Можна також застосовувати принципи гештальту (Gestalt principles) до параграфів, щоб краще ілюструвати відносини між блоками контенту.

Інструменти юзабіліті веб-сайту

Тестувати ваш сайт легко завдяки безлічі інструментів. Багато з них безплатні, деякі – умовно-безкоштовні (freemium), інші – платні (premium). Візьміть той, який працює на вашому сайті, а потім нехай він збирає дані про зручність використання. Багато хто дасть можливість протестувати вашу чинну систему; згодом ви зможете сказати за даними, який досвід вони переживають, що відбувається правильно та неправильно. Ось список деяких:

Simple Mouse Tracking – показує, як користувачі взаємодіють із вашим сайтом, записуючи активність їхньої мишки.

IntuitionHQ – дозволяє протестувати юзабіліті веб-сайту. Також пропонується спеціальна функція тестування iPad.

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

Juicy Studio – інструмент для тестування зручності читання контенту на сайті.

Pingdom – дає уявлення про швидкість реакції вашого сайту.

Елемент користувального досвіду

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

Як ми бачили вище, багато дизайнерів плутають різницю між юзабіліті та більшою галуззю user experience. Основні області user experience включають (Юзабіліті, 2014):

• Юзабіліті: Міра здатності користувача – зайти на сайт, легко використовуючи його та виконати задумане. Замість того щоб фокусуватися тільки на дизайні сторінки та припускати, що все інше відбуватиметься пізніше – пам’ятайте, ми розробляємо веб-сайти, де є надлишок, потік усього.
• Корисний контент: Веб-сайт повинен містити достатню інформацію у форматі, що легко засвоюється, щоб користувачі могли приймати обґрунтовані рішення. Пам’ятайте закон Хіка (Hick’s Law): раціоналізуйте свій дизайн так, щоб він був простим. Використовуйте стриманість.
• Бажаний/приємний контент: Кращий досвід користувача приходить, коли користувач може створити емоційний зв’язок з продуктом або веб-сайтом. Це означає виходити за рамки практичності та корисності, і рухатися до розробки контенту, який створить цей зв’язок. Емоційний дизайн – це велика частина user experience. Англійський веб-сайт граматики, який пропонує щоденні поради, може бути корисним. Але якщо ця порада потішна, користувачі не тільки запам’ятають правило, вони можуть забажати повернутися за ще одним!
• Доступність (Accessibility) — Для людей з різними рівнями інвалідності онлайн-досвід може стати глибоким розчаруванням. Існує ряд стандартів доступності, яким сайти повинні відповідати, щоб допомогти слабозорим, людям з порушенням слуху, порушенням руху і т. д. Контент для навчання інвалідів вимагає ретельного розгляду, щоб забезпечити повний досвід користувача.
• Авторитет, довіра (Credibility) — Довіра, яку ваш сайт породжує у ваших користувачах, також відіграє певну роль у user experience. Однією з найбільших проблем користувачів в Інтернеті є безпека (у багатьох випадках вони також турбуються про конфіденційність). Розв’язання цих проблем за допомогою вашого дизайну, наприклад, демонструючи функції безпеки та легкодоступних політик щодо цих проблем, допоможе створити для користувача почуття довіри.

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

На закінчення

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

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

Ми повинні аналізувати наш веб-дизайн при визначенні юзабіліті, зважаючи на все: від доступності та корисності контенту до вірогідності, та створити в результаті дизайн, який сподобається багатьом користувачам. Для цього треба думати наперед. Хто ваші користувачі? Чи можуть вони мати проблеми з читанням вашого тексту? Чи можете ви змусити їх посміхатися, чи сміятися, беручи веселий тон? Користувачі захочуть відчути впевненість, що вони безпечно користуються навігацією сайту. Змусить їх так себе відчути.

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

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

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

Де дізнатися більше:

Лівіт М.О, Шнейдерман Би., (2006). Засновані на дослідженнях принципи веб-дизайну та юзабіліті. Відділ охорони здоров’я та соціальних служб США/ Основи юзабіліті та user experience – http://www.usability.gov/what-and-why/user-experience.html

Беван Н. (1992). “Що таке юзабіліті”. Матеріали 4-ї Міжнародної конференції з HCI, Штутгарт, вересень 1991 року – http://www.nigelbevan.com/papers/whatis92.pdf

Smashing Magazine (2012). «Юзабіліті та користувальницький досвід».  – http://www.smashingmagazine.com/usability-and-user-experience/

Чепмен (2011) Всебічний огляд інструментів тестування юзабіліті та користувальницького досвіду», Smashing Magazine – http://www.smashingmagazine.com/2011/10/comprehensive-review-usability-user-experience-testing-tools/