Про Swimlane діаграму

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

Назва говорить сама за себе: swimlane — це «дорожка в басейні». На відміну від класичного user flow, який відстежує шлях одного користувача, swimlane показує одразу кількох учасників. Одна з доріжок може бути відведена системі (чи навіть кільком системам), тож видно, як вона реагує на кроки людей.
Такі діаграми корисно будувати ще до переходу до макетів: вони допомагають не загубити розгалуження та вибудувати оптимальний порядок дій. Якщо відразу стрибнути в UI, легко застрягти в компонентах і пікселях та прогавити логіку сценарію.

Коли вистачить звичайного user flow? Коли у вас один тип користувача, який працює із сервісом наодинці. Якщо ж результат задачі пов’язує кількох учасників (наприклад, покупець оформлює замовлення, адміністратор бачить його в адмінці, телефонує клієнту та підтверджує) і/або потрібно показати реакцію однієї чи кількох систем — краще обирати swimlane. Коротко: один — user flow, кілька — swimlane.

@berestux

Nothing анонсували OS 4.0

Кому то треба не зрозуміло, але преза прикольна

@berestux

Справжній жах дизайнера — сайт Ukrnet User Inyerface з найгіршим інтерфейсом у світі.

Вже на головній сторінці на вас чекає величезна кнопка «No», яка взагалі не виконує жодної дії. Посилання, поля введення та форми працюють некоректно. А ще час від часу з’являються нові вікна — і зрозуміти, як їх закрити, майже неможливо.

@berestux

❤️‍🔥 Figma нарешті завозить можливість скопіювати згенерований дизайн з Make прямо в файл з дизайном.

І це те чого реального не вистачало з самого початку. Обіцяють викатити цю можливість для всіх вже на наступному тижні!

@berestux

Отже там на Хуїксі вийшов пост пояснювач про рівні дизайну, а до нього квіз для перевірки себе.
Проходьте опитування і пишіть там в коментарі, на скільки добре ви знаєте те, чим займаєтесь🤔

@berestux

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

Спойлер: він просто любить синій😅

@berestux

Бренд жіночого одягу Oh Polly представив концепт карток товарів, максимально живих і таких, що взаємодіють із сусідніми позиціями.

@beresux

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

Серед нових можливостей — управління кількома сценами, підтримка різних стилів від кіно до аніме, режим video-to-video та Cameo-аватари, які можна додавати у власні відео або ділитися з іншими.

Sora 2 поки доступна обмеженій кількості користувачів у США та Канаді, але поступово відкриється для ширшої аудиторії.

@berestux

Про Hero Section або перший екран

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

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

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

А далі починається найцікавіше — тестування. Жоден екран не народжується ідеальним. Спробуйте кілька версій заголовків: більш емоційні й більш раціональні. Змініть кнопку: іноді різниця між «Купити» і «Додати в кошик» може суттєво вплинути на конверсію. Перевіряйте навіть різні фото чи іконки. Питайте у знайомих: «Тобі зрозуміло, що я пропоную? Хочеться натиснути?» Ви здивуєтесь, як маленька правка в тексті може змінити поведінку аудиторії.

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

@berestux

Цікаве.
Насправді про radio buttons я й не знав.

Автор перекладу

@berestux

Як пояснити клієнту, що додавання ще двох дизайнерів не зробить роботу втричі швидшою

@berestux

Liquid Glass: якби iPhone досі мали 3D Touch.

@berestux

А от так можна створити голографічний ефект.

@berestux

Тепер у ChatGPT можна буде робити буквально все — до нього додали Spotify, Figma, Canva, Booking та інші популярні сервіси.

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

І це лише початок. OpenAI запустила систему застосунків і SDK для розробників — тепер кожен зможе під’єднати свій сервіс до ChatGPT. Тобто замість десятків сайтів і застосунків буде лише одне вікно.

Тепер наче це справді схоже на прогрес

@berestux

Щодо інтеграції з Figma, то тепер можна швидко створювати візуальні діаграми у FigJam, такі як блок-схеми, діаграми Ганта та інші. Просто згадайте Figma у своєму запиті, наприклад: «Figma, створи діаграму з цього ескізу».

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

@berestux

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

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

Цікавий факт — усе це зробила одна людина. Дизайн-інженер, який раніше працював в Apple.

@berestux

Дизайнери їдуть на Дизаріум

@berestux