Розробка інтерфейсів. Проектування графічного інтерфейсу користувача

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

З чого починається проектування

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

Піраміда потреб продукту

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

Користувальницькі історії та сценарії

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

Розробка керованого інтерфейсу

Можливість самостійно змінювати інтерфейс під потреби користувача існує в продуктах компанії «1С». Наприклад, у системі «1С:Підприємства 8.2», використовуючи вбудовані засоби розробки, адміністратор може програмувати форми, оптимізувати взаємодію між клієнтською і серверною частиною і допрацьовувати платформу. Прикладні рішення доступні не тільки в локальній мережі, але й через інтернет, якщо застосовувати низькошвидкісні канали зв'язку. Розробка інтерфейсу в «1С» відбувається за допомогою вбудованого мови, завдяки якому користувач може динамічно перебудовувати його частини і створювати власні алгоритми для обробки даних. Структура визначається набором команд, розташованих у певній послідовності. У системі немає обмежень за кількістю рівнів вкладеності. У процесі розробки інтерфейсу в «1С 8.3» існує механізм налаштування програми в залежності від прав доступу користувача і його приналежності до команди. Адміністратор може налаштовувати права користувача і видимість певних елементів для різних груп, а сам користувач має доступ до додаткових налаштувань при наявності дозволу від адміністратора.

Психофізіологія сприйняття інтерфейсів

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

Магічні числа 7±2 і 4±1

У 20-х роках минулого століття в лабораторії Белла вченим-психологом Джорджем Міллером був проведений експеримент, в процесі якого групи людей вирішували певні завдання, використовуючи різну кількість об'єктів. У результаті з'ясувалося, що чим менше застосовується об'єктів, тим ефективніше вирішується завдання. Вивчивши результати дослідження, Міллер вивів правило, що 7±2 об'єкта — це максимальна кількість, яку може вмістити короткочасна пам'ять людини. Великих чисел мозок починає уникати для економії ресурсів. Не так давно з'явилося нове дослідження, де йдеться про те, що об'єктів повинно бути не 7±2 а 4±1.

Різниця в обробці об'єктів мозком

Але існує різниця в швидкості обробки інформації при роботі з різними об'єктами. Більш прості обробляються швидше, ніж складні. Завдання з числами вирішуються швидше. На другому місці по швидкості обробки — кольору, на третьому — букви, на четвертому — геометричні форми. Багато також залежить від мотивації. Якщо результат варто того, щоб докласти зусиль, мозок більш охоче вирішує завдання. При недотриманні правил 7±2 в процесі розробки інтерфейсу користувач губиться у великій кількості елементів і не знає, які дії виконувати першими. Він може відмовитися вирішувати дуже складне завдання і покинути сайт або додаток.

Важливість застосування правила 4±1

Користувачеві доводиться вирішувати багато завдань в повсякденному житті, тому інтерфейс програми або сайту не повинен викликати у нього труднощів. Все потрібно вибудовувати передбачувано, логічно і просто. При розробці програмних інтерфейсів необхідно враховувати ресурс людського мозку і не змушувати його витрачати енергію на зайві дії. Правильна інформаційна архітектура і таксономія, коли пункти меню згруповані зрозумілим чином, допомагають користувачеві орієнтуватися і знаходити потрібне. Розробнику потрібно ставити перед ним завдання, для вирішення яких достатньо оперувати малою кількістю об'єктів, після чого можна рухатися далі. Коли користувач дивиться на сторінку, він виділяє приблизно 5 об'єктів, з якими згодом взаємодіє. З них він обирає той, що швидко приведе його до мети. Працюючи з об'єктом, він вирішує задачу і рухається далі. В результаті його енергія буде заощаджена, задача вирішена і користувач залишиться задоволений, отримавши приємний досвід взаємодії з продуктом. Тому застосування правила 4±1 робить інтерфейс краще.

Використання сприйняття кольору і розміру

У людського сприйняття є ще кілька важливих особливостей, які використовуються при створенні інтерфейсів. Наприклад, принцип контрасту дозволяє виділяти значущі об'єкти, роблячи їх більш чіткими і яскравими. Контраст обсягу змушує дивитися на більш великий об'єкт. Виділена кольором кнопка великого розміру привертає до себе увагу швидше, ніж маленька і непоказна. Протилежним чином оформляються кнопки з небажаними діями, наприклад, з відмовою від підписки. Для позначення важливого використовується розмиття фону за ним і повітряна перспектива, що дозволяє управляти фокусом користувача і звертати увагу на конкретний об'єкт. Особливості сприйняття кольорів також використовується в розробці інтерфейсів програм і додатків. Наприклад, червоний для людини означає небезпеку. Тому різні попереджувальні кнопки і знаки, що позначають дії, які не можна скасувати, пофарбовані в цей колір. Жовтий використовується для залучення уваги, зелений і оранжевий асоціюються з чимось безпечним і природним. Але якщо серед користувачів великий відсоток дальтоніків, використовувати колірні контрасти слід з обережністю. Один із способів спрямувати погляд у певну точку — додати зображення людського обличчя. Люди з дитинства привчені розпізнавати обличчя і звертати на них увагу, бо завжди реагують на таку картинку.

Зображення і текст

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

Читаність тексту

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