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

1

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

Тема: Специфікація інтерфейсу

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

Навчитися складати специфікацію на користувацький інтерфейс.

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

Завдання специфікації

Специфікації схожі на флосс (зубна нитка): всі знають, що потрібно їх писати, але ніхто цього не робить.

Джоєл Спольскі.

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

Найважливіше завдання специфікації полягає в проектуванні програми.

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

2

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

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

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

як повинна працювати програма. Всі партнери можуть просто прочитати специфікацію.

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

Поняття специфікації

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

Функціональна специфікація – описує роботу продукту виключно з точки зору користувача. Вона не стосується того, як все буде реалізовано. У

ній йдеться про функції продукту. Вона містить опис екранів, меню,

діалогових вікон і т. д.

3

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

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

Основні розділи специфікації

Відмова від відповідальності. Чиста страховка. Яка-небудь фраза,

повідомлення, що даний документ представляє собою неповну специфікацію,

або що-небудь в цьому роді, може врятувати від нашестя розлючених людей,

з претензіями про недосконалість документу.

Автор. Один автор. У деяких фірмах вважають, що специфікації повинні складатися колективно. Якщо вам коли-небудь доводилося за-

нітрохи «колективною творчістю», то ви знаєте, що гіршої тортури не буває.

Сценарії. При проектуванні продукту треба мати кілька реальних сценаріїв його використання. Інакше він може не знайти ніякої реального застосування.

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

4

Загальний огляд. Це щось на зразок змісту специфікації. Можна виконати його у вигляді пробою блок-схеми або розширеного опису архітектури.

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

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

Деталі - це найважливіше у функціональній специфікації.

Невирішені питання. Нічого страшного, якщо в першій версії специфікації залишаться відкриті питання. Коли пишеться перший варіант,

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

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

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

Правило 1: Пишіть цікаво

Правило 2: Специфікація повинна нагадувати код, призначений для виконання мозком люини.

Правило 3: Пишіть простіше

Правило 4: Виправляйте і перечитуйте текст по кілька разів

Правило 5: Шаблони бувають шкідливі - не робіть усе специфікації за одним шаблоном.

5

Приклад специфікації

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

Загальні відомості

WhatTimeIsIt.com - це служба за допомогою якої можна дізнатися час в Інтернеті.

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

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

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

що бачить користувачі працюючи з сайтом WhatTimeIsIt.com.

Сценарії

Проектуючи продукт, корисно уявити собі кілька реальних ситуацій, в

яких звичайні стандартні люди могли б ним скористатися. Ми розглянемо два таких сценарія

Сценарій 1 - Майк

Майк - вельми зайнятий керівник. Він президент великої фірми, яка виробляє дитячі речі, переробляючи динаміт, і поширює їх через загальнонаціональні торговельні мережі. У звичайний день у нього буває маса зустрічей з дуже важливими людьми. Іноді з'являється співробітник банку, загрожуючи неприємностями за невиплату відсотків по кредиту, що мав бути сплаченим три місяці тому. Іноді приходить інша людина з іншого

6

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

приходять до нього і нарікають, що він заробляє надто багато.

Всі ці відвідувачі дуже засмучуються, якщо не можуть знайти Майка,

який призначив їм зустріч. Вся справа в тому, що Майк не знає яка зараз година. За порадою свого секретаря Майк підписується на

WhatTimeIsIt.com. Тепер, якщо йому треба дізнатися час, він заходить на сайт WhatTimeIsIt.com , вводить ім'я користувача і пароль та дізнається поточний час. За день він встигає побувати на цьому сайті кілька разів там він дізнається, чи не пора піти на ланч не запізнюється чи він на чергову зустріч і т.д. До кінця дня, а фактично годин до трьох пополудні, він заходить на сайт все частіше і частіше, щоб не пропустити момент, коли можна буде відправитися додому Починаючи з 4:45 він практично безперервно натискає кнопку «Оновити»

Сценарії 2: Сінді

Сінді – випускниця школи. Вона ходить в безкоштовну середню школу і досить кмітлива. Тому, повертаючись додому о 2 годині дня вона витрачає лише близько 7 хвилин (у середньому) на те щоб зробити домашнє завдання з алгебри. Інші вчителі взагалі нічого не задають на дім. Її маленький брат сидить невідривно перед єдиним в будинку телевізором і дивиться

«телепузиків», тому решту дня (з 2:07 до 6:30, коли її нова мама годує всіх обідом) вона проводить в Інтернеті, базікаючи з друзями в AOL. Вона постійно шукає цікаві нові сайти і випадково набравши слова «який зараз час» у вікні пошукової машини (помилково, вона хотіла запитати це у друзів в чаті), вона потрапила на WhatTimeIsIt.com і завела себе там обліковий запис. Вона вводить своє ім'я користувача та «Ryan-Phillipe» в якості пароля,

вказує часовий пояс і - вуаля – дізнається час.

7

Чого не буде в програмі

Уданій версії не будуть підтримуватися наступні функції

вибір декількох часових поясів для одного користувача

(передбачається, що кожен користувач постійно находиться в одному і тому ж часовому поясі);

зміна пароля;

призначення зустрічей.

Блок-схема WhatTimeIsIt.com

У нас ще буде час зайнятися виснажливими подробицями, а поки ми лише глянемо на коротку блок-схему щоб уявити собі картину в цілому.

Блок-схема неповна, але правильно відображує, як ми збираємося використовувати WhatTimeIsIt.com :

Специфікації для кожного екрану

WhatTimeIsIt.com складається з ряда абсолютно різних екранів.

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

Всі екрани створюються в HTML (Єдиний виняток - екран заставки,

створений за допомогою MacromertiaShoekwave).

Кожен екран WhatTimeIsIt.com має свою твердо встановлену назву.

Екран заставки

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

8

Сохо, куди люди приходять на роботу з собаками, приколюють собі до вух англійськими шпильками різні мульки і до ланчу встигають збігати в

Starbucks чотири рази.

Після того як анімація покрутиться секунд 10, в нижньому правому куті стане помітне посилання «Пропустити цей екран». Завжди розміщуйте її в самий кут, тоді її ніхто не помітить і не клацне по ній. Вона повинна відмежовуватися не менше ніж на 800 пікселів від лівого краю заставки і не менше ніж на 600 від верхнього.

Клацання по кнопці «Пропустити цей екран» переміщує користувача на вихідну сторінку. Коли кінчається анімація, броузер переадресовується туди автоматично.

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

«Пропустити цей екран», і тоді надалі він не побачить заставку. Регулярних відвідувачів треба позбавити від її многократного перегляду. Я говорив про це з Джимом з відділу маркетинга, і він збирається обговорити це на нараді комісії з продажів, маркетингу і рекламі.

Стартова сторінка

З'являється по завершенні анімації Shockwave. Біля вихідної сторінки і має три мети:

1.Дати людям уявлення про послугу і можливість вирішити, чи варто їм на неї підписуватися

2.Дозволити вже підписалися абонентам зареєструватися на сайті.

3.Дати тим, хто вирішив підписатися. можливість створити для облікового запису.

Клацання по логотипу в лівому верхньому кутку цього, і взагалі всіх

єкранів, переводить користувача назад на стартову сторінку

9

Примітка. Зважаючи на велику подібність між різними екранами треба задіяти якусь систему включень на стороні сервера, і тоді, якщо зміниться назва служби, або ми купимо те доменне ім'я яке хочемо, можна буде поміняти відразу всі екрани, зробивши виправлення в одному місці Пропоную Vignette Story Server. Звичайно, це надмірність Звичайно, він стоїть 200000 долларів. Але з ним куди простіше мати справу, ніж із включеннями на стороні сервера.

Посилання з текстом «Натисни тут, щоб увійти в систему» приводить на форму входу в систему. Посилання з текстом «Натисни тут, щоб стати абонентом системи» наводить на форму реєстрації абонентів. Інші п'ять посилань показують сторінки з текстом, який надасть адміністрація; вони виходять за рамки цієї специфікації і змінюються рідко.

Форма входу в систему

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

Вона має наступний вигляд:

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

Вікно адреси електронної пошти дозволяє ввести до 60 символів. Вікно пароля - до 12. Замість тексту що вводиться з клавіатури відображаються зірочки (*), що допомагає захистити пароль.

Коли користувач клацає по кнопці «Зареєструватися» сервер виконує наступні перевірки:

1. Якщо адреса електронної пошти зазначена, але вона недійсна,

оскільки її формат невірний (немає знака @ або є символи,

заборонені для поштових адрес в RFC-822), сервер повертає нову сторінку, яка виглядає в точності як форма входу в систему, але над

10

вікном для адреси виведено червоним кольором повідомлення про помилку з текстом «Недопустима адреса. Будь ласка, перевірте її правильність». Цей текст підсвічено червоним кольором, але текст«Будь ласка, введіть свою адресу електронної пошти», як і раніше виводиться червоним. Неправильна адреса, раніше вказана користувачем, залишається в полі введення.

2. Якщо адреса електронної пошти введена, але така адреса не належить жодному зареєстрованому абоненту, сервер повертає нову сторінку, яка виглядає в точності як форма входу в систему але над вікном для адреси виведено червоним кольором повідомлення про помилку з текстом «Введена адреса не належить зареєстрованим абонентам. Будь ласка, перевірте її правильність. Щоб стати зареєстрованим абонентом, клацніть по посиланню в правій частині екрана». Цей текст виведений червоним, але текст «Будь ласка,

введіть свою адресу електронної пошти», як і раніше виводиться чорним. Неправильна адреса, раніше введена користувачем,

залишається присутня в текстовому вікні (Питання до розробників:

Чи можна тут за допомогою JavaScript зробити так, щоб при клацанні користувача за посиланням, що веде на форму реєстрації абонентів, поштову адресу на ній заповнювати автоматично?)

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

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

4 Якщо адрес електронної пошти введений, і він належить одному з зареєстрованих абонентів, і введений пароль, але пароль неправильний, сервер повертає нову сторінку, яка виглядає в