Скевоморфізм: плюси, мінуси, підводні камені?

Лайк — якщо одні плюси.
Темний місяць — якщо радше мінуси.

Анімація Apple Books, знайдена на Design Spells.

Badges, Pills, Chips, Tags — у чому різниця і як їх використовувати?
Гайд від Віталія Фрідмана, засновника та креативного ліда у Smashing Media.

🔹UI компоненти бувають статичні та інтерактивні

Badges — завжди статичні, використовуються для статусу та оновлень. Наприклад, draft, new, pending, -7%↘.

Tags — можуть бути і статичними, і інтерактивними.

Статичні — для тем, ключових слів, інтерактивні — для посилань, фільтрів, вибору, дій.

Tags часто називають chips або pills.

🔹Види тегів

Display tags показують дані. Наприклад, ключові слова, мітки, деталі.
Data tags відображають числові дані. Наприклад, PDF 262 KB.
Filter tags — це активні фільтри з опцією видалення.
Selection tags для фільтрації або введення інформації.

🔹Основна різниця

Badges — для статусу, оновлень, лічильників.
Tags/chips/pills — для інтерактивних фільтрів, вибору, дій.

Щоб уникнути плутанини, використовуйте чіткі назви: «Filter tags» — краще, ніж просто «Tags», а «Status badges» зрозуміліше, ніж «Badges» чи «Pills».

🔹Дизайн правила

Статичні елементи не повинні виглядати як кнопки, а інтерактивні — як мітки.
Мінімальний розмір інтерактивного елемента — 48×48px на мобільних.
Відстань між інтерактивними елементами — щонайменше 8px.

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

За експертизою та фідбеком Віталія приходьте на UX Strategy Workshop. Старт — 27 листопада.

Повний текст допису Віталія на LinkedIn.

Щоб дати команді якісний фідбек, вам має бути:

а) не страшно роздратувати людину,
б) глибоко не плювати на тих, кому ви його даєте,

Ділиться Алла Одеяненко, Lead Product Designer у Google. На відео — її пояснення, як прийти до фідбеку, що сприятиме реальному зростанню та глибоким змінам.

Повний гайд «Як давати фідбек, що допомагає зростати дизайнеру» — у лекції на Projector Library.

Вичерпне навчання, як стати системним і ефективним дизайн лідером — на курсі Design Management.

До речі, це стара лекція, що була записана російською, — вирішили не губити корисне та перекласти за допомогою ШІ. Як вам результат?

Вчитися приємно. Переконайтеся з Projector Library: між робочими завданнями, поки чекаєте сніданок у кав’ярні чи загорнувшись у ковдру 🐈‍⬛️

Маємо чорно-п’ятничний тиждень знижок у найбільшій українській відеобібліотеці, що має 700+ лекцій від топових creative&tech спеціалістів 🖤

З 25 по 30 листопада знижка на річну підписку 60% — 950 грн замість 2500 грн. Приєднуйтеся 🐾

Контент 🤝 User Experience

Ну, в ідеалі. Адже поганий UX контент може зробити геніальний дизайн дратуючим.

Приклад: посилання «Learn more». Що саме користувач дізнається, натиснувши на нього? Чи отримає він потрібну інформацію, чи лише втратить час? Відсутність конкретики в тексті може створювати плутанину, додаткове когнітивне навантаження та погіршувати досвід користувача. Як цього уникнути радить Віталій Фрідман:

Як зробити UX контент сильним?

Ясність: що саме очікує користувача? Наприклад, замість «дізнатися більше» використовуйте «дізнатися ціни».
Доречність: текст має відповідати контексту.
Простота: менше складних формулювань — більше зрозумілих слів.

Чого варто уникати?

Кліше і розмитих фраз: наприклад, «сlick here» чи «explore» не додають жодної цінності для користувача.
Перевантаження: забагато тексту іноді дорівнює його відсутності.
Недоступності для людей з інвалідністю: контент має бути зрозумілим для всіх користувачів.

Що і як можна протестувати?

• Banana test: замініть ключові слова на «банан» і попросіть юзерів пояснити зміст.

• Cloze test: видаліть частину тексту і попросіть користувачів заповнити пропуски.

• Reaction cards: напишіть 25 емоцій на картках і попросіть обрати ті, які найкраще описують продукт.

• Card sorting: попросіть користувачів групувати теми в категорії.

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

• Competitive testing: покажіть сторінки конкурентів і запитайте, як користувачі розуміють їхній зміст.

Контент — частина інтерфейсу, тож не забувайте приділяти йому увагу. Як і тестуванню загалом.

Принагідна рекламна інтеграція — інтенсив Віталія Measuring UX and Impact of Design. Зрозуміємо, що і як міряти, щоб досягати бізнес результатів, вже 4 грудня.

Пані та панове, хочемо позичити ваші 5 хвилин

Питаємо про ваш досвід — бажання, цілі, плани — роботи з no-code інструментами. Повернемо борг у вигляді корисного контенту. Дякуємо!

Клікайте сюди

Як найняти АІ працювати над інтерфейсами за вас

Розповідає Денис Суділковський, бренд та бізнес директор ЛУН.

На відео — приклад прискорення дослідження завдяки АІ.

Більше технік і прикладів від Дениса в лекції «ШІ (AI) в інтерфейсному дизайні» на Projector Library.

Ще більше — на інтенсиві AI for Business Growth від Марії Пономарчук: експертки, що обіймала посади Product Director у TikTok, Product Manager у Apple, Head of Product у Reface та працює з АІ з 2015 року — задовго до того, як це стало мейнстрімом.

Робото-полегшувальне

Плагін Logo Layout для Figma допомагає розміщувати кілька різних логотипів так, щоб разом вони дружили та виглядали красиво на макеті.

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

Тестуйте!

Як виміряти UX? 10 корисних посилань — про метрики, KPIs та фреймворки

• HEART Framework Template
Miro

• 49 UX Metrics, Methods, and Measurement Articles
MeasuringU

• How to Measure the Impact of UX Research?
Medium

• How to Choose the Right UX Metrics for Your Product
Home

• Google’s HEART Framework for Measuring UX
Interaction Design Foundation

• Top 5 UX Frameworks to Measure User Experience
DEV Community

• How to Measure User Experience: 7 Key UX Metrics
Userpilot

• The 7 Most Important User Experience (UX) KPIs
UX Design Institute

• The Complete Guide to UX Metrics
HubSpot

• Effective UX Metrics and KPIs to Measure User Experience
ScreenRoot

Навчіться перетворювати розмиті цілі та чіткі КРІs дизайну на інтенсиві Віталія Фрідмана — Measuring UX and Impact of Design. Зрозуміємо, що і як міряти, щоб досягати результатів вже 4 грудня.