UI

Usability

Usability

1. Юзабіліті – це перш за все зручність використання вашої програми. Це те як ми складний функціонал робимо простим та інтуітивно зрозумілим для користувння.

2. Юзабіліті це одна з найважливіших складових програмного забезпечення.

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

UI Mookups

Мокап – це приблизний макет функціонального дизайну.

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

Для проектування графічного інтерфейсу можна використовувати як спеціалізоване рпограмне забезпечення (Balsamiq Mookups) так і звичайний MsPaint чи навіть клаптик паперу.

Text Box

TextBox – це контрол який відображає поле вводу у яке користувач може ввести текстову інформацію.

Рекомендації використання:- Якщо ми робими текст бокс не активним то лейб також повинен таким ставати.- Лейбл повинен завжди розташовуватися або лзіва або зверху від текст боксу.- Старайтесь робити текст бокси такої ширини – щоб вміщалися всі введені дані.- Якщо вам потрібно від користувача вводити тільки цифри – то забороняйте вводити

букви.- Якщо вам потрібно використовувати текст бокс тільки для виводу інформації – то робіть

його readonly.- Якщо у вас не вистачає місця для текст боксу і його лейбла, то використовуйте текст бокс з

Null-text.

Text Box examples

Correct Incorrect

Button

Button – це елемент управління у вигляді кнопки. Після натисненян на яку відбуваєтьяс певна дія.

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

кнопці багато тексту).- Кнопки які виконують якісь диструктивні дії не можуть бути «кнопками за змовчуванням».- Використовуйте «...» в описі кнопки якщо для виконання дії вам потрібно отримати від

користувача якусь додаткову інформацію.- Використовуйте «Access key» для командних кнопок. Access key повинен відповідати

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

активною.

Button examples

Correct Incorrect

Checkbox

CheckBox – це елемент управління за допомогою якого виможете щось вибрати чи не вибрати . Чекбокс може набувати 3ох станів: вибраний, не вибраний на міксед.

Рекомендації використання:- Старайтесь не розміщати більше 10 чекбоксів на формі.- Групуйте пов`язані за змістом чекбокси.- Розміщайте чекбокси вертикально, а не горизонтально.- Не використовуйте стан ‘mixed’ для відображення третього стану чекбоксу.- При неактивному чекбоксі він повинен коректно відображати свій стан.- Якщо вам потрібно дати змогу вибрати тільки один елемент з групи – використовуйте

radiobuttons а не чекбокс.- Ви можете при потребі робити залежні текст бокси, якщо вони використовують опис

чекбоксу як свій власний. При цьому якщо чекбокс не встановлений то текст боксповинен бути не активний (disabled).

Checkboxes examples

Correct Incorrect

RadioButtonsRadiobutton – це елемент управління за допомогою якого користувач має змогу вибрати тільки один елемент зі списку.

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

користувач повинен вибрати «нічого» тоді додавайте None у список.- Об’єднуйте радіоБаттони у групу.- Не використовуйте радіоБаттони для здійснення команд. Після вибору будь якого

елементу не повинні відуватися ніякі дії. (як виключення це активація підпорядкованих елементів управління)

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

RadioButtons examples

Correct Incorrect

DropDown

DropDown – це контрол який відображає випадаючий список з набором запропонованих значень.

Рекомендації використання:- Якщо вас проблеми з вільним місцем на формі то потрібно використовувати

DropDown замість radiobuttons.- Якщо ви не знаєте що конкретно хоче користувач але у вас є можливі варіанти

то використовуйте editable drop-down list. - Аналонічно до radioButtons розташовуйте елементи у логічному порядку.- Dropdown списки не повинні містити пустих елементів.- Не використовуйте малюнків там де їх не потрібно.- Вибирайте найбільш безпечне (підходяще) значення виране за

замовчуванням.- Текст опису повинен ути або зверху або зліва. (аналогічно до textBoxes)

DropDown examples

Correct Incorrect

Slider

Slider – це контрол допомагає вибрати значення з деяких меж.

Рекомендації використання:- Використовуйте природній напрямок. (якщо наприклад вам треба дати

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

1 хвилина, 1 година, 1 день).- Використовуйте лейбл для опису меж.- Не використовуйте слайден як індикатор прогресу.- Для горизонтально розміщеного слайдеру розміщайте його лейбл з описом

під ним.

GroupBox

GroupBox – це контрол який дозволяє об’єднувати інші елементи у логічні групи.

Рекомендації використання:- Не робіть вкладених груп.- Не ставте контрол біля опису групи.- Не деактивовуйте груп бокси.

GroupBox examples

Correct Incorrect

Tabs

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

Рекомендації використання:- Розміщайте закладки (таби) горизонтально, якщо всі вони вміщаються в 1

рядок та їх кількість менше 7.- Розміщайте таби вертикально, якщо горизонтально не можете.- Переконайтесь що ваші таби виглядають саме як таб контрол а не як якийсь

інший.- Не додавайте іконку до таб. (виключення тільки якщо у нас мало місця і іконка

інформативна)- Не деактивовуйте таби. Вони мають завжди бути активними – деактивовуйте

весь їх контент.- Уникайте довгих імен таб.

Tabs examples

Correct Incorrect

Menus

Menu – це елемент управління який містить головні дії над аплікацією.

Рекомендації використання:- Меню категорій повинно бути менше 10.- Назва меню категорії повинна складатися з одного слова.- Не робіть категорії де менше 2 команд.- Не використовуйте підменю без релаьноїнеобхідності.- Використовуйте контекстне меню тільки до контекстно

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

Toolbars

Toolbar – це графічне представлення командних кнопок оптимізоване для частого використання.

Рекомендації використання:- Розміщайте тулбар тільки над тою зоною для якої його треба

застосовувати.- Тулбари повинні бути вирівняні по лівому краю.- Не дублюйте кнопки на тулбарі.- Кнопки на тулбарах повинні виконувтаи дію одразу.

Toolbars vs menu bars

- Тулбари містять тільки найбільш вживані команди в той час як меню містять

всі команди.

- Безпосередність. Дія у туларі виконується одразу, а дія з меню може вимагати

деяких додаткових дій (наприклад ведення додаткової інформації).

- Легкість використання. Тулбари для дії вимагають 1 кліку, а у меню треба ще

шукати команду.

- Розпізнавання та запам’ятовування. Користувачам набагато легше запам’ятати

кнопку по її розташуванні, формі, іконці у туларі, а нід згадувати де саме вона

знаходиться у меню.

Ribbon bar

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

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

користувач запам’ятовує їх місце розташування.- Кількість ріббон таб не повинна перевищувати 7.

Dialog boxes

DialogBox – це додаткове вікно програми. Використовуйте їх тоді коли ви хочете задати користувачу питання або зобов’язати зробити щось конкретне в даний момент часу

Рекомендації використання:- Не використовуйте скролів на діалогових вікнах.- Не розміщайте тулбари або меню на діалогових вікнах.- У діалогових вікнах завжди повинні бути командні кнопки. Які потрібно

розміщати зправа знизу.- Командні кнопки по здійсненню дії повинні знаходитися лівіше від кнопок по

відміні дії. (виключення кнопка Apply). - Комнадні кнопки повинні закривати діалог.

Layout

Люди (з західних культур) читають зліва на право та зверху вниз.Існує 2 моделі читання:- Поглиблене читання (бонус – розуміння тексту)

- Сканування (швидкість пошуку інформації)

Користувачі не читають вашу програму, вони використовують сканування графічного інтерфейсу, тому проектуйте ваш інтерфейс для «сканування».

LayoutУ більшості випадків користувачі не читають великі блоки тексту (просто пропускають їх).

При читанні тексту і пошуку потрібних елементів управління наступна різниця:

LayoutБагато тексту це погано! Старайтесь організовувати елементи управління таким чином щоб користувачам ніколи не потрібно було читати текст.

Layout

Принципи побудови UI:

- Майте на увазі що коли користувач бачить вікно програми він швидко сканує його у пошуках потріних елементів у наступному порядку:

1. Інтерактивні елементи управління в центрі.

2. Командні кнопки вікна

3. Інтерактивні елементи управління у вікні в цілому.

4. Головні інструкції.

5. Довідкові пояснення.

6. Текстова інформація з “Warning” зображенням.

7. Заголовок вікна.

8. Інший статичний текст та тіло вікна.

9. Виноски (нижній колунтитул).

LayoutПринципи побудови UI:

- Розміщуйте UI елементи які потрібні для початку виконання «завдання» у

верхньому лівому куті або зверху у центрі.

- Розміщайте UI елементи для завершення «завдання» у нижньому правому

куті.

- По можливості поміщайте ключовий текст на інтерактивні елементи

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

- Уникайте розміщення важливої інформації у нижньому лівому куті або за

межами вікна (коли для відображення інформації користувачеві потрібно

користуватися скроллом).

- Уникайте великих блоків тексту. Якщо є така потреба то використовуйте

стиль «інвертованої піраміди»

- Якщо ви використовуєте щось для приваблювання уваги користувача, то

пересвідчіться що це дійсно вартує того і що ваші спроби подіють.

Layout

Принципи наголошування головних елементів UI:

- Розміщайте головні елементи на шляху «сканування».

- Використовуйте елементи які приваблюють увагу: іконки, командні кнопки.

- Для покращення видимості тексту робіть його більшим або використовуйте

bold.

- Використовуйте темний текст на світлому фоні.

- Виділяйте групу елементів відступами.

- Не робіть обов’язковим наведення мишки на елемент щоб побачити що він

важливий.

Layout

Як зробити елементів UI менш наголошеними:

- Розміщайте головні елементи поза шляхом «сканування».

- Розміщайте все що може бути користувачу не потрібне у повсякденінй

роботі у лівому нижньому куті або за нижнім краєм вікна.

- Використовуйте кнопки-посилання замість звичайних кнопок.

- Світлий текст на темному фоні. (нприклад білий текст на сірому або синьому

фоні)

- Не відділяйте елементи відступами.

- Використовуйте «Progressive Disclosure Control»

Як зробити гарний UI

1. Чим простіший UI тим він кращий.

2. Менше кліків мишкою це добре, але не зловживайте цим.

3. Показуйте на екрані тільки те що потрібно користувачу.

4. Групуйте елементи за змістом.

5. Не заставляйте користувача шукати потрібну дію далеко у меню, якщо

вона йому часто потрібна.

6. Старайтеся за замовчуванням робити вікна такого розміру щоб там не

було скролів.

What to check

1. Window title.

2. Window position.

3. Tooltips.

4. Shortcuts.

5. Tab stops.

6. Command buttons access key.

Documentations

1. Controls: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511482.aspx

2. Commands: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511499.aspx

3. Windows: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511259.aspx

4. Layout: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511279.aspx

5. Design Principles: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511328.aspx