interfaces.prjctr | hladchenko week

Дослідженням місце за великим столом, де приймаються великі рішення Сьогодні наша #подкаст_рекомендація саме про це. Послухаєте про те, чому можна й варто доносити результати дослідження не лише до команд дизайну чи продукту, а й до стейкхолдерів на вищих рівнях організації. Як такий підхід допоможе налагодити стосунки з останніми та впливатиме на кінцеві рішення. • Apple • Spotify • Google

Працювати дизайнером в продукті = бути продуктовим дизайнером А це точно? Не зовсім. Останній охоплює весь життєвий цикл продукту. Це якщо коротко. Більш детально розрізнити обидва взялися наші куратори — Олександр Іванічкін, Head of Design у robota.ua та Арсен Колиба, Product Designer у WIX. 🔷 Що робить продуктового дизайнера продуктовим? Олександр каже: • «Продуктове мислення» або гра в довгу. Продуктові дизайнери — стратеги, які змінюють процеси своєї роботи для більш глибинних досліджень і приділяють додатковий час на організаційні питання. • Більша ітеративність в роботі. Продуктові дизайнери радше запустять MVP та інші демоверсії, бо розуміють, якщо ідея спрацює, вони зможуть її допрацьовувати хоч роками. • Постійна оцінка результатів своєї роботи. Продуктові дизайнери не просто віддають проєкт і забувають про нього, а відстежують дані по ньому, щоб ітеративно покращувати продукт далі. 🔷 Які три скіли окрім досвіду потрібні щоб UI/UX-дизайнеру перейти у продуктовий дизайн? Думка Арсена: • Вміти брати відповідальність й приймати рішення; не чекати поки скажуть, що і як робити. • Самостійно знаходити проблемні точки — взаємодіяти з історичними даними, спілкуватися з користувачами, бути в курсі свого ринку й суміжних сфер. • Вміти й любити ітерувати — рухатися швидко, викочувати фічі й покращувати їх поступово, не зупинятись на першому підході. 🔷 Набір на курс Product Design триває. Раптом ви чекали на знак, це він. Чого навчитеся і як, дізнайтеся тут.

Для тих, хто ще не іменує леєри, але дуже хоче почати Ділимося збіркою гайдлайнів, як це робити ефективно, а ще організовувати компоненти та документацію. Щоб і ви, і команда були on the same page, як то кажуть.

«Менеджери з найму не читають портфоліо, вони сканують їх» Каже Слава Шестопалов. У своїй колонці він проведе вас крок за кроком 10 просунутими порадами, як оформити портфоліо, щоб вигідно підкреслити ваші досягнення. У матеріалі дізнаєтесь, що робити, якщо бракує end-to-end проєктів, як створювати об’ємні кейс-стаді, які не відлякують команду найму тощо. Є деталі, приклади й, звісно, меми від Слави. До читання.

Поєднуємо красиве з корисним й, можливо, дещо незвичайним Зібрали добірку ресурсів, де зможете: • надихнутись естетичними вебдизайнами; https://minimal.gallery/ • роздивитися шляхи користувачів (ті, що user flows) у мобільних застосунках; https://uxarchive.com/ • дослідити світ UI в іграх (це те незвичайне, що ми згадували вище). https://www.gameuidatabase.com/

Факт 1: у серпні в App Store додалося 39 770 застосунків після липневих майже 37К релізів. Факт 2: ми не знаємо, скільки це у гігабайтах. А от з чого складається дизайн мобільних застосунків — знаємо. Розібрали професію на основні молекули. 🔷 Хто може стати дизайнером апок? • Вебдизайнери Дизайнять і лендинги, і складні сайти, які вміло адаптовують до мобільних версій. З цією базою готові працювати над продуктами для менших девайсів, але не з меншою кількістю завдань і челенджів. • UI/UX дизайнери-початківці Знайомі з дизайн-процесом. Та відчувають, що їх навички на повну втіляться в нішевому напрямі дизайну застосунків. Або навпаки готові перейти на мультифункціональний рівень й додати до скілсету проєктування апок. 🔷 Що для цього потрібно? Окрім бажання, у пригоді стануть скіли: • створювати прототипи, працювати з гайдлайнами та UI-кітами; • вміти в анімацію, типографію, дослідження; • мислити у напрямку “problem solving” — знаходити проблему та її розв’язання; • співпрацювати зі стейкхолдерами й розуміти бізнес-складову застосунку. 🔷 Хто йде пліч-о-пліч з дизайнером застосунків? • Продуктові менеджери, щоб узгодити дизайн з цілями продукту й потребами юзерів. • Розробники, щоб правильно втілити дизайн в код реальність. • QA-спеціалісти, щоб виявити й побороти проблеми з юзабіліті застосунку. • UX-дослідники, щоб відшукати потреби юзерів і перетворити їх на дизайн-задачі. • Data scientists, щоб аналізувати поведінку юзерів й використовувати ці дані для покращення застосунку. 🔷 Якщо бажаєте рухатися в бік дизайну застосунків, навчальна база для цього — Mobile Apps Design Course. Нові знання тут.

UX-дослідники ігор читають по очах. Несподівано? Насправді все більш приземлено — юзерам під час дослідження буває важко пояснити, чому вони зробили певну дію. Оскільки читати думки не те щоб можливо, залишається спостерігати за рухом очей гравців. Такий підхід є досить ефективним, адже цей же рух очей і розподіл уваги тісно пов’язані. Відповідно UX-дослідники можуть відстежувати причини, чому гравці не зробили дію вчасно, наприклад. А така інформація допоможе покращити користувацький досвід гри. У матеріалі автор розписав, як технологія eye-tracking працює в UX-дослідженнях для геймдеву, які індикатори руху очей зазвичай використовуються та як інтерпретувати ці дані.

Відкладайте свої таски, бо у нас тут залипальний контент У пошуковику Google з’явилась функція Emoji Kitchen — можливість комбінувати емодзі. Принцип такий: оберіть перший квадратик та емодзі, а потім — другий квадратик. Далі натисніть на готову комбінацію й вона скопіюється у буфер обміну. Креативте на здоров’я. А в коментарях закидуйте ті комбінації, які ідеально описують ваш день.

Відкладайте свої таски, бо у нас тут залипальний контент У пошуковику Google з’явилась функція Emoji Kitchen — можливість комбінувати емодзі. Принцип такий: оберіть перший квадратик та емодзі, а потім — другий квадратик. Далі натисніть на готову комбінацію й вона скопіюється у буфер обміну. Креативте на здоров’я. А в коментарях закидуйте ті комбінації, які ідеально описують ваш день.

«Сміливо», «чесно», «жахливо». Такі реакції викликає веббруталізм Та усе почалося з архітектури та періоду, коли світ переживав наслідки розрухи після Другої світової війни. Будівлі у цьому стилі не мали декоративних елементів і нагадували важкі цементні «будинки-коробки» з простими геометричними формами. Розквіту ж бруталізм як архітектурний напрям набув у 1950-1970-ті. Загалом його філософія полягала в тому, щоб відкинути високі ідеали краси та «штучність» й показати правду, яка вона є. • Через десятиліття ця ідея перекочувала в дизайн інтерфейсів і трансформувалась у прагнення відійти від м’яких, шаблонних сайтів. Паскаль Девіль, який ввів термін «бруталізм» у вебдизайн, бачить привабливість стилю в «його грубості та байдужості, щоб виглядати зручно чи легко». Які основі характеристики веббруталізму? • Базові, не змодельовані HTML для сайтів; • монохроматичні колірні схеми, як-от чорно-білі або сірі; • проста типографіка з великими розмірами шрифту, щоб збільшити візуальну вагу тексту; • акцент на функціональності без додаткових декоративних елементів; • повторювані елементи дизайну, прямокутні форми тощо. 🔷 А як вам цей стиль? Зображення: Studio Push, Kurt Champion, PART Architects, Stedelijk Museum Amsterdam.

«Ну, брейнштормимо!» Як часто з такої чи схожої натхненної фрази починалися командні воркшопи, які у процесі здувалися? Річ у тому, що шторму ідей потрібна структура та послідовність дій. Як це можна забезпечити? 🔷 Залучати до творення дизайн-рішень і тих членів команди, які «не те щоб креативні». 🔷 Формувати попередній план воркшопу зі стейкхолдерами та отримати фідбек від них. 🔷 Зважено відкидати неробочі ідеї, обирати кращі рішення й будувати подальший план їх валідації. Щоб розуміти особливості кожного пункту й вміти їх втілювати в роботі, ми засетапили воркшоп Ideation. Co-Creation Sessions. Для кого? Для дизайнерів, дослідників і продуктових менеджерів. У процесі працюватимете в командах над реальними проєктами, для яких сплануєте та проведете воркшопи зі стейкхолдерами. А на виході вмітимете вести й фасилітувати командні штормінги, які завершуються чіткими результатами. Коли: 23-24 вересня. Ваш куратор: Юрій Грановський. Ознайомитися з програмою детальніше можна тут. До зустрічі!

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

Відрізнити ефективну діаграму від неефективної можна з першого погляду. І для цього не обов’язково бути профі. А от щоб візуалізувати дані, які без проблем передають суть ідей, статистики, знахідок — професійні скіли варто підсилити. Ця #книжкова_рекомендація допоможе крок за кроком розібратися, як створювати діаграми та графіки так, аби було зрозуміло, переконливо та ефективно. У посібнику дізнаєтеся про контроль кольору, створення чіткої візуальної комунікації, вибір типів діаграм тощо.

До вашого набору дизайн-інструментів — Durves, генератор патернів. Можна: • створювати візерунки з кривими й властивостями, які самі визначаєте; • експортувати у SVG та PNG форматах; • проєктувати текстурні дизайни. Взяти, протестити, користуватися.

Заглядаємо за технічні лаштунки Projector Mentorship Platform На її прикладі ділимося, як зібрати no-code сайт на Webflow, який інтегрується з іншими сервісами. Експерт у темі, автор ідеї платформи та розробки, а ще куратор Advanced Webflow Development Workshop — Стас Говорухін. Передаємо йому слово. Окрім інтерфейсу менті, у платформи є важливі компоненти: • бронювання сесії; • створення запису в Google Calendar і дзвінка в Google Meet; • запис інформації в табличку (для команди проєкту) тощо. Щоб все це магічно працювало, ми залучили сервіси для інтеграцій. Один з них — Make.com. Дані ж ми отримуємо не із самого сайту, а з віджета бронювання, який працює через український сервіс Wlaunch. Далі створюємо акаунт у Make й починаємо створювати багатокроковий сценарій: • беремо дані з Wlaunch: вони надсилаються вебхуком. Якби це була форма у Webflow, ми б поклали інтеграцію з нею на початок; • працюємо з отриманими даними: вони не дуже чисті, не завжди правильні, тому їх треба налаштувати, щоб Google Meet створив зустріч. Бонус — він автоматично створює зустріч в календарі. Те саме ми робимо й з записом у Google Sheets. І це — вершина айсберга. Використовуючи Webflow Logic, API та зовсім трошки кастомного JS (який вам люб’язно напише ChatGPT, наприклад), ми можемо робити складніші штуки. Наприклад, не лише забирати дані з сайту на Webflow, а ще й повертати їх та оновлювати сайт даними з іншого місця. 🔷 Якщо вам цікаво піти далі сайтів із формою — вирушайте на воркшоп Стаса.

Adaptive & responsive web design — на перший оманливий погляд, одне й теж. Але відмінність полягає у підході та періодах виникнення обох. Та й взагалі перший проклав шлях останньому. Вова Віндар, незалежний UI-дизайнер і куратор курсу Web Design Beginning, розклав по поличках суть адаптивного та чутливого (responsive) дизайнів. А ще поділився, як створювати чутливі дизайни, що йдуть на зустріч потребам користувачів. Читати.

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

UX-ресурси, з якими і скіли прокачаєте, і дизайн-процес підсилите • Короткі підказки та cheatsheets з продуктового дизайну на всі випадки життя. https://uxhints.com/ • Посібник для універсального дизайну з інклюзивними методами для воркшопів та порадами, як залучати учасників із різними фізичними та ментальними можливостями. https://universaldesignguide.com/ • Колекція best practices та законів психології, які допоможуть проєктувати користувацькі досвіди. https://lawsofux.com/info/

Якщо працюєте з UX для e-commerce продуктів — цей матеріал для вас Команда Baymard Institute дослідила 100+ вебсайтів електронної комерції, проаналізувала понад 13 000 UX-елементів на домашніх сторінках та навігації за категоріями. І запакувала ключові висновки із дослідження у статтю зі статистикою та прикладами.

Ситуація: обрати KPI для продукту, щоб драйвити результати Чіткий зв’язок між роботою дизайн-команди та бізнес-цілями компанії — вкрай рідкісна історія. Але дизайн — це ж не лише про те, щоб було красиво, а й ефективно. Відстежувати останнє можна й треба за допомогою KPI, які тісно пов’язані з бізнес-цілями. Як це робити з фокусом на результати, ділиться Віталій Фрідман, куратор Design KPIs Workshop. Думайте про те, як швидше спонукати користувачів до малих та великих успіхів у продукті й допомогти їм відновитися після можливих помилок. У такому разі показниками, на які варто звертати увагу є: • відсоток виконання завдань (task completion rates); • час виконання завдання (task completion times); • частота помилок (error frequency); • ефективність відновлення від помилок (error recovery rate). Відстежуйте також фактори, які сприяють успіху бізнесу й формуйте KPI дизайну навколо них. Щоб робити це ефективніше, використовуйте метрики й критерії якості закріплені до цього допису як загальний дороговказ. 🔷 Розбиратися на практиці, як формувати KPI дизайну, що дружать з бізнес-цілями, будемо на воркшопі разом з Віталієм. Долучайтеся.