Основи веб-проектування

Юзабіліті ( англ. usability — «зручність користування» ) це властивість продукту, на яку все більше звертають увагу клієнти. За останні 15 років на неї звертають все більше уваги ( багато в чому завдяки Стіву Джобсу  і Джонатану Айву) і прагнуть покращити навіть ті, хто ще до кінця не розуміє що це і чим  вимірюється…

Основні характеристики хорошої юзабіліті:

• Useful: продукт робить саме те, що потрібно користувачеві;
  
• Learnable: чи може користувач легко з’ясувати/зрозуміти як ним користуватися;
  
• Memorable: чи добре запам’ятовується принцип користування продуктом, чи не доводиться користувачеві ще раз цього навчатися;
  
• Effective: Чи виконує продукт свою роботу в повному обсязі;
  
• Efficient: Чи робота виконується з резонною кількістю затрат часу і зусиль;
  
• Desirable: Чи бажають люди ним користуватися;
  
• Delightful: Чи використання продукту приносить задоволення і фан;
  

Щоб не говорити абстрактними категоріями обмежу тему юзабілі продуктів в загальному до веб-юзабіліті. На даний момент є дуже багато літератури, яка вчить як робити ресурси із хорошою веб-юзабіліті. Але, на жаль, знайти книжку із простим і практичними поясненнями складно. “Don’t make me think” Стіва Круга в третій редакції від січня 2014 року – одна із найкращих на цю тему. ЇЇ плюси:

– Вона коротка ( як каже сам Стів – рекомендована для прочитання протягом одного авіаперельоту);

– Написана дуже легкою і зрозумілою англійською мовою з використанням наочних прикладів;

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

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

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

Кілька фактів стосовно  користування веб-сайтами:

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

Поради по веб-юзабіліті від Стіва Круга:

1. Робіть речі такими, як вони видаються на перший погляд – так, щоб не думаючи, можна було точно сказати: стовбець зліва – категорії продуктів, а поле по-середині – перелік продуктів з коротким описом, сьогоднішні спеціальні пропозиції – ось вони, виділені іншим кольором в описі…

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

3. Не заставляйте користувачів думати над тим, як працювати із вашим сайтом:

• Назви кнопок, полів, меню зробіть звичними: напишіть “Job”, а не “Employment Opportunities”, і не “Job-o-Rama”.
• Використовуйте звичні форми: якщо це клікабельна кнопка, то вона має виділятися формою з фону, якщо гіперлінк, то бути оформленим звично для гіперлінків. Не заставляйте користувачів витрачати хоча б секунду на роздуми, що тут натискається
• Якщо текст, набраний в едітах має бути певного формату, чи бути вибраним із масиву, то зробіть дропдаун, який з’являється при наборі перших букв.
• Пошук зробіть у такому місці, де його легко зможуть знайти користувачі: підпишіть правильно (Search + едіт, чи значок лупи в едіті, а не Find, Lookup, чи лейбл…)

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

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

6. Відформатуйте контент для простішого сканування сторінки: заголовки, параграфи, списки, виділяйте головне.

7. Не ставте користувача перед не зрозумілим вибором – максимально спростіть послідовність кроків, необхідних для виконання основної роботи/задачі.

8. Уникайте непотрібних слів. Так, можна сказати, що всі слова потрібні, але якщо задуматися глибше, то

• Happy talk (короткий опис довільного формату) зазвичай не цікавий користувачеві, він зайшов сюди, щоб вирішити конкретну задачу.
• Instructions must die. Люди не хочуть і не мають часу читати інструкції. У теперішній час веб-юзабіліті інструкція для користування сайтом це те ж саме, що інструкція для холодильника. Замість інструкцій старайтеся зробити речі очевидними.

9. Зверніть увагу на Accessibility, особливо що стосується сайтів, які можуть використовувати люди із обмеженими можливостями.

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

• Що це за сайт?
• На якій я сторінці зараз?
• Які основні секції/розділи цього сайту?
• У якому розділі я знаходжуся зараз?
• Як я можу пошукати інформацію, що мене цікавить?

11. Важливу роль відіграє домашня сторінка для сайту. Вона повинна відповідати на питання користувача:

• Що це таке?
• Що я можу тут робити? Які мої задачі вирішує цей сайт?
• Що мені пропонують? Як мені це зробити/скористуватися їхніми пропозиціями?
• Чому я маю обрати саме цей сайт, а не когось іншого?

12. Лого і теглайн. Якщо з першим все зрозуміло, то другий часто уникають, опускають, чи ускладнюють. Але задача теглайна в простому і чіткому поясненні користувачеві, що конкретно цей сайт чи організація робить. Це має бути одне просте речення.

13. Більшість аргументів на тему юзабіліті, які висувають люди, причетні до розробки сайту(типу “всі люблять випадаючі списки”, чи “середній користувач поводиться так”) – це витрата часу допоки не буде проведено тестування. В одному випадку випадаючий список буде як раз до речі, в іншому – він може значно ускладнити користування.

 

Юзабіліті тестування

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

Кілька фактів про юзабіліті тестування:

• Якщо хочете мати класний сайт, запустіть юзабіліті тестування. Після того, як ви попрацювали над сайтом кілька тижнів, ви просто не можете мати свіжий погляд на нього. Ви знаєте надто багато. Єдиний спосіб провести тест – попросити інших людей поглянути на сайт.
  
• Тестування одним користувачем на 100% краще, ніж не проводити тестування взагалі. Тестування завжди працює, і навіть найгірший тест із неправильним користувачем покаже вам важливі речі, які можна покращити на вашому сайті.
  
• Тестування одним користувачем на ранній стадії проекту краще, ніж тестування 50-ма на його закінченні. Раннє тестування дає можливість вчасно побачити основні проблеми, звернути на них увагу і ще є час на їх вирішення.
  
• У довгих проектах хорошою є практика виділяти хоча б 1 день в місяць на юзабіліті тестування. Ідеальна кількість користувачів, для юзабіліті тестування – 3. Вже по цій кількості буде чітко видно основні проблеми.
  
• Це погана ідея – обмежувати аудиторію користувачів сайту, оскільки так ви значно обмежуєте свої можливості.
  
• Старайтесь написати всі тексти мовою, зрозумілою для початківців в даній галузі (експерти в такому випадку також зрозуміють).
  

 

Типовий план юзабіліті тестування:

• Познайомтесь із користувачем, розпитайте його що він зазвичай робить в інтернеті, щоб приблизно зрозуміти його рівень. Поясніть, що з його сторони неправильних дій просто не може бути, а ви тестуєте не його, а сайт.
  
• Розпитайте його про домашню сторінку: що він там бачить, що пропонує компанія, де і яку інформацію він буде шукати.
  
• Виберіть задачі (типові юзкейси, наприклад, створення аккаунта і логін, вибір і замовлення послуги).
  
• Це все обов’язково повинне супроводжуватися його словами: чому він зробив саме так, що це означає для нього, що він робить далі…
  
• Роблячи висновки тесту виберіть 3 основні проблеми з сайтом і вирішіть їх. Це принесе набагато більше, ніж додати нову фічу. Зазвичай юзабіліті проблеми не так складно виправити: достатньо поміняти місцями колонки, додати одне речення опису, зробити цей крок наступним, і т.д…
  

Мобільна юзабіліті

Чи принципова різниця у Mobile usability і Web usability? Дослівна відповідь Круга – “not much”. Але, є нюанси, які варто виділити і відповідно до них є кілька порад:

 – Не заставляйте користувача довгочекати на завантаження самої аплікації, чи додаткових сторінок з інтернету ( вони просто знайдуть іншу альтернативу).
– Пам’ятайте, що мобільний екран зазвичай менший, ніж монітор, тому не розміщайте в головному вікні не потрібних в даний момент користувачеві речей: велике меню, банери і т.д..
– Розробляйте масштабований дизайн: дозволяйте зум.
– Даючи лінк на “Знайдіть нас на фейсбуці” давайте прямий лінк на сторінку, а не просто на фейсбук. Більшість користувачів не буде шукати вашу компанію.
– Завжди давайте лінк на повну версію сайту. ( Часом мобільні пристрої мають такі екрани, що на них комфортніше буде дивитися повний сайт.)
– Не забувайте, що у мобільних телефонів немає курсору, тобто такі фічі, як, наприклад, хінт при наведенні мишкою просто не будуть працювати.
– Flat design може ввести користувачів в оману: як відрізнити заголовок від кнопки? Добре подумайте про те, щоб елементи були зрозумілі, але в той же час не надто виділятися.
– Програма повинна бути такою, щоб користувач відразу зрозумів як нею користуватися ( інструкції тут ще більше зло, ніж у веб-аплікаціях).
– Програма повинна бути такою, щоб при наступному старті користувач пам’ятав як нею користуватися і йому не доводилося ще раз вчитися.

 

 

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

Користувач зазвичай дратується, якщо:

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

 Користувач зазвичай отримує задоволення, якщо:

• Ви зробили його кроки на вашому сайті простими і наочними;
  
• Ви говорите йому те, що він хоче знати;
  
• Ви максимально зменшили кількість кроків для досягнення його мети;
  
• Ви доклали зусиль у Ваш сайт: він гарно структурований, інформація точна і корисна, актуальна;
  
• Ви знаєте запитання, які у нього виникнуть і вже відповіли на них;
  
• Ви зробили printer-friendly версії сторінок;
  
• У випадку, коли Ви не можете допомогти користувачу, через нестачу ресурсів, чи принесли будь-яку незручність для нього – вибачаєтеся.
  

   

Юзабіліті – це мистецтво робити речі простими… І це дуже складне мистецтво… Сподіваюсь, після прочитаного стане простіше " class="wp-smiley" />