ТЕОРІЯ МОДЕЛЮВАННЯ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ

ТЕОРІЯ МОДЕЛЮВАННЯ КОРИСТУВАЦЬКОГО ІНТЕРФЕЙСУ

Інтерфейс користувача (ІК), це засіб зручної взаємодії користувача з інформаційною системою. Сукупність засобів для обробки та відбиття інформації, якнайбільше пристосованих для зручності користувача; у графічних системах інтерфейс користувача, втілюється багатовіконним режимом, змінами кольору, розміру, видимості вікон, їх розташуванням, сортуванням елементів вікон, гнучкими налагодженнями як самих вікон, так і окремих їх елементів, доступністю багатокористувацьких налаштувань. Широке впровадження веб-додатків у всі сфери людської діяльності, за останні десятиліття спричинило стрімке зростання складності користувацьких інтерфейсів. Одночасно зі збільшенням інформації, з якою користувач мав змогу взаємодіяти в системі, збільшилася кількість самих користувачів зі своїми особливостями сприйняття інформації та вимогами щодо зрозумілості та інтуїтивності інтерфейсів. Також зросла кількість апаратних засобів, на яких повинен функціонувати інтерфейс. Зручність використання та користувацький досвід можуть стати вирішальними факторами успіху або невдачі веб-додатків та сайтів. Погано розроблені інтерфейси збільшують кількість помилок користувача, що може дорого коштувати. У результаті гостро постала необхідність моделювання користувацьких інтерфейсів, які б надавали можливість ефективної взаємодії користувача зі складною системою, при цьому не обмежуючи її функціональні можливості [1-6].

Вступ

Інтерфейс користувача, в галузі промислового дизайну, взаємодії між людиною та комп'ютером це простір, де відбувається співпраця між людьми та машинами. Мета цієї співдії полягає у забезпеченні досконалої роботи та керуванні машиною з боку людини, а машина одночасно надає інформацію, яка допомагає ухваленню рішень операторами. Прикладами цієї широкої концепції інтерфейсів користувача, є: • інтерактивні можливості комп'ютерних операційних систем, • ручні інструменти, • операторські засоби керування важким обладнанням • та елементи контролю над технологічними процесами. Конструктивні міркування, що застосовуються під час створення інтерфейсів користувача, пов'язано з такими галузями, як ергономіка, когнітивні науки. Модель ролі відображає головні характеристики ролей, які відіграють користувачі по відношенню до системи. Роль користувача являє собою один із видів відносин, які користувачі можуть мати з веб-додатком. Серед численних можливих аспектів цих відносин є мета і частота взаємодії, обсяг і спрямованість інформаційного обміну тощо. Модель завдання представляє структуру роботи, яку користувачі повинні виконати в результаті взаємодії з системою. Модель змісту, або контенту представляє вміст і організацію користувацького інтерфейсу, необхідного для підтримки визначених завдань. Перелік завдань, які ставляться перед системою, формують випадки використання (use cases). Це окремі послідовності дій, які включають в себе послідовності можливих помилок та взаємодіють з системою. Зазвичай варіанти використання виражають конкретні дії та відповіді системи. Після визначення ролей користувачів майбутнього інтерфейсу та формування випадків використання здійснюється побудова карти випадків використання (task cases map). Карта випадків використання відображає зв’язки між реальними прикладами завдань та представляє собою діаграму, що показує всі випадки завдання та їх взаємозв’язки. Це ефективний інструмент для отримання огляду всіх завдань, які потрібно підтримувати у системі. Крім того, карта варіантів використання та моделі відносин допомагають розробнику інтерфейсу вирішувати, що об’єднати і що розділити в інтерфейсі користувача. Етап розробки варіантів використання завершується побудовою абстрактних прототипів, тобто прототипів, які дозволяють розробникам проектувати загальну організацію та архітектуру користувацького інтерфейсу веб-додатку без візуалізації її компонентів або деталізації макета. Абстрактні прототипи складаються з моделі вмісту інтерфейсу, що описує вміст різних контекстів, у яких користувач взаємодіє з системою, та містить контекстну навігаційну карту, яка показує, як користувачі переходять від одного контексту до іншого під час виконання випадків задач (task cases). Використання абстрактних прототипів замість реальних прототипів на даному етапі проектування має ряд переваг. По-перше, вони надають повну картину загальної архітектури інтерфейсу. По-друге, абстрактний характер моделей дозволяє відкласти прийняття детальних рішень. Абстракція заохочує до творчості в дизайні – досвід показав, що використання абстрактного прототипу як керівництво до побудови остаточного візуального дизайну забезпечує більш інноваційний користувацький інтерфейс [3-6].Здебільшого, мета створення інтерфейсу користувача полягає у тому, щоби зробити інтерфейс, який спрощує , ефективний і приємний та зручний для оператора і для керування машиною так, щоби забезпечити бажаний результат. Це, зазвичай, означає, що оператор повинен застосовувати щонайменші зусилля для досягнення очікуваного підсумку, а також, аби машина зменшувала небажані наслідки для людини. З посиленням використання персональних комп'ютерів та відносним зниженням обізнаності суспільства про важкі машини, термін «інтерфейс користувача», здебільшого, передбачає графічний інтерфейс користувача, тоді як промислові панелі керування та механізми контролю за обладнанням, частіше стосуються (HMI) людино-машинної взаємодії.Інші терміни для інтерфейсу користувача — це інтерфейс «людина-машина» (MMI), коли відповідним пристроєм, є комп'ютерний інтерфейс «людина-комп'ютер».Існує різниця між інтерфейсом користувача й інтерфейсом оператора або людино-машинною взаємодією (HMI).Термін «інтерфейс користувача» часто застосовується стосовно (персональних) комп'ютерних систем та електронних пристроїв. • Якщо мережа обладнання або комп'ютерів, взаємопов'язані через систему MES (Manufacturing Execution System) або Host для відбиття інформації. • Інтерфейс «людина-машина» (HMI) зазвичай, є окремим для однієї машини чи частини обладнання, та є способом взаємодії між людиною та обладнанням/машиною. • Інтерфейс оператора — це спосіб взаємодії, за допомогою якого, можна отримати доступ або керувати багатьма Графічний інтерфейс користувача, що слідує за метафорою стільницімеханізмами, які пов'язані із системою контролю Host. • Система може мати кілька інтерфейсів для обслуговування різних користувачів. Наприклад, комп'ютеризована бібліотечна база даних, може містити два інтерфейси користувача, один для керівників бібліотек (обмежений набір функцій, прилаштований для простоти використання), а інший для працівників бібліотеки (широкий набір можливостей, пристосованих для продуктивності роботи) • Інтерфейс користувача механічної системи, транспортного засобу або промислової установки, іноді називають інтерфейсом «людина-машина» (HMI). Інші терміни, що використовуються, — консоль інтерфейсу оператора (OIC) та інтерфейсний термінал оператора (OIT). Однак це скорочено — терміни стосуються «шару», який відокремлює людину, що керує машиною, із самою машиною[2]. Без прозорого та зручного інтерфейсу, люди не зможуть співдіяти з інформаційними системами. У науковій використовується для позначення того, що краще змалювати як прямий нейронний інтерфейс. Проте, це останнє застосування, спостерігається у зростальному використанні щодо (медичних) протезів — штучного розширення, яке замінює відсутню частину тіла .У деяких випадках, комп'ютери можуть спостерігати за користувачем і реагувати відповідно до його дій без особливих команд. Тут треба застосовувати засоби відстеження частин тіла, й задля цього, дослідно використовуються давачі, які вказують на положення голови, напрямок погляду тощо. Метою роботи є розгляд проектування користувацького інтерфейсу веб системи, а також реалізація даного проектування та розробка фронтенд частини веб системи на прикладі пошуковика по документам Єдиного державного реєстру судових рішень України. В даній роботі описане поняття проектування користувацького інтерфейсу, задачі та проблеми, що вирішує проектування користувацького інтерфейсу, підходи до його проектування, ключові моменти та основні етапи проектування. Детально розглянуті такі етапи проектування як: визначення продукту, дослідження користувачі, створення карт користувацьких історій, прототипування та тестування. На основі аналізу результатів дослідження цільової аудиторії було створено інтерактивний прототип користувацького інтерфейсу пошуковика документів та була розроблена фронтенд частина даної веб системи. Тому при розробці будь-якого цифрового продукту: мобільного додатку, веб-сайту, десктопної програми тощо, красива графіка та захоплюючий зміст не є гарантами успішного результату кінцевого продукту. Тому, першочерговою метою створення будь-якого продукту є створення рішення, яке буде віришувати певну проблему та приносити користь. Важливим аспектом також є створення продукту який буде зручним у користуванні, так як часто користувачі мають багато альтернатив для продуктів та/або послуг, які їм пропонують, для успіху продукту виконується проектування користувацького інтерфейсу з використанням UX підходів. Ці підходи допомагають зрозуміти користувачів під час проведення різноманітних досліджень за допомогою різних методологій, покращити сприйняття та зробити продукт зручним для своїх користувачів. Разом з цим завдяки цьому вдається знизити вартість залучення клієнтів та збільшити частку утримання клієнтів, від чого і виграє бізнес. Метою дослідження є розгляд підходів до проектування користувацького інтерфейсу та їх етапів, та реалізація проектування користувацького інтерфейсу за етапами та власне розробка фронтенд частини веб системи.

Поняття проектування користувацького інтерфейсу

Проектування користувацького інтерфейсу передбачає глибоке розуміння користувачів за допомогою досліджень, упорядкування інформації, візуального дизайну (і багато іншого), і все це з метою задоволення потреб користувачів. Під час проектування користувацького інтерфейсу користувачі стає центром процесу проектування та розробки та встановлення ітеративного циклу досліджень, проектування та оцінки. Більшість користувачів шукають та обирають продукти програмного забезпечення, які мають привабливий зовнішній вигляд та максимально зручні та інтуїтивні в користуванні. Ці критерії, як правило, є результатом ефективного поєднання дизайну досвіду користувача (UX design) та дизайну інтерфейсу користувача (UI design). Чудовий User Interface дизайн створить миттєвий потяг до програми, тоді як гарний досвід роботи змусить користувача ще раз повернутися до користування продуктом. Розробка користувальницького інтерфейсу (UI) - це процес вдосконалення презентації та інтерактивності веб- або мобільних додатків, який фокусується на зовнішньому вигляді програми та її взаємодії з користувачами. Користувацький інтерфейс включає в себе текстові блоки, що читають користувачі, кнопки, текстові поля, форми, зображення та інші візуальні елементів, які бачить та з якими взаємодіє користувач під час використання програми. Також користувацький інтерфейс складається з макету екранів, переходів між сторінками, анімації та кожної мікро-взаємодії з користувачем.Проектування користувацького інтерфейсу (UX/UI) — це процес, який покликаний вирішити проблему користувача за допомогою створення рішень, які забезпечують позитивне враження для користувачів. UX/UI-дизайн передбачає розробку всього процесу проетування продукту, включаючи аспекти брендингу, дизайну, зручності використання та функції, і все це з метою задоволення потреб користувачів. Під час проектування користувацького інтерфейсу користувач фактично стає центром процесу проектування та розробки та встановлення ітеративного циклу досліджень, проектування та оцінки. Більшість користувачів шукають та обирають продукти програмного забезпечення, які є зручними, ітуїтивні в користуванні і мають привабливий зовнішній вигляд. Ці критерії, як правило, є результатом ефективного поєднання дизайну досвіду користувача (UX design) та дизайну інтерфейсу користувача (UI design). Чудовий User Interface дизайн створить миттєвий потяг до програми, тоді як гарний досвід роботи змусить користувача ще раз повернутися до користування продуктом. Розробка користувальницького інтерфейсу (UI) - це процес вдосконалення презентації та інтерактивності веб- або мобільних додатків, який фокусується на зовнішньому вигляді програми та її взаємодії з користувачами. Користувацький інтерфейс включає в себе текстові блоки, що читають користувачі, кнопки, текстові поля, форми, зображення та інші візуальні елементів, які бачить та з якими взаємодіє користувач під час використання програми. Також користувацький інтерфейс складається з макету екранів, переходів між сторінками, анімації та кожної мікро-взаємодії з користувачем. Розробка взаємодії з користувачем (UX) - це процедура поліпшення загального досвіду користувачів при взаємодії з додатком або веб-сайтом для досягнення своєї основної мети - забезпечити максимальне задоволення споживачів, щоб користувачі знаходили в продукті додаткову цінність. UX дизайн складається з багатьох різних підпунктів, такі як: інтерактивний дизайн, інформаційну архітектуру, візуальний дизайн, юзабіліті та взаємодію між користувачем та продуктом. UX підхід включає в себе деякий повторювальний цикл під час розробки продукти, який складається з: дослідження (початкове дослідження користувачів, для розуміння цільової аудиторії та їх можливості, обмеження, цілі та очікування), дизайну (при створенні якого використовується статистика досліджень користувачів, щоб допомогти генерувати ідеї та початковий прототип для реалізації концепцій), оцінки (фіксування відгуків користувачів протягом розробки проекту). Метою етапу аналізу є проаналізувати дані, що були зібрані на попередньому етапі, та ґрунтуючись на них, отримати розуміння того, чого хочуть та потребують потенційні користувачі та чому вони хочуть та потребують саме цього. На основі цього визначається чи були попередні припущення правильними. Цей етап може включати в себе створення персон та user story. Після визначення усіх бажань, потреб та очікувань користувачів від продукту починається етап дизайну. На цьому етапі відбуваються різні види діяльності, які можуть варіюватися в залежності від проекту, починаючи від створення інформаційної архітектури та закінчуючи самим дизайном інтерфейсу користувача. Зазвичай етап дизайну включає в себе створення вайфреймів та прототипу. Останній етап – тестування. Саме цей етап допомагає зрозуміти наскільки розроблений дизайн є зручним та зрозумілим для користувачів. Під час низки ітерацій користувацького тестування продукт перевіряється як і зацікавленими сторонами, так і кінцевими користувачами. [4].Ключові моменти UX дизайну це: інформаційна архітектура, дизайн взаємодії, юзабіліті, вайфрейми, візуальний дизайн. Інформаційна архітектура полягає у задоволенні бізнес-стратегій шляхом проектування інформаційної структури програми або сайту. Її основна роль: забезпечити своїм користувачам зручну навігацію. Мова йде про використання максимальних перестановок та комбінацій для забезпечення найкращого та навігаційного меню верхнього рівня. Дизайн взаємодії - це створення концептуального дизайну, за допомогою якого користувачі взаємодіють з продуктом та / або додатком. Ця взаємодія включає різні елементи, такі як естетика, колір, шрифт, піктограми, зображення, рух, звук, простір, графіка тощо. Юзабіліті це зручність продукту у використанні для користувача. Юзабіліті з’ясовує питання чи користувачі отримують інформацію, яку вони хочуть, 10 використовуючи програму або відвідуючи веб-сайт вперше, і чи зручною для навігації та інших функцій є програма / веб-сайт. Вайфрейм (wireframe) - це зразок програми для перевірки функцій, вигляду та зручності використання програми до її фактичного запуску. Це дешевий спосіб перевірити функціональність та оцінити, чи додаток відповідає поставленим цілям. Візуальний дизайн програми або веб-сайту має визначати бренд компанії. Це не лише вибір текстових шрифтів, кольорової палітри, зображень, іконок, але також визначення впливу зовнішнього вигляду програми на взаємодію від користувачів. Для визначення майбутнього продукту використовується канва ціннісної пропозиції (Value Proposition Canvas) - інструмент, який може допомогти забезпечити позиціонування товару чи послуги навколо того, чого потребує та цінує користувач. Канва формується навколо двох основних елементів - клієнтського профілю та карти цінностей, щоб відобразити ключові аспекти продукту, а саме описати переваги, які отримує клієнт від споживання нашого продукту. Клієнтський профіль складається з: • клієнтських завдань, • клієнтських болів, • користі клієнта. Блок клієнтських завдань (customer jobs) описує ті завдання, які потенційні користувачі намагаються виконати в своєму житті: завдання, які вони намагаються виконати та реалізувати, або ж їх проблеми, які вони хочуть розв’язати чи потреби, які вони бажають задовольнити. Блок клієнтських болів містить в собі болі клієнтів, їх хвилювання, перешкоди, які заважають клієнтам виконувати чи почати виконання якоїсь їх роботи чи гальмує досягнення певних цілей. Також в цьому сегменті описуються ризики – потенційні погані результати, які були отримані через неякісно або не ефективно виконаною роботою чи взагалі відсутністю її виконання. Останній сегмент користувацького профілю – вигоди клієнта (customer gains). Цей блок канви описує результати та користі, які очікують та прагнуть користувачі. Серед вигід клієнта можна виділити такі 4 типи: • потрібна користь (найголовніша вигода, без якої рішення не буде працювати), • очікувані вигоди (основні вигоди, які очікуються користувачами, хоча навіть без них рішення буде працювати), • бажана користь , • неочікувані вигоди (користі, що виходять за межі очікуваних бажань і очікувань клієнтів від рішення). Карта цінностей складається з: • продуктів і послуг, • знеболювальних, • створення переваг. Блок продуктів і послуг (product/service) демонструє всі рішення та послуги, на яких ґрунтується ціннісна пропозиція. Цей перелік рішень має давати змогу конкретному клієнтському сегменту виконати свої завдання та задовольняти їх потреби та бажання. Сектор знеболювальних вказують на те, яким саме чином продукт гамує клієнтський біль, що вказаний у клієнтському профілі. Хороша ціннісна пропозиція продукту ґрунтується на болях клієнта, проте втамувати водночас всі болі неможливо, тож необхідно зосередитися на декількох основних проблемах, які продукт здатен вирішити. Блок створення переваг (product gain creators) складається з переваг, які отримає клієнт від використання продукту. Як і з знеболювальними необхідно зосередитися тільки на декількох перевагах, які є важливими для користувачів, бо задовольнити усі бажання одним рішенням неможливо. При виборі ніші, до якої буде відноситися майбутньо розроблений продукт, було вибрано судову. Після цього було проаналізовано правову сферу та трудності, з якими стикаються люди, що відносяться до неї, при автоматизації процесів. Тож шляхом аналізу та зроблених висновків після спілкування з людьми, що мають відношення до правничої сфери командою була виокремлена проблема, що потребувала рішення: відсутність єдиного зручного та швидкого пошуку по документам Єдиного державного реєстру судових рішень України. Наявні доступні продукти не задовольняють усі потреби користувачів та мають недоліки. Пошук по документах судового реєстру працює повільно та з затримками, має незручний інтерфейс, деякі дефекти, документи 14 відображаються незручно та неструктуровано. Тож рішенням стала розробка власного пошуковику судового реєстру.

Дизайн

Цей процес складається з п’яти етапів: empathize (співпереживання), define (визначення проблеми), ideate (формування ідеї), prototype (створення прототипу), та test (перевірка). Більшість процесів проектування походять саме з цієї концепції. При застосуванні design thinking до дизайну продукту, можна виокремити такі п’ять основних етапів: Визначення продукту Дослідження Аналіз Дизайн Тестування Визначення продукту – один з найважливіших етапів, який відбувається найпершим. Адже перед створенням продукту необхідно зрозуміти його концепцію та ціль його існування. Фаза визначення продукту задає вектор розвитку для фінального продукту. Під час цього етапу відбувається брейншторм концепції продукту. Після визначення продукту проводиться етап дослідження, під час якого проводяться опитування та інтерв’ю, цілю яких є отримання даних для розуміння цільової аудиторії, їх потреб, бажань, цілей, мотивації та поведінки, а також розуміння ніші індустрії, до якої відноситься майбутній продукт. Метою етапу аналізу є проаналізувати дані, що були зібрані на попередньому етапі, та ґрунтуючись на них, отримати розуміння того, чого хочуть та потребують потенційні користувачі та чому вони хочуть та потребують саме цього. На основі цього визначається чи були попередні припущення правильними. Цей етап може включати в себе створення персон та user story. Після визначення усіх бажань, потреб та очікувань користувачів від продукту починається етап дизайну.

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

Дослідження користувачів

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

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

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

Створення

Карта користувальницьких історій це інструмент цілісного проектування продукту на основі призначеного для користувача шляху. Ця техніка використовується для розповіді «історій користувачів» за допомогою слів та малюнків з метою не збору письмових вимог, а досягнення консенсусу, загального розуміння проблем користувачів, щоб врешті створити кращий продукт. В основі створення user story map лежать три основні складові: персона , подорож користувача та користувацька історія . Персона - це опис конкретного користувача, чиї цілі та характеристики відображають потреби більшої групи користувачів, з його завданнями, які він сподівається вирішити за допомогою вашого продукту. Створення персон відбувається на етапі дослідження користувачів. Подорож користувача – це шлях користувача, а саме опис його задач, дій, досвіду, які отримує користувач для досягнення своєї цілі під час використання продукту. Кроки користувача фіксують у зручному форматі, а потім використовують для створення скелету карти користувацький історій. Користувацька історія – це коротке структуроване цілеспрямоване речення про те, чого хоче досягнути користувач від користування продуктом.Користь карти користувацьких історій складається з: збереження фокусу на користувачі, відображення шляху користувача, візуалізація зв’язку дій клієнта за допомогою користувацьких історій, можливість побачити додаткові можливості, що може дати поштовх до появи нових ідей, досягнення консенсусу у стейкхолдерів. Сама карта користувацьких історій складається з трьох рівнів. Скелетом основою є подорож користувача, вона відображається на верхньому горизонтальному рівні. Наступний горизонтальний рівень – користувацькі історії. Вертикальні лінії (ребра карти) складаються з деталей-дій для кожного кроку, які пріоритезовані за важливістю зверху вниз.

Створення вайерфреймів

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

Інтерактивне прототипування

Наступний етап - цe cтворення інтерактивного прототипу. Інтерактивний прототип - це інтерактивна тестова модель, наближена до представлення майбутнього продукту. Він складається з декількох клікабельних екранів (сторінок) з переходами між ними, кожен з яких імітує шлях користувача від початкової точки до кінцевої цілі. Його метою є випробувати користувацький сценарій проектного рішення та зібрати відгуки про нього - як від внутрішньої, так і від зовнішньої сторони - перед побудовою кінцевого продукту. Під час тестування прототипу тестується поведінка потенційних клієнтів під час використання продукту та перевіряється чи виконує продукт їх завдання та чи є виконання їх задач зручним та ефективним. Інтерактивні прототипу дають змогу тестування без використання інженерних ресурсів. Інтерактивні інтсрументи для створення прототипів, що доступні на ринку це Axure RP, Adobe XD, Balsamiq, InVision, JustInMind та Figma. На сьогоднішній день Figma є найбильш поширеним інструментом у користуванні серед дизайнерів інтерфейсів.

Тестування

Тестування інтерактивного прототипу (версії продукту) є дуже важливою частиною проектування користувацького інтерфейсу. Воно складається з поширення прототипу чи вайфреймів серед тестових користувачів та потенційних клієнтів для оцінки життєздатності конструкції протягом усього циклу розробки. Випробування прототипу дозволяє завчасно виявити недоліки та внести зміни до моменту коли продукт почне піде в розробку. А саме це дає можливість замовнику переглянути прототип та висловити свої думки, фокусній групі виявити баги, проблеми, оцінити юзабіліті. Також прототип може бути протестований на відповідність стандартам безпеки або ж відповідним нормам законодавства. Оцінка прототипу також дозволяє оцінити виробничі витрати та у випадку фінансового обмеження вчасно внести зміни в дизайн або ж виробничі процеси задля вибору дешевших альтернатив. Тестування дає можливість поступового опрацювання будь-яких побажань користувача, щоб майбутній користувач міг ефективно та зручно використовувати продукт, що гарантує задоволення користувачів. Прототипування є невід’ємною частиною процесу проектування з двох ключових причин: • Візуалізація - прототипи дають змогу продемонструвати зацікавленим сторонам, як виглядатиме та функціонуватиме кінцевий продукт. • Зворотній зв'язок - прототипи генерують зворотний зв’язок як від членів команди, так і від тестових груп користувачів. Потенційні клієнти можуть взаємодіяти з тестовою моделлю продукту та звернути увагу на елементи або функції, які є незручними або незрозумілими для них. Прототипи мають 4 основні властивості: • Репрезентація - фактична форма прототипу, паперова або цифрова. • Точність - рівень деталізації, досконалість та реалістичність прототипу, тобто точність визначає рівень наближеності до кінцевого продукту. • Інтерактивність - функціональність, що відкрита для користувача, наприклад, повністю функціональна, частково функціональна або доступна лише для перегляду. • Еволюція - життєвий цикл прототипу. Деякі з них швидко створюються, тестуються, викидаються, а потім замінюються на вдосконалену версію. Інші можуть бути побудовані та вдосконалені, в кінцевому підсумку перетворившись на кінцевий продукт. Точність прототипу, як правило, залежить від етапу процесу проектування, наявних ресурсів та цілей. Наприклад, якщо метою є дати клієнту початкове уявлення про сценарій користувача, то може бути достатньо прототипу з низькою точністю. Але якщо мета полягає в тому, щоб запустити прототип фокус-групою і побачити, як потенційні клієнти взаємодіють з ним, то кращим рішенням буде більш естетично привабливий прототип високої точності. Прототипування з низькою точністю - це швидкий та простий спосіб зробити візуальне відображення ідеї програмного продукту. Цілю створення такого прототипу є окреслити користувацький сценарій продукту та перевірити корисність та зручність його функціональності. Вони корисні на ранніх стадіях проектування інтерфейс, коли відбувається лише вибір напрямку розвитку дизайну. Таким чином, прототипи з низькою точністю не настільки візуально продумані та естетичні, як прототипи з високою точністю, проте їх розробка більш швидка, проста та дешевша. Прикладами таких прототипів можуть бути скетчі, мокапи, вайфрейми, тощо. Прототипи високої точності є більш досконалими, ніж їхні аналоги з низькою точністю. Вони передбачають більщ високий рівень деталізації, який нагадує реальний дизайн інтерфейсу користувача: вони мають містити реальний зміст, а також усі стилізовані належним чином функціональні елементи: кнопки, меню та форми. Функціонал прототипів високої точності максимально наближений до функціоналу кінцевого продукту. Такі прототипи зазвичай розробляються на етапі, коли є вже точне розуміння вигляду продукту, та частіше вони є кращим варіантом для тестування зручності використання, ніж прототипи низької точності. Приклади високоточних прототипів це - інтерактивні прототипи, цифрові прототипи, кодовані прототипи. [1-6].

Досконалі інтерфейси мають такі ознаки: 1. Ясність. Інтерфейс дозволяє уникати двозначності, та робить все зрозумілим через мову, потік, ієрархію та метафори для зорових елементів. 2. Виразність. Легко зробити інтерфейс прозорим, завдяки надмірному уточненню та позначенню всього, але це призводить до його роздування, де одночасно на екрані є надто багато елементів. Якщо на екрані занадто багато елементів, то знайти те, що ви шукаєте, важко і через це, інтерфейс стає нудним у використанні. Справжнє завдання у створенні досконалого інтерфейсу полягає в тому, щоб одночасно зробити його і стислим і зрозумілим. 3. Знайомство. Навіть якщо хтось використовує інтерфейс вперше, певні елементи, насправді, можуть бути знайомі. Приклади з реального життя, може бути втілено для передавання значення. 4. Відповідність. Відмінний інтерфейс не повинен бути млявим. Це означає, що він мусить забезпечити користувача хорошим зворотним зв'язком відносно того, що саме відбувається, та чи успішно обробляються введені дані користувача. 5. Послідовність. Важливо, щоби ваш інтерфейс було узгоджено з вашою програмою, оскільки він дозволяє користувачам розпізнавати шаблони використання. 6. Естетика. Хоча вам і не потрібно, створювати привабливий інтерфейс, щоби він виконував своє завдання та робив щось добре, але час, який витрачають користувачі за допомогою вашої програми, буде приємнішим; і більш задоволені користувачі, можуть робити лише добрі справи. 7. Продуктивність. Час — це гроші, і класний інтерфейс повинен зробити користувача плідним, за допомогою ярликів та гарного дизайну. 8. «Прощення». Гарний інтерфейс не повинен карати користувачів за їх помилки, але мусить надавати засоби задля їх усунення.

Види інтерфейсів

• Інтерфейс прямої обробки — це назва загального класу інтерфейсів користувача, який дозволяє користувачам маніпулювати наданими їм об'єктами, з використанням дій, котрі принаймні, відповідають фізичному світу. • Графічні інтерфейси користувача (GUI) приймають вхідні дані за допомогою таких пристроїв, як комп'ютерна клавіатура та миша, й забезпечують графічний висновок на моніторі комп'ютера. У GUI-дизайні, широко застосовуються щонайменше, два різні принципи: об'єктно-орієнтовані інтерфейси користувача(OOUI) й інтерфейси, спрямовані на додатки. • Вебінтерфейси користувача або вебінтерфейси користувача (WUI), які приймають вхідні дані та забезпечують виведення, створенням вебсторінок, котрі передаються Інтернетом і проглядаються користувачем за допомогою програми веббраузера. У нових втіленнях, використовуються: PHP, Java, JavaScript, AJAX, Apache Flex, NET Framework, або подібні технології для забезпечення керування у дійсному часі в окремій програмі, що усуває HMI для виробництва відеопотребу відновлення традиційного веббраузера на основі HTML. Адміністративні вебінтерфейси для вебсерверів, серверів і мережевих комп'ютерів, часто називаються панелями керування. • Сенсорні екрани — дисплеї, які приймають введення, дотиком пальців або стилусом. Використовуються у все більшій кількості мобільних пристроїв і багатьох інформаційних засобах точок продажу, промислових процесах і машинах, пристроях самообслуговування тощо. • Інтерфейси командного рядка, де користувач надає вхідний сигнал, введенням командного рядка за допомогою комп'ютерної клавіатури, а система забезпечує виведення, шляхом відбиття тексту на моніторі комп'ютера. Застосовується програмістами та системними адміністраторами в інженерних і наукових середовищах, а також технічно просунутими користувачами персональних комп'ютерів. • Сенсорний інтерфейс користувача, це графічні інтерфейси, що використовують сенсорну панель або сенсорний екран як об'єднаний пристрій введення і виведення. Вони доповнюють або замінюють інші способи виведення тактичними методами зворотного зв'язку. Застосовується у комп'ютерних тренажерах та інше. • Апаратні інтерфейси — фізичні, просторові інтерфейси, присутні на виробах у повсякденному житті від тостерів, до приладових панелей автомобілів чи кабін літаків. Вони, переважно, є поєднанням ручок, кнопок, слайдерів, перемикачів, джойстиків і сенсорних екранів. • Уважні інтерфейси користувача керують увагою користувача певними способами: вирішення миті переривання користувача, різними видами застережень та рівнем докладності повідомлень, наданих оператору. • Пакетні інтерфейси, є неінтерактивними інтерфейсами користувача, де він заздалегідь, задає всі деталі пакетного завдання для пакетної обробки і отримує висновок, коли всю обробку виконано. Комп'ютер не запитує подальше введення, після початку обробки. • Розмовні інтерфейси дозволяють користувачам керувати комп'ютером за допомогою: звичайного допису, чи голосових команд, замість графічних елементів. Ці інтерфейси часто наслідують людські розмови. • Агенти діалогового інтерфейсу, намагаються персоналізувати комп'ютерний інтерфейс у вигляді анімованої особи, робота або іншого персонажа і представляють взаємодії в діалоговій формі. • Перехресні інтерфейси — графічні інтерфейси користувача, в яких основне завдання полягає у перетині меж, а не зосередженні на вказівках. • Інтерфейси жестів, є графічні інтерфейси користувача, які приймають вхідні дані у вигляді порухів руки або миші, накреслених за допомогою комп'ютерної миші або стилуса. • Голографічні інтерфейси користувача, забезпечують вхід для електронних або електромеханічних пристроїв, передаванням пальця через відтворені голографічні зображення того, що в іншому випадку, було б тактильним керуванням цими пристроями, які вільно плавають у повітрі, виявленим джерелом хвилі та без доторку. • Інтелектуальні інтерфейси користувача, це людино-машинні інтерфейси, які спрямовано на підвищення якості, продуктивності і природності взаємодії між людиною та машиною, за допомогою уявлення, обґрунтування і впливу на моделі користувача, домену, завдання, дискурсу і середовища (наприклад, графіки, природна мова, жест). • Інтерфейси відстеження руху, визначають порухи тіла користувача і втілюють їх у команди, розробляються Apple. • Багато-екранні інтерфейси, використовують кілька дисплеїв для забезпечення більш гнучкої взаємодії. Це часто застосовується у взаємодії з комп'ютерними іграми як у комерційних аркадах, так і останнім часом, на портативних ринках. • Некомандні інтерфейси користувача, які спостерігають за користувачем, аби вивести його / її потреби і наміри, та не вимагають, щоби він створював явні команди. • Об'єктно-орієнтовані інтерфейси користувача (OOUI) засновані на метафорах об'єктно-орієнтованого Сучасна людино-машинна взаємодія ICEпрограмування, та дозволяють користувачам керувати імітованими об'єктами та їхніми властивостями. • Рефлексивні інтерфейси користувача, в яких користувачі контролюють і перевизначають всю систему лише через призначений для користувача інтерфейс, наприклад, для зміни власних командних дієслів. Здебільшого, це можливо лише із дуже дорогими графічними інтерфейсами. • Інтерфейс пошуку — це відбиття вікна пошуку на сайті, а також зорове представлення підсумків пошуку. • Матеріальні інтерфейси, більше зосереджені на сенсорному та фізичному середовищі, або його елементі. • Інтерфейси, орієнтовані на завдання, являють собою інтерфейси користувача, які усувають проблему інформаційного перевантаження метафори робочого столу, та роблять завдання, а не файли, основною одиницею взаємодії. • Текстові інтерфейси користувача є інтерфейсами, які виводять допис. Вони можуть містити інтерфейс командного рядка, або текстове WIMP-середовище. • Голосові інтерфейси користувача, які приймають введення і забезпечують виведення, створенням голосових підказок. Введення користувачем, здійснюється натисканням клавіш або кнопок чи виконується словесно. • Інтерфейс на природній мові (natural language)— застосовується для пошукових систем і на вебсторінках. Користувач вводить запитання і чекає на відповідь. • Інтерфейси з нульовим входом, отримують вхідні дані з набору давачів, а не з запитань користувача у діалоговому вікні. • Масштабовані інтерфейси користувача — це графічні інтерфейси, де об'єкти представлено на різних рівнях масштабу та деталювання, а користувач може змінювати масштаб області перегляду.

Інтерфейси користувача

Успіх залежить не лише від певних чинників: ціни, надійності і терміну служби, але також від керованості та зручності використання. Інтерфейс може бути пояснений інтуїтивно сам собою, без будь-яких зусиль з навчання. Наприклад, попри свою поширеність і простоту, вимикач освітлення не є досконалим для користувача інтерфейсом, а лише компромісом цільової суперечності. Це пов'язано з тим, що перемикач повинно бути встановлено безпосередньо на пристрої, який треба увімкнути, тобто на самому світильнику . З іншого боку, він повинен бути поряд з дверима , завдяки чому, вам не потрібно шукати світловий прилад у темряві.Сенсорний екран є настільки ж відомим, але і недосконалим інтерфейсом. Наприклад, за натискання на значок екрану для електронної пошти, викликається програма, яка витягує поштові повідомлення. Але під час торкання іконки, палець затуляє сам значок. Зазвичай, це не викликає перешкод, але точне креслення або запис пальцями на екрані, неможливі.Щодо довговічних виробів, інтерфейси користувача, удосконалюються протягом багатьох років. Наприклад, два перемикачі, які ще було поширено на початку 2000-х років, стали відсутніми в аудіо- або відеоплеєрах: дію перемикачів для переходу на попередню чи наступну доріжку було вбудовано у вимикач для швидкого перемотування. Через це, інтерфейс користувача став більш складним, оскільки кожна з обох кнопок, тепер виконує два завдання. Під час розроблення інтерфейсів користувача, як і у цьому прикладі, скорочення грає головну роль: звуження управління складною машиною лише до кількох елементів керування, може полегшити базову працездатність, але зазвичай, не виправдовує складність.За допомогою дуже складних операційних систем сучасних комп'ютерів, такі цільові суперечності вирішуються двома категоріями інтерфейсів користувача: один показує йому значки - паперовий кошик, теки та інше, тобто те, що він може відразу зрозуміти і використовувати без будь-яких зусиль з вивчення , наприклад натискання «Посилання» відкриває цільову вебсторінку. Інший вид, дозволяє йому глибоко зануритися до комп'ютерної системи через інтерфейс командного рядка, але вимагає великої навчальної роботи. Наприклад, taskkill / F / IM iexplore.exe, завершує усі процеси, пов'язані з Internet Explorer у системі. Широке впровадження веб-додатків у всі сфери людської діяльності, за останні десятиліття спричинило стрімке зростання складності користувацьких інтерфейсів. Одночасно зі збільшенням інформації, з якою користувач мав змогу взаємодіяти в системі, збільшилася кількість самих користувачів зі своїми особливостями сприйняття інформації та вимогами щодо зрозумілості та інтуїтивності інтерфейсів. Також зросла кількість апаратних засобів, на яких повинен функціонувати інтерфейс. Зручність використання та користувацький досвід можуть стати вирішальними факторами успіху або невдачі веб-додатків та сайтів. Погано розроблені інтерфейси збільшують кількість помилок користувача, що може дорого коштувати. У результаті гостро постала необхідність моделювання користувацьких інтерфейсів, які б надавали можливість ефективної взаємодії користувача зі складною системою, при цьому не обмежуючи її функціональні можливості [1-5]. Одним з ефективних підходів до моделювання користувацьких інтерфейсів є орієнтований на використання дизайн (usage-centered design, або UCD). Usage-centered design – це систематичний процес із використанням абстрактних моделей для проектування мінімальної, найпростішої системи, яка повністю підтримує всі завдання, які необхідно виконати користувачам. Даний метод, є перевіреним промисловим підходом, який використовується для проектування різноманітних користувацьких інтерфейсів, починаючи від системи промислової автоматизації та побутової електроніки до банківської справи та компаній зі страхування [2-7]. Інтерфейси користувачів у мобільних пристроях HTC Sense та MIUI Оскільки це спрощений процес, керований простими моделями, він легко масштабується і використовується в проектах з невеликими трудовими ресурсами.

Висновок

Для проектування користувацького інтерфейсу був використаний підхід «design thinking», що забезпечило ефективне та швидке проектування та зручний користувацький інтерфейс. Були описані та проведені такі етапи проектування як: визначення продукту, дослідження користувачів, створення user story maps, прототипування, а саме створення вайфреймів та інтерактивного прототипу, та тестування. Аналіз результатів кожного з етапів дав змогу зробити висновки щодо завдань та потреб потенційних користувачів та покращити не тільки інтерфейс, а й функціонал веб системи, а саме: було розроблено групування знайдених документів при пошуку по справам, розроблені пошукові сніпети документів з виділенням пошукового запиту, сталий вигляд форматування документів з візуальним виділенням деяких ключових елементів та розроблений пріоритезований пошук. У практичній частині роботи була реалізована фронтенд частина MVP веб системи пошуковика. Для цього були обрані такі засоби розробки як шаблонізатор Jinja2, Bootstrap, SASS, jQuery та JS, та їх вибір був обґрунтований у роботі. Розроблена веб система була задеплоєна з використанням Heroku. Проектування користувацького інтерфейсу є важливим та необхідною частиною розробки веб системи. Правильне проектування користувацького інтерфейсу допомагає зрозуміти бажання та реальні потреби потенційного клієнта, що дає змогу не тільки зробити продукт кращим, більш корисним та цікавим для користувача, а й ефективно підійти до самої розробки продукту, зробивши її менш енерго- та ресурсозатратною.Розробка користувацього дизайну є важливим етапом у створенні продукту, який за допомогою мотодик та дослідження допомагає не лише візуалізувати майбутній продукт, а і краще визначити проблематику і потреби з якими стикаються користувачі, на основі цих даних дизайнери покликані запропонувати рішення цих проблем і потреб. Також хороша розробка дизайну дозволяє зекономити багато ресурсів для замовника, як в фінансовому плані так і в часовому, що безумовно э важливим чинником у створенні комерційного продукту.

Список літератури

1. Проектування інформаційних систем: Загальні питання теорії проектування ІС : навч. посіб. / О.C. Коваленко, Л.М. Добровська. – Київ : КПІ ім. Ігоря Сікорського, 2020. – 192с.

2. Проектування інтерфейсу користувача [Електронний ресурс]: навчальний посібник / А. П. Бондарчук, О.А. Золотухіна. – Київ: Державний університет телекомунікацій, 2017. – 110 с.

3. Проектування та моделювання програмного забезпечення сучасних інформаційних систем / Г.В. Табунщик, Т.І. Каплієнко, О.А. Петрова − Запоріжжя : Дике Поле, 2016. – 250 c. Додаткова

4. Проектування інформаційних систем: навчальний посібник / В.С. Авраменко, А.С. Авраменко. – Черкаси: Черкаський національний університет ім. Б. Хмельницького, 2017. – 434 с.

5. Речинський А. В., Сергєєв С. Ф. Розробка інтерфейсів користувача. Юзабілітітестування інтерфейсів інформаційних систем: навч. посібник. – СПб.: Вид-во Політехн. ун-ту, 2012. - 145 с. 6. Anderson J., Fleek F., etc. Integrating Usability Techniques into Software Development. – IEEE Software, 18 (1), January/February, 2001. 7. Cloyd M.H. Designing User-Centered Web Applications in Web Time. – IEEE Software, 18 (1), J

Для студентів старших років навчання. Основною метою є ознайомлення студентів з основами проведення наукових досліджень. Підготував Огірко І.В.