Human Computer Interaction Design (COMP 1649)
Human Computer Interaction Design (COMP 1649)
Human Computer Interaction Design (COMP 1649)
Page - 1
Human Computer Interaction Design (COMP 1649)
Table of Contents
No Description Page No
1 Introduction……………………………………………………………...3
2 1. Five Different Dimensions of Interaction Design…………………4
1.1 Words……………………………………………………………....5
1.2 Visual Representation…………………………………………….6
1.3 Physical Objects or Space……………………………………….7
1.4 Time………………………………………………………………...8
1.5 Behavior…………………………………………………………....9
6 5. Conclusion…………………………………………………………....31
7 6. References……………………………………………………………33
8 7. Appendices…………………………………………………………...35
7.1 Appendix 1 - Questionnaire Survey for In-Car System
Music library and Navigation System……………………………35
7.2 Appendix 2 – Questionnaire Survey Answers…………………..38
Page - 2
Human Computer Interaction Design (COMP 1649)
Introduction
Human Computer Interaction Design coursework provides the In-car Entertainment and
Navigation system, and it includes the access of music library to listen songs and navigation
services for driving. The following coursework includes the Five Dimensions of Interaction Design,
Requirements for Interaction Prototype, Empirical Research for the Prototype, Designing and
Building the Prototype, Conclusion of coursework, References, and Appendices of the
coursework.
Page - 3
Human Computer Interaction Design (COMP 1649)
Page - 4
Human Computer Interaction Design (COMP 1649)
Interaction designs are important to provide the simplified experiences for users with the show of
little information effectively and aesthetically as possible. Interaction designs are divided into five
dimensions. They are words, visual representation, physical objects or space, time, and behavior.
(Smith, n.d.)
1.1 Words
The meaning and nature of the user’s interactions are expressed in the word dimension. Words
are so strong that they enable people to perform functions and processes quickly and directly,
and they have the huge impact on users. A single word can have a lot of different meanings, and
words are open to interpretation. Moreover, they represent the functions’ activities and maintain
the terminology’s uniformity. (Instructor, 2015)
Short words under the headings of “PlayStation 4, PlayStation VR, and Accessories make
users understandable about the facts of about the game console and accessories, and
they can learn more detail by clicking “Learn More” button interactively.
For that reasons mentioned above, familiar and user-friendly words will be used in the prototype’s
actions accurately, and settings for being conveyed in the appropriate tone, and moreover, the
consistent words will be used throughout the process of the prototype.
Page - 5
Human Computer Interaction Design (COMP 1649)
Typography, icons, diagrams, animations, images, and other features that are not expressed with
words inside the prototype are referred to as visual representations because users have the
capacity of processing the imagery so fast and extract meanings in a split second. These elements
are just as potent as words. Nowadays, 2D visual representations are extensively used in user
interfaces, people have already stored hundreds of these components in long-term memory,
allowing them to interpret display promptly for the advantage of the user experience when the
design enables it. (Devazya, 2019)
The image icons in the navigation bar can make the user to remember about
the types and names of game consoles, services and online store for digital
game purchases.
For the current prototype, the 2D visual representations which users can interact such as icons,
interactable background and foreground colors, typography, and user understandable and ease-
to-memorize pictures and diagrams will be used in visual hierarchy.
Page - 6
Human Computer Interaction Design (COMP 1649)
The control of medium through which the user interacts with the product, such as a computer
keyboard, mouse, touchscreen, joystick, gaming controller, and keypad, is referred to as physical
objects or space. It also makes the understandings of the medium and design things that are easy
to make and process with them by defining the user’s interactions with 1D,2D visual
representations and 3D physical objects. (Instructor, 2015) (Devazya, 2019) (Greenwich, n.d.)
Page - 7
Human Computer Interaction Design (COMP 1649)
The more user interactable objects such as aesthetic screen design, and the space where the
interaction occurs will be used in the current prototype in order to provide the tools and observable
feedback to steer their behaviors and facilitate goal accomplishment.
1.4 Time
The time dimension refers to media that varies over time, such as animations, video, and sound,
with which the user interacts and utilizes the other three dimensions. These sorts of elements
always assist and support the user in engaging the product in an exciting way. For instance, using
animation with the nice sound in the success message when the task is completed would make
the user to get the pleasant feeling on that experience. However, one thing to be cautious that
this should not make the users to wait too long to complete these animations. (Instructor, 2015)
The external circle’s rotating flash shows that it is working in progress and the number
in the center of circle shows the user to the status of the progress.
Link-https://dribbble.com/shots/1010978-CSS-Animated-progress-circle-freebie
Time will be used in the current prototype to express the information and progression of the task
and more visible the status of the working functions.
Page - 8
Human Computer Interaction Design (COMP 1649)
1.5 Behavior
The behavior refers to the actions, reactions, operations, and presentations of the product’s
design. The good example for the behavior dimension is showing the success message with the
short and effective summary word phases upon the sending the mail message to one another.
(Instructor, 2015)
The high five behavior and the text in the message makes the user understand
that the mail he sent is in queue and it will be sent shortly.
Link-https://cdn.guidingtech.com/imager/assets/WordPress-Import/2014/09/105150/Screen-
Shot-2014-09-13-at-4.17.30-pm_4d470f76dc99e18ad75087b1b8410ea9.png?1593797786
These elements will be used in the proposed prototype since they could make the behavior that
is easily adaptable and understandable to users in the use of it.
Page - 9
Human Computer Interaction Design (COMP 1649)
Page - 10
Human Computer Interaction Design (COMP 1649)
Cognitive psychology is a state of mind which people instinctively see, act, and react to events
around them. Both modes are essential for the people’s daily lives. It’s helpful to explore how the
mind functions in this context since it gives us a starting point for thinking about how different
types of technology might support each. There are specific kinds of processes in cognitive
psychology. They are attention, perception, memory, learning, reading, speaking, and listening,
and problem solving, planning, reasoning and recognition, and decision making. (Preece, 2015)
Nevertheless, the processes of attention, perception and recognition, and memory are the
most significant to the design of interaction prototype. (Greenwich, n.d.)
(1) Attention
The process of choosing what to focus on at a given time from a wide variety of options is known
as attention. The aural and visual senses are both involved in paying attention. It enables user to
concentrate on information that is pertinent to what others are doing. Attention also concentrates
and splits attentions, allowing for selective processing of a large number of conflicting inputs.
However, it limits the user’s capacity to keep track of all occurrences. The ease or difficulty of this
procedure is determined by whether the users have clear goals and if the information they want
is plain and distinct. Information at the interface should be arranged consistently to catch the
user’s attention. (Preece, 2015)
Page - 11
Human Computer Interaction Design (COMP 1649)
Perception is the process of gathering information from the environment through various sense
organs such as eyes, ears, and fingers, and transforming it into experiences of things, events,
sounds, and tastes. It’s a complicated process involves memory, attention, and language, among
other cognitive functions. In terms of interaction design, it’s critical to provide data in a way that
allows users to perceive it in the desired way. Furthermore, it is necessary to inquire as to whether
or not humans can see the reality as it is. The obvious implication is to create easily perceivable
representations. (Preece, 2015)
Link-https://www.dreamstime.com/warning-sign-red-white-means-rockfall-right-rock-triangular-
falling-rocks-be-careful-stones-may-fall-street-car-image190865827
Page - 12
Human Computer Interaction Design (COMP 1649)
(3) Memory
The process of recalling various types of knowledge that allows people to remember and respond
effectively is known as memory. In this process, first it encodes the information on its own way
and then retrieve the knowledge when necessary and it is very versatile and enables the people
to do many things. However, because of that the human’s brain is getting overloaded, it would
not be possible to remember everything in daily life. In normal circumstances, the brain has a
filtering mechanism that determines which information is further processed and stored. It is more
likely to be remembered when more attention is devoted to something and it is processed in terms
of thinking about it and comparing it to other concepts and knowledges. Furthermore, it is well
known that individuals are far better at remembering things than they are at identifying them.
Although most of the people don’t remember the details of the object, they could remember the
objects if they have only seen them briefly before. In this case, it is important that words and
contexts can affect the memory in order to remember. (Preece, 2015)
Link - https://www.youtube.com/watch?v=r2vxa-Jk7_E
Interaction Design is the method through which designer should build solutions based on the
demands, goals, and behavior of users when engaging with things. In this process, users should
be able involve through the development of the design product in order to get the better-quality
ones. Moreover, from the beginning of the project, the usability and user experience goals must
be developed, properly documented, and agreed upon. In it, iteration is also required during the
process’s main tasks. (Greenwich, n.d.)
The types of interactions can be divided into four categories named Instructing, Conversing,
Manipulating, and Exploring.
(1) Instructing
Instruction is the interactive type where users command a system with instructions. It explains
how users carry out their duties by instructing the machine. The user’s instructions can be given
in a variety of ways, for as by clicking a button or entering in a string of letters. Giving instructions
may help with a variety of tasks, including telling the time, printing a file, and reminding the user
of an appointment. It’s useful for automating operations like spellchecking, typing instructions,
speaking orders out loud, gesturing, clicking buttons, and utilizing a combination of function keys.
(Preece, 2015)
Page - 14
Human Computer Interaction Design (COMP 1649)
Link-How To Donate Your Car - Wheels For Wishes Car Donation Form
Page - 15
Human Computer Interaction Design (COMP 1649)
(2) Conversing
Conversing is built on the notion of a person having a conversation with a system rather than a
programmed machine that just obeys the user’s orders. The technology is specifically built to
respond as if it were a human being having a conversation. It is distinct from teaching in that it
includes two-way communication processes with the system. The key advantage of this
interaction type is that it allows users to engage with the system in a way that they are comfortable
with. This type of conversational interaction is beneficial for children, computer-phobic people,
and people with various disabilities and it is commonly used in applications where the user needs
to figure out specific types of information and discuss issues, such as advisory systems, help
facilities, search engines, and modern virtual assistants like Cortana and Siri. (Preece, 2015)
Link-http://www.bgr.in/news/heres-what-happens-when-you-ask-siri-for-a-hint-on-apples-
september-9-event/
Page - 16
Human Computer Interaction Design (COMP 1649)
(3) Manipulating
Manipulating is the type of interaction process which works the tasks by the means of
manipulating the objects interactively and it mainly establishes on the knowledge of users of about
how they do works in the physical or real world. Because digital objects cannot interact with real-
world things, human activities can be replicated through the use of physical controllers and
gestures or behaviors performed in the air to direct the movement of on-screen figures. Physical
things that are tagged and modified in the real world might trigger other physical and digital events.
This interaction process has the many benefits that it helps the beginners to learn about the basic
functionality of the system rapidly, it prevents the needs for error messages, except very rarely
errors, and so on. Since it is good for doing the various types of works, it is used in the activities
of designing, drawing, moving, selecting, opening, and closing, etc. (Preece, 2015)
Link-https://www.playce.com.br/jogo-devil-may-cry-5-special-edition-xbox-25-digitos
Page - 17
Human Computer Interaction Design (COMP 1649)
(4) Exploring
Exploring is the interaction process which makes the user movements within the virtual
environment. Physical surroundings can also be utilized to incorporate sensor devices that detect
the presence and movement of people’s bodies and respond by activating certain digital or
physical events. The aim is to allow individuals to learn and gain knowledge of how they move
and navigate around existing locations in order to investigate and perform interactions with the
environment, whether it is real or digital. It is often used in the learning, socializing and gameplay
within the virtual or physical environments. (Preece, 2015)
Link-http://www.bloomberg.com/news/articles/2016-08-03/virtual-reality-horror-game-tests-
limits-of-technology-nausea
Page - 18
Human Computer Interaction Design (COMP 1649)
The proposed prototype will have the in-car entertainment service which users can access to the
music library and listen music and songs which they favored to and navigation services which
helps the users in finding and guiding the target destination of the wanted location. For the design
of this system, the User Centered Design framework which is the iterative approach that places
the user at the center of all design choices will be used. For the production of prototypes, the
cognitive psychology will be used because it is interacting with the technologies and it can
provide the knowledge of about what users can and cannot be expected to do. Its attention
process will make the compelling and aesthetic designs for proposed prototype that will attract
the user’s mind and attitude by consistently structuring the information on the screen interface.
The perception and recognition will make the screen designs and features readily perceivable
and the information will be displayed in short and effectively in order to make the users without
learning more details. Finally, the memory process will provide the context and processes that
would make the user easier in recalling and reminding the knowledge of what are they and what
they mean without spending times on learning them again.
Page - 19
Human Computer Interaction Design (COMP 1649)
Page - 20
Human Computer Interaction Design (COMP 1649)
The targeted user types for the research of proposed prototype are expressed in below:
There would be 20 people involved in this research study. The questionnaires will be used for this
research because it provides the clear instructions on how to fill the it completely and the impact
of a question is influenced by its order. Moreover, it keeps its compact by using white spaces
between the questions.
In this research report, the questions based on the demographics, occupational, experience,
educational level, the knowledge of driving, skills and experiences, the colors for the in-car
interface design, the use of in-car functions, and how they work with it would be asked.
Page - 21
Human Computer Interaction Design (COMP 1649)
Once the research has finished, the following results are as follows:
Many people in the research survey are over 18 years old and half of them is men and another
half are women. They are university graduated and their occupations are businessman, taxi
drivers, the accountants, and software engineers. Many people have the average experiences,
and moderate and advanced knowledge and skills in car driving. Many people have their owned
cars and some are taxi drivers. Once again, they answered that their most favored colors are
black, pink, blue, and purple. Most people wished the in-car stereo system for listening songs,
news from the radio, and driving the wanted destinations by using the built-in car navigation
system. Many people like music and their most liked song types are retro, and pop songs. They
listen songs when driving, resting, and when someone makes to open the music. Some people
listen the songs by inserting the discs into the car stereo, and some who have the Wi-Fi system
listening from internet such as YouTube. There are only some people who use the car navigation
system for learning the streets and roads, and to go to locations that they haven’t been before. In
the survey of disables, some people have color blindness, and most of them have the blue-yellow
color blindness. However, they are normally fine to drive the car and the only problem is that they
can’t differentiate the car traffic lights clearly when they are in driving.
According to the survey, firstly, the user demanded colors will be used in the interface design.
The clear and eye-appealing images will be used as a background. Then, for music library, songs
will be added to it manually, and all of these will be accessed from YouTube site. For navigation,
the Google Maps will be used in order to get the locations of streets and roads exactly. For the
disabled users, the square and round shaped objects, the appropriate words, and icons for music
library and navigation will be used in the app. Besides, the date and time functions will be added
in it for user to look at what date and what time it is.
Page - 22
Human Computer Interaction Design (COMP 1649)
Page - 23
Human Computer Interaction Design (COMP 1649)
4.2 Prototype
(1) In Car Menu Interface
Page - 24
Human Computer Interaction Design (COMP 1649)
Page - 25
Human Computer Interaction Design (COMP 1649)
Page - 26
Human Computer Interaction Design (COMP 1649)
Page - 27
Human Computer Interaction Design (COMP 1649)
For the usability evaluation of the system design, the interface is designed with the scale of the
size of in-car stereotype system. According to the Nielson’s 10 Usability Heuristics Evaluation,
the interface has the following properties stated below:
Page - 28
Human Computer Interaction Design (COMP 1649)
In the research of post development prototype, questionnaire will be used to obtain the user
feedback from using the prototype and there would be 10 people included in this research. In
it, the questions of about the usability of the system upon using it, number of functions people
can make, time taken of about the user attempt to use the system in the way of making familiar,
what issues they had encountered, how the design look like and the user’s suggestion of
making the system prototype more responsive and interactive in design. Then, based on the
user’s feedback, the appropriate amendments would be made in the prototype.
Page - 29
Human Computer Interaction Design (COMP 1649)
Conclusion
Page - 30
Human Computer Interaction Design (COMP 1649)
5. Conclusion
I was given the task of designing a mid-fidelity prototype of in-car entertainment and navigation
system which could make the access of music library and navigation process. In making
prototype, User-Centered Design Framework is used to develop the user-favored design
prototype and I made many components and features that are useful for the users to use.
However, when it is made in Axure tool, I encountered many limitations and problems in building
mid-level prototype and they are mostly happened during the making of music library. Firstly, I
wasn’t able to add the songs from my device because it doesn’t allow to add the songs locally.
When I changed the procedure to add the songs manually from YouTube, it doesn’t allow some
songs to add because they are copyrighted with UMPG officially. Again, some vital features
cannot be made because the prototyping tools doesn’t have enough components to make them.
Moreover, in order to make some features become interactive, some important variables and
functions are needed to put and their syntaxes are seemed to be confused. For me, these
uncomfortable difficulties took a long time and even some makes me annoying as they are not
possible to implement it.
Now, the prototype was completed and its main user demanded functions are working properly.
For the future development of it, I would make the music library to be able to add the songs from
the internet and the computing devices locally. Then, I would make the audio clip interface more
interactive by adding the music playing progress slide and volume slider. Next, I would add the
album features into it which would make easier to find the user’s favorite songs. I would also add
the virtual assistant to help inform the user about the use of system. Finally, I would add the voice
command service to open the in-car stereotype system’s applications by using the user’s voice.
Page - 31
Human Computer Interaction Design (COMP 1649)
References
Page - 32
Human Computer Interaction Design (COMP 1649)
6. References
Devazya, A., 2019. Interaction Design and Its 5 Dimensions. [Online]
Available at: https://uxdesign.cc/interaction-design-and-its-dimensions-39ca7e1d09f0
[Accessed 19 September 2021].
Instructor, I. C., 2015. The Five Languages or Dimensions of Interaction Design. [Online]
Available at: https://www.interaction-design.org/literature/article/the-five-languages-or-dimensions-of-
interaction-design
[Accessed 19 September 2021].
Preece, S. R., 2015. Interaction Design, beyond human-computer interaction. 4th ed. Chichester: John
Wiley & Sons Ltd.
Page - 33
Human Computer Interaction Design (COMP 1649)
Appendices
Page - 34
Human Computer Interaction Design (COMP 1649)
7. Appendices
Questionnaire Survey for the In-Car System Music library and Navigation System
Address: Date:
Female
Gay or LGBTQ
Other
(If you choose Other then say what are you in this textbox)
University Graduated
None of these
No
4. What is your occupation? (Please Fill your working occupation in this box)
– years
– years
+10 years
Moderately know
Very Much
Taxi
Owned Car
Racing Car
Page - 35
Human Computer Interaction Design (COMP 1649)
9. Which color do you like? (Please answer your favorite color in the box)
10. What purpose do you use the in-car stereo To Listen Radio
system?
To Listen Music
Others
(If you choose Other then say what purpose you use it in this
textbox)
No
Hip Hop
Blues
Country Songs
R&B
Retro Songs
Other
No
No
Page - 36
Human Computer Interaction Design (COMP 1649)
If you choose Yes in Question No.16, please answer the following questions
Color Blind
18. What kind of disable are you?
Deafmute
Multiple Sclerosis
Cerebral Palsy
Dysytrophy
Polio
Others
(If you choose others, then answer what disability you have
in the following box)
19. What kind of color blind do you have? Red-Green color blindness
(Only color blinds answer this question)
Blue-Yellow color blindness
Page - 37
Human Computer Interaction Design (COMP 1649)
Questionnaire Survey for the In-Car System Music library and Navigation System
Female
Gay or LGBTQ
Other
(If you choose Other then say what are you in this textbox)
University Graduated
None of these
No
4. What is your occupation? (Please Fill your working occupation in this box)
I am taxi driver
– years
– years
+10 years
Moderately know
Very Much
Taxi
Owned Car
Racing Car
Page - 38
Human Computer Interaction Design (COMP 1649)
10. What purpose do you use the in-car stereo To Listen Radio
system?
To Listen Music
Others
(If you choose Other then say what purpose you use it in this
textbox)
No
Hip Hop
Blues
Country Songs
R&B
Retro Songs
Other
No
No
Page - 39
Human Computer Interaction Design (COMP 1649)
Questionnaire Survey for the In-Car System Music library and Navigation System
Female
Gay or LGBTQ
Other
(If you choose Other then say what are you in this textbox)
University Graduated
None of these
No
4. What is your occupation? (Please Fill your working occupation in this box)
– years
– years
+10 years
Moderately know
Very Much
Taxi
Owned Car
Racing Car
Page - 40
Human Computer Interaction Design (COMP 1649)
9. Which color do you like? (Please answer your favorite color in the box)
10. What purpose do you use the in-car stereo To Listen Radio
system?
To Listen Music
Others
(If you choose Other then say what purpose you use it in this
textbox)
No
Hip Hop
Blues
Country Songs
R&B
Retro Songs
Other
No
No
Page - 41
Human Computer Interaction Design (COMP 1649)
Questionnaire Survey for the In-Car System Music library and Navigation System
Female
Gay or LGBTQ
Other
(If you choose Other then say what are you in this textbox)
University Graduated
None of these
No
4. What is your occupation? (Please Fill your working occupation in this box)
I am the accountant.
– years
– years
+10 years
Moderately know
Very Much
Taxi
Owned Car
Racing Car
Page - 42
Human Computer Interaction Design (COMP 1649)
9. Which color do you like? (Please answer your favorite color in the box)
10. What purpose do you use the in-car stereo To Listen Radio
system?
To Listen Music
Others
(If you choose Other then say what purpose you use it in this
textbox)
No
Hip Hop
Blues
Country Songs
R&B
Retro Songs
Other
No
No
Page - 43
Human Computer Interaction Design (COMP 1649)
Questionnaire Survey for the In-Car System Music library and Navigation System
Female
Gay or LGBTQ
Other
(If you choose Other then say what are you in this textbox)
University Graduated
None of these
No
4. What is your occupation? (Please Fill your working occupation in this box)
– years
– years
+10 years
Moderately know
Very Much
Taxi
Owned Car
Racing Car
Page - 44
Human Computer Interaction Design (COMP 1649)
9. Which color do you like? (Please answer your favorite color in the box)
10. What purpose do you use the in-car stereo To Listen Radio
system?
To Listen Music
Others
(If you choose Other then say what purpose you use it in this
textbox)
No
Hip Hop
Blues
Country Songs
R&B
Retro Songs
Other
No
No
Page - 45
Human Computer Interaction Design (COMP 1649)
If you choose Yes in Question No.16, please answer the following questions
Color Blind
18. What kind of disable are you?
Deafmute
Multiple Sclerosis
Cerebral Palsy
Dysytrophy
Polio
Others
(If you choose others, then answer what disability you have
in the following box)
19. What kind of color blind do you have? Red-Green color blindness
(Only color blinds answer this question)
Blue-Yellow color blindness
Page - 46