interfaces.prjctr | pasichnyk week

А вже нові набори Проджа прийшли у наш канал Будемо робити перші кроки у дизайні й прокачувати навички, вчитися працювати з продуктами й застосунками, приборкувати портфоліо й Figma. Обирайте, з чого почнете цей місяць: 🔹 Курси • Product Design 7 листопада • Web Design Beginning 13 листопада • Web Design Junior 13 листопада • Mobile Apps Design 13 листопада • UX Design Medium 14 листопада 🔹Інтенсиви • Web Design Portfolio Camp 18 листопада • Figma Components Workshop 11, 12 та 17 листопада • Measuring UX and Impact of Design 22-24 листопада • User Onboarding Design 17, 18, 19 листопада 🔹Відеокурси • Figma • Webflow

Повертаємося до 8 помилок в UX-копі Розібратися допоможе автор статті, який їх і нарахував. Ми зібрали частину з них: 🔹Два дієслова поспіль у реченні збиває користувачів з пантелику. Плюс, слово “cancel” є деструктивним, а “add” є конструктивним, що лише посилює плутанину. 🔹Хоча воркфлоу і має назву “Add Service”, юзерам може бути важко сприймати цей контекст, адже вони не розуміють, з чого саме вони намагаються вийти. 🔹Регістр заголовка не відображає, що цей рядок є реченням. 🔹Дієслова на кнопках та у заголовку не узгоджуються. У коментарях, ви також писали, що не могли зрозуміти, що означає слово “cancel” у цьому контексті. Така ж ситуація з “continue”. Користувачі можуть заплутатися — вони залишаться на сторінці чи ця кнопка допоможе вийти з неї. 🔹Кнопка “continue” візуально контрастує з “cancel”. Такий дизайн спонукає користувачів натискати на першу, яка виконує деструктивну дію — скасовує весь прогрес. Більше помилок і рішення автора, як їх виправити — у матеріалі

Якщо придивитеся, то в UX-райтингу цього діалового вікна є цілих 8 помилок. Знайдете їх? Накидайте свої варіанти.

«Що якби Едгар Аллан По написав оповідання про будні дизайнерів, а Netflix екранізували його?» Спитали себе ми й склали цю добірку. * Усі сцени та персонажі вигадані, але описані ситуації — з реального дизайнерського життя. Лише питання, яка з них про вас?

Персоналізовано-універсальний дизайн Баланс, який вчилися тримати Анастасія Гозова, Лілія Бардіна, Ольга Чайковська, Юлія Савюк та Олександр Павлов — випускники курсу Mobile Interfaces Advanced. Студенти команди 3 працювали над проєктом для Calmerry — стартапу з підбору психотерапевта. Завдання: дослідити проблеми юзерів після реєстрації та створити перехідний етап від оплати сесії до першої взаємодії з психотерапевтом. Що і як робили? Студенти почали з дослідження, а коли зібрали інсайти й перетворили їх на рішення, перейшли до дизайну. Робота складалася з двох частин. 🔹Онбординг Студенти пішли шляхом персоналізації з першої взаємодії людей із застосунком. • Під час реєстрації юзери заповнюють анкету, що складається із загальних запитань. Далі, залежно від їх відповідей, у гру входять алгоритми, які відображають більш точкові запитання. • На кожному етапі онбордингу користувачів супроводжують підказки, які пояснюють, навіщо потрібна саме ця інформація. 🔹Основний флоу застосунку • Після онбордингу команда Calmerry підбирає користувачам психотерапевта. Аби знизити стрес очікування в юзерів, студенти додали індикатор прогресу, який показує — пошук фахівця триває. • Студенти також розробили Journey — персоналізований простір юзера зі швидкими діями, історією проходження терапії та статтями про психотерапевтичну етику. Що далі? Calmerry адаптовує та імплементує деякі ідеї студентів команд 1 та 3. Про це, інсайти з дослідження та дизайн-рішення — у повному матеріалі.

А що ви знаєте про інтерактивні інтерфейси?  Цього разу в «Тернистому шляху UX» приклади, які показують, що означає бути злим дизайн-генієм 😁 Ми ж закликаємо вас використовувати дизайнерську силу на добрі інтерфейси.

Доставляємо дизайн-натхнення На СursorUp можна потренувати дизайнерське око та, як бонус, ще й знайти корисні ресурси. Ось такий win-win.

Завершуємо цей день свіжим випуском «(Не)великої ради» У гостях — Юрій Грановський, куратор воркшопу Test. Solutions Analysis та співзасновник «Агентів змін» і «Публічної платформи». Послухаєте думки та інсайти Юрія усе про дослідження, супер-силу сучасності — швидкість і гнучкість та чому не варто культивувати фреймворки, але й ігнорувати їх теж не слід. • За підпискою: Projector Library • Безоплатно: Apple, Spotify

Кому генератор кольорів? З UI Colors можна створювати, редагувати, експортувати кольори в CSS Tailwind. Затестити.

💙 Серце добре знає, що користувач відчуває Мова йде про фреймворк HEART. Це один з go-to інструментів продуктових дизайнерів, щоб вимірювати якість користувацького досвіду й власної роботи зокрема. Читайте, зберігайте. Цю та інші метрики практикуємо ефективно застосовувати на курсі Product Design.

Буває, що ви задизайнили інтерфейс, а можливості валідувати його з юзерами немає. Чи то не маєте доступу до них, чи користувачів замало, або бракує часу до закриття спринта. На допомогу прийдуть методи валідації без залучення людей. Детально зупинимося на одному з них. 🔹Евристики Якоба Нільсена Метод дозволяє оцінити інтерфейс за допомогою 10 емпіричних правил: 1. Видимість стану системи. Інформуйте користувачів про те, що відбувається за допомогою зворотного зв’язку. 2. Відповідність між системою та реальним світом. Дизайн повинен говорити мовою юзерів. 3. Користувацькі контроль та свобода. Юзери часто виконують дії помилково. Їм потрібен «аварійний вихід», щоб покинути небажаний стан. Дайте можливість скасувати та відтворити дію. 4. Послідовність та стандарти. Користувачі не мають сумніватись, чи різні слова, ситуації або дії означають те саме. Дотримуйтеся послідовності системи. 5. Запобігання помилкам. Усуньте вразливі до помилок умови або стежте за ними й давайте користувачам можливість підтвердити свої дії. 6. Розпізнавання, а не пригадування. Мінімізуйте навантаження на пам’ять користувачів, робіть об’єкти, дії та опції видимими. 7. Гнучкість та легкість у користуванні. Дозвольте юзерам налаштовувати часті дії під свій комфорт, наприклад, за допомогою «гарячих» комбінацій клавіш. 8. Естетичний та мінімалістичний дизайн. Сторінки та діалогові вікна не повинні містити зайвої інформації. Додатковий контент конкурує з основним й знижує його видимість. 9. Допомога юзерам розпізнати, діагностувати та усунути помилку. Повідомляйте про помилки простою мовою та пропонуйте чітке рішення. 10. Допомога та документація. Хоч краще, коли користувачам не потрібне ні те, ні інше, забезпечте юзерам доступ до обох. 🔹До інших методів валідації належать: • 8 золотих правил Шнейдермана; • 6 критеріїв юзабіліті; • 21 закон UX-дизайну; • 7 принципів Дона Нормана; • принципи Брюса Тогняцціні; • принципи проєктування для зниження когнітивного навантаження. Більше про них читайте у моїй статті.

Розуміти бізнес-процеси — маст Саме так. Якщо ви міддл або хочете ним стати, вам слід думати ширше й враховувати бізнес-сторону компанії. Ось чому: • бізнес-процеси впливають на юзерів, їх досвід взаємодії, задоволення продуктом та бажання рекомендувати його (NPS); • чітко визначені бізнес-процеси допоможуть вам і команді мінімізувати рівень непорозуміння. Це супер важливо, коли компанія велика й різні відділи не можуть синхронізуватись; • коли фіксуєте та оптимізуєте бізнес-процеси, ви бачите прогалини у них, відповідно можете діяти на випередження та зекономити гроші замовника. Як ви можете мапити й впливати на досвід користувача та бізнес-процеси? Насамперед варто освоїти Customer Journey Map (CJM). Далі вам відкриється артефакт для фіксування бізнес-процесів. 🔹Service Blueprint У цей фреймворк входять: • Дії користувача — те, що роблять юзери, щоб пройти основний флоу у вашому продукті. • Дії на сцені (frontstage actions) — дії продукту, які користувач може бачити; наприклад, взаємодія «людина-людина» або «людина-комп’ютер». • Дії за сценою (backstage actions) — залаштунки, де відбуваються процеси сервісу, які користувач не бачить. • Процеси — додаткові сервіси та взаємодії, як підтримують backstage та frontstage. Вони можуть бути як внутрішні, так і зовнішні. • Докази (evidence) — свідчення та точки взаємодії користувача з компанією як-от чек про оплату, сайт, лист, мобільний застосунок. • Час взаємодії юзера з продуктом. Якщо ви його розробляєте, то цей час буде приблизний. Але якщо сервіс вже працює, то варто фіксувати реальний час, роблячи періодичні тестові закупки. Тож закликаю вас мапити бізнес-процеси й наносити невиправну користь вашому продукту.

Як щодо поетичних рядків на вечір? Якби ви спитали раніше, який відгук студентів ми не отримували, відповідь була б — римований. Але не сьогодні. Навчання з Андрієм Курочкіним та Алісою Головінською, кураторами курсу Web Design Junior надихають на поезію 💙

Помічник, який виручить, коли проєкт несеться Checklist Design — колекція дизайнерських best practices. Тут вам і чеклисти для створення окремих елементів, і вебсторінок, і флоу. Необхідна інформація для створення користувацького досвіду під одним дахом. Забрати собі. Базу ж роботи над user experience будуємо на UX Design Beginning.

Гарний UX — це коли усі юзери мають однакові діджитал-можливості Як забезпечити останні і для користувачів з дислексією? У матеріалі Smart Interface Design Patterns розібрали цю тему. А ми виділили основне. 🔹Спершу важливо знати про такі моменти: • деякі користувачі можуть читати до трьох разів довше; • юзерам може бути важко запам’ятовувати слова між екранами; • миготливі зображення не дають користувачам зосередитись. 🔹Як тоді краще дизайтити: • допомагайте користувачам писати правильно завдяки автозаповненню; • уникайте надто динамічних зображень та тексту написаного великими літерами, курсивом чи з багатьма підкресленнями; • не змушуйте юзерів запам'ятовувати багато інформації; натомість створюйте нагадування. 🔹Більше порад, корисних гайдлайнів і ресурсів тут.

Безпека дому в кілька тапів Це про курсовий проєкт Яни Семеняк, студентки курсу Mobile Apps Design. Smart Home — застосунок для управління будинком та приладами у ньому. Ідея Яни — зробити процес легким, а головне, безпечним. • Які є фічі? Віддалений доступ, аналітика, створення сценаріїв та контроль систем будинку. • Над чим сподобалося працювати найбільше? В описі до проєкту Яна поділилась: «Було цікаво визначати потреби юзер-персони, створювати флоу та рішення, які допоможуть розв’язати проблеми користувачів». • Проєктувати мобільний застосунок з нуля будемо на курсі.

Понеділкова дизайн-афірмація заходить у цей канал Налаштовуємося на продуктивний тиждень: хай дизайни дизайняться, апруви апрувляться 🙌

Любов з першого тапу в онбордингу Це реально. І Стас Говорухін, куратор воркшопу User Onboarding Design, знає, як залучати та утримувати користувачів. Ще й радо ділиться порадами з вами. Попереду корисний контент, вартий збережень. Поїхали. 🔹Уникайте слайди для онбордингу Зазвичай онбординг — це 3-5 слайдів про фічі, які людина ще в очі не бачила. А вона просто хоче отримати цінність, яку продукт пообіцяв в рекламі, App Store чи на лендингу. Гарний онбординг починається із запитань і дій, які дають цінність якомога швидше. Наприклад, Pinterest пропонує обрати цікаві теми, щоб радити релевантний контент одразу в першій сесії. 🔹Не запитуйте те, що не наближує aha-moment Часта проблема — ставити усі можливі запитання одразу, щоб створити якийсь результат для юзера. Такий підхід потенційно вводить користувача у ступор: і не знаєш що відповісти, і не розумієш, навіщо це запитали. • Інколи більша кількість запитань може працювати. Наприклад, коли очікуваний результат — рекомендація, яка впливає на життя; як-от у сфері психотерапії або харчуванні. 🔹Створюйте quick win, якщо розв’язати проблему у першій сесїі неможливо У деяких продуктах aha-moment стається нескоро. Скажімо, застосунок для придбання авто не забезпечить людину машиною у першій сесії. Вихід — quick win, себто проміжковий результат, пов’язаний з основною цінністю й доступний користувачу якомога швидше. Повертаючись до застосунку для придбання авто, це може бути добірка автівок під бюджет і побажання юзера. 🔹Поради, як проєктувати онбординг є, відточити їх на практиці можете на воркшопі Стаса.

Погляд, у якому впізнає себе не один дизайнер 🥲 • Нехай це буде такий собі відкритий бриф на мем. Продовжіть фразу: дизайнер, коли... Наш варіант закинули в коментарі. Ваша черга. Прекрасний пан з мемним потенціалом — кіт Михайлик, улюбленець студентки Олі Гливи.