Applications operated on smartphones and other devices with a small user interface area on the screen and a large number of functions and contents will inevitably increase the number of operation procedures and make them more complicated. However, compared to the attention paid to information architecture and interaction in realizing intuitive user interfaces, less attention is paid to icons, and there are many examples where generic icons are used. Therefore, when icons and the functions they represent are different for each application, or when icons are unintelligible because of the distance between the user's mental model and the icons, the cognitive burden on the user is amplified, which may affect usability. We compared the usability of icons, one of the GUI elements, by focusing on their metaphors, and showed that the selection of metaphors that are in line with users' mental models has a positive effect on usability by improving the performance of task completion time and the number of errors. This study clarified the influence of the degree of congruence between the metaphor used and the user's mental model on the usability of icons, one of the GUI elements

Yang, Wonseok

English

UPCommons. Portal del coneixement obert de la UPC

KEER2022, BARCELONA, SPAIN | SEPTEMBER 6-9 2022 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022INFLUENCE OF MENTAL MODEL OF GUI ON USABILITY Wonseok YANG1a a Shibaura Institute of Technology Engineering and Design, 3-9-14, Shibaura, Minato-ku, Tokyo, Japan ABSTRACT Applications operated on smartphones and other devices with a small user interface area on the screen and a large number of functions and contents will inevitably increase the number of operation procedures and make them more complicated. However, compared to the attention paid to information architecture and interaction in realizing intuitive user interfaces, less attention is paid to icons, and there are many examples where generic icons are used. Therefore, when icons and the functions they represent are different for each application, or when icons are unintelligible because of the distance between the user's mental model and the icons, the cognitive burden on the user is amplified, which may affect usability. We compared the usability of icons, one of the GUI elements, by focusing on their metaphors, and showed that the selection of metaphors that are in line with users' mental models has a positive effect on usability by improving the performance of task completion time and the number of errors. This study clarified the influence of the degree of congruence between the metaphor used and the user's mental model on the usability of icons, one of the GUI elements.  Keywords: Mental Model · Metaphor · UI Design · Mobile app 1 INTRODUCTION In recent years, with the development of ICT technology, compact information communication terminals with touch interfaces such as smart phones have become widespread, and the service form dealing with huge amount of information has increased with improvement of communication technology. On the other hand, in an application operated by a smartphone or the like having a small user interface area on the screen, those having many functions and 1 Corresponding author: yang@shibaura-it.ac.jp doi: 10.5821/conference-9788419184849.39  377KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 contents inevitably increase the number of operation procedures and become complicated. Also, with the expansion of the user layer, there is a demand for an intuitive user interface that can be operated without having advanced knowledge. In smartphones, tab-type navigation that facilitated access to frequently used functions became widely used. For this reason, techniques such as utilizing space on small screens and using GUI like icons to alleviate the cognitive burden are beginning to be generalized. However, as the IT environment rapidly changed from skeuomorphism to flat design, elements of the GUI were simplified, and buttons, icons and navigation that looked similar increased. Under such circumstances, information architecture, interaction, etc., have attracted attention in order to realize an intuitive user interface, and what is required of the GUI became more intrinsically central. Compared with the attention to inner objects (Information Architecture, Interaction, Kansei etc.) expressed in the GUI, an example in which a general-purpose icon is used without external attention to icons that only externalize elements and abstract elements stand out. When the icon and the function indicated by it are greatly different for each application, or the icon is far from the mental model of the user in the first place and it is difficult to understand, the icon that should support cognition rather than the cognitive burden There is a concern that it will amplify, so there is a need for research to clarify the influence that it has on usability.  This research aims to clarify the influence of usability on the icons which are part of the user interface, the degree of matching between the metaphor and the mental model owned by the user`s Kansei. In this case, we will conduct research on "music streaming service" among content distribution services that satisfy the requirements of clear user group and high information volume service.  Figure 1. Examples of the correspondence between metaphors and functions  used in current services 2 PROBLEM WITH GUI TO SUPPORT INTUITIVE OPERATION By using graphical elements such as icons and animation, GUI provides intuitive operation that is easy to perceive by providing familiar metaphor for users. As elements of the GUI, there are various things such as words, icons, animation, navigation, etc., but most of them are metaphors of substances and actions in the real world. It is easy to organize as the abstraction degree of the metaphor is similar to the user's past experience and memory, and it can be said to be intuitive. 378KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 For example, a user who perceived an icon using a trash can metaphor on the GUI as shown in Figure 2 has ever seen a garbage box of such a form in the past, or if it has used it, garbage You can understand the system's intention that you can throw away.  Figure 2. Example of an icon using the Trash Can Metaphor  However, since icons are visual information, recognition speed is fast, language problems are small, storage efficiency is excellent, but there are many problems caused by abstracting meaning. One of the problems is that the step of abstracting what you want to express is included in the icon, so the content that the user interprets from the metaphor varies from person to person. In addition, metaphor in GUI has supported intuitive operation by using metaphor modeling the real world, but in recent years there is a computer-specific meaning that there is no suitable metaphor in the real world, "Navigation menu" is often abstracted as shown in Figure. 3.   Figure 3. Icon that are highly abstract and do `not mimic anything in the real world  In addition, there are many cases where the metaphor of the icon showing the same concept differs. For example, it is an example in which there are two metaphors such as a gear and a knob to indicate the same "setting". This is because dependence on metaphor became noticeable as the width of expression of icons decreased since becoming a flat design. (Figure 4)  Figure 4. Examples of icons that represent the same concept but have different metaphors  Furthermore, since GUI design changed rapidly from skeuomorphism to flat design, it was not standardized and it was popularized with various metaphor, and even though services and OS still show the same concept, metaphor still differs A large number of examples of icons exist. As described above, it should have been an icon that should support the recognition by the user, but 379KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 hindering the recognition may adversely affect the operation. However, the existence of the icon itself is still widely familiar and its advantages are also great, so it is considered that it should positively incorporate it. Therefore, understanding that the interpretation of the icon depends on the mental model of the user, and in the case where the designer uses the icon, it does not make a sensory selection from the vague correspondence relationship between the icon and the metaphor, and the environment surrounding the user Staying closer to the design, designing according to the mental model of the user is the first step to realize an intuitive user interface. 3 RESEARCH METHOD In this research, as a logical study, we first discuss the importance of metaphor in user interface and the influence of development of ICT technology on user interface. We will conduct market research and experiments, and clarify mental models of users. Based on the result, a prototype is created and evaluated, then the influence of the metaphor on the usability on usability is clarified. 1) With regard to the main functions of the existing music service, extract the icon and identify the correspondence between the function and the metaphor 2) Visualize the mental model by having the metaphors recalled when word stimulus is given 3) Card sorting and labeling by the dichotomy on the icon and extract design elements 4) Survey questionnaire on mental model conformity degree 5) Consider and compare the GUI based on the above survey  4 SURVEY CONTENTS · ANALYSIS 4.1 Functional survey of existing services  Identifying functions and metaphors of existing music services from 166 services that are ranked higher in ranking from the AppStore genre "Music" and which can be regarded as continuing operation, we focus on existing functions in tab navigation I have identified key functions of music service. Table 1.  Key Functions of Existing Music Services Inspection (N = 166)  380KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 In the results of  Table1, the top four functions "Top", "Search", "Radio", "Library" are regarded as representative functions. Figure 5 shows the trends of extracting metaphors corresponding to each function from all services targeted for survey.  Figure 5. Correspondence relation between metaphor and function (N = 166)  From this result, "house" is the most metaphor representing "Top", "Magnifying glass" was the largest in "Search". Regarding these two, the metaphors are relatively uneven, and the metaphor of "Radio" is bipolarized into "Radio" and "Radio". On the other hand, "Library" was seen as "Book", "Square", "Binder", etc., and the variation was large. This is thought to be related to the abstraction level of the function, for example, the function itself as "Search" is a general and concrete word and the user is familiar with it, while the "Library" It is thought that it is caused by the fact that it shows the concept in service and is in the real world and there is no direct metaphor.  4.2 Extraction of metaphors to be recalled by word stimulus Thirty-one subjects were asked to draw metaphors to remember when giving word stimuli. As a result, there was a tendency similar to metaphors used in existing icons. (Figure 6)  Figure 6. Extraction result of metaphors recalled from words (N = 31)  It seems that a similar tendency was observed because subjects were already in their 20s and men who are already familiar with existing services. However, among these trends, there is also a function with large metaphor variability, and it seems that such selection tends to affect usability by selecting it. 381KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022  4.3 Extraction of design elements by card sorting A total of 60 cards were sorted by 25 subjects, 15 each for the "Top," "Search," "Library," and "Radio" functions, without changing the flow of the experiment itself. This icons were extracted by the KJ method and used in the actual experiment. (Table 3) Table 3. Card sorting result by dichotomy (N = 25)   The results of card sorting are shown in Table.3 for labels when bisected in the first and second hierarchies. The label in the upper hierarchy can be regarded as a large design element that influences the impression of the icon. For items that are painted with light gray in Table3, the part that is unique to that metaphor and that can be said of other general icons is the unfilled white part. Icons used when considering the influence of correspondence between functions and metaphor on usability are experimented using icons unifying these two design elements. By doing this, it is thought that the usability can be compared on the assumption that "difference due to design" is reduced and "difference by metaphor".  382KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 4.4 Mental model matching degree investigation In order to classify low-mental model icons and high icons, two types of icons were prepared for 15 kinds of functions used in the music streaming service "Spotify", and 30 subjects were assigned a mental model by pair comparison the tendency was investigated. (Figure 7)  Figure 7. Mental Model Conformity Survey Result (N = 30)  4.5 Verification of the influence of difference in mental model matching degree on usability In order to clarify the influence on usability due to mental model conformity degree, two prototypes were created based on the experimental result of Figure.7 and a verification experiment was carried out. With regard to the contents of the experiment, the tasks were of two different difficulty levels, and we measured the task achievement time and the number of errors in each prototype. Table 4.  Average task achievement time (N = 30)  Table 5. Average number of errors (N = 30)  383KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 From the experimental results in Tables4 and 5, it is better that the performance of task achievement time and error count is higher for each of the two tasks. 5 CONCLUSION In this research, in order to clarify the influence of user's mental model matching degree on usability on GUI, as an example of "music streaming service", focusing on the icon which operates an application which is one of GUI elements in particular We conducted surveys and experiments. First of all, as a current status survey, we investigated the tendency of correspondence between metaphor and function for icons of existing services. There was a pattern corresponding to plural kinds of metaphor having variation and a pattern deviated to almost one kind of metaphor for one function. The cause was in the abstraction level of the function, and there was a tendency that the function was scattered more abstractly. Furthermore, even if the same metaphor is used, the design of the icon is different, so it was mentioned that equality of cognitive results can`t always be obtained if the metaphors are unified. In addition, to clarify the icons used in existing services so far, but in order to clarify whether they actually exist in the user's mental model or what kind of mental model they have, Experiments were conducted to draw metaphors to be recalled by giving word stimulus. As a result, there was a tendency similar to metaphors used in existing icons. It seems that a similar tendency was observed because subjects were already in their 20s and men who are already familiar with existing services. However, among these trends, there is also a function with large metaphor variability, and it seems that such selection tends to affect usability by selecting it. And in order to carry out the usability test to verify it, since it was touched at the investigation stage as well as the design of the metaphor as well as the design of the icon, the need to eliminate the influence of the design as much as possible from the icon used for this verification There is. As another experiment, prepare a card with an icon of an existing service for the purpose of clarifying which part of the icon is felt as a big design element, and label it into a dichotomous method and its dichotomous group Card sorting was carried out. As a result, "outline shape of icon (round shape, rounded etc.)" and "color area inside icon" were extracted as elements which have a big influence on impression. Therefore, in the usability test, we thought that by using consistent icons for these two points, we can reduce the "difference due to design" from the difference in verification results and regard it as a "difference by metaphor". Based on that, we extract the icon in the user interface of the music streaming service "Spotify" based on the verification prototype used in usability story, and replace it with icons with high degree of mental model match and high icons for verification. Also, based on the results of metaphor corresponding to the function represented by the extracted icon based on the results of two previous experiments "Extraction of metaphor by recalling word stimulus" and "Extraction of design elements by card sorting", replacement I created an icon and conducted a questionnaire on "Mental model match degree preliminary survey" and selected a metaphor for comparison in usability test. In the final usability test, in the mental model "Prototype using icons with low conformity" and "Prototype using icons with high matching degree", two tasks are given, and "achievement time" "error number "Was measured. 384KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022 The above results show that the selection of icons for operating applications, one of the GUI elements, can be improved by selecting a metaphor that is in line with the mental model of the user. The above results show that the selection of a metaphor that is in line with the mental model of the user has a positive effect on usability by improving the performance of task accomplishment time and the number of errors. performance of task accomplishment time and the number of errors, and that it has a positive effect on usability. REFERENCES Takashi KUSUMl.(2002), The Role of Metaphors in User Interface Design : Going from the Desktop to Virtual Space and Returning to Language. Special issue of Japanese Society for the Science of Design, Vol.10 Issue(1), pp.64-73 Toshihisa Doi, Sayoko Tominaga, Toshiki Yamaoka, Yukiko Nishizaki. (2012), The Elements for Structuring the Mental Model in Operation of User Interfaces,  Japanese Society for the Science of Design, Vol.58 Issue 5 pp.5_53-5_62 IWAMA MIKI. (1991), The comprehensive faculty of icons. Drawings, meanings, environments. Review of the Communications Research Laboratory, Vol.37, Issue (4)  pp.479-495 INOUE KAZUO.(2013), Interface design textbook, MARUZEN Jeff Johnson.(2014), Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines, Morgan Kaufmann Norman, D.A. , (1983) : Some observations on mental model. In Genter, D. and Stevens, A. (Eds.), Mental models. Hillsdale, NJ: Lawrence Erlbaum Associates Inc, 244 Ehrlich, K. (1996) : 12. Applied Mental Models in Human-Computer Interaction., In Oakhil, J. and Garnham, A. (Ed): Mental Models IN Cognitive Science ESSAYS IN HONOUR OF PHIL JOHSON-LAIRD, Psychology Press, 227-228 Mitsuo HIROKAWA, Katsuo INOUE, Tatsuya IWAKI, Tomoko KASHIMA. (2014), Fundamental Study on an Intuitive Interface Design Theory - Approach from Viewpoint of Organization and Familiarity, Vol. 13, Issue(5), pp.543-554 ISO 9241-11(1998):Ergonomic Requirements for Office Work with Visual Display Terminals(VDTs) Guidance on Usability, pp.22 J.Nielsen(1976) : Usability Engineering, Morgan Kaufmann bless this stuff. (2017-12-18), Clear App for Iphone http://www.blessthisstuff.com/stuff/technology/apps/clear-app-for-iphone/ Hidehiko OKADA. (2001), Usability and Its Evaluation Methods, Vol. 45 Issue(5), pp.269-276   385KEER 2022 | 9TH INTERNATIONAL CONFERENCE ON KANSEI ENGINEERING AND EMOTION RESEARCH 2022  386

Influence of mental model of GUI on usability

https://upcommons.upc.edu/bitstream/2117/391278/1/Influence%20of%20Mental%20Model%20of%20GUI%20on%20Usability.pdf

Influence of mental model of GUI on usability

Abstract

Similar works

Full text

Available Versions

UPCommons. Portal del coneixement obert de la UPC