Coursework Title:

COMP1649 Interaction Design

Due date: 17th April 2018

Student Name: Nguyen Ngoc Chan

Student ID: GT60826

1
 I. The key issues in interaction design
1. Cognitive Psychology
Cognitive Psychology is about the way people learning and thinking about things around, it’s about how
people visualize things in the real life. Cognitive Psychology is divided into two main points, reflective
cognition and experiential cognition. Reading, listening or having a conversation is kinds of experiential
cognition, it is the way we take action and reaction to things around effectively. On the other hand,
reflective cognition is about the process of people’s thinking, solving problem, and decision making.
Cognitive processes are involved:
o Attention
o Recognition and Perception
o Memory
o Learning
o Listening, Speaking and Reading
o Problem solving, Planning, Reasoning and Decision making
These are independent in processing things, only one thing can get many different cognitive processes.
For example, here is the process when we found a special information in an application, at first, we have
to take attention on the key words or images, read it carefully, think about it many times and finally, we
always try to remember it as long as possible.
Cognitive Psychology plays an important role in designing a mobile application. Many applications have
the same functions but the one which having attractive and creative design will determine the success
of the application. People will tend to use the more attractive application, applying Cognitive Psychology
in designing application will lead the application getting not only repetitive users and also new users.
2. Key issues of Cognitive Psychology in designing mobile application
o Attention
Most people are familiar with air conditioning remote control, therefore the application must have
the same features with a traditional remote control but it must be more attractive than the traditional
one. It must not only having simple boring buttons but also images, sounds and colors.
Moreover, people often spend about 1 to 2 minutes to control the air conditioning, so that the
application must do main functions as simple as possible. The screen must display critical information to
users such as temperature, wind levels and schedules.

o Perception and Recognition

Most people think that the more beautiful application will work better than others. If two application
having the same functions, people will be more attracted to the nicer looking one. So that in my
prototype, I replace all simple tradition buttons by the new modern designs which are more attractive,

2
the screen will change background color base on the temperature chosen, wind effects will be shown on
the screen also when user change wind level.
o Memory
It is very important to make critical things in the application different from others, such as make
them larger, or highlight them with special colors. This is very important in getting users’ attraction. In
my prototype, I change traditional buttons by symbols and special designs which are very familiar with
users and also easy to use. Moreover, in changing the temperature I also add effect of snowing falling
with the image of snow flowers. All are designed to make users feel familiar and also not waste too much
time to learn.
o Learning
Normally, users often learn to use an application by using it immediately, they may pass through all
the instruction and manual guides. So that, the design must attract users to explore the functions but be
sure that the application guides users do using properly. This can be only achieved by using familiar icons
or effects which are very popular in the real life. For example, in my prototype, when users switch to
high temperature the background will change to warm color.
o Reading, Speaking and Listening
Some color combinations or layout on the application may causes users find it difficult to read text,
numbers. In my prototype, I use the best suitable color combination such as blue text on the white
background. Moreover, I also add sound in clicking button, it is a familiar sound used in remote control
and the volume level is enough for users to hear it clearly.
o Problem solving, Planning, Reasoning and Decision making
The main issue of problem solving and decision making is that the prototype will make users make
their decisions as quick as possible. The user interface of the prototype design must not complicated
that the users can easily know how to use it at the first time. For example, if the user want to change the
temperature they can easily switch the button at the right corner, or even change the wind level also.
II. Issues for designing application for use in a home environment
The amount of mobile devices are increasing day by day, and the number of mobile application is
growing rapidly. Along with this increasing, these application may contain some issues that an interaction
designers have to concern in designing application.
1. Improper button pressing
Most mobile devices are using touch screen and users use their finger to interact with the application.
The devices’ screen sometimes are small, it will lead users to click on the buttons, or links improperly,
and the application will work in unexpected way. Moreover, some buttons have the same interface,
users may have a wrong click between them.

3
 Therefore, the developers must concern about the size of the buttons, links and others carefully.
Developers have to calculate the size of these elements to fit with the human’s finger, to make sure that
users won’t have improper clicks when using the application.
2. Complicated design
Some applications have a complex design, too many buttons, or too many information are displayed
on the screen. They will make users a bit confusing which button need to be clicked or which information
is important to read, and remember.
Therefore, in designing an application, developers must keep in mind that the application must only
meet users’ requirements, don’t try to add unnecessary features. The application must do the main
functions properly and the interface must be clear. The developers should avoid adding unnecessary
icons and symbols.
3. Don’t have a master – page design
Some applications don’t have a master – page design, each screen has a different design, using
different buttons, images and symbols. This will make users find it hard to use the application, and
confusing in the first use.
The developers must make the design of all screen having the same style, same buttons must do the
same functions, the background colors or images should not change at all.
4. Small screen
Mobile devices often have small screen, developers must consider this as important factor in
designing the interface. The small size will make users hard to read text, numbers. Too many information
are displayed on the screen, and users have to scroll up and down to view full information, this is
inconvenient.
Developers must design the text, numbers in a suitable size that users can easily read it. Moreover,
the screen should show main information and it must be short and correct.
Overcome these issues
To design a good application for a thermostat for smart home, those issues must be avoided.
o Clickable button on the screen must be large enough for users to use to avoid any mistake may occur.
Every button must have a distinctive design, for example, “On - Off” button has different style with
“Agree” button.
o The design must be as simple as possible, but still doing enough function of users’ requirements.
Each screen should do one or two function, don’t have too many button in one screen.
o The design of the application should have a master – page design, all screen must have the same
layout, effects, button style.

4
o Because of the small screen, the application should not show too many information, the temperature
and wind level are the main information and they need to be displayed first.

III. Design principles and methods

1. Design Principles
To develop a perfect mobile application design, developers must follow the design guiding
ideologies, they are a set of standards in designing application. Following these standards will help
developers can design a perfect prototype which users can will find it more friendly, attractive and want
to use it. Design principles are described below.
a) Consistency and Familiarity
Consistency and Familiarity is the key point of a high quality user interface. The prototype of the
application must be designed consistently through all screens from button’s style design, background
color, effects and layouts. Moreover, the application prototype must be consistent with its feature
group, such as other applications do have the same functions. The user interface must be defined at the
beginning of the designing process to be sure the prototype will be consistent.
Consistency in my prototype:
o Language chosen: Language in my prototype is English, it’s the most popular language. I use it to
describe day of the week, it is easy to understand for most users.
o User interface elements: I use some elements such as image button, icons, symbols, colors which are
consistent through all screen.
o Layout: I arrange all functions into a standard layout. For example, on the top of the screen, there
will be an air conditioning, on the right corner, there will be a group of control buttons.
On the other hand, the user interface must be sure it is designed familiar with users’ experience. The
prototype should be designed in a familiar way to users’ experience, and using properly metaphors.
Familiarity in my prototype:
o I use an imitation image of air conditioning position on the top of the screen, the wind window works
similarly to the real one.
o Moreover, when the device is on, snow flowers will be blown out of the air conditioning, the velocity
of these snow flowers will be increased or decreased along with the current wind level.

b) Simplicity
Simplicity is one of the most important principle in designing user interface. The users will find it easy
to use a simple design rather than a complexity. However, developers should not make the prototype
too much simple and forget about the main functions, it is not a good design also. We should have a
balance between them, full functionality in a simple way.

5
 I apply this to my prototype as much as possible to help users don’t be confused when using the
application. For example, I don’t put too much icons, buttons or images on any screen. Buttons control
are positioned at the bottom corner of the application, air conditioning image is on the top of the screen.
c) Accessibility
Accessibility related to the maintaining standards. It includes text size, fonts, images and colors used
in the prototype. Text size must be large enough for all users to read it easily and correctly. Text fonts
must be clear enough to read, don’t use special fonts that are not supported in some devices, it will lead
to errors. Background colors, font colors must be chosen that are suitable for the content. Don’t use too
many colors, it will make users confuse in using the application.
In my prototype, font size minimum is 30dp, it is on temperature control. On the schedule font size
is 50dp, these font size are enough for user to read easily. Moreover, I use background colors that change
along with the temperature level, low level will be cool colors, high level will be warm colors.
d) Usability
The application must be designed that it can be used as easy as possible. It must allow users to
complete their task in an easiest and fastest way. If users find that the application is complex to use, that
means the design is a not a good one, developers must keep in mind that usability is on the top priority.
The application must have enough functions that are listed in users’ requirements, developers should
avoid adding more unnecessary functions that will make the application become useless.
In my prototype, adding new schedule, view all schedules and remove them should be included.
Moreover, switch button group control should be included also, these group could be switched between
left and right corner based on users’ choice.
e) Color contrast
Color contrast plays an important role in the application, it affects the way people can receive
information on the application. That’s the reason why we have to a suitable color combination between
text and background of the application.
In my prototype, I apply the color contrast as much as possible, text color and background color are
always different, button and icons are the same.
f) Sound Effects
Sound effect play an important role in the application. By apply metaphors to visualize the real world,
the application can be more attractive to users.
In my prototype, I apply sound effect on clicking “On - Off” button, the application will play sound
‘Beeps’, on clicking “Agree” button, the application will play sound ‘Pings’, on turning wheel buttons, the
application will play sound “Tik” on every level.
g) Fitt’s Law

6
 Fitt’s Law is one of the principle that needs to be considered in designing prototype. Based on the
law, the design will have buttons that large enough for users to interact with the application.
In my prototype, buttons are not a typical ones, I redesign these buttons, make them more attractive,
not too large, and not too small. These buttons are convenient for users in controlling the functions and
also appropriate with the whole layout.
2. Methodology
In order to design a prototype for thermostat mobile application, I use Rapid Application
Development methodology to develop it. This project’s aim is to design a prototype for a thermostat
mobile application, and this methodology, RAD, can help in creating prototype rapidly with a minimum
planning. RAD is appropriate for the project, that’s why I choose RAD methodology for designing
thermostat application.
Applying RAD, we have to do iterative activities such as researching, gathering, analyzing
information, designing concept, and developing prototype to create a high quality prototype. These
activities are described below:
Researching, gathering, analyzing information: In this phase, we have to combine related information
such as cognitive psychology, and design principles which are mentioned above in order to design the
prototype properly. Moreover, users’ requirements are also collected and analyzed carefully. After that,
a detail planning of the project will be produced fully.
Designing concept: From the information of the previous phase, a conceptual design is created. The
concept will show how the application works, how navigation and information are designed in the
application. Moreover, icons, images, sounds effects and visual effects, and layout styles are also be used
to create the concept. Finally, in this phase, developers must sure that all functions, requirements are
fully designed in the concept.
Developing prototype: After completing the conceptual design, we design a high fidelity prototype.
During this phase, whenever a feature of the prototype is completed, we must check it with the
requirements, the conceptual design, all the work that have done in the previous phases to make sure
that everything is design correctly. If there is anything incorrect, we must fix it immediately. By applying
this iterative process, we also do testing our prototype automatically and errors will have no chances to
occur.

7
IV. Create and evaluate high level prototype
High fidelity prototype

8
9
10
11
12
13
14
15
Design
o Layout
The appearance of the application play an important role in getting attraction of users, choosing
wrong style of layout may cause negative effects from users. If we have an appropriate layout designed,
the application will get a lot of users’ attraction at the first sight. There are many things that need to be
considered in designing layout such as text font, text size and style.
In my prototype, text size and text font are big and clear enough for users to obtain information, I
avoid using special fonts or small size text. In addition, I also added functions such as change background
color, text color, wind effect, falling snow flowers in order to create a high fidelity prototype.
The menu of the application is located on top – left of the screen, “Three dots” menu icon is used
because it is very familiar with all users. This menu can be expanded or collapsed whenever users want
to use.
o Color
All color used in my prototype is chosen carefully from text color, button color, background color. All
these colors are not conflict each other, users can easily distinguish each object in the application.
Background color is changed to the temperature, then users change temperature from warm to cool,
the background color is also changed from warm color to cool color. Moreover, the color of each button
in the button group at the corner are different, also the color of the temperature value is different each
other.
o Buttons
Buttons play an important role in the application, users can only interaction with the application via
buttons, that’s why I design these buttons with distinguish style, button set up temperature if different
with button set up wind level and button “On - Off”. Buttons are located on the corner of the screen, on
the left or on the right, this will make users can easily interact with the application with just one hand,
users will get pleasure when using this type of buttons.
o Sounds
In my prototype, I also add sound effects when users interact with the application. For example, when
users click on “On - Off” button, the application will play “Beeps” sound which is very familiar with all
users, that means device is on working properly. Besides that, when users click on “Agree” button, the
application will play sound “Pings”. When users turn wheel buttons to change temperature level or wind
level, the application will play sound “Tik” on every level.
o Icons Metaphors
In my prototype, I use some icons and images such as air conditioning image, snow flowers icon, wind
icon, wind window of the air conditioning. These images and icons are used to visualize the real thing,

16
they will help users easy obtain the information. For example, when device is working, the wind window
of the device will swing up and down, snow flower icons will be blown out of the wind window and users
will know that the device is working properly. When users change temperature to cooler, snow flower
icons will be blown increasingly, that means it will be cooler.
Evaluation
a) Applying Cognitive Psychology
Icons and images used in the prototype are very familiar to users, and very clear for users to obtain
the information. Images and effects are used with the real world metaphors. Text fonts and text size are
used between screens consistently.

To give a great pleasure when using the application, I use the images and icons having in the real
world, it helps users easy the meaning of those icons and images mean and its function.

17
b) Applying Design Principles
All screens of the application have same style, background color, and layout. Text size and text font
are also not changed through screens. These will maintain consistency of the application and avoid
getting confusing from users. By applying consistency to the design, it will get more users’ attraction in
using the application.
In the prototype, I use icons and images that are familiar with most users. By this way, users will find
it easy to use even at the first time. Moreover, using these familiar objects also helps users to avoid
wrong click, mistake in interacting with the application.
The above prototype is my best design, it is appropriate to the users’ requirements and it is easy to
use for most users. Colors, fonts, images, icons, effects used in the prototype are the most suitable for
the application. I apply as much as possible above Cognitive Psychology, Design Principles to my design
in order to create the perfect prototype.

18
 V. Conclusion
The high fidelity prototype of a smart thermostat application was created based on the Cognitive
Psychology and Design Principles. During the development, I try to solve current issues of mobile
applications in home using environment. Different types of images, icons, effects and sound effects are
used in the prototype. The prototype is evaluated carefully in order to fix missing points, and enhance
features. Those are missing in the current prototype is set for the future work due to the time limitation.
Finally, the high fidelity of smart thermostat is finished and adapt to most users.
VI. References
(1) Dingley, Andy (April 29, 2008) "Card Sorting for Web Design" Online Available at]:
https://en.wikipedia.org/wiki/Card_sorting#References [Last Accessed 02th April 2017]
(2) Color blind image correction. [Online] Available at: http://www.vischeck.com/daltonize/ [Last
Accessed 15th April 2017]
(3) Craig, E. Ed. (1998) Routledge Encyclopedia of Philosophy. London, Routledge. simplicity (in
Scientific Theory) p. 780–783 [Online Available at]:
https://en.wikipedia.org/wiki/Simplicity#References [Last Accessed 02th April 2017]
(4) Henry, Shawn Lawton; Abou-Zahra, Shadi; Brewer, Judy (2014). "The Role of Accessibility in a
Universal Web". [Online Available at]: https://en.wikipedia.org/wiki/Accessibility [Last Accessed
02th April 2017]
(5) Jakob Nielsen (born 5 October 1957) Principle of Consistency and Standards in User Interface
Design [Online] Available at]: https://www.interaction-design.org/literature/article/principle-
of-consistency-and-standards-in-user-interface-design [Last Accessed 02th April 2017]

19