Ми живемо в «епоху дефіциту уваги». Кожна програма, реклама та повідомлення у поштовій скриньці кричить: «Подивися на мене!». То як створити дизайн, який не тільки виглядає красиво, але і, що ще більш важливо, утримує людей досить довго, щоб вони могли зробити щось корисне? У сьогоднішній статті ви знайдете 13 найкращих практик, які допоможуть вам у цьому.
Погляньмо правді в очі: люди більше не читають в Інтернеті. Вони переглядають, перегортають, прокручують, ніби їхні пальці готуються до Олімпійських ігор. І якщо ваш дизайн не привертає їхньої уваги швидше, ніж малюк помічає печиво, ви вже втратили їх. Сьогодні ми розберемося, як проєктувати інтерфейси для користувачів, чия увага до попелу випалена TikTok, електронною поштою, Slack і тим самим другом, який завзято надсилає лише голосові повідомлення.
1. Використовуйте прокручування з розумом
Люди не проти поскролити. Насправді їм це навіть подобається. Що вони ненавидять, так це довгі виснажливі пошуки потрібної інформації. Зробіть так, щоб прокручування було плідним і приносило їм внутрішнє задоволення.
Почніть із сильного, чіткого заголовка. Не дивного. Не загадкового. Чіткого. Ви не пишете вірші, ви намагаєтесь зацікавити когось своїм дизайном.
Поганий приклад: «Зміцніть синергію вашого робочого процесу»
Хороший приклад: «Створюйте якісніший дизайн вдвічі швидше»
Прочитавши друге заголовок, ви одразу розумієте, чого чекати й чому варто продовжити читання. Перший звучить так, ніби його видав генератор випадкових слів.
2. Візуальна ієрархія: секретний інгредієнт
Уявіть, що ваш макет це кімната, і ви хочете провести когось через неї. Саме це робить продумана візуальна ієрархія.
Використовуйте розміри та зображення шрифтів, відступи та кольори, щоб продемонструвати, наскільки важливий кожен елемент. Великі масивні заголовки. Чіткі підзаголовки. Короткі абзаци.
Пам’ятайте про негативний простір – лейаут повинен «дихати». Не перевантажуйте деталями. Ваші користувачі й так зазнають когнітивного навантаження. Дайте їм можливість розслабитись.
3. Один екран = одне завдання
Кожен екран або розділ повинен пропонувати користувачеві одну цільову дію. Не три. Не вісім. Одну.
Вони реєструються? Читають відгук? Купують светр? Зробіть цю єдину дію цвяхом програми.
Напевно, вам знайома ситуація, коли сайт, на який ви щойно зайшли, з порога атакує вас численними вікнами, що спливають? Ніколи не робіть так.
4. Взаємодії мають бути миттєвими та очевидними
Будь-яке клацання, торкання або прокручування повинні супроводжуватися миттєвим зворотним зв’язком. Так ми сигналізуємо мозку користувача: «Так, те, що ви зробили, спрацювало».
Ефекти наведення, анімація кнопок, індикатори завантаження — все це маленькі деталі, але вони допомагають людям переконатися, що вони не просто кричать в порожнечу.
5. Подбайте про те, щоб текст був простим для сприйняття
Уникайте «стін» тексту. Розбивайте його на частини. Використовуйте марковані списки. Додайте заголовки. Пишіть так, ніби ви спілкуєтеся з другом у месенджері.
- Використовуйте короткі речення
- Використовуйте звичні слова, а не жаргон
- Видаляйте все, що не допомагає користувачеві
Якщо ви можете донести думку трьома словами замість дванадцяти, зробіть це.
6. «Не змушуйте мене думати»
Цей класичний принцип актуальний як ніколи. Гарний дизайн приймає рішення за користувача.
Люди не повинні гадати, яку кнопку натиснути. Вони не повинні ставити питання, «Зареєструватися» і «Реєстрація» — це одне й те саме чи ні. Будьте послідовні. Будьте передбачуваними.
Передбачуваний ≠ нудний. Передбачуваний = зрозумілий.
7. Мікротести: маленькі слова, великий вплив
Ці крихітні написи на кнопках, у формах і повідомленнях про помилки мають велике значення.
Замість «Надіслати» скажіть, що саме станеться, наприклад: «Отримати мій звіт». Замість «Помилка 404» поясніть «На жаль, цієї сторінки немає. Спробуйте повернутись назад».
Ці маленькі штрихи допомагають користувачам зорієнтуватися і роблять ваш дизайн більш людяним. Люди одразу розуміють: він був створений кимось, хто справді користується Інтернетом.
8. Використовуйте звичні шаблони
Є причина, чому кнопки зазвичай розташовуються в нижньому правому кутку. Або чому клацання на логотип переносить вас на головну сторінку. Це загальноприйняті правила і ваше завдання не боротися з ними.
Дотримуйтесь стандартів, щоб не створювати зайву плутанину. Чим більше часу користувачі витрачають на те, щоб зрозуміти, як використовувати ваш сайт, тим менше часу вони використовують його за призначенням.
9. Тестуйте на своїх друзях
Не тестуйте свої дизайни на інших дизайнерах. Попросіть допомоги того, хто зайнятий, втомився або вибіг на ланч. Це ваш дійсний користувач.
Чи може він зрозуміти, що робити протягом перших 5 секунд? Чи може він знайти те, що йому потрібно? Чи може він заповнити форму, не проклинаючи все у світі?
Якщо хоч одна відповідь «ні», поверніться на крок назад.
10. Використовуйте інструменти, які прискорюють роботу
Ваш робочий процес не обов’язково має бути довгим і болісним.
Один із моїх улюблених інструментів – сайт Made in Figma. Тут можна знайти готові UI-сценарії, продуктові кити та компоненти та одразу використовувати їх у своїх проєктах. Не потрібно годинами рухати пікселі, щоб створити базовий макет. Працюйте швидше, пропускайте нудні завдання та вражайте клієнтів.
Подивімося правді у вічі: чим менше часу ви витрачаєте на створення чергового екрану реєстрації або входу, тим більше часу у вас залишається на те, щоб зосередитися на по-справжньому цікавих речах.
11. Не забувайте про мобільні пристрої
Більшість користувачів взаємодіють із вашим дизайном з телефону. На маленькому екрані. Однією рукою. Другим оком дивлячись Netflix.
- Зробіть цільові області досить великими
- Використовуйте чіткий шрифт
- Не намагайтеся вмістити надто багато елементів на одному екрані
І тестуйте на реальних пристроях. Емулятори брешуть.
12. Радуйте, але не відволікайте
Делікатна анімація? Чудово. Жартівний індикатор завантаження? Прекрасно.
Але ж навороти, які невиправдано уповільнюють роботу користувачів? Вони просто викликають роздратування.
Дизайн може мати індивідуальність. І повинен. Але не на шкоду зручності використання. Подбайте про те, щоб він не виглядав так, ніби дуже намагається здаватися крутим.
13. Думайте про UX як про гарний жарт
Сетап (контекст), зв’язування, панчлайн. Це формула гарного жарту. Хороший UX працює аналогічним чином.
Ви формуєте чіткі очікування. Ви надсилаєте користувачів до розв’язки (дії). І якщо вони безперешкодно дістаються до неї, вони йдуть з посмішкою.
Привітайте, надайте цінність та відійдіть убік. Не затримуйте людей довше, ніж треба.
Висновок
Дизайн в епоху дефіциту уваги — це:
- Ясність замість мудрості
- Швидкість замість вишукувань
- Звичність замість новизни
- Зрозумілі формулювання замість модних слів
І, перш за все, емпатія. Емпатія до користувача, який втомився, постійно відривається і просто хоче виконати завдання, що стоять перед ним.
Проєктуйте саме для такої людини, і ваш дизайн чекає на успіх.
Автор: Мусієнко Тимофій