바로가기메뉴

본문 바로가기 주메뉴 바로가기
 
 

logo

메뉴

어플리케이션 디자인 단순성이 사용자의 사용경험에 미치는 영향

The Effect of Design Simplicity on Mobile User Experience -Using Eye-Tracker-

초록

일반적인 인터페이스 사용성 연구들에서는 디자인이 단순할수록 사용이 쉽고 효율적이며 사용자에게 좋은 평가를 받을 수 있다고 주장해왔다. 그러나 너무 단순한 디자인은 지루함을 유발하고, 인터페이스 요소 간 구분이 모호해지게 되어 오히려 불편함을 낳을 수 있다는 주장도 존재한다. 따라서 어떤 형태의 디자인이 가장 옳다고 말하기는 쉽지 않다. 특히 기존 연구들은 단순히 구성요소의 수를 달리하여 단순성과 복잡성을 표현한 것과 달리, 스마트폰 환경에서는 화면 안에 담길 수 있는 메뉴의 수가 제한되어 복잡한 UI와 단순한 UI의 차이점을 단순히 구성요소의 수로 정의하기에는 큰 한계가 있다. 색과 그림자는 화면 내 구성요소들을 구분해주는 역할을 하지만 복잡성을 높이는 그래픽 요소이며, 메뉴의 깊이는 수행 과정에서 느껴지는 복잡성에 영향을 주는 요소이자 어플리케이션 유형에 따라 서로 다른 메뉴의 깊이를 지니고 있다. 본 연구에서는 이 세 가지 요소에 따라 지각된 단순성이 달라지는지 확인하고, 수행의 효율성에도 영향을 미치는지 객관적으로 측정하기 위해 아이트래커를 활용, 수행 시간과 더불어 참가자의 응시 횟수와 도약 횟수를 살펴보았다. 연구 결과 수행 시간과 응시 및 도약 횟수에서 변인들 간 유의한 상호작용이 나타났다. 셋 중 하나 또는 두 가지 요소만 포함되었을 때는 수행 시간이 적게 걸리고 응시 및 도약이 적어 효율적인 수행을 보였으나 색, 그림자, 메뉴의 깊이가 모두 높은 수준이거나 모두 낮은 수준일 때는 수행 지표가 비효율적으로 나타났다. 즉 복잡성을 높일 수 있는 요소들은 화면 내 자극들의 구분을 도와 효율적으로 수행할 수 있도록 유도하는 역할을 하지만, 이 요소들 많을 때는 오히려 복잡성을 높여 수행이 떨어진다는 사실을 확인하였다. 특히 본 연구는 구성요소의 수를 디자인 단순성으로 정의한 기존 연구들과 달리 색과 그림자라는 디자인 요소를 중점적으로 하여 단순성을 살펴보았고, 실제 UI 디자인에 적용할 수 있는 실무적인 연구를 진행했다는 점에서 의의가 있다.

keywords
스마트폰, 사용자 인터페이스, 인터페이스 디자인, 디자인 단순성, 아이트래커, smartphone, user interface, interface design, design simplicity, eye-tracker

Abstract

User Interface(UI) must be easy to understand, learn, and use for human-computer interaction. Most UI/UX researchers have demonstrated that the simpler a design is, the more effective use of UI is. But some researchers have argued a simple design may cause boredom and make difficult to distinguish between UI components if it is too simple. So, it is hard to say which one is better. Moreover, previous researches have used stimulus to differ the number of UI components in order to show simplicity and complexity of website design. It could be rather difficult to apply smartphone interface because it has a small display. Colors and shadows help to find target among UI components, but at the same time they increase perceived complexity. The depth of menu is also important for simplicity because smartphone applications have various depth. So, the purpose of this paper is demonstrate that various colors, shadows and the depth of menu affect perceived simplicity and task performance by using eye-tracker. The result shows that the effective performance were appeared in stimuli including either shadows or various colors. A basic type and shadow+color type lead to relatively ineffective performance because it help differentiating components but is too complex and distract attention from target. In other words, relation in simplicity and complexity is revealed U-shaped pattern. This study provide implication that various colors and shadows affect design simplicity and user's performance.

keywords
smartphone, user interface, interface design, design simplicity, eye-tracker

참고문헌

1.

김지숙, 김지호 (2013). “누가 단순한 디자인을 좋아하는가? 감각추구성향이 디자인 선호에 미치는 영향-아이트래커를 이용하여,” 한국심리학회지: 소비자, 광고, 14(1), 177- 201.

2.

김지호, 부수현, 이우철, 김재휘 (2007). “광고의 크기와 위치, 부분 겹침 단서가 소비자의 시각행동에 미치는 영향: 아이트래커를 활용하여,” 한국심리학회지: 소비자, 광고, 8(3), 399-422.

3.

김태양, 신동희 (2014). Facebook 의 사용자경험연구. 한국콘텐츠학회논문지, 14(7), 45-57.

4.

박주환, 한성호, 박재현, 박원규, 김현경, 홍상우 (2012). “모바일 어플리케이션의 사용성 평가 방법 비교 분석,” 대한인간공학회 2012 30 주년 기념 춘계학술대회 제 14 회 한․일 공동심포지엄, 154-157.

5.

오인균, 정석길 (2014). “사용자 경험 (UX) 디자인 프로세스 선행연구 경향에 대한 분석,” 디지털디자인학연구, 14(2), 247-256.

6.

Bevan, N. (2001). International standards for HCI and usability. International Journal of human-computer studies, 55(4), 533-552.

7.

Carroll, J. M. (2013). Human computer interaction-brief intro. The Interaction Design Foundation.

8.

Chae, M., & Kim, J. (2004). “Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones,” Behaviour and Information Technology, 23(3), 165-181.

9.

Cheng, H. I., & Patterson, P. E. (2007). “Iconic hyperlinks on e-commerce websites,” Applied Ergonomics, 38(1), 65-69.

10.

Choi, J. H., & Lee, H. J. (2012). “Facets of simplicity for the smartphone interface: A structural model,” International Journal of Human-Computer Studies, 70(2), 129-142.

11.

Coursaris, C., Swierenga, S., & Watrall, E. (2007). “Effects of color temperature and gender on website aesthetics,” AMCIS 2007 Proceedings, 306.

12.

Cutrell, E., & Guan, Z. (2007). “What are you looking for?: an eye-tracking study of information usage in web search,” In Proceedings of the SIGCHI conference on Human factors in Computing Systems, 407-416.

13.

Djamasbi, S., Siegel, M., & Tullis, T. (2010). “Generation Y, web design, and eye tracking,” International Journal of Human- Computer Studies, 68(5), 307-323.

14.

Galitz, W. O. (2007). The essential guide to user interface design: an introduction to GUI design principles and techniques. John Wiley and Sons.

15.

Gatsou, C., Politis, A., & Zevgolis, D. (2011). “Text vs visual metaphor in mobile interfaces for novice user interaction,” Information Services and Use, 31(3-4), 271-279.

16.

Gatsou, C., Politis, A., & Zevgolis, D. (2011). “From icons perception to mobile interaction,” In Computer Science and Information Systems (FedCSIS), 2011 Federated Conference, 705- 710.

17.

Gatsou, C., Politis, A., & Zevgolis, D. (2014). “An Exploration to user experience of a mobile tablet application through prototyping,” International Journal of Computer Science and Applications, 11(1), 56-74.

18.

Geissler, G., Zinkhan, G., & Watson, R. T. (2001). “Web home page complexity and communication effectiveness,” Journal of the Association for Information Systems, 2(1), 2.

19.

Grief, S. (2013). Flat pixels: the battle between flat design & skeuomorphism, Available online at: http://sachagrief.com/flat-pixels/ (accessed on 12 March 2013).

20.

Hall, R. H., & Hanna, P. (2004). “The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention,” Behaviour and Information Technology, 23(3), 183-195.

21.

Hekkert, P., & Leder, H. (2008). Product aesthetics. Product experience, 259-285.

22.

ISO, W. (1998). 9241-11. Ergonomic requirements for office work with visual display terminals (VDTs). The international organization for standardization.

23.

Ivory, M. Y., Sinha, R. R., & Hearst, M. A. (2001). “Empirically validated web page design metrics,” In Proceedings of the SIGCHI conference on Human Factors in Computing Systems. (pp. 53-60). ACM.

24.

Kammerer, Y., & Gerjets, P. (2010). “How the interface design influences users' spontaneous trustworthiness evaluations of web search results: comparing a list and a grid interface, In Proceedings of the 2010 Symposium on Eye-Tracking Research and Applications, 299-306.

25.

Kleffner, D. A., & Ramachandran, V. S. (1992). “On the perception of shape from shading,” Perception and Psychophysics, 52(1), 18-36.

26.

Lai, C. C., & Wu, C. F. (2014). “Display and device size effects on the usability of mini-notebooks (netbooks)/ultraportables as small form-factor Mobile PCs,” Applied Ergonomics, 45(4), 1106-1115.

27.

Lee, D., Moon, J., & Kim, Y. (2007). “The effect of simplicity and perceived control on perceived ease of use,” AMCIS 2007 Proceedings, 71.

28.

Lee, D., Moon, J., Kim, Y. J., & Mun, Y. Y. (2015). “Antecedents and consequences of mobile phone usability: Linking simplicity and interactivity to satisfaction, trust, and brand loyalty,” Information and Management, 52(3), 295-304.

29.

Lee, S., & Koubek, R. J. (2010). “The effects of usability and web design attributes on user preference for e-commerce web sites,” Computers in Industry, 61(4), 329-341.

30.

Lee, Y., & Kozar, K. A. (2012). “Understanding of website usability: Specifying and measuring constructs and their relationships,” Decision Support Systems, 52(2), 450-463.

31.

Lindsay, P. H., & Norman, D. A. (1977). Human Information Processing.

32.

Lowe, R. K. (2003). “Animation and learning: selective processing of information in dynamic graphics,” Learning and Instruction, 13(2), 157-176.

33.

Maeda, J. (2006). The Laws of Simplicity (Simplicity: Design, Technology, Business, Life).

34.

Manovich, L. (2013). Software Studies, Bloomsbury Academic.

35.

McCarthy, J. D., Sasse, M. A., & Riegelsberger, J. (2004). “Could I have the menu please? An eye tracking study of design conventions,” In People and computers XVII-Designing for society, 401-414.

36.

Miniukovich, A., & De Angeli, A. (2014). “Visual impressions of mobile app interfaces,” In Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational, 31-40.

37.

Miyamoto, S. (2013). The Signaling Value of Product Simplicity. Working Paper, Washington University in St. Louis.

38.

Moore, M. G. (Ed.). (2013). Handbook of distance education. Routledge.

39.

Morris, M. E., & Hinrichs, R. J. (1996). “Web page design: A different multimedia,” Prentice-Hall, Inc.

40.

Moshagen, M., & Thielsch, M. T. (2010). “Facets of visual aesthetics,” International Journal of Human-Computer Studies, 68(10), 689-709.

41.

Nadkarni, S., & Gupta, R. (2007). “A task-based model of perceived website complexity,” Mis Quarterly, 501-524.

42.

Nederhof, A. J. (1988). “Effects of a final telephone reminder and questionnaire cover design in mail surveys,” Social Science Research, 17(4), 353-361.

43.

Nielsen, J. (1993). Usability engineering. London, UK: Academic Press.

44.

Nielsen, J. (1999). Designing web usability: The practice of simplicity. New Riders Publishing.

45.

Nielsen, J. (2006). “F-shaped pattern for reading web content. Alertbox: Current Issues in Web Usability” (http://www.useit.com/alertbox/ reading_pattern. html).

46.

Poole, A., & Ball, L. J. (2006). “Eye tracking in HCI and usability research,” Encyclopedia of Human Computer Interaction, 1, 211-219.

47.

Reber, R., Winkielman, P., & Schwarz, N. (1998). “Effects of perceptual fluency on affective judgments” Psychological Science, 9(1), 45-48.

48.

Reeves, B., & Nass, C. (1996). “How people treat computers, television, and new media like real people and places,” CSLI Publications and Cambridge university press.

49.

Reimer, B., Mehler, B., & Coughlin, J. F. (2012). An evaluation of typeface design in a text-rich automotive user interface.

50.

Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., & Gajos, K. Z. (2013). “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, 2049-2058.

51.

Robertson, G., McCracken, D., & Newell, A. (1981). “The ZOG approach to man-machine communication,” International Journal of Man- Machine Studies, 14(4), 461-488.

52.

Rønne Jakobsen, M., & Hornbæk, K. (2011). “Sizing up visualizations: effects of display size in focus+ context, overview+ detail, and zooming interfaces,” In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1451-1460.

53.

Rumpradit, C., & Donnell, M. L. (1999). “Navigational cues on user interface design to produce better information seeking on the World Wide Web,” In Systems Sciences, Proceedings of the 32nd Annual Hawaii International Conference on. IEEE.

54.

Shi, S. W., Wedel, M., & Pieters, F. G. M. (2013). “Information acquisition during online decision making: A model-based exploration using eye-tracking data,” Management Science, 59(5), 1009-1026.

55.

Shneiderman, B. (1992). Designing the user interface: strategies for effective human- computer interaction (Vol. 3), Reading, MA: Addison-Wesley.

56.

So, S., & Smith, M. (2002). “Colour graphics and task complexity in multivariate decision making,” Accounting, Auditing and Accountability Journal, 15(4), 565-593.

57.

Teo, H. H., Oh, L. B., Liu, C., & Wei, K. K. (2003). “An empirical study of the effects of interactivity on web user attitude,” International Journal of Human-Computer Studies, 58(3), 281-305.

58.

Tse, S., & Tsang, P. (2015). “Create a Visual Distinctness Web Page to Effect on-line Advertising Effectiveness” In Global Perspectives in Marketing for the 21st Century, 498-501.

59.

Turner, A. L. (2014). The history of flat design: How efficiency and minimalism turned the digital world flat.

60.

Wang, Q., Yang, S., Liu, M., Cao, Z., & Ma, Q. (2014). “An eye-tracking study of website complexity from cognitive load perspective,” Decision support systems, 62, 1-10.

61.

Yi, J. C. (2010). “FEATURE User-research-driven mobile user interface innovation: a success story from Seoul” interactions, 17(1), 48-51.

62.

Zhou, A. (2014). “Cybernetics and human- computer interaction: Case studies of modern interface design,” In Norbert Wiener in the 21st Century, IEEE, 1-6.

logo