Conference PaperPDF Available

GUI design based on cognitive psychology: Theoretical, empirical and practical approaches

Authors:
Chee Kit Yee
Chee Kit Yee
Chee Kit Yee
  • This person is not on ResearchGate, or hasn't claimed this research yet.
Choo Seah Ling
Choo Seah Ling
Choo Seah Ling
  • This person is not on ResearchGate, or hasn't claimed this research yet.
Wong Seok Yee
Wong Seok Yee
Wong Seok Yee
  • This person is not on ResearchGate, or hasn't claimed this research yet.
Wan Mohd Nazmee Zainon at University of Science Malaysia
Wan Mohd Nazmee Zainon
Download full-text PDF
Read full-text
Download citation

Abstract and Figures

This paper presents a study on the effectiveness of applying cognitive psychology in designing the graphical user interface (GUI). The study focuses on three main aspects of cognitive psychology which are the human memory limitation, perception, and attention. Based on these aspects, some related and well defined principles had been explored. Experiments had been carried out in order to find out whether the current GUI design follows those well defined principles in fulfilling the requirements of the aspects. Survey had also been conducted to find out the user preferences in GUI. Preliminary evaluation suggests that the cognitive psychology theories presented in this study were considers as an important aspect when designing an effective GUI.
Figures - uploaded by Wan Mohd Nazmee Zainon
Author content
All figure content in this area was uploaded by Wan Mohd Nazmee Zainon
Content may be subject to copyright.
Content uploaded by Wan Mohd Nazmee Zainon
Author content
All content in this area was uploaded by Wan Mohd Nazmee Zainon on Feb 21, 2021
Content may be subject to copyright.
GUI Design Based on Cognitive Psychology:
Theoretical, Empirical and Practical Approaches







  
 This paper presents a study on the effectiveness of
applying cognitive psychology in designing the graphical user
interface (GUI). The study focuses on three main aspects of
cognitive psychology which are the human memory limitation,
perception, and attention. Based on these aspects, some related
and well dened principles had been explored. Experiments
had been carried out in order to nd out whether the current
GUI design follows those well dened principles in fullling the
requirements of the aspects. Survey had also been conducted to
nd out the user preferences in GUI. 
  
  
 
Keywords- Cognitive Psycholo, Graphical User Inteace
(GUI), Human Computer Interaction (HCI).
 

        
       

 
      
      
 
 
     
        
  
      
      
        
 
         

        

   
        
       
       
  
      
       
 
        
     

 
  
   

        

 
  
 
        
        
       
 
  
        

       
      
      

    
         

        
 
          
       
     

     
           
   

 
    
       
       
       
   

        
        
        
        
           
          
      
       
        
      
         
         
         
   
 

     
         
      
      
      

   
       
    
            
   
         
         
       
        
        
       
        
 
 
       
      

           
           
    
        
        
 

      

        

         

     
      

         

     
 
  

         
        

       
      

        

       
       
 
         
       
        
      

 
       
        
          
         
          
        
   
        
        
        
         
        
           
        
        
   



   
 
       
          
       
       
     
         
        
        

          
        
       

        
         
          
         

 
      
         
      
   
       
      
         
   
          
       
        
           
           
        
       
         
         
   
          
       
      

 
 
       
        

       
   

       
       
  
         
        
       
        
      
         

         
       
       
   
        

 
   
  

  
        
         
          
         
        
         
        
         
        
       
       
      
          

      
         
       
       
     
   
        
        
       
        

 
         


 
Placement of content based on human visual elds
according to brain peripheral
    
  
    
  
Background colour used in design GUI
     

     

Colour used to grab human's attention
     

  

Placement of ttual size and colour used
       
 
       
 
 
 

  


 Issue of Inuences
 
        
       
         
           
        
       
        

        
         
        
         
          
       

   
        
        
      

 


 
 
  

   


 
  
         
         
        
         
      
   
       


 
 
 
 
 
 
 









  
  
 
        
        
       
         
 
         
        
 
 
       
      
       
        
  
   

     
     
       
       

       
        
 
        
         

 
         
         
     
      
       

   
        
       

         
       
        
     
        


    
  
     


        
 
        
       
     
  
        
       
 
           
         
       
     
          
      

     

           
       
        


         
      
     

 
... In general, humans are able to store 7 ± 2 items or chunks of information in their short-term memory. Fewer chunks of information increase the probability that users will need less cognitive effort to comprehend a representation [136]. See, for example, Figure 10a-b. ...
... Users can suffer from color blindness. Consequently, red and green should not be used together [136]. ...
View
... The information included in the training videos was short and straight forward; reducing the amount of information per screen also reduced the data to be memorised by the user, which decreased the users' cognitive load (Yee et al., 2012). According to the taxonomy table created by Anderson (2005), this training applied the analysis cognitive process and a conceptual level of knowledge-users were allowed to explore the different functions available and see how these functions worked. ...
... The aim of the hierarchy instruction was to offer a visual aid to help users understand the relationship between styles and the inheritance function. This follows the schema theory (Yee et al., 2012), which proposes that mental representations of people or objects should be used to support understanding of how knowledge can be used or represented. The hierarchy training, which provided a hierarchy tree template to simplify mapping, could improve user perceptions. ...
View
... The information included in the training videos was short and straight forward; reducing the amount of information per screen also reduced the data to be memorised by the user, which decreased the users' cognitive load ( Yee et al., 2012). According to the taxonomy table created by Anderson (2005), this training applied the analysis cognitive process and a conceptual level of knowledge-users were allowed to explore the different functions available and see how these functions worked. ...
... The aim of the hierarchy instruction was to offer a visual aid to help users understand the relationship between styles and the inheritance function. This follows the schema theory ( Yee et al., 2012), which proposes that mental representations of people or objects should be used to support understanding of how knowledge can be used or represented. The hierarchy training, which provided a hierarchy tree template to simplify mapping, could improve user perceptions. ...
An empirical study to develop mental models for the functionality of an application: two training types using styles inheritance in Microsoft word.
Thesis
  • Dec 2017
I certify that the information on this cover sheet is correct. I certify that the content of this dissertation is my own work, and that my work contains no examples of misconduct such as plagiarism, collusion, or fabrication of results. Candidate's signature ………………………………………………………………. 2 An empirical study to develop mental models for the functionality of an application: tow training types using styles inheritance in Microsoft word.
View
... According to Gestalt principles, similar elements should be placed together to reduce complexity, as indicated by Faisal et al. in [21]. Designers have employed these principles while creating instructional screen designs [70,71]. According to research, Gestalt principles can increase a system's UID [72,73], increase an application's usability [69], and lessen the conceptual load on learners [74]. ...
Investigating the User Interface Design Frameworks of Current Mobile Learning Applications: A Systematic Review
Article
Full-text available
  • Jan 2023
Online learning has replaced traditional face-to-face classroom instruction in the educational system. Learning via mobile, or mobile learning, is one of the solutions that most learners use since it is less expensive and easier to adopt on the go. However, in addition to hindering information transfer, issues such as small screen size and bad interface design can also make learning more cognitively demanding. This paper presents a systematic literature review on the user interface design of mobile learning applications based on the preferred reporting items for systematic reviews and meta-analyses approach. Articles selected for this study were published after the COVID-19 outbreak, between 2020 and 2022. The goal of this research was to outline the current user interface design criteria and guidelines applied when designing a mobile learning application and explore how these factors affect the learner’s cognitive load. It also aimed to identify potential research gaps and future opportunities in the creation of a UID guideline/framework for mobile learning. The findings of this study may be used as a guideline for designers, developers, educators, instructors, and others who are interested in creating a mobile learning application that provides learners with an effective knowledge and mobile learning experience.
View
... In a similar manner, over the years the model has been systematized into different evaluative processes for digital systems, originating from interaction design principles as well as the judgement and knowledge of experts in the field. From an educational perspective, various authors have performed analyses of the resources available for children with the objective of determining their quality and suitability for children, not only from a usability and design perspective (Rockman, 2010;Watlington, 2011); but also with regard to the educational potential of the applications (Shuler, 2009;Goodwin and Highfield, 2012); with a view to their appropriateness for the cognitive development of the child (Guernsey, 2013); as well as a focus on perception, attention and the limitations of memory (Yee, et al, 2012). Recently, a study of the interaction design of 100 tablet and smartphone apps for children under 8 was carried out by Crescenzi and Grané (2016), allowing for the study of interactive resources while taking into account a child's development and its implications in the area of visual design, interactive systems, organization and navigation, mental models and cultural references, accessibility, legibility and sound. ...
Touch Gesture Performed by Children under 3 Years Old When Drawing and Coloring on a Tablet
Article
Full-text available
  • Nov 2018
Children under 3 are enthusiastic users of mobile devices and have the ability to emulate a number of the gestures adults use on touch screens, according to the literature on Child-Computer Interaction (CCI). Nevertheless, relatively few studies have focused on the spontaneous interaction of children with screens. The objective of this empirical research is to study unstructured interactions of children under 3 with two apps that permit free drawing and coloring. Observation includes the first gesture used for interaction and the use of on-screen tools (e.g. color palette). Twenty-one participants aged 14 to 33 months (average of 24 months) were recorded playing with free drawing and coloring apps on a tablet using a non-invasive method in a natural context (two nursery schools, one in London and one in Barcelona). Analysis of the data gathered showed that children under 3 adapt their gestures to the content of the apps and suggests that the use of tools may begin from 24 months. Based on those results, the content of an additional 32 apps for drawing and coloring aimed at children from zero, one or two years old were then reviewed. The analysis highlighted the need for more studies on the interaction of young children with apps to foster the development of interactive resources appropriate to a child's age and development.
View
... The major objectives in attempt to address broad and wide diversity are context-aware design; adaptable and adaptive interaction behaviour; personalized user-experience; efficient user modelling to address diverse user characteristics, requirements and expectations; cognitive and affective intelligence. Many designers, developers, researcher and practitioners [3,7,10,13,14,15,16,17,18,19,20] have worked on these aspects of interaction designing in respect to ubiquitous computing environment. ...
View
View
Graphical user interface design to improve understanding of the patient-reported outcome symptom response
Article
Full-text available
Background Symptom monitoring application (SMA) has clinical benefits to cancer patients but patients experience difficulties in using it. Few studies have identified which types of graphical user interface (GUI) are preferred by cancer patients for using the SMA. Methods This is a cross-sectional study aimed to identify preferred GUI among cancer patients to use SMA. Total of 199 patients were asked to evaluate 8 types of GUIs combining text, icon, illustration, and colors using mixed-methods. Subgroup analyses were performed according to age and gender. Results The mean age of the patients was 57 and 42.5% was male. The most preferred GUI was “Text + Icon + Color” (mean = 4.43), followed by “Text + Icon” (mean = 4.39). Older patients (≥ 60 years) preferred “Text + Icon” than younger patients (p for interaction < 0.01). Simple and intuitive text and icons were the most useful GUI for cancer patients to use the SMA. Conclusion Simple and intuitive text and icons were the most useful GUI for cancer patients to use the SMA. Researchers need to be careful when applying realistic face drawings to cancer symptom monitoring applications because they can recall negative images of cancer.
View
Spark, an application based on Serendipitous Knowledge Discovery
Article
  • Dec 2015
  • J BIOMED INFORM
Findings: from information-seeking behavior research can inform application development. In this report we provide a system description of Spark, an application based on findings from serendipitous knowledge discovery studies and data structures known as semantic predications. Background information and the previously published IF-SKD model (outlining serendipitous knowledge discovery in online environments) illustrate the potential use of information-seeking behavior in application design. A detailed overview of the Spark system illustrates how methodologies in design and retrieval functionality enable production of semantic predication graphs tailored to evoke serendipitous knowledge discovery in users.
View
SmaCCS: Smart camera cloud services: Towards an intelligent cloud-based surveillance system
Conference Paper
  • Jul 2013
Today, high performance and feature rich surveillance systems are very costly as they require an expensive set of infrastructure components. As a consequence, such systems including, e.g., complex automatic video content analysis, are restricted to large scale applications, such as airports or train stations. In smaller settings, e.g. in shop surveillance, mostly low-cost display or record-only systems are in use. In this position paper we propose to combine two well-known approaches in order to make Intelligent Video Surveillance applicable and affordable in small to medium-scale scenarios. The proposal includes to combine the concept of Smart Cameras, i.e. cameras equipped with local processing resources, with the ideas of Cloud Computing, i.e. the on-demand provisioning of computing and storage services for complex calculations, and the management of large amounts of data, i.e. video storage. The former allows for the cost effective pre-processing of video data close to the sensor, while using the latter concept does not require large initial investments into expensive infrastructure components such as powerful compute servers. The paper presents research issues of the necessary system design, including precise system goal and system model aspects. Based on this, we discuss several research issues required to be addressed for solving the overall goals.
View
Graphical user interfaces
Article
  • Mar 2011
This article provides a brief introduction to graphical user interfaces or GUIs. The first section defines graphical user interfaces, describes interface components, and the different types of GUIs. This is followed by a short discussion of GUI design principles and descriptions of some tools for easily creating GUIs. The article concludes with some examples of GUIs that would be of interest to researchers and statisticians. WIREs Comp Stat 2011 3 119–133 DOI: 10.1002/wics.150 For further resources related to this article, please visit the WIREs website
View
View
The role of cognitive theory in human–computer interface
Article
  • Sep 2003
  • COMPUT HUM BEHAV
Many computer users have trouble learning and remembering information presented on a computer screen. Based on cognitive theories, part of the reason for lack of retention is hypothesized to be the user's inability to form a mental picture, or schema, of the information presented via a computer screen. In order to form a schema, users need to be able to understand where newly acquired knowledge fits into “the big picture”. However, computers and the information on them are so infinite, users may have trouble thinking in terms of a big picture. When on a website, for example, how many times have you asked yourself, “Where am I?” or “Where was I?” or “Where am I going?” Likewise, for many learners, there may be little sense of place when learning with the assistance of a computer. It is proposed that these problems of the inability to form a schema and disorientation with the human–computer interface are worth researching, not only for better retention, but also for increased satisfaction among users. In addition to cognitive theories of learning, retention, organization, and individual differences, human–computer interface guidelines are also addressed. For this paper, the phrase human–computer interface is also called the “user interface” because of the emphasis on the end user, or the student. It may also be called simply the interface. Human–computer interface is defined as the point of contact between the computer and the computer user.
View
Applying Cognitive Psychology to User Interfaces
Conference Paper
  • Jan 2009
This paper explores some key aspects of cognitive psychology that may be mapped onto user interfaces. Major focus in existing user interface guidelines is on consistency, simplicity, feedback, system messages, display issues, navigation, colors, graphics, visibility and error prevention [8-10]. These guidelines are effective indesigning user interfaces. However, these guidelines do not handle the issues that may arise due to the innate structure of human brain and human limitations. For example, where to place graphics on the screen so that user can easily process them and what kind of background should be given on the screen according to the limitation of human motor system. In this paper we have collected some available guidelines from the area of cognitive psychology [1, 5, 7]. In addition, we have extracted few guidelines from theories and studies of cognitive psychology [3, 11] which may be mapped to user interfaces.
View
Designing the user interface: Strategies for effective human-computer interaction
Book
  • Jan 1992
Adequate treatment of cardiac failure should reflect both clinical rules and quantitative evaluation of hemodynamics. For the latter we assumed an extensive model of heart and vessels: For the left and right ventricles the EMAX models were assumed with ...
View
Applying Cognitive Science Research in Graphical User Interface (GUI), Umea Institute of Design
  • 23-28
  • G Aberg
  • J Chang
G. Aberg and J. Chang, Applying Cognitive Science Research in Graphical User Interface (GUI), Umea Institute of Design, pp. 23-28.
Gestalt Theory in Visual Screen Design -A New Look at an Old Subject
  • Jan 2001
  • 5-12
  • D Chang
  • L Dooley
  • J E Tuovinen
D. Chang, L. Dooley and J. E. Tuovinen, Gestalt Theory in Visual Screen Design -A New Look at an Old Subject, Proceedings of Seventh World Conference on Computer in Education. Copenhagen, Denmark, 2001, pp. 5-12.
Cognitive load theory and respondent interface design: Making software easy to learn and use (Part 1)
  • Oct 2006
  • C Errey
  • P Ginns
  • C Pitts
C. Errey, P. Ginns and C. Pitts. Cognitive load theory and respondent interface design: Making software easy to learn and use (Part 1) 2006. [Accessed: 25 October 20 11]