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

Принципи проектування екранів.

Принципи проектування екранів однаково відносяться і для випадку проектування форм і вікон. Основна ідея полягає в тому, щоб досягти максимально стимулюючої дії при мінімальному відволіканні. Фірма Microsoft запропонувала 6 основних принципів проектування екранів, форм, вікон:

1. Можливість читання і послідовність.

2. Структурованість і збалансованість

3. Взаємовідношення елементів.

4. Сфокусованість та акценти.

5. Інформаційна ієрархія

6. Єдність та інтегрованість.

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

1. Чи представляється загальна ідея роботи додатку для користувача найбільш ясним способом.

Рисунок 15.1 – Головна форма додатку розкриває його загальну ідею

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

Рисунок 15.2 – Пояснення додатком кожного кроку алгоритму вирішення задачі

3. Чи усі компоненти вікна, форми, що є в додатку розміщені там по праву.

4. Чи не забуває користувач при роботі з окремим вікном при реалізації діалогу загальну мету, яку треба опанувати додатку.

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

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

Рисунок 15.3 – Зрозумілість інформації для користувача

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

Принцип збалансованості припускає:

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

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

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

Рисунок 15.4 – Структурованість і збалансованість всіх єлементів форми додатку

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

Рисунок 15.5 – Послідовне розміщення груп компонентів відповідно вирішенню задачі додатку

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

1. Елементи виділення.

2. Елементи групування.

3. Розміри компонентів і шрифтів.

4. Гами кольорів.

Рисунок 15.6 – Акцентування уваги до головної задачі додатку за допомогою ліній та зміни шрифта

5. Інформаційна ієрархія. При розробці додатку необхідно представити інформаційний зміст у вигляді окремих залежних один від одного інформаційних об’єктів. Тут використовується принцип: вихідні дані – обробка даних – отримання результатів. Користувачеві повинно бути зрозумілим, яка інформація є первинною, де і як її можна одержати (запит до БД, введення передача інформації із (в) інші джерела), як її можна представити для огляду на екрані і як вона буде перетворюватись у вихідний результат. Користувач повинен розуміти, яка інформація є найважливіша, важлива, а яка другорядна. При вирішенні задач треба акцентувати увагу на найбільш важливу інформацію, тобто, як правило введення цієї інформації повинно бути спочатку всього діалогу, а при отриманні результату спочатку теж повинна виводитись найбільш важлива інформація. Розроблювач повинен розподілити всі інформаційні потоки по джерелах одержання, збереження і представлення інформації. Таким чином повинна бути сформована ієрархічна підпорядкованість всіх інформаційних потоків, що дає змогу для користувача досягти ясного розуміння всіх етапів перетворення інформації і одержання результатів.

Рисунок 15.7 – Інформаційна ієрархія при вирішенні задачі додатку

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

Рисунок 15.8 – Єдність та інтегрованість форм додатку.

Вимоги, що пред’являє фірма Microsoft до розробки інтерфейсів.

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

Microsoft наголосив, що інтерфейс буде “дружнім” в тому випадку, коли виконуються наступні принципи його проектування:

1. Принцип проектування “дружнього” інтерфейсу: “Командує користувач”.

2. Принцип проектування “дружнього” інтерфейсу: “Наочність”.

3. Принцип проектування “дружнього” інтерфейсу: “Однаковість”.

4. Принцип проектування “дружнього” інтерфейсу: “Терпимість до користувача”.

5. Принцип проектування “дружнього” інтерфейсу: “Зворотній зв’язок”.

6. Принцип проектування “дружнього” інтерфейсу: “Естетика”.

7. Принцип проектування “дружнього” інтерфейсу: “Простота”.

1. Принцип проектування “дружнього” інтерфейсу: “Командує користувач”.

У парі взаємодії “Користувач-ЕОМ” додаток повинен використовувати максимальні можливості як людини, так і машини. Однак користувачу дається привілей, тому робота додатку повинна бути організована таким чином, щоб у користувача склалось враження, що все що робиться залежить від користувача, він керує всім, може змінити хід процесу. Додаток повинен мати багато засобів настроювання інтерфейсу, які б сприяли персоніфікації додатку, тобто максимально настроювались на вимоги конкретного користувача. При цьому у користувача буде враження зручності особистої роботи. Користувачу повинна втягуватись думка, що він може звертатися до системи як до свого продовження при вирішенні задач додатку. Взагалі система повинна давати користувачу враження величезної можливості настроювання на його проблеми (конкретику).

Рисунок 15.9 – Вікно настроювання додатку.

2. Принцип проектування “дружнього” інтерфейсу: “Наочність”.

Усі форми, які використовуються в додатку повинні мати властивості наочності, тобто користувач повинен витрачати мінімум часу для розпізнавання того, що йому потрібно зробити або ідентифікувати для ухвалення рішення. Усі доступні засоби (колір, шрифт, фон, контрастність, піктограми, звук, малюнки) повинні сприяти максимальному сприйняттю інформації, розташованої на екрані. При розробці додатку треба користуватися принципом “краще один раз побачити, ніж прочитати і почути для ідентифікації”. Також користувач повинен бачити на екрані до чого приводять його дії від клавіатури мишки та інших засобів. При цьому: вимикач при натисненні повинен викликати символ відображення; візуальна кнопка при натисненні повинна змінювати своє зображення. Якщо виникла аварійна ситуація, то фон, розмір шрифту, колір повинні змінюватись; якщо ж об’єкт недосяжний, то повинна змінюватись його контрастність. Користувач повинен завжди знати, що система в будь-якому випадку відреагує на його дії і повідомить про це; при цьому, якщо йде процес вирішення задачі, то інтерфейс повинен повідомляти через свої засоби про це користувача. Загальний принцип наочності - користувач повинен впізнавати, а не запам’ятовувати.

Рисунок 15.10 – Елементи наочності.

3. Принцип проектування “дружнього” інтерфейсу: “Однаковість”.

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

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

2. Використання однакових команд для реалізації тих самих дій (клавіатури, мишки).

3. Схожість додатку на те операційне середовище, в якому він запускається.

Рисунок 15.11 – Однаковий вигляд різних форм одного додатку .

4. Принцип проектування “дружнього” інтерфуйсу: “Терпимість до користувача.”

Додаток повинен бути спроектований таким чином, щоб користувач міг робити все те, що він захоче. Це відноситься до дослідження та отримання додаткової інформації, а також до вивчення можливостей додатку. Але, якщо дії користувача можуть привести до втрати інформації, порушення взаємозв’язку з операційним середовищем, то як додаток, так і середовище повинні видавати користувачу інформацію, яка попереджає його про можливі неприємності. Система повинна бути спроектована таким чином, щоб всі дії користувача не змогли привести до її знищення. Хоча в додатку повинен дотримуватись принцип “керує користувач”, але його дії не повинні приводити до знищення додатку чи значного його пошкодження. Для полегшення освоєння користувачем можливостей додатку корисно в додаток включати різноманітні демонстраційні модулі, які б навчили користуватися додатком, включати до додатку різноманітні попередження, які б полегшили задачу вивчення додатку. Текст повинен бути “дружнім” і не ображати користувача. Користувач завжди має знати, що система “жива” і відпрацьовує всі його команди та дії, і для цього повинні бути використані різноманітні засоби повідомлення про те, що додаток є в роботі і готовий приймати інформацію від користувача.

Рисунок 15.12 – Демонстраційний пакет, який вчить користувача працювати з додатком.

5. Принцип проектування “дружнього” інтерфейсу: “Зворотній зв’язок”.

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

Загальне правило:

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

Смужка, яка повідомляє про тривалість процесу створення словника

Рисунок 15.13 – Ілюстрація додатком продовження в часі вирішення задачі.

6. Принцип проектування “дружнього” інтерфейсу: “Естетика”.

Уся робота по проектуванню додатку повинна мати естетичний вигляд, при цьому необхідно дотримуватись загального принципу – “не нашкодь здоров’ю користувача” при роботі з додатком. Зайві “естетичні” елементи на формі або екрані заважають сприйманню інформації, розбалансовують увагу і розосереджують користувача. Але сіра без видумок робота приводить до монотонності і засипання працюючого на робочому місці, тому велике значення мають кольорові співвідношення всіх елементів на екрані, їх розмір, взаєморозташування і кількість. Для всіх компонент повинен бути вибраний фон форми, який повторюється у всіх формах додатку. Різнокольоровість заважає сприйняттю інформації, а для користувачів з дефектом зору це може привести до дратування. Кількість елементів на формі теж обмежена загальним правилом:

Для прийняття рішення користувач повинен оглянути не більше (72) елементи. Взаєморозташування повинно бути основане на принципі рівномірності розміщення по всій площині форми. Якщо площі не вистачає, то краще розбити весь діалог на декілька частин і розробити декілька форм.

Рисунок 15.14 – Правильно подібрана кількість єлементів на формі

Рисунок 15.15 – Неправильно подібрана на формі кількість елементів.

7. Принцип проектування “дружнього” інтерфейсу: “Простота”.

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

Головний принцип:

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

Рисунок 15.16 – Елементи адаптації додатка до користувача.

Рисунок 15.17 – Достатня кількість інформації для її аналізу.

Рисунок 15.18 – Послідовне розкриття даних