interfaces.prjctr | pasichnyk week

А ви знаєте своїх користувачів? Ці базові методи й інструменти (та їх різні альтернативи) допомагають аналізувати поведінку юзерів і виявити потенційно проблемні місця в роботі апки. Ділюся з вами. 🔹Кількісний аналіз Підходить для роботи з великою кількістю даних. З аналітикою виявите тенденції та шаблони поведінки користувачів у застосунку. • Інструменти: Amplitude, Google Analytics for Mobile, Mixpanel, Firebase 🔹Юзабіліті тестування Побачите в дії, як юзери користуються застосунком й вийдете на потенційні проблеми з дизайном • Інструменти: Maze, UserTesting, Lookback, UXCam 🔹Опитування Дізнаєтеся, як користувачі сприймають застосунок загалом або нові функції, які у них виникають потреби та проблеми. • Інструменти: Monkey Survey, Typeform, Google Forms, JotForm #гостьова_середа

Коли не знаєте, за що братися, починайте з основи. Коли стартуєте у дизайні мобільних застосунків, теж починайте з основи. З нею відкинете зайвий шум і зосередитеся на базових принципах, що роблять апки зручними. 🔹Пам’ятайте про «зону великого пальця» • розміщуйте ключові дії так, щоб їх було легко досягти великим пальцем; • розташовуйте важливі елементи дизайну в центральних частинах і нижній половині екрана. 🔹Інтуїтивна навігація — маст • використовуйте навігаційні елементи та патерни, з якими юзери вже знайомі; • переконайтеся, що юзери можуть без проблем відповісти на запитання «Де я?». 🔹Починайте дизайнити з екранів меншого розміру • надавайте пріоритет маленьким екранам для кращого UX застосунку; • розробляйте дизайн так, щоб його можна було масштабувати на більші пристрої. 🔹Давайте користувачам фідбек • використовуйте тактильні, звукові або візуальні підказки; • інформуйте користувачів про стан системи: підтверджуйте дії, попереджуйте про наслідки. 🔹Пам’ятайте про gesture UI • використовуйте інтуїтивно зрозумілі та загальновідомі жести: swipe, drag, tap; • тестуйте ці та інші жести з користувачами. 🔹Текст має бути читабельним • не бійтесь робити шрифти більшими; • пам’ятайте про ієрархію типографії. Недостатній контраст між основним текстом і заголовком та нехтування правилом близькості — найчастіші помилки. 🔹Не змушуйте користувачів вводити багато даних • використовуйте степпери, чекбокси та автозаповнення, коли це можливо; • не забувайте про перевірку полів та підказки. 🔹 Швидкість має значення • знайдіть точки, коли користувачі чекають відгуку від інтерфейсу; • подумайте, як їх обіграти — анімація пошуку або прелоадера краще, ніж пауза в кілька секунд без реакції на дії юзерів. 🔹Використовуйте нативні можливості мобільних операційних систем • покращуйте UX за допомогою камери, GPS, Touch ID, Face ID, dynamic island тощо. #гостьова_середа

Що тут мають на увазі? Години? Дні місяця? Так багато запитань, так мало чіткого UX-копі.

Складні в опануванні. Прості у використанні. Якби створювали загадки про компоненти Figma, щось таке написали б про таблиці. Щоб скіпнути складну частину, рекомендуємо: • ознайомитися з прикладами організації даних в таблицях; • отримати навички швидко створювати та редагувати таблиці у Figma на воркшопі Data Tables in Figma.

Кому добірку помічників-плагінів Figma? Куратори Проджа поділилися улюбленими. 🔹Андрій Курочкін, куратор курсів Web Design Beginning, Web Design Junior • Smooth Shadow — робить чудові тіні у два кліки. • Image Tracer — надійний помічник, коли треба швиденько векторизувати зображення. • To Path — розміщує тексти на будь-яких кривих. 🔹Мар’яна Бучкович, кураторка курсу Web Design Junior • RemoveBG — ШІ-плагін, який допомагає позбутися фону на фото в один клік. • Invert Color — інвертує фони, заливки, контури та кольори ефектів. • Contrast — допомагає перевірити контрастність кольорів та відповідність до WCAG. 🔹Вадим Грін, куратор Basic Animation in Figma • Autoflow — допомагає швидко й охайно створити user flows у Figma. • Relume Ipsum —AI-плагін, щоб створювати контент для дизайну без усіляких lorem ipsum. • Jitter— дозволяє анімувати безпосередньо у Figma. Робимо другу частину?

Заглянемо у минуле застосунків? Цього разу у музею інтерфейсів special edition виставка. Запитання до вас — яку апку пам’ятаєте у цих версіях?

Відчиняйте, бо прийшов грудень, а з ним і добірка наборів Проджа Обирайте, які навички прокачаєте під кінець року: 🔹 Курси • Web Design Beginning 4 грудня • Product Design 4 грудня • UX Design Beginning 6 грудня • Mobile Apps Design 18 грудня 🔹Інтенсиви • Basic Animation in Figma Workshop 4, 6, 9 грудня • Designing for Complex UI 6, 7, 8 грудня • Mobile UI Design Workshop 11, 14 грудня • Data Tables in Figma 16, 17, 22 грудня 🔹Відеокурси • Figma • Webflow

Тест на дизайнерську особистість. На якому боці ви? Підгледіли тут.

Пані та панове — анімація Звичайна та мікро, у лого, слайдері, застосунку та скролі сайту. Розглядайте й надихайтеся добіркою жвавих інтерфейсів, яку склав куратор Вадим Грін. А навчитися теж анімувати можете на інтенсиві Вадима — Basic Animation in Figma Workshop. Усе про воркшоп. Анімацїї: Lazarev agency 1, 2, Evan Place, Prakash Ghodke, Taras Migulko.

Базовий, але корисний інструмент. Ділимося генератором колірної палітри від Figma. Можете одразу переносити кольори у редактор. А бонусом, почитати інформацію про моделі та коло кольорів. Те, що треба, якщо ви починаєте розбиратися у темі. Забираю.

Вебдизайн по-японськи. Елементи, які вирізняють його • Вертикальна типографія В інтерфейси сайтів вона прийшла з традиційного японського письма татегакі. У ньому символи потрібно писати стовпцями зверху вниз. До речі такий текст можна читати як з лівого, так і з правого боків. Хоча за правилами друкованих ЗМІ в Японії, останній все ж переважає. • Людина — центральна фігура Японські гілки життєвої філософії, як-от ікіґай (відчуття власного призначення в житті) вабі-сабі (менше — це більше) дан-ша-рі (очищення від безладу) органічно вписуються у вебдизайн. Великі зображення з людиною у центрі поєднуються з вільним простором, якого тут багацько. Такі сайти візуально «дихають» і передають відчуття спокою. • Wafuu — японський стиль У Японії вміло поєднують сучасність та традиції. У вебдизайні ви це також можете побачити. Сайти японської кухні, кондитерських виробів, готелів часто відображають елементи традиційної естетики країни. • Синергія зображень і неправильних форм Японські вебдизайнери виходять за межі прямокутників. Вони сміливіше використовують інші варіації форм та силуетів, які віддзеркалють бренд компанії. Повна стаття тут. ____ Зображення сайтів: Isaka, Owaricho, Haa Japan, Hako Nature, Yamadaya Manju, Byaku, Omusubi, Aquastand.

Фундаційні набори — безоплатне навчання з місією. Це підтримка жінок у карʼєрних змінах та допомога на початку шляху у креативному чи ІТ секторі. Бо ми віримо у силу вільної освіти та кожну, хто починає новий шлях. Долучитися до програми можуть жінки-переселенки, що проживають в Україні та закордоном. Шукайте програми за посиланням. Ініціатива реалізується за фінансової підтримки Європейського Союзу та інформаційної підтримки Міністерства економіки України.

ШІ дійшов і до FigJam Раптом ви ще не розібрались, що до чого, розповідаємо. Тепер можете скинути на ШІ завдання: 🔹генерувати шаблони для дзвінків, брейнштормів і ретроспектив; 🔹сортувати картки за категоріями; 🔹формувати ключові пункти та висновки після командних зустрічей. Хто вже тестив функцію, як працює? Відео — Figma.

CAPTCHA, від якого користувачі думають може і не треба їм той акаунт через 3, 2, 1.... • Через які капча у вас сіпалося око?