JECET; June 2014-August 2014; Sec. B Vol.3.No.3, 1452-1460.

E-ISSN: 2278179X

Journal of Environmental Science, Computer Science and

Engineering & Technology
An International Peer Review E-3 Journal of Sciences and Technology

Available online at www.jecet.org

Section B: Computer Science
Review Article

The Role of Psychology in User Interface Design:

Theory and Application
Iman Paryudia,b, Sri. Rezeki C. N.b, A. Min Tjoaa

a
Vienna University of Technology, Vienna, Austria
b
Pancasila University, Indonesia

Received: 28 July 2014; Revised: 18 August 2014; Accepted: 22 August 2014

Abstract: A good application is the one that has good user interface. This is because users
will judge an application based on its user interface. A good user interface is the one that is
designed based on principles of user interface design. Since the user of an application is
human, then designers must also understand and apply cognitive psychology in their designs.
This is to know what human really need. From a survey we carried out, it is proven that the
user interface that applies both principles of user interface design and cognitive psychology is
preferred by the most respondent.
Keywords: user interface design, cognitive psychology, cognitive science, human-computer
interaction, model human processor.

INTRODUCTION

In almost every simulation tool, there are two parts, namely the engine and the user interface. The
tools engine will perform a simulation based on input files with a specific format. These files contain
data needed for the simulation. After the simulation, the tool will write the output into one or more
output files. Information that is saved in these output files is as follows: simulation result, warning
messages, and information to evaluate the input. In order to carry out a simulation, the engine must
contain certain algorithms. These algorithms are used to calculate the energy performance according
to the underlying model of the engine 1 .

JECET; June 2014-August 2014; Sec. B, Vol.3.No.3.,1452-1460 1452

The Role... Imran Paryudi et al.

To assist the users using the engine, a user interface must be present. This user interface will ensure
that any usereven novicescan run the simulation tool. All activities related to simulation can be
done easily with the help of user interface 1 . User interface is defined by Harding2 as visual operating
display that the monitor presents on the monitor to the computer operator. It consists of: a
windowing system, an imaging model, and an application program interface 3 . The user interface is
important, since it will determine how easily an application can be used. The user-friendly interface
will help the users finish their jobs quickly. Fadeyev4 states that the success of an application will be
determined by its user-interface design. This is because the users will rate an application based on its
user interface. Therefore, the developer must make sure the user interface is designed very carefully.

USER INTERFACE DESIGN PRINCIPLES

In order to design a good user interface, one must apply principles of user interface design. The most
important principle is simplicity. The simpler the user interface, the more usable is the user interface.
The simple user interface means that components included in the design are the most needed ones 5 .
Meanwhile, the usable application means that it is intuitive and powerful. The former means that
the application is easy to use and easy to learn. And the latter means that it is also effective and
efficient to use 6 .
In order to be usable, the user interface must also be consistent. There must be consistency in the
layout, wording, and color. The layout from one page to another must be consistent. The placement
of a button must be consistent. The naming or wording of a label must be consistent. The use of color
must also be consistent. If there is no consistency, the design will confuse the users 7, 8 .
Another kind of consistency is in the behavior of the interface. This kind of consistency means that
the users previous knowledge in running an application can be used to run another new application9 .
Meanwhile, Benson, Elman, Nickell, and Robertson10 state that in this kind of consistency, the users
previous knowledge can be used to help them when they run a new application. This in turn will
enable the users to quickly familiarize themselves with the new applications.
A user interface design must also be clear. It means that the design should not be ambiguous. The
clear user interface will avoid confusion among the users when running the application. The visual
clarity in user interface design can be obtained by the use of metaphor in the design.
Metaphor is a familiar concept from the outside world 10 . The use of metaphor in a user interface
design is to inform the users on how to interact with the application11 . In order to apply a metaphor in
a user interface design, one will use an image of a real world object to represent an element in the
design. One example of metaphor is an image of a trash can in Windows OS that informs the user to
place the unused files.
Another feature that will add the ease of use of a user interface is the application of principle of direct
manipulation. The principle is so named because in this principle the users can see all the processes
they perform and the result directly12 . Important points in this principle are 6 :
a. Users must be able to see the object at all time.
b. Users must use a device to manipulate the object.
c. Users can see the action result immediately.

The characteristic of direct manipulation give advantages to novice users since it is easier to use rather
than the menu-based interface 12 . One example of direct manipulation is a drag and drop feature in

JECET; June 2014-August 2014; Sec. A, Vol.3.No.3, 1452-1460. 1453

The Role... Imran Paryudi et al.

Windows OS to discard an unused file into a metaphor of a trash can. In this process, the user can see
both the action s/he performs and the result of the action.
However, since the user of an application is human, designing a user interface that only based on
principles of user interface design is not enough. In order to design a user friendly interface, one must
understand the cognitive processes that occur when a human user interact with a user interface. This
is the reason why user interface designers must understand and apply cognitive psychology in their
design13 .

PSYCHOLOGY IN HUMAN COMPUTER INTERACTION (HCI)

Human-Computer Interaction (HCI) is defined as a discipline concerned with the design, evaluation
and implementation of interactive computing systems for human use and with the study of major
phenomena surrounding them 14 .
The history of HCI is started when researchers carried out researches in the field of Ergonomist that is
also called Human Factor. This field concerns with the physical characteristics of systems and their
effect to the performance of the user in finishing a task. The system in here can be computer or any
machines. With the increase of the number of computer, the study then shifted to only in the
interaction between people and computer. The issues being studied are physical, psychological, and
theoretical aspects of the interaction. Therefore, the research area that is initially under the name
man-machine interaction changes to Human-Computer Interaction. The term human is defined as
whoever trying to get the job done using the technology. Computer is the technology used in the
interaction. And the term interaction is defined as any communication between a user and computer,
be it direct or indirect 15 .
The main concern of HCI is usability. Usability means the ease of use of a user interface 16 . Besides
usability, another thing that becomes the concern of HCI is functionality. Functionality of a system is
the features available in the system that can be used by the user. A good system is a system that
provides usable functionalities. These usable functionalities will help the user of the system to finish
the task easier and faster17 .
HCI consists of several fields and one of them is cognitive psychology18 . Cognitive psychology (also
called cognitive science) is defined as how humans perceive the world around them, how they store
and process information and solve problem, and how they physically manipulate objects 15 . There
are three aspects in cognitive psychology theory: perception, memory, and thinking. The cognitive
process is a combination of those three aspects 19 .
There are several theories that are found related to cognitive psychology such as: Retention Theory,
Schema Theory, and Cognitive Load Theory20 . Retention Theory is defined as ability to memorize an
amount of information. Retention can be subdivided into two types: short-term retention or short-
term memory, and long-term retention or long-term memory. This division is based on the length of
time that the user can still memorize the information21 . Schema theory states that knowledge is
composed of schemata or units where the information is stored. Cognitive load theory is an
instructional theory that describes how we deal with the limitations of the short-term memory in
holding information in order to maximize learning result22 .
Human has three types of memories, namely: sensory memory, short-term memory (also called
working memory), and long-term memory. These memories form a system that is used to process the
received information. The architecture of the system can be seen in Figure 1.

JECET; June 2014-August 2014; Sec. B, Vol.3.No.3, 1452-1460. 1454

The Role... Imran Paryudi et al.

22
Figure 1: Human cognitive architecture (With permission of Dr. Graham Cooper).

Dix et al. 15 explain the process involving those three memories. The process starts from sensory
memory. They describe sensory memories as buffers for stimuli received through the senses. There
are three kinds of sensory memories: iconic, echoic, and haptic. Each of those three memories is used
to sense certain visual, echoic, and touch stimuli, respectively. Every time new information comes
through any channel, the information is saved in the respective memory. The existing information will
then be overwritten by the new incoming information. Sensory memories extinguish extremely
quickly. About half a second for iconic information, 3 seconds for echoic information22 . The process
is continued by the passing of the received information to the next level of memory that is short-term
memory. Not all new received information will be passed to short-term memory. It is only the useful
information that will be passed to it15 .
The new information coming from the sensory memory will be saved in short-term memory for later
use. Hence short-term memory acts as a scratch-pad in this system. In the system, short-term
memory has functions to provide consciousness, solve problems, or process information. Short-term
memory has limited space to contain information we receive 22 . Regarding the limitation of short-term
memory, George Miller found that our short-term memory can only contain between 5 to 9 things (or
chunks) at a time. The chunks in here can be anything. Because of that, his finding is called Seven
Plus or Minus Two rule. Therefore, in order to increase the capacity of the short-term memory, we
must chunk long information into several shorter chunks 15 .
An example of the application of the Seven Plus or Minus Two rule is when we install software onto a
computer. To protect the software, a software developer will accompany each of its products with a
certain product key. This key must be inputted to verify the originality of the product. Applying the
Seven Plus or Minus Two rule, the product key will not be written like this: 12345678912345678912,
and the text box that is used to input the product key is not designed as a long text box (Figure 2).
Instead, the product key will be written like this: 12345-67891-23456-78912, and the input box will
be designed as four short text boxes (Figure 3).

JECET; June 2014-August 2014; Sec. A, Vol.3.No.3, 1452-1460. 1455

The Role... Imran Paryudi et al.

Figure 2: Long text box to input long product key.

Figure 3: Short text box to input chunked product key.

Finally, the information from short-term memory is passed to long-term memory and becomes our
knowledge15 . When we want to recall something from our mind, actually short-term memory is doing
its job by querying long-term memory on specific information22 . The differences between long-term
memory and short-term memory are that long-term memory has much bigger capacity than short-term
memory. Besides that access in long-term memory is slower than in short-term memory15 .
As stated above, when the information from short-term memory is passed to and saved in long-term
memory, it will become our knowledge. This is known as the learning process. Learning may be
defined as the encoding (storage) of knowledge and/or skills into long term memory in such a way
that the knowledge and skills may be recalled and applied at a later time on demand 22 . The process
is carried out based on the Connectionist Theory. The theory states that we learn new things by
associating the newly received information with our previous knowledge that is in the form of
schema6 . In this process, we access our schema to match the schema to the newly received
information. If the newly received information matches with the schema, it will be modified. The
modification of our schema means that we get new knowledge 23 .
The formation of new schemas and development of old existing schemas is called by Piaget as
learning. According to him, two processes that guide learning are schema adaptation and schema
organization. The schema adaptation can be the assimilation of new information into existing schemas
or the accommodation of schemas to new information. Schema organization is important for novice
learners. In order to avoid developing incorrect schema, the novice learners must be provided with
existing organized schema 21 . The connectionist theory can be applied to user-interface design by
using something that almost everybody knows. This can be in the form of images or behavior. This is
the reason why metaphor and behavior consistency is important in an application6 .

MODEL HUMAN PROCESSOR

Among the first researchers to apply psychology in HCI are S. K. Card, T. P. Moran, and A. Newell.
They studied the role of psychology in this discipline and reported the result in a book entitled The
Psychology of Human-Computer Interaction 24 . In the book, they propose a model human processor.
The model human processor presents processes that occur when a human interacts with a computer.
There are three basic processes that involve in this interaction: perceptual capacity, cognitive speed,
and motor speed.
The first process is perceptual capacity which relates to human sensors. Roufs and Boschman25 state
that the users must be able to read information on the screen easily. This is called visual comfort.
According to Zuffi, Brambilla, Beretta, and Scala 26 , visual comfort requires legibility and readability.

JECET; June 2014-August 2014; Sec. B, Vol.3.No.3, 1452-1460. 1456

The Role... Imran Paryudi et al.

Legibility is the visual properties of a character or a symbol determining the ease with which it can
be recognized. Legibility is the requirement for readability which is the property that allows reading
easily sentences from the stimulus material, irrespective of their meaning.
Jansen3 defines visual acuity as the ability of the eye to resolve detail. Visual acuity depends on the
distance from the point of fixation. The smaller the distance, the greater the visual acuity. He
introduces Rule of 1.7, stating that the best human visual acuity is an area with a radius of 1.7 inches
from the point of fixation. He explains that this area is approximately 14 characters wide and about 7
lines high. The fact that human visual acuity is small, when reading a web page, a user must keep
moving his eyes to cover the entire page. Of course, this will cause eye tiredness.
Vallerio et al.27 state that colors affect human vision. In other words, the choice of colors in the design
will affect visibility. Therefore, designers should use good color scheme, contrast ratio, and luminance
in their designs. Yee, Ling, Yee, and Zainon20 state that a bad choice of colors in the design will be an
eyesore. They suggest using soft colors instead of bright colors, but using a mixture of soft and bright
colors is not suggested. This is because the usage of soft and bright colors mixed will cause eye
tiredness due to dilation and contraction when looking at colors with different brightness.
A brightness is affected by luminance. The luminance of an objectthe amount of light emitted by
an objectis dependent on the amount of light falling on the object's surface and its reflective
properties. Contrast is the difference between the luminance of an object and its background. Visual
acuity is also affected by luminance where the increase of luminance will increase the visual acuity 15 .
A black letter that is written on light background is called negative contrast. Compared to positive
contrast, negative contrast will cause higher luminance and visual acuity of the object. Therefore, it
will also increase the legibility15 .
The second process is the cognitive speed of the users. This can be calculated using the Hick Law.
The Hick Law is presented by the following equation:

RT = a + b * log2 N (1)

Where RT is the reaction time, N is the number of choices, and a and b are constants. In other words,
this law suggests the designers to use only a few choices in the user interface design in order to
increase the reaction time 27 .
The third process is motor speed. It is based on Fitts Law. Berkun28 states that the ease to click on an
object on the screen using a mouse depends on the size of the object and the distance of the object to
the initial position of the mouse. This suggests that the bigger the size of an object, the better.
According to Gravelle 29 , the time to select a control can be calculated by using Fitts Law equation as
follows:

MT = k + c * log2 (d/s) (2)

where MT is the time to move a mouse to an object, d is distance, s is object size, and k a nd c are
constants. This formula suggests that in order to increase speed, the distance should be reduced, and
the object size should be increased. Therefore it is suggested to use pie-chart-shaped-menus because
the options have the same distance. And it is also suggested to put the most frequently used options in
the top of the list so that the user can easily find them15 .

JECET; June 2014-August 2014; Sec. A, Vol.3.No.3, 1452-1460. 1457

The Role... Imran Paryudi et al.

DESIGNING A USER INTERFACE: AN EXAMPLE

After delivering theory about designing a friendly user interface, this section will describe an example
user interface that is designed based on cognitive psychology. The example user interface is taken
from Paryudi and Fenz30 and is shown in Figure 4.

Figure 4: A user interface designed based on cognitive psychology.

The user interface shows a box containing four values on the left and an image of a house on the right
acting as a container. To the right of the box is a Building Properties box that is used to show the
inputted value. To input data in this user interface, users must select and drag one of the four values
and drop it into the container. The data that have been inputted by the user will be shown in the
Building Properties box.
As stated before that connectionist theory can be applied to user-interface design by using something
that almost everybody knowsthat is in the form of metaphor. Because of that, this user interface
use metaphor. The metaphors that are used here are image of a house and tabbed menu. Since this
user interface is used in an energy simulation tool, the metaphor will represent the building that is
being simulated. Therefore, the user will know where to drop the selected value. This is supported by
the use of tooltip. When the mouse hovers over a value, a tooltip of Drag me will appear, and when
the mouse hovers over the house icon, a tooltip of Drop it here will appear. By using those
combinations, there will be no confusion and frustration among the users as to how to use this user
interface due to lack of information. The help of tooltip here is important because visual short-term
memory is independent of verbal short-term memory. To accommodate this, user interface must
provide information that can be consumed by both types of short-term memories, for instance by
using mnemonic technique. This technique associates images with something that can be
remembered. Therefore, the best way to design is by combining icon with tooltip or label6 .
The use of tabbed menu in this user interface is also based on connectionist theory. This is because
when looking at the tabbed menu, the users will remember similar objects in the real world such as
dictionaries. As we all know that a dictionary has indexes indicating the beginning of a section. And
these indexes has similar look as a tabbed menu. Since dictionaries are common things to most
people, hence users already have previous knowledge about tabbed menu. Because of this previous
knowledge, the users will find it easy to use a tabbed menu. Vallerio, Zhong, and Jha 27 reported that
participants in their experiments greatly benefited from using the tabbed menu.
To increase legibility, readability and hence the visual comfort, this user interface as much as possible
uses big fonts. Besides that, this user interface also applies negative contrast where the black letters
are written on light background. This off course will add the visual comfort of the user.

JECET; June 2014-August 2014; Sec. B, Vol.3.No.3, 1452-1460. 1458

The Role... Imran Paryudi et al.

Regarding color, this user interface uses only soft colors. There are no bright colors so that there is no
mixture of soft and bright colors that will cause eye-muscle tiredness. When we think not needed, we
do not use any color in order to avoid color complicatedness.
As already mentioned that based on rule of 1.7, the human visual acuity is small that requires the
users to keep moving their eyes when they try to cover the entire page. In order to avoid this, we
apply the rule of 1.7 by limiting the width and height of this user interface.
In order to increase reaction time and moving time, this user interface also applies Hicks and Fitts
laws respectively. We apply Hicks law by providing only four choices, so that the users can make a
quick decision on which value to be selected. The Fitts law is applied by creating large objects such
as the Calculate button. The house imageacting as a containeris also made large enough and
close enough to the valueswhich are also quite bigthat the users can drag and drop the selected
value faster and easier. The limited height and width of the design ensures that the distance between
the mouse and any object in the design is always small; hence, the mouse-moving time is also small.
In a survey we carried out, this user interface was chosen as the favorite by the most respondents
compared to the other two user interfaces. Therefore, the application cognitive psychology is
important in increasing the usability and friendliness of a user interface.

CONCLUSION

In designing user interface, designers must not only apply principles of user interface design but also
apply cognitive psychology. The application of cognitive psychology is important since it will ensure
that the design is the one that the users want. Therefore, the user interface that applies cognitive
psychology will be preferred by the users.

ACKNOWLEDGEMENT

Iman Paryudi would like to thank Directorate of Higher Education, Ministry of Education and
Culture, Republic of Indonesia for the scholarship awarded to him.

REFERENCES

1. T. Maile, M. Fischer, and V. Bazjanac, Building Energy Performance Simulation Tools a

Life-Cycle and Interoperable Perspective. CIFE Working Paper #WP107, Stanford
University, December 2007.
2. B. A. Harding, Windows & Icons & Mice, Oh My! The Changing Face of
Computing. Frontiers in Education Conference 1989: 19th Annual: 337-342.
3. B. J. Jansen, the Graphical User Interface: An Introduction. SIGCHI Bulletin. 30(2), 22-26,
1998.
4. D. Fadeyev, 12 Useful Techniques for Good User Interface Design. Available at:
http://uxdesign.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-
interface-design-in-web-applications/, 2009.
5. S. Martin, Effective Visual Communication for Graphical User Interface. Available at:
http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html.
6. A. Blackwell, Human Computer Interaction. University of Cambridge, 2011.
7. S. W. Ambler, Designing Web-Based User Interfaces. Available at: http:// www. drdobbs.
com/ architecture-and-design/184414719?cid=Ambysoft, 2001.
8. Webdesigner Depot, How to Design a Great User Interface. Available at: http:// www.
webdesignerdepot.com/2010/10/how-to-design-a-great-user-interface/, 2010.
9. Apple Computer Inc., Apple Human Interface Guidelines. Addison-Wesley Publishing
Company, Reading, Massachusetts, 1995.

JECET; June 2014-August 2014; Sec. A, Vol.3.No.3, 1452-1460. 1459

The Role... Imran Paryudi et al.

10. C. Benson, A. Elman, S. Nickell, C. Z. Robertson, GNOME Human Interface Guidelines 2.0.
The GNOME Usability Project, 2004.
11. Wikipedia, Interface metaphor. Available at: http://en.wikipedia.org/wiki/Interface_metaphor,
2011.
12. Ergo TMC, Chapter 11 - The User-Computer Interface. Available at: http:// ergotmc. gtri.
gatech. edu/dgt/Design_Guidelines/hndchb28.htm.
13. R. L. Boring, Human-Computer Interaction as Cognitive Science. Proceedings of the Human
Factors and Ergonomics Society 46th Annual Meeting, 2002.
14. Hewett, Baecker, Card, Casey, Gasen, Mantei, Perlman, Strong, and Verplank, Chapter 2:
Human-Computer Interaction. Available at: http://old.sigchi.org/cdg/cdg2.html, 2009.
15. A. Dix, J. Finlay, G. D. Abowd, R. Beale, Human-Computer Interaction. 3rd Edition, Pearson
Edition Limited, 2004.
16. D. Sharma, toward a new foundation Of Human-computer interaction. 3rd International
Conference on Electronics Computer Technology (ICECT), Kanyakamuri, 2011, pp. 395
397.
17. F. Karray, M. Alemzadeh, J. A. Saleh, and M. N. Arab, Human-Computer Interaction:
Overview of State of the Art. International Journal of Smart Sensing and Intelligent Systems,
Vol. 1, No. 1, 2008.
18. A. Newell, S. K. Card, The Prospects for Psychological Science in Human-Computer
Interaction. Human Computer Interaction, Volume 1, pp. 209 242, 1985.
19. P. Zhou, X. Fang, Analysis of Cognitive Behavior in Software Interactive Interface. IEEE,
2008, pp. 113 116.
20. C. K. Yee, C. S. Ling, W. S. Yee, W. M. N. W. Zainon, GUI Design Based on Cognitive
Psychology: Theoretical, Empirical, and Practical Approaches. 8th International Conference
on Computing Technology and Information Management (ICCM), 2012.
21. P. A. Chalmers, The role of cognitive theory in human-computer interface. Computers in
Human Behavior, Vol. 19, pp. 593 607, 2003.
22. G. Cooper, Research into Cognitive Load Theory and Instructional Design at UNSW.
Available in http://dwb4.unl.edu/Diss/Cooper/UNSW.htm, 1998.
23. K. Cherry, What Is a Schema? Available at: http:// psychology. about. com/ od/ sindex /g/
def_schema.htm.
24. S. K. Card, T. P. Moran, and A. Newell, The Psychology of Human-Computer Interaction.
Hillsdale, N.J.: Lawrence Erlbaum Assoc., 1983.
25. J. A. J. Roufs, M. C. Boschman, Text quality metrics for visual display uMethodological
aspects aspects. Displays, 18, pp. 37-43, 1997.
26. S. Zuffi, C. Brambilla, G. Beretta, P. Scala, Human Computer Interaction: Legibility and
Contrast. 14th International Conference on Image Analysis and Processing (ICIAP), 2007.
27. K. S. Vallerio, L. Zhong, N. K. Jha, Energy-Efficient Graphical User Interface Design. IEEE
Transactions on Mobile Computing, Vol. 5, No. 7, July 2006, pp. 846 859.
28. S. Berkun, Fitts's UI Law Applied to the Web. Available at: http://msdn.microsoft.com/en-
us/library/ms993291.aspx, 2000.
29. R. Gravelle, The Three Laws of Form Building. http:// www.htmlgoodies. com/ tutorials/
forms /the-three-laws-of-form-design.html, 2013.
30. I. Paryudi, S. Fenz, Friendly User Interface Design for Architects in an Energy Simulation
Tool. International Journal of Scientific & Technology Research, Volume 2, Issue 11,
November 2013.

Corresponding author: Iman Paryudi:

Vienna University of Technology, Vienna, Austria
Pancasila University, Indonesia

JECET; June 2014-August 2014; Sec. B, Vol.3.No.3, 1452-1460. 1460