Ситуація: замовнику нічого не подобається
Питання: що робити?

(тільки неправильні відповіді)

Завдання від Проджа — інституту вільної освіти 💙

Добірка intrusive thoughts дизайнера інтерфейсів у коментарях під попереднім дописом — дивитися всім!

Подякували, записали, сподіваємося, що до втілення не дійде ✍️

Від натхнення аж нежиттєвий мем зробили.

«Де ви берете натхнення? На яких сайтах шукаєте патерни і референси для своїх інтерфейсів?»

Питання підслухано у чаті Interface Design Projector 📽️

Відповіді — теж:

• Mobbin
• Рідне:
• Land-book
• MaxiBestOf
• Godly
• Minimal Gallery
• Steph Hardy
• Brutalist Websites
• The Responsive

І трохи бази від редакції каналу:

• Design Spells
• Awwwards
• FWA
• LandingFolio
• UISources
• Dribbble
• Pttrns

Зберігайте та пишіть у коментарях, якщо щось забули 💙

Ви розробляєте складний багатоколонковий процес заповнення страхової форми, що складається з 30 етапів.

Припустимо, що форма має 2 колонки, кожна з яких містить близько 10 полів вводу.

Форма має містити такі UI компоненти:

• Reset (скинути всю форму)
• Cancel (скасувати цей етап)
• Clear (очистити вибір)
• Update (оновити індикатор статусу)
• Back (повернутися до попереднього етапу)
• Previous/Next (перемикання між етапами)
• Save and Exit (зберегти та вийти)
• Share (поділитися)
• Export as PDF (експортувати у PDF)
• Progress Bar (показник прогресу)

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

Кейс від Віталія Фрідмана, автора і куратора воркшопів Design Patterns For Complex Web Forms, Measuring UX and Impact of Design, Designing for Complex UI, UX Strategy, Design Patterns for AI Interfaces, засновника та креативного ліда у Smashing Media.

Як створити smooth вебформу?

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

Одночасно важливо запобігти помилкам, випадковим натисканням і прискорити взаємодію.

Тому важливо максимально чітко позначати функціонал кнопок.

Кнопки «Скинути» (Reset) та «Скасувати» (Cancel) мають бути розташовані у верхньому правому куті екрана — бажано, щоб вони виглядали меншими за розміром і нагадували посилання.

Кнопка «Очистити» (Clear) повинна розташовуватися поруч із поточним полем вводу, виглядати як посилання і мати невеликий шрифт.

Кнопка «Оновити» (Update) має бути другорядною кнопкою стандартного вигляду, розташованою поруч із полем вводу.

Кнопка «Назад/Попередній» (Back/Previous) повинна виглядати як посилання у верхньому лівому куті екрана.

Кнопка «Далі» (Next) розташовується в нижньому лівому куті екрана.

Кнопки «Поділитися» (Share) та «Експорт у PDF» (Export as PDF) варто розмістити у верхньому правому куті екрана.

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

Кнопка «Зберегти та вийти» (Save and Exit) повинна розташовуватися поруч із кнопкою «Далі» (Next).

Кейс від Віталія Фрідмана, автора і куратора воркшопів Design Patterns For Complex Web Forms, Measuring UX and Impact of Design, Designing for Complex UI, UX Strategy, Design Patterns for AI Interfaces, засновника та креативного ліда у Smashing Media.

Як вирішити проблему відтоку нових користувачів?

1. Подивитись на досвід

• Записати та проаналізувати сесії користувачів які не дійшли до створення відео: де вони відвалились, що пробували зробити, як себе поводили?
• Поговорити про їхній досвід: чому вони не створюють відео? Що кажуть про свій перший досвід? Можливо, в них немає запиту d цей момент, або відкладають продукт на пізніше, або не знають з чого почати? Треба розбиратись.

2. Подивитись на first mile (перший досвід) користувача в продукті зараз

• Скільки кроків між реєстрацією та створенням відео?
• Які кроки наближають користувача до створення відео, а які ні?

Найчастіше, self-serve користувачам треба допомогти з виконанням цільової дії:

• дізнатись, що вони хочуть отримати;
• зібрати необхідні дані для створення результату;
• допомогти зробити це в інтерфейсі, розуміючи, що не виходить зараз — тут сильно допомагають будь-які якісні дослідження;

3. Придумати, спроєктувати та перевірити рішення, які мають привести до a-ha моменту.

У випадку Scribey, це створення відео вперше.

🔹 Дешевше та швидше: покращити сторінку, на яку потрапляє новий користувач:

• покращити пустий стан;
• запропонувати шаблони відео для швидкого старту;
• передстворити відео та дати його доредагувати;
• показати наступні кроки, які користувачу варто виконати, щоб створити відео.

Плюси: швидше запустимо та отримаємо реальні дані, зможемо на них навчитись та спланувати наступні ітерації.

Мінуси: може не дати контрастного результату.

🔹Дорожче та довше: створити setup в онбордингу, в якому користувач створить перше відео повністю або частково:

• запитуємо про тип відео, тему, стиль;
• просимо заповнити текст;
• одразу генеруємо відео та показуємо його користувачу.

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

Мінуси: більше роботи для дизайнера, інженерів та команди загалом.

4. Обрати метрики для оцінки

• Головне: % користувачів які створили перше відео, повернення після створення.
• Другорядне: час на створення першого відео.

Висновок: впливати на a-ha момент та активацію можна по-різному. Це можуть бути простіші рішення з оптимізацією наявного сценарію, або складніші — наприклад, побудова setup в онбордингу.

Важливий фокус — допомогти користувачу отримати обіцяний або бажаний результат, закрити потребу, виконату джобу 😉

Кейс від Стаса Говорухіна, куратора та автора курсу Growth Design й інтенсиву User Onboarding Design, дизайнера продукту в Djinni.

Випуск для тих, хто перед новим роком встиг вигоріти, як та ароматизована свічечка…

Відключення світла є, а значить — і подкаст «Дизайн під час блекауту» від Михайла Самоварова.

Слуходивіться, щоб після свят прокинутися і я-як перестати перепрацьовувати 🫂

🔹 YouTube 🔹 Spotify 🔹 Apple 🔹 Megogo

#подкаст_рекомендація

Надсилаємо новорічні обійми одне одному та одна одній 💙

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

Оцінюватимемо за кількістю реакцій під вашим коментарем.

Просимо fair play і не кидать друзям з проханням лайкнути 🤝

На старт, увага… нумо обмінюватися теплим 🫂