Interaction design

COMP 1649 : Interaction Design
Due Date : 18/04/2017
School Name : KMD (Yangon, Myanmar)
Word Count : 4589

Table of Content
Table of Content 2
Introduction 4
Mobile game background information and how to relate with new staff 4
Overview of the game 4
Cognitive Psychology 4
Overview of Cognitive Psychology 4
Perception 5
Attention 6
Language 6
Memory 6
Encoding 6
Storage 6
Retrieval 6
Thinking 7
Consciousness 7
Used Design Guideline for Prototype 8
App Icons 9
Typography 9
Color Palette 10
Iconography 10
UI Components 11
Status Bar 11
Navigation Bar 11
Toolbar 13
Search Bar 13
Tab Bar 15
Table View 15
Tablet and Mobile Design Issues 18
Resolution and Design Issues 18

The difference between pixels and points 18
Justification of Using Design Principles 19
Jakob Nielsen Usability Heuristic Evaluation 19
Don Norman’s Design Principles 19
Compare with two app with guideline 20
High Level Prototype Development 21
Comparison with principle and guideline 32
Reference 33

Introduction
This coursework is to make a personalised game for new staffs to become familiar with
key local services and areas of interests of Institution. That personalised game will run on
tablets or mobiles and across platforms. In this coursework, explain about cognitive psychology
for new staffs and explain how to differentiate design of between tablet and mobile. In cognitive
psychology session, explain about cognitive psychology with perception, attention, language,
memory, thinking and consciousness.
Mobile game background information and how to relate with new
staff
In 21st
Century, internet and mobile technologies are rapidly grown and nowadays,
three-quarters of the world’s population can access mobile phone according to World Bank
saying. So, most of institution change their systems to enable on mobile phone. Thus in this
coursework, make the new staffs to become the familiar with the key local services and areas of
interests using personalised mobile game. Nowadays there are many mobile operating systems
but Apple iOS and Android are the most popular than any other operating systems. In this
coursework, only iOS platforms will be considered because of prototype development scope.
Overview of the game
The game name is “Creative Innovation” and this game is a personalised game, that
focus on each person and this game will help new staff to become the familiar with company
information by answering some quests. Current game, have level 5 and each level has 5
question. If the new staff can correctly answer each quest, can win 20 points. If they will collect
100 points, they will level up and the HR department will give some gift. The right answer will be
shown even they cannot correctly answer the quest. This game will be play on LAN and this
game enable to check who get highest point, this function will call “Leaderboard”. Then, this
game will enable to check how many percent they can correctly answer each level. In each
quest, there have a favourite icon and if the staff can click this icon, the quest will be available in
“Favourite”. So, the staff can easily review the information that they interest.
Cognitive Psychology
Overview of Cognitive Psychology
In 1967, Ulric Neisser first used the term of Cognitive Psychology. Cognitive Psychology
is one of the psychology that the way of people how to process the information. That means

how people receive information that receive and how people respond about these received
information. Cognitive psychologists study what goes on the people’s mind that include
sensation, perception, attention, language, memory, thinking and consciousness. There are
three difference domain in cognitive psychology. They are Human experimental psychology,
computer analogies information processing approach and cognitive neuroscience.
This figure is shown how many domain in cognitive psychology
Perception
Perception are the sights, sounds, smells, taste and touch experiences that convert from
sensory inputs. There have two theory in perception. They are “Bottom-up” theory and
“top-down” theory. “Bottom-up” theory is a direct theory of perception discovered by Gibson
(1966) and “ top-down” theory is a constructivist (indirect) theory of perception discovered by
Gregory (1970). Bottom-up processing is called data-driven processing because the stimulus
begins the perception by itself. Top-down processing use the pattern recognition of contextual
information.

Attention
Attention is the psychology that concentrate some phenomenon of awareness to the
exclusion of stimuli. There have some key point about attention: attention is limited, attention is
a basic part of the cognitive system and attention is selective. Attention is limited on capacity
and duration based on ability to stay on the task that mean how much interested from stimuli.
So, we have to decide what task have to be choosy to focus.
Language
Language is used for communication and system of symbols. A language uses symbols
such as sounds, or written characters, gestures for objects, events ideas and action. A language
need to meaningful to understand by other people of used that language.
Memory
Cognitive psychologist Margaret w.Matlin described about memory as “process of
retaining information over time”. The psychologists say there have three important aspects of
information processing: Encoding, Storage and Retrieval.
Encoding
When information comes from sensory input (is the stimuli that is perceived by senses
like smell, sight, touch, taste and hearing) into our memory, it needs to change into a form to
cope with the systems. So, it can be stored. There are three main ways to encoded the
information. They are Visual (picture), Acoustic (sound) and Semantic (meaning).
Storage
Storage is about the nature of memory stores. That means how long the information can
last for (duration) and how much information can be stored forever (capacity). There have two
kind of memory for storage: Short Term Memory (STM) and Long Term Memory (LTM). The
different between STM and LTM is STM can stored 5 or 8 things and LTM storage is unlimited,
and that things (information) can be last for 0 - 39 seconds in STM and LTM can stored a
lifetime, according to Miller (1956). This research result is for adult people.
Retrieval
Retrieval means to get back information from memory. Some time we can’t remember
something that is we cannot able to retrieve that information. Between STM and LTM clearly
become different when retrieve something from memory. STM is retrieved sequentially and LTM
is retrieved by association.

This figure is shown three important aspects of information processing in stages of
memory
Thinking
Metal representation is the information that receive or generate from our mental
faculties. These mental representations will be various forms such as in terms of words, sounds,
or visual images. Thinking is the place of process where manipulated these mental
representations. Thinking process transforms a new and different form from these
representation. The transformation may be made: For finding solutions to problems, answers to
question and facts and exploring reality.
Consciousness
First half of the 20th
century, American psychologies ignore consciousness as a topic of
cognitive psychology and instead to focus on measuring behavior. But after World War II,
psychologies start to discuss consciousness because the advent of communication and
computer technologies. Consciousness mean it treated as effect the information processed of
the brain that is modeled as the information-processing systems. In consciousness, there have

two approaches: attention-based approaches, how the mind determines which information is
actually allowed from the environment to enter into the consciousness an imagery-based
approaches, how it is manipulated and controlled the information that is in consciousness.
Used Design Guideline for Prototype
There are a lot of guideline to consider when making a prototype. They are App Icons,
Typography, Color Palette, Iconography and UI Component. In this coursework, we only
consider for iOS because of prototype scope.

App Icons
The above diagram is shown Apple how many pixels used in each device for icon
Typography
On all iOS versions previous iOS 9, the default system font is Helvetica Neue. But when
apple release iOS 9, Apple introduced new font that called San Francisco and set the default
font. San Francisco has two shapes and that are “SF UI Display”, is used for UI components
and “SF UI Text”, used in wider letter spacing and longer texts. But any True Type Font (.ttf) can
be used in any iOS app.
Apple use default font size, weight and spacing for each element. The following diagram
shown how to be used in iOS app.

Color Palette
The above list of color palette are default iOS color palette. Apple used a vibrant color
palette for the interface of the OS and pre-installed apps since iOS 7. But we can use own
colors for any iOS app.
Iconography
Icon is the best way to describe action or replace text. Usually, we can see icon on
Navigation Bar, Toolbar or Tab Bar. In Bar Button Icon, icon are used in bar with different
states. They are default state in outlined style with a stroke width 1 or 1.5 and active state with a
solid color fill. So, the following picture shown we can easily understand which is active or
inactive only using icon.

UI Components
iOS offers the collection of ready-to-use view and controls for interfaces. But most
elements can be customized. Elements that offer from iOS are Status Bar, Navigation Bar,
Toolbar, Search Bar, Tab Bar, Table View, Temporary View and Controls.
Status Bar
Usually the status bar can be used to describe basic system informations: current
carrier, time, battery status and more. It’s connected to the Navigation Bar and make with same
background automatically fill. There has two styles of status bar content: dark (black) and light
(white). If you want to hide the status bar, you will you dark (black) color of content of the status
bar but the guideline say that you should think twice to use like that. Because users interested
to know that their phone are connected to Wi-Fi or bluetooth or they want to know the
percentage of battery phone level. But sometime, there has a reasonable to hide the status bar
is when you want to display full screen such as image gallery or image of game screen.
Normally iOS status bar has full size of width and 20pt of height.
Navigation Bar
The navigation bar always contains the controls for navigating about the application and
normally the controls are to enable the manage of content of the current view. It is always

appear at the top of the screen and below the status bar. It background color can be solid color
or custom bitmap-pattern (like picture). Normally it size is full size of screen and 44pt of height.
Navigation Bar on iPhone 6 in portrait mode
Navigation Bar on iPhone 4S in Landscape Mode
On the iPhone 4s, the height of the status bar is 32pt and is reduced by 12pt expect on
iPads. But guideline say that hiding of the status bar in landscape mode is the good practice.
According to guideline, back button should be left side of the status bar, and the title of the

current view should be centered and the action buttons should be right side of the status bar.
They also suggest to use in action buttons that is we should have one button if possible
because of missing clicks and maintaining simplicity.
Toolbar
Usually toolbar contains a set of actions to manage or manipulate the content of current
view. On the iOS, it always has the bottom of the screen. But on iPad, it can be top of the
screen. When the current view required more than three action and that is difficult to fit in
navigation bar, we should use toolbars. It weight and height is same with navigation bar.
Search Bar
In search bar, there have two styles by default: prominent and minimal but both have
same function. In each style there have a placeholder text is shown if no text was entered inside
the bar. If the user is entered some text for search, the placeholder automatically disappear and
a clear button of cross sign will be appear on the right of search bar to delete the entered text.
There have a function to use some prompt for search bars with a short sentence to introduce for
the search context. Example, “Enter a city, zip code or airport”.

Prominent search bar style with a prompt or not

Minimal search bar style
Tab Bar
The tab bar is used in where the app allow to quickly navigate for separate view of an
application and the guideline say it should be used only for this reason. It always should be at
the bottom of the screen.
Table View
Table views are used to describe amounts of list style information with single or multiple
columns. There have two styles of table view: plain and grouped.

The above diagram is plain table view
The above diagram is grouped table view

The above diagram is default style of table view
The default style of table view will be include image on the left of the table and then title
for each row.
The above diagram is subtitle table style and it is useful for describe for each row with
explanations or short descriptions
The above diagram is value table style and is useful to describe how many specific value in
each row title

Tablet and Mobile Design Issues
New staff can have different devices and so, there have some issues with different
devices such as mobile performance, screen resolution, screen size, etc,. In this coursework,
only consider the iOS device and the following are the iOS device issues when developed
application.
Resolution and Design Issues
Most of iOS device has retina display except 1st
, 2nd
and 3rd
generation of iPhone and 1st
and 2nd
generation of iPad according the following diagram. In the case of resolution, there have
two units: pixels and points.
The difference between pixels and points
Pixels, are the smallest physical element, can control on a digital display and Points, are
a resolution independent measurement that depend on the screen pixel density. A point can be
contain more than one pixels. In the regular retina display, they have 2 x 2 pixels in one point.
When the pixels are more, the specific screen can more fit and PPI (pixel-per-inch) will high and
the rendered content more become clearer. So, if we want to design for all device, we should
consider to use points. But pixels is no matter.
Device Retina Portrait(px) Landscape(px)
iPhone 7+ Have 1080 x 1920 1920 x 1080
iPhone 7 Have 750 x 1334 1334 x 750
iPhone 6+
6+, 6S+
Have 1080 x 1920 1920 x 1080
iPhone 6
6, 6S
Have 750 x 1334 1334 x 750
iPhone 5, 6SE
5, 5S, 5C, 6SE
Have 640 x 1136 1136 x 640
iPhone 4
4, 4S
Have 640 x 960 960 x 640
iPhone
1st
, 2nd
and 3rd
Generation
Haven’t 320 x 480 480 x 320
iPad Air / Retina iPad Have 1536 x 2048 2048 x 1536

1st
and 2nd
Generation/ 3rd
and 4th
iPad Pro Have 2048 x 2732 2732 x 2048
iPad Mini
2nd
and 3rd
Generation
Have 1536 x 2048 2048 x 1536
iPad
Mini, 1st
and 2nd
Generation
Haven’t 768 x 1024 1024 x 768
This diagram is show which device has retina display and how many pixels.
Justification of Using Design Principles
There are many principles to create design. Among them, heuristic evaluation is the
most popular usability methods. The goal of heuristic evaluation is to solve usability problems of
design as a part of iterative design process. Heuristic evaluation includes a small set of
evaluation that examine interface and judge with usability principles that are recognized. In this
coursework, follow Jakob Nielsen Usability Heuristic evaluation and Don Norman’s Design
Principles.
Jakob Nielsen Usability Heuristic Evaluation
Jakob Nielsen is a engineer who holds a Ph.D. in human-computer interaction (HCI)
from the Technical University of Denmark in Copenhagen. According to Jakob Nielsen, a design
have visibility of system status, match between system and the real world, user control and
standards, error prevention, recognition rather than recall, flexibility and efficiency of use,
aesthetic and minimalist design, help users recognize, diagnose and recover from errors, and
help and documentation.
Don Norman’s Design Principles
Don Norman is a cognitive scientist and engineer who has many ideas of user
centered-design. According to Don Norman, need to consider these principles to create a
design. They are visibility, feedback, affordance, mapping, constraint and consistency.
In this coursework, we use cognitive psychology to develop prototype and they are
language and attention, and also use some design guideline for prototype: typography, color
palette, iconography and UI components.

Compare with two app with guideline
The above app is gmail and this app follow the iOS guideline such as status bar,
navigation bar (circled with red pen), toolbar and use table view UI components (circled with
green pen). This app only use only one action button (Edit button) on right side of navigation
bar and they use compose button ( ) on toolbar. This app follow attention of cognitive
psychology. In the table view circled with yellow pen, first yellow circle is easily know this mail
unread mail with blue circle and if you read mail the blue circle will be disappeared like second
yellow circle.

This app is Mmm Fingers
In this app, hidden the status bar and nothing use UI components. Instead use of UI
components, they use icon (circled with red pen) to describe Leaderboard, achievement and
setting. But in this app, they use cognitive psychology such as language and attention. In
second picture, when we left our hand from the screen, they give the warning with red color and
then you lose the game. That is they want to give attention for user. And in this game, they use
a lot of sound effect for each function and that is they interact between app and user with
language of cognitive psychology.
High Level Prototype Development
This prototype is the personalized game for Creative Innovation to introduce their
interest things to new staffs. Firstly, the new staff need to enter staff Id and password that give
from HR department and then he/she enter the systems and see the home page. In Home
page, there have three functions: Quests, Leaderboard and Favourites. When new staff click the
quests button, there have five levels and each level has five questions. In levels screen, there
has only one level unlock and the others are unlock. In each question, there have four options
and the check button color is black. If question need to answer two option, the user need to
choose two option and then the check button will be green color and enable to click. If question
need only one answer, the check button will be green just user choose one option. In each
question, there have the favourite icon and the user click the favourite icon, these question will
be collected in the favourite button at the home screen. The leaderboard is used to show how
many point they get and other player get how many point in this app.

This page is login page.
No. Type Description
1 Icon Company Logo for Creative Innovation.
2 Textfield User enter their staff ID that give from HR when they start work at
Creative Innovation.
3 Textfield User enter password that give from HR when they start work at
Creative Innovation.
4 Button When fill staff ID and password, click the Sign In button and enter
the application of Creative Innovation.

This page is home page.
1. Icon Company Logo for Creative Innovation.
2. Button This button is the quests button and if user want to answer some
quests click the quests button and there have 5 levels and each level
has 5 questions.
3. Button This button is the leaderboard button and if user want to look how
many rank within the app users, click the leaderboard button.
4. Button This button is the favourites button and there has a favourite icon on
each question and if user click the favourite icon, this question will be
seen in favourites tab. So, the favourite is collect all favourites
questions.
5. Button This button is the sign out button if user want log out their account click
the sign out button.

This page is game page when click quest button, this page will be shown.
1. Icon Company Logo for Creative Innovation and when user click this icon
the app go back home page.
2. Button This button is level 1 of quest and when user click this button, there
have 5 questions.
3. Button This button is level 2 of quest and this button is locked and if user
complete level 1, the level 2 button will automatically unlock. In level 2,
there have 5 questions.
7. Button This button is back button and if user click this button, the app go back
home page.

This page is question page and when the user click each button, this page will be shown. This
page is that the user is not answered any question.
2. Button This button is question 1 button and this question is unanswered.
When the user click this button, there have a quest and if the user can
correctly answer the user get 20 points and if, or if not correctly
answer, the app will give true answer.
3. Button This button is question 2 button and this question is unanswered. If
functions are same with question 1.
7. Button This button is back button and if user click this button, the app go back
game page..

This screen is question screen for question 1 and there is no selected to answer.
1. Button This button is back button and if the user click this button, the app will
go back question page.
2. Title This text is title of these question.
3. Icon This icon is favourite icon and currently is unfill with any color. If user
click this icon, the icon will fill with red color.
5. Question
Text
This text are question text for question 1 of level 1.
6. Button There are option button and there have some text inside the button. If
the user think this option is correct, click and the button will change the
color.
color.

color.
color.
10. Button This button is reset button and if user want to answer this question
again click the reset button and can answer again. But user cannot
have any point if user can correct the question.
11. Button This button is check button and disable and currently the button is
black and if the user choose the option the button will change green
and enable to click.
12. Button This button is answer button that show the correct answer and
currently this button is disable and if you click check button this button
will automatically enable.
This screen is user choose the answer of question 1 and the check button turn black to green
color

1. Button This button is option that user choose as answer.
2. Button This button is option that user don’t choose as answer
3. Button This button is check button and if you user choose two option as
answer this button change black to green color and enable to click.
This screen is when user click check button and the app show the answer is wrong
1. Image This image is called overlay and just use to modify the icon of right or
wrong.
2. Icon This icon show the user answer is right or wrong. Currently, user
answer is wrong and this button an overlay is disappear in 3 secs.

The screen is when disappear the overlay and user click Answer Button and the app show the
correct answer for question 1
1. Buttons These two buttons will show right answers for question 1.
2. Buttons These white two buttons will show wrong answers for question 1.
3. Button This button is Your Answer button and when user click Answer button
the app change the Your Answer button. If your click the Your Answer
button the app will show answer that user answered.

This screen is when user click the Your Answer button and the app show the answer that user
answered and Your Answer Button will change Answer button.
1. Buttons These two buttons will show answers that user answered for question
1.
2. Buttons These white two buttons will show answers that user don’t choose as
an answered for question 1.
3. Button This button is Answer button and that is changed from Your Answer
button and if user click the Answer button, the app will show the
answer of the question 1 and the button change Your Answer button.

This screen is leaderboard that show all user and can compare which rank
1. Buttons This button is back button and if user click this button the app will go
back home screen.
2. Title The text is the title of the this screen.
3. List This list is show currently user position within the all users that is used
this app.
4. Lists These list are the all user who use this app and show who got how
much points in this app.

This screen is favourite screen and when user click the favourite button. Currently there have
one favourite question.
1. Buttons This button is back button and if user click this button the app will go
back home screen.
2. Title The text is the title of the this screen.
3. Text This text is a question text that user click favourite icon.
4. Button This button is more detail button and if user click this button, the app
will go to question of related question.
Comparison with principle and guideline
In this prototype, follow some guidelines: the typography and iconography and we use
status bar, navigation bar and tableview. In this prototype, use Helvetica Neue font for all fonts.
The following diagram show will show follow iconography.

The above diagram will show attention of cognitive psychology because while the user
choose the option, the question is completely selected the button will change the color from
black from green. There are some sound in every click of button, if the question is right there
was a winning song and wrong there was a losing song. This is follow of the language of
cognitive psychology. In this prototype, only use background color of purpose that is because of
company icon color and that is follow of Don Norman’s Design Principle of visibility.
The above diagram is shown used same color of status bar and navigation bar and
follow the guideline.
Reference
(2012, July 17). Report Says 75 Percent Of World's Population Have Mobile Phones.
http://www.rferl.org/a/24648234.html
(2015, June 4). What is Cognitive Psychology? - Definition & Theories - Study.com.
http://study.com/academy/lesson/what-is-cognitive-psychology-definition-theories-quiz.html
(n.d.). Cognitive Approach | Simply Psychology.
https://www.simplypsychology.org/cognitive.html
(n.d.). User Stories - Mountain Goat Software.
https://www.mountaingoatsoftware.com/agile/user-stories
(2015, December 3). What Is A Storyboard And Why Do You Need One? - GoAnimate ....
https://resources.goanimate.com/what-is-a-storyboard-and-why-do-you-need-one/
(2014, February 27). Memory Definition & Types of Memory - Live Science.
http://www.livescience.com/43713-memory.html

(n.d.). Memory, Encoding Storage and Retrieval | Simply Psychology.
https://www.simplypsychology.org/memory.html
(n.d.). SparkNotes: Language and Cognition: The Structure of Language.
http://www.sparknotes.com/psychology/psych101/languageandcognition/section1.rhtml
(n.d.). COGNITION AND THINKING:Cognitive Psychology Mental ... - ZeePedia.
http://www.zeepedia.com/read.php%3Fcognition_and_thinking_cognitive_psychology_mental_images_co
ncepts_introduction_to_psychology%26b%3D91%26c%3D29
(n.d.). Cognitive Approaches to Consciousness - The Mind Project.
http://www.mind.ilstu.edu/curriculum/consciousness_sci_of/cognitive_approaches_to_consc.php
(2015, June 9). attention | psychology | Britannica.com.
https://www.britannica.com/topic/attention
(n.d.). What Is Attention? - Verywell.
https://www.verywell.com/what-is-attention-2795009
2017, January 31). The iOS Design Guidelines - Ivo Mynttinen / User Interface Designer.
http://ivomynttinen.com/blog/ios-design-guidelines

Interaction design

More Related Content

What's hot (20)

Similar to Interaction design (20)

Recently uploaded (20)

Interaction design