Особливості проектування графічного інтерфейсу (GUI) веб-сайту

Размещено на http://www.allbest.ru

Особливості проектування графічного інтерфейсу (GUI) веб-сайту

Анастасія Куценко,

аспірантка, асистент кафедри графічного дизайну Київського національного університету технологій та дизайну

Оксана Пасько,

кандидат педагогічних наук, доцент, декан факультету дизайну Київського національного університету технологій та дизайну

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

Ключові слова: графічний інтерфейс користувача (GUI), веб-дизайн, веб-сайт, інформаційні технології (IT), графічний дизайн, адаптивний веб-дизайн. графічний інтерфейс колір

Anastasiia KUTSENKO, Postgraduate, Assistant at the Department of Graphic Design Kyiv National University of Technologies and Design

(Kyiv, Ukraine)

Oksana PASKO,

Candidate of Pedagogic Sciences, Associate Professor, Dean of the Faculty of Design Kyiv National University of Technologies and Design (Kyiv, Ukraine)

SPECIAL FEATURES OF GRAPHICAL USER INTERFACE (GUI) WEBSITE

The article analyzes the graphical user interface (GUI) and the general areas of its application. GUI is used in operating systems, mobile devices, websites, applications, games, and other fields. It has been found that the graphical interface provides users with a visual representation of basic functions and processes, greatly simplifying the use of complex software capabilities for non-professional users. The graphical user interface (GUI) is an important element of modern software products and computer systems. It has been determined that the application of graphic design principles such as typography, color, composition, and sequence contributes to the creation of a visually appealing and user-friendly graphical interface (GUI). Considering the principles of graphic design helps improve interface perception, provide convenient navigation, and facilitate user interaction with the software product. The research highlights the importance of involving users in the design and testing process of the graphical interface (GUI). Involving real users allows obtaining valuable feedback and suggestions for interface improvement. It has been established that the application of methods such as cognitive walkthrough and heuristic evaluation helps identify potential issues and suggestions for interface enhancement. Furthermore, it is found that by considering the needs and preferences of users, designers have the ability to create an intuitive and easy-to-use interface. It is proven that the graphical user interface (GUI) is an integral part of modern software and other technological solutions, providing users with a convenient and intuitively understandable interaction with computer systems.

Key words: graphical user interface (GUI), web design, website, information technology (IT), graphic design, adaptive web design.

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

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

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

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

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

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

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

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

Праця Джона Керрола та Марка Россона досліджує взаємодію між людьми та технологіями в контексті навчання, інновацій та розвитку. Монографія Джейкоба Нільсена та Хоара Лорангера “Prioritizing Web Usability” присвячена питанням веб-сумісності та методикам її покращення.

Публікація Емілі Шейд “Responsive Web Design (RWD) and User Experience” присвячена темі адаптивного дизайну веб-сайтів та його впливу на користувацький досвід.

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

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

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

Дизайн інтерфейсів (UI - User Interface) - це процес створення естетичного та функціонального вигляду програмного інтерфейсу, який дозволяє користувачеві взаємодіяти з програмою або веб-сайтом (Norman, 1988: 1). Дизайн інтерфейсів включає в себе розробку графічного дизайну, забезпечення легкої навігації, організації інформації, визначення інтерактивних елементів інтерфейсу та їхньої поведінки, а також забезпечення користувача зрозумілими та логічними інструкціями.

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

Створення ефективних GUI вимагає спеціалізованих інструментів, які дозволяють дизайнерам створювати візуальний вигляд для функцій програмного забезпечення. Для створення GUI доступний широкий спектр інструментів які пропонують різні функціональності і призначені для різних методів використання. Один з найбільш використовуваних інструментів для створення GUI є Adobe XD. Він служить комплексним середовищем проектування, що дозволяє дизайнерам створювати інтерактивні прототипи інтерфейсів (Adobe, 2021: 2). Інші популярні інструменти включають Sketch, Figma та InVision, які пропонують подібну функціональність та стали стандартними інтструментами для дизайну графічного інтерфейсу веб-сайту.

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

Проектування GUI розширюється за межами традиційних інтерфейсів робочого столу і включає веб-сайти та мобільні додатки, віртуальну і доповнену реальність та голосові інтерфейси. На сьогодні створення GUI для мобільних додатків має важливе значення, тому що мобільний телефон є основним засобом доступу до цифрового контенту для багатьох користувачів (Dix, Finlay, Abowd, Beale, 2004: 3).

Віртуальна та доповнена реальність відкрила нові можливості для дизайну графічних інтерфейсів користувача, які дозволяють користувачам взаємодіяти з віртуальними середовищами та об'єктами у тривимірному просторі (Habgood, Ainsworth, Benford, 2005: 4).

Голосові інтерфейси набули популярності з пристроями Amazon's Alexa та Google Home, які дозволяють користувачам взаємодіяти з програмними додатками та пристроями за допомогою голосових команд (Pruitt, Adlin, 2006: 5).

Процес створення GUI включає важливі дослідні етапи проектування, кожен з яких вимагає уважного розгляду деталей інтерфейсу. Першим етапом проєктування дизайну графічного інтерфейсу (GUI) є проведення досліджень для розуміння потреб та уподобань користувачів. Етап дослідження включає визначення цільової аудиторії та вивчення поведінки, цілей та очікувань користувачів. Саме це допомагає дизайнерам визначити функції, які є пріорітетними для користувачів (Carroll, Rosson, 2016: 6).

Наступний етап планування визначає обсяг проєкту, встановлює цілі та завдання і їх терміни виконання. Планування передбачає співпрацю із зацікавленими сторонами, щоб забезпечити відповідність проєкту зазначеним цілям та очікуванням. Етап планування, також передбачає розробку стратегії контенту та визначення напрямку візуального дизайну (Garrett, 2010: 7).

Етап “wireframing” передбачає створення базової структури інтерфейсу, включаючи розташування контенту, елементів навігації та інших візуальних елементів дизайну (Almiron, Sanchez, Paez, Gomez, 2020: 8). Wireframing зосереджений на структурних аспектах інтерфейсу, а саме навігаційне меню, розташування елементів інтерфейсу (текстові блоки, зображення, кнопки, форми та інші), композиція, функціональність, типографіка і кольорова схема.

Четвертий етап прототипування передбачає створення детальнішої версії інтерфейсу із застосуванням кольорів, типографіки та інших елементів графічного дизайну. Прототипи інтерфейсу дозволяють дизайнерам перевірити функціональність та отримати відгуки від користувачів. Прототипи можуть бути простими статичними макетами або інтерактивними прототипами, створеними за допомогою інструментів, таких як Adobe XD та Figma (Lee, Kim, 2018: 9).

Заключний етап тестування передбачає оцінку використовуваності і ідентифікацію проблем які потребують уваги. Тестування може включати різні методи перевірки використовуваності, а саме евристичну оцінку, когнітивний огляд, A/B-тестування та опитування користувачів (Nielsen, Loranger, 2006: 10). Дотримуючись практик кожного етапу створюються інтерфейси які є не тільки естетично привабливими, а і зручними у використанні.

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

Колір в дизайні GUI веб-сайту має вагоме значення, оскільки він викликає асоціації та впливає на поведінку користувача. Забезпечення контрасту між кольором фону і переднього плану підвищує читабельність тексту для користувачів вебсайту (Lee, Kim, 2018: 11). Використання кольорів також може передавати певний зміст користувачам веб-сайту. У свою чергу червоний колір вказує на помилки, а зелений - на успіх.

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

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

Типографіка - це важливий аспект дизайну GUI, головною метою є досягнення читабельності тексту на сторінках веб-сайту. Для досягнення мети розмір шрифту, інтервал між рядками та міжсимвольний інтервал повинні бути ретельно збалансовані (Almiron, Rodriguez, Calvo, 2020: 12). Для GUI зазвичай вибирають шрифти без засічок, оскільки вони легко читаються на екранах пристроїв. Однак, важливо розглядати контекст в якому буде використовуватися GUI та обирати шрифти які відповідають цільовій аудиторії (Lupton, 2010: 13).

Створення зображень та піктограм також є важливим аспектом дизайну GUI. Зображення та піктограми ефективно впливають на користувача і розкривають значення представленої на веб-сайті інформації. Піктограми та зображення забезпечують високий рівень інтуїтивності та допомогають користувачам зрозуміти функції елементів в інтерфейсі (Shneiderman, Plaisant, Cohen,Jacobs,2016: 14).

Для забезпечення високого рівня інтуїтивності графічні інтерфейси веб-сайтів розробляються з урахуванням параметрів мобільних пристроїв. Масове поширення мобільних пристроїв серед користувачів зумовило попит на адаптивний вебдизайн (Almiron, Rodriguez, Calvo, 2020: 12).

Адаптивний веб-дизайн (Responsive web design - RWD) - це підхід до веб-розробки, який створює динамічні зміни зовнішнього вигляду веб-сайту залежно від розміру екрана та орієнтації пристрою, який використовується для перегляду веб-сайту (Schade, 2014: 15). Крім адаптивності важливим аспектом при створенні графічного інтерфейсу веб-сайту є доступність для всіх користувачів, включаючи користувачів з обмеженими можливостями (Gomez, Sancha, Larrinaga, Diaz de Ilarraza, 2019: 16).

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

Висновки

Отже, стрімкий розвиток інформаційних технологій зумовив розширення сфери графічного дизайну, продуктом діяльності якого є інтерфейс користувача (UI). На основі дослідження визначено поняття «дизайн інтерфейсів користувача (UI)» і встановлено що одним із його основних видів є графічний інерфейс користувача (GUI).

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

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

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

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

Список використаних джерел

Norman, Donald A. (1988). The Design of Everyday Things. Basic Books. ISBN 978-0-465-06710-7.

Adobe. (2021). Adobe XD. URL: https://www.adobe.com/products/xd.html (Last accessed: 10.02.2023) [in English].

Dix A., Finlay J., Abowd G., Beale R. Human-computer interaction (3rd ed.). Pearson. 2004. 861 с.

Habgood M. P., Ainsworth S. E., & Benford S. Endogenous fantasy and learning in digital games. Simulation & Gaming, 36(4). 2005. 483-498 с.

Pruitt J., & Adlin T. The persona lifecycle: Keeping people in mind throughout product design. Elsevier. 2006. 724 с.

Carroll J. M., & Rosson M. B. Learning in Communities: Interdisciplinary Perspectives on Human Centered Information Systems. Springer. 2016. 280 с.

Garrett J.J. The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. 2nd edition. December 26, 2010. 192 c.

Almiron M., Sanchez J. C., Paez C. E., Gomez F. A. A Comparative Study of Tools for Creating User Interfaces for Mobile Applications. In Proceedings of the 15th International Conference on Computer Systems and Technologies. Ruse. Bulgaria. 19-20 November 2020. pp. 126-133.

Lee S., Kim J. Prototyping tools and the UX design process. International Journal of Human-Computer Interaction, 34(11). 2018. рр. 933-944

Nielsen J., Loranger H. Prioritizing web usability. New Riders. 2006. 406 с.

Lee J., & Kim T. A study on the design of mobile application icons using color. Journal of the Korea Society. 2018.

Almiron M., Rodriguez E., Calvo R. A. Usability evaluation of a mobile mental health system: A case study. International Journal of Human-Computer Interaction, 36(10), 2020. pp. 905-915.

Lupton E. Thinking with type: A critical guide for designers, writers, editors, & students. Chronicle Books. 2010. 224 c.

14.Shneiderman B., Plaisant C., Cohen M., Jacobs S. Designing the user interface: Strategies for effective humancomputer interaction. Pearson. 2016. 616 c.

Amy Schade. Responsive Web Design (RWD) and User Experience. NNgroup May 4, 2014. URL: https://www. nngroup.com/articles/responsive-web-design-definition/ (Last accessed: 18.02.2023) [in English].

Gomez J., Sancha G., Larrinaga C., Diaz de Ilarraza A. Web Accessibility Evaluation of Spanish University Websites. Journal of Web Engineering, 18(7-9). 2019. pp. 455-481.

References

Norman, Donald A. (1988). The Design of Everyday Things. Basic Books. ISBN 978-0-465-06710-7.

Adobe. (2021). Adobe XD. URL: https://www.adobe.com/products/xd.html (Last accessed: 10.02.2023) [in English].

Dix A., Finlay J., Abowd G., Beale R. Human-computer interaction (3rd ed.). Pearson. 2004. 861 с.

Habgood M. P., Ainsworth S. E., & Benford S. Endogenous fantasy and learning in digital games. Simulation & Gaming, 36(4). 2005. 483-498 с.

Pruitt J., & Adlin T. The persona lifecycle: Keeping people in mind throughout product design. Elsevier. 2006. 724 с.

Carroll J. M., & Rosson M. B. Learning in Communities: Interdisciplinary Perspectives on Human Centered Information Systems. Springer. 2016. 280 с.

Garrett J.J. The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. 2nd edition. December 26, 2010. 192 c.

Almiron M., Sanchez J. C., Paez C. E., Gomez F. A. A Comparative Study of Tools for Creating User Interfaces for Mobile Applications. In Proceedings of the 15th International Conference on Computer Systems and Technologies. Ruse. Bulgaria. 19-20 November 2020. pp. 126-133.

Lee S., Kim J. Prototyping tools and the UX design process. International Journal of Human-Computer Interaction, 34(11). 2018. рр. 933-944.

Nielsen J., Loranger H. Prioritizing web usability. New Riders. 2006. 406 с.

Lee J., & Kim T. A study on the design of mobile application icons using color. Journal of the Korea Society. 2018.

Almiron M., Rodriguez E., Calvo R. A. Usability evaluation of a mobile mental health system: A case study. International Journal of Human-Computer Interaction, 36(10), 2020. pp. 905-915.

Lupton E. Thinking with type: A critical guide for designers, writers, editors, & students. Chronicle Books. 2010. 224 c.

Shneiderman B., Plaisant C., Cohen M., Jacobs S. Designing the user interface: Strategies for effective human-computer interaction. Pearson. 2016. 616 c.

Amy Schade. Responsive Web Design (RWD) and User Experience. NNgroup May 4, 2014. URL: https://www. nngroup.com/articles/responsive-web-design-definition/ (Last accessed: 18.02.2023) [in English].

Gomez J., Sancha G., Larrinaga C., Diaz de Ilarraza A. Web Accessibility Evaluation of Spanish University Websites. Journal of Web Engineering, 18(7-9). 2019. pp. 455-481.

Размещено на Allbest.ru