BEREST UX/UI

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

Для когось це може стати джерелом нових ідей, бібліотекою хороших референсів, а для інших можливістю спілкуватися і стежити за тим, що відбувається в індустрії

https://t.me/formadesign

Дуже цікаво: як різні компанії ведуть файли у Figma, і як це роблять дизайнери самої Figma 🔥

На цьому сервісі дизайнери компаній Slack, LottieFiles, Felt, Bezi і навіть самої Figma показують, як готують макети та описують їх для розробників.

У Figma, мабуть, найбільша й найдетальніша специфікація для розробників у вигляді презентації, яку я коли-небудь бачив.

https://sneakpeek.design/

@berestux

Дивіться ретроспективно!

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

Якщо постійно докладати зусиль і наполегливо працювати, то майже завжди ви будете рухатися вперед. Це універсальна закономірність, яка стосується не тільки кар’єри. Пам’ятайте про це, тримайтеся й не здавайтеся! Ви точно зможете!

Усім гарних вихідних❤️🎄

@berestux

#закони_ux

08/29 Ментальні моделі у UX: Як зробити інтерфейс зрозумілим із першого погляду

Ментальні моделі – це уявлення, які користувачі мають про те, як щось працює.
Люди взаємодіють із вашим продуктом, виходячи зі свого досвіду та очікувань, а не з того, як ви його створили.

Наприклад, коли людина бачить піктограму у вигляді кошика, вона інтуїтивно розуміє, що це місце для доданих товарів. Або коли на сайті є кнопка із позначкою «Х», користувач очікує, що це закриє вікно. Якщо ваш продукт відповідає цим очікуванням, його легше зрозуміти і використовувати.

Як врахувати ментальні моделі в UX-дизайні?

✨ 1. Знайомі елементи – мінімум здогадок
Ваш інтерфейс має відповідати очікуванням користувачів. Не потрібно вигадувати новий спосіб закривати вікна або додавати товари в кошик, якщо стандартні рішення вже працюють.

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

✨ 2. Досліджуйте свого користувача
Ментальні моделі залежать від досвіду людини. Наприклад, покоління, яке виросло з паперовими документами, очікує, що кнопка «Зберегти» буде у вигляді дискети. Молодші користувачі можуть не розуміти цей символ, але інтуїтивно сприймуть піктограму хмарного збереження.

Як дослідити:
• Проведіть юзабіліті-тестування: запитайте, як люди очікують, що працюватиме ваша функція.
• Спостерігайте за їхньою поведінкою: як вони шукають потрібні опції, які дії виконують першими?

✨ 3. Не змушуйте “вчитися” на вашому продукті
Користувачі не повинні витрачати час, щоб зрозуміти, як працює ваш інтерфейс. Якщо їм потрібна інструкція або вони губляться, це сигнал, що ментальні моделі не збігаються з вашим рішенням.

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

✨ 4. Залиште простір для експериментів, але поступово
Іноді інноваційні рішення можуть змінювати ментальні моделі користувачів. Але такі зміни потрібно вводити поступово, щоб вони сприймалися природно.

Apple колись прибрав фізичну кнопку «Додому» в iPhone і замінив її жестами. На перших етапах користувачам пропонували підказки, як це працює. Через кілька років жести стали стандартом для більшості смартфонів.

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

🇬🇧 Детальніше

@berestux

Кумедна ідея серії мокапів з промовистою назвою Fockups.

«Реальність така, що дизайн часто стикається з безліччю викликів: вітер, дощ, час, графіті, людська недбалість або несправність носіїв інформації. Усе це, зібране в серії Fockups, демонструє ці неприємності в реальних умовах. Ці макети максимально реалістично показують ваш дизайн у життєвих обставинах.»

На практиці не зустрічав брендингових рішень, які враховували б, як дизайн виглядає у таких умовах. Складно уявити, щоб таке стало основою презентації, хоча мати подібний пункт у запасі – цікаво. Я б точно оцінив такий підхід.

@berestux

🔥 Для натхнення

loadmo.re — це галерея мобільних сайтів, що демонструє найкращі дизайнерські ідеї для нестандартного вебу.

#berestux

#закони_ux

07/29 Парадокс активного користувача: що це і як із цим бути?

Уявіть собі ситуацію: ви купили нову програму або додаток. Там купа функцій, які обіцяють зробити ваше життя простішим і ефективнішим. Але замість того, щоб витратити час на їх вивчення, ви просто знаходите найпростішу кнопку “Зробити це” і користуєтесь лише нею. Знайомо? Це і є Paradox of the Active User – парадокс активного користувача.

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

Чому це трапляється?
1. Користувачі хочуть швидких результатів. Усі ми цінуємо свій час. Якщо потрібно зробити щось швидко, ми скоріше обійдемося старими способами, навіть якщо вони менш ефективні.
2. Страх нового. Нові функції можуть здаватися складними або ризикованими: “А раптом я щось натисну й усе зламаю?”
3. Звичка. Якщо люди звикли до одного способу роботи, їх важко переконати пробувати щось нове.

Як UX-дизайнерам з цим працювати?
✨1. Дайте можливість почати легко. Люди хочуть вирішити свою задачу швидко, тому зробіть базові функції максимально простими й доступними.
Приклад: у Figma нові користувачі можуть одразу створити свій перший дизайн без вивчення складного інтерфейсу.

✨2. Показуйте нові можливості поступово. Не навантажуйте користувача одразу всім функціоналом. Вмикайте підказки у потрібний момент.
Приклад: у Photoshop є короткі поради, які з’являються залежно від інструменту, яким ви користуєтесь.

✨3. Мотивуйте навчання. Додайте елемент заохочення, щоб люди вивчали нові фішки.
Приклад: Grammarly показує прогрес у навчанні й надає “досягнення”, коли ви відкриваєте нові функції.

✨4. Зробіть нові функції непомітно корисними. Іноді варто автоматизувати складні процеси, щоб користувач отримав вигоду, навіть не усвідомлюючи цього.
Приклад: Google Photos автоматично сортує ваші фото за подіями чи обличчями, і це не потребує додаткових дій.

Парадокс активного користувача – це виклик для дизайнерів, але й шанс. Якщо ви зробите продукт таким, який не тільки допомагає вирішити проблему тут і зараз, а й поступово знайомить користувача з новими можливостями, ви не тільки утримаєте їх, але й допоможете працювати ефективніше. Люди не завжди готові до змін, але ваш продукт може допомогти їм зробити цей крок.

🇬🇧 Детальніше

@berestux

#закони_ux

06/29 Закон Єдності Зв’язків говорить про те, що елементи, які візуально пов’язані між собою — наприклад, обведені рамкою, розміщені на одному фоні або з’єднані лінією, — автоматично сприймаються як група. У дизайні це один із ключових принципів, який допомагає людям швидко орієнтуватися в інтерфейсі.

✨ Як це працює в UX?
Коли користувачі бачать згруповані елементи, вони інтуїтивно розуміють, що ці елементи пов’язані між собою або виконують спільну функцію.
Наприклад:
• У формі для реєстрації поля вводу і кнопка «Зареєструватися» розташовані всередині одного блоку з рамкою чи однаковим фоном. Користувач розуміє: це один логічний блок, і дії тут завершуються натисканням кнопки.
• У мобільному додатку для замовлення їжі картка товару містить зображення страви, назву, ціну та кнопку «Додати до кошика». Завдяки спільному фону або невеликій тіні ця інформація сприймається як єдине ціле, пов’язане з конкретною стравою.
• У кошикк у магазині усі товари об’єднані у список з однаковим форматом: фото, назва, кількість і ціна. Це полегшує перегляд і робить інтерфейс передбачуваним.
• Коли модальне вікно затемнює фон, а вся взаємодія відбувається лише в ньому, користувач не відволікається на інші елементи, бо фокус зосереджено.

✨ Як це полегшує життя користувачів?
Коли елементи логічно згруповані, очам легше «зачепитися» за потрібний контекст, і користувач не витрачає час на роздуми, що до чого. Наприклад, якщо кнопка «Підтвердити замовлення» розташована всередині блоку з підсумковою сумою, це дає чітке розуміння: натискання на цю кнопку завершує процес.

✨ Як використовувати цей принцип?
1. Використовуйте фон, рамки або лінії, щоб відокремити групи елементів.
2. Подумайте, чи все, що ви об’єднали, справді логічно пов’язане. Якщо ні — розділіть на окремі блоки.
3. Не перестарайтеся. Якщо в інтерфейсі кожен елемент буде обведений рамкою, це лише заплутає користувачів.

Закон Єдності Зв’язків — це про турботу про людей. Ви не примушуєте їх шукати зв’язки між елементами, а одразу показуєте їх, роблячи взаємодію легкою та зрозумілою. Як кажуть, чим менше питань у користувача — тим кращий дизайн.😊

🇬🇧 Детальніше

@berestux

Недбалість - старий добрий прийом у новому виконанні: сайт зі строгою сіткою, безбарвний, позбавлений масштабності й розмаху, увесь ніби надрукований на старій друкарській машинці, використовує як декоративні елементи червоні кривуваті закарлючки, наче хтось креслив червоною ручкою по аркушу паперу.

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

Джерело

@berestux

🔥 Інтерактивний довідник кольорів

Сolorandcontrast.com — один із найкращих гідів про колір, який мені траплявся. Усе найважливіше зібрано в одному місці без зайвої інформації: від фізіології зору до використання кольорів в інтерфейсах. Весь контент акуратно структурований за розділами, а ще на сайті є інтерактивні інструменти. Наприклад, можна налаштовувати повзунки й одразу бачити різноманітні ілюзії та ефекти.

@berestux

#закони_ux

05/29 Закон Prägnanz (або Закон лаконічності)
Це один із ключових принципів гештальт-психології. Він стверджує, що люди схильні сприймати складні візуальні чи звукові стимули в найбільш простій та упорядкованій формі. У контексті UX-дизайну це означає, що інтерфейси мають бути організовані так, щоб користувачі могли легко їх зрозуміти, зводячи когнітивне навантаження до мінімуму.

Основні принципи:
1. Простота та зрозумілість: Люди автоматично спрощують складні візуальні елементи.
2. Організація та передбачуваність: Елементи групуються так, щоб створити найбільш зрозумілу й гармонійну структуру.
3. Мінімізація когнітивних зусиль: Чим менше зусиль потрібно для розуміння інтерфейсу, тим кращий користувацький досвід.

Приклади застосування в UX-дизайні:

✨ 1. Іконки та піктограми
• Приклад: У системах навігації чи додатках (наприклад, значок «лупа» для пошуку, «гамбургер-меню» для навігації) використовуються спрощені форми, які легко інтерпретувати.
• Застосування в UX: Складні ілюстрації замінюються мінімалістичними, інтуїтивно зрозумілими значками, щоб користувач не витрачав час на розшифровку.

✨ 2. Форми та кнопки
• Приклад: Кнопка з чіткими краями та високим контрастом краще сприймається як інтерактивний елемент.
• Застосування в UX: Використовуйте лаконічний дизайн форм: рівні краї, контрастні кольори, простий текст. Наприклад, кнопка «Додати в кошик» на сайті електронної комерції повинна бути очевидною й зрозумілою.

✨ 3. Групування елементів
• Приклад: У маркетплейсах товари можуть бути розділені на категорії з чіткими заголовками та візуальними розділювачами.
• Застосування в UX: Розподіл інформації на логічні блоки допомагає користувачам швидше орієнтуватися. Наприклад, на сторінці товару можна розділити інформацію про ціну, опис, відгуки та доступні кольори.

✨ 4. Типографіка
• Приклад: Використання заголовків, підзаголовків і списків для організації тексту.
• Застосування в UX: Користувач сприймає контент швидше, якщо він структурований за допомогою чіткої ієрархії тексту. Наприклад, великий заголовок для основного повідомлення й дрібний текст для деталей.

✨ 5. Сітки та симетрія
• Приклад: Розташування елементів в інтерфейсі із використанням сіток і вирівнювання.
• Застосування в UX: Google Material Design використовує сітки для структурування інтерфейсів, щоб елементи виглядали впорядковано й легко сприймалися.

✨ 6. Приклади в мобільних додатках
• Приклад: У банківських додатках часто використовуються мінімалістичні графіки та діаграми, спрощені для швидкої інтерпретації.
• Застосування в UX: Діаграма доходів/витрат може бути представлена у вигляді кругової діаграми з мінімумом деталей.

Як уникнути помилок:
1. Не перевантажуйте інтерфейс: Занадто складні елементи порушують Закон лаконічності.
2. Використовуйте стандартні патерни: Дотримуйтесь звичних для користувача форм, щоб підвищити впізнаваність.
3. Перевіряйте сприйняття дизайну: Тестуйте інтерфейс із користувачами, щоб переконатися, що він легко сприймається.

Висновок:
Дотримання Закону Prägnanz дозволяє створювати інтерфейси, які виглядають професійно, зрозумілі та знижують ймовірність помилок користувача. Інтуїтивно зрозумілий і структурований дизайн допомагає користувачам швидше досягати своїх цілей, що є ключем до гарного UX.

@berestux