Human-Computer Interaction

INTERACT 2015: Human-Computer Interaction – INTERACT 2015 pp 106-114 | Cite as

Flat Design vs Traditional Design: Comparative Experimental Study

  • Ivan Burmistrov
  • Tatiana Zlokazova
  • Anna Izmalkova
  • Anna Leonova
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 9297)

Abstract

In the past few years flat user interface design has become the predominating visual style of operating systems, websites and mobile apps. Although flat design has been widely criticized by HCI and usability experts, empirical research on flat design is still scarce. We present the results of an experimental comparative study of visual search effectiveness on traditional and flat designs. The following types of visual search tasks were examined: (1) search for a target word in text; (2) search for a target icon in a matrix of icons; (3) search for clickable objects on webpages. Time and accuracy parameters of the visual search, as well as oculomotor activity, were measured. The results show that a search in flat text mode (compared with the traditional mode) is associated with higher cognitive load. A search for flat icons takes twice as long as for realistic icons and is also characterized by higher cognitive load. Identifying clickable objects on flat web pages requires more time and is characterised by a significantly greater number of errors. Our results suggest replacing the flat style user interfaces with interfaces based on the design principles developed over decades of research and practice of HCI and usability engineering.

Keywords

Flat design Usability Visual search Cognitive load Eye-tracking 

References

  1. 1.
    App, E., Debus, G.: Saccadic velocity and activation: development of a diagnostic tool for assessing energy regulation. Ergonomics 41, 689–697 (1998)CrossRefGoogle Scholar
  2. 2.
    Banga, C., Weinhold, J.: Essential Mobile Interaction Design: Perfecting Interface Design in Mobile Apps. Addison-Wesley, Upper Saddle River (2014)Google Scholar
  3. 3.
    Belveal, R.: Where Have All the Affordances Gone? (2013). http://belveal.net/2013/03/19/where-have-all-the-affordances-gone
  4. 4.
    Crosby, M.E., Iding, M.K., Chin, D.N.: Visual search and background complexity: does the forest hide the trees? In: Bauer, M., Gmytrasiewicz, P.J., Vassileva, J. (eds.) UM 2001. LNCS (LNAI), vol. 2109, pp. 225–227. Springer, Heidelberg (2001)CrossRefGoogle Scholar
  5. 5.
    Di Stasi, L.L., Antolí, A., Cañas, J.J.: Main sequence: an index for detecting mental workload variation in complex tasks. Appl. Ergon. 42, 807–813 (2011)CrossRefGoogle Scholar
  6. 6.
    Enders, J.: Flat UI and Forms (2013). http://alistapart.com/article/flat-ui-and-forms
  7. 7.
    Hou, K.-C., Ho, C.-H.: A preliminary study on aesthetic of apps icon design. In: 5th International Congress of the International Association of Societies of Design Research 2013 (2013). http://design-cu.jp/iasdr2013/papers/1811-1b.pdf
  8. 8.
    Idler, S.: Flat Web Design Is Here to Stay. Usabilla, Amsterdam (2013)Google Scholar
  9. 9.
    Li, C., Shi, H., Huang, J., Chen, L.: Two Typical Symbols in Human-Machine Interactive Interface. Appl. Mech. Mater. 635–637, 1659–1665 (2014)CrossRefGoogle Scholar
  10. 10.
    Nielsen, J.: Windows 8 – Disappointing Usability for Both Novice and Power Users (2012). http://nngroup.com/articles/windows-8-disappointing-usability
  11. 11.
    Noessel, C.: Your Flat Design Is Convenient for Exactly One of Us (2014). http://cooper.com/journal/2014/01/your-flat-design-is-convenient-for-exactly-one-of-us
  12. 12.
    Page, T.: Skeuomorphism or flat design: future directions in mobile device user interface (UI) design education. Int. J. Mob. Learn. Organisat. 8, 130–142 (2014)CrossRefGoogle Scholar
  13. 13.
    Pomplun, M., Reingold, E.M., Shen, J.: Investigating the visual span in comparative search: the effects of task difficulty and divided attention. Cognit. 81, B57–B67 (2001)CrossRefGoogle Scholar
  14. 14.
    Renshaw, J.A., Finlay, J.E., Tyfa, D., Ward, R.D.: Designing for visual influence: an eye tracking study of the usability of graphical management information. In: INTERACT 2003, pp. 144–151. IOS Press, Amsterdam (2003)Google Scholar
  15. 15.
    Schneidermeier, T., Hertlein, F., Wolff, C.: Changing paradigm – changing experience? In: Marcus, A. (ed.) DUXU 2014, Part I. LNCS, vol. 8517, pp. 371–382. Springer, Heidelberg (2014)Google Scholar
  16. 16.
    Stickel, C., Pohl, H.-M., Milde, J.-T.: Cutting edge design or a beginner’s mistake? – a semiotic inspection of iOS7 icon design changes. In: Marcus, A. (ed.) DUXU 2014, Part II. LNCS, vol. 8518, pp. 358–369. Springer, Heidelberg (2014)Google Scholar
  17. 17.
    Velichkovsky, B.M.: Heterarchy of cognition: the depths and the highs of a framework for memory research. Memory 10, 405–419 (2002)CrossRefGoogle Scholar
  18. 18.
    Walker, R.: The ABCs of Website User Experience (2013). http://adpearance.com/blog/the-abcs-of-user-experience
  19. 19.
    Zelinsky, G.J., Sheinberg, D.L.: Eye movements during parallel-serial visual search. J. Exp. Psychol. Hum. Percept. Perform. 23, 244–262 (1997)CrossRefGoogle Scholar

Copyright information

© IFIP International Federation for Information Processing 2015

Authors and Affiliations

  • Ivan Burmistrov
    • 1
    • 2
  • Tatiana Zlokazova
    • 1
  • Anna Izmalkova
    • 1
  • Anna Leonova
    • 1
  1. 1.Laboratory of Work PsychologyLomonosov Moscow State UniversityMoscowRussia
  2. 2.InterUX Usability Engineering StudioTallinnEstonia

Personalised recommendations