The academic report for Interaction Design Subject by Nay Linn Ko.

1. INTERACTION DESIGN
COMP- 1649 Page 1
Student Name: Nay Linn Ko
UOG Student Register ID: 000898709
Coursework Title: Interaction Design
COMP 1649: Interaction Design
Due Date: 17th
April 2015
Centre: KMD (Yangon, Myanmar)

2. INTERACTION DESIGN
COMP- 1649 Page 2
Acknowledgement
First of all, I like to acknowledge the responsible persons from University of
Greenwich who provide this coursework for students. I would like to thanks to all the authors
and researchers who researched about Interactive Web Design. Moreover, I would like to present
my appreciation for our lecturer, Mr. Francis Murphy, for his great and expert lectures and
guidelines. Last but not least, I would like to thanks to responsible teachers and staffs from our
centre, KMD for providing such a good learning environment.

3. INTERACTION DESIGN
COMP- 1649 Page 3
Table of Contents
1. Introduction................................................................................................................................5
1.1 Investigating Current Issues in Mobile Design..............................................................6
1.2 How to Avoid the Issues in the Prototype ....................................................................7
1.3 Summary .......................................................................................................................7
2.Applying Cognitive Psychology for the Prototype...................................................................8
2.1 Key Issues of Cognitive Psychology in Mobile Website Design ..................................8
2.1.1 Understanding Cognitive Psychology...............................................................8
2.1.2 Importance of Cognitive Psychology in Mobile Website Designs.................8
2.1.3 Issues of Cognitive Psychology in Mobile Website Designs .........................8
2.2 Evaluating Cognitive Psychology Used in Similar Mobile Websites .........................10
2.3 Using Human Cognition in the Prototype....................................................................12
3. Choosing Multimedia...............................................................................................................13
3.1 Types of Multimedia that Could be Used....................................................................13
3.2 Evaluating Multimedia Used in Similar Mobile Websites ..........................................13
3.3 Justifying Chosen Multimedia for the Prototype.........................................................14
4. Justifying Design Principles and Methodologies...................................................................16
4.1 Design Principles .........................................................................................................16
4.1.1 Justifying Chosen Design Principles for the Prototype ................................16
4.2 Methodologies..............................................................................................................17
4.2.1 Justifying Chosen Methodology ...................................................................17
5. Developing High Fidelity Prototype.......................................................................................18
5.1 Feasibility Study and Foundation ................................................................................18
5.1.1 Interviewing the Potential Users...................................................................18
5.1.2 Usability and User Experience Criteria ........................................................19
5.1.3 Applying Researched Results in Final Prototype .........................................20
5.2 Design and Build Iteration...........................................................................................21
5.2.1 Conceptual Design (Site Map) for the Prototype .........................................21
5.2.2 Drawing Low Level Prototype .....................................................................22
5.2.3 Evaluating Low Level Prototype ..................................................................24
5.3 Engineering..................................................................................................................25
5.3.1 Developing High Fidelity Prototype Using Software...................................25

4. INTERACTION DESIGN
COMP- 1649 Page 4
5.3.2 Evaluating High Fidelity Prototype ..............................................................26
5.4 Testing..........................................................................................................................31
5.4.1 Feedback from users .....................................................................................31
5.4.2 Checklist for High Fidelity Prototype...........................................................32
5.5 Missing Things and Further Enhancement .................................................................32
5.6 Summary......................................................................................................................32
6. Conclusion ................................................................................................................................33
7. References.................................................................................................................................34
Appendix.......................................................................................................................................36

5. INTERACTION DESIGN
COMP- 1649 Page 5
1. Introduction
The use of mobile devices such as tablets and smart phones are increasing
dramatically because of their portability and multi-function features. A lot of information could
be accessed online by using mobile devices. According to “Electronic Commerce (2008) A
Managerial Perspective” by Efraim Turban, wireless computing using mobile devices provides
ubiquity, convenience, interactivity, personalization and localization.
We are going to develop a high fidelity prototype mobile website for mobile
smart phones. Mobile phones are chosen because of their popularity in the market. A lot of
people use smart phones more than PCs and tablets.
The mobile website will enable people to search especially academic institutions,
along with local amenities, such as medical centres, places of worship, shopping malls and
places to eat and stay. It would also provide an approximate cost where applicable. The name of
the website would be “Myanmar Academic Institutes Directory”.
The mobile website will be focused for Android OS. This is because most of
people are using Android platform rather than iOS, Windows Phone, Blackberry etc., Due to the
broad market of Android phones, we chose Android platform for our prototype.
While developing the mobile website, human-device communication channel is
required to consider. Human-device communication channel which depends on users’ memory,
mental model, device portability and screen size must be considered in designing stage of the
mobile website.

6. INTERACTION DESIGN
COMP- 1649 Page 6
1.1 Investigating Current Issues in Mobile Design
Mobile websites which can give good UX, interactivity and convenient usability
is known as responsive sites (RWD) (Ref: http://netobjects.com/mobile-site.html ). There are
some issues in designing the mobile website as mobile websites are being used increasingly.
Some of these issues are following.
Screen Size
A lot of mobile devices such as tablets or smart phones are different in screen
size. A mobile website must be reliable with all of these different screen sizes.
Mobile Browsers
Another issue is about mobile browsers. Some mobile website features are not
suitable or appear in some browsers.
Navigation
In the past, navigation on sites was horizontal along the top of the page, or
sometimes down the left of a page. It now needs a more consideration for mobile phones.
Images and Icons
Images and icons should also be as flexible as possible to ensure that graphics on
high-pixel-density devices.
Data Tables
Data tables are being problematic issues in mobile websites, particularly when
they have to contain complex information or simply a large number of rows and columns.
Testing
Another issue is about testing. As we know there are a number of mobile devices
with different platforms, we need to consider how to test, what device to test with. There would
be huge cost of building a test suite of devices.
Testing Time
Testing time is also an issue. It will be time consuming to test a mobile website
with a lot of mobile devices. Time is assumed as money.
Redesigning
Redesigning old fixed-width website for mobile version is also an issue.

7. INTERACTION DESIGN
COMP- 1649 Page 7
(Ref: http://blog.usabilla.com/15-responsive-web-design-problems-dont-want )
1.2 How to Avoid the Issues in the Prototype
We need to build the website that automatically adjusts to any mobile device
screen. Using intelligent software, the website can adjust to mobile devices with different screen
sizes. The mobile website needs to automatically load the correct layout and resolution with
customized font and images that are “retina-ready”.
A lot of countries such as New Zealand, internet signals are still relatively slow
and expensive. Therefore, we also need to consider data loading time. Using adaptive images
serve images appropriate to the size of the user’s screen so users are not downloading large file-
size images designed for desktop computers. Testing the website on various mobile devices is
critical.
Full screen navigation, usually accessed via a button or navigation icon, is
currently developing in mobile website design. Many designers are starting to implement full
screen navigation designs when viewing the website on mobile devices.
Storytelling option in mobile website is a powerful tool that can be used to
understand what the website is. The user can perceive the road map or structure of the website.
Telling about the website as a story gives the visitor more satisfaction. It helps to build more of
an emotional attachment to the website. (Ref: www.zingdesign.com/tag/responsive-website )
1.3 Summary
We will develop a high fidelity prototype of a mobile website named “Myanmar
Academic Institutes Directory”. The mobile website is focused for Android OS. We
investigated current issues in mobile design and how the result feed into our mobile website
prototype. And, we critically discussed how to avoid the mobile design issues in our final
prototype.

8. INTERACTION DESIGN
COMP- 1649 Page 8
2. Applying Cognitive Psychology for the Prototype
2.1 Key Issues of Cognitive Psychology in Mobile Website Design
2.1.1 Understanding Cognitive Psychology
Cognitive psychology is how the people learn and think about things. It is about
the way people conceptualize things. Norman (1993) distinguishes two kinds of cognition;
experiential and reflective cognition. Experiential cognition is a state of mind in which we
perceive, act and react to events effectively and effortlessly (for example, reading, having a
conversation). Reflective cognition involves thinking, decision making and problem solving.
Cognitive processes can also be described into specific kinds. They are-
 attention
 perception and recognition
 memory
 learning
 reading, speaking and listening
 problem solving, planning, reasoning and decision making
2.1.2 Importance of Cognitive Psychology in Mobile Website Designs
The cognitive processes are independent from each other. Several cognitive
processes could be involved in a single activity. For example, when we find particular
information in a website, we need to attend the key words, perceive, and read it, think about it,
and then try to remember it. Therefore, cognition involves a range of processes.
Cognitive Psychology is critically important in designing the mobile websites. If
two websites that function equally well are presented to someone, that person would prefer the
nicer looking design. Using cognition in the websites would lead to get repetitive visits from the
users. (Ref: Preece, Rogers, Sharp (2002) “Interaction Design”)
2.1.3 Issues of Cognitive Psychology in Mobile Website Designs
There are some issues in mobile website design deal with cognitive psychology.
Some of these issues are described as follow.
The issues are referenced from www.bijucreative.com/about/psychology .
Issue 1- People prefer reading on paper than on a screen.
Cognitive Psychology- Attention
Most people do not like to read on a mobile screen as the screen size is generally
small. It is also difficult to pay attention. Therefore, we need to try to reduce the amount of text
on the website as possible. Short messages will be more effective than long messages.

9. INTERACTION DESIGN
COMP- 1649 Page 9
Issue 2- Sustained attention lasts only 7 to 10 minutes.
Cognitive Psychology- Attention
A number of people can give sustained attention for only 7 to 10 minutes. Base on
this knowledge, the mobile website would be required to display critical information to users
within 7 to 10 minutes.
Issue 3- People use physical appearance as an indicator of quality, and prefer nice
designs over the purely functional.
Cognitive Psychology- Perception and Recognition
Most of the people think that something that looks nice must also work well. If
two websites that function equally well are presented to someone, that person would recognise
the nicer looking design.
Issue 4- People forget things that are not significant.
Cognitive Psychology- Memory
We need to understand what is important in our website design. It is critical to
make important things appear larger than unimportant things, or highlight the important things
with different colour. Otherwise the user will forget easily about the important information.
Issue 5- People are difficult to memorize a set of numbers such as phone numbers.
Cognitive Psychology- Memory
People are very easy to forget the numbers (for example- phone numbers, bank
accounts). Therefore, when we are going to provide some numbers in the website, broken down
into chunks of 3 or 4 items would be useful. For example, “09-430-400-43” would be easier to
memorise than “0943040043”.
Issue 6- Our minds wander one-third of learning time.
Cognitive Psychology- Learning
When we are learning something, our attention could not be concentrated all the
time. For example, when we are reading on the website, we might be thinking of what to buy at
the grocery store. One of the solutions is to add a lot of hyperlinks in our website, but allow the
users to always know where they are in relation to our website.
Issue 7- Certain colour combinations are more difficult to read.
Cognitive Psychology- Reading, Speaking and Listening
Some colour combinations on the website are very difficult to read. For example,
imagine blue texts on red background. The best colour combination for the easiest readability
might probably be black text on white background.

10. INTERACTION DESIGN
COMP- 1649 Page 10
Issue 8- Most decisions are made unconsciously.
Cognitive Psychology- Decision Making
Some people are not aware that their decisions are affected by social pressure or
motivation from other people. Therefore, we have to know that the decisions of people can be
changed by the environmental factors.
2.2 Evaluating Cognitive Psychology used in Similar Websites
As an inexperienced interface designer, evaluating the existing mobile websites is
the best way to know the mistakes and responsive designs. The following two mobile
applications, Brilliant Directory and Sm3 Directory would be used to evaluate how cognitive
psychology is embedded in.
Brilliant Directory Sm3 Directory

11. INTERACTION DESIGN
COMP- 1649 Page 11
Attention
In Brilliant Directory, icons are shown together with texts. This can enhance the
user attention and could be easily memorized. The icons are not shown together with the texts in
Sm3 Directory. Both of the applications include the essential needs for users but some icons are
difficult to understand. Users might confuse what the icons actually meant, consequently, this
can impact users’ attention.
Perception and Recognition
Some icons or metaphors used in Brilliant Directory are from real world. By using
interface metaphors from real world, the perception and understanding of the users would be
improved. There are no logos or images of organisation or places in describing the organisations
or places in both applications.
Memory
According to Miller’s 7+_2 theory, the icons shown in a web page should be 6 to
9. Users would confuse which icons are the most essential ones if there are many icons. Users
may also difficult to memorize the important icons. In Brilliant directory, there are a lot of icons
in a single page, making user difficult to memorize.
Moreover, in each application, there is no scrollbar to pull down. We should
provide scrollbars in a web page otherwise the users would be difficult to remember where they
are, at the top of the page or bottom of the page.
Difficult to understand the
icons
Real world metaphors
A lot of icons are used in
single page.
No scrollbar

12. INTERACTION DESIGN
COMP- 1649 Page 12
2.3 Using Human Cognition in the Prototype
Applying the cognitive psychology in our mobile website prototype is a key to
produce responsive or interactive product. Followings are the way how we use cognitive
psychology in the mobile website prototype.
 Displaying beautiful and satisfactory background surface, animations and sound effects
in the website can catch up users’ attention and improve recognition.
 It is critical to make important things appear larger than unimportant things, or highlight
the important things with different colour.
 Describing images and maps of destinations (such as medical centres and academic
institutes) can improve not only attention but also learnability of the user.
 Because of the small display of mobile devices, we should not use a lot of text that makes
users head ache. We should use images or other multimedia tools rather than texts.
 The arrangement of web pages and icons should be carefully considered otherwise the
users will be difficult to explore the website.

13. INTERACTION DESIGN
COMP- 1649 Page 13
3. Choosing Multimedia
3.1 Types of Multimedia that Could Be Used
Multimedia is a content that combines different media forms such as texts and
images. Multimedia is recorded or displayed by electronic devices. By using different
multimedia types in mobile website design, the users can perceive the information vividly.
Generally, multimedia can be divided into linear and non-linear multimedia.
Linear multimedia is a kind of multimedia with no navigational control for the viewer, for
example, cinema presentation. Non-linear multimedia allows viewer to control interactivity, for
example, computer games.
There are a number of multimedia types. They are text, audio, image, animation,
video, or other interactivity devices. (Ref: www.wikipedia.org/wiki/Multimedia )
3.2 Evaluating Multimedia Used in Similar Mobile Websites
Brilliant Directory Sm3 Directory

14. INTERACTION DESIGN
COMP- 1649 Page 14
In Brilliant Directory, multimedia such as images, icons and metaphors are richly
used. Each icon used in the website makes the user understand the meaning. The interface
metaphors are applied together with texts. Audios and video are not applied.
In Sm3 directory, multimedia such as icons and images are applied but are not
well organised. Unlike with Brilliant Directory, icons and interface metaphors are not described
together with the texts, making the user difficult to understand what the icons mean. As in
Brilliant Directory, it does not include audio and video supports.
Based on these researched knowledge, we are going to develop high fidelity
prototype for “Myanmar Academic Institutes Directory”.
3.3 Justifying Chosen Multimedia for the Prototype
Here we will describe about different multimedia options that are going to be used
in our final prototype.
Texts
Text is a kind of basic multimedia. Displaying texts on the mobile websites which
interact with the users to get information is critically important. We should provide different
languages in our mobile website.
Still Images
Still images or single static images are very useful to provide information to the
user. By displaying images of academic institutions, medical centres and shopping malls, the
website can be improved not only in term of effectiveness, but also in user experience.
Animations
Animation is the process of creating motion pictures. It is the rapid display of a
sequence of static images. They are very important in web technology. Using animations will
enhance the interesting of the users.
Metaphors and Icons
By using metaphors and icons in the mobile website, users can understand the
website easier. Users can better understand the concept that we want to give. Interface metaphors
can enhance the satisfactory of the users. Based on the idea used in Brilliant Directory, we would
combine the icons and texts to enhance user to understand.

15. INTERACTION DESIGN
COMP- 1649 Page 15
Maps
By providing the maps of academic institutions, restaurants and shopping malls,
the effectiveness and user experience of the user will be improved.

16. INTERACTION DESIGN
COMP- 1649 Page 16
4. Justifying Design Principles and Methodologies
4.1 Design Principles
Throughout the development process, we should consider about design guidelines
and standards which are provided by professional organisations. These guidelines and standards
are known as design principles. Guidelines and Standards are critically important. This is
because guidelines and standards are derived from practical experiences of what has worked well
or badly in the past.
A number of guidelines and standards are provided by different organisations, for
example, Microsoft and Apple (platform based), ISO and IEEE standards, and professional
bodies such as W3C and the British Computer Society.
Among them, we would use W3C guidelines throughout the development
process of the prototype.
4.1.1 Justifying Chosen Design Principles for the Prototype
The following are design guidelines from W3C for mobile website design. They
are referenced from www.w3.org/2010/09/MWABP . (Accessed 9th March 2015)
1. Reduce Data Loading Time
 Reduce file sizes of images and animations.
 Try to compose background images and navigation bars in line with CSS style sheets.
2. Limit text size
 Limit the text size.
 Heading texts should not be larger than twice the size of paragraph text.
3. Limit the number of different colours used on a page.
 Different colours lead users to be difficult to read.
 Do not use background images on mobile web pages.
4. Be consistent
 Use consistent design.
 Use common colour, banner and backgrounds.

17. INTERACTION DESIGN
COMP- 1649 Page 17
5. Design for Flexibility
 Design to be used by different devices.
 Reduce complex data.
 Keep the website simple.
4.2 Methodologies
There are different methodologies that could be applied to develop the final
prototype. Some of the methodologies are-
 Structured Systems Analysis and Design Methodology (SSADM)
 Rapid Analysis and Design (RAD)
 Dynamic Systems Development Method (DSDM)
4.2.1 Justifying Chosen Methodology
We chose DSDM methodology to develop the high fidelity prototype of
“Myanmar Academic Institutes Directory”. The followings are the reasons why we chose
DSDM.
 The report must be finished on deadline date and DSDM can help us because it is time
constrained method.
 By using DSDM, we can build iteration which is not allowed in SSADM.
 Misunderstanding and false decisions are corrected earlier.
 DSDM is very easy to apply to small and medium business systems.
 DSDM is user driven methodologies.
(Ref: Jennifer Stapleton (1997) “Dynamic Systems Development Method”)

18. INTERACTION DESIGN
COMP- 1649 Page 18
5. Developing High Fidelity Prototype
5.1 Feasibility Study and Foundation
5.1.1 Interviewing the Potential Users
The possible user types of “Myanmar Academic Institutes Directory” mobile
website would be-
 Students and possible students from Myanmar
 Travellers
In this part, I would like to describe the interviews with an academic student and
traveller. The interview questions were based on interviewees’ experience of using similar
websites - “Brilliant Directory” and “Sm3 Directory”.
Interview type would be semi-structured interview. This type of interview is
guided by a script but interesting issues can be explored in more details. Here are the questions
and their answers during interview.
The questions are based on the concept of mobile web design issues, cognitive
psychology, multimedia and design guidelines. Because the interviewees do not understand
cognitive psychology or guidelines, we did not mention directly.
Question Student Traveller
Do you like surfing internet using mobile phones than PCs? (mobile web issue) Yes No
Do you always search information you need via mobile phones? (mobile web
issue)
Yes Yes
Do you want mobile version of websites to have “Story telling or Site map”
option? (cognitive psychology)
Yes Yes
Do you want to view its map while you are searching a destination? ? Yes
Do you understand the icons that used in “Brilliant Directory”? (cognitive
psychology)
Yes ?
Do you understand the icons used in “Sm3 Directory”?(cognitive psychology) No ?
Do you like images used in “Brilliant Directory” such as Pagodas? (guidelines) No Yes
Do you like images used in “Sm3 Directory”? (guidelines) Yes Yes
Do you think the websites should have audio and video files? (multimedia) ? Yes
Do you think the websites should provide to download audio and video files?
(guidelines)
No ?
Here are other interesting issues discussed with interviewees in details.
 The traveller said that the icons used in Brilliant Directory are easier to understand than
in Sm3 Directory because the icons are shown together with texts.
 The student does not prefer to use images which can impact religious and cultural
conflicts. (For example- The image of the pagoda used in Brilliant Directory.)

19. INTERACTION DESIGN
COMP- 1649 Page 19
 The student wants to view videos online via mobile phones but it would need faster
internet speed.
 Because of huge file sizes of video files, both of the interviewees do not want to
download video files via mobile phones.
The knowledge got from the interview results will be applied in the high fidelity prototype.
5.1.2 Usability and User Experience Criteria
Developing a set of usability and user experience criteria is critical in requirement
gathering. Later these criteria could be used to measure the system. Usability and user experience
criteria could be set in DSDM methodology.
We will develop a set of usability and user experience criteria which are
measurable.
Attribute Name Loading Time
Measuring Concepts Easily transfer one website page to another page.
Measuring Methods Time that need to transfer one page to another.
Allowed Worst Case 15 seconds
Planned Level 10 seconds
Best Case 5 seconds
*Note that Data loading time is also depend on mobile browser.
Attribute Name Time to search an academic institute (Effectiveness)
Measuring Concepts User can search required information fast and easily.
Measuring Methods Time that need to search an academic institute.
Allowed Worst Case 2 minutes
Planned Level 1 minute
Best Case 30 seconds
Attribute Name User Satisfaction
Measuring Concepts User satisfaction with our website compared to another similar
website.
Measuring Methods Ratio of user questionnaire scores
Allowed Worst Case Two websites are equally preferred.
Planned Level Our mobile website 20% preferred over another website.
Best Case Our mobile website 50% preferred over another website.

20. INTERACTION DESIGN
COMP- 1649 Page 20
5.1.3 Applying Researched Results in Final Prototype
Throughout the developing stage of final prototype, we are going to apply the
cognitive psychology, multimedia and the guidelines that are discussed in the above sections.
These research results will improve not only the usability effectiveness but also the user
experience of “Myanmar Academic Institutes Directory” mobile website.
We are going to develop the high fidelity prototype mobile website for mobile
smart phones. Mobile phones are chosen because of their popularity in the market. The mobile
website prototype will be focused for Android OS. This is because most of people are using
Android platform rather than iOS, Windows Phone, Blackberry etc.,
How Cognitive Psychology should be used?
The texts and icons should be used simple and clear. The error messages should
also be easy to understand. The important information should be displayed with larger texts. We
should not use colourful background image which can impact the reading. The arrangement of
web pages should be simple and easy to learn.
How Multimedia should be used?
We should provide different languages in our mobile website. Interface metaphors
or icons will be applied richly together with the texts to enhance user understanding. Images of
academic institutions, along with local amenities such as places to eat and stay will be displayed.
The map of the academic institutions and its amenities will also be provided. We will provide
audio files in some places. Video files are not preferred because of the file sizes.
How Design Principals and Guidelines should be used?
According to W3C guidelines for mobile website designs which are discussed in
above 4.1.1 section, background images will not be used on our mobile web pages. We will limit
the text size and colour that used on our final prototype. It is also required to reduce data loading
time as possible.

21. INTERACTION DESIGN
COMP- 1649 Page 21
5.2 Design and Build Iteration
5.2.1 Conceptual Design (Site Map) for the Prototype

22. INTERACTION DESIGN
COMP- 1649 Page 22
Critical Scenario
Through this report, we are going to explain the following critical scenario, which
is the most important by normal flow.
Task Analysis for Critical Scenario
0. Home Page
1. Go to Regional Institutes List Page
1.1 Go to Academic Institute Page
1.2 Go to “List of Hospitals” Page (Local Amenity Page)
1.3 Go to “Hospital” page (Particular Hospital)
1.4 View Hospital Information

23. INTERACTION DESIGN
COMP- 1649 Page 23
5.2.2 Drawing Low Level Prototype
The following low level prototypes were drawn based on the knowledge of issues
in mobile phone websites design, cognitive psychology, multimedia and design guidelines
which were discussed in above sections. The issues found in similar mobile phone websites were
considered and are tried to avoid while drawing low level prototypes.
Home Page List of Academic Institute Page Academic Institute Page
Interaction Type that we are going to used in “Myanmar Academic Institute
Directory” would be Instructing. Instructing is interaction by means of commands and selecting
options.
Home PageNavigation Search
Button
Multimedia
usage (Image)
Scroll Bar
(Cognitive
Psychology)
Icons along with texts
Academic
Institute Lists
Back Button
(Cognition)
Consistent Web
Template (W3C
Design Guideline)
Alternative
text (W3C
guideline)
Academic
Institute Page
Using
Multimedia
(Audio, Image)
Academic
Institute map
Icons along with texts (Cognition)

24. INTERACTION DESIGN
COMP- 1649 Page 24
Instruction
1. Home screen is appeared. The user clicks on “Yangon Division” button.
2. The list of academic institutes in Yangon Division is displayed. The user clicks on
“Yangon University” button.
3. “Yangon University” page is shown. The user can choose its local amenities, hospitals,
places of worships, shopping malls, places to eat and stay.
5.2.3 Evaluating Low Level Prototype
The issues of mobile website designs are tried to fix in the low level prototypes.
Navigation icon is used in order to be easy to use and avoid the issue of navigation bar in mbile
websites. By clicking navigation icon, the user can view the “story telling” option which explain
the flow or the site map of the website. By using consistent web template, the images and icons
in the website are flexible to different screen sizes.
Cognitive psychology deal with mobile website desgin is also fed in the
prototype. The icon “>” is used to display the link to another page. Using scroll bar, deals with
cognitive psychology, the user can easily know where he is and where to go next. Icons are
shown together with the texts and the users can easily understand what it is meant. By showing
logos of the academic institutes, the users can easily recognise the institutes that they find
without recalling.
Multimedia such as images of academic institutes, icons of local amentities,
audio explanations and logos of the academic institutes and the maps are richly used in the above
low level prototype.
According to W3C guidelines for mobile website design, consistent web
template such as common background color, common banner and icons are used. Alternative text
buttons are used in order to hide a lot of texts on the web page and to get more spaces. The
images used in the website would be smaller than 100 pixels.
Remark: This is not the final evaluation. We are going to add more options into the
prototypes and make more specific evaluation after developing high fidelity prototype.
Summary
The knowledge based on issues in mobile phone websites design, cognitive
psychology, multimedia and design guidelines were fed into drawing low level prototype. After
that, we evaluated the low level prototypes.

25. INTERACTION DESIGN
COMP- 1649 Page 25
5.3 Engineering
5.3.1 Developing High Fidelity Prototype Using Software
Based on the low level prototype, the high fidelity prototype of “Myanmar
Academic Institute Directory” was developed as following. The application that was used to
develop the high level prototype is Axure RP Pro 7.0.
Home Page List of Academic Institutes Page Academic Institute Page
(For all the pages of high fidelity prototype, see Appendix.)
Using
Multimedia
(Audio, Image)
Search
Button
Navigation Academic
Institute Page
Back Button
(Cognition)
Academic
Institute Logo
(cognition)
Multimedia
usage (Image)
Academic
Institute map
Alternative
text (W3C
guideline)
Local Amenities Icons along with
text (Cognitive Psychology)
Consistent Web
Template (W3C
Design Guideline)
Icons along with texts
Scroll Bar
(Cognitive
Psychology)

26. INTERACTION DESIGN
COMP- 1649 Page 26
5.3.2 Evaluating High Fidelity Prototype
How Cognitive Psychology is applied?
Attention
The texts and sentences used in the “Myanmar Academic Institute Directory” are
simple and easy to understand for the user. Icons are shown together with the texts so that
users can understand what the icons are actually meant. To maintain attention of the user,
consistent web template such as common background colours and banner are used. The overall
design of the website is simple so that user can easily concentrate.
Perception and Recognition
The names of the academic institutes are shown together with their respective
logos. These logos can help if the users do not remember the institute name. The users can easily
recognise without recalling. Moreover, the use of “>” sign can be easily perceptible that there is
a link to another page.
Icons are shown together
with texts
Consistent Web Template
“>” sign makes easy to
understand.
Institute names are shown
together with logos

27. INTERACTION DESIGN
COMP- 1649 Page 27
Memory
By looking scroll bar, the users can remember where they are, at the top of the
page or bottom of the page. The numbers such as phone numbers are broken down into chunks
so that users can memorise easily. By looking at the page title, users can easily remember where
they are.
Learning
Peoples’ mind wander one-third of learning time. Therefore, we provide
alternative texts or hide texts to pretend the paragraph is short, attracting users to read it. If
someone who does not want to read the texts, we provide audio version of the academic institute
information.
Page title shows
where the user is.
Phone number in
chunks
Scroll bars make users to
remember where they are
Alternative or
Hided text
Audio version makes
easy to learn

28. INTERACTION DESIGN
COMP- 1649 Page 28
Reading, Speaking and Listening
We mentioned that certain colour combinations are difficult to read in section
2.1.3. Therefore, we used black texts on the white background. The text sizes are limited so that
the users can read easily. Heading texts are two times bigger than normal texts in order to
support easy reading for users.
What multimedia types are provided?
Image
Images of academic institutes and their local amenities are displayed. The logos
of the academic institutes are also shown together with the name.
Audio
Mp3 file format is used to provide audio. The audio files are applied to give the
information of the academic institutes.
Texts
As the texts are basic multimedia type, we use texts in the prototype richly.
Headings are two times
bigger than normal text
Black texts on white
background

29. INTERACTION DESIGN
COMP- 1649 Page 29
How W3C guidelines are followed?
1. Reduce Data Loading Time
To reduce the data loading time, we tried to limit the image sizes not to over 200
pixels. The consistent web template (common navigation, banner) is used so that we can
compose different web pages in a CSS style sheet to reduce the data loading time.
2. Limit Text Size
The paragraph text size in the prototype is fixed. According to the W3C design
guidelines, the heading texts are two times larger than paragraph texts.
3. Limit the number of different colours used on a page.
Certain colour combinations such as blue text on red background are very
difficult to read for the user. In our “Myanmar Academic Institute Directory” mobile website
prototype, we use black texts on white background. We did not use different colours on a web
Image sizes not to
over 200 pixels.
Consistent Web Template
Headings are two times
bigger than normal text

30. INTERACTION DESIGN
COMP- 1649 Page 30
page. We use blue for icons, scroll bars and buttons. Moreover, background images were not
used because of the different colours.
4. Be consistent
Consistent web template such as common background colour, common banner,
navigations and icons are used. Consistent web design can enhance usability and user experience
for the users.
5. Design for Flexibility
Although above high level prototypes are focus for mobile smart phones, other
mobile devices such as tablets and note book can be used flexibly. By using CSS style sheet, we
can adjust the width and height of the web pages.
No background images
Used blue color mostly
Consistent Web Template

31. INTERACTION DESIGN
COMP- 1649 Page 31
Missing things and further enhancement
There are a lot of missing things deal with mobile website issues, cognitive
psychology, multimedia and guidelines in our high fidelity prototype.
After analysing checklists and feedback from users, we are going to discuss about
which issues are remaining? What needs to be done in further enhancement? See the section 5.5,
page no. 21 for detail discussing.
5.4 Testing
5.4.1 Feedback from Users
There are some feedbacks for the high fidelity prototype from the possible users,
student and traveller.
Feedbacks deal with Cognitive Psychology
The student mentioned that because of too many steps, it is difficult to find the
local amenities of an academic institute quickly. The users can lose their attention to find a local
amenity as there are too many steps.
There are no animated icons and therefore the website is not perceptually fun to
use. Audio files are only provided in English and it is difficult to listen for other language
speakers.
Feedbacks deal with Multimedia
According to the traveller, we should provide different languages while
describing information using texts. Moreover, the traveller mentioned that short documentary
films about academic institutes should also be provided.
Feedbacks deal with Design Principals
The traveller said that there are a lot of white spaces in high fidelity prototype.
And, the white colour is represented something lost in some traditions and cultures. Another
point that the student mentioned is about image sizes. Some image sizes are more than 200
pixels and this will take time for data loading.

32. INTERACTION DESIGN
COMP- 1649 Page 32
5.4.2 Checklist for High Fidelity Prototype
In this part, we would like to discuss about how much the high fidelity prototype
has met the usability and user experience criteria. To meet usability and user experience goals is
very critical in designing the mobile websites. We asked the possible users, student and traveller
to give their ratings on these criteria.
No. Usability and User Experience Criteria Rating
1. Having good user interface design 1 2 3 4 5
2. Easy to learn (learnability) 1 2 3 4 5
3. Easy to remember how to use (memorability) 1 2 3 4 5
4. Easy to search the academic institute 1 2 3 4 5
5. Fun to use 1 2 3 4 5
6. Cognitively stimulating 1 2 3 4 5
According to the users’ feedbacks, we can assume that the high fidelity prototype
has good usability but it is difficult to get user satisfaction.
5.5 Missing Things and Further Enhancement
Although the high fidelity prototype of “Myanmar Academic Institute Directory”
was generally accepted by users, there is some missing points deal with cognitive psychology,
multimedia and mobile website design principles. Here is some of these missing points for
further enhancement.
 Audio files about academic institutes are only provided in English so that we need to
provide other languages.
 Short documentary films about each academic institute should also be provided.
 The prototype must be included animated icons otherwise it will not perceptually fun to
use. The website will not be cognitively stimulating.
 Some images are larger than 200 pixels and this will take time for data loading.
 According to W3C guidelines, we must reduce the white spaces on the web page as we
can.
5.6 Summary
The high fidelity prototype was developed by DSDM methodology. In feasibility
and foundation stage, we apply the researched results and existing applications. We also
interviewed the potential users. In designing stage, we produce the conceptual design for the
prototype. And then, we created the low level prototype for “Myanmar Academic Institute
Directory”. The high fidelity prototype was developed in engineering stage. The evaluation for
high fidelity prototype deal with mobile issues, cognitive psychology, multimedia and W3C
guidelines was made. Finally, we discussed about missing things and further enhancements for
the high fidelity prototype.

33. INTERACTION DESIGN
COMP- 1649 Page 33
6. Conclusion
The high fidelity prototype for “Myanmar Academic Institute Directory” was
created in relation to cognitive psychology and W3C mobile web design guidelines. The issues
in mobile design were tried to solve in the high level prototype. The different multimedia types
were also used in the high fidelity prototype. Then, the high fidelity prototype was evaluated in
order to know what are missing or needed to be enhanced. These missing things and further
enhancements were set as future plan due to the lack of lime. However, the interactive web
design of “Myanmar Academic Institute Directory” would be useful for the users.

34. INTERACTION DESIGN
COMP- 1649 Page 34
7. References
Book References
Efraim Turban, (2008) Electronic Commerce A Managerial Perspective
Available from: www.pearsoned.co.uk
(Accessed Date: 1st
March 2015)
Preece, Rogers, Sharp, (2002) Interaction Design
(Accessed Date: 3rd
March 2015)
Jennifer Stapleton, (1997) Dynamic Systems Development Method
(Accessed Date: 16th
March 2015)
David Benyon, (2010) Designing Interactive Systems
(Accessed Date: 12th
March 2015)
University of Greenwich, B.Sc (BIT) COMP 1649, Interaction Design
Website References
Responsive Web Design
http://www.zingdesign.com/responsive-website-design-cheatsheet1
(Accessed Date: 3rd
March 2015)
Mobile Website Design
http://netobjects.com/mobile-site.html
(Accessed Date: 3rd
March 2015)

35. INTERACTION DESIGN
COMP- 1649 Page 35
Cognitive Psychology on Web
http://www.bijucreative.com/about/psychology
(Accessed Date: 5th
March 2015)
Mobile Web Application Best Practice
http://www.w3.org/2010/09/MWABP
(Accessed Date: 10th
March 2015)

36. INTERACTION DESIGN
COMP- 1649 Page 36
Appendix
List of Hospitals (Local Amenity Page) Hospital Page (Particular destination page)