Interaction Design

Course Title: Interaction Design
Course work ID: COMP1649
Submitted to:
Eur Ing Dr Mary Kiernan
Greenwich Coordinator
Submitted by:
Md. Mahbub Alam
ID No: 000788896
Daffodil Institute of IT, Bangladesh
Date: January 11, 2016

COMP1649 – InteractionDesign
1
Table of Contents
1. Introduction:..................................................................................................................................2
2. Cognitive psychology and users .......................................................................................................3
2.1 Cognitive processes considered while designing the prototype ....................................................3
2.2 Cognitive frameworks consideredwhile designing the prototype.................................................6
3. DesignPrinciples.............................................................................................................................7
3.1 Consistency & Familiarity...........................................................................................................8
3.2 Simplicity..................................................................................................................................8
3.3 Accessibility ..............................................................................................................................8
3.4 Efficiency & Usability.................................................................................................................9
3.5 Grid..........................................................................................................................................9
3.6 User accommodation ..............................................................................................................10
3.7 Fitt’s Law ................................................................................................................................10
4. Methodology................................................................................................................................10
5. Reasoning for the use of Multimedia Applications...........................................................................11
5.1 Device ....................................................................................................................................12
5.2 Multimedia type......................................................................................................................12
5.3 Conceptual Design...................................................................................................................13
5.4 Low Fidelity Prototype.............................................................................................................14
5.5 High Fidelity Prototype............................................................................................................15
6. Design..........................................................................................................................................17
6.1 Layout ....................................................................................................................................17
6.2 Color ......................................................................................................................................18
6.3 Images....................................................................................................................................18
6.4 Navigation ..............................................................................................................................18
6.5 Grid........................................................................................................................................19
6.6 Button Functions.....................................................................................................................19
6.7 Icon Metaphors.......................................................................................................................19
7. Evaluation....................................................................................................................................19
8. Conclusion....................................................................................................................................22

2
1. Introduction:
The aim of this coursework is to design a high fidelity multimedia prototype mobile
website suitable for phone or tablet that provides essential information for the new
tourist. The application will allow new tourist to preview different facilities available in
location for new tourist such as- find local landmarks, shopping, places of interest,
medical center(s), places to eat and others information etc. In order to make this a
successful project, the following current key issues for interaction designs will be taken
into consideration and will be documented properly-
 Cognitive psychology- In this part it has been discussed how cognitive psychology
influences the way users will interact with the system.
 Established Design Principles & methodologies- This part include a complete
discussion containing the effective use of established design principles and
methodology that will be used to design the high fidelity multimedia prototype.
 Inclusion & Rationale for the use of multimedia contents- This part includes
discussion on what type of multimedia content will be used in the prototype and
why those have been used.
 Evaluation techniques- This part includes a detailed discussion on the evaluation
of the developed high fidelity prototype.
In the next pages, all of the above points have been clearly discussed in a logical order
and finally a conclusion has been drawn.

3
2. Cognitive psychology andusers
Cognitive psychology defines how a person processes information when it comes to that
person. This includes reading, thinking, remembering, learning, problem solving,
decision making etc. Which are famous as cognitive processes? Cognitive procedures
are two types- experimental cognition and reflective cognition. Experimental cognition
includes attention, perception, thinking, remembering etc. Reflective cognition includes
problem solving, planning, decision making etc. (Jennifer Preece, 2007)
Cognitive psychology now an “is a must’ factor when designing an interactive
application to provide users a better and efficient system and enhance user experience.
We will also have to consider the above mentioned cognitive processes, while
developing the high fidelity prototype for the new tourist. There are also several
cognitive frameworks which are used to predict and explain human behaviors for
interactive designs. We will also have to consider some of those frameworks while
developing the prototype.
This part includes conversation about the cognitive processes and cognitive frameworks
that have been considered while developing the high fidelity prototype.
2.1 Cognitive processes considered while designing the prototype
There are mainly six cognitive processes (includes both experimental and reflective
cognition processes) that have been considered when the prototype had been
developed. These processes can be interdependent which means that several processes
may be required for any give tasks. (Jennifer Preece, 2007)
2.1.1 Attention
As the users of the application will be mainly new tourist, they will be expecting
information about courses suitable for them, local landmarks, places of interest,
shopping, medical center(s), places to eat and other information etc. When displaying

4
this information, it needs to keep in mind that, now-a-days the users want an
application neat and simple. So, this material will have to present in the prototype in
such a way that the users’ won’t have to click for several times to find their specific
material. In the home page of the application, all the necessary information for the new
tourist will have to be listed in category-wise. For instance, the prospective tourist will
be looking for local landmarks, places of interest, shopping, medical center(s), places to
eat and other information etc. On the other hand, new tourist will be looking for local
landmarks, places of interest, shopping, medical center(s), places to eat and other
information etc. Now, if these topics are listed together it will create a muse and the
visitors will get confused.
Dissimilar techniques like animated graphic, icons, colors, ordering of items etc. will
have to use effective so that the users get attracted easily. As the application will be
used in phone or tablets, so the screen size has to be responsive. In this limited space,
all the information will have to represent in such a way so that the screens are not
cluttered and the space are properly used. Also, when it is necessary texts will have to
exchange by proper images and icons.
2.1.2 Perception
Perception refers to how users will acquire information from the application, via the
different sense organs (e.g. eyes, ears, and fingers) and will convert into experiences of
objects, events and sounds. This process involves other cognitive processes such as
memory, attention, language etc. To ensure that users are able to correctly perceive the
importance of the information presented to them, the following points need to be
considered-
 The icons and other graphical illustrations will have to use carefully so that the
users are able to understand their meaning.

5
 The abstracted visual illustrations will have to clearly labeled; also grouped items
will have to be spaced well and defined by borders, instead of colored
backgrounds.
 Texts will have to be legible and distinguishable from the background.
2.1.3 Memory
Memory refers to the recalling of knowledge that allows users to act up appropriately.
Memory can be two types- recognizing and recalling. It has been found in exploration
that, users are much better at recognizing things rather than recalling things. To
promote appreciation the following things can be done-
 It will have to ensure that user is not required to undertake complicated tasks to
acquire his desirable content.
 The interfaces will have to design by using menus, icons, and consistently placed
objects. Only commonly used icons will be used rather than familiarizing new
type of icons. The menus and other objects will also be placed or designed in such
a way that the users are used to.
 The use of icons, buttons and links had better work in a familiar way.
2.1.4 Learning
Users tend to learn through doing, rather than reading, therefore the interface should
encourage exploration, but also guide users into selecting the most proper actions. This
can be achieved by using proper icons or images or buttons for searching, apply for
surfing etc.
2.1.5 Reading, Speaking & Listening
Reading, speaking and listening are related to language processing which have both
similar and different assets. For instance, the sentence "This is the era of technology."
essentially has the same meaning whether the user reads it, speaks it, or hears it. On the
other hand, the easiness with which users can read, listen, or speak varies depending on
the person, task, and context. As the application will be a web application for phone or

6
tablets, the main issue will be regarding the ability to read the text on screen. The app
will have to provide opportunities for making text large on a screen, without affecting
the formatting, for the users who find it hard to read small text. The quality of images
also will have to be taken into consideration for this factor.
2.1.6 Problem-solving, Planning, Reasoning, Decision-making
All these cognitive processes are reflective cognition. They provide discerning about
what to do, what the choices are, and what the consequences might be of carrying out a
given action. The main concern surrounding problem-solving and decision-making is that
a user of the prototype should be able to make quick decisions. The interface should not
be complex that the user must figure out how to use it, before they advance. For
example, if the user can’t find a desirable content in the home page, the application
should have the proper searching function for the users (e.g. searching form/ A-Z
searching index etc.).
Some standards and conventions will also have to follow while developing the prototype
so that the users will be able to quickly adapt to using the interface. For instance,
familiar icons such as the standard “back” and “forward” icons should be used when
viewing image slides.
2.2 Cognitive frameworks considered while designing the prototype
There are five main cognitive frameworks in relation to interaction designs; on the other
hand three of those have been discussed below will be taken into consideration for the
prototype.
2.2.1 Mental Model
Mental models are the conceptual ideas that the users have regarding how to use the
system and how the system works. This can be based on assumptions or actualities. If
the users of the system could develop better mental models of interactive systems, they

7
would be in a better position to know how to carry out their tasks efficiently and what
to do if the system started acting up. (Jennifer Preece, 2007)
For that purpose, the interface for the prototype should aim to follow standard
concepts, by providing spontaneous ways to interact, with clear directions and where
necessary (e.g. providing sitemap of the site), context relevant guidance. Additionally,
the application will require providing the right kind and level of information in the form
of clear and easy-to follow instructions.
2.2.2 Theory of Action
This framework is related to the concepts of “gulf of execution” and “gulf of evaluation”.
This is a goal driven framework. A user has a goal, they decide how they will attain it,
and they perform actions. They then receive response from the interface they have used
to perform the actions, they construe the Material they receive and evaluate whether
the information received has met the original goal. The main goals of visitors of the web
app will be to preview suitable course, with an underlying possibility to use website. The
aim of the web application should be to easily allow users to view the desired contents.
Besides the above frameworks, there is another cognitive framework named external
cognition which is concerned with clarifying the cognitive processes involved when the
users interact with different external representations. (Jennifer Preece, 2007). Basing on
the above discussion, finally it can be said that if these points are kept in mind during
the design and development of the application, the prototype will be a good application
for the new tourist.
3. DesignPrinciples
To produce an effective web application, it is mandatory to look into design ideologies
which are set as standards for designing any kinds of application. By effectively following
the well-established design principles it will likely to develop a better designed

8
prototype which the users will find more friendly and usable. The design principles that
will be taken into considerations for designing the prototype are described below.
3.1 Consistency & Familiarity
The key factors in a good user interface are consistency & familiarity. The UI of the
prototype application will have to be consistent across all parts of the application, from
navigation to color terminology which is generally known as internal consistency.
However the prototype’s user interface will also have to be consistent with its context,
such as other applications in its group. The UI guideline for the application will have to
define earlier to ensure the consistency. (Jovanovic, 2010)
It will have to ensure that the UI contains some contents (e.g. icons) which are used to
to the users. Familiar user interfaces draw on concepts from the users’ previous
experiences and use suitable metaphors. Envelops, for example, are a well-known
metaphor for email services. If other that envelop icon is used in the prototype, the
users will get confused and will be discouraged to use the application.
3.2 Simplicity
Simplicity is one of the basic design principles for user interface design. The simpler a UI,
the easier it is to use. However, the prototype should not be built comprising less
functionality in order to keep the UI simple. Rather, a balance will have to be kept
between functionality and simplicity. Restraint is one of the most efficient ways to
achieve this balance: i.e. Finding the simplest way to solve a problem. (Jovanovic, 2010)
3.3 Accessibility
This is a very important principle for designing the prototype. This is related with
maintaining standards while including images, colors and texts size. The texts size

9
should be big enough (but not too big, cause that would look odd), so that other than
normal users like people with less eye-sight won’t have to try hard to read content.
Similarly appropriate background colors, fonts etc. will have to use in the prototype
so that it is accessible by users with disabilities. Furthermore, the World Wide Web
Consortium (W3C) develops and maintains the protocols used on the web to ensure
interoperability to promote universal access which we will have to follow in order to
make the application more accessible to the users. The application will also have to be
responsive, so that if a user does not access the application with phone or tablet, the
contents adjust and display properly just like table PC’s screen.
3.4 Efficiency & Usability
Users should be able to be efficient when using the application because the users will
use the application hoping to get information easily and quickly. If the users find the
application too complex to use, it won’t be efficient for the users at all. UI’s should allow
users to be efficient and should focus them on completing tasks in the easiest and
fastest way.
Usability is another vital feature that will have to keep in mind during designing of the
application. The application will have to consist of all the useful features that may be
required by the new tourist. Any unnecessary information should be avoided so that the
application does not become too clumsy with information. Relevant useful functions, for
example, appropriate course searching function, online registration function etc. should
be included in the application.
3.5 Grid
Grids are very important factor of the design principles which are generally used to
group certain information together with the application to make it clear to the users. In

10
addition, by implementing grid in the application would give the application a better
structure and would make the information more understandable to the user’s senses
3.6 User accommodation
User accommodation refers to how supple the system is the ability to identify the UI or
providing different techniques to achieve the same goal for various levels of skill; how
aesthetic the interface is; the niceness of the system - is the feedback polite,
appropriate, does it make the user want to join in.
3.7 Fitt’s Law
The use of Fitt’s Law will have to take into consideration while making the application.
According to this law, the users’ will be provided large buttons which will be well spaced
and well defined menu options to interact with the application. The layout order and
the button style also will should to be same for each content type.
4. Methodology
In order to complete the prototype web application successfully, the RAD (Rapid
Application Development) application development methodology will be used in this
project. The RAD approach requires minimal planning in favor of rapid prototyping.
(Wikipedia, 2008) As the aim of this project is to make a prototype mobile website for
new tourist, so it can be said that RAD is appropriate approach for the project.
RAD involves iterative progress and the construction of prototypes. There are number of
stages that need to be carrying out in order to create a good quality prototype. The
phases that will be carried out are clearly included below.

11
o Research & requirements planning phase- In this stage, a thorough research
about cognitive psychology and number of design principles will be done in order
to help with designing the prototype. Later, the requirements of the prototype
will be gathered and detailed planning will be documented for the project.
o System design phase- This stage will include the information design and user
interface design of the application. From the information gathered in the
research & requirements planning phase, a rough layout of the prototype will be
created, which will show an idea of how the navigation or information would be
laid out within the application. Images and icons will also be collected and the
style of the low fidelity prototype will be designed, in order to get a better vision
of the final outcome.
o Development phase- Once the design of the final application is completed, a
prototype creator named “Just-in-Mind” application will be used to develop
the final high fidelity prototype. During the development, every time a new
functionality of the high fidelity prototype is done, it will be compared with the
work done in requirement analysis phase and design phase. If anything
wrong is found then it will be corrected immediately. In this iterative way, the
testing of the final prototype will be done automatically and chances of doing
anything wrong will be lessened.
If the above stages are followed properly, it can be said that it will very possible to
make the project successful.
5. Reasoning for the use of MultimediaApplications
This part contains the rationales about the device the application will be used for and
the multimedia contents which will be used in the application. Also, this part includes

12
the conceptual model of the application, low fidelity prototype and the final high fidelity
prototype. All the things are clearly described under the below.
5.1 Device
The device chosen to be used to create for the application is the iPad device. The main
reason to choose the device is because the users will have access of this application not
just from using desktop but also on the iPad or even in mobile devices. Besides, it is
proficient for the user to obtain information easily and can access the application from
anywhere as now-a-days internet access from mobile devices has become a common
fashion.
The layout and structure of the application on the iPad will be slightly smaller than it
would in a desktop as the height and weight of the hand held device are smaller. So the
information within the context will have to be kept as simple and get the aim of the
application right to the point. This will reduce the chance of user needing to scroll down.
By applying these it will help to lessen the problems for user getting annoyed and will
able to obtain the information faster.
5.2 Multimedia type
The types of multimedia that will be used for the prototype application will be mainly
still images and icons. Still images’ format will be JPEGs and PNGs. Video file’s format
will be in the MPEG-4.
Some users tend to have a better memory in remembering visual images and icons,
rather than plain text or any other forms of media. The use of consistent metaphors
throughout the application will help making it easier for the users to remember all of
the functions. The application will consist of images of location where little description

13
will be on condition that right below them, to provide users with various different visual
methods of gathering information.
Icons that will be used in the app will have to be relevant and familiar to the users. For
example, to provide the functionality of choosing Map facility to the users, appropriate
symbol (such as, Google Map icon) will have to use in the application.
At the home page of the application, a slide show of different images will be used.
Appropriate techniques should be included in the slider to view the pictures. Such to
view next image of the slider “next” icon will have to use, to view an image for long time
pause option will have to deliver.
5.3 Conceptual Design
In this part the key requirements for the prototype has been identified and an abstract
model has been drawn. The following image depicts a high-level use case which explains
the main functionalities of the application from the user “tourist” perspective.
Student
What is best here
Looking for Places to Eat
Shopping
See available local landmarks
Look for Medical Center
Figure 1: Conceptual Design for the prototype.

14
5.4 Low Fidelity Prototype
This part includes a low fidelity prototype for the final application. This has been drawn
from ideas gained and information researched based on the subject selected. Below is a
scanned image of the planned layout structure designed:

15
Figure 2: Low fidelity prototype.
From the above drawing we can see the five basic page design of the final prototype.
The pages are: “Home Page”, “Places to Eat Page”, “Shopping Page”, “local landmarks
Page” and “Medical Center Page”.
5.5 High Fidelity Prototype
This part contains the high fidelity prototype of the final application which has been
created on the basis of the above low fidelity prototype. The high fidelity prototype has
been created using “justinmind” prototype tool. The pictures of some main pages are
included below.

16
Figure 3: Home page of the high fidelity prototype.
Logo
Search Language
Main Menu
Social Icon
Slider
Places to eat
Medical
center info
Welcome
video
introduction
Shopping
centers
Google Maps
to find
places
Information
Tabs
Others
information
linked for
user need
Tab
DescriptionUseful Links
Newsletter
subscription
Copyright
information

17
6. Design
This part includes the description of the designs that has been implemented while
producing the prototype. Different critical factors are clearly pointed out below.
6.1 Layout
As the device selected for the application is iPad, so the design of the layout is a very
important factor to take into consideration. The appearance of the application will be
greatly affected if the proper layout is not maintained. The selection of wrong layout will
lead users to have negative views towards using the application. Whereas if the layout
design is done appropriately, the users will get great pleasure while using it and this
would help to increase the use of the application.
There are many things to be considered but the most crucial factors are headings,
position of the navigation, the style of the images and texts. Generally the heading size
has been made big and bold so that it becomes noticeable and catch user’s eye. The
navigation of the application needs to be placed in such a place where it would be easily
seen by users. Additionally, functions would need to be implemented such as change of
background color, change of color when hovered, underlined etc. To make the
navigation clearer to user the current page they are on.
The size and style of the images are has been included in proportionately the size of the
iPad as the device is smaller than desktop screen. To properly represent the information
appropriate font should be used and adjust it to the background color. The application
should use white space intelligently, as the use of white space, as white space allows
good spacing between elements, allowing them to be easily understood by the users.

18
6.2 Color
Proper color has been be used for fonts, images, icons, background of application,
buttons, fonts etc. All the colors have been chosen maturely. Regarding to the design
principle “accessibility”, color is an important issue as the color used within the
application could affect people with visual disabilities. This issue has been considered
very seriously.
6.3 Images
The home page of the application includes a slide show of different images of tourist,
location. The users will be able to get an overview of the by seeing the slideshow. The
size of the images is based on the apple guideline for high resolution on iPad (144px x
144px). The images have been edited using Adobe Photoshop to provide better quality
images to users.
6.4 Navigation
The navigation links of the application has been placed in standard position- at the top
right after the logo. This is done in order to make it more noticeable to users, enabling
the users to simply just carry out the tasks and lead them to the information they
needed at a faster stride. The navigation has been kept consistent and besides the main
navigation, more links has been provided inside the page to enable users to become
quickly familiar with how to make their way around the system and to prevent
confusion/frustration.
The enable users to be aware of what page they were currently on, the link that the user
currently is on will be highlighted a different color from the other links. Additionally, as
the application is just a prototype, the languages offered only consist of two, which is
English and French.

19
6.5 Grid
Appropriate grids has been used within the application in order to give it a strong
structure and to allow the grouping of information where needed. Two or three
columns grids have been used for the whole application. This was a design principle
adapted to by Apple.
6.6 Button Functions
Many buttons has been used in the total application. All the buttons has been placed in
proper places and used only when necessary. The buttons have been designed by
following conventions used in other applications, to help aid familiarity to users, in order
to help them carry out tasks effectively.
6.7 Icon Metaphors
The icons used within the application in different part of the application are used in
many well-known applications. For example, only widely used icons has been used in
the video and image slides as controls which are also used in other media players. Using
these well-known icons to carry out functions within the media player allows for users
to bring over their knowledge and experience with how to use them and carry out their
tasks effectively. Additionally, this aids familiarity to the users and enables them to
quickly come to terms with how to use the functions that has been provided in the
application provided.
7. Evaluation
The aim of the coursework was to develop an interactive application for the new tourist.
The purpose of the application is to provide new tourist the best and easiest way to
collect relative information they require.

20
As the production of the system has been completed, it’s high time to evaluate the
overall development procedure of the application.
Are the interactive devices (e.g. buttons) appropriately sized and spaced for touch screen
use?
The interface of the system has been developed by following Fitt’s Law, by providing
users with large buttons which are well spaced and well defined menu options. The
layout order and the button style is the same for each content type. The images show
the well sized buttons and in the case of the content page, the spacing between
buttons, ensuring that the user has less opportunity to select the wrong option.
Is the design consistent throughout the application?
All of the pages within the web application follow a consistent format for navigation and
other functionalities. The main navigation choices are provided at the top of the screen
and images have been used only in some particular places. The only fault of the design is
the fixed footer. The drawback of using a fixed footer means that when viewed on a
smaller screen (such as an iPhone), the footer floats, and occasionally covers content.
Does the application use familiar icons and terminology?
The icons used throughout the application are pretty common and users will easily
recognize those icons. For example, for image slideshow appropriate control symbols
has been used. The very same controls have been used for videos which are generally
used different media players.
Is there perceived affordance for the interactive elements?
The interfaces of the application use common forms for both navigations and actions
(e.g. buttons). Because of this a perceived affordance and expectation has been met for

21
the user. Buttons has been carefully used and can be clearly distinguished from the
background on the preview pages.
Are buttons, text, images suitably visible?
Buttons, texts and images has been presented in the different pages in such a way so
that those are clearly visible to the users. Appropriate fonts, font-sizes, font-color,
background colors has been used to make this possible.
Is the menu system simple?
The navigation of the application is pretty simple and has been organized in a regular
fashion. Only six parts has been used and clearly highlighted, so the users will be able to
identify those easily.
Is the use of color within the interface appropriate?
Black is the main color of the application. Also, gray, white, green, yellow etc. has also
been used for different components for the application. Because of using these colors,
the contents are clearly visible to users.

22
8. Conclusion
From the above discussion it can be said that, the application interface meets the
majority of the evaluation criteria, as defined against the design principles adopted. The
primary concerns of usability, in terms of navigation, visibility of buttons for previews
and consistency in design/function have been met through the design. If the prototype
were turned into a fully functional product, the users of the application would be greatly
benefitted.
Finally, it can be said that the project has been done successfully.

23
Bibliography
JenniferPreece,Y.R.H.S.(2007) Interaction design:Beyond Human-ComputerInteraction,3rd
edition,
NewYork:John Wiley&Sons,Inc.
Jovanovic,J.(2010) Designing User InterfacesForBusinessWeb Applications,25thFebruary,[Online],
Available:http://uxdesign.smashingmagazine.com/2010/02/25/designing-user-interfaces-for-
businessweb-applications/ [10Nov2013].
Wikipedia(2008) Rapid application development,October,[Online],Available:
http://en.wikipedia.org/wiki/Rapid_application_development [13Nov2013]

Interaction Design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Interaction Design

Similar to Interaction Design (20)

More from Md. Mahbub Alam

More from Md. Mahbub Alam (7)

Recently uploaded

Recently uploaded (20)

Interaction Design