DOI: https://doi.org/10.20998/2413-4295.2020.03.07

Логіка побудови інтерфейсів у програмному забезпеченні

Leonid Lytvynenko, Olena Skliarenko, Yanina Kolodinska

Анотація


Через постійне зростання інформації у світі з’являються нові виклики не лише в задачах обробки і зберігання великих масивів даних, а й у подачі результатів обробки та аналізу кінцевому користувачу програмних додатків. Основною задачею статті є оглядовий аналіз певних підходів до подачі інформації у вигляді, в якому її сприйняття відбувається швидше шляхом застосування принципів оптимальної візуальної подачі інформації і оптимальної взаємодії з користувачем. У статті розглядаються поняття візуального представлення і візуальної взаємодії та відмінності між ними. Аналізуються основні складові для побудови візуального представлення програмних додатків, в тому числі шрифти та такі їхні характеристики як розбірливість та читабельність. Також розглянуті різні властивості кольорів, наведено класифікацію за усередненим сприйняттям різного забарвлення в навколишньому середовищі та вплив білого простору на читабельність. З точки зору побудови оптимальної візуальної взаємодії можна завжди використати інструментарій A/B тестів, проте, на думку авторів, значно ефективніше проводити тести відносно незначних змін, застосовуючи певні принципи побудови візуальної взаємодії. Серед таких принципів в статті проаналізовані наступні закони: закон Якоба, який вказує на необхідність використання вже сталих і звичних компонентів чи сценаріїв візуальної взаємодії без їх суттєвої зміни, застосовуючи досвід користувача в інших програмних продуктах; закон Хіка, який регулює кількість одночасних опцій, доступних для користувача на одному екрані; закон Гештальта про спільні межі, який регулює способи групування елементів шляхом відмежування області від оточуючих елементів певною межею; закон Гештальта про близькість об’єктів, які знаходяться поруч і сприймаються мозком людини як групи; закон Фітса про важливість легкодоступності основних елементів та необхідності їх розміщення в безпосередній близькості до користувача. Наведено практичні приклади використання вказаних законів.


Ключові слова


програмне забезпечення; інтерфейс; програмний додаток; візуальне представлення (UI); візуальна взаємодія (UX); графічний інтерфейс користувача; тестування програмного продукту; проектування програмного забезпечення

Повний текст:

PDF

Посилання


Roetzel P. G. Information overload in the information age: a review of the literature from business administration, business psychology, and related disciplines with a bibliometric approach and framework development. Bus Res., 2019, 12, P. 479-522, doi: 10.1007/s40685-018-0069-z.

Mirończuk M. M. The BigGrams: the semi-supervised information extraction system from HTML: an improvement in the wrapper induction. Knowl. Inf. Syst, 2018, 54, P. 711-776, doi: 10.1007/s10115-017-1097-2.

Yilmaz H. On color perception. Bulletin of Mathematical Biophysics, 1962, 24, P. 5-29, doi: 10.1007/BF02477863.

Joshua Porter. 52 Weeks of UX. Week 10. Visual Hierarchy. 2010. Available at: https://52weeksofux.com/post/ 443828775/visual-hierarchy.

Kate Moran. The Aesthetic-Usability Effect. 2017. Available at: https://www.nngroup.com/articles/aesthetic-usability-effect/.

Jeff Wang. Crash Course: UI Design. 2017. Available at: https://medium.com/hh-design/crash-course-ui-design-25d13ff60962.

Eppler M. J., Mengis J. The concept of information overload: A review of literature from organization science, accounting, marketing, MIS and related disciplines. The Information Society, 2004, 20 (5), P. 325-344, doi: 10.1007/978-3-8349-9772-2_15.

Color Meaning and Psychology. Available at: https://graf1x.com/color-psychology-emotion-meaning-poster/.

Lin D. Y. M. Evaluating older adults' retention in hypertext perusal: impacts of presentation media as a function of text topology. Computers in Human Behavior, 2004, 20, P. 491-503, doi: 10.1016/j.chb.2003.10.024.

Aesthetic Usability Effect. Available at: https://lawsofux.com.

Lallemand C., Koenig V., Gronier G. How Relevant is an Expert Evaluation of User Experience based on a Psychological Needs-Driven Approach? Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational (NordiCHI ’14), New York, NY, ACM, 2014, P. 11-20, doi: 10.1145/2639189.2639214.

Chomu khoroshij servi`s nemozhlivij bez khoroshogo UI. Available at: https://evergreens.com.ua/ua/articles/ui-trends.html.

Rosie Allabarton. What Is The UX Design Process? A Complete Actionable Guide. 2019. Available at: https://careerfoundry.com/en/blog/ux-design/the-ux-design-process-an-actionable-guide-to-your-first-job-in-ux/.

Jeff Johnson. Designing With the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines, Massachusetts, Morgan Kaufmann, 2014. 250 p, doi: 10.1016/C2012-0-07128-1.

Shai Schwartz. The million dollar presentation. 2017. Available at: https://www.emaze.com/2017/08/28/the-million-dollar-presentation/.

Olguntürk N. Psychological Color Effects. In: Luo R. (eds) Encyclopedia of Color Science and Technology. Springer, Berlin, Heidelberg, 2015, doi: 10.1007/978-3-642-27851-8_230-7.


Пристатейна бібліографія ГОСТ


  1. Roetzel P. G. Information overload in the information age: a review of the literature from business administration, business psychology, and related disciplines with a bibliometric approach and framework development. Bus Res. 2019. 12. P. 479-522. doi: 10.1007/s40685-018-0069-z.
  2. Mirończuk M. M. The BigGrams: the semi-supervised information extraction system from HTML: an improvement in the wrapper induction. Knowl. Inf. Syst. 2018. 54. P. 711-776. doi: 10.1007/s10115-017-1097-2.
  3. Yilmaz H. On color perception. Bulletin of Mathematical Biophysics. 1962. 24. P. 5-29. doi: 10.1007/BF02477863.
  4. Joshua Porter. 52 Weeks of UX. Week 10. Visual Hierarchy. 2010. URL: https://52weeksofux.com/post/ 443828775/visual-hierarchy.
  5. Kate Moran. The Aesthetic-Usability Effect. 2017. URL: https://www.nngroup.com/articles/aesthetic-usability-effect/.
  6. Jeff Wang. Crash Course: UI Design. 2017. URL:  https://medium.com/hh-design/crash-course-ui-design-25d13ff60962.
  7. Eppler M. J., Mengis J. The concept of information overload: A review of literature from organization science, accounting, marketing, MIS and related disciplines. The Information Society. 2004. 20 (5). P. 325-344. doi: 10.1007/978-3-8349-9772-2_15.
  8. Color Meaning and Psychology. URL: https://graf1x.com/color-psychology-emotion-meaning-poster/.
  9. Lin D. Y. M. Evaluating older adults' retention in hypertext perusal: impacts of presentation media as a function of text topology. Computers in Human Behavior. 2004. 20. P. 491-503. doi: 10.1016/j.chb.2003.10.024.
  10. Aesthetic Usability Effect. URL: https://lawsofux.com.
  11. Lallemand C., Koenig V., Gronier G. How Relevant is an Expert Evaluation of User Experience based on a Psychological Needs-Driven Approach? Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational (NordiCHI ’14), New York, NY, ACM, 2014. P. 11-20. doi: 10.1145/2639189.2639214.
  12. Чому хороший сервіс неможливий без хорошого UI. URL: https://evergreens.com.ua/ua/articles/ui-trends.html.
  13. Rosie Allabarton. What Is The UX Design Process? A Complete Actionable Guide. 2019. URL:  https://careerfoundry.com/en/blog/ux-design/the-ux-design-process-an-actionable-guide-to-your-first-job-in-ux/.
  14. Jeff Johnson. Designing With the Mind in Mind, Second Edition: Simple Guide to Understanding User Interface Design Guidelines, Massachusetts, Morgan Kaufmann, 2014. 250 p. doi: 10.1016/C2012-0-07128-1.
  15. Shai Schwartz. The million dollar presentation. 2017. URL:  https://www.emaze.com/2017/08/28/the-million-dollar-presentation/.
  16. Olguntürk N. Psychological Color Effects. In: Luo R. (eds) Encyclopedia of Color Science and Technology. Springer, Berlin, Heidelberg. 2015. doi: 10.1007/978-3-642-27851-8_230-7.