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

'''GUI''' (Grafical User Interfaces) - графічний інтерфейс користувача. В деяких  програмних засобах можна встановлювати свої налаштунки щодо їх візуального оформлення. Змінювати положення панелей, меню, встановлювати свої кольорові схеми... В даному випадку користувач програмного засобу сам визначає які саме обєкти будуть видимі і як розміщені. Корисність встановлює користувач програмного засобу.

Візуальні ефекти в програмному продукті повинні обовязково бути присутніми. Але не перенасиченими.

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

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

<ul>
<li>ієрархічна організація інформації, що відображається;</li>
<li>збалансованість структури екрану;</li>
<li>забезпечення легкості для читання і логічної узгодженості інформації, що відображається;</li>
<li>візуальне об'єднання логічно взаємозв'язаних елементів;</li>
<li>візуальне виділення найбільш важливих елементів;</li>
<li>використання єдиних підходів до візуалізації інформації, що відображається, не тільки в рамках застосування, але і робочого середовища в цілому (принцип інтеграції).</li>
</ul>


== '''Ієрархічна організація інформації''' ==

Принцип ієрархічної організації інформації означає розміщення інформації з урахуванням її значення щодо інших візуальних елементів застосування. Результат цього впорядкування впливає на реалізацію всіх інших принципів візуального представлення інформації. З погляду роботи користувача, ієрархічна організація інформації визначає доступність тих або інших даних і послідовність виконання вирішуваної задачі. Для успішної реалізації цього принципу необхідно отримати відповіді на наступні питання:
Яка інформація найбільш важлива для користувача (іншими словами, що є найбільш важливим з погляду користувача при роботі з вашим застосуванням)? Наприклад, найбільш важливими аспектами для нього можуть бути створення або пошук документа.<br>
Що користувач повинен робити в першу, в другу, в третю чергу?<br>
Що користувач повинен бачити на екрані в першу, в другу, в третю чергу?

== '''Збалансованість структури екрану''' ==

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

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

<ul>
<li>залишати порожнім приблизно половину екрану (вікна);</li>
<li>залишати порожню рядок після кожного п'ятого рядка таблиці;</li>
<li>залишати чотири-п'ять пропусків між стовпцями таблиці;</li>
<li>вміст полів повинен не «притискатися» до краю екрану, а розташовуватися біля його горизонтальних або вертикальних осей.</li>
</ul>

== '''Легкість для читання і логічна узгодженість інформації, що відображається''' ==

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

При реалізації даного принципу корисно отримати відповіді на наступні питання:
<ul>
<li>Чи можна представлену на екрані ідею або поняття виразити більш просто?</li>
<li>Наскільки легко зможе користувач виконати даний крок?</li>
<li>Чи дійсно всі елементи, що відображаються, необхідні для виконання цього кроку?</li>
</ul>

== '''Візуальне об'єднання логічно взаємозв'язаних елементів''' ==

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

== '''Візуальне виділення найбільш важливих елементів''' ==

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

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

== '''Інтеграція''' ==

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

Наскільки виявляється узгодженим екранне представлення різних компонентів застосування в процесі роботи користувача?

Як співвідносяться візуальні параметри застосування з системним інтерфейсом і інтерфейсом інших застосувань?

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

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

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

== '''Колір''' ==

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

У роботах, присвячених дослідженню психологічної дії різних кольорів, наводяться такі дані:
<ul>
<li>блакитною - заспокоює;</li>
<li>червоний - хвилює і стомлює;</li>
<li>зелений - настроює на добродушний і безініціативний лад;</li>
<li>жовтий - веселий, оптимістичний, викликає легковажний настрій;</li>
<li>оранжевий - розкріпачує фантазію;</li>
<li>фіолетовий - колір заздрості, тривоги, незадоволеності;</li>
<li>коричневий - пригноблює розумову активність;</li>
<li>чорний - похмурий, але сприяє концентрації уваги.</li>
</ul>

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

Крім того, при виборі колірної палітри слід враховувати цілий ряд додаткових чинників:
Хоча ви можете використовувати колір, щоб відобразити зв'язок між тими або іншими об'єктами, асоціація між вибраним вами кольором і конкретним значенням не завжди буде очевидна або легко впізнана для користувача.
Колір є дуже суб'єктивною характеристикою (пам'ятаєте народну мудрість: «На смак і на колір товаришів немає»?); тому те, що подобається вам, зовсім не обов'язково буде приємне користувачам.
Деякі користувачі можуть мати проблеми з кольоросприйманням (близько 9 відсотків дорослого чоловічого населення мають те або інше відхилення в сприйнятті кольору).

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

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

== '''Просторове розміщення візуальних елементів''' ==

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

Основну роль при компоновці візуальних елементів грають два прийоми:
<ul>
<li>групування </li>
<li>вирівнювання.</li>
</ul>

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

З метою забезпечення єдиного підходу до просторового розміщення графічних елементів введена спеціальна одиниця вимірювання - dialog base unit (одиниця площі діалогової панелі), яку ми надалі скорочено називатимемо «дискретою вікна».

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

'''''Вирівнювання''''' є ще одним, додатковий, спосіб візуального відображення взаємозв'язаної інформації (або елементів управління).
Як правило, розрізняють три способи вирівнювання інформації:
<ul>
<li>вертикальне (по лівому або правому краю елементів, що вирівнюються)</li>
<li>горизонтальне (по верхньому рядку або по верхньому краю елементу)</li> 
<li>суміжне вирівнювання (коли елементи стуляються краями).</li>
</ul>
Оскільки приведені вище рекомендації носять достатньо загальний характер, цілком правомірне питання: чи існують об'єктивні критерії оцінки щільності заповнення екрану, збалансованості даних і інших візуальних атрибутів? Проблема полягає в тому, що на будь-яку людину, яка дивиться на екран, робить вплив зміст інформації, утрудняючи таку оцінку. Один з можливих підходів до вирішення цієї проблеми - відокремити зміст від форми. Для цього застосовуються два методи: прямокутників і виділених крапок.

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

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

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


[[category:РІС]]