людинно-машинна взаємодія / HCI_Labs / HCI_lab5

1

Лабораторна робота № 5

Тема: Розробка прототипів інтерфейсу

Мета: Ознайомитися з поняттям та видами прототипів інтерфейсу.

Навчитися розробляти прототипи інтерфейсів програмних продуктів.

Теоретичні відомості

Засади прототипування

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

грцького. πρῶτος — перший и τύπος — відбиток; прообраз, зразок), а отже прототипування – це створення початкових зразків. Прототип інтерфейсу програмного продукту представляє собою наочне зображення, яке демонструє загальний зовнішній вигляд майбутнього інтерфейсу.

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

За допомогою прототипу проектувальник має змогу усвідомити три основні характеристики системи:

Відчуття – як має виглядати система;

2

Реалізація – як має працювати система;

Ефект - які відчуття отримує користувач при роботі з системою.

Жодна система не може бути реалізована без стадії прототипування.

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

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

розкадрування;

паперове прототипування;

прототипування за допомогою програмних продуктів.

Розкадрування (комікси)

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

3

Треба усвідомлювати, що комікси створюються не за ради «гарних малюнків», а з метою відобразити процес взаємодії. Вони дозволяють дивитись на проблемну ситуацію з точки зору людини яка має її вирішити.

Комікси вирішують наступні завдання:

Визначення дійових осіб

o Хто приймає участь у взаємодії;

o Що собою представляє середовище роботи системи; o Які задачі вирішуються.

Визначення послідовностей (яку роль відіграє інтерфейс у досягненні поставлених цілей)

o Які кроки необхідно зробити;

o Які причини змушують використовувати систему; o Які задачі були проілюстровані;

Визначення шляхів вирішення

o Що мотивує людей використовувати систему; o Що допомагає людям вирішити задачу;

o Що повинна включати в себе система.

Паперове прототипування

4

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

Наведемо декілька порад, які допоможуть ефективніше виконувати паперове протипування:

Тримайте всі необхідні матеріали (олівці, бум агу, маркери, тощо) в

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

Для підвищення швидкості виробництва прототипів робіть копії часто використовуваних елементів, таких як кнопки.

Якщо елемент важко симулювати, наприклад індикатор прогресу або меню, - не треба витрачати багато часу на їх реалізацію в прототипі.

Достатньо відмітити їх місце, а вже потім вербально роз’яснити принцип роботи.

Використовуйте окремі листки паперу як основу для окремих значущих елементів інтерфейсу. Так наприклад стікер може слугувати підґрунтям для

5

екрану мобільного телефону, а великий лист паперу – як екран монітору.

Довгі та вузькі смужки паперу можна використовувати для зображення

меню.

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

Якщо доречно – включайте в прототип стандартні елементи інтерфейсу операційної системи.

Головна перевага паперового прототипування є можливість доручення до процесу усіх, хто зацікавлений в процесі розробки. Будь хто може приймати в цьому участь. Дайте маркер вашим майбутнім користувачам і попросіть їх внести зміни – нехай самі покажуть вам що вони хочуть бачити

вінтерфейсі, що їм не подобається, чи що, на їх думку є дуже вдалим.

Цифрові макети

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

6

Індивідуальні завдання

1. Розробити не менше п’яти прототипів для кожного з елементу

інтерфейсу, для якого була складена специфікація у попередній роботі.

Контрольні питання

1.Дати визначення поняттю прототип;

2.Для чого необхідно робити прототипи інтерфейсів програмних продуктів;

3.Які бувають види прототипів.

Зміст звіту

1.Титульний лист;

2.Короткі теоретичні відомості;

3.Прототипи інтерфейсу.

4.Висновки.