Interaction Design and UX design and UX and cognitive psychology

1
Interaction Design
Cognitive psychology and design
User experience
Design guideline
Current design issues and their solution
Mobile specific guidelines
Design framework
Design principle
Design methodology
Design Task analysis
Design Requirement analysis
Methodology in design
Low fidelity prototype
High fidelity prototype

2
Contents
Introduction: - ...................................................................................................................................5
Assumptions.....................................................................................................................................5
What is cognition..............................................................................................................................6
What is cognitive psychology...........................................................................................................6
Role of cognitive psychology in interaction Design.........................................................................6
How cognition works ........................................................................................................................7
Attention .......................................................................................................................................8
How attention works.....................................................................................................................8
Role of attention in Interaction Design .....................................................................................9
General Guidelines ...................................................................................................................9
Mobile specific Guidelines ........................................................................................................9
Perception ..................................................................................................................................10
How perception works................................................................................................................10
Role of perception in interaction Design ................................................................................10
General Guidelines .................................................................................................................11
Mobile specific guidelines.......................................................................................................12
Memory.......................................................................................................................................12
How memory works....................................................................................................................13
Role of memory in interaction design.....................................................................................14
General guidelines..................................................................................................................15
Mobile specific guidelines.......................................................................................................15
Learning......................................................................................................................................15
How learning works....................................................................................................................15
Role of learning in interaction Design........................................................................................16
General guidelines..................................................................................................................17
Reading, speaking, listening......................................................................................................18
How reading, speaking, listening works ....................................................................................18
Role of Reading, speaking, listening in interaction design........................................................19
General Guideline ......................................................................................................................19
Mobile specific guideline ............................................................................................................19
Problem solving, planning, reasoning, and decision-making....................................................20
General guidelines .....................................................................................................................20

3
Mobile specific guidelines ..........................................................................................................20
Conceptual Framework..................................................................................................................21
Mental model..............................................................................................................................21
Advantages .............................................................................................................................21
Limitations...............................................................................................................................21
Gulf of execution and evaluation ...............................................................................................22
Advantages .............................................................................................................................22
limitations ................................................................................................................................22
Distribution cognition..................................................................................................................23
Advantages .............................................................................................................................23
limitations ................................................................................................................................24
External cognition.......................................................................................................................24
Advantages .............................................................................................................................24
limitations ................................................................................................................................25
Frame work that I chose for my design .....................................................................................25
Justification for choosing mental model .................................................................................25
Current mobile design issues.....................................................................................................26
The solution of the issue............................................................................................................28
Data gathering technique...........................................................................................................30
Developing personas .................................................................................................................31
Primary persona .....................................................................................................................31
Secondary persona.................................................................................................................32
Scenario .....................................................................................................................................33
Primary scenario.....................................................................................................................33
Secondary scenario................................................................................................................34
Use case Diagram .........................................................................................................................35
Task analysis .................................................................................................................................36
Hierarchical Task analysis .........................................................................................................36
Requirements analysis...................................................................................................................37
Functional requirements.............................................................................................................37
Non-functional requirements......................................................................................................37
Conceptual model...................................................................................................................38
Design principle..............................................................................................................................38

4
Methodology Used.........................................................................................................................44
Lean UX......................................................................................................................................44
Why Use lean.............................................................................................................................45
how to implement Lean UX........................................................................................................46
Design Artifact................................................................................................................................48
Low Fidelity Design........................................................................................................................48
High fidelity Design ........................................................................................................................51
Evaluation ......................................................................................................................................57
Product evaluation .........................................................................................................................58
Conclusion .....................................................................................................................................65
References and Bibilography.............................................................................................................66
Bibliography.....................................................................................................................................66
Appendix A.......................................................................................................................................69

5
Introduction: -
In this report, the main goal is to make a high-fidelity multimedia prototype for the new
staff in an institute who are also new to local area. This application will help the user to
become familiar with the key local facilities of institute and also make familiar with the
areas of interest. It will allow user to find surrounding areas of interest through playing
game. For making this prototype successfully some step should be taken from start to
end. The steps are about to define the impact of cognition in mobile app design, current
mobile issues and their solution, requirement analysis, design principle and their
guidelines, and useful methodology.
Assumptions
Assumptions is one of the important things before designing the app. it helps to clarify the
real goal that a designer or developer want to achieve. All the assumption that I make are
given below
 Make a such type of application for an institute that will help the new staff to
become familiar with the key local facilities of the institute and areas of interest
 For doing this a decision should be taken to choosing an institute and make
discussion with the employee of that institution
 Make a user-friendly app that all type of user can use that without any hesitation
 User can personalize the app
 App can be strategic or quiz type which will be easy for user to operate
 While user play the game, they must be complete 1 stage to unlock another
stage
 User also play every level in every stage to unlock the key local services and
nearby areas of interests
 All the information contain in whole app must be categorized
 Should use relevant color, image, video, audio, icon in the whole app

6
What is cognition
We are doing different type of activities in our everyday life such as learning, reading
listening, daydreaming etc. Before starting any activities, our brain commands us. On the
base of that command we make decision either we will do something or not. This is
cognition. cognition is our thought, perspectives and strong belief of something that will
happen. It is our mental representation of the world and it is a process of gaining
knowledge and understanding something through our thought. It is a mechanism which
human being can feel their sensory stimuli outside their body. When something occurs
outside the body then the sensory stimuli feel some specific action. It creates impulse,
then the brain is processed and gain some specific knowledge and gather some
experience. On this basis, a decision is taken either do some specific action or not.
(CHerry, 2016) (jeeny Preece, 2017) (cognition, 2017)
What is cognitive psychology
Psychology means human behavior. Human behavior is so much worthy to many treats.
Particularly that treats which involves interacting with human. Cognitive psychology is a
study which define how to deal with the process of cognition. It discloses the way people
process information. It takes that how we prepare information we receive and how the
treatment of this information leads to our reaction. Cognitive psychology interested what
is occurring in our mind that connected to stimulus which take input and response and
give output. It is study of internal processes that include perception, attention, memory,
language, thinking etc.
(Study.com, 2017)
Role of cognitive psychology in interaction Design
Human behavior is described by cognitive psychology. It’s a study which through we gain
knowledge about gathering information from the mind and apply the information in real
world. To do this it has several processes such as attention, perception, memory etc. we
use different type of product in our life such as computer, mobile, computer and mobile
application. Now the question is, is these products are usable, effortless? In interaction

7
design the main theme is that “Make a Product that is Usable”. Therefore, for making any
product usable, the role of cognitive psychology in interaction design is borderless.
Because at the time of developing a product, a developer must be thinking about the
process of cognitive psychology to grab the user attention, make the product attractable,
recognizable. Without this either user never use the product after first time or they feel
bore to use the product and it effect the business very badly. On account of this, the role
of cognitive psychology in interaction design is unbound.
(jeeny Preece, 2017)
How cognition works
Figure 1: cognition process working
(Cognition images, n.d.)
When I see first in above pic. The first word comes in my mind is human. But it’s not. It
happens because of cognition processes. Cognition is describing by different kind of
processes. The processes are
 Attention
 Perception and recognition
 Memory
 Learning

8
 Reading, speaking, and listening
 Decision making, planning, problem solving
The description of above processes is given below.
Attention
Attention is the focusing on object for a particular time. It’s a concentration of
consciousness upon any object. It’s a preliminary modification for reaction. Attention help
us to grab particular knowledge from particular things.
How attention works
The process of attention is environed with two senses, the sense of hearing and visual
sense, an example of sense of hearing is waiting for interview. When our name is called
then we know that it is our time to go in. An example of visual sense is watching a movie
with subtitle. When the subtitle appears, we attend to the information about the dialogue
of the movie.
Figure 2: attention
(How attention works, 2017) (jeeny Preece, 2017)

9
Role of attention in Interaction Design
In Interaction design, attention apply in two ways, one is defining the user goals, other is
presenting the information structurally. As example, if we design mobile app such as
gaming app. we don’t know which type of user are going to use that. How they react when
they will use it? It is important to grab their attention. When a user use something for first
time they are looking for some attractiveness of any product on the basis of their attention.
So, it is important to apply proper attention process when design something interactively
There are some guidelines to grab the user attention are given below
General Guidelines
 Information must be observable
 Information must be decorated in structured way
 Avoid cluttering
 Use proper color, icon, graphics, spacing
 Interfaces must be plain because it easier to use
Mobile specific Guidelines
 Use different types appropriate icon for different type processes.
 Use different types of appropriate audio for different types of process
 Apply appropriate color
 Information must be chunk by category
 Use as less as possible word to describe something
 Not apply too much information
 Split screen function should apply for multitasker if needed
(jeeny Preece, 2017) (mobile guidelines, 2017) (Norman, 2017)

10
Perception
Perception is recognizing something by our difference sense such as ears, fingers, eyes
in order to interact with environment. As example, we recognize our favorite food by its
looks such as we recognize apple by its shape, color, and its flavor. We recognize a song
by its singer and its melody
(Study.com, 2017) (jeeny Preece, 2017)
How perception works
Perception involve to respond to the information that we capture. Interpreting the
information with meaningfully with audio or sound, smelling something also the portion of
perception.
Role of perception in interaction Design
In Interaction Design vision is the most important sense following by seeing hearing and
touching. Any information should represent in a way which is easily captured and readily
perceived
1.
2.
Figure 3. capture information by perception
(Perception pic, n.d.)
Picture 1 is hardly to recognize but pic 2 is easy to recognize
perception plays a vast role in interaction design. Perception provides us some guide line
to make any interface usable. By this designer understand, how user see and feel while
using something in order to understand properly. If a user doesn’t understand properly

11
what he uses, then user will might not want to use that thing at second time. There is a
true fact that, while human perceived something easily of any type object, their curiosity
increases of that particular things.
Figure 4: this interface is easily recognizable and understandable
(imangistudios.com/, 2017)
General Guidelines
 Information needs to be represent in an appropriate form to facilitate the perception
 Information must be recognized of its related meaning
 Icon, image, or other visual art must be illustrating in a way that should be clear
enough so that user can perceived and recognize properly
 Any kind of Sound must be clear enough so that it is understandable by users why
they represent
 If speech output is applied, then the spoken word must clear enough and related
to their meaning
 Representing the text form the background should be transparent

12
 Representing the tactile feedback in a way that it discloses the proper meaning of
various kind of touch and it must be distinguishable
 Choose appropriate color
 text size, image size, or any other graphical representation must be representing
according to the size of small or medium screen
 Meaningful tactile feedback
 Use background sound in an appropriate way
 Ensure pliability
 Ensure responsiveness
 Ensure expected and consistence behavior
(Norman n. , 2017)
Memory
Memory is the process where information is firstly encoded means converted real world
information into mental representation then store and then retrieve. Every time when we
want recall something, our brain call on our memory network and instantly decision are
taken to do something. It’s call filtering process of memory.

13
Figure 5: memory (images.google.com, 2017)
(Memory, 2017)
How memory works
Memory, function about to recall many things against various kind of person’s capacity
such as someone’s phone number, address, name, when they last meet someone etc.
Our brain processing power is limited but If we pay attention more on something we can
recall more because reorganization ability is increases with proper attention. There is a
phenomenon, recognition is better than recall because people are better with it. there are
three type of memory that human can contain.

14
Figure: 6. Different kinds of memory (interaction-desing org,
2017)
(interaction-desing org, 2017) (jeeny Preece, 2017)
Role of memory in interaction design
Our brain will be totally overloaded if we want to remember everything of our feelings,
touching, hearing, seeing. We easily forget many things. In example. If someone ask us
to remember the birthday of all the family member or full name of our all relative. How
many can we remember? Now if someone ask us to remember a movie name and their
actor or actress name then it is easy to remember than birthday. Because the movie has
image, color, visual effect only one title. It is easy to people remember visual cues more
than arbitrary things. In interaction design, designer can create better design by
understanding the process of human memory. This is important to apply it in their design
to increase usability and readily perceivable by the user in order to fast use
(Human memory, 2017)

15
General guidelines
 Avoid complicated information or task to overload user memory
 Provide such type of information which is more recognizable than recall. For this
process designer, must use appropriate icon, image, proper object
 When user store some information in electronics media then a way must provide
to find their storing data through the use of icon image, color flagging.
 Provide an area where user activities will be stored
 In some cases, design some minor message, warning and alert with relatively
sound
 Use some familiar real world object
 apply self-generation effect
 Some information should display with image rather than using word or sentence
 Send notification sometimes, to notify user about their state
(Human memory, 2017)
Learning
Learning is something which relatively change the attitude or behavior by experience and
practice. It defines the process of how people acquire knowledge and interact with their
environment.
(Learning, 2017)
How learning works
It considers in two aspect, one is how to use an object and understand that object through
using. this means follow some manual instruction to learn something and learn something
through doing. There is another approach of learning that is training-wheels for novice to
learn basic to advance and make them experience.
(Learning, 2017)

16
Role of learning in interaction Design
when an app or game is design. Designer don’t know which type of user are going to use
that. May be the age of the users are less than ten, may be the users are totally novice,
May the users are advance. While they will open an app and then if they don’t know how
to use it. then it will affect their behavior which reduce their interest to that app. in this
regard learning play’s a significant role in interaction design. Therefore, the user need
“how to use” guideline to use anything new. A learning example can be given by the
reference form Microsoft office word
Figure: 7 This is Microsoft mail merge function

17
Figure: 8- If any user doesn’t know how to use this function, then it
has a process to teach the user about this function
General guidelines
 design such a way that define exploration
 Interface must contain “how to use” guideline
 Link representation must be applied to be learned

18
 Teach tutorial through playing
Reading, speaking, listening
How we communicate with each other? The answer is through language. We use 4 parts
of language reading, writing, speaking, listening for communicate with any object. Both of
these 4 parts has some similarity and differences.
Figure 9: how reading, speaking, listening works
(images.google.com, 2017)
How reading, speaking, listening works
If we say, “I LOVE YOU”, it discloses the same meaning whether someone write it, speak
it, and read it. communication can be different in different situation which depending on
the person, task, and context. For example, someone like reading more than writing or
someone more like listening then reading.
Some comparison of reading, speaking, listening and writing are given below.

19
 Written language is always save somewhere but listening is temporary.
 Speaking and listening language is slower than reading language because if we
scan on some written text we can rapidly scan in such way which isn’t possible at
the time of speaking and listening
 Reading and speaking language take more cognitive effort than listening language.
Because visualize user are more interested in visualization with sound
 Spoken language is not totally dependent on grammatical rules but written
language requires.
Role of Reading, speaking, listening in interaction design
Accessibility are ensured by the fulfill of useful requirement of any type of user. while an
interface is developed, how disable people can communication with that interface. In this
type of cases reading, speaking, listening play significant role in interaction design. such
as apply speech recognition for command to do something. For blind people text-to-
speech should apply. it has some guideline to follow.
General Guideline
 Use appropriate font size so that user can read properly.
 Apply vocalized request (speech recognition).
 Use Speech output for blind user and accent of word must be appropriate
 Use Pictorial representation with text for deaf user
 Apply Auditory navigation. The length of navigation should not contain more than
3 or 4 options
 Provide documentation
Mobile specific guideline
 Apply Vibrator pattern
 Use suitable font size

20
Problem solving, planning, reasoning, and decision-making
Different people carry different level of knowledge. If we compare the skill differences
between novice and experience user, we will get different type of result. Novice user
involve limited knowledge. They tend to make assumption about what should they do.
They often make error and can’t achieve maximum productivity in their task. In contrast
expert contain more knowledge and apply proper strategy for carrying out their tasks.
That’s why problem solving planning and decision making play important role in
interaction design. for ensuring full usability and productivity developer or designer must
think about all type of user before developing. Therefor they should follow the guidelines
of Problem solving planning and decision making.
Figure 10 : problem_solving_planing. (images.google.com,
2017)
General guidelines
 Provide documentation for user who want to understand more
 Provide comment area so that user can share their experience
 Provide feedback option to know user opinion

21
Conceptual Framework
Mental model
Mental model represents a structure which is identical to the structure of the world
and also represent believability, prediction, probability and so on.it describes every
situation of the model what it represents iconic representation. Mental model
always introduces to new concept such as, user can have multiple mental model
in same thing It is based on truth. Only possible situation is representing by mental
model. System and environment represented by the mental model which derived
from the experience.
(what-are-mental-model, 2017)
Advantages
 Mental model is the best way to fathom anything
 It creates the deep knowledge of anything
 It can create prediction of anything
 User experience are improved by mental model
 Strategic thinking guidance can gain for solving problem
 It increases the confidence for better design
(mental-modle-benifits-limitations, 2017)
Limitations
 In some specific case, mental mode can be erroneous by people
 In mental model people create abstractions and apply them in different kind of
device whether it is appropriate or not
 Time ineffective, take so much time to create
 More challenging
 Needs great amount of data to design
(mental-modle-benifits-limitations, 2017)

22
Gulf of execution and evaluation
In everyday life, we use lots of thing. When we use something two gulfs are faced by us.
One is gulf of execution and other is gulf of evaluation. gulf of execution means how
something operate and gulf of evaluation means to find out what happened. One refers
to discoverability and other refers to feedback
Figure 11: gulf_of_execution (Norman D. , 2017)
Advantages
 It asks several questions that helps designer to understand user’s mind
 It helps to define the usability of any system
 It helps to designer to identify the user attention on particular object
(Norman D. , 2017)
limitations
 It is hard to understand every user mind. So many appropriate question can be
arising from user mind when they use something but designer doesn’t include in
their design

23
 Sometimes it is hard to make sure that people using the product can always find
the answers
(Norman D. , 2017)
Distribution cognition
Distribution cognition is the theory of individual knowledge, not only an individual
knowledge but also individual’s physical and social environment. in this model, Different
kind of resources and technology is use for our furthered thinking Information is
transformed by different media in this process. Here is an image given below how
information transform in this process
Figure 12: distribution_cognition (Hutchins, 2017)
Advantages
 It helps to distributed knowledge across the different types of member to complete
a task
 It helps to understand the any organization cognitive systems
 It helps to figure out how people can interact resources and materials within the
environment

24
 Time consuming, multiple work can be done in same time by following this
framework
(Hutchins, 2017)
limitations
 Something it is difficult create new user learning experience form different
perspective
 It is non-individualistic
 It does not look what’s happening in the brain rather than looks at the socio
technical processes
(Hutchins, 2017)
External cognition
External cognition explaining the cognition process that we interact with different
type external representation. it involves with some process that define the cognitive
benefits. The processes are externalizing to reduce memory load, computational
offloading and cognitive tracing. We often forget things such as it is difficult to
remember birthdays, appointments, address some math algebra. Externalizing to
reduce memory load use for this type of artifact. Reminder, calendar, sticky not
diaries use for this type of process to remember Another external cognition is
computational offloading which occurs when a tool or device are used by us for
external representation. Such as solving a math problem. It is easy to multiply 10
by 2 but it is little bit hard to multiply 304 by 831. In this type of cases, we use tools
like calculator. Other process is cognitive tracing which modify the external
cognition into new information such as content sharing software
(external_cognition, 2017)
Advantages
 Reduce user’s memory load
 Time consuming, take less time to solve problem
 External cognition supports the user mental capacity
 External cognition focuses the both internal and external structures of the cognition

25
 Graphical representation is easy in design by using external cognition
limitations
 In external cognition, It is difficult to understand key cognitive functions in which
users interact with user interface
 In this framework, it is always harder to figure out how to reduce user memory load
In their mental capacity
Frame work that I chose for my design
In this report, I have been asked to design a game for new staff who are also new in the
local area. For designing this game, I will choose mental model frame work.
Justification for choosing mental model
 It’s easy to understand User’s world by following mental mode
 It improves customer experience
 It allows instructional design
 Problem solving is easy by using this frame work
 It increases the confidence to do a better design
 It helps to derive the top-level activity accurately in design

26
Current mobile design issues
Before designing any app, a developer or designer must consider about current issues of
the mobile design. here are some current issues that a developer or designer can face
and their solution are given below
Detect Users Requirements in the context of UX – One of the of the important
challenge for mobile platform is the detection of user requirements. it is really hard
to identify proper user requirement. Before designing, developer or designer must be
planning about this matter
Too many feature: - There is a common term for user’s that they always like to use
lots of feature in mobile app. But in reality, lots of features in a user interface can load
the user memory which create negative emotion. Too many features arise the
confusion of customer. User’s always like usability. They want to do their work
quickly and easily.
Ineffective sign-up screen: Signup screen one most common experience for users.
May be app owner want to interact with user by taking their info through sign up them
for their brand. If the sign-up screen appears a little after then the user feel bore to
use the app and they can abandon the app.
Dealing with Screen Size: Users use different type of design and different types of
device contains various screen size. It’s really challenging to fit particular app in
different screens. If designer design an app for only latest platform then it will create
problem for old platform users because most of the user doesn’t use latest mobile
platform for their day to day life.
Dealing with operating system: Different kind of device contain different kind OS.
It’s really challenging for developer or designer to designan app for different platform.

27
When designing developer or designer must consider the OS as well. Android, IOS,
Windows each of this platform has own UI element and pattern.
Making the app interactive: – Interactions play an important role in mobile app
design. if the app does not interactive then it will not attractive to the user. Today
mobile devices are very highly tech sensor. So, it is very challenging to provide
particular function for particular sensor because sensor do not only involve with tap
or gesture. There is more challenging function available to interact with device such
as two figure gestures, interaction with eye contact.
Make the app simple and clear: – One of the common challenge is that app must
be clear and simple. While a developer or designer creates an app the functionality
of that apps is clear to them but it does not mean that it will be clear to the user as
well.
Performance: - At the time of app designing app structure, layout, attractiveness is
one thing and performance is another thing. The challenge is that to not only design
a nice app but also making the in a smooth way without any bugs. If app does not
run with smoothly or take time do some functionality then it creates negative emotion
to user’s mind and user will not use that app. so it always considers about
performance when designing
(most common issues with mobile phone, 2017) (biggest challange to app developer
in app design, 2017)

28
The solution of the issue
in according to the report, I have been asked to make an apps for an institute for their
new staff who are also new in local area. In associated with that app I already define the
mobile design issue in above. Now I will define solution of that issues. Here are the
solutions are given below.
Using prototype – One of the good way to start with sketching app ideas. Rapid
prototyping which can alive the idea. With the help of prototyping tool, we can make
interactive realistic prototypes. We can take many advantages form prototyping tool
before creating original apps. It has clickable wireframes operation on our design. It has
also simulation option which can alive the design like original app.
Technically use too many feature: User always like to use different type of features. It
does not matter how many features we use in the app. But it should use technically. Use
different types of icon instead of text to provide feature. When designing an app, it will
always be considered not to use too many information in one screen. Chunk the feature
separately. For some features, should find out technique which known to user such as
using real world metaphors. Organize the feature decurrently which discloses visual
clarity.
Appear sign-up screen technically: User always like to use unique features such type
of unique feature which can change the user’s mind positively. it will be great technique
for users to create yearn on some unique features and make a restriction that they cannot
use such type of features until sign up.
Responsive Screen Size: different device contains different types of screen size. If
anyone wants to make an app for all type of screen then responsiveness is solution for
them. If an app is responsive then it will fit all type of screen because it changes the
appearance, layout, structure in according to the devices size. There is other solution

29
make the design adaptive, but adaptive design contains some problem because it’s not
smooth like responsive design. so, it will be better option to choose responsiveness when
design
Cross platform solution: In this area, the most important thing is decision making which
platform should to choose in according to the requirement. Here is the three type of option
a designer can choose for cross platform. One is go native means choose one platform
for your design. Option 2 is go Hybrid means choose full cross platform. There are so
many tools available for hybrid option. One of the most popular tools is XAMRIAN tools
which allow cross platform development and simplifies mobile application creation.
Choose html 5 application and make it work for mobile platform. Kendo UI, Sencha Touch
are available tool to do this.
Easy and enjoyable Interaction: - Interaction is the most essential things in design. it
should be easy, flexible, and enjoyable. It should not restrict any app to tap and swipe
gestures. Different types of click options should be use for displaying extra information. It
can be better to use more interaction like, shaking, animation, flipping for various
interactions which will attract the attention of the users and make it enjoyable to them
Make clear and simple app: - Unclear apps increases the user’s memory load.
Meanwhile, should be take care about the user’s memory capacity when designing an
app. The solution is that, use relevant color, relevant sound associated with the app.
Appropriate icons, thumbnails use to display information which disclose the real meaning
in according to the app. However, at the time of designing it should be make sure that
icons match with the native UI elements of choosing mobile OS.
Increase Smoothness of apps: - Performance is very essential things for any apps. For
increasing the smoothness of apps, it is important to fixing bugs time to time. Maintenance

30
the app properly and update in time. Before releasing final version run test cases with test
user. Provide an option for taking user opinion for fixing bugs and update.
(solution of app design issues, 2017)
Data gathering technique
There are lots of technique to gather data such as observation, focus group, interviews,
questionaries’ document and record
I choose two techniques for gathering data one is observation and other is interviews.
Observations
Observation is one the effective and quick way to gather data. there is no need any
premutation for following this technique and data is gathered with direct observations.
Benefits
 Time effective
 No need to train
 Help to gather lots of data
Roadblocks
 Hard to Identify appropriate data and interpret them
 Important data can be missing having lack of attention
Interviews
It is the technique where a discussion is built between two or more people
with various kind topic which allow deeper understanding form respondents
answers
Benefits

31
 Help to deep thinking to gather abstract data
 A good relation is built with client
Roadblocks
 Less time to gather complete data
 Interviewer must well have trained to gather appropriate and relevance
data
(data gather technique, 2017)
Developing personas
I have been asked to develop a game for an institute for their new staff who are also new
to local area. For gathering information, i meet with two people of institute and discuss
about themselves. After this I develop tow persona the two personas are given below
Primary persona
Picture
Name Mohammad Shaheen
Age 47
Profession Service holder (Designer)
State Tangail
Motivations He has lots of curiosity about IT world. He like to
gain knowledge form different area. He loves to
spend time on internet inhis leisure time He loves

32
android more than other operating system. He
also loves to travel and play game he likes
strategic game most. He has also curiosity about
new area
Goals  Want to learn new things
 Has curiosity about new area and their
culture
 Always with the internet to know
information
 Love to play game
Secondary persona
Picture
Name Mohammad mohiduzzaman
Age 57
Profession Service holder (QC manager)
State Sylhet
Motivations He is the Quality controller in his institution. He
loves to read books. He Wants to gain knowledge
continuously. He has less interest to internet but
he uses android phone because of flexibility but he
doesn’t love to play game. One things he likes

33
about smartphone is google map because He
loves to visit different types of places.
Goals  Want to gain acquire knowledge
 Visit different types of place
Frustration  Less interest to the mobile app
 Less interest to internet
Scenario
I have been asked to design a high-fidelity prototype for new staff of an institute to familiar
them with key local services and the area of the interest. I have decided to make a math
puzzle game which is strategic and enjoyable to solve math puzzle. It is very easy but
little bit strategic, any types of user can play the game easily. For this reason, I choose
an institute perfume world where it has lots of perfume shop and office in different places.
I have decided to make this app for this institute main branch. One day I have visited the
main branch of this office situated in DOHS area in DHAKA and do some little discussion
with their employee. Then I share my plan to them they appreciate my plan positively.
After I observe some employee how they interact with the smart phone then I take
interviews of two people who are almost new in this company
Primary scenario
Mohammad Shaheen Is the designer of the main branch. He designs the perfume glass.
He is the new staff of this company. Before he lives in another city but for this job recently
he recently transfers with his family in current city. He loves to do new things. He as lots
of curiosity on android game. He loves to play different type of games in his android
phone. Strategic type game is very favorite to him. In leisure time, he likes to search
internet to know various kind of information that he loves. He Is totally new in this area.

34
He has plenty desire to know about area of interest I his current area. By using “Make
puzzle with math” apps, he can easily find out the location of different places and not only
places but also, he will know about the key local services of this institute. Whereas He
loves strategic games, therefore this game is also will help him to provide strategic
knowledge.
Secondary scenario
Mohammad Mohiduzzaman is the QC manager of the main branch. He inspects the all
perfume quality. He also recently joins in this company. He lives with his family and. He
has not so interest to internet and smart phone. Though he uses smartphone for his own
benefits. But he has less interest to android app. He loves to read different types book
and love to acquire knowledge. He also like to make travel with his family. He like to visit
various kind of place with his children. Whereas he like to visit different type of place,
therefore this app will help him to find the location in his current living state.

35
Use case Diagram
Figure :13 Use case diagram

36
Task analysis
Logical steps of the applications are defined by task analysis. Here is my apps task
analysis are given below
Hierarchical Task analysis
Figure 14. HTA

37
Requirements analysis
For designing any app, it is very important to gather relevant requirements. I have been
asked to design a game for new staff of an institute who are also new in this area and
make familiar to them with key services and some local area of interest. I have decided
to make math puzzle game for them which is really enjoyable brainstorming. I follow some
guideline to gather requirement for my design and the guidelines are brainstorming,
prototyping, interface analysis, document analysis, survey, observation.
Here is the list of functional and non-functional requirements of my game
Functional requirements
 User can Start game
 User can Control the game menu
 User can Unlock and select Stage
 User can Unlock and select level
 User can Solve puzzle
 User Get notification
 User can Unlock key local facilities
 Control GPS
 User can Unlock area of interest
 User can View map to know local area position
 User can Sign up
Non-functional requirements
 This app is Easy to Use
 This app is Enjoyable to Use
 Efficiency in performance
 Contain Security
 Has Pliability
 Clear and simple, not contain too much information
 Readability, contain clear word to understand

38
 Learnability, provide strategic technique
(functional and non functional requirement, 2017)
Conceptual model
Here is my apps conceptual model how user interaction build through mobile apps. In
this model, I give example about unlock local area services
Figure 15: conceptual model
Design principle
It is always advisable to follow design principle when designing an app. Mobile has own
environment it contains various specification and it has limitation. for making a successful
mobile apps, better interactive User interface and User experience play significant role.
Here is the design principle are given below

39
Information architecture
Information architecture is the step by step logical process of shared information. It
defines how the content of mobile device app is organized. It helps user to find out
information easily what they want.
Guidelines
 Organize the content and navigation according to the user’s need
 Enable Optimize navigation because mobile device contains small
screen. Ensure that user can complete their functionally through few tap.
Do functionality such a way that each tap can help them to complete
their task
 Provide navigational cues which can help the user to notify them where
they are. It is mandatory to put back button, personalize setting option
and exit button in every screen of an app. Appear this button by using
real world metaphor which help to user perceive quickly
Functionality
Functionality is the range of operation which help user to operate their task and achieve
their goals
Guidelines
 Prioritize the core features of the app such as, in my app core feature is
to solve puzzle and unlock key local services
 Make sure that both primary features and content are properly optimized
for mobile such as in my app area of interest shows the based-on device
location
 Features should include in relevant category. In my app, all the stage
and all the level contain different types of math puzzle.

40
User input
It requires to enter user’s personal data
Guidelines
 Do not use input like website. Use input as limit as possible. It will not
be good idea to use confirmation input such as verify email, confirm
password
 Default values should be displayed as possible as can. It could be most
frequently item such as (current date when booking ticket) or last
selected item generated by user such as (selected their location)
Figure :16 frequent item (image, 2017)
 Use appropriate input mechanism such as for email it should
appear email key board, for URL it should appear URL key board,
for number, it should appear number key board.

41
Figure :17 keybord principle (keybord principle, 2017)
Gestures
Gesture is the sensor of thumbs to do some specific work by taping with finger
Guideline
 Do not use two or more tap to do specific functionality
 Use two finger gesture for zooming
 Use multitask gesture if it is required
 Notify gesture pressing type when user tap to the devices
Figure 18: tap principle
(keybord principle, 2017)

42
 Avoid air gestures for mobile device
Figure 19: finger principle
(keybord principle, 2017)
Avoid Unambiguous Interactive Elements
It defines the element of the content which is not clear to user.
Guideline
 Use relevant icon
 Make sure that fundamental button appears all the screen such
as exit button, option button
 Ensure the appropriate content
 Use relevant image and audio
 Notify user where they are by color or text

43
Figure 20: user notified principle
(notify images, 2017)
(mobile_User_design_principle , 2017)
Feedback
Feedback is something that attract User attention
Guideline
 Apply success message with one or two word
 User relevant alert that explain it shelf what it does
 Keep Audio alert clear it Use
 Make sure that notification is informative
Figure 21: success notification

44
(success notification iamge, 2017)
Usability
Usability is the overall system that define how well the information is represent, whether
it is user friendly, Enjoyable content behavior, disclose user freedom.
Guideline
 Make sure not to provide too much information in
 Make the information clear, relevant and simple
 Ensure that gesture is comfortable
 Use appropriate button size, icon size in according to the screen
 Follow platform specific standards, make sure that app is
responsive
 Make sure user freedom by specifiedfundamental button in every
screen.
(Usability , 2017)
Methodology Used
For building a porotype there are lots of design methodology available such as Lean UX,
Rapid Action Development methodology, User centric methodology, Google’s
methodology. Lean UX is used to build this prototype
Lean UX
Lean UX is about to learning as quickly as possible and reducing the cycle time of design.
it’s way to apply iterative methods to the user experience design. the main focus of Lean
UX is building such type of product that people are going to use. It ensures the people to
collaborate as team. It helps the business product quickly deliverable. The purpose of

45
lean is that develop user centered business technique. It helps the organization to meet
the challenge and solve quickly. Lean UX provides smoother operation with quality
improvement which introduce to greater productivity. Not only that but also it reduces
operation cost. It contains three formula iterative cycle which produce good benefits in
design and save time and resource through constant iteration and review. the three-
formula cycle are :-
Figure 22 : lean ux iterative cycle
(Lean UX iterative cycle, 2017)
Why Use lean
Using lean in design is better choice because

46
 It responses the early customer validation with unknown end-user
value
 Helps to make proper team collaboration in design
 It helps to make vlidate assumptions and hypotheses
 Lean UX help to change the way of the design, it allows us to
reframe the design in terms of business goals
 It helps to remove the uncertainity for any kind product
(Lean UX, 2017)
how to implement Lean UX
The process Lean UX implementation are given below
Figure 23 : Lean UX working cycle
(Lean UX, 2017)
Ask question before apply
while design something through Lean UX typical question might include before starting
the questions are :-

47
In above quesiton helps to make the solution of any product
Creating hypothesis
There may be more than multiple answer of each question that above mention. It define
the lot’s of assumption. The assumption should make document quickly with prioritzation.
In lean UX hypothesis has created to test the assumpitons. In this part every idea and
assumption is being tested to outcome the result
Apply MVP
Minimum Viable product which is the core feature of Len UX. It define the basic concept
of possibiltes that means after testing all the asumption if it could not give valuable result
then abandon it and go for furthure design. the image show the way to identify minimum
viable product
Figure 24: apply MVP in product
(Lean ux working cycle, 2017)

48
Schedule User regular testing
Specify a time in weekly or monthly for regular testing with user. It focuses on the several
of things such as UI, content testing, conceptual testing, or wireframe and prototypes. It
should continuesly communicate with user and developing the user’s understanding what
he want.
(Lean ux working cycle, 2017) (Lean UX deliverable business, 2017)
Design Artifact
Low Fidelity Design
Low fidelity prototype means sketching the prototype in a script. It helps to design high
fidelity porotype clearly. Some low fidelity prototype is given below
Figure 25: welcome page

49
Figure 26: after clicking options button
Figure 27: stage screen
Figure: 28: select level screen

50
Figure: 28: solve puzzle screen
Figure : 29 key local services screen
Figure : 30 another puzzle screen

51
Figure : 31 area of interest location screen by map
Figure : 32 Email screen
High fidelity Design
Some screen shots of final prototype are given bellow

52
Figure 33 : welcome page
Figure 34 : options page
Figure 35 : Select stage page

53
Figure : 36 game training page
Figure : 37 after training complete
Figure : 38 select stage screen

54
Figure : 39 : stage 1 level 1 puzzle screen
Figure 40 : key local service screen

55
Figure 41: after completed level 1 completely

56
Figure 42: Area of interest location
Figure 43: if user want to exit

57
Figure: 42 sign up screen
Evaluation
This interface has been evaluated below by follow Jacob nelson design principle
 Visibility of the system
 Should match interface element between system and the real
world
 Make sure that user has freedom
 Consistency
 Error prevention
 Recall is better that recognition
 Ensure flexibility
 Aesthetic and minimalist design
(jacob neilson designprinciple, 2017)

58
Product evaluation
here is the product evaluation are given below
options exit
Back button Lock proper gape between the button
Clear font size
Not contain two much information
This interface totally visible to the user. Any type of user can understand properly what it
explains. It contains clear language proper icon and assure consistency and flexibility

59
setting close
Back
This interface match with real world metaphor. In real world, we are used to back sign in
left direction, we are used to close sign by stopping something. In same way back
button command to go back and close button command close the game and setting
button command to modify something

60
In this interface, same color relevant icon, button, notification message, button with
relevant label has been used to every screen so user can easy recall the interface and it
is really minimalist design because dialogue contain with one or two word. And it readily
perceived because information is chucked by category

61
If user press close button wrongly then a message box appears to confirm user that they
really want to leave the game or not.

62
Lock
User cannot really go to the next stage until complete before stage Which ensure security
After completing each user can confirm that where they it will notify to the user with
complete icon
Which level they completed

63
`
Empty text field
Text field with number
It is the functionality when user solve the puzzle one service or one area of interest will
be unlocked

64
Location of area of interest has unlocked after solving the puzzle

65
Contain less information in sign up area and has given user freedom by not to forcing
sign up
Conclusion
Make puzzle with math is the multimedia high fidelity prototype that is developed by
following cognitive psychology of the users and its design implication. In this report,
current design issues of mobile and tab and their solution has been defined and applied
their solution in this prototype. Principle of Usability has followed by different resources
and applied the interface so that it become user friendly to the user. Though all the
requirement might not be fulfilled, yet the main requirement of the porotype has been
fulfilled. In future development, I will try to make the prototype more dynamic and more
usable. Form this course work I have learnt so many important things about design how
design can be applied form physical world to digital world. I have learnt how people think,
why people think differently, how our memory actually work, how design can be attractive
to people and these processes will really help me in my future work.
Word (7629)

66
References and Bibliography
Bibliography
(2017). RetrievedfromStudy.com:http://study.com/academy/lesson/what-is-cognitive-psychology-
definition-theories-quiz.html
(2017). Retrievedfromimangistudios.com/: http://imangistudios.com/
(2017). Retrievedfromimages.google.com:
https://www.google.com/search?q=pic+of+memory+in+psychology&espv=2&source=lnms&tbm
=isch&sa=X&ved=0ahUKEwiWkf_hkaTTAhXMMY8KHdRyB2MQ_AUICCgB&biw=1366&bih=623#i
mgrc=W06I6TfOXei4gM:
https://www.google.com/search?q=reading+speaking+learning+listening+pic&espv=2&source=l
nms&tbm=isch&sa=X&ved=0ahUKEwizj5adkqTTAhUFRY8KHU0iDtMQ_AUICCgB&biw=1366&bih
=623#imgrc=eqHUxOa5bNclCM:
https://www.google.com/search?espv=2&biw=1366&bih=623&tbm=isch&sa=1&q=problem+sol
ving%2C+planining+in+psychology+&oq=problem+solving%2C+planining+in+psychology+&gs_l=i
mg.3...20512.25598.0.25718.31.27.4.0.0.0.155.2552.15j10.25.0....0...1c.1.64.img..2.2.201
biggestchallangeto app developerin app design.(2017). Retrievedfromblog.venturepact.com:
http://blog.venturepact.com/10-biggest-challenges-faced-by-mobile-app-developers/

67
CHerry,K. (2016). What-is-cognition.Retrievedfromhttps://www.verywell.com/what-is-cognition-
2794982
Cognition images.(n.d.).RetrievedfromGoogle.com:
https://www.google.com/search?espv=2&biw=1366&bih=672&tbm=isch&sa=1&q=+cognition&
oq=+cognition&gs_l=img.3..0l10.16383.16383.0.16626.1.1.0.0.0.0.166.166.0j1.1.0....0...1c.1.64.i
mg..0.1.165.fcHl4bjG8NI#imgrc=R0jyc0FESgO_fM:
cognition,w.i.(2017). Retrievedfromwww.youtube.com:
https://www.youtube.com/watch?v=ywxZVMrqz0g
datagathertechnique.(2017). Retrievedfromblog.socialcops.com:
https://blog.socialcops.com/academy/resources/4-data-collection-techniques-ones-right/
external_cognition.(2017).Retrievedfromwww.interaction-design.org:https://www.interaction-
design.org/literature/article/external-cognition-in-product-design-3-ways-to-make-use-of-
external-cognition-in-product-design
functionaland non functionalrequirement.(2017).Retrievedfrom/principles.adactio.com:
https://principles.adactio.com/
Howattention works.(2017). Retrievedfromww.psychologydiscussion.net:
http://www.psychologydiscussion.net/notes/psychology-notes/attention-and-
perception/notes-on-attention-meaning-types-and-determinants-psychology/1965
Human memory.(2017). Retrievedfrom/www.interaction-design.org:https://www.interaction-
design.org/literature/topics/human-memory?order_by=date
Hutchins,E. (2017). Distributioncognitoin.InE.Hutchins, Cognition in the wild.
image.(2017). Retrievedfromwww.codementor.io:
https://www.codementor.io/design/tutorial/mobile-app-ui-design-principles
interaction-desing org.(2017).Retrievedfromwww.interaction-design.org:https://www.interaction-
design.org/literature/article/the-properties-of-human-memory-and-their-importance-for-
information-visualization
jacob neilson designprinciple.(2017). Retrievedfromwww.designprinciplesftw.com:
http://www.designprinciplesftw.com/collections/10-usability-heuristics-for-user-interface-
design
jeenyPreece,H.S.(2017). Cognition.InH.S. jeenyPreece, Beyond human-computerinteraction.
keybord principle.(2017). Retrievedfromwww.codementor.io:
Lean UX.(2017). Retrievedfromwww.justinmind.com:https://www.justinmind.com/blog/choosing-a-
ux-strategy-that-suits-you-and-your-users-agile-vs-lean-ux/

68
Lean UXdeliverable business.(2017). Retrievedfromwww.smashingmagazine.com:
https://www.smashingmagazine.com/2011/03/lean-ux-getting-out-of-the-deliverables-
business/
Lean UXiterative cycle. (2017). Retrievedfromwww.interaction-design.org:https://www.interaction-
design.org/literature/article/a-simple-introduction-to-lean-ux
Lean ux working cycle.(2017). Retrievedfromwww.interaction-design.org:https://www.interaction-
design.org/literature/article/5-ideas-to-help-bring-lean-ux-into-your-research
Learning.(2017). Retrievedfromwww.verywell.com:https://www.verywell.com/what-is-learning-
2795332
Memory.(2017). RetrievedfromYoutube.com:https://www.youtube.com/watch?v=KXx_LXNjetU
mental-modle-benifits-limitations.(2017).Retrievedfromrosenfeldmedia.com:
http://rosenfeldmedia.com/mental-models/survey-results-benefits-roadbl/
mobile guidelines.(2017). Retrievedfromwww.smashingmagazine.com:
https://www.smashingmagazine.com/category/mobile/
mobile_User_design_principle.(2017). Retrievedfromwww.codementor.io:
mostcommon issueswithmobile phone.(2017). Retrievedfromwww.quora.com:
https://www.quora.com/What-are-the-most-common-issues-with-mobile-app-interface-designs
Norman,D. (2017). gulf_of_execution.In D.Norman, Design of everything .
Norman,N.(2017). Humna-mind.Retrievedfromwww.nngroup.com:
https://www.nngroup.com/courses/human-mind/
Norman,n.(2017). interaction-branding.Retrievedfromwww.nngroup.com:
https://www.nngroup.com/articles/interaction-branding/
notify images.(2017). Retrievedfromimages.google.com:
https://www.google.com/search?hl=en&tbs=simg:CAES2QIJVUEwf2ELyzEazQILEKjU2AQaAggKD
AsQsIynCBpiCmAIAxIojQKLArAGigGjEqsGjgKNCvITsQaLJ7gh7Sa9IYwnwiG5Ie4mqS79JhowWTDgg
w1sb7o8n2aijB1sHXKrwGrwCubRROI2M6agD20qSrs7kZE1eNp1wg_1B-
6bKIAQMCxCOrv4IGgoKCAgBEgQ48BNXDAsQn
Perception pic. (n.d.).Retrievedfromrobtroster:http://blog2.robtroster.com/2011/05/perception.html
solution of app design issues.(2017). Retrievedfromwww.youtube.com:
https://www.youtube.com/watch?v=oT8dWBNksyY
successnotification iamge.(2017). Retrievedfromwww.google.com:
https://www.google.com/search?q=success+message+mobile+app&espv=2&source=lnms&tbm
=isch&sa=X&ved=0ahUKEwi2tqXG1qvTAhVIRo8KHU-
iCbkQ_AUICCgB&biw=1366&bih=672#imgrc=VcXJ-QXyXGzEoM:

69
Usability . (2017). Retrievedfromwww.smashingmagazine.com:
https://www.smashingmagazine.com/2012/07/elements-mobile-user-experience/
what-are-mental-model.(2017).Retrievedfrom/mentalmodels.princeton.edu:
http://mentalmodels.princeton.edu/about/what-are-mental-models/
Appendix A
Function pages of prototype are given below
Figure 43 home icon
After clicking the home icon user will redirect welcome page

70
Figure 44: welcome screen
If click option button
Figure 45: options
If click the back button then it go back to the main screen
Figure 46. main screen

71
If user click start button then the game will start
Figure 47 : Game play option
When user wan to play game first of all a traning to teach him how to play. After clicking
training button

72
Figure 48: training session
When user finish the training it will autometically go the welcome screen with unlocking
stage 1
Figure 49 : after completeing training session notify user with icon
After clicking the stage 1 user have select level to play puzzle game

73
Figure 50 : Select Level
After selecting level a puzzle game will appear
Figure 51 : solve puzzle

74
After input the puzzle value it will look like
Figure 52. answer of the puzzle
After solving the puzzle a lcola services will be unlocked
Figure 53 : unlocked key local are services with success message

75
After unlokcing it if user click next button the level 2 will be unlocked
Figure : 54. Unlock level 2
When user click level 2 another different type of puzzle will be appear
Figure : 55. Level 2 puzzle

76
User must solve this puzzle to unlock area of interest
Figure : 56. Level 2 puzzle solving
After solving this puzzle it will autometically redirect to area of interest locaiton and map
screen will be rotate

77
Figure : 57 unlock location of area of interest
If the user click ok button icon then it will redirect the select stage screen with unlock new
stage
Figure 58: after completing stage 1 stage 2 will be unlock
In this similar way all stage contain with all level must complete to unlock more key local
services and area of interest

78
If user want to exit the then warning will apear whether they want to exit or not
Figure 59: if click exit button
Exit button
Figure 60: warning for exit
If user click Yes then it will redirect to the home page

Interaction Design and UX design and UX and cognitive psychology

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Interaction Design and UX design and UX and cognitive psychology

Similar to Interaction Design and UX design and UX and cognitive psychology (20)

Recently uploaded

Recently uploaded (20)

Interaction Design and UX design and UX and cognitive psychology