Частинка моєї бібліотеки ❤️📚❤️

Pixel Perfect Precision – хороші базові поради. Із прикладам "добре/погано". Дуже легко сприймається, буде корисна як новачками, так і більш досвідченим веб-дизайнерам. До речі, там ще є розділи по Фотошопу та Ілюстратору, може комусь знадобиться.

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

Інтерфейс користувача – одна з обов'язкових книг, яка просто повинна бути на поличці кожного, хто працює з інтерфейсами. Вона повністю інтерактивна та доступна тільки в цифровому варіанті. Ось тут можна спробувати демо. Трохи історії, принципи взаємодії, закони та поради і ще багато-багато корисного всередині.

Типографіка і верстка аналогічно попередній – маст хев! Народ, 95% вебу – складає типографіка. Отже, якщо ви освоїте цю книгу, ви прокачаєте себе нереально. Також актуально для графічних дизайнерів, оскільки їх це теж стосується. Доступне демо.

Камон ділитись враженнями від прочитаного 😇, долучайтесь до нашого чату – кнопка "Обговорення" внизу👇
#books

А це Ідея! Додам ка я до іконок фотки на ховер – Бінго🥳

Давайте почнемо із задач, які мали б виконувати іконки на прикладеному відео:
– Більшість юзерів сканують веб-контент, іконки допомагають сфокусувати увагу ✅
– Іконки мають допомагати швидко зрозуміти про що йде мова ✅❌
– Мають доповнювати текст, а не замінювати його ❌
– Іноді іконки роблять сайт оригінальним, показують, що бізнес дбає про кожну дрібницю❌

А ще варто додати, що іконки повинні бути зрозуміли з першого погляду (інтуїтивними). ❌

Перенесемо в текстовий формат наш сет іконо-фоток:
Чувак на туалеті / Яблуко – Діарея
Гиря в шлунку / Піца – Важкість в шлунку
Бокал та пляшка / Склянка з алкоголем – Алкогольне отруєння
Чувак тримається за живіт / Бургер – Харчове отруєння
Йоршик / Кульбаба – Алергія
Чувак тримається за живіт (2) / Вертоліт – Нудота
Якісь кульки в непонятно чому – Метеоризм

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

Хтось скаже: "Не так вже й погано" 🙈
– Але, краще вже просто текст, ніж ось таке...
До речі, сайт ще й номінується на awwwards.com

Якщо хочете дізнатись більше про те, як правильно працювати з іконками – ось класна стаття від Smashingmagazine

#fail #icons

Таймер, стопЕ ✋

Часто можна зустріти слайдер відгуків із автоматичним таймером. Як правильно спроектувати?

Розглянемо приклад із сайту на відео.

Добре
– Видно, через який час покаже наступний відгук
– При кліку на стрілку (вправо, вліво) слайдер не перемикає автоматично, дає змогу прочитати повністю.

Не дуже
– Хоча після кліку на стрілку не перемикає автоматично, час все одно вичерпується – це створює тиск (примушує читати швидше)

Висновок
Створюючи додаткову взаємодію ви ускладнюєте сприйняття користувачем вашого сайту.

Замість того, щоб продумати усі кейси, де щось піде не так, намагайтеся спрощувати.

Наприклад, покажіть відразу три відгуки. Один з них зробить контрастним, щоб сфокусувати увагу. Це можна робити розміром, кольором, в крайньому випадку opacity, якщо верстальщики вас простять)

#interaction #tips

Ок, зачекаю поки доповниться👌

Обожнюю такі дрібниці! А це, до речі, перша евристика Якоба Нільсена – про видимість стану системи.

Якщо ви досі не чули про це нічого, швидко читайте, оскільки це має розуміти кожен UX/UI/Product дизайнер!

10 евристик Нільсена

#tips #interaction #mustknow

Шанс на помилку, бай бай ✋

Не давайте юзеру можливості помилитись.

MailChimp (знову🙃) добре з цим справляється на сторінці реєстрації. Відразу видно всі вимоги до створення паролю. Важливо показати це під час введеня, щоб користувач не допустив помилку.

Для підкріплення матеріалу😊
Знову ж повертаємось до евристик дєда Якоба (див. попередній пост).👆

№5. Попередження помилок (вимоги)
"Ретельна конструкція, яка запобігає виникненню проблем – це набагато краще, ніж хороші повідомлення про помилки. Зведіть до мінімуму кількість умов, в яких можуть бути допущені помилки або усуньте умови, що можуть призвести до помилок в роботі з системою, або надайте користувачам можливість підтвердження, перш ніж вони зроблять дію."

№1. Видимість стану системи (Your password is secure...)
"Користувач завжди повинен орієнтуватися і добре розуміти, що відбувається в системі. Взаємодія між користувачем і системою повинна бути якомога більш логічною і швидкою."

Пссс...відчуваєш? Ти стаєш кращим UXером 😎 (можливо). Поділись із друзями, якщо хочеш, щоб вони теж прокачувались 🤓

#tips #interaction #mustknow

Доведи, що ти унікальний 😳

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

💪 Waze чітко сформував сильні сторони. На відео зображений onboarding додатку.

Onboarding дуже важливий – перше враження юзера відіграє велику роль у тому, чи повернеться він наступного разу (retention). Дайте чітко зрозуміти що у вас є і як це парцює.

Особисто я дуже довгий час ігнорував Waze 🤔 (інколи через UX, інколи через UI), поки не побачив, що він показує аналіз трафіку. Таким чином дає зрозуміти, коли краще виїжджати в дорогу, щоб швидше дібратись до місця призначення.

Не забувайте, що лінки в постах дуже корисні. Підбираю максимально цікаві ресурси! 😍

#mobile #onboarding #tips

Ґуру UX 🏋️‍♂️

Я подумав, що було б круто поділитись із вами портфоліо досвідчених UX/Product дизайнерів.

Яка користь з цього?
– Наслідуємо методи та прийоми
– Будемо краще розуміти процес створення дизайну
– Аналізуємо, як думають експерти сфери
– Вчимось презентувати свої роботи із донесенням проблематики, процесу та результату

Отож погнали! 🐌

Karolis Kosas – продуктовий дизайнер в Stripe. В його кейсах завжди є результат дизайну: підвищення конверсії, виручки, App Store featured і ще багато чого.

Alex Lakas – дизайнер, який працював над Google Maps. Завжди розповідає, над чим працював в даному проекті. Декілька цитат, які мені імпонують: "Understand, explore & validate", "I use design to tell stories & build products"

Simon Pan – працював над продуктами Uber 🚖, Amazon, Google, Medium. Детально описує дизайн-підхід, процес та хід думок.

🍒 Niya Watkins – не може похвастатись роботою з відомими брендами, але це справжня вишенька на торті. Ресьорч, потреби бізнесу, юзерів, прототипи, персони, тести – все там є! Такі роботи надихають.

Хорошого по-трошки 😉

#portfolio #productdesign

🔵 Panton назвав колір року – "Classic Blue"

Хто такий цей Пантон? 🤷‍♂️
Всесвітньо відома організація, авторитет в сфері кольору. Постачальник кольорових схем і передових технологій точної передачі кольору для різних галузей: друку, фарб, тканин, пластику і т.д.

Що таке колір року? 🤓
У них є інститут (Pantone Color Institute), який займається експериментами з кольором і його впливом на різні сфери (моду, поліграфію, рекламу, кіно). Визнаний ведучим джерелом інформації про колір. Починаючи з 2000 року ця організація щорічно називає колір року (вже існуючий відтінок в реєстрі Pantone), який на їх думку починає домінувати в різних галузях. а це означає, що в наступні 365 днів буде найактуальнішим.

Як його вибирають? 🥶
Слідкують за частотою використання кольорів на модних показах, виставках, арт-об'єктах, тощо. Також за тим, які кольори одягу вибирають жителі великих міст. Особливу увагу звертають на жителів Мілану, Парижу та Лондону. Pantone також аналізує нові фільми найвпливовіших режисерів, щоб зрозуміти, які відтінки переважають на екрані. Новинки техніки, особливо автопром. Після детального аналізу зібраної інформації оголошують колір року. 🥳

Цитатки з анонсу 💭
"Introducing the Pantone Color of the Year 2020, PANTONE 19-4052 Classic Blue, a timeless and enduring blue hue elegant in its simplicity. Suggestive of the sky at dusk, the reassuring qualities of Classic Blue offer the promise of protection; highlighting our desire for a dependable and stable foundation from which to build."

Відос з анонсу 👈👇

#colors #design_news

Документи в порядку – це Норма 🔥

Знімаю шляпу перед копірайтером.
Як так геніально обіграти неймінг? Можливо це задумувалось ще на етапі створення назви, але хто знає як там було насправді)

Черговий рецепт 🥘
Якщо влучно поєднати неймінг із копірайтом, юзер точно запам'ятає ваш продукт.

Ну просто почитайте це, камоон 🤓

#content #copyright

UX статистика 🔥

Знайшов цікаву статистику за 2019 рік. Поділюсь з вами частиною.

– Тільки 55% компаній тестують рішення 😳

– Фіксити проблему на етапі дизайну в 10 разів дешевше, ніж на етапі верстки. І в 100 разів дешевше, ніж на живому продукті.

– Більше 70% сайтів малого бізнесу не використовують CTA (call to action) кнопки 👀

– 70% користувачів звертають увагу на список із булетами, без булетів помічають тільки 55%

– Візуальні дані сприймаються мозком в 60 тис. разів швидше, ніж текст 🧠

– Якщо сайт не mobile-friendly, 50% юзерів будуть користуватись ним рідше, навіть якщо вони задоволені послугами.

Не забувайте перевіряти джерело даних, перш ніж опиратись на них в своїх аргументах 🤓

усі факти тут 👇
40 статистичних фактів UX 🇬🇧

Найки Ісуса 👟

А ви вже чули про ці кроси?

Фб автора посту

Відкинься і розслабся 😉

Заглянув в свою папку з корисними ресурсами і знайшов там сайт, який генерує "human centric" текст для різних випадків.

Цей проект на стадії розвитку, тому не судіть строго 🙄