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 грудня.

Дістаємо з шухлядки спосіб тестування 2002 року

Microsoft Reaction Card Method — це простий і канонічний інструмент для збору емоційного фідбеку.

Як працює?
• Користувачам дають перелік із 118 слів: позитивних, нейтральних, негативних.
• Їх просять вибрати ті, що найкраще описують продукт чи досвід.
• Після цього користувач пояснює, чому обрав саме ці слова.

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

З плюсів: низький бар’єр для участі та достатня емоційна глибина, де на питання типу «що вам не сподобалося?» користувачі справді діляться асоціаціями та почуттями. Більше — у статті NN/g.

Користуєтеся цим методом?
🤝: так
🌚: ні
💅: тестувати — шлях слабких

7 iconic книг про UX дизайн

• «Don't Make Me Think», Steve Krug
Класика про принципи зручності використання продуктів. Автор пояснює, як зробити інтерфейс інтуїтивно зрозумілим.

• «The Design of Everyday Things», Don Norman
Основоположна книга про психологію дизайну: як зробити об'єкти та системи простими для використання?

• «About Face: The Essentials of Interaction Design», Alan Cooper, Robert Reimann, David Cronin & Christopher Noessel
Посібник, який охоплює основи проєктування інтерфейсів та створення зручного цифрового середовища.

• «Lean UX: Designing Great Products with Agile Teams», Jeff Gothelf & Josh Seiden
Практичний підхід до UX дизайну в умовах Agile. Книга вчить, як швидко створювати цінність для користувачів, інтегруючи UX у процес розробки.

• «Hooked: How to Build Habit-Forming Products», Nir Eyal
Дослідження, як створювати продукти, які формують звички.

• «Smashing UX Design: Foundations for Designing Online User Experiences», Jesmond Allen & James Chudley
Комплексний посібник для дизайнерів, який охоплює всі аспекти UX дизайну: від досліджень до прототипування та тестування.

• «A Project Guide to UX Design», Russ Unger & Carolyn Chandler
Практичний гайд для початківців у UX, який охоплює процеси створення продуктів — від досліджень до кінцевого дизайну.

Які б додали ви?

Хто з вас?

Дизайнерам інтерфейсів приготуватися! Під ваші ялинки рушає адвент вікторина 💙

Що це?
1. З 1 по 30 грудня ми опублікуємо 15 питань: спочатку кейс, наступного дня — правильну відповідь.
2. Ви відповідатимете в коментарях — що більш розгорнуто, то краще.
3. Автори кейсів обиратимуть кращі відповіді з коментарів.
4. 31 грудня ми підіб‘ємо підсумки та визначимо трійку інтерфейсних розумників і розумниць.
5. Зіграємо Святого Миколая — прийдемо з подарунками.

У ролі подарунків: сертифікати на менторські сесії від спеціалістів Prjctr Mentorship Platform.

У ролі авторів кейсів: куратори та команда Проджа.

Line-up: Віталій Фрідман (Smashing Media), Франческо Кутоло (Wolt), Стас Говорухін (Djinni), Борис Бакланов (Klarna), Євген Олексюк (EPAM Systems), Мар’яна Бучкович (Fedoriv), Ян Гладченко (Raiffeisen Bank Ukraine), Анна Дем’яненко (Lazarev), Оля Алтухова (airSlate).

Бонус: фанові питання від команди.

Щоб що брати участь?
🔹Буде цікаво та освітньо: круті питання крутих спеціалістів.
🔹Перевірте себе, поміряйтеся скілами з іншими та відчуйте силу ком'юніті — хай коментарі перетворяться на інтелектуальний батл.
🔹Подарунки — це ж круто, еге ж?

Діліться з друзями-дизайнерами, щоб змагатися і з ними.

Вмикайте сповіщення, щоб не пропускати питання — спамити не будемо!

Ready, steady, go brace yourself the winter is coming… 🫂

Ви підготували перший драфт дизайну для клієнта за раніше узгодженим брифом.

Проте на зустрічі клієнт каже, що «все не те», дизайн «не метчиться з його очікуваннями».

Але не дає конкретних правок.

Питання: Як ви будете діяти, щоб отримати від клієнта чіткіший фідбек і зрозуміти, які саме аспекти дизайну потрібно змінити?

Кейс від Мар’яни Бучкович — кураторки Figma Autolayout Workshop, Senior UX/UI Designer у Fedoriv.