interfaces.prjctr | vnotchenko week

Поки ви допиваєте ранкову каву й ментально налаштовуєтеся на режим «встигнути все», маємо для вас дизайн-розминку — тести 2.0. Буде 5 завдань, кожне з'являтиметься що 20 хвилин. Let's go!

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

Глянути на інтерфейс очима користувачів Або як протестувати, що юзери зможуть без проблем користуватися складною та/чи системою з новим функціоналом? Відповідь — cognitive walkthrough. Суть методу — оцінити юзабіліті та learnability інтерфейсу на основі завдань. Це як юзер тестування, але проводиться без користувачів. Натомість усе відбувається у форматі воркшопу, де участь можуть брати UX-фахівці, власники продуктів, розробники, експерти сфери. Вони проходять кожен етап флоу і відповідають на 4 запитання, щоб виявити частини інтерфейсу, з якими у нових користувачів можуть виникнути труднощі: 🔹Чи спробують користувачі досягти правильного результату? Тобто, чи зрозуміють вони, що дія на даному етапі потрібна для досягнення їхньої загальної мети? 🔹Чи зможуть користувачі легко знайти інтерактивний елемент, який виконує дію? 🔹Чи асоціюватимуть користувачі правильну дію з цільовим результатом? Наприклад, правильна кнопка є видимою, але чи зрозуміють юзери її позначення і, чи будуть вони знати, як з нею взаємодіяти? 🔹Залежно від того, що відбувається після виконання дії, чи знатимуть користувачі, що вона була правильною та допомогла їм досягти  загальної мети? • Більше про метод, як він відрізняється від евристичного аналізу та його приклад — у статті.

Наш адвент-збір на БПЛА СИЧ несеться і приніс вам лот — сертифікат на 10 менторських сесій. Чому це класно? По-перше, донатом ви наближаєте нашу перемогу. А по-друге, знаходите наставника серед 80+ експертів у дизайні інтерфейсів, протягом року розбираєте питання, на які шукаєте відповіді та прокладаєте шлях розвитку себе, кар’єри чи обох. Ось малееенька частинка менторів, які порадять і підтримають: • Андрій Курочкін допоможе з рев'ю проєктів або портфоліо та всім, що стосується безпосередньо вебдизайну. • Стас Говорухін проведе портфоліо-рев'ю, дасть пораду з кар'єрного розвитку і допоможе з мобільним дизайном. • Аліса Головінська допоможе розібратись з базовими принципами дизайну: рев’ю проблем з типографікою, сітками і загальним «в роботі щось не так, але не розумію що» та як працювати з тестовими завданнями й презентувати роботи. • Алєся Подлєсная допоможе в підготовці до інтерв'ю та позиціюванні себе як спеціаліста, зокрема на ринках Європи та США. • Юра Грановський поділиться досвідом побудови дизайн-процесів та стратегії досліджень, використання дослідницьких методів і залучення стейкхолдерів в дизайн-процес. Крок для участі в розіграші — 200 грн.⁠ 🔹Закидуйте донат на банку Важливо: якщо донатите не через монобанк, пишіть у коментарях до переказу ваш нікнейм в інстаграмі. ⁠ Долучайтеся.

Якісні українські шрифти — те, що з радістю шеримо з вами й закликаємо плекати. Ловіть добірку тих, з якими можуть промовляти ваші проєкти. 🔹Текстові • Otoiwo Grotesk Олега Ліщука. У шрифтовій сімʼї є по два накреслення з відкритою ліценцією. • Zerno Олега Ліщука. Два стилі є з відкритою ліцензією. • Mars Type Pro Євгена Садко. Тут у нас повна гарнітура. 🔹Для малих текстів і заголовків • Grunt Grotesk Валентина Ткаченка. Накреслення light та bold мають відкриту ліцензію. • Murs Максима Кобузана. Накреслення Wide Dark — безоплатне. • Marevo Анастасії Шишенок, Кирила Ткачова. Щоб придбати шрифт потрібно написати в директ. 🔹Акцидентні • Decutto Михайла Рафайлика. Тут платні накреслення. • Palitura Михайла Рафайлика. Тут також платні накреслення. • BraveStone Кирила Ткачова, Сергія Макаренка. Щоб придбати шрифт, потрібно написати в директ.

А в X, у кращому минулому твіттері, справи з дизайном — цікаві. Ось, наприклад, що буде, якщо скоротити дизайнерів. І копірайтерів, схоже, теж.

Друзі, у нас є запитання. А у вас — відповідь. Який контент хочете бачити у цьому каналі? Сміливо накидуйте у коментарі, про що вам буде цікаво почитати, які теми нам варто розкрити. Ми вже сидимо тут з розгорнутим нотатником ✍️

Дизайн всюди. І в деталях теж. Ділимося ресурсами, з якими естетично доповните інтерфейси. • Анімовані лоадери. • Градієнти. • SVG форми. А на Mobile UI Design Workshop навчитеся працювати з UI та його елементами, щоб дизайни були не лише зручними, а й візуально привабливими.

Мерая Кері вже нагадала, що «ітс тааааайм». Але для українців настрій «повний джинґл белз» має різні тональності. Тому Продж з друзями запускає благодійний адвент-збір. Вам — подарунки за донати, військовим — СИЧі 😉 Усі деталі — в галереї. Підписуйтеся на сторінку Projector в Instagram, щоб не пропустити жоден з подарунків. 🔹 Перші три вже на сторінці

А ви знаєте своїх користувачів? Ці базові методи й інструменти (та їх різні альтернативи) допомагають аналізувати поведінку юзерів і виявити потенційно проблемні місця в роботі апки. Ділюся з вами. 🔹Кількісний аналіз Підходить для роботи з великою кількістю даних. З аналітикою виявите тенденції та шаблони поведінки користувачів у застосунку. • Інструменти: 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 виставка. Запитання до вас — яку апку пам’ятаєте у цих версіях?