사용자 체험기반 앱 아이콘의 시각적 인지 효율성에 관한 연구 : 중국 스마트 폰 앱의 디자인 요소를 중심으로

손홍양 전북대학교 일반대학원 2021 국내박사

Smartphones and their applications (APP) have important effects on people's life and work. With the rapid development of the smartphone industry, the use of APPs has become commonplace, and icon design of various APPs is also increasing. With the increase of APP functions and the number of users, the cognitive function of icons has become more and more important. User interface (UI) is the medium for users to conduct Human-Computer interaction, which has important effects on the user experience (UX) of APP. As an important component of UI, icon is the first contact point for users to make Human-computer interaction with UI. Icons will play an important role when users experience APPs. The usability of APPs, information exchange and interactive operations are mainly completed through icons. However, when users experience APPs, the following problems often occur: they can't find the icon, they can't see the icon or it's inconvenient to operate the icon. The main reason for these problems is the poor cognitive efficiency of icons. The cognitive efficiency of icons directly affects the usability of APPs, and the cognitive efficiency of icons is mainly reflected by icon design elements. In order to improve users' cognitive efficiency, it is necessary to study the effects of icon design elements on cognitive efficiency. The purpose of this research is to explore the effects of icon design elements on cognitive efficiency and its rules, at the same time, by scoring cognitive efficiency levels to build the optimal groups of icon design elements for UX and to better improve the quality of UX. In this research, the following 10 research hypotheses were set and validated to verify the effects of each icon design element on cognitive efficiency. Hypothesis 1. In the user experience, there is/isn ’ t cognitive impairment in icon cognition; Hypothesis 2. Icon cognitive impairment affects/doesn’t affect APP usability; Hypothesis 3. Icon design elements affect/don ’ t affect cognitive impairment; Hypothesis 4. Icon design elements affect/don ’ t affect the user experience; Hypothesis 5. Icon size has/doesn’t have significant effects on cognitive efficiency; Hypothesis 6. Icon border shape has/doesn’t have significant effects on cognitive efficiency; Hypothesis 7. Icon layout has/doesn ’ t have significant effects on cognitive efficiency; Hypothesis 8. The complexity of icon content has/doesn’t have significant effects on cognitive efficiency; Hypothesis 9. The number of icon colors has/doesn’t have significant effects on cognitive efficiency; Hypothesis 10. Icon semantic expression has/doesn’t have significant effects on cognitive efficiency. Finally, the research data were collected through questionnaire survey and visual search experiment. The research data collected were analyzed by SPSS statistical program to verify the research hypothesis. The findings are as follows. (1) Icon design elements have significant effects on the user's visual cognition and experience intention. Icon design elements have effects on the user's search for icons and their understanding of the meanings. When using APPs, Icon design elements can make it easier for users to identify and have a positive effect on the usability of APPs. The top three icon design elements that affect user cognitive efficiency are Icon Size, Icon Layout, and Icon Semantic Expression. (2) Icon size and border shape elements have significant effects on cognitive efficiency and form the following rules. Of all the groups of size and border shapes, the medium rectangular border icon has the best cognitive efficiency. For large or medium size icons, rectangular border icons have the best cognitive efficiency. But for small icons, borderless icons have the best cognitive efficiency. (3) Icon layout has significant effects on cognitive efficiency and forms the following rules. Among all the groups of icon layout, the "4*6 Layout 3" group has the best cognitive efficiency, while the "6*8 Layout 1" group has the worst cognitive efficiency. In the interior of icon number layouts, the most effective groups are "4*6 Layout 3", "5*7 Layout 3", and "6*8 Layout 4". The overall trend is that the cognitive efficiency of icon layout decreases as the number of icons increases. (4) The complexity of icon content does not always have significant effects on cognitive efficiency. The single factor of content complexity of target icon has no significant effect on cognitive efficiency. However, the interaction of content complexity between interference icon and target icon has significant effects on cognitive efficiency. Cognitive efficiency does not depend on the target icon itself, but on the difference between the content complexity of the interference icons and the target icon. Cognitive efficiency decreases as the content complexity of the interference icon increases. The "target stimulus is complex content - interference stimulus is simple content" group has the best cognitive efficiency. (5) The number of icon colors has significant effects on cognitive efficiency and forms the following rules. The "one-color & inconsistent" group has the best cognitive efficiency. Moreover, the cognitive efficiency decreases as the number of colors increases. In addition, one-color icon has better cognitive efficiency than the icons of other color numbers. There is better cognitive efficiency when the number of colors between interference icons and target icon are inconsistent than when they are consistent. (6) Icon semantic expression has significant effects on cognitive efficiency and forms the following rules. The "graphical semantic expression * text semantic expression" group has the best cognitive efficiency. On the whole, "graphical semantic expression" has better cognitive efficiency than "text semantic expression". In addition, when the semantic expression of interference icon and target icon is completely opposite, cognitive efficiency is better than mixed semantic expression. (7) The cognitive efficiency of icon design elements is graded. Cognitive efficiency is classified into Level Ⅰ-Ⅳ. LevelⅠhas 11 groups, Level Ⅱ has 14 groups, Level Ⅲ has 10 groups, and Level Ⅳ has 9 groups. In addition, the graphical design element group with optimal cognitive efficiency is the "Medium Rectangular border+4*6 Layout3 + Simple content + One-color +Graphical semantic" group. Finally, according to the research conclusions, the corresponding icon design suggestions are put forward. These Suggestions can be helpful to future UI designers and researchers. In conclusion, this research is a useful supplement to the theory and practice of APP icon design. The research conclusions provide useful methods for effectively understanding the information conveyed by icons, improving cognitive efficiency, and enhancing the usability of APPs. Furthermore, it can provide theoretical and practical guidance for future UI designers and similar researchers. Hope it will be used as a useful reference material in UI icon design and web icon design methods 스마트폰과 앱(APP)은 이미 사람들의 일상생활과 비즈니스에 중요한 영향을 미치고 있다. 스마트폰 산업의 급성장으로 앱 사용이 보편화가 되면서 다양한 앱에 따른 아이콘 디자인은 지속적으로 많아지고 있다. 이렇게 앱의 기능과 사용자가 증가한 만큼 아이콘의 인지 기능도 중요해지고 있다. 사용자 인터페이스(UI)는 사용자가 인간과 컴퓨터(Human-Computer) 상호작용을 수행하는 매체이며 앱의 사용자 체험(UX)에 중요한 영향을 미친다. 아이콘은 UI의 중요한 요소이며 사용자가 UI와 상호 작용할 수있는 첫 번째 접점이다. 사용자가 앱을 체험하는데 있어 아이콘은 중요한 역할을 하고있다. 앱의 기능적 측면으로 보면 유용성(Usability), 정보 교류, 기능 조작 등은 주로 아이콘을 통해 이뤄진다. 하지만 사용자는 앱을 체험할 때 아이콘을 찾지 못하거나, 아이콘을 볼 수 없거나, 아이콘 조작이 불편하다는 문제가 자주 발생한다. 이러한 문제들의 발생 원인은 주로 아이콘 인지 효율성 목적에 어긋나기 때문이다. 아이콘의 인지 효율성은 앱의 유용성에 직접적인 영향을 미치며 아이콘의 인지 효율성은 주로 아이콘 디자인 요소에 반영된다. 사용자의 아이콘 인지 효율성 개선을 위해 앱에 들어있는 아이콘 디자인 요소를 정의하여 최적화된 아이콘 디자인에 대해 규정할 필요가 있다. 본 연구의 목적은 아이콘 디자인 요소가 인지 효율성에 미치는 영향과 법칙을 추정하고자 한다. 또한 아이콘 디자인 요소의 인지 효율성 수준을 등급을 매겨 사용자 경험을 위한 아이콘 디자인 요소의 최적 조합을 구축하여 앱의 유용성을 더욱 잘 표현하고 사용자 경험의 질을 높일 수 있도록 한다. 이어서 본 연구는 사용자가 앱에 대한 아이콘의 시각적 인지 효율성을 바탕으로 앱 개발자와 아이콘 디자이너에게 기초 참고자료로 제공하고자 한다. 본 연구에서는 아이콘 각 디자인 요소 별 인지 효율성에 대한 영향을 검증하기 위해 다음과 같이 연구 가설을 설정하여 검증하였다. (1) 사용자 체험에서 아이콘에 대한 인지에는 장애가 있다/없다. (2) 아이콘 인지장애는 앱의 유용성에 영향을 미친다/미치지 않는다. (3) 아이콘 디자인 요소는 인지장애에 영향을 미친다/미치지 않는다. (4) 아이콘 디자인 요소는 사용자 체험에 영향을 미친다/미치지 않는다. (5) 아이콘의 사이즈는 인지 효율성에 영향을 미친다/미치지 않는다. (6) 아이콘의 테두리 모양은 인지 효율성에 영향을 미친다/미치지 않는다. (7) 아이콘의 레이아웃은 인지 효율성에 영향을 미친다/미치지 않는다. (8) 아이콘의 내용 복잡성은 인지 효율성에 영향을 미친다/미치지 않는다. (9) 아이콘의 색상 수량은 인지 효율에 영향을 미친다/미치지 않는다. (10) 아이콘의 의미 표현은 인지 효율에 영향을 미친다/미치지 않는다. 최종 10개의 연구 가설을 제시하였다. 아이콘 시장조사 및 자극물 선정을 통해 설문지를 구상하고 설문조사와 시각적 검색 실험로 연구 데이터를 수집하였다. 그리고 수집한 연구 데이터를 SPSS 통계 프로그램을 통해 데이터를 분석하여 연구 가설을 검증하였다. 연구 결론을 정리하면 다음과 같다. (1) 아이콘 디자인 요소는 아이콘 디자인 요소는 사용자의 시각적 인지와 체험의도에 유의한 영향을 미친다. 아이콘 디자인 요소는 사용자가 아이콘을 찾고 아이콘의 의미를 이해하는데 영향을 주며, 앱 사용시 아이콘 디자인 요소가 사용자가 쉽게 인지 할 수 있으면 앱에 대한 유용성에 긍정적인 영향을 준다. 사용자의 인지에 영향을 미치는 아이콘 디자인 요소 상위3위에는 ‘아이콘 사이즈’, ‘아이콘 레이아웃’, ‘아이콘 의미 표현’이 있다. (2) 아이콘 사이즈와 테두리 모양 요소는 인지 효율성에 유의한 영향을 미치며 다음과 같은 규칙이 형성된다. 모든 사이즈와 테두리 모양의 그룹 중에서는 중형 직사각형 테두리 아이콘의 인지 효율성이 가장 좋다. 대형이나 중형 사이즈 아이콘 중에서는 직사각형 테두리 아이콘이 가장 인지 효율성이 높지만, 소형 아이콘 중에서는 무테두리 모양 아이콘이 가장 인지 효율성이 높다. (3) 아이콘 레이아웃 요소는 인지 효율성에 유의한 영향을 미치며 다음과 같은 규칙이 형성된다. 모든 아이콘 수의 레이아웃의 그룹 중에서는 '4 * 6레이아웃 3'의 인지 효율성이 가장 좋다. 그리고 아이콘 수가 서로 다른 3가지 레이아웃 중에서 가장 좋 인지 효율성은 '4 * 6 레이아웃 3' 그룹, '5 * 7 레이아웃 3' 그룹 및 '6 * 8 레이아웃 4' 그룹이다. 일반적인 추세는 아이콘 수가 증가함에 따라 아이콘 레이아웃의 인지 효율성이 감소하는 것이다. (4) 아이콘 목표 자극의 내용 복잡성의 단일 요소는 인지 효율성에 유의한 영향을 미치지 않으며, 간섭 자극의 내용 복잡성의 단일 요소 및 목표 자극의 상호작용은 인지 효율성에 유의한 영향을 미친다. 인지 효율성은 목표 아이콘 자체가 아니라 간섭 아이콘과 목표 아이콘 간의 내용 복잡성 차이에 따라 결정한다. 그리고 간섭 아이콘의 내용 복잡성이 증가함에 따라 아이콘의 인지 효율성이 감소하는 것이다. '복잡한 목표자극 * 간단한 간섭자극'이라는 그룹의 인지 효율성이 가장 좋다. (5) 아이콘 색상의 수량 요소는 인지 효율성에 유의한 영향을 미치며 다음과 같은 규칙이 형성된다. 모든 아이콘 색상의 수량의 그룹 중에서는 '일색 아이콘 & 간섭자극 색상의 수량 불일치' 이라는 그룹의 인지 효율성이 가장 좋다. 그리고 아이콘 색상의 수가 증가할수록 인지 효율성이 감소하는 경향을 보이다. 또한 '일색 아이콘'의 전반적인 인지 효율성은 다른 색상 수의 아이콘보다 우수하다. 간섭 아이콘과 목표 아이콘의 색상 수가 일치을 때보다 일치하지 않을 때 인지 효율성이 더 좋다. (6) 아이콘 의미표현 요소는 인지 효율성에 유의한 영향을 미치며 다음과 같은 규칙이 형성된다. 모든 아이콘 의미표현의 그룹 중에서는 '목표자극은 그래픽 의미표현 * 간섭자극은 텍스트 의미표현' 이라는 그룹의 인지 효율성이 가장 좋다. 그리고 전체적으로 '그래픽 의미표현'은 '텍스트 의미표현'보다 인지 효율성이 더 우수하다. 또한 간섭 아이콘과 목표 아이콘의 의미표현이 완전히 반대 인 경우 혼합 의미표현보다 인지 효율성이 더 좋다. (7) 본 연구에서는 아이콘 디자인 요소의 인지 효율성에 대한 등급을 규정하였다. 아이콘 디자인 요소의 인지 효율성은 Ⅰ-Ⅳ 등급으로 분류하였다. Ⅰ급에는 11개 그룹, Ⅱ급에는 14개 그룹, Ⅲ급에는 10개 그룹, Ⅳ급에는 9개 그룹이 있다. 또한 사용자 체험감 향상에 가장 유익한 아이콘 디자인 요소 그룹은 최고의 인지 효율을 구축 한 아이콘 디자인 요소 조합은 '중형 사이즈 직사각형 테두리 + 4 * 6 레이아웃 3 + 간단한 내용 + 일색 + 그래픽 의미표현' 이다. 마지막으로 연구 결과에 따라 유용한 아이콘 디자인 제안이 제시했다. 이러한 제안은 미래의 UI 디자이너와 유사 연구자들에게 유용한 도움이 될 수 있다. 따라서 본 연구는 앱 아이콘 디자인 이론과 실습에 대한 유용한 보충 자료입니다. 연구 결론은 아이콘이 전달하는 정보를 효과적으로 이해하고, 인지 효율성을 높이고, 앱의 유용성을 높이는 데 유용한 방법을 제공한다. 그리고 미래의 UI 디자이너 및 유사 연구자들에게 이론적이고 실용적인 지침을 제공 할 수 있다. UI 아이콘 디자인과 웹 아이콘 디자인 방법론적 차원에서 유용한 참고자료로 사용 되기를 바란다.