BEREST UX/UI

#закони_ux

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

Приклади:

✨1. Кнопка «Купити» в онлайн-магазині: Якщо вона маленька й захована, користувачеві буде складніше її натиснути. Зроби кнопку великою, яскравою та розташуй її поруч із ключовою інформацією про товар, щоб людина одразу могла її знайти.
✨2. Мобільний додаток для замовлення їжі: Розташуй головні кнопки («Додати до кошика», «Оформити замовлення») в зоні досяжності пальця, особливо на екрані смартфона. Це скоротить час, потрібний для дії, і зробить взаємодію зручною.
✨3. Система для бронювання квитків: Поля для введення даних мають бути великими й легко натискатися. Наприклад, вибір дати чи часу краще реалізувати через календар із великими клікабельними елементами.
✨4. Ігровий інтерфейс: У відеоіграх кнопки для найважливіших дій (наприклад, «Стріляти», «Бігти») завжди найбільші та розташовані поруч, щоб гравець міг швидко реагувати. Цей принцип легко перенести в будь-який UX-дизайн.

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

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

@berestux

Просто календар по Ротко

@berestux

Дорога Figma, на Різдво бажаю:

✨ Щоб EPS та AI файли експортувалися без костилів.
✨ Щоб у верхньому барі з проєктами з’явився горизонтальний скрол.
✨ Щоб великі, підключені до інших файлів, дизайн-системи перестали глючити.
✨ Щоб усім моїм друзям вже нарешті прилетіли ШІ-функції.
✨ І щоб ти, як і Notion, пішла з країни-агресора.

@berestux

Усі дизайни YouTube плеєра. Виявляється вже майже 10 років він без змін. Ось це я розумію живучий дизайн!

@berestux

#закони_ux

09/29 Принцип вибіркової уваги — це здатність людини зосереджуватися на найважливішому, ігноруючи зайве. У світі UX-дизайну це один із ключових принципів, який допомагає зробити інтерфейси зручнішими й зрозумілішими для користувачів.

✨ Що це означає для UX?
Уявіть, що ви відкрили вебсайт із купою тексту, кнопок, зображень і анімацій. Що буде далі? Ваш мозок автоматично спробує знайти найважливіше й просто “відфільтрує” те, що здається непотрібним. Це і є вибіркова увага. Завдання дизайнера — допомогти користувачеві одразу помітити те, що важливо, і не відволікатися на зайве.

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

✨Приклади, які ви точно бачили:

• Форма на сайті: Уявіть, що ви заповнюєте форму й забули вказати електронну пошту. Система одразу підсвічує поле червоним кольором і пише повідомлення “Введіть правильний email”. Це зроблено, щоб ви швидко побачили, що саме треба виправити.

• Кнопка “Додати в кошик”: У магазині важливо, щоб кнопка для покупки була помітною. Її часто роблять яскравішою за все інше — і саме тому ваш погляд на неї падає одразу.

• Модальні вікна: Коли відкривається вікно з важливим повідомленням, фон за ним затемнюється. Це допомагає сфокусувати увагу тільки на цьому повідомленні.

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

✨Чому це важливо?
Мета UX-дизайну — зробити взаємодію з продуктом легкою й приємною. Використовуючи принцип вибіркової уваги, ви допомагаєте людям знаходити потрібне швидше, розуміти ваш інтерфейс краще й отримувати задоволення від користування вашим продуктом.

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

@berestux

🤔 То як же ж побудувати такі компоненти котрі не будуть троянським конем у вашій дизайн системі?

✨ Гайд від Figma по компонентам - найдетальніший і найактуальніший спосіб у цьому розібратися

✨А також, переклад статті про те як реанімували дизайн систему Oxygen doctolibs з купою корисних і цікавих інсайдів.

@berestux

Життєве

@berestux

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

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

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