Course: COMP1649
Human Computer Interaction and Design
Submitted to
Submitted by
Course Leader
Username: ma7267c
Dr. Ralph Barthel
Banner ID: 001087507
Coordinator
University of Greenwich
Prototype Link: https://xd.adobe.com/view/c455ff66-12ff-4838-6339-10f93e419e51-b264/
Date of submission: 4th November 2019
1
Contents
1. Introduction .............................................................................................................................................. 4
Assumption ................................................................................................................................................... 4
2. Background ............................................................................................................................................... 4
2.1 Processes and Frameworks for Interaction Design................................................................................. 5
UCD ........................................................................................................................................................... 5
GDD ........................................................................................................................................................... 5
Lean UX: .................................................................................................................................................... 6
2.2 Cognitive psychology .............................................................................................................................. 8
Attention ................................................................................................................................................... 8
Memory..................................................................................................................................................... 9
Perception ............................................................................................................................................... 10
Mental model.......................................................................................................................................... 10
External cognition ................................................................................................................................... 11
2.3 Interaction Design Theory ..................................................................................................................... 12
3. Design Process ........................................................................................................................................ 13
3.1 Interaction Design Research ................................................................................................................. 13
Persona: .................................................................................................................................................. 16
Persona Scenario..................................................................................................................................... 17
Essential use case:................................................................................................................................... 17
Functional Requirements: ....................................................................................................................... 17
Non-Functional Requirements ................................................................................................................ 18
HTA:......................................................................................................................................................... 18
3.2 Conceptual Design ................................................................................................................................ 19
Design principles ..................................................................................................................................... 19
Ideation process: ..................................................................................................................................... 23
4. Prototype ................................................................................................................................................ 27
5. Research Study ........................................................................................................................................ 34
6 Conclusion ................................................................................................................................................ 35
References .................................................................................................................................................. 36
Appendix A .................................................................................................................................................. 38
High level prototype screens: ................................................................................................................. 38
Appendix B .................................................................................................................................................. 44
Design Thinking ....................................................................................................................................... 44
Participatory Design ................................................................................................................................ 44
2
Appendix C .................................................................................................................................................. 45
Learning .................................................................................................................................................. 45
Problem solving....................................................................................................................................... 45
Appendix D .................................................................................................................................................. 46
Theory of action ...................................................................................................................................... 46
Distributed Cognition .............................................................................................................................. 47
Appendix E .................................................................................................................................................. 47
Appendix F .................................................................................................................................................. 49
Questionaries’ ......................................................................................................................................... 49
Research study documentation .............................................................................................................. 50
3
1. Introduction
Modern technology emerges a whole new level of living in all sectors. It can automate almost all
kind of work that helps us to reduce our work time, efficiency and accuracy of work. The following
coursework is making a concept and produces a prototype of a smart device and an application.
It will enable people to change the traditional behavior of online shopping by interacting with a
smart device for shopping. The application that connects with the device provides an easily
understandable interface that can help people to adopt new shopping behavior.
Throughout the report, I cover some key sections. There is a brief discussion about smart home
technology, some interaction design frameworks, choosing and justification of framework.
Influence of applying cognitive psychology aspects. Then design process where research
activities, literature review for developing a conceptual design. The detailed specification of the
prototype and how it will work. Introducing the final high-level prototype and how my research is
fully associated. A critical justification of my research, the achievement of the design process,
limitations, and the future expedition should be.
Assumption
The growth of online shopping becomes higher and higher but user satisfaction is on a question.
The scope of using smart technologies on shopping is for better user experience and an easy
way to shopping. It will make sure less energy expense and better user healthcare. People are
so busy with their work so that they can easily use the device for buying regular needed homebased products. And the application could be desktop or mobile. But this perspective I think the
mobile app is more effective.
2. Background
The smart home is an automation technology that can automate manual home services for a
better, secure and healthy lifestyle. This technology is combined with several sensor devices that
use electronic networking technology to operating. These devices are monitoring, controlling
human data and execute to a comfort solution of neurological conditions. It embedded in a wider
societal context of technology adoption by using it on other sectors like climate monitoring,
environment management. In the future, more sectors will cover with this technology. (He, 2018,
p. 15)
4
2.1 Processes and Frameworks for Interaction Design
The interaction designer uses some frameworks to accelerate the design process. Those
framework involvements ensure creating solutions to the critical UX design problem.
UCD
An iterative design process where users are involved throughout the design process is called
UCD. This framework focuses on users and their needs in each phase. Optimize the user
experience of a system and product. The process is the ultimate goal of the framework. The key
principles are, the user and task requirements need to clear understanding. Ensuring active user
involvement for taking feedback from the user to determine requirements and evaluate the
product design. Other development activities and UCD works as merge. (Lowdermilk, April 2013)
Iterative design processes are below:
Figure: UCD framework process
GDD
Alan Cooper’s goal-directed design is an approach of creating a user model and a user interaction
strategy by the understanding significance of user's needs and their behavior. This framework
focuses on achieving the interaction design goal. This will ensure users are satisfied with product
requirements and they will use it. This framework uses pretended users which are called persona.
Persona is not real people but they represent the real user throughout the process. The process
of goal-directed design is project planning, research, modeling, requirements definition,
frameworks definition, detailed design, implementation support. (Dubberly, 2001)
5
Figure: Goal directed design framework process.
Lean UX:
Lean UX is an iterative design approach that includes product validation with users which they
are going to use. It’s about producing a useable and useful product. It focuses on better user
experience while the design process is running so that early feedback can be used for taking
quick decisions. Lean UX needs are validation of hypothesis and assumption for understanding
what we are going to design. Cross-functional team, measurement, and testing taking a different
approach to design deliverables. (https://www.interaction-design.org, 2019)
Figure: Lean UX interactive frameworks.
After analyzing, I think the Lean UX framework is the best option for our smart shopping object.
Lean UX takes less time, build a collaborate environment, focuses on the user needs, cost
effective data driven framework. But other traditional frameworks are not cost-effective, takes a
long time and the possibility of building an imperfect product can happen.
6
Figure: Comparison between different UX
While the design process of the smart device and the mobile app running, it’s not necessary to
wait for the detail specification because lean UX focuses on building a prototype. Test it by the
user. Then apply the changes. It will ensure the user interest to use the product because they can
easily understand and operate the system
Figure: Lean UX design process.
Assumption plays a vital role in lean UX, it will create problem statement of the smart home object
rather than depending on requirements. Creating a hypothesis after identifying problem
statements, it uses to test the assumption to ensure there is no lack in my thinking. Then create
an MVP (Minimum viable product) which is a small functional product for gaining early customers
and interest in new online shopping. It helps to prevent building whole imperfect products. Run
an experiment include A/B testing which is for understanding how perfectly the user interacts with
7
the smart object at home. Taking feedback and research on it for better interaction experience. If
these steps are followed a high user interaction experience prototype can be built. (Gothelf, 2013)
Design thinking and participatory frameworks are given in appendix B.
2.2 Cognitive psychology
Cognitive psychology is all about our mental abilities. How we thinking, brainstorming, learning,
reasoning, remembering, understanding etc. It means how people gain and use their knowledge
or information. UX designer should have advance cognitive psychology than common user.
Designer thinks how could user think while using the system, it’s impact on interaction design.
(Dr. Zhong-Lin Lu, 2007) (McLeod, 2015)
Attention
Attention makes sure our position is on relative stimuli and our response to it. In Interaction design
gaining user attention from the interface by visual perception which involves sound, pattern, color
or other visual senses. Grabbing better user attention in the interface by giving highly important
information in larger and brighter and less important information in smaller and dimmer. Some
attention types are focused attention, selective attention, alternative attention. By using some
theory and approach the customers of a particular sector will get higher attention to their systems.
The theory and approaches are Left to Right theory, Blue peripheral vision, Simon Effect.
Commonly two types of approaches that users use while they take information from an interface,
one is left to right and another top to bottom. Using the Left to Right theory for adding products
via text input will gain attention. Our cones in our retina identify blue colors faster than other colors.
So that using the Blue peripheral vision approach in the mobile app for showing a list of orders.
We can also use Green color for safe and red color for warning. User response accurate and
faster if the systems process is in a relevant location to one another in the interface. UX designers
can use the Simon Effect so that users can proceed with their responses farther. (Paschalidis,
2018)
8
Figure: Attention cognitive processes.
Memory
This cognitive process is unavoidable in the user’s daily life. Three stages in memory are
encoding, storage and retrieval. The data that users receive from the environment; memory allows
them to encode it. This a mechanism that ensures corroboration of data that our brain can store
it. Datastore depends on what types of memory users have. Users have different memory types
such as short- term memory, working memory, long-term memory, etc. Then retrieve the
information when need. But it depends on context because the user can identify things than recall
them. Interaction design needs to user-friendly so that they can easily recognize the system
process. Users can able to use the product easily with less memory load. While users interact
with interfaces, they encode the system data and store it on their memory. Later they will retrieve
the data and recognize how to use the system. So that interaction designer focuses on systems
visual representation. It helps the user to recognize the system rather than recall it.
(https://www.nngroup.com, 2014)
Figure: Memory stages
9
Perception:
Perception is necessary for understand surroundings. It’s about performed to capture, process
and filtering the data with stimuli throughout sensory organs to receive information to memory.
There is some perception type which interacts with some sensory organ. Such as visual
perception receives information and interacts by the user's eyes. Hearing type perception
receives information through the air and interacts with the user's ears. Touch perception takes
information through the surface of our skin by pressure and vibrate. While the user uses the
system interfaces, their brain will follow three processes which are selection, organization,
interpretation and send the information in the right area of the brain. Users will optimize the
information against our stimuli from the system interface and select it. After select their brain
organizes the information into groups for giving them meaning. Then the interpretation process,
how they experienced and getting expectations from the product. (https://www.cognifit.com, n.d.)
Figure: Perception process
Learning and problem-solving cognitive process are given in appendix C.
Mental model:
The mental model is about what users know and thinking that what they know after seeing the
interface. It’s all about user's believe and creates it on their brain which leads them to predict how
to use the system. The designer and the users have a different mental model. And individual
users also have different mental models with the same interface. Designers thought the interface
is easy to understand to users because they have a good mental model. So that the main goal of
10
the designer should be making the user interface, easy to understand, and communicate with
users by basics of the system nature. Our online shopping customer has mental models that they
get from previous traditional shopping. So, the smart object needs to be very user-friendly
interaction and easy to understand how they will use it. Visually users will able to communicate
and use the smart object perfectly. (Nielsen, 2010) (https://www.interaction-design.org, n.d.)
Figure: Mental model example
External cognition:
External cognition is for better user interface experience by processing information of the human's
mind and internal cognition. It’s for external representation of the interface which includes
shopping list, to-do list, spoken instructions, written notes, diagram, calendar, spreadsheet,
reminders, etc. It creates extra benefits for users to understand the system and reduce the
memory load of their brains. Using some visual representation users able to do more and able to
think about how to interact with the smart object smartly. It will reduce the memory load of the
user. Valuable user information will visualize on the interface. The computational offloading like a
calculator will calculate the total shopping cost. (https://www.interaction-design.org, 2018)
11
Figure: External cognition example.
Figure: External cognition helping user by using different color code of different event.
Theory of action and distributed cognitive framework are given in appendix D
2.3 Interaction Design Theory
The interaction design theory includes some modes and types. It’s about how the user can interact
with the system. Interaction design mode voice works as speech recognition and voice control
system which allows the user to communicate with the system. When users identify the product
in the smart object through voice command, the system will generate data and show products
from the storage. GUI (Graphical User Interface) is a user-friendly interface that uses menus,
icons, and other graphical visual indicators. It is for showing information to users and related user
control. The scanner works as recognizing products by scan bar code and QR code. The reader
of the scanner uses leaser technology to identify the product. NUI (Natural User Interface) feels
natural to the user which is easy to use and the interaction is connected with our natural behavior.
Such as gestures, touch, etc. (MORTENSEN, 2019)
How the user interacts with a system is the interaction type. Some interaction types are instructing,
conversing, manipulating, exploring. Instructing is for commanding the system for doing
something by using a keyboard, selecting menus option or function keys. Conversing works as a
conversation between the user and the system. How users act on an object and manipulate them
is manipulating and how users interact with virtual objects by selecting, moving, opening them is
exploring. (https://studylib.net, n.d.)
12
3. Design Process
This is an approach to producing a conceptual solution by break down a large project into a small
part. Different professional categories members, users, stakeholders can be participating. By
holding every possible idea of particular problems with sketching.
3.1 Interaction Design Research
User research is essential for the design process and helps to design a better product. It’s about
gathering data of who users are, what users need, what they want, their behavior and what they
expect from the system interface. Combination of different data-gathering technique which
ensures creating a design is relevant to users, easy and satisfiable to use and finally
understanding return on investment (ROI). It also identifies what problem and challenges possible
occur during the design process. (MORTENSEN, 2019)
This highly effective data gathering technique is an interview, a set of oral and follow-up questions
about such a system. The users answer the question and the aim of the question is to find out
what users are thinking and their feeling about such a system. And the data can be recorded or
written notes. It helps to identify the user’s interest in smart online shopping device. And the
possibilities of getting rich information about how they can adopt it in their daily life shopping.
(Andersson, n.d., p. 56) Focus group is a group of relevant people including the project team
members who are discussing and doing some activity for a particular service or product. They
provide their thoughts and understanding of the product’s broader possible aspects. It enables
the desires of the user, uncovers information and the group members will encounter it. Some key
data gathering such as how the user comprehends the smart shopping object, most valuable
features of the device that the user believes, a user experiencing a problem while using the
device.
And
bringing
new
ideas
about
the
future
desire
of
the
user.
(http://www.yourarticlelibrary.com, n.d.) (http://research.ccdmd.qc.ca, 2019)
Smart
shopping
device
in
a
part
of
smart
home
technology.
According
to
(https://www.statista.com, 2019)
13
Figure: Statistics of using smart home technology
18 to 64 years old people use smart home technology most. And according to
(https://gs.statcounter.com, 2019) recent survey china has 700m smartphone users. There are
78.24% android user and 21.42% are iOS.
Figure: Statistics of china’s android users.
14
Following survey by (https://www.statista.com, 2018) shows that china’s people started most
shopping at the age of 19 to 40 plus.
Figure: China’s online shopper statistic.
My chosen smart device is for altering people's online shopping behavior. The device and a
mobile app which is for the android platform and will work as a conjunction to provide better user
experience while they shopping online from home. My targeted geographical area in China.
15
Persona:
I create a persona based on my research which is a fictional character. This is for helping me to
understand what users need, expectation and goal could be.
Figure: Persona example
16
Persona Scenario:
Mr. Li is a computer science teacher in a Chinese school. He is intensive and believes in
socialization. He uses android, and some popular Chinese social platform. He is very busy with
his teaching career. Therefore, he has no time for going shopping store to buy something for his
children. He loves to buy from online but he is not satisfied with the available shopping services.
It takes a long time searching for his product online as well as not delivery service is also not
good. He wants to buy from online easily and he desires to do shopping within less time. Because
he is an intensive and time awareness person. Smart online shopping devices and the mobile
app can help Mr. Lee for a better shopping experience.
Essential use case:
Figure: Essential use case diagram.
Functional Requirements:
1. Log In/Registration on the mobile app: By giving some information user can register to the
system and then log in to the system.
2. Update profile: The system allows the user to update their profile.
17
3. Add to cart product with a voice command: After giving payment and shipping information
users detect and identify their shopping product with the smart device. Products will add
to cart on the mobile app.
4. Add to cart product with scan: Users can also do shopping by using the smart device’s
scanner. It can scan product bar code and QR code.
5. Checkout and billing: Here users are allowed to confirm their order by previously giving
payment information or add new card.
6. Email invoice of shopping: An invoice for shopping provides to users by email.
Non-Functional Requirements
1. Usability of the system: It ensures that how well and easily users can interact with the
smart device and mobile app.
2. The efficiency of using the system: The system is capable of fulfilling the user’s goal within
an average time. The number of user’s tasks and the transaction can do without errors.
3. Performance of the system: The performance of the system is high with a common and
relevant visual representation.
HTA:
Figure: HTA of smart device and mobile app.
18
3.2 Conceptual Design
After analyzing user research, product research and user’s needs, a conceptual model is built.
User requirements are specified. This model ensures how the user will get their needs and how
the system works. For doing better online shopping, the user needs to adopt a smart device. This
smart device connects with their mobile and operates with an app. Users can identify and detect
their desire product by giving voice command or scanning the product by the smart device. Then
they need to register and log in. Then adding, payment and shipping info. After that, they can add
products to cart and order products.
Figure: Smart device and mobile app operates user.
Design principles:
User experience design is an iterative process which is for enriching user satisfaction. By
improving product’s performance, usability and accessibility. UX designers follow some key
principles. Nielsen’s heuristics, Schneiderman’s golden roles, and Dan Norman’s principles are
popular and most effective. Those principles help UX designer to continuously update and
improve the design. The impact of implementing principles to the design process is high because
it ensures to achieve a product or organization goal. There are some key principles for user
interface design which need to follow for a successful product interface design.
(https://www.interaction-design.org, n.d.)
19
Strive from consistency: This principle indicates that interfaces of the system need to design
consistently. It includes the same design pattern, common icons, menus, colors, typography, call
to action user flows, etc. The user gathers information while using the system because familiar
with it quickly and it also ensures to familiar with the digital landscape of the product. Interaction
designers use this principle and design a system with consistency. So that users can able to
achieve their goal quickly.
Figure: Example of Strive from consistency principle
This strive from consistency principles can apply to the mobile app for better user experience.
Users can finish their tasks quickly. They can easily understand which color, icons, menus for
what reason. So that further interaction they don’t need to understand interfaces. The sequences
of action are pretty clear therefore they can complete tasks comfortably. (WONG, 2019)
Offer informative feedback: Users need to know and understand what going on every particular
process of the system. Within a reasonable time, every action of the process should be informed
with suitable, human readable feedback. Feedback includes relevant, clear, meaningful and fit
the context.
20
Figure: Example of offer informative feedback principle
This important principle needs to follow white smart shopping mobile app is designing. It makes
sure mobile app offers more user friendliness interface where users are understanding what
needs to done on particular situation. This visual feedback helps them to prevent taking longer
time on screen.
Offer simple error handling: Users need to know and understand what going on in every
particular process of the system. Within a reasonable time, every action of the process should be
informed with suitable, human-readable feedback. Feedback includes relevant, clear, meaningful
and fits the context.
Figure: Example of offer simple error handling principle
21
When the user uses the shopping app, they have to input some personal information to the
system. So, this design principle will help the user to understand their error. The system supplies
some solution with a quick hint, use can use it and solve the error without any effort. (Santos,
2018)
User control & freedom: This Neilson’s principle is for ensuring user freedom and better control
of the system. Users can choose the wrong function so that the system should have an exit and
cancel options to avoid user frustration. Good interaction design support undo-redo for better user
experience.
Figure: Example of user control and freedom principle
In the mobile app interface, users could act a wrong step, but the system interface provides some
additional visualization icon or button. It led them to way out of trouble. If the user tries
unnecessary approaches they can exit, cancel from the mobile app. They can also switch one
interface to another by hitting the arrow icon. (Nielsen, 1994) (Harley, 2019)
There are two principle one is match between system and the real world; another visibility given
into appendix B.
22
Ideation process:
The ideation process is for producing ideas about a problem domain and gathering solutions
through some techniques such as sketching, brainstorming, etc. It is ideal for interaction designers
to generate and gather ideas about what they trying to achieve.
One of the core requirements of the online shopping app is the payment of cart products. When
the design process running, I generate some idea about this feature:
Idea one:
Figure: Product Cart
23
Figure: Order Summary
Figure: Adding payment info.
Those sketch shows, after product cart, the system shows order summary. Then users need to
add payment information. After that, they will confirm their order.
24
Idea 2:
Figure: User adding payment info.
Figure: System shows product cart
25
Figure: Order summery and payment option
System asking users to add their payment info before they cart product. Then the system shows
order summary and system detect previous payment info. Or users can add a new cart from here
also.
For this requirement, I think the second solution is better. The first idea shows, if users use it, they
will face less user control and freedom. Because this idea doesn’t follow Neilson’s user control
and freedom principle. Users are not able to get back from the current interface to the previous
interface because of a lack of buttons. But second ideation shows enough interaction buttons and
arrows are available. Users can move on wrong interface or they want to come back. They will
easily go back or front. First ideation shows after the order summary, users need to add payment
information which is less user-friendly than second ideation. It will create extra memory load and
get less attention from users. Users have to recall the card information. In second ideation users
add their payment information first then they can continue order freely.
26
4. Prototype
The final high-level prototype is built based on previous research and concept that I provided.
This product is for China's geographical area where 700m users ' user android platform. This
prototype is built based on an android different version. Android 6 to 9 version users will able to
use it. I use blue (#3A7A7A) type of color gradient for my interface. Because Blue peripheral vision
approach gains user attention.
Figure: Similar color pattern.
I use the same size of buttons as well as two-color. Strive from consistency principle encourages
me to use a similar color pattern. I use #FF6969 (red) for going backward and #34D57F (green)
for forward.
Figure: Choice of color.
27
I use Neusa Next St font family for all interfaces. It looks smooth and easy to understandable to
the user.
Figure: Suitable font selection.
For optimizing mobile screen size limitation, I use such type of form which saves my interface
space.
Figure: Form type.
28
Throughout the prototyping I use jpeg format images. Because I found it easier to edit.
Figure: Using Jpeg images.
Icons are very user friendly so that I use icons with relevant context. Don Norman’s visibility
principles inspire me to use perfect icon. It enriches the visibility of interface. User can easily
understand which action represents what action.
Figure: Relevant icon choice for better visibility
29
One of the core requirements of my prototype is add to cart product. The design steps are given
below:
Figure: Low fidelity prototype of add to cart requirement.
Figure: Wireframe of add to cart requirement.
30
Figure: High Level prototype for add to cart requirement.
Figure: Low fidelity prototype of order summary.
31
Figure: Wireframe of order summary
Figure: High fidelity prototype of order summary.
32
Figure: Low fidelity of registration.
Figure: Wireframe of registration
33
Figure: High fidelity prototype of registration.
5. Research Study:
The research study focuses on what usability goal of a system could be and how the user will
experience a system when they use it. A good design is not enough for a system if it not fulfills
the usability and UX goals of the product. To achieve my usability goals, I follow the HEART
guideline and for UX goal SUS guideline. HEART uses for measuring how users experience could
be. SUS uses for checking system usability that usable or not compares to modern industrial
standard.
For the research study, my assumption is to find out whether or not users can do home-based
product shopping. My goal is to confirm users are adopting new shopping behavior. The
participants are my family members and friends. Taking a core requirement of the product is
purchasing an online product through voice command. I provide sus framework material below
34
Figure: SUS meter of the framework.
Questionaries’ and my own framework documentation are given in appendix F.
6 Conclusion:
From the beginning, I try my best to gain my aims. So that I follow the whole process of interaction
design. Different framework research, user research, requirement analysis, design principles,
evaluation, etc. for better user's online shopping experience. The smart device and mobile app
concept that I produce, it will alter their traditional shopping behavior. Because both devices will
provide better service and products. Though some limitation has such as it is not for wider range
shopping concept. Users us this system for home-based limitation products. In future, more
research and development need for wider range capability of the product.
35
References
Andersson, K., n.d. Data collection through interviews, s.l.: s.n.
Dr. Zhong-Lin Lu, D. B. A. D., 2007. Cognitive psychology.
Druin, M. J. M. A., n.d. Participatory Design: The Third Space in HCI. s.l.:s.n.
Dubberly, H., 2001. Alan Cooper and the Goal Directed Design Process.
Enginess, 2014. The 6 Principles Of Design, a la Donald Norman.
Gothelf, J., 2013. Lean UX. Eric Ries, Series Edition ed. s.l.:s.n.
Harley, A., 2019. Usability Heuristic 3: User Control & Freedom.
He, X., 2018. "SMART HOME" - FROM A CONCEPT TO A LIVING PRODUCT.
http://research.ccdmd.qc.ca,
2019.
DATA
COLLECTION
TECHNIQUES.
[Online]
Available at: http://research.ccdmd.qc.ca/22-data-collection-techniques
http://www.cognitiveprocesses.com, 2018. Cognitive Processes and Learning. s.l.:s.n.
http://www.yourarticlelibrary.com, n.d. Top 6 Methods of Data Collection, s.l.: s.n.
https://gs.statcounter.com, 2019. Mobile Operating System Market Share China, s.l.: s.n.
https://studylib.net,
n.d.
Interaction
Types
for
products
or
systems.
[Online]
Available at: https://studylib.net/doc/5453454/interaction-types
https://www.cognifit.com,
n.d.
Perception.
[Online]
Available at: https://www.cognifit.com/perception
https://www.interaction-design.org,
2018.
Design
Thinking.
[Online]
Available at: https://www.interaction-design.org/literature/topics/design-thinking
https://www.interaction-design.org, 2018. External Cognition in Product Design.
https://www.interaction-design.org, 2019. A Simple Introduction to Lean UX.
https://www.interaction-design.org, n.d. The Glossary of Human Computer Interaction. [Online]
Available at: https://www.interaction-design.org/literature/book/the-glossary-of-human-computerinteraction/mental-models
https://www.interaction-design.org, n.d. User Experience (UX) Design.
36
https://www.nngroup.com, 2014. Memory Recognition and Recall in User Interfaces.
https://www.researchgate.net, 2003. The role of cognitive theory in human–computer interface.
Computers in Human Behavior.
https://www.statista.com, 2018. Age group distribution of internet shoppers in China 2018, s.l.:
s.n.
https://www.statista.com, 2019. Smart Home, s.l.: s.n.
JAMES HOLLAN, E. H. a. D. K., 2000. Distributed Cognition: Toward a New Foundation for
Human-Computer.
Kaley, A., 2018. Match Between the System and the Real World: The 2nd Usability Heuristic
Explained.
Lowdermilk, T., April 2013. User-Centered Design. s.l.:O'Reilly Media, Inc..
McLeod, S., 2015. Cognitive Psychology.
MORTENSEN, D., 2019. Natural User Interfaces.
MORTENSEN, D., 2019. User Research: What It Is and Why You Should Do It.
Nielsen, J., 1994. 10 Usability Heuristics for User Interface Design.
Nielsen, J., 2010. Mental Models.
Paschalidis, K., 2018. The application of cogntive psychology to User-Interface Design.
Santos, A., 2018. 8 Golden Rules for Better Interface Design.
V. Chiew, Y. W., 2004. Formal description of the cognitive process of problem solving.
WONG, E., 2019. Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces.
37
Appendix A
High level prototype screens:
High level prototype’s interfaces are given below step by step:
Figure: Device set up.
Figure: Device set up.
38
Figure: App set up.
Figure: App set up and log in option.
39
Figure: Sign In & Sign Up
Figure: Sign Up & Payment info giving
40
Figure: Payment info & Shipping info giving.
Figure: Home page.
41
Figure: Product Cart & Order summary giving.
Figure: Checkout & confirmation
42
Figure: Add new card option.
Figure: Update profile.
43
Appendix B
Frameworks
Design Thinking
This framework enables interaction designers to give priority to what is more important for users.
It helps designers, what kind of research activity, prototyping, testing is necessary for producing
a better product. Also helpful for creating and producing a better solution with a business
perspective. It works as following five stages. (https://www.interaction-design.org, 2018)
Figure: Design thinking framework
Participatory Design:
Every stakeholder of a project involves its participatory design process. Employees, users,
partners participate as a group and it helps to find out user’s needs. This process ensures a higher
area covering because different areas people are involving. (Druin, n.d., p. 15)
Figure: Participatory Design
44
Appendix C
Cognitive processes
Learning
This cognition process helps us to improve environmental organism response. The learning
process is not running alone, all of the other cognitive processes also participate in our learning.
The learning process includes three factors what how and who. It makes sure the designers are
learning through the design process. (http://www.cognitiveprocesses.com, 2018)
Figure: Learning cognition process.
Problem solving:
Problem-solving is also communicated and related to searching, decision making, learning, etc.
This high-level cognitive process involves our mental process which enables people to discover
a problem, analyze it and trying to solve it. Problem-solving impact on interaction design is
recognizing the problem, analyze the related information on the brain, develop and evaluate the
solution. (V. Chiew, 2004)
45
Figure: Problem solving cognition process
Appendix D
Cognitive Frameworks
Theory of action:
Some of the user-facing problems to learn and understand less when they see any information
presented on the computer screen. Users are not able to form a picture on their brain to
understand what is the meaning of they seeing. So that the Interaction designer needs to design
a suitable interface of a system for users better understanding.(https://www.researchgate.net,
2003)
46
Figure: Theory of action cognitive frameworks stages.
Distributed Cognition:
This cognition framework is for sociocultural context and it defines interactions between peoples,
tools, and artifacts. For completing a task with these distribution environments necessary features
provide a valuable part. Interaction design needs to be the participation of all significant aspects
of accomplishing a better solution. (JAMES HOLLAN, 2000)
Figure: Distributed cognition.
Appendix E
Match between system and the real world: Interface designer design a system that should
communicate with the user by familiar word, phrases, language, and suitable concept. The system
should not speak with the user by system-oriented terms. The information appears on interfacing
it needs to be logical, natural and understandable.
47
Figure: Example of the principle.
While users interact with the application, the information that produces the system will not be
confused with users. Simple language and suitable visualization of real-world objects ensure
users appreciate what the system trying to say. (Kaley, 2018)
Visibility: Don Norman’s visibility principles indicate that the user needs to know all the system
options and how they will use them. The better visualization of a system’s functions helps the user
to know what need to do next. Using menus to instruct the user function’s location. Some feature
hides on menus until they needed it ensures to optimize the use of limited screen size.
48
Figure: Example of visibility principles
There are many functions on the mobile app, but all are not possible to visualize detailly so that
this principle can be used to provide better user service. Users can be identifying the service by
clicking on menus. Hamburger icon can be used for it. It will be difficult to use to find out if those
stays outsize. (Enginess, 2014)
Appendix F
Questionaries’

Asking the participants about their self.

How frequently users do online shopping.

Asking users to describe their experience of online shopping.

Which problem or dissatisfying user experience that can solve with the smart device.

Testing the system by users to understand wheatear or not they engage with it.

What users think after using voice command for detecting and identifying a product for
shopping.
49

How users experienced after using the feature.

What amount of time is required for completing the task?

What users liking or disliking about the product?
Research study documentation:
A usability researcher can use those materials to run the research study. By asking a series of
questions relevant to research work. Finding out answers to the question, are users find out the
product effective and fun to use? If does, they engage with it and the task success will happen.
Applying SUS to find out the answer is the smart device and app easy to use? If does, and
evaluates the results. And dividing participates into two groups. Testing the feature by users and
measured through SUS. For each question mark one to five. For example, I give the score the
first question. Each group provides results. After analyzing and provide score indicates the
system's usability goals are achieved or not.
50