Interaction design comp1649

Interaction Design Coursework April 2017
Module : Interaction Design
Course Code : COMP 1649
Coursework Leader : Eur Ing, Dr Mary Kiernan
Due Date : 18th
April 2017
Centre : KMD Yangon, Myanmar
Word Count : 3115 words (Report only)

[2]
Table of Content
1. Introduction ………………………………………………………………………….. 3
1.1. User profile …………………………………………………………………….. 4
1.2. Game Scope …………………………………………………………………… 4
2. Cognitive psychology
2.1. Critical discussion of cognitive psychology and key issues .…………….. 5
2.2. Evaluating the usage of cognitive psychology ..…………………………… 7
3. Issues in mobile design
3.1. Current mobile design issues research …………………………………….. 9
3.2. Avoiding the current issues ………………………………………………….. 11
4. Design principle
4.1. The use of design standard ………………………………………………….. 12
4.2. The method used ……………………………………………………………… 13
5. Conclusion
5.1. The high-fidelity prototype …………………………………………………… 14
5.2. Evaluation of final prototype …………..…………………………………….. 15
5.3. Summary ………………………………………………………………………. 17
5.4. References …………………………………………………………………….. 18

[3]
1. Introduction
In this practical report for developing design for an institution call ABC institution will
included about cognitive psychology and evaluation of it with examples, the design issues
in mobile and tablet and the design standard which is going to be use when developing
the final high-fidelity prototype. Only some of the related process of cognitive psychology
for the development of final prototype will be described and evaluated. The research of
current issues with mobile application/ website design will be mentioned in the relevant
paragraph and how the main result of the research will be used for final prototype will be
explained. Using the design principle, the final high-fidelity prototype will be developed
and evaluated.
1.1 User profile
The personalized game that is going to develop is aiming for the new staff members of
the ABC institution and the local community to get familiar with the key local services and
area of interest. The main user of this game will be newly recruited staff of the institution
and the local community to support them to recognize the local services such as traditional
restaurant, computer service center or mobile shop and area of interest such as shopping
mall, pagoda and museum etc., around the neighborhood. The potential user group of the
game will be of age 15 to 40 years old both male and female.
The user of the game will expect to have quick learning of the services and interesting
area around the institution such as restaurant, shopping mall, mobile shop, pagoda/
church, museum, etc. The game is currently only available on iOS mobile device and will
try to produce more versions for android and others.

[4]
1.2 Game Scope
This personalized game for ABC institution is free to play with iOS version for now and will
release more version after the success of the first version. The main function of the game
is to help the new staff of the institute and local community to get familiar with the key local
services and area of interest. Since the main purpose of the game is to help the user to
get familiar with the local services and interesting areas, these will be marked on map and
users can easily get access to it. The search function will also be provided to help the
users to search the places by name or address. The design will be made simply so that
the users of different ages can use it without any difficulties. In case the user made any
mistake, the game will display clear error message and will show a way to restore to
normal stage. For example, if the user fail to type a username and click to go forward, the
system will show an error message.

[5]
2. Cognitive psychology
2.1 Critical discussion of cognitive psychology and key issues
Cognition means the mental works which we become familiar with things and get
knowledge. Processes mainly include understanding, remembering, reasoning and
attending. Cognitive psychology is a psychology branch which focuses on people working
out with the information. In another word, cognitive psychology is learning of what is
happening in our mind.
The cognitive processes are interdependent with each other. For example, when you are
browsing a website you need to have attention on the content, read and memorized it and
try to remember it. It is unusual of the processes to happen separately.
The below cognitive psychology processes are more related to development of mobile
application rather than other processes.
Attention
Attention is the process of selecting thing to focus on at a point in time among the other
things which is around us. It involves the audio and/or visual senses. Attention make us
to focus on information which is relevant to what we been doing. Focused or divided
attention enable information to be stand out in competing stimuli and limiting the ability of
knowing all events. The information at the interface should be structured to capture the
users’ attention.
Perception
“Perception refers to how information is acquired from the environment, via the different
sense organs (e.g., eyes, ears, fingers) and transformed into experiences of objects,
events, sounds, and tastes.” (Roth, 1986). The perception process also involves other
processes such as memory, attention and language. It is important for the designer to
present the information in a way that can be readily perceivable. For example, the two
websites function equally well, the chances are user will recognize and most likely to revisit
the one with better design.
Memory
The memory process involves recognizing and then recalling knowledge. Content is also
important in affecting the peoples’ memory. It is impossible for people to remember
everything that they see, hear, smell, taste, etc., as the brain could be overloaded.
Encoding is the first stage of processing in memory which determine what information are
attended to in the environment and how it is interpreted. There are two main type of
memory; short-term memory known as working memory and long-term memory.

[6]
The most possible issues could happen with the personalized game of ABC institution are
as follow:
Over-use of graphic
To gain user attention, the developer use technique like animated graphic, color,
underlining, etc. But, using all of these technique in one interface will result in making the
user encounter confusion and it will fail to get user’s attention.
Too many information in one screen
The cluttering interface such as putting many text, color and sound in one screen will result
in distracting and annoying the user instead of getting user attention. The user will
probably not get any information from a cluttering interface.
Mismatch color combination
The color used on screen for background, text, buttons etc., should be readable,
distinguishable. The color used should be eye-friendly, matching color. For example, it is
difficult to read the yellow color text with white background.
Poorly design interface
Design plays an important role when it comes to developing an application. The
application with good, well-structured design will likely to have more user attention than
the bad design one. For example, the user will recognize the beautifully designed website
rather than a cluttering and bad design website.
Importance of significant design
People tend to easily forget things which are not significant. It is critical to make important
thing stand out from others so that the user can memorized it. For example, putting the
importance things first, highlighting them, repeating them in different places, etc.

[7]
2.2 Evaluating the usage of cognitive psychology
To have better understanding of the cognitive psychology and how it can be embedded in
the real-world applications, I would like to present the following two mobile application,
Telenor Myanmar and Ooredoo Myanmar. These applications are used mainly for
checking mobile bill balance and buy new internet/ voice packs. The below two picture of
it will be used as examples.
Telenor Myanmar Ooredoo Myanmar
Attention
The user will mainly be expected to know their mobile bill balance by using the application.
In both application, they use different style to gain user attention but they both focus on
the main balance of the mobile user. In Telenor Myanmar application, the icon used are
clear enough to be readable by user of all age. And the icons are shown together with text
to avoid misunderstanding of the used icon. But in Ooredoo Myanmar application,
although they show the main balance of the mobile in clear picture, the icon used are
unclear, smaller than it should be and difficult to read for elders.
Logo
Icon with Text
Logo
Icon with Text

[8]
Perception and Recognition
To enhance the perception of the application both of the applications uses the color
scheme which is representative of their logo. In Telenor Myanmar application, although
they use nice background and the right color scheme, most of the icon are not reflective
to the real-world objects. Some user may find it difficult to recognize the icons. And some
of the icon text are not fully displayed. In Ooredoo Myanmar application, the background
color and design is good, but the icon are also not reflective to the real-world objects which
may result in difficult to recognize.
Memory
In both application, it is designed to minimize the user’s memory load by making the
offered services visible and the icons are with clear captions. Their logos are being display
well, so that users of the application can easily memorized and it will also help promote
the brand image.

[9]
3. Issues in mobile design
3.1 Current mobile design issues research
With the emerging use of mobile nowadays, many mobile app are developed. The
following are some of the common issues that interaction design developer should be
aware of when developing the design of their application.
Inaccurate Clicks
Nowadays, all most all the mobile handset become touchscreen and people use their
fingers to click the things on the screen. With the small size of mobile screen, the clicks
are not accurate rather than using the keypad phone. This is also known as “fat finger
problem”.
While developing a mobile application the designer has to think about the size and
proximity of all the clickable elements. The designer has to make sure there is enough
space between clickable elements and they are large enough to touch with human finger.
Complex Design
When developing a design for mobile app, it is important to meet the user requirements,
rather than providing additional functions. The mobile app developer must stick with their
primary objective and make sure not to clutter the interface with unnecessary objects like
icons and symbols.
Small Screen
The small touch screen of the mobile device is one of the thing to consider when
developing mobile application design. The small size of the screen tends to make the user
difficult to read the full context and user will have to scroll down to view for more texts if
the app show many information in one interface. For example, when the users have to fill
up a very long form and they need to keep scrolling for more text, it will result in the user
dissatisfaction and they might forget the title of the form and purpose of filling it.
Single Window
Although some mobile handset support multiple window at the same time, the limited size
of the mobile screen make it difficult, even with today’s larger-screen phone. The user
cannot split the screen as in desktop/ laptop and work on different app concurrently. So,
any of the mobile task should be easy to complete within single app or website. If user
have to switch between screen to get the require information, it is likely that they will need
to copy and paste it otherwise their memory will be overloaded and it will result in more
complex and error prone with the interaction.

[10]
Unstable Connection
Even in nowadays, the cellular network or Wi-Fi coverage are not universally good. The
developer need to consider the significant waiting time and should design interfaces which
are light, yet contain much information as needed. This can reduce the data loading time
and the user will be more satisfied using the application.
Non-standard GUI Controls
The basic GUI widgets such as command links, radio buttons, check boxes, scroll bar,
etc., have its own appearance and behaviors. The design developer should not change
the usages of its because doing so will confuse the users. For example, when choosing
the gender of the user, only one can be choose and radio button must be used for this.

[11]
3.2 Avoiding the current issues
To develop a perfect personalized game for the ABC institution, the common issues of
mobile design which are mentioned above should be avoided.
1. There should be clickable large enough space between elements for the
convenience of fat finger users. This can also avoid the accidently wrong clicks
that users would probably made while using the app.
2. A simple design would be the best design and it will help user recognize more and
the app will become user-friendly for all different ages of users. Putting too much
information in one interface should also be avoided.
3. The small screen size of the mobile handset is always an issue, despite of
nowadays big screen handsets. But, the mobile screens are still a lot smaller than
compare to desktop or laptop. By this matter, the information that need to be
included in the personalized game shall be consider carefully and will have to
arrange systematically.
4. Since this personalized game is mobile base, it will mainly be used with cellular
data network. When using the cellular data network the data loading time is one of
the issues to consider because it is directly related to the performance of the
application.

[12]
4. Design Principle
4.1 The use of design standard
Visibility of the system status
As per Jakob Nielsen principles, the system should inform the status to its user within
reasonable time with an appropriate feedback. For example, showing the download/
upload progress with a progress bar, a feedback message when an action is done,
showing progress bar while the application is being load, etc.
Consistency and standard
According to one of Nielsen’s principles, “consistency and standard”, the design used for
the interface should not make the user confuse by using different word or command for
the same thing. Having the consistency result in efficiency and promote effectiveness of
the application.
Help user recognize, diagnose and recover from errors
As suggested by Jakob Nielsen, the error message should be expressed in plain language
without the error code which is not easy to understand for the users. In addition, the error
message should describe why it is not correct and how can the user overcome from it.
Match between system and the real world
In Jakob Nielsen Design Principle, it was mentioned as while developing design for an
app or website, words or phrases of the users’ language should be used rather than using
system usage phases.
User Control and freedom
According to Jakob Nielsen’s design principle, the user often chose wrong system
functions accidently, therefore “Emergency Exit” should be given to avoid unwanted state.
On mobile touch screen the full size of the screen is clickable element and user will
definitely make wrong clicks time to time. A confirmation to every action will prevent the
mistake but it will annoy the user quickly. The undo or redo actions should be supported.

[13]
4.2 The method used
Hierarchical Task Analysis
Hierarchical Task Analysis (HTA) is one of the task analysis models used to evaluate
interaction between the user and the system by breaking down the main task into
subtasks. From the task analysis, we can understand how users perform tasks and how
they think they do it.
0. Welcome Screen
1. Record the username
1.1. If username is null, display error message
2. Main Screen
3. Browse shopping mall, restaurant or theater
4. Search for more options
Hierarchical Task Analysis (Graphical)
Welcome
Screen
Record User
Username
Error
Main Screen Browse Search

[14]
5. Conclusion
5.1 The high-fidelity prototype
Based on the above mention cognitive psychology issues, mobile phone design issues
and design principles the high-fidelity prototype for ABC institution is developed. Just in
mind application and adobe photoshop application were used in the development of final
prototype.
Fig. 1 Welcome Screen Fig. 2 Record Username
Fig. 3 Username Error Fig. 4 Main Screen

[15]
5.2 Evaluation of the final prototype
Applying Cognitive Psychology in final prototype
Attention – the logo and icons used are made very clear and attractive to gain users’
attention. The icons are mentioned together with text and used with real-world metaphors.
The fonts used are all the same and consistence between screens.
Perception – to help enhance the perception of the game the eye-friendly colors are used
and it is beautifully designed. The real-world objects such as shopping cart, foods, etc.,
are used to represent in icons where users can easily recognize what it is meant for.
Memory – rather than displaying too many searching function for the user in one screen,
only the main local services and interesting area are shown to avoid the memory load of
the users. The users can use the advance search function for more information they
wanted. This will make the user feel easy and comfortable as they do not need to
recognize many functions.
Icons are shown with text
Real-world objects are
used.

[16]
Following the design principles
Visibility of the system status – to system must inform the user the progress of it
according to the visibility rule from Nielsen design principle. The progress bar is being
used in the welcome screen to inform the user that the system needs some times for
loading. So that, the user might not confuse whether the system is progressing or freezing.
Consistency and standard – for all the screens, the same colors and the same fonts are
being used to have consistence design and to avoid user confusion. Having consistency
will result in the enhance usability and promote user experience.
Help user recognize, diagnose and recover from error – since all the screen of the
touch mobile is clickable the user might probably click by mistake and it will lead to
unwanted situation. In personalized game of ABC institution, if the user go forward without
entering the username, the system will show an error message. It is important to give the
user the detail of the error and a way to solve it with a clear message rather than system-
oriented terms.
Progress bar
Clear and user-friendly
error message

[17]
Match between system and real world – as per the Jakob Nielsen’ design guideline, the
user-friendly words and picture were used. This bring advantage for users, that they do
not have to learn the new thing and can instantly recognize the function of the system.
User control and freedom – the exit button is provided for the user if they would like to
quit from the application.
5.3 Summary
The high-fidelity prototype for ABC Institution was developed with the cognitive psychology
theory and issues, current issues with mobile design and Jakob Nielsen’s 10 general
principle for interaction design. Upon launching the final personalized game, some
multimedia such as sounds and images will be used. The final prototype was evaluated,
describing how the cognitive psychology was applied and how the design principle was
followed. Hierarchical Task Analysis (HTA) method was used to describe the task analysis
of the system.
User-friendly words and
objects
The exit button

[18]
5.4 Reference
To complete this coursework the following book and website were referenced.
- “Interaction Design: Beyond Human-Computer Interaction” book, written by
Yvonne Rogers, Helen Sharp and Jenny Preece, copyright 2002 John Wiley &
Sons, Inc.
- https://baymard.com/blog/mobie-design-limitations
- https://www.nngroup.com/articles/mobile-ux/
- https://www.quora.com/What-are-the-most-common-issues-with-mobile-app-
interface-designs
- https://developer.apple.com/ios/human-interface-guidelines/overview/design-
principles/
- http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-part-5
- http://www.techrepublic.com/article/consider-these-design-issues-when-
developing-mobile-applications/
- https://www.nngroup.com/articles/ten-usability-heuristics/

Interaction design comp1649

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Interaction design comp1649

Similar to Interaction design comp1649 (20)

Recently uploaded

Recently uploaded (20)

Interaction design comp1649