Принципи веб-дизайну інтерфейсу користувача
Ефективний інтерфейс користувача поєднує в собі дві складові: приємний зовнішній вигляд та зручність використання. Щоб створити такий інтерфейс, потрібно розуміти основи: як користувач взаємодіє з UI, на що він очікує і що може стати джерелом потенційних проблем. У цій нотатці ми розглянемо принципи проектування графічного інтерфейсу користувача, без яких неможливе створення зручного та красивого UI для web'а.
Для початку давайте домовимося, що інтерфейс — не просто кнопки та меню, кольори та шрифти, тобто зовнішній вигляд, а набір інструментів, які допомагають вирішувати проблеми користувача. Тому перший принцип створення графічного інтерфейсу:
1. Знайте свого користувача
Чим детальніше ви його опишите, тим краще. Тільки точно знаючи, хто ваш користувач, як і чому він діє, ви зможете створити UI дизайн веб-сайту, який працюватиме так, як потрібно. Наприклад, ось як визначають своїх користувачів у MailChimp :
Відомий консультант із юзабіліті Стів Круг стверджує: інтерфейс не повинен змушувати користувача думати. Прийміть рішення, виходячи з того, хто ваш користувач, і реалізуйте їх у своєму інтерфейсі.
2. Використовуйте вже відомі моделі
Про це легко забути, але користувачі вже проводять купу часу в інших інтерфейсах, Facebook, Gmail або Flickr. Розберіться, як вони влаштовані та не вигадуйте колесо. Використовуючи вже відомі моделі, ви допоможете користувачам швидко розібратися в новому продукті та завоюєте їхню довіру.
Наприклад, індикатори готовності підійдуть не тільки для перевірки заповненості профілю в соцмережі — з їхньою допомогою можна показати успіхи у навчанні:
3. Будьте послідовні
Зробивши щось одного разу, користувач очікує, що й надалі це відбуватиметься саме так. Уявіть собі, що інтерфейс відкриття нового файлу відрізнявся б для всіх складових Google Docs — навряд чи це комусь сподобалося б.
Наприклад, reddit використовує всіх сторінках однакових підхід до посилань, виділяючи зовнішні посилання більшим шрифтом без підкреслення, а внутрішні — з підкресленням. Розділи сайту можуть бути оформлені по-різному і навіть використовувати іншу колірну схему, але користувач не має сумнівів, що перед ним все ще reddit:
4. Створюйте візуальну ієрархію
Покажіть користувачеві, що є найважливішим на вашій сторінці. Розмір, колір, розміщення та негативний простір навколо кожного елемента повинні відповідати його ролі, важливій або другорядній. Правильно побудована ієрархія спрощує розуміння навіть складних концепцій:
5. Надайте фідбек та захищайте користувача від випадкових дій
Говоріть користувачеві, що відбувається. Чи надійшов лист? Чи завантажився файл? Чи підтримується цей формат? Переконайтеся, що не можна видалити всі дані одним натисканням. Користувачеві важливо знати, що він не залишився віч-на-віч зі своїми проблемами. Подбайте, щоб йому було комфортно.
6. Не показуйте всі елементи керування відразу
Це злякає недосвідченого користувача. Відмінний хід — сховати додаткові функції, які ніколи не знадобляться простому смертному, на вкладці Advanced або в спеціальному меню:
7. Надайте більше можливостей досвідченим користувачам
Повірте, ті, хто вже всоте використовує сервіс, будуть вдячні за можливість виконувати рутинні дії за допомогою гарячих клавіш. Така функція доступна в багатьох відомих сервісах - від Google Docs до Github. А ось приклад панелі з гарячими клавішами в сервісі створення інтелект-карт Goggle:
8. Не показуйте користувачеві порожню сторінку
Коли користувач вперше заходить у новий інструмент, розкажіть йому, з чого почати, покажіть приклади продуктів, створених за його допомогою — одним словом, надихніть його на роботу з сервісом.
У своїй книзі "Don't Make Me Think" Стів Круг стверджує: інтерфейс має бути самодостатнім і пояснювати сам себе. Якщо щоб зрозуміти, як користуватися навігацією, потрібна інструкція, — наче приклад поганого UI.
9. Не ускладнюйте
Перш ніж додати ще один елемент UI, запитайте себе, чи полегшить він життя користувача або тільки забере у нього цінний час. Ось як змінився сайт American Airlines після редизайну (праворуч):
10. Тестуйте
Чим раніше ви почнете і чим більше тестів проведете, тим якіснішим буде кінцевий результат. Не покладайтеся на власні інстинкти – залучайте звичайних користувачів. Вони не працювали над проектом тижнями і нічого не знають про те, як усе влаштовано, тому їхні зауваження будуть особливо корисними. Про те, як ми проводили «коридорне тестування» мобільного додатка для пошуку лікаря, читайте у нашому кейсі.
І останнє — коли користувач приходить на сторінку, він не читає її, а лише пробігається по ній очима. Тому веб-дизайн сучасного інтерфейсу користувача створюється з урахуванням F та Z-патернів читання (зверніть увагу, що вони працюють для мов з написанням зліва направо).
F-патерн працює для сайтів з великою кількістю тексту - користувач переглядає верхню частину сторінки в пошуку ключових слів, потім опускається нижче і пробігається підзаголовками:
Тому на «важких» сайтах важлива інформація розміщується зліва, там, де її очікує побачити користувач. Цей патерн використовують CNN та New York Times.
На сторінках без великих фрагментів тексту, наприклад, лендингах, працює Z-паттерн читання. Спочатку відвідувачі переглядають шапку зліва направо, потім опускають погляд вниз вліво і переглядають нижню частину вікна зліва направо:
Описані вище принципи веб-дизайну інтерфейсу користувача зводяться до наступного: UI повинен вирішувати проблеми користувача найпростішим з можливих способів.
Ми, студія stfalcon.com, розробляємо інтерфейси для MVP, сайтів і мобільних додатків і з задоволенням створимо UI, який буде радувати ваших користувачів.