Generation of Test Samples for Construction of Dashboard Design Guidelines: Impact of Color on Layout Balance

  • Olena Pastushenko
  • Jiří Hynek
  • Tomáš Hruška
Conference paper
Part of the Advances in Intelligent Systems and Computing book series (AISC, volume 746)


The metric-based evaluation of user interfaces is a promising way to quickly evaluate their usability and other various design aspects. However, development of such metrics usually requires a sufficiently large training set of realistic-looking user interface samples, which might not be always easy to find. This paper describes a workflow of the preparation of such samples. It presents a configurable generator based on the composition of simple widgets into a screen according to a predefined model. It also describes a reusable library for simple creation of widgets using capabilities of the JavaScript framework Vue.js. The application of the implemented generator is then demonstrated on the generation of dashboard samples which are used to show the significance of color in the measuring of the layout balance.


Aesthetics Dashboard Generator Usability guidelines User testing 



This work was supported by The Ministry of Education, Youth and Sports from the National Programme of Sustainability (NPU II) project “IT4Innovations excellence in science - LQ1602”.


  1. 1.
    Altaboli, A., Lin, Y.: Investigating effects of screen layout elements on interface and screen design aesthetics. In: Advances in Human-Computer Interaction 2011, 5 (2011)Google Scholar
  2. 2.
    Bauerly, M., Liu, Y.: Effects of symmetry and number of compositional elements on interface and design aesthetics. Int. J. HCI 24(3), 275–287 (2008)Google Scholar
  3. 3.
    Charfi, S., Trabelsi, A., Ezzedine, H., Kolski, C.: Widgets dedicated to user interface evaluation. Int. J. HCI 30(5), 408–421 (2014)Google Scholar
  4. 4.
    Few, S.: Information Dashboard Design. O’Reilly Media, Sebastopol (2006)Google Scholar
  5. 5.
    Hollingsed, T., Novick, D., G.: Usability inspection methods after 15 years of research and practice. In: Proceedings of the 25th annual ACM international conference on Design of communication, pp. 249–255. ACM, October 2007Google Scholar
  6. 6.
    Holmes, S.: Getting MEAN With Mongo, Express, Angular, and Node. Manning Publications Co, New York (2015)Google Scholar
  7. 7.
    Hynek, J., Hruška, T.: Pixel-based analysis of information dashboard attributes. In: East European Conference on Advances in Databases and Information Systems, pp. 29–36. Springer International Publishing, August 2016Google Scholar
  8. 8.
    Jäkel, F., Singh, M., Wichmann, F.A., Herzog, M.H.: An overview of quantitative approaches in Gestalt perception. Vis. Res. 126, 3–8 (2016)CrossRefGoogle Scholar
  9. 9.
    Johnson, J.: Designing With the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines. Elsevier, Amsterdam (2013)Google Scholar
  10. 10.
    Lindgaard, G., Fernandes, G., Dudek, C., Brown, J.: Attention web designers: You have 50 milliseconds to make a good first impression! Behav. Information. Technol. 25(2), 115–126 (2006)CrossRefGoogle Scholar
  11. 11.
    Ngo, D.C.L., Teo, L.S., Byrne, J.G.: Modelling interface aesthetics. Inf. Sci. 152, 25–46 (2003)CrossRefGoogle Scholar
  12. 12.
    Nielsen, J.: Usability Engineering. Elsevier, Amsterdam (1994)zbMATHGoogle Scholar
  13. 13.
    Nielsen, J.: Usability inspection methods. In: Conference companion on Human factors in computing systems, pp. 413–414. ACM, April 1994Google Scholar
  14. 14.
    Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., Gajos, K.Z.: Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 2049–2058. ACM, April 2013Google Scholar
  15. 15.
    Rogers, Y., Sharp, H., Preece, J.: Interaction Design: Beyond Human-Computer Interaction. Wiley, New York (2011)Google Scholar
  16. 16.
    Salimun, C., Purchase, H.C., Simmons, D.R., Brewster, S.: Preference ranking of screen layout principles. In: Proceedings of the 24th BCS Interaction Specialist Group Conference, pp. 81–87. British Computer Society, September 2010Google Scholar
  17. 17.
    Tractinsky, N., Katz, A.S., Ikar, D.: What is beautiful is usable. Interact. Comput. 13(2), 127–145 (2000)CrossRefGoogle Scholar
  18. 18.
    Tufte, E.R.: The Visual Display of Quantitative Information. Graphic Press, Cheshire (2001)Google Scholar
  19. 19.
    Ware, C.: Information Visualization: Perception for Design. Elsevier, Amsterdam (2012)Google Scholar
  20. 20.
    Zen, M., Vanderdonckt, J.: Towards an evaluation of graphical user interfaces aesthetics based on metrics. In: 2014 IEEE Eighth International Conference on Research Challenges in Information Science (RCIS), pp. 1–12. IEEE, May 2014Google Scholar

Copyright information

© Springer International Publishing AG, part of Springer Nature 2018

Authors and Affiliations

  • Olena Pastushenko
    • 1
  • Jiří Hynek
    • 1
  • Tomáš Hruška
    • 1
  1. 1.Faculty of Information Technology, IT4Innovations Centre of ExcellenceBrno University of TechnologyBrnoCzech Republic

Personalised recommendations