Перейти до вмісту
Система сертифікації ІТ-дисциплін
Система сертифікації ІТ-дисциплін
  • Головна
  • Для ІТ-спеціалістів
  • Для викладачів
  • Силабуси
  • Пілот проєкту
  • Приєднатись до Kharkiv IT Cluster

Розробка UX-UI

Home / / Розробка UX-UI

Розробники та рецензенти

Заклад вищої освіти:

Компанія-рецензент 1:

Компанія-рецензент 2:

Валідація:

Опис зображення
Розробник навчальної програми:

Золотухіна Оксана Анатоліївна, к.т.н., доцент, доцент кафедри інтелектуальних технологій факультету інформаційних технологій, Київський національний університет імені Тараса Шевченка

Базова інформація

Шифр та назва спеціальності:
122 - Комп'ютерні науки
Назва освітньо-наукової програми
Комп'ютерні науки
Назва дисципліни
Розробка UX-UI
Вид дисципліни
Основна
Блок дисципліни
Алгоритмізація і програмування
Кількість студентів
52
Курс/Семестр
3

Загальна інформація про дисципліну

Анотація
Дисципліна «Розробка UX-UI» спрямована на вивчення основних принципів користувацького досвіду (UX) та дизайну інтерфейсу користувача (UI), ознайомлення з сучасними патернами та антипатернами проєктування, а також оволодіння методами створення ефективних і зручних інтерфейсів. У рамках курсу студенти набудуть практичних навичок використання сучасних програмних засобів та фреймворків, що застосовуються на різних етапах розробки UI/UX-рішень. Особлива увага приділяється створенню ключових артефактів проєктування з урахуванням вимог та обмежень, що існують у реальних проєктах, а також адаптації дизайну під різні платформи. Крім того, студенти навчаться оцінювати якість інтерфейсів, застосовуючи відповідні методи тестування та аналізу, що дозволить їм створювати конкурентоспроможні цифрові продукти, орієнтовані на потреби користувачів.
Анотація
Мета дисципліни – формування у здобувачів навичок проектування, розробки та адаптації інтерфейсів програмних систем під широкий клас користувачів із забезпеченням ефективного використання програмних систем в різних галузях. Навчальні цілі: формування у студентів здатності до проєктування та розробки інтерфейсів користувача з урахуванням сучасних принципів UX/UI-дизайну, застосування сучасних патернів і уникнення антипатернів у проєктуванні взаємодії, використання програмних засобів та фреймворків для створення прототипів, адаптації інтерфейсів під різні платформи, аналізу та оцінювання якості користувацького досвіду, а також розробки необхідних артефактів, що забезпечують ефективний процес проєктування та реалізації UI/UX-рішень відповідно до вимог і обмежень реальних проєктів.
Анотація
Лекції, лабораторні роботи, самостійна робота. Підсумкове оцінювання у формі заліку
Розподіл часу
Загальний обсяг (кредитів): 3; Лекції (занять): 14; Лабораторні (занять): 28; Практичні (занять): 0; Самостійна робота (годин): 48
Попередні дисципліни
відсутні
Матеріально-технічне та програмне забезпечення дисципліни
Комп’ютерний клас для проведення лабораторних занять, безкоштовні онлайн редактори схем та діаграм (https://app.diagrams.net/, https://miro.com/, https://www.canva.com/uk_ua/), засоби спільної роботи з документами та презентаціями (Google-презентації, Google-документи), засоби чорнового прототипування інтерфейсів (https://balsamiq.com/wireframes/, https://wireframepro.mockflow.com/), засоби створення "чистового" інтерфейсу (Figma)
Структура дисципліни
№ Теоретична складова Назва, перелік питань або анотація лекції Годин Практична складова Опис та приклад завдання, а також посилання на методичні матеріали Годин Інструменти, засоби та технології
Тема 1 – ВСТУП ДО UX-UI ДИЗАЙНУ
1 Структура дисципліни та організація оцінювання. Мета та завдання дисципліни, зв’язок з ринком праці. Визначення UX,UI, СХ,  зв’язок між ними. Основи Human-Computer Interaction. Usability як ключова складова UX. Приклади метрик для оцінки Usability. 2
Тема 2 – ПРИНЦИПИ ТА ЕВРИСТИКИ ПРОЄКТУВАННЯ ІНТЕРФЕЙСІВ. ПОВЕДІНКОВІ ПАТЕРНИ ТА АНТИПАТЕРНИ
2 Евристики Якоба Нільсена 0,5 Методичні вказівки до виконання лабораторних робіт: https://drive.google.com/file/d/1JZe6EMyKQthqoVX_mTIfSN_W5tXJCcg6/view?usp=drive_link  Лабораторна робота №1. Оцінка якості інтерфейсу. Завдання: 1. Лабораторна робота виконується в командах по 2 студенти. Команди формуються за бажанням або за списком. 2. Перед виконанням роботи слід ознайомитись з теоретичним матеріалом за темою лабораторної роботи. 3. Дослідити сайт з індивідуального варіанту завдання (номер варіанту обирається без повторів в групі!). За узгодженням з викладачем може бути обрано власний варіант сайту. 4. Проаналізувати, наскільки інтерфейс відповідає евристичним критеріям usability Якоба Нільсена. По кожному евристичному критерію описати: - що саме відповідає цьому евристичному критерію; - що саме НЕ відповідає цьому евристичному критерію; - загальний висновок, чи дотримались розробники сайту цього евристичному критерію (дотримались повністю/дотримались частково/абсолютно не дотримались), пояснення/обгрунтування, чому на вашу думку розробники не дотримались/частково дотримались критерію . 5. Провести оцінку інтерфейсу за шкалою від 0 до 100, відобразивши в ній загальне враження від інтерфейсу (кожен студент дає свою індивідуальну чисельну оцінку). 6. Описати загальне враження від інтерфейсу (кожен студент описує свої враження). Обсяг опису – 1000-2000 знаків з пробілами. 7. Результати аналізу звести в підсумковий звіт-презентацію (формується один звіт на команду). 4 Google-презентації чи інші засоби для оформлення результатів аналізу
3 Загальні принципи проектування інтерфейсів: золотий переріз; пропорції Фібоначчі, гаманець Міллера, принцип угруповання, бритва Оккама, видимість відображає корисність, розумне запозичення.  0,5
4 Поведінкові патерни та антипатерни та їх використання в UX-UI дизайні. 1
Тема 3 – ДИЗАЙН ІНТЕРФЕЙСУ, ОРІЄНТОВАНОГО НА КОРИСТУВАЧА
5 Аналіз конкурентів: визначення прямих та непрямих аналогів, особливості аналізу аналогів, форми та інструменти для представлення результатів аналізу аналогів. 0,5 Лабораторна робота №2. Проектування інтерфейсу, орієнтованого на користувача: визначення цілей продукту та аналіз конкурентів. Завдання:
  1. Ця та наступні лабораторні роботи ґрунтуються на підході User-Centered Design, (UCD), який визначає, що створення продуктів та сервісів повинно відбуватись на основі відповідності потребам, очікуванням і особливостям користувачів. Головна мета UCD – забезпечити максимальний комфорт, ефективність і задоволення користувача від використання системи. 
  2. Виберіть та проаналізуйте предметну галузь з індивідуального варіанту. Предметна галузь вибирається зі списку або може визначена самостійно за узгодженням з викладачем. Зверніть увагу, що деякі наведені варіанти тем потребують узгодження з викладачем. Над однією предметною галуззю можна працювати в команді по 2-3 і більше студентів (в залежності від предметної галузі), але кожен учасник команди обирає свою групу користувачів (цільову аудиторію).
  3. Оберіть групу користувачів (цільову аудиторію) майбутнього застосунку.
  4. Ознайомтесь з теоретичним матеріалом за темою лабораторної роботи.
  5. Визначте ціль користувачів відносно майбутнього продукту за методикою SMART.
  6. Знайдіть 3 додатки прямих аналогів та 2 додатки непрямих аналогів для задач предметної галузі (незалежно від того, мають ці програми найкращий інтерфейс чи ні). 
  7. Визначте ключові можливості, що надають конкурентні продукти, проведіть їх аналіз та опишіть (вибирати слід ті функції, які є важливими для нашого проекту і конкретно для обраної групи користувачів з урахуванням його цілей!). Кількість визначених функцій повинна бути не менше 10. В аналізі варто враховувати гарні та цікаві або, навпаки, погані UX та/або UI рішення.
  8. Результати треба звести в підсумковий звіт, структура якого наведена в методичних вказівках. Якщо робота виконується в команді, то рекомендується об’єднати звіти в один файл, але кожен член команди повинен вибрати свою групу користувачів, підібрати свій набір прямих та непрямих аналогів для визначених користувачів та їх цілей.
 3 Google-документи та Google-таблиці та/або інші засоби спільної роботи
6 Ключові завдання та способи аналізу цільової аудиторії. Формалізовані способи опису інформації про користувача (User Empathy Map, Persona). 0,5 Лабораторна робота №3. Розробка прото-персон (профілів користувачів). Завдання:
  1. Робота виконується самостійно. Якщо обрано варіант виконання командою, то кожен член команди розробляє прото-персони для 2 підкатегорій користувачів (не 2 на всю команду, а по 2 на кожного члена команди!). Звіт можна оформити один на команду, послідовно вказавши результати роботи кожного учасника.
  2. Перед виконанням роботи необхідно ознайомитись з теоретичним матеріалом за темою лабораторної роботи. Додаткова інформація доступна у відео https://www.youtube.com/watch?v=XnG4c4gXaQY, https://youtu.be/B23iWg0koi8. Також можна використовувати інші джерела для більш глибокого розуміння теми.
  3. В рамках лабораторної роботи розробляються прото-персони, але, якщо є така можливість, варто уточнити цільову інформацію безпосередньо у представників визначеної групи потенційних користувачів. Необхідно виділити 2 підкатегорії користувачів в рамках визначеної раніше групи (л.р. №2). Підкатегорії користувачів повинні відрізнятись своїми характеристиками, але відноситись до однієї групи.
  4. Придумати ім’я для кожної персони та підібрати відповідні фото (або згенерувати засобами ШІ). 
  5. Визначити ключові характеристики типових користувачів, які необхідно врахувати при проектуванні інтерфейсу майбутньої системи (тобто, яка саме інформація про користувача є важливою в контексті визначених в лабораторній роботі №2 цілей користувача відносно майбутньої системи). Доцільність вибраних характеристик обґрунтувати в процесі аналізу персон. Кожна характеристика повинна бути або пов’язана з якимось майбутнім UX-UI рішенням, або використовується для надання персоні реалістичності. Список характеристик обов’язково повинен включати такі, що вплинуть на майбутні UX-UI рішення!
  6. Визначити необхідні дані про кожну персону та описати їх з використанням карти емпатії та у вигляді картки персони.
  7. З урахуванням наявної інформації про цільову аудиторію та даних аналізу аналогів з лабораторної роботи №2, придумати для майбутньої системи назву, яка була б цікавою для потенційних користувачів (назви існуючих аналогів не використовувати!). Допускається використовувати засоби штучного інтелекту для генерації певної брендової назви.
  8. Оформити звіт відповідно до наведених в методичних вказівках вимог (в звіт вносяться тільки РЕЗУЛЬТАТИ дослідження, а не порядок виконання роботи!).
 5 Безкоштовні онлайн редактори схем та діаграм (https://app.diagrams.net/, https://miro.com/, https://www.canva.com/uk_ua/, Figma Jam), засоби спільної роботи з документами та презентаціями (Google-презентації, Google-документи, Figma Slides,Figma Buzz  )
7 Побудова сценаріїв користувачів. Визначення потоків процесу. Побудова структури інтерфейсу. 1 Лабораторна робота №4. Розробка сценаріїв користувачів та User Flow. Завдання:
  1. Вибрати мету, спільну для групи користувачів, що представлені персонами в лабораторній роботі №3 (або дуже схожі між собою цілі, що майже не відрізняються для цих персон). Проаналізувати схожі моменти та відмінності в досягненні цієї мети для обраних персон.
  2. Для кожної персони скласти сценарій, що дозволяє досягнути визначеної мети, та визначити ключові компоненти сценарію.
  3. Описати у вигляді діаграм Task Flow розроблені сценарії. 
  4. Виділити в Task Flow спільні для обох персон кроки, можливі точки розгалуження, проаналізувати відмінності розроблених Task Flow та сформувати загальний User Flow для цієї групи користувачів.
 2 Безкоштовні онлайн редактори схем та діаграм (https://app.diagrams.net/, https://miro.com/, https://www.canva.com/uk_ua/, Figma Jam), засоби спільної роботи з документами та презентаціями (Google-презентації, Google-документи,Figma Slides, Figma Buzz )
Тема 4 – РОЗРОБКА UI. ДИЗАЙН-СИСТЕМИ. UI-KIT
8 Загальна класифікація елементів UI. Побудова образу дизайну різної точності: Wireframe, прототип, мокап та особливості їх побудови. Використання засобів ШІ в UX/UI дизайні. 1 Лабораторна робота №5. Визначення структури та чорнового прототипу інтерфейсу застосунку. Завдання:
  1. Провести аналіз ключових функцій застосунку, виділених в лабораторній роботі №2, та, за необхідності, доповнити його з урахуванням інформації про персони та сценарії їх взаємодії з лабораторній роботі №3. Доповнити список додатковими функціями, необхідними для функціонування застосунку з точки зору розробників чи спонсорів проєкту (наприклад, реєстрація користувача, авторизація, ознайомлення з політикою конфіденційності та правилами користування застосунком, демонстрація акційних пропозицій, демонстрація рекламних пропозицій тощо).
  2. З урахуванням визначеного списку функцій та сценаріїв взаємодії, розробити структуру інтерфейсу майбутнього застосунку. Обов’язково включити в структуру ті сторінки, які необхідні для реалізації сценаріїв, описаних в лабораторній роботі №4. 
  3. Провести аналіз розробленої структури на наявність дуже довгих ланцюгів та дуже великої кількості зв’язків в межах однієї сторінки. За необхідності, оптимізувати структуру інтерфейсу.
  4. Скласти таблицю з описом сторінок (див. приклад в методичних вказівках). 
Для всіх сторінок описати їх вміст (необхідний з точки зору користувача!). Для сторінок, що використовуються в сценарії з л.р.№4, та головної сторінки застосунку описати можливі варіанти реалізації UI.  Якщо стартова сторінка застосунку і головна (домашня) сторінка мають різний вміст, то необхідно описати варіанти реалізації UI також і для стартової сторінки. 
  1. Створити Wireframes для стартової сторінки (за наявності), головної сторінки та сторінок, що реалізують сценарії, визначені в лабораторній роботі №4. При реалізації Wireframes використати тільки один із запропонованих в описі варіантів UI, всі варіанти UI реалізовувати не потрібно.
  2. Зв’язати створені Wireframes та побудувати схему Wire Flow.
 4 Засоби чорнового прототипування інтерфейсів (наприклад, https://balsamiq.com/wireframes/ , https://wireframepro.mockflow.com/ ), Figma Make та інші інструменти
9 Особливості реалізації елементів UI в чистових макетах застосунків різних видів. Приклади гарних та поганих практик реалізації елементів UI. UI Kit, дизайн-системи: визначення, відмінності, особливості використання. Мікровзаємодії: поняття мікровзаємодії та наукове підґрунтя використання мікровзаємодій, види мікровзаємодій, компонентти мікровзаємодій (тригери, правила, зворотній зв’язок, цикли та режими). 5 Лабораторна робота №6. Створення прототипу інтерфейсу у середовищі Figma.
  1. Ознайомитись з доступними в мережі Інтернет матеріалами по роботі в середовищі Figma, наприклад:
  • уроки по створенню додатків у Figma: Покроковий посібник по роботі в Figma. Урок зі створення мобільного додатка, 
  • відеоуроки українською мовою: Figma з нуля, Безкоштовний курс по Figma для початківців 2024, 
  • UX/UI курс з нуля: Урок 4. Основи Figma I. Реєстрація. Інтерфейс. Перші кроки. Навігація, Урок 5. Основи Figma II. Групи. Прошарки. Піпетка. Імпортування зображень, Урок 6. Основи Figma III. Фрейми. Сітки. Направляючі. Компоненти, Урок 7. Основи Figma IV. Вирівнювання. Нові примітиви. Експорт
  1. Використовуючи чорнові прототипи сторінок, розроблені в лабораторній роботі №5, створити у Figma наступні «чистові» макети сторінок:
    • стартова сторінка/сторінки (якщо є);
    • головна сторінка;
    • набір сторінок основного сценарію, що утворюють ланцюг не менше ніж з 3 кроків шляху користувача.
При створенні макетів треба використовувати UI Kit або дизайн-систему. Макети виконати в двох варіантах:
  • дизайн для мобільного застосунку (платформу вибрати на власний розсуд, з вимогами до дизайну мобільних застосунків ознайомитись за посиланнями https://developer.apple.com/design/human-interface-guidelines/, https://m2.material.io/design, https://fluent2.microsoft.design/ );
  • дизайн для реалізації у вигляді веб-сайту (або десктопного застосунку) для використання на комп’ютері/ноутбуці.
  1. Спроєктувати мінімум 3 мікровзаємодії та розробити макети відповідних сторінок.
 6 Figma, UI Kit, дизайн-системи, , Figma Make та інші інструменти
Тема 4 – ІНКЛЮЗИВНИЙ ДИЗАЙН. РОЗРОБКА ІНТЕРФЕЙСІВ З УРАХУВАННЯМ ВИМОГ ДОСТУПНОСТІ
10 Поняття інклюзивного дизайну, види інклюзивності. Принципи інклюзивного дизайну. Настанови з доступності вебвмісту (WCAG) 2.1 та особливості їх застосування. 2 Лабораторна робота №7. Покращення інтерфейсу в контексті інклюзивності. Завдання:
  1. Ознайомитись з Настановами з доступності вебвмісту (WCAG) 2.1, які включають вимоги до дизайну інтерфейсу з точки зору інклюзивності.
  2. Провести аналіз макетів сторінок, створених в лабораторній роботі №6 з точки зору відповідності вимогам інклюзивного UX-UI дизайну.
  3. Запропонувати мінімум 5 покращень та розробити нові макети відповідних сторінок.
 4 Figma Make та  інші інструменти
Теми та завдання для самостійної роботи
№ Назва та опис завдання Методи контролю та критерії оцінювання Годин
1 Самостійна робота №1. Проектування багаторівневого інтерфейсу-меню консольного застосунку. Завдання:
  1. Для задачі з індивідуального варіанту завдання визначити структуру пунктів меню, необхідну для організації діалогу з користувачем в процесі вирішення ним завдань. Вкладеність пунктів повинна бути не менше 2 рівнів. Рекомендована загальна кількість пунктів меню першого рівня – 3-5.
Окремим пунктом головного меню передбачити виведення інформації про автора програми. *Для самостійної роботи можна вибрати власний варіант завдання, узгодивши його попередньо з викладачем (наприклад, задачі з інших дисциплін, пов’язаних з програмуванням).
  1. Скласти схему меню в графічному вигляді з вказанням назв пунктів/підпунктів меню.
  2. Реалізувати програмно розроблене меню та вказані в меню дії. Мова реалізації може бути будь яка.
 Захист самостійної роботи на лабораторному занятті. Захист роботи передбачає: -      демонстрацію розробленої програми; -      відповіді на теоретичні питання за темою самостійної роботи; -      відповіді на питання по програмному коду. 2
2 Самостійна робота №2. Проектування та розробка десктопного застосунку з графічним інтерфейсом мовою програмування високого рівня. Завдання:
  1. Для задачі з індивідуального варіанту завдання визначити вхідні дані та результати. *Для самостійної роботи можна вибрати власний варіант завдання, узгодивши його попередньо з викладачем (наприклад, задачі з інших дисциплін, пов’язаних з програмуванням, зокрема ООП).
  2. Описати структуру інтерфейсу у форматі графу діалогів. Окремим елементом інтерфейсу передбачити виведення інформації про автора програми.
  3. Розробити екранні форми десктопного застосунку, що реалізують визначені індивідуальним завданням задачі. Мова реалізації може бути будь яка.
 Захист самостійної роботи на лабораторному занятті. Захист роботи передбачає: -      демонстрацію розробленої програми; -      відповіді на теоретичні питання за темою самостійної роботи; -      відповіді на питання по програмному коду. 6
3 Завдання до самостійної роботи за темою лабораторної роботи №1
  1. Виберіть будь-яку веб-сторінку та визначте одну евристику Якоба Нільсена, яка на вашу думку, найгірше або найкраще реалізована. Обґрунтуйте відповідь.
  2. Виберіть два схожих веб-сайти або додатки та знайдіть один приклад, де один сайт реалізував якусь з евристик Якоба Нільсена краще за інший. Обґрунтуйте відповідь.
  3. Наведіть по одному прикладу вдалого та невдалого застосування принципу золотого перерізу. Обґрунтуйте відповідь.
  4. Наведіть по одному прикладу вдалого та невдалого застосування гаманця Мілера. Обґрунтуйте відповідь.
  5. Наведіть по одному прикладу вдалого та невдалого застосування принципу угруповання. Обґрунтуйте відповідь.
  6. Наведіть по одному прикладу вдалого та невдалого застосування принципу бритви Оками. Обґрунтуйте відповідь.
  7. Наведіть по одному прикладу вдалого та невдалого застосування принципу «Видимість відображає корисність». Обґрунтуйте відповідь.
  8. Наведіть по одному прикладу вдалого та невдалого застосування принципу «Розумне запозичення». Обґрунтуйте відповідь.
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 0.2 бали за 1 завдання). 4
4 Завдання до самостійної роботи за темою лабораторної роботи №2
  1. Проведіть аналіз наведених цілей користувачів деякого застосунку та визначте, чи відповідають вони вимогам SMART. Відповідь обґрунтуйте та запропонуйте, якщо можливо, шляхи для виправлення формулювань:
-      зменшити час, необхідний користувачу для заповнення форми на сайті, до 2 хвилин; -      підвищити кількість завершених реєстрацій у мобільному додатку на 30% за 3 місяці; -      зробити головну сторінку сайту інтуїтивно зрозумілою для нових користувачів; -      знайти з використанням застосунку найближчий аптечний пункт із необхідним препаратом протягом 5 хвилин; -      знайти всю інформацію про те, як працює сайт; -      оплатити рахунок через мобільний додаток упродовж 2 хвилин без складнощів; -      переглянути графік руху транспорту на потрібному маршруті й знайти найближчий рейс за 1 хвилину; -      розібратися з усіма функціями програми якомога швидше; -      бути задоволеним роботою додатку; -      додаток має допомогти зробити все, що потрібно недосвідченому користувачеві.
  1. Виберіть одну ключову функцію якогось існуючого та добре знайомого вам застосунку та знайдіть:
-      один прямий та один непрямий аналог, який має кращу реалізацію цієї ж функції з точки зору UX; -      один прямий та один непрямий аналог, який має кращу реалізацію цієї ж функції з точки зору UX; -      один прямий та один непрямий аналог, який має кращу реалізацію цієї ж функції з точки зору UІ; -      один прямий та один непрямий аналог, який має гіршу реалізацію цієї ж функції з точки зору UI. Відповідь обґрунтуйте (в тому числі, з використанням відповідних екранних форм, що підтверджують перевагу чи недолік аналогу).  		 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 0.2 бали за 1 завдання). 4
5 Завдання до самостійної роботи за темою лабораторної роботи №3
  1. Обрати популярний сервіс або застосунок (наприклад, Instagram, Uber) і розробити карту емпатії для одного з його типових користувачів.
  2. На основі вигаданого сценарію (наприклад, "студент шукає онлайн-курс для вивчення іноземної мови") скласти картку прото-персони. Включити: ім'я, вік, професію; основні цілі; головні труднощі; очікування від затосунку; пристрої та платформи.
  3. Взяти готову картку персони з наведених в лекції прикладів і адаптувати її для використання в іншій сфері (наприклад, для мобільного застосунку доставки їжі).
  4. Порівняти персон з наведених прикладів та проаналізувати: чим відрізняються їхні цілі та проблеми; як особливості застосунку впливають на створення персон?
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 1 бал за 1 завдання). 4
6 Завдання до самостійної роботи за темою лабораторної роботи №4
  1. Для розробленого в лабораторній роботі сценарію змініть контекст та побудуйте новий Task Flow. Обґрунтуйте зміни.
  2. Для розробленого в лабораторній роботі сценарію змініть проблеми та побудуйте новий Task Flow. Обґрунтуйте зміни.
  3. Виберіть будь-який сайт або мобільний застосунок, який ви використовуєте (наприклад, Netflix, Uber), і опишіть Task Flow цього застосунку для виконання одного завдання (наприклад, перегляд серіалу чи виклик таксі). Визначте, які кроки можна було б спростити.
  4. Виберіть будь-який сайт або мобільний застосунок, який ви використовуєте, і опишіть Task Flow для різних груп користувачів цього застосунку для виконання одного й того ж завдання. Визначте, які кроки відрізняються, і поясніть зв’язок з персонами користувача.
  5. Створіть для попереднього завдання User Flow, поясніть розгалуження.
  6. Виберіть 2-3 сайти або мобільних застосунки схожої функціональності і опишіть їх Task Flow для виконання одного й того ж завдання. Визначте відмінності цих Task Flow.
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 0.5 бали за 1 завдання). 4
7 Завдання до самостійної роботи за темою лабораторної роботи №5
  1. Розробіть Wire Flow для сценарію: «Користувач входить у додаток, переглядає список товарів, обирає один із них і додає його до кошика». Включіть усі етапи переходу між сторінками.
  2. Створіть два різні варіанти макетів для однієї сторінки (наприклад, сторінки оформлення замовлення). Проаналізуйте, який із них забезпечує кращу зручність для користувача.
  3. Перегляньте структуру інтерфейсу популярного сайту чи додатка (наприклад, сервісу доставки їжі). Визначте надлишкові елементи або можливі вузькі місця й запропонуйте, як їх можна спростити чи покращити.
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 1 бал за 1 завдання). 4
8 Завдання до самостійної роботи за темою лабораторної роботи №6
  1. Створіть кнопку для мобільного застосунку у трьох станах: стандартний, при наведенні та при натисканні. Використайте компоненти та варіанти у Figma. Додайте іконку всередині кнопки та налаштуйте Auto Layout, щоб текст іконки залишався центрованим при зміні розміру кнопки.
  2. Розробіть картку товару для інтернет-магазину, що міститиме зображення, назву, короткий опис, ціну та кнопку «Купити». Використайте Auto Layout, щоб усі елементи правильно змінювалися при редагуванні контенту. Додайте тінь та округлі кути для покращення візуального стилю.
  3. Створіть екран авторизації для мобільного застосунку. Дизайн повинен містити логотип, поле для введення електронної пошти, поле для пароля, чекбокс «Запам’ятати мене», кнопку «Увійти» та посилання «Забули пароль?». Використайте Auto Layout та стилі тексту для уніфікованого вигляду.
  4. Розробіть екран профілю користувача для мобільного додатку, що міститиме аватар, ім'я, e-mail, кнопку «Редагувати профіль» та секцію з налаштуваннями, яка включає перемикачі для push-сповіщень та темної теми. Зробіть цей дизайн адаптивним за допомогою Auto Layout.
  5. Створіть простий інтерактивний прототип мобільного застосунку, що складається з двох екранів: головного екрану з переліком товарів (зображення, назва, ціна) та екрану з детальною інформацією про товар (велике фото, опис, ціна, кнопка «Додати в кошик»). Налаштуйте взаємодію між екранами за допомогою Smart Animate.
  6. Створіть анімацію натискання кнопки «Додати в кошик» для мобільного застосунку. Після кліку кнопка повинна змінити колір, з’явитися іконка галочки, а потім повернутися до початкового стану. Використайте компоненти, варіанти та Smart Animate у Figma для плавного переходу між станами.
  7. Розробіть мікровзаємодію для поля введення пароля. При введенні символів має з’являтися індикатор надійності пароля, який змінює свій колір і текст (наприклад, «Слабкий», «Середній», «Надійний») залежно від складності пароля. Додайте іконку «показати/сховати пароль», яка змінюється при натисканні.
  8. Створіть анімацію іконки вподобайки: при натисканні на іконку серця вона повинна збільшуватися, змінювати колір на червоний та відображати коротку пульсацію. Використайте Smart Animate і налаштуйте плавний перехід між станами для створення приємного ефекту.
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 1 бал за 1 завдання). 6
9 Завдання до самостійної роботи за темою лабораторної роботи №7
  1. Створіть адаптивну кнопку з високим контрастом для людей із порушеннями зору. Кнопка повинна мати три варіанти: стандартний, з підвищеним контрастом для слабозорих користувачів та версію з доданим контуром для покращення видимості. Використайте компоненти та варіанти у Figma.
  2. Розробіть текстове поле з можливістю зміни розміру шрифту. Додайте перемикач або кнопку, що дозволяє збільшувати або зменшувати розмір тексту в полі введення без порушення структури інтерфейсу. Використайте Auto Layout, щоб усі елементи адаптувалися до змін.
  3. Створіть темну та світлу теми для мобільного застосунку. Дизайн має включати перемикач між темами та коректну зміну кольорової схеми всіх основних елементів інтерфейсу. Переконайтеся, що текст залишається читабельним в обох варіантах.
  4. Розробіть макет форми, що реалізує альтернативний спосіб введення даних для людей із порушенням моторики: користувач може вводити текст звичайним способом або обрати голосове введення. Додайте іконку мікрофона та змоделюйте зміну її станів під час запису.
  5. Розробіть для відеоплеєра анімований індикатор гучності, який змінює розмір залежно від рівня звуку, а також візуальний еквалайзер, що сигналізує про аудіо для людей із вадами слуху.
  6. Створіть прототип системи повідомлень, де окрім кольору (червоний, жовтий, зелений) використовуються додаткові підказки: іконки, вібрація (імітація через зміну тіней або ефект натискання), текстові пояснення.
  7. Розробіть кастомізовану навігацію для людей із різними потребами, яка включає дві версії головного меню: стандартну з піктограмами та розширену з текстовими підписами, можливістю зміни розміру шрифту та збільшеними активними зонами кнопок для легшого натискання.
 Самостійне опрацювання завдань в процесі підготовки до виконання лабораторної роботи. *Наведений перелік завдань є рекомендованим але не обов’язковим до виконання в повному обсязі. **Результати виконання завдань для самостійної роботи можуть бути оцінені додатковими балами на заліковому занятті (не більше, ніж 1 бал за 1 завдання). 4
9 Теоретичні питання за темами лекційних занять: -      Вступ до UX-UI дизайну. -      Принципи та евристики проєктування інтерфейсів. Поведінкові патерни та антипатерни. -      Дизайн інтерфейсу, орієнтованого на користувача. -      Розробка UI. Дизайн-системи. UI-Kit. -      Інклюзивний дизайн. Розробка інтерфейсів з урахуванням вимог доступності Модульні тести. 10
Проєкт
Немає
Рекомендовані джерела інформації та навчальні матеріали
Основні
Назва До теми (вказати номер)
Золотухіна О.А., Худік Б.О. UX/UI дизайн. Проєктування та розробка інтерфейсу користувача. Навчальний посібник. К.:ДУІКТ, 2025.120 с. 1-5
Чемерис Г. Ю. UX/UI дизайн : навчальний посібник для здобувачів ступеня вищої освіти бакалавра спеціальності «Дизайн» освітньо-професійної програми «Графічний дизайн». Запоріжжя : ЗНУ, 2021. 290 с. 1-4
Від користувацьких інтерв'ю до роботи мозку. Книжки для дизайнерів інтерфейсів. https://prjctr.com/mag/interface-books 1-5
International Journal of Human–Computer Interaction. https://www.tandfonline.com/toc/hihc20/current 1-5
Android UI design guides https://developer.android.com/design/ui/mobile/guides/foundations/accessibility?authuser=0 4
Human Interface Guidelines (Apple platform) https://developer.apple.com/design/human-interface-guidelines?authuser=0 4
Flat-Design Best Practices. Nielsen Norman Group.  https://www.nngroup.com/articles/flat-design-best-practices/ 2-4
Material Design https://m3.material.io/?authuser=0 4
Настанови з доступності вебвмісту (WCAG) https://www.w3.org/Translations/WCAG21-ua/ 5
Національна стратегія зі створення безбар’єрного простору в Україні до 2030 року. https://zakon.rada.gov.ua/laws/show/366-2021-%D1%80#n10 5
Додаткові
Назва До теми (вказати номер)
Stull E. UX Fundamentals for Non-UX Professionals: User Experience Principles for Managers, Writers, Designers, and Developers. Apress, 2018. – 331 p. 1-3
Lull, D. (2017). UX Psychology Basics. In: Discussions in User Experience . Apress, Berkeley, CA. https://doi.org/10.1007/978-1-4842-3267-5_4 1-2
Methods of Biometric Authentication for Person Identification/ Daria Polunina, Oksana Zolotukhina, Olena Nehodenko, and Iryna Yarosh. 2nd International Congress of Electrical and Computer Engineering (ICECENG’23), November 22 to 25, 2023, Bandirma, Turkey. P.327-339. https://doi.org/10.1007/978-3-031-52760-9_23. 3-4
Золотухіна О.А, Панібратов А.І. Огляд та аналіз методів для підвищення інклюзивності у сфері технологій//Технологічні горизонти: дослідження та застосування інформаційних технологій для технологічного прогресу України і світу - Київ: ДУТ, 2023. С. 293-294. 5
Золотухіна О.А., Іллюченко О.С. Порівняння Python фреймворків для розробки інтерфейсу мобільного додатку. Всеукраїнська науково-технічна конференція «Застосування програмного забезпечення в інформаційно-комунікаційних технологіях», 24 квітня 2024 року, Державний університет інформаційно-комунікаційних технологій. Збірник тез. К.: ДУІКТ, 2024. С.425-427. 4
Різанова С.Д. Золотухіна О.А. Розробка інтерфейсу з впровадженням нейромереж для покращення UX/UI // ІV Всеукраїнська науково-практична конференція «Сучасні інтелектуальні інформаційні технології в науці та освіті», 15 травня 2024 року, Державний університет інформаційно-комунікаційних технологій. Збірник тез. К.: ДУІКТ, 2024.С.132-134. 1-3
Безкоштовні курси з розробки UX-UI
  1. Курс від Prometheus: Основи Web UI розробки 2023. https://prometheus.org.ua/course/course-v1:LITS+114+2022_T2?authuser=0Зауваження! Даний курс присвячено веб-програмуванню, але він містить окремі теми, що охоплюють аспекти UI-розробки.
  2. Навчальний курс Дія.Освіта: Інклюзивний вебдизайн. https://osvita.diia.gov.ua/courses/inkluzivnij-vebdizajn?authuser=0
  3. Курс Udemi (укр.мовою): UI Kit та механіка роботи в Figma. https://www.udemy.com/course/ui-kit-figma/?authuser=0
  4. Безкоштовні курси Udemy з Figma (англ.мовою):Learn Figma for UI UX Design (with a Design Project) https://www.udemy.com/course/learn-figma-ui-ux-design-project/?authuser=0Figma UI UX designing course. https://www.udemy.com/course/figma-ui-ux-designing-course/?authuser=0 Figma Introduction Course https://www.udemy.com/course/codedfigmacourse/?authuser=0 Learn Figma for UI UX Design Within 1 Hour In 2023 https://www.udemy.com/course/figma-ui-ux-design-fundamental-course/?authuser=0 Learning Figma in 1 hour https://www.udemy.com/course/learning-figma-in-1-hour/?authuser=0 From idea to MVP without coding | Intro to Figma & Bravo https://www.udemy.com/course/idea2mvp/?authuser=0 Learn How to Design a Website in Figma https://www.udemy.com/course/learn-how-to-design-a-website-in-figma/?authuser=0
Контрольні заходи
№ Назва та опис Методи контролю та критерії оцінювання
1 Виконання та захист лабораторних робіт (обов’язковими до виконання є лабораторні роботи 1-6) Методи контролю: -      Демонстрація студентом виконаного завдання, в тому числі, з використанням формату публічної презентації отриманих результатів. -      Відповіді на контрольні питання. -      Оформлення підсумкового звіту. В методичних вказівках до виконання лабораторних робіт з дисципліни для кожної лабораторної роботи визначено окремі критерії оцінювання з детальним описом процесу нарахування балів та штрафів. Оцінка за роботу може бути зменшена, якщо робота здана невчасно або має неналежну якість виконання. У випадку порушення термінів здачі бал за роботу зменшується на штрафний бал відповідно до граничних термінів виконання роботи і визначається на основі графіку навчального процесу в поточному семестрі. Мінімальний штрафний бал становить -0,5, максимальний -2 бали. Якщо в результаті оцінювання робота отримує від’ємний бал, вона не враховується в загальну суму балів з дисципліни. Сумарно за виконання лабораторних робіт №1-7 студент може отримати не більше 60 балів.
2 Модульні тести (обов’язкові до виконання,) Модульні тести проходять з використанням системи дистанційного навчання Moodle у форматі комп’ютерного тесту. Мінімальний прохідний бал, при якому модуль вважається зданим, становить 9 балів.
3 Самостійна робота №1 та №2 (необов’язкові до виконання, але враховуються в загальній семестровій оцінці) Захист самостійної роботи відбувається на лабораторному занятті. Захист роботи передбачає: -      демонстрацію розробленої програми; -      відповіді на теоретичні питання за темою самостійної роботи; -      відповіді на питання по програмному коду. Кожна самостійна робота оцінюється максимально в 5 балів.
4 Сертифікат зовнішніх курсів (інформальна освіта) Зараховуються види робіт, дотичні за тематикою та вмістом до завдань дисципліни. Якщо теми декількох зовнішніх курсів перетинаються між собою, то зарахування балів відбувається лише один раз.
5 Додаткові творчі завдання за тематикою дисципліни, PET-проєкти, стартапи тощо Можуть замінити відповідні за тематикою та вмістом лабораторні роботи.
6 Семестрова комплексна контрольна робота Проводиться лише для студентів, які набрали сумарно меншу кількість балів ніж критично-розрахунковий мінімум - 40 балів. Максимальна оцінка за семестрову контрольну роботу не може перевищувати 40% підсумкової оцінки (до 40 балів за 100-бальною шкалою)
7 Залік Залік виставляється студенту за результатами роботи впродовж семестру. При отриманні результуючої підсумкової кількості балів від 60 і вище студенту виставляється зараховано. При бажанні студента покращити свій результат за наявності залікових балів, він має право здавати залік, на який виноситься 20 балів, але сумарна кількість балів при цьому не може перевищувати 100 балів. Студенти, які за всіма видами робіт набрали сумарно меншу кількість балів ніж критично-розрахунковий мінімум – 40 балів, до складання заліку не допускаються. Рекомендований мінімум для допуску до заліку – 48 балів.
Результати навчання
ПР9 Розробляти програмні моделі предметних середовищ, вибирати парадигму програмування з позиції зручності та якості застосування для реалізації методів та алгоритмів розв’язання задач в галузі комп’ютерних наук. ПР18 Проєктувати та розробляти інтероперабельне програмне забезпечення різної архітектури з використанням сучасних технологій, патернів, фреймворків та сервісів у відповідності до принципів UX/UI.

Зв'язок з ринком праці

Спеціальність/професія, підготовці до діяльності в якій читається курс:
UX-UI дизайнер
Посилання на вакансії (понад 3),
https://jobs.dou.ua/companies/dreamx/vacancies/313646/ https://jobs.dou.ua/companies/hue-and-machine/vacancies/313572/ https://jobs.dou.ua/companies/zade-agency/vacancies/274628/
Перелік компетентностей із вказаних як вимоги до вакансії, які набувають студенти, в процесі проходження дисципліни.
Створення якісного дизайну для різних сервісів Розробка user flow, wireframes, prototypes, clickable prototype, mobile adaptive Знання принципів user-centered design, дизайн-мислення Розуміння, як створювати дизайн для бізнес-цілей, а не лише для естетики Розуміння, як дизайн впливає на продукт, а не просто «робить гарно» Знання тенденцій UX та найкращих практик UX/UI дизайну Володіння Figma Створення UX/UI дизайну для веб та мобільних платформ Робота з продуктом на ранніх стадіях — іноді з нуля Презентація своїх рішень клієнтам і вміння аргументувати їх Вміння валідувати UX-рішення разом із командою

Інструменти оцінювання результатів навчання за дисципліною

№ Об'єкт оцінювання (знання методів та принципів,практичні навички,командна робота тощо) Методи контролю (тести, виконання поточних практичних завдань та їх форма: написання коду, створення діаграми Гантта, створення прототипу тощо) Інструмент оцінювання (доступ до результатів тесту, гостьова лекція, посилання на виконані завдання, посилання на проєкт, присутність на захисті проєктів, доступ до запису захисту тощо)
1 Знання основних принципи UX/UI-дизайну, в тому числі сучасних патернів та антипатернів проєктування; Виконання лабораторних робіт, завдань для самостійного опрацювання. Модульний тест. Доступ до результатів тесту. Доступ до теки зі звітами за результатами виконання лабораторних робіт
2 Знання методів та підходів до оцінювання якості користувацьких інтерфейсів Виконання лабораторних робіт, завдань для самостійного опрацювання. Модульний тест. Доступ до результатів тесту. Доступ до теки зі звітами за результатами виконання лабораторних робіт
3 Знання принципів адаптивної, кросплатформної та доступної розробки інтерфейсів користувача Виконання лабораторних робіт, завдань для самостійного опрацювання. Модульний тест. Доступ до результатів тесту. Доступ до теки зі звітами за результатами виконання лабораторних робіт
4 Знання сучасних технологій, фреймворків та інструментів для розробки інтерфейсів Виконання лабораторних робіт, завдань для самостійного опрацювання. Модульний тест. Доступ до результатів тесту. Доступ до теки зі звітами за результатами виконання лабораторних робіт
5 Вміння проєктувати користувацькі інтерфейси відповідно до принципів UX/UI Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
6 Вміння розробляти прототипи та макети інтерфейсів для різних платформ Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
7 Вміння аналізувати користувацький досвід та проводити UX-дослідження Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
8 Вміння впроваджувати алгоритми персоналізації користувацького досвіду на основі обробки даних Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
9 Вміння інтегрувати UX/UI-рішення у програмні моделі предметних середовищ Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
10 Вміння оцінювати та вдосконалювати власні UX/UI-рішення з урахуванням зворотного зв’язку від користувачів Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
11 Вміння самостійно виконувати дослідження та аналіз UX/UI-трендів Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
12 Вміння формулювати та аргументувати дизайн-рішення у процесі командної роботи Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт
13 Вміння використовувати інструменти для командного проєктування та обговорення UX/UI-рішень Виконання лабораторних робіт, завдань для самостійного опрацювання. Доступ до теки зі звітами за результатами виконання лабораторних робіт

Залишити відповідь Скасувати коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Недавні записи

  • Організаційна зустріч 23.06.2025
  • Старт нового сезону сертифікації — 2025

Останні коментарі

  1. polina до Криптографія та стеганографія
  2. olena до Організаційна зустріч 23.06.2025
  3. admin до Технології розробки мобільних додатків

Категорії

  • Записи

Сторінки

  • Головна
  • Для викладачів
  • Для ІТ-спеціалістів
  • Інструкція для викладача
  • Пілот проєкту
  • Приєднатись до Kharkiv IT Cluster
  • Силабуси

Архіви

  • Організаційна зустріч 23.06.2025
  • Старт нового сезону сертифікації — 2025

Календар

Квітень 2026
Пн Вт Ср Чт Пт Сб Нд
 12345
6789101112
13141516171819
20212223242526
27282930  
« Чер    

Тема WordPress Project Management від Misbah WP | Працює на WordPress