Урок №22 Графічний інтерфейс продукта. Дизайн UI/UX. Інтуїтивність та

8 клас

computer science

«Навчальна книга — Богдан»

тема 22

Графічний інтерфейс продукта. Дизайн UI/UX. Інтуїтивність та зручність використання, інклюзивність та доступність інформаційних продуктів.

Що таке UI та UX?

UX (User Experience) — це досвід користувача, який він отримує під час взаємодії з продуктом. UX включає зручність, логіку, швидкість роботи інтерфейсу та задоволення користувача.

UI (User Interface) — це графічний інтерфейс користувача, який включає кнопки, меню, шрифти, кольори та інші елементи, з якими взаємодіє користувач.

Розділення ролей в UI/UX-дизайні

UI-дизайнер:

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

UX-дизайнер:

• Аналізує аудиторію.
• Планує шляхи користувача (user journey).
• Працює з інформаційною архітектурою (як організована інформація на сторінках).

Основні принципи UI/UX-дизайну

Простота

Інтуїтивність

Послідовність

Доступність

Швидкість

Інтуїтивний інтерфейс — це такий, яким користувач може користуватися без попередніх інструкцій.

• Логічно розташовані кнопки.
• Чіткі підказки (наприклад, "Завантажити файл").
• Зрозуміла навігація (меню, пошуковий рядок).

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

Ключові принципи інтуїтивного дизайну

Логічне розташування елементів

Чіткі підказки

Кольори, шрифти та іконки підказують, де знайти ключові елементи. Наприклад, активна кнопка має яскравий колір, а неактивна — сірий.

Зрозуміла навігація

Інтерфейс повинен давати користувачеві зрозумілий зворотний зв’язок. Наприклад:Кнопка змінює колір при натисканні. Повідомлення "Файл успішно завантажено" після виконання дії.

Основи візуальної привабливості

Гармонія кольорів

Шрифти

Іконки та графіка

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

• Використання контрастних кольорів для людей із порушеннями зору.
• Додавання текстових описів для зображень.
• Можливість керування інтерфейсом без миші (через клавіатуру).
• Підтримка екранних читачів для людей з вадами зору.

Інклюзивний дизайн враховує потреби різних користувачів, включаючи людей з інвалідністю.

• Зорові обмеження: Контрастні кольори, великі шрифти, підтримка екранних читачів.
• Слухові обмеження: Текстові субтитри для відео.
• Моторні обмеження: Великі кнопки для зручного натискання.
• Когнітивні обмеження: Простота структури, зрозумілі інструкції.

Приклади успішного та невдалого UI/UX

Успішний UI/UX:

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

Невдалий UI/UX:

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

Патерни та стандарти в дизайні UI/UX

Патерни (patterns): Це повторювані рішення для типових завдань в інтерфейсі, які користувачі вже добре знають.

Стандарти: Загальноприйняті правила оформлення елементів дизайну, які забезпечують передбачуваність і зручність.

Патерни та стандарти в дизайні UI/UX

Лупа для пошуку

Кнопка "Підписатися" (Subscribe)

Бургер-меню

Повідомлення про помилки

Кошик для покупок

Індикатори завантаження

Головна сторінка (home)

Форми заповнення

Кнопка "Поділитися" (Share)

Активні та неактивні елементи

Навігаційна панель (Navbar)

Список дій (дропдаун меню)

Етапи розробки дизайну

Дослідження: Визначення потреб аудиторії

Прототипування: Створення макету продукту

Тестування: Перевірка продукту на зручність та інтуїтивність

Впровадження: Завершення дизайну і передача для розробки

Інструменти для UI/UX-дизайну

Figma

Canva

Adobe XD

Дякую за увагу!