Інтерфейс — це такий собі «місток» між користувачем і системою. За допомогою інтерфейсу користувач зможе пояснити системі, чого він хоче від неї, а система це виконає. Але що станеться, якщо цього розуміння між машиною та людиною не буде досягнуто? Користувач просто піде із сайту.
Ось так поводяться інтернет-користувачі за даними Online Marketing Institute:
- 85% можуть піти з сайту, якщо їм не сподобається дизайн інтерфейсу;
- 83% покинуть сайт, якщо будуть змушені робити багато кліків, щоб знайти те, що їм потрібно;
- 40% ніколи не повернуться на сайт, якщо їм було важко використовувати його вперше.
Принципи хорошого інтерфейсу однакові й у вебсайтів, й у програм, й у сервісів. Я зібрала 17 основних з них, а ще наприкінці на вас чекає невеликий огляд способів тестування інтерфейсу на юзабіліті.
Хороший інтерфейс має:
1. Бути інтуїтивно зрозумілим.
Інтерфейс користувача — це те, що має бути максимально зрозумілим для більшості людей. Якщо людина, відкривши програму або зайшовши на сайт, не зрозуміє, як ним користуватися, то понатискавши кілька секунд на різні кнопки навмання, розчарується та залишить ресурс. Швидше за все, назавжди.
Інтуїтивно зрозумілий інтерфейс — це той, в якому:
1) всі елементи побудовані за принципами елементарної логіки.
Візьмемо для прикладу сайт із текстовим контентом, статтями. Його логічний інтерфейс буде таким:
- назва сайту знаходиться в самому верху сторінки, під ним — короткий опис ресурсу;
- нижче розташовується меню з розділами сайту;
- блок з контактами та зворотним зв’язком у правій верхній частині меню;
- статті розміщені в порядку їх додавання на сайт;
- наприкінці кожної статті є кнопки «наступна» та «попередня»;
- кнопки категорій завжди повинні бути на видному місці, щоб можна було будь-якої миті перейти в інший розділ;
- правила сайту, детальна контактна інформація, дані про розробників та інше розташовують у футері сайту, тому що саме там їх завжди і шукають.
Не заплутуйте користувача нестандартним розташуванням звичних блоків, а використовуйте перевірені принципи. Блог маркетолога Heidi Cohen структурований зрозуміло та логічно:
Ось приклад із інтерфейсу програми. Навіть там, де значки не підписано, цілком зрозуміло, що вони можуть означати. Кнопки розташовані в порядку логіки — адже кожному інтуїтивно зрозуміло, що після кнопки «пауза» має слідувати кнопка «стоп».
2) кнопкам надано зрозумілі позначення.
Уникайте кнопок, зображення на яких може ввести в оману користувача. Не потрібно винаходити велосипед. Великий знак питання відразу ж каже користувачеві про те, за ним ховається якесь керівництво чи допомога. Лупа — це завжди форма пошуку на сайті.
А ось що б ви подумали, побачивши на сайті або програмі кнопку, наприклад, з перекресленим квадратом? Швидше за все, багато користувачів навіть не ризикнуть на неї натиснути, оскільки їм буде незрозуміло, до чого призведе ця дія.
А для кращого розуміння користувачами своїх дій, можна використовувати підписи до кнопок. Вони з’являються під час наведення курсора.
3) є допомога користувачеві, якщо він заблукав.
Якщо користувач потрапив на сторінку 404, відразу ж дайте йому коротку інструкцію про те, що він може зробити далі. Наприклад, запропонуйте йому повернутися до попереднього розділу та пошукати потрібну інформацію там.
Чи така ситуація. У вас є інтернет-магазин. При неправильному введенні параметрів товару користувач бачить повідомлення з помилкою. Напишіть відразу, що слід зробити, щоб описати товар правильно. Якщо потрібного товару не виявилося на складі, пишіть про те, як користувач зможе отримати повідомлення про появу цього товару.
І один наочний приклад:
2. Бути передбачуваним.
В інших ситуаціях передбачуваність може бути нудною та нецікавою характеристикою, але не щодо інтерфейсу. Користувач, глянувши на той чи інший елемент інтерфейсу повинен відразу зрозуміти, як він поведеться у разі взаємодії.
Якщо об’єкт виглядає як меню, він повинен поводитися як меню, якщо схожий на повзунок, то відповідно, повинен щось переміщати. Креативність мислення — це, звичайно, добре, але не в цьому випадку.
Приклад дизайну інтерфейсу програми-програвача. Повзунок відповідає за перемотування треку, кнопки під ним, «попередній трек» — «пауза» — «наступний трек», повинні виконувати саме ці функції.
Ще кілька прикладів. Якщо зробите кнопки об’ємними, вони більше виглядатимуть саме як кнопки, тому кликати на них будуть з більшою ймовірністю:
А перемикач on/off зрозуміло виглядає, коли зроблений так:
Один із найбільших страхів дизайнерів — те, що їх вважатимуть неоригінальними. І тому вони часто уникають використання технік, які давно перевірені на ефективність та працюють, на користь створення «чогось нового та креативного».
Займатися відкритим плагіатом, звісно, не потрібно. Але використовувати вже знайомі користувачам моделі побудови інтерфейсу — це правильний спосіб зробити його передбачуваним.
Які ресурси найчастіше використовує ваша цільова аудиторія? Facebook, Twitter, Amazon, Youtube? Використовуйте схожий стиль і в своєму інтерфейсі, щоб вони змогли відчути себе у звичній обстановці.
Наприклад, якщо ви орієнтуєтеся на Youtube, зробіть головне меню вертикальним і розташуйте його зліва сторінки, а рядок пошуку розмістіть по центру вгорі.
3. Бути мінімалістичним.
Прагнучи розмістити в інтерфейсі якнайбільше категорій, меню, кнопок тощо, ви тільки завдасте йому величезної шкоди. Надто захаращений інтерфейс — це велика перешкода для його розуміння користувачем. Все, що може бути описано однією фразою, не повинно бути трьома. Зайві елементи та підкатегорії на головній сторінці теж ні до чого.
Визначити, які елементи «зайві», а які ні, вам допоможе тестування (про те, як його можна провести, розкажемо наприкінці статті).
Але не варто і жертвувати чимось справді важливим — якщо ви знаєте, що без якогось пояснення (про підказки буде докладніше нижче) або додаткової кнопки користувачеві важко розібратися, то помістіть її в інтерфейс, але зробіть це максимально лаконічно.
4. Швидко завантажуватись.
Повільне завантаження інтерфейсу дратуватиме та відштовхуватиме користувача, викликаючи в ньому все більшу неприязнь до ресурсу. Переконайтеся, що швидкість завантаження є оптимальною для його комфортного використання. Великою мірою це пов’язано з попереднім пунктом — адже що менше на сайті «важких» елементів, то швидше він завантажуватиметься.
Щоб покращити швидкість свого сайту, використовуйте ці поради: 9 способів як збільшити швидкість завантаження сайту.
Ми відмовилися від HDD-дисків на серверах та перейшли на SSD. На SSD-дисках сайти завантажуються вп’ятеро швидше, ніж на HDD.
Також ми замінили вебсервер Apache на LiteSpeed, щоб збільшити швидкість роботи сайтів. За статистикою, на LiteSpeed файли відкриваються в 5 разів швидше. А якщо ваш сайт на WordPress, то ми прискоримо його ще більше з плагіном LSCache 🔥
Наш хостинг можна безплатно тестувати протягом 30 днів. Переконайтеся, що ваш сайт працює з нами швидше — і тоді вже прийматимете рішення щодо купівлі.
5. Показувати всі важливі опції.
Використовувати списки, що випадають, і меню краще тільки там, де цього уникнути неможливо. В інших випадках намагайтеся відразу показати користувачеві всі його можливості.
Якщо частина можливих дій буде прихована, користувач може і не здогадається, куди йому потрібно натиснути для здійснення певної дії. А якщо ці дії цільові — «купити товар», «зробити замовлення», то їх зовсім не можна ховати у меню, а навпаки, варто зробити на них особливий акцент.
Приклад того, яке меню може мати право на життя. Тут при наведенні курсору відкриваються підрозділи в розділах меню, і це зручно. А ось, наприклад, кнопку з інформацією видно відразу ж, без додаткових наведень.
Кнопки для кращих дій користувачів мають виділятись на тлі інших. Тут така кнопка «Додати в кошик».
6. Вміти спілкуватися з користувачем.
Йдеться про те, що користувач повинен розуміти, яка його дія зараз обробляється системою. Процес надсилання повідомлення повинен супроводжуватися виведенням на екран фрази «повідомлення надсилається», а закінчення цього процесу — «повідомлення надіслано». Якщо в системі виникла помилка, користувач також повинен дізнатися про це, а також про причини помилки і про те, що він може зробити в цій ситуації. Якщо ресурс передбачає завантаження великих обсягів інформації, потрібно розмістити прогрес-бари, щоб користувач міг спостерігати за станом системи.
Для експерименту нижче я неправильно вказала email у формі реєстрації та не поставила галочку біля політики конфіденційності. Система відразу вказала на помилки (виділено червоним). Саме так і повинен поводитися будь-який хороший інтерфейс.
7. Мати різні стилі для кнопок із різними типами дій.
У будь-якому інтерфейсі кожна кнопка має своє призначення: перейти кудись, розкрити меню, відкрити в новому вікні, скачати тощо. Щоб не плутати користувачів, дотримуйтесь таких правил:
1) клікабельні та неклікабельні елементи повинні бути різні. Виділяти їх можна кольором, шрифтом, розміром. Користувач одразу повинен бачити, на які кнопки він може натиснути та перейти кудись, а які є просто для інформації.
2) виділяйте кольором або стилем той розділ меню, в якому зараз знаходиться користувач.
На цій сторінці відразу зрозуміло, що ми знаходимося в розділі «Сумки», це також виділено в меню кольором.
При купівлі на рік — знижка 30%
8. Бути привабливим.
Функціональність та зручність — це добре, але є ще й елементарне «гарнр/не гарно». Будь-якому користувачеві буде набагато приємніше мати справу з інтерфейсом, який, до всього іншого, ще й тішить око.
Але не забувайте про те, що гарний дизайн — річ суб’єктивна. Зробити його однаково красивим для всіх у вас не вийде, хоч би як ви не намагалися. Погодьтеся, що при розробці ресурсу для фотографів та ресурсу для бухгалтерів потрібно буде приймати різні дизайн-рішення. Тому в першу чергу орієнтуйтесь на вашу цільову аудиторію та її потреби.
Можете надихнутись прикладами гарних сайтів у добірці від HubSpot.
9. Надавати можливість персоналізації.
Персоналізація — це можливість налаштувати щось під себе. Найчастіше цю функцію можна зустріти у програмах, сервісах і додатках. Користувач може змінити, наприклад, колір шрифту, стиль іконок, фонове зображення, розмір текстових блоків так, як йому сподобається (вибираючи із запропонованих варіантів, звичайно).
У сервісі Trello можна змінити фон на інший колір або зображення.
10. Бути лояльним до помилок користувача.
І все ж завжди будуть користувачі, які не зможуть відразу зрозуміти той чи інший момент при роботі з інтерфейсом. Вони будуть робити помилкові дії, і тут перед інтерфейсом постає завдання зробити так, щоб ці помилки могли бути швидко виправлені.
Якщо користувач випадково видалив потрібну йому інформацію, він повинен мати можливість її відновити. Користувач, який зайшов не на ту сторінку, повинен вміти швидко повернутися на попередню сторінку або розділ шляхом натискання кнопки «назад».
Щоб запобігти помилковим діям, інтерфейс повинен перепитувати користувача про те, чи дійсно він хоче це зробити. Наприклад, «При закритті поточної сторінки завантаження файлу буде перервано. Ви дійсно хочете це зробити?».
Однак, не перестарайтеся з такими питаннями, інакше це почне дратувати.
У прикладі з програми при видаленні або збереженні даних система запитує, чи дійсно ви хочете це зробити. Призначати інтерфейсу подібного роду питання краще в тому випадку, коли користувач хоче зробити дію, яка може спричинити незворотні наслідки або якщо це безглузда дія.
Стаття з теми:
11. Говорити мовою користувача.
Весь текст інтерфейсу, будь-які позначення, повинні бути створені під цільову аудиторію ресурсу.
Тут все очевидно: якщо ви робите навчальний сайт для дітей дошкільного віку, то текст інтерфейсу має бути написаний «дитячою» мовою. Якщо у вас програма для просунутих вебмайстрів, то ви можете використовувати специфічні терміни без пояснення — цільова аудиторія і так їх знає. А якщо це сервіс для новачків, то мова має бути максимально простою.
12. Надавати оптимальну кількість варіантів вибору.
Чим більше варіантів дій ви запропонуєте користувачеві, тим менше ймовірність, що він взагалі зробить хоч щось. Якщо варіантів дійсно багато, і скоротити їх не можна (наприклад, каталог товарів), то використовуйте функцію рекомендацій. Наприклад, ви пропонуєте на одній сторінці десять варіантів товару, але один або два з них виділіть у категорію «Ми рекомендуємо». Клієнт зверне увагу на ці товари, що, можливо, полегшить йому вибір.
Також це можна реалізувати за допомогою блоку «Хіти продажів».
13. Давати м’які підказки.
Підказки — це дуже добре. Вони допомагають користувачеві до кінця розібратися, в чому він не зміг розібратися сам.
Головне питання залишається в тому, як зробити такі підказки ефективними та такими, що не напружують. Пам’ятаєте скріпку-помічника з ранніх версій Microsoft Word? Компанія відключила цю функцію саме через те, що вона викликала багато негативних емоцій у користувачів і критикувалася.
Щоб користувачі були лояльні до підказок, дотримуйтесь таких моментів:
- не пишіть у них надто багато тексту;
- не підключайте підказки до кожної кнопки, а обмежтеся лише тими, де у користувача справді можуть виникнути труднощі;
- дайте можливість користувачеві закрити підказку або повністю вимкнути функцію підказок.
14. Затемнюйте фон під модальними вікнами.
Модальне вікно блокує роботу користувача, доки він не закриє це вікно або не зробить у ньому будь-яку дію. Таке вікно потрібно якось виділяти в загальній картині. Найкраще це зробити за допомогою затемнення фону, що знаходиться під ним. Чим темнішим буде фон, тим сильніше буде зроблено акцент на модальному вікні, і користувач зрозуміє, що йому потрібно зробити якісь дії саме в ньому.
На деяких сайтах я зустрічала, що фон під модальним вікном ставав повністю темним і не читабельним. Це якраз приклад неправильного юзабіліті сайту, тому що створюється відчуття, що ти потрапив взагалі на якусь іншу сторінку.
На прикладах нижче видно, як можна виділити модальне вікно, затемнивши фон, але залишивши його при цьому читабельним.
15. Мати короткі форми реєстрації.
Змусити користувача зареєструватися — це важливе та одне з найскладніших завдань інтерфейсу. Зазвичай люди намагаються уникати реєструватись там, куди вони не збираються заходити регулярно, або ще не впевнені в цьому. А часто навіть відмовляються від покупки в інтернет-магазині, якщо для цього обов’язкова реєстрація, та шукають свій товар на інших сайтах.
Щоб користувачі не відчували до процесу реєстрації неприязні, потрібно зробити його максимально швидким і легким. Не використовуйте довгі форми реєстрації, де потрібно вказувати всю свою біографію. Обмежтеся лише найнеобхіднішими рядками:
Для інтернет-магазину гарним рішенням буде додати опцію «Купити в один клік».
А якщо все ж таки з якихось причин ви змушені пропонувати користувачам довгу форму з безліччю пунктів заповнення, то розбивайте її на окремі частини.
Подивіться приклад. Форма зліва показує відразу всі рядки до заповнення і тому виглядає громіздкою. Заповнювати таку форму не хочеться. А у формі праворуч може бути така сама кількість питань, але вони розбиті на кроки, тому не викликають роздратування.
16. Мати найпростіші принципи заповнення полів.
Майже кожен сайт пропонує користувачам щось на ньому заповнити. Крім реєстрації на сайті це може бути форма замовлення товару, прохання залишити свої контактні дані або пройти будь-яке опитування. Якщо зробити форму заповнення надто складною або напружувальною, ніхто заповнювати її не буде. Звідси випливає кілька важливих порад:
1. При заповненні різних полів («місто», «вулиця», «дата народження») давайте підказки користувачеві за допомогою дропдауна, меню, що випадає, щоб йому не потрібно було вводити це все вручну, а достатньо було вибрати потрібний варіант зі списку.
2. Якщо користувачеві потрібно все-таки вводити свої дані вручну, то використовуйте рядкову перевірку системою правильності заповнення форми. Нікому не сподобається, якщо система після кожної помилки заповнення обнулюватиме всі рядки, заповнені раніше.
3. Назви полів краще розміщувати над рядками введення. Це повʼязано з людським візуальним сприйняттям. Людині легше сприймати інформацію згори донизу чи знизу вгору, ніж зліва направо чи навпаки.
4. Максимально зменште ймовірність неправильно заповнити форму. Уявіть собі ситуацію. Ви починаєте вводити в поле номер телефону. Після першого заповнення система вам каже: «Номер телефону має бути введений у 10-значному форматі». Ви вводите ще раз, а система вам видає: «Номер телефону не повинен містити дефісів». І тут ви вже почнете нервувати та подумки проклинати цей сайт (а може, й не подумки).
Ідеальна форма введення — це коли користувач може написати в неї все, що завгодно, і система не скаже йому «неправильно». Звичайно, обробка таких даних буде важчою, оскільки частину запитів вам доведеться опрацьовувати вручну. Але ваша головна мета — це прийняти замовлення, а не відсіяти нетерплячих клієнтів.
17. Надавати варіанти зручного керування.
Якщо на сайтах ми в основному використовуємо мишу (крім стандартних функцій «копіювати/вставити» тощо), то в програмах і додатках найчастіше буває зручнішим керування з клавіатури. Дайте можливість користувачам вибрати той вид керування, який їм більше сподобається, та покажіть, яка функція якій комбінації клавіш відповідає.
Стаття з теми:
Як протестувати інтерфейс на юзабіліті
Як і обіцяла на початку статті, розповім трохи про тестування інтерфейсу.
Чому тестувати інтерфейс так важливо:
- по-перше, при розробці інтерфейсу в нього могли потрапити помилки, які впливатимуть на роботу всієї програми чи ресурсу;
- по-друге, ви ніколи не зможете відразу вгадати з оптимальним дизайном інтерфейсу, який буде сприйматися більшістю користувачів;
- по-третє, інтерфейс може нормально відображатися на одному пристрої або браузері, та бути зовсім не сумісним з іншими.
Тестування зможе вирішити усі ці проблеми. Яким чином можна його здійснити?
Вручну
Щоб провести таке тестування, потрібно багато тимчасових та фізичних ресурсів, оскільки весь процес вестиметься людиною. Але в цьому плюс ручного тестування. Для його здійснення необхідний тестувальник, який поетапно перевірятиме, як реагує система на ту чи іншу дію користувача.
Найзручніше для цього скласти спеціальну таблицю, в яку будуть вноситися всі дані. Наприклад, ось таку:
Автоматизованим способом
Такий спосіб тестування проводиться за допомогою спеціальних програмних засобів, які начебто наслідують дії живої людини при ручному тестуванні. Для такого тестування не потрібна участь людини, тому швидкість його виконання підвищується, а витрати знижуються.
Є тут одне велике «але». Автоматизоване тестування не може дати 100%-результатів, оскільки проводиться воно лише за формальними ознаками, тими, які вбиті в програму, та не дає можливості знайти дефекти юзабіліті, які можуть бути сприйняті тільки людиною, наприклад, кольорова гамма інтерфейсу.
За допомогою фокус-груп
На мій погляд, найкращий метод тестування щодо співвідношення ціна-ефективність.
Проводиться він так:
- Набирається кілька фокус-груп, які складаються з ваших цільових користувачів. Розділяти групи можна за різними ознаками: зареєстровані/незареєстровані, постійні/ситуативні користувачі, а також за різними демографічними показниками, які вписуються у вашу ЦА.
- Кожній групі даються завдання зробити певні дії на вашому сайті/сервісі/програмі. Ви маєте сказати піддослідним, що вони повинні зробити, але не кажіть як. У цьому полягає суть тестування — подивитися, за допомогою яких дій користувачі досягатимуть своєї мети.
- Після всього цього ви аналізуєте, як саме піддослідні виконували свої завдання — куди вони натискали, за якими посиланнями переходили, чи швидко знайшли бажане тощо.
Існують спеціальні сервіси, за допомогою яких можна легко знаходити людей для проведення такого тестування. Наприклад, UserTesting, Usabilla.
Наочний приклад тестування інтерфейсу користувача
Дизайнер Jerry Cao опублікував у своєму блозі результати тестування інтерфейсу сайту Yelp. Це сервіс, на якому можна шукати різні заклади (салони краси, ресторани тощо), дивитися їх рейтинги, читати відгуки.
Для проведення тестування юзабіліті було залучено користувачів, які не дуже часто користуються Yelp. Їм давалися певні завдання (наприклад, зарезервувати столик у ресторані, підібрати готель для ночівлі під час подорожі тощо), після чого аналізувалися їхні дії. Ось деякі результати тестування:
1. Як було з’ясовано, користувачі частіше воліють використовувати форму пошуку, щоб знайти цікавий для них заклад, а не шукати його за категоріями. Тому було вирішено зробити пошук ключовою функцією на сторінці. З ось такої сторінки:
Вийшла ось така:
2. Опитування користувачів показало, що практично кожен з них вважає бічну панель сервісу дуже засміченою та незручною для використання. Спочатку сторінка була така:
А ось макет нової сторінки:
Повну версію результатів цього тестування дивіться тут.
І на закінчення.
При розробці інтерфейсу пам’ятайте, що надмірна увага до однієї характеристики може суттєво нашкодити іншій.
Вибравши деякі елементи, прагнучи досягти мінімалізму, ви можете створити проблеми з розумінням інтерфейсу користувачем. Втілюючи в життя характеристику привабливого дизайну, ви ризикуєте перестаратися та зробити інтерфейс надто важким для швидкого завантаження.
Тому найважливіше (і найскладніше) у всій цій історії — дотримуватись ідеального балансу всіх властивостей інтерфейсу, і тоді він буде по-справжньому user-friendly.
Корисні матеріали для створення сайту:
➔ Як локалізувати сайт та чи потрібно це вам
