Діалоги – це ефективний елемент для інтерфейсу користувача, якщо використовувати їх правильно. Вони можуть допомогти користувачам досягти своїх цілей швидше і простіше. Але діалоги можуть дуже розчарувати, якщо вони зроблені неправильно. Знаючи, як створювати діалогові вікна, ви зможете використовувати їх таким чином, щоб не дратувати користувача.
Що ж таке діалог?
Діалог являє собою спливаюче вікно, що вимагає взаємодії із ним користувача, і призначене для отримання від користувача відповіді. Діалоги інформують про критично важливу інформацію, вимагають прийняття рішень, або включають декілька завдань. У додатках, в Інтернеті і навіть на мобільних діалоги все частіше використовуються, щоб звернути увагу користувача до конкретного завдання, без необхідності їх покидати відкриту сторінку.
Тепер давайте оглянемо найкращі варіанти діалогових вікон і випадки для їх використання.
1. Мінімізуйте переривання роботи
Використовуйте діалогові вікна розумно, тому що вони дуже відволікають. Їх раптова поява змушує користувачів зупиняти їх поточне завдання і зосереджуватися на змісті діалогу. Користувачі змушені мати справу з діалогом, перш ніж продовжити, і не мають доступу до сторінки, яка знаходиться під ним. Іноді це хороша річ, наприклад, коли користувачі повинні підтвердити важливу дію, але в основному вони зайві, і досить часто дуже дратують.
Необхідність підтвердження
Найбільш доцільно використовувати діалог в ситуаціях, коли потрібна взаємодія із користувачем, перш ніж він продовжить, або коли важливо уникнути помилки.
Не відкривайте діалоги зненацька
Раптове відкриття діалогового вікна без якоїсь дії користувача – це дуже погана ідея. Деякі сайти, наприклад, бомбардують відвідувачів проханнями підписатися, як на прикладі нижче.
Діалог завжди повинен відкритися після того, як користувач щось робить (або зробив). Це щось може бути натискання кнопки, перехід за лінком, або вибір опції.
Висновки
- Не обов’язково кожен вибір та установка повинні перериватися.
- Альтернативою діалогам можуть бути меню або inline-функції, які підтримують поточний контекст.
- Не робіть так, щоб діалоги просто зявлялися у pop-up вікні. Їх поява повинна бути передбачуваною для користувача.
2. Діалог і реальний світ
Діалог повинен говорити мовою користувача, тому використовуйте не спеціальні терміни, а слова, фрази і поняття, знайомі користувачу.
Зрозумілі питання і опції
Ви повинні використовувати чіткі питання або твердження з поясненням в області контенту, наприклад, “Очистити пам’ять?” або “Видалити аккаунт?” Взагалі, слід уникати вибачень, двозначності, або таких фраз як: “Увага!” або “Ви впевнені?”
Уникайте неоднозначних або незрозумілих опцій. Ви повинні використовувати тільки чіткі та зрозумілі варіанти. У більшості випадків користувачі повинні мати можливість зрозуміти варіанти вибору, грунтуючись на одній тільки назві і тексту на кнопці.
Поганий приклад: сухий текст варіанту дії “Ні” відповідає на питання, але не передбачає, що буде потім.
Хороший приклад: Підтверджуючий текст дії “Відмінити” ясно вказує на результат рішення.
Надавайте важливу інформацію
Важливо, щоб діалог не заплутав. Наприклад, у діалоговому вікні із запитом підтвердити видалення деяких пунктів слід перерахувати пункти для видалення.
Також слід уникати використання дії “Дізнайтеся більше” для доступу до довідкової інформації; замість цього в діалоговому вікні краще використати inline-функцію. Якщо необхідна більш детальна інформація, покажіть її краще перед входом до діалогового вікна.
Пропонуйте інформативний зворотний зв’язок
Коли процес закінчено, не забудьте відобразити про це повідомлення (або візуальний зворотний зв’язок). Нехай користувач знає, що зробив усе, що потрібно.
Висновки
- <Використовуйте в діалозі чіткі питання і варіанти.
- Розробляйте діалог з можливістю закриття.
- Повідомляйте користувача про результат дії.
3. Прагніть до мінімалізму
Не намагайтеся втиснути багато всього у діалог. Нехай він буде простий і зрозумілий (дотримуйтесь принципу KISS). Але мінімалізм не означає обмеженість. Вся інформація повинна бути цінною і актуальною.
Кількість елементів та опцій
Діалогові вікна повинні з’являтися на екрані повністю. Не використовуйте вікно, яке треба буде скролити.
Поганий приклад: діалог обробки платежів у Barclays Bank має багато опцій та елементів, частина цих опцій доступна тільки за допомогою прокрутки (особливо для мобільних пристроїв, які зазвичай мають відносно невеликий екран).
Хороший приклад: Stripe використовує простий і розумний діалог тільки з важливою інформацією, який добре виглядає як на робочому столі, так і на екрані мобільного телефону.
Кількість дій
Діалоги не повинні містити більше двох дій. Третя дія, така як “Дізнайтеся більше” відводить від теми діалогу, потенційно залишаючи завдання незавершеним.
Не включате у діалог кілька кроків
Розбивати складне завдання на кілька кроків – це зазвичай гарна ідея, але це також означає, що завдання занадто складне, і користувачам важко буде завершити його в рамках діалогу.
Якщо взаємодія досить складна і потребує кількох кроків (наприклад, як у наведеному нижче прикладі), то краще створити під неї окрему сторінку.
Висновки
- Якщо ви виявите, що намагаєтеся втиснути багато елементів у діалог, тоді це, скоріш за все, означає, що діалог – не найкраще дизайнерське рішення.
- Спрощуйте діалогові вікна, видаляючи непотрібні елементи або зміст, який не підтримує завдання користувача.
- Намагайтеся уникати багатокрокових діалогів.
4. Виберіть правильний тип діалогу
Діалоги бувають двох основних типів. Перший тип – це модальні діалогові вікна, які вимагають уваги і вимагають від користувача реакції, перш ніж продовжити. Такі діалоги зазвичай використовуються для переривання або блокування процесів, де:
- Навколишній контекст не потрібен, щоб вирішити, які дії робити.
- Потрібно явно “прийняти” або “скасувати” дію, щоб закрити вікно. Воно не закривається при кліканні на область за його межами.
- Прогрес користувача неможливий без завершення процесу.
Другий тип, немодальні діалоги, дозволяє користувачам клікнути поза вікном, щоб закрити його.
Ви повинні використовувати модальні діалогові вікна (перший тип) тільки для дуже важливих взаємодій (наприклад, видалення облікового запису, підтвердження згоди з умовами).
Крім того, діалогові вікна мобільної системи (рідної) є модальними і, як правило, мають такі основні елементи – зміст, дії та назва.
5. Візуальна послідовність
Фон позаду діалогу
При відкритті діалогу дуже важливо, щоб сторінка позаду ставала злегка затемненою. Це вбиває двох зайців. По-перше, звертає увагу на діалог і, по-друге, дозволяє користувачу зрозуміти, що сторінка в даний момент не активна.
Проста опція закриття
У правому верхньому кутку повинна бути опція для закриття діалогу. Багато з діалогових вікон мають кнопку ‘х’ у кутку вікна, яку користувачі використовують для виходу. Проте ця кнопка ‘х’ для звичайного користувача – не такий вже й простий шлях для евакуації. Зазвичай натиснути на ‘х’ займає багато часу і зусиль, тому що кнопка менша за розміром, а користувач повинен натиснути саме її.
Гарною ідеєю є можливість користувачу вийти з немодального вікна при натисканні на область фону за його межами.
Уникайте діалогів, які запускають діалоги
Слід уникати діалогів, які запускають додаткові прості діалоги, так як вони збільшують сприйняту z- глибину сайту або програми і додають візуальну складність.
Висновки
- Дозволяйте користувачам натискати за межами діалогового вікна, щоб закрити його, це прийнятно для більшості випадків (за винятком модальних діалогових вікон).
- Діалоги повинні уникати запуску додаткових простих діалогів.
На заключення
Я сподіваюся, що ці кращі практики були цікаві і будуть корисні під час прототипувания. Пам’ятайте, що взаємодія з користувачами – це, в першу чергу, люди, а не технології. Досить легко з’ясувати, що краще для ваших користувачів і їх завдань: створюйте моделі основих діалогів та тестуйте їх на кількох користувачах.
