678

Основи проектування зручних інтерфейсів

Навігація по сучасних комп'ютерних системах у чомусь схожа на лабіринт, з безліччю елементів та варіантів дій, і головне завдання дизайнера – створити зручний та чуйний інтерфейс, який допоможе користувачеві не заблукати. У цій статті ми поговоримо про те, як прогнозувати і розуміти поведінку людини, а головне використовувати ці знання при проектуванні UI.

Основні принципи

Для створення зручних і зрозумілих інтерфейсів дизайнеру потрібно дотримуватися деяких принципів проектування. Розглянемо основні їх.

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


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

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

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

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


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

Щоб створити UI, який відразу зрозуміє користувач, дизайнеру потрібно навчитися розуміти дії людини і труднощі, з якими він стикається.

Психологія користувача

Усі дії людини можна умовно розділити на свідомі — ті, про які він думає безперервно, і несвідомі, які виконуються несвідомо.

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

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

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

Використання режимів

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

Наприклад, перемикач під назвою «Блокування» дає користувачеві мало інформації. Стає незрозуміло — його потрібно увімкнути або вимкнути, щоб заблокувати вміст екрана. У такому разі краще використовувати текст «Заблоковано», і тоді інтерфейс сам підкаже людині, в якому він зараз стані.

Також для реалізації режимів їх часто переводять у квазірежим — ситуацію, коли користувач повинен фізично взаємодіяти з елементом управління і виконувати іншу дію. Приклад реалізації — звичайний Google Doc, де для того, щоб надрукувати велику літеру, людина повинна утримувати клавішу Shift одночасно з натисканням потрібної кнопки на клавіатурі. Таким чином виключається будь-яка плутанина. Щоправда, рекомендується не використовувати більше 7 квазірежимів в одному проекті.

Робота з навігацією

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

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

Навчання професії UX/UI-дизайнера

Навчіться створювати зручні користувальницькі інтереси, які спрощуватимуть взаємодію користувача з програмним продуктом. У лабораторії SpaceLAB курси UX/UI-дизайнера проводяться абсолютно безкоштовно, до того ж ви отримуєте реальну перспективу подальшого працевлаштування.