5.7. Вибір візуальних атрибутів відображуваної інформації

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

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

o Усі графічні елементи додатка створюють єдине візуальне середовище;

тому обов'язковим етапом візуального проектування є вибір упо

мянутой вище загальної концепції зовнішнього вигляду додатка;

o При використанні графічного інтерфейсу кожен графічний елемент

і реалізована їм функція тісно взаємозалежні і цей зв'язок повинний бути интуи

тивно зрозуміла користувачу.

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

5.7.1. Композиція й організація

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

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

o ієрархічна організація відображуваної інформації;

o візуальне виділення найбільш важливих елементів;

o збалансованість структури екрана;

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

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

інформації;

o використання єдиних підходів до візуалізації відображуваної инфор

мации не тільки в рамках додатка, але і робітничого середовища в цілому (принцип

інтеграції).

201

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

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

1. Яка інформація найбільш важлива для користувача?

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

2. Що користувач чи хоче повинний робити в першу, у другу, у третю чергу'?

3. Що користувач повинний бачити на екрані в першу, у другу, у третю

чергу?

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

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

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

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

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

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

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

202

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

Удобочитаемость і логічна погодженість відображуваної інформації

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

При реалізації даного принципу корисно одержати відповіді питання, що успадковують:

o чи Можна представлену на екрані ідею пли поняття виразити більш просто?

o Наскільки легко зможе користувач виконати даний крок?

o чи Дійсно усі відображувані елементи необхідні для виконання цього кроку?

Інтеграція

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

o Наскільки виявляється погодженим екранне представлення різних

компонентів додатка в процесі роботи користувача?

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

сом і інтерфейсом інших додатків?

5.7.2. КОЛІР

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

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

203

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

голубой - заспокоює;

червоний - хвилює і стомлює;

зелений - набудовує на добродушний і безініціативний лад;

жовтий - веселий, оптимістичний, викликає легковажний настрой;

жовтогарячий - розкріпачує фантазію;

фіолетовий - згубний для очей, колір заздрості, тривоги, незадоволеності;

коричневий - гнітить розумову активність;

чорний - похмурий, сприяє виникненню головних болів, але знижує число помилок.

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

Крім того, при виборі колірної палітри варто враховувати цілий ряд додаткових факторів:

o Хоча ви можете використовувати колір, щоб відбити зв'язок між тими чи

іншими об'єктами, асоціація між обраним вами кольором і конкретним зна

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

o Колір є дуже суб'єктивною характеристикою (помнете народну муд

рость: "На смак і на колір товаришів ні"?); тому те, що подобається вам, зовсім не

обов'язково буде приємно користувачам.

o Деякі користувачі можуть мати проблеми з цветовосприятием (близько 9

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

ятии кольору).

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

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

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

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