Лабраторна робота № 1.

Тема: Технічне завдання на розробку користувацького інтерфейсу

Мета роботи: навчитися створювати технічне завдання на розробку
користувацького інтерфейсу за заданою тематикою
Завдання: 1) Провести передпроектний аналіз аналогів та прототипів;
2) Навчитися створювати технічне завдання на розробку
користувацького інтерфейсу;
3) Виконати всі пункти лабораторної роботи;
4) Надати звіт про виконану роботу.
Теоретичні відомості
Технічне завдання (ТЗ) — це письмовий опис сайту, який потребує
розробки. Розробка технічного завдання включає в себе: визначення основних
характеристик сайту, його ідеї, напрямку, дизайну, технічних параметрів. ТЗ
розробляється і погоджується з замовником, що дозволяє чітко сформувати всі
критерії створення сайту до початку роботи над його візуальною та технічною
частиною. Якісно розроблене ТЗ, дозволяє значно зменшити час розробки
сайту.
Вміст ТЗ повинен включати наступні розділи:
Введення
Мета (ціль) розробки
Призначення розробки
Вимоги до програми
Вимоги до програмної документації
Стадії і етапи розробки
Порядок контролю і приймання.
Розглянемо докладніше з яких етапів складається процес створення
веб-сайту. Детальне розуміння цього процесу дозволить визначити, хто саме
займається розробкою сайтів і кого слід називати веб-дизайнером.
1.Постановка мети.
На цьому етапі вирішуються питання загального характеру:
• аналіз web -ресурсів суміжної тематики;
• попередній аналіз цільової аудиторії;
• мета і завдання розроблюваного ресурсу;
• постановка завдання: докладний опис розроблюваного ресурс
у, перерахування його розділів та додаткових функцій чи служб
(форум, чат, розсилка тощо);
• визначення характеру представлення інформації (статична
чи динамічна) та методів введення даних (із зовнішніх прогр
ам чи безпосередньо на ресурсі);
• з'ясування вимог до програмної і апаратної платформи, на яких
буде працювати ресурс.
Розглянемо основні питання, які постають перед розробниками веб-
сайтів
• Що потрібно зробити?
 • Яка інформація буде розміщена на сайті? Просто перелічити розділи,
але врахувати всі бажані напрямки. Розробники перелічують розділи сайту з
врахуванням всіх бажаних напрямків.
• Які додаткові функції крім подання статичної інформації буде мати
сайт? Перелічити й дати короткий опис кожної функції.
• Чи буде сайт обмінюватися даними з іншими програмами? Якщо так,
то потрібно дати перелік всіх цих програм та їх короткий опис, пояснити
мету цього обміну.
• Чи є якісь вимоги до програмної і апаратної платформи, на якій
повинен працювати сайт? Якщо так, то треба перелічити ці вимоги й дати
коротке пояснення.
Виходячи з чіткого розуміння мети, для якої створюється сайт, обсягів
сайту, його функціональності задаються основні параметри візуального
представлення та структури сайту. Написання технічного завдання –
це надзвичайно складно, так як
розкриття багатьох питань вимагає наявності спеціальних знань. За його
основу береться постановка завдання, що входить у складову частину і є
джерелом нових уточнюючих питань.
Інше джерело відомостей для ТЗ –
це знання розробника про те, як треба реалізувати ту або
іншу функцію для того, щоб нею було зручно користуватися. Ця область
знань називається.
Для того, щоб створити завдання, необхідно проаналізувати діяльність
компанії та основні завдання, які буде розв’язувати сайт. Тому замовникам
пропонується не лише графічний дизайн, а й маркетингові рішення.
Розробляється інформаційна архітектура вузла.
Інформаційна архітектура дозволяє організувати вміст веб -вузла і
визначає, яким чином користувач одержить доступ до інформації.
Приступаючи до її розробки, необхідно переконатися, яким є повний перелік
даних, які повинні бути представлені на веб - вузлі. Слід пам’ятати, що додати
нову інформацію в готовий вузел досить складно.
Процес створення інформаційної архітектури починається з поділу
інформації на категорії і визначення пріоритетних даних. Основним
критерієм є важливість інформації. Інформацію варто розбити на 5-7
розділів. Якщо ж розділів більше 7, то документ вважається перевантаженим
інформацією. Далі варто визначити, яка інформація повинна виділятися на
екрані й привертати увагу користувачів, до яких даних користувач
повинен мати постійний доступ. Для спрощення роботи, будується загальний
план і діаграми, які відображають принципи угруповання даних. Елементи
діаграми, що містять інформацію і залучають увагу користувача, варто
виділити.
Інтерактивний вузел характеризується тим, що запрошує користувача
взяти участь у його роботі, дозволяє визначити, які дані повинні бути
присутнім на екрані браузера. Таким чином, інтерактивні засоби дозволяють
організувати відгук веб - вузла на дії користувача, від кнопок до об'єктів
віртуальної реальності. Тобто, вони пропонують користувачу приймати
участь в процесі вибору і фільтрації інформації, який підвищує ймовірність
того, що користувач повторно звертається на вузол. Інтерактивні елемен
ти повинні бути пов’язані один з одним і відповідати основній ідеї вузла. Не
варто перевантажувати його даними й поміщати на сторінки елементи з
якими складно розібратись.
Обираючи інтерактивні елементи, варто зіставляти переваги від їхнього
використання і час, необхідний для їх кодування.
Правила використання інтерактивних елементів:
1. Інтерактивні елементи повинні бути доступні всім користувачам, у
тому числі й людям з фізичними обмеженнями.
2. Користувач повинен знати, скільки часу треба для копіювання
певного об'єкта.
3. Користувач повинен мати можливість контролювати відображення
даних (запускати анімацію чи ні, тимчасово або повністю припинити
відтворення)
4. Не слід нескінченно повторювати фрагменти даних.
5. Необхідно забезпечити зворотній зв'язок.
Типи інтерактивної взаємодії:
1. інтерактивна навігація,
2. відтворення інтерактивної мультимедійної інформації,
3. інтерактивна реклама.
Результатом виконання другого етапу роботи є документ «Технічне
завдання». Воно може мати досить значний обсяг (близько 50 сторінок) і
повинно містити всі відомості, які необхідні для подальшої роботи над
проектом:
1. Структура сайту включає перелік сторінок, короткий зміст і
алгоритм взаємодії;
2. Перелік засобів, які будуть використані для розробки, містить
характеристику використовуваної графіки в перелік програмн
их засобів і використовуваних технологій;
3. Розрахунок обсягу і вартості робіт являє собою повний пере
лік програмних і графічних елементів і виконуваних робіт з
кожного з них;
4. Строки виконання робіт регламентують тимчасові обмеження
по створенню сайту, його розміщенню та тестуванню;
5. Розміщення, реєстрація домену і його підтримка. Процес вкл
ючає
визначення доменного імені, при необхідності, його реєстраці
ю, висновок договорів зі службою хостинга і підтримку;
6. Етап завершується затвердженням технічного завдання замовн
иком.
Робоче завдання
Кожен студент згідно своєї тематики повинен розробити технічне
завдання на розробку користувацького інтерфейсу.
 Етап I. Провести передпроектний аналіз аналогів та прототипів за
обраною тематикою. У процесі передпроектного аналізу сформувати звіт, що
міститиме розгорнутий порівняльний аналіз переваг та недоліків
функціональних та естетичних особливостей не менш як 10 аналогів та
прототипів.
Етап II. Скласти технічне завдання на розробку користувацького
інтерфейсу за обраною тематикою. Під час написання технічного завдання
особливу увагу приділити наступному:
1. Описати принципи дизайну та естетичні особливості інтерфейсу
користувача:
1. колористичні переваги;
2. особливості шрифтового оформлення;
3. напрям дизайну інтерфейсів та іконографічного супроводу;
4. особливості анімації взаємодії тощо;
2. Передбачити опис адаптивності, за умови розробки онлайн-
системи;
3. Описати принципи та особливості роботи користувацького
інтерфейсу;
4. Визначити галузь застосування;
5. Описати вимоги ергономіки та особливості дизайну інтерфейсу,
відносно вимог цільової аудиторії.
Етап ІІІ. Здійснити обговорення розробленого технічного завдання. Для
виконання цього завдання доцільно розподілитися у пари, де студент, що
опрацьовував технічне завдання є “Виконавцем”, а опонент є “Замовником”.
У режимі коментування здійснити обговорення технічного завдання та за
необхідності доопрацювати технічну документацію. Уточнення, які були
додані після обговорення у парах виділити у звіті (кольором, поміткою, або
будь-яким іншим чином). Якщо кількість студентів у групі перевищує
кількість варіантів завдання, то обрання варіантів після останнього
починається з першого (16 варіант - ).
Варіанти завдань
1. Система розрахунку заробітної плати бухгалтера приватного
підприємця.
2. Система нарахування стипендії студентам.
3. Система для ведення реєстру співробітників.
4. Система для автоматизації робочого місця діловода.
5. Система для автоматизації робочого місця працівника відділу
кадрів для роботи з студентами.
6. Система пропускного контролю на підприємстві.
7. Система пропускного контролю в 18 корпус.
8. Система для автоматизації роботи старости групи.
9. Система для формування додатків до диплому студентам..
10. Система нарахування заробітної плати механіка СТО.
11. Система підрахунку витрачених коштів в родині.
12. Система автоматизації роботи касира пункту обміну валют.
 13. Система автоматизації робочого місця секретаря.
14. Система нарахування заробітної плати водія тролейбуса.
15. Система підрахунку пропусків студентів за навчальний рік.
Опрацювати лабораторну роботу, спираючись на матеріали, з Лекції №1
“ Теорія дизайну. Вступ до дизайну інтерфейсів та веб-дизайну.”
Контрольні запитання
1. Поясніть, що таке технічне завдання.
2. Якими стандартами регламентується розробка
програм і складання технічного завдання з цього напрямку?
3. Які розділи повинен включати вміст технічного завдання?
4. Розкрийте зміст розділів технічного завдання.
5. Назвіть основні пункти розробки технічного завдання
користувацького інтерфейсу.