Покращуємо UX/UI мобільного додатка

Як зробити мобільний додаток зручніше та ефективніше? Дизайнерські поради

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

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

Світ завойовує все, що полегшує нам життя. Тому сьогоднішній слоган дизайнера і розробника ー “Зробимо все легше і простіше!”

Тож подивимося, як можна все спростити і покращити, щоб користувачі “сіли, натиснули кнопку і полетіли”.

1. Функціональний мінімалізм

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

Принцип функціонального мінімалізму означає “нічого зайвого”. Це стосується усього ー контенту, кількості дій, елементів дизайну. Якщо веб-сайт може собі дозволити насичений контент і дизайн, що привертає увагу, то для мобільного додатка це фатально. Тут ми маємо мало візуального простору, і його потрібно використовувати економно і тільки на найважливіші елементи. Однак “нічого зайвого” не значить нудьгу, примітивність або одноманітність.

Це означає:

• мінімум когнітивного навантаження;
• мінімум дій;
• логіку дій і переходів;
• простоту дій;
• простоту дизайну.

Дизайн мобільного додатка має ґрунтуватися на принципах функціонального мінімалізму: лаконічна графіка, наявність простору між елементами, проста і мінімалістична колірна схема. Будь-який елемент дизайну повинен бути функціонально виправданий.

2. Порядок, послідовність, передбачуваність

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

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

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

3. Взаємодія

• Спосіб тримати телефон

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

Види взаємодії (по Стівену Хуберу):

Додаток повинен бути зручним у користуванні однією рукою як на малому, так і на великому екрані.

Взаємодія при використанні однієї руки:

Жести

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

Найбільш популярні рухи пальців:

• дотик
• натискання
• утримання
• подвійний клік
• перетягування
• різкий дотик
• свайпінг
• скролінг
• прокрутка за допомогою двох пальців
• розведення пальців в сторони

Користувачі звикли до певних моделей взаємодії, тому краще застосувати знайомі всім патерни. Це той випадок, коли сюрпризи недоречні.

Анімація

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

Гейміфікація 

Кращий спосіб мотивувати користувача ー додати ігрову механіку, якщо вона доречна і відповідає цілям програми та аудиторії.

4. Все має бути під рукою!

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

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

5. Метод розмиття

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

Розглянемо для прикладу “розмиту” форму для заповнення:

Схоже, потрібно вибрати якусь опцію, а потім натиснути жовту кнопку. Однак оригінал виглядає так:

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

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

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

6. Принцип локальності

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

Дія, спрямована на зміну, має відбуватися поруч з пропозицією цю дію зробити.

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

При цьому не забуваємо про розвиток подій. Наприклад, потрібно помістити кнопку “Add” в плейлист. Здавалося б, логічно розмістити її внизу списку:

Однак що буде, коли користувач створить довгий список обраних композицій? Кнопка опуститься вниз, і він не побачить її, коли знову зайде в додаток.

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

7. Уникаємо довгих форм реєстрації

Великі форми краще розбивати на кілька екранів для заповнення покроково. Форми повинні містити тільки ту інформацію, без якої не можна обійтися. Спростити і прискорити введення допомагає використання автозаповнення, кнопок “вперед” і “назад” для великого пальця і ​​відсутність смуги прокрутки.

8. Уникаємо випадаючих списків

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

9. Текст

Тексти в додатку повинні бути лаконічними, простими і розбірливими.

текст повинен добре читатися

Щоб текст легко читався без збільшення, він повинен бути контрастним щодо фону і мати висоту букв не менше 11 pt. На розбірливість істотно впливає тип шрифту, відстань між рядками і відстань між буквами.

текст має бути коротким

Не варто намагатися втиснути багато тексту в екран. Чим він коротше, тим краще сприймається. Це стосується й набору тексту користувачем. Краще передбачити автозаповнення форм, щоб вводити якомога менше інформації.

текст можна замінити зображенням

Скрізь, де можливо, текст краще замінити візуальним зображенням. Коротеньке відео або наочні малюнки завжди краще, ніж довгі текстові інструкції.

10. Тестування

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