Комплексна практична робота з інформатики у 8 класі. Тема: Дизайн UI/UX. Інтуїтивність та інклюзивність інформаційних продуктів.

Комплексна практична робота

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

Урок 1. Теоретична частина

Тема: "Дизайн UI/UX. Інтуїтивність та інклюзивність інформаційних продуктів. Патерни і стандарти дизайну UI/UX"

Завдання:

1. Опрацюй теоретичний матеріал за посиланням : https://xtiles.app/6862f12b7c4d501da7c65a3d . За цим матеріалом створені тести

2. Опрацюй теоретичний матеріал за підручником с 195-197. Виконай інтерактивну вправу "Патерни і стандарти дизайну UI/UX" на закріплення знань: https://learningapps.org/watch?v=pd7yz7tmc25

• Виконай тестування з даної теми

Урок 2. Практична частина

Тема: Аналіз інформаційного продукту на UI / UX та інклюзивність.

Завдання №1

• За допомогою ChatGPT або іншої моделі штучного інтелекту опиши UI i UX для конкретного прикладу.

• Для цього можна задати такий промпт: " Уяви, що ти учень 8 класу. Тобі вчитель задав завдання описати UI i UX для конкретного прикладу. Виконай це".

• Скопіюй отриманий результат і додай до цього завдання

Ось для зразка мій приклад. Я буду аналізувати додаток "Нової пошти"

https://novapost.com/uk-ua/

Додаток "Нова Пошта"

( це мені запропонував ChatGPT за вищевказаним промптом, але я вносила деякі поправки ):

• UI:

  • У додатку приємні кольори — червоний і білий, як у логотипі компанії.

  • Великі кнопки "Відстежити", "Створити відправлення", "Викликати кур'єра".

  • Є зручна карта з відділеннями та гарно намальовані іконки.

  • Усі написи українською, шрифт чіткий і легко читається.

• UX:

  • Додатком дуже легко користуватись. Наприклад, щоб відстежити посилку, треба лише ввести номер або просканувати штрихкод.

  • Уся інформація видно одразу — не треба довго шукати.

  • Є пуш-повідомлення, які нагадують про прибуття посилки.

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

  • Якщо ти часто користуєшся одними й тими ж адресами — додаток їх запам’ятовує.

  • Створити посилку можна вдома, викликавши кур'єра.

Завдання 2. Аналіз прикладу

1. Перейди на сайт Черкаського національного університету (ЧНУ): https://cdu.edu.ua/

2. Проаналізуй його:

   • Як виглядає інтерфейс? (UI)

   • Чи легко зрозуміти, що робити? (UX)

   • Чи буде зручно користувачу похилого віку або з вадами зору? (Інклюзивність)

👉 Оформити аналіз у вигляді таблиці (у Word або Google Docs).

• Посилання на таблицю чи її фото прикріпи у цьому завданні.

Урок 3. Практична частина

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

(Можна скористатися Практичною роботою з підручника, с 198)

Завдання 1

1. Уяви, що ти створюєш додаток або сайт для учнів 8 класу (наприклад: "Мій мобільний помічник" або додаток для читання книжок).

2. Створи макет інтерфейсу:

   • Опиши цільову аудиторію (наприклад: учні, вчителі, батьки).

   • Придумай назву додатка.

   • Створи 2–3 основні екрани (сторінки, макети) додатку. (До прикладу зразки шкільних додатків з Play Маркету : Зразок 1, Зразок 2, Зразок 3)

3. Врахуй такі елементи:

   • Інтуїтивне розміщення кнопок

   • Контрастність тексту і фону

   • Шрифти, зручні для читання

📌 Можна створити макет у:

• Google Презентації

• Google Docs

• Canva (розділ "Мобільні додатки")

• Намалювати в ручну і сфотографувати.

Завдання 2.

Тестування і вдосконалення

1. Покажи свій макет двом однокласникам або рідним.

2. Попроси їх:

   • Оцінити, наскільки інтерфейс зрозумілий.

   • Вказати, що викликає труднощі.

3. Запиши їхні відгуки.

4. Внеси зміни у макет відповідно до порад.

Оформлення звіту (8 балів):

У Google Docs/презентації / Word / Canva тощо:

1. Назва роботи та автор. Цільова аудиторія (1 бал))

2. Скриншоти або посилання на створений макет. (4 бали)

3. Відгуки тестувальників.(2 бали)

4. Що вдосконалили.(1 бал)

Ось для прикладу структура звіту за допомогою презентації:

• Слайд 1: Назва проєкту та автор.Цільова аудиторія

• Слайд 2-3: Скриншоти чи фото макета або посилання на них

• Слайд 4: Відгуки користувачів (тих, кому показували додаток для тестування).

• Слайд 5: Що вдосконалили.

  Надсилання звіту

• Файл з виконаним звітом прикріпіть у цьому завданні, або надайте до нього посилання з відкритим доступом до перегляду.