CW COMP1649 9324 nn0344w 10112020 083642 2021 1 PDF

Human Computer
Interaction and
Design – COMP1649
[Student name: Nguyen Cong Nhat]

[Banner ID: 001137923]
Table of Contents
1. INTRODUCTION .............................................................................................................................. 1
2. BACKGROUND REQUIREMENTS ..................................................................................................... 2
3. LITERATURE REVIEWS .................................................................................................................... 3
3.1. Processes and Frameworks for Interaction Design ............................................................... 3
3.1.1. User-Centered Design .................................................................................................................. 3
3.1.2. Goal-Directed Design ................................................................................................................... 4
3.1.3. Participatory Design .................................................................................................................... 7
3.1.4. Activity-centered design .............................................................................................................. 9
3.1.5. Choose interaction design framework for course work: .......................................................... 11
3.2. Cognitive Psychology............................................................................................................12
3.2.1. Definition of Cognitive & Cognitive Psychology ....................................................................... 12
3.2.2. Discussion of how aspects of cognitive psychology affect interaction design ................ 14
3.2.3. How cognitive psychology apply to this coursework ............................................................... 16
3.3. Interaction Design Theory ....................................................................................................17
3.3.1. Low to High fidelity prototypes: ................................................................................................ 17
3.3.2. Conceptual model ...................................................................................................................... 20
3.3.3. Modes & Types of Interaction ................................................................................................... 21
4. DESIGN PROCESS ..........................................................................................................................22
4.1. Interaction Design ................................................................................................................22
4.1.1. Interaction Design Framework for this course work ................................................................ 22
4.1.2. Interaction mode & types for this course work ........................................................................ 28
4.1.3. Metaphor ................................................................................................................................... 29
4.2. Conceptual model for this course work ..............................................................................29
5. PROTOTYPES OF COURSEWORK ..................................................................................................31
5.1. Low Fidelity prototype: ........................................................................................................31
5.1.1. Mood board ............................................................................................................................... 31
5.1.2. Storyboard ................................................................................................................................. 32
5.1.3. Wireframe .................................................................................................................................. 33
5.1.4. Paper prototype ......................................................................................................................... 35
5.2. High Fidelity prototype: .......................................................................................................41
6. RESEARCH STUDY .........................................................................................................................51
6.1. Questionnaire: ......................................................................................................................52
6.2. Conclusion and product development plans:......................................................................60
7. CONCLUSION ................................................................................................................................62
8. REFERENCES ..................................................................................................................................63
Figure 1 User-Centered Design - Source: https://rno-its.piarc.org/en/systems-and-standards-human-

factors-systems-approach-its-design/user-centred-design .......................................................................... 3
Figure 2 Goal-Directed Design - Source: https://www.researchgate.net/figure/In-our-design-process-we-
implemented-four-phases-of-the-goal-directed-design-process_fig2_267779017 ..................................... 4
Figure 3 Example Patterns of Goal-Directed Design ..................................................................................... 5
Figure 4 Processes of Goal-Directed Design ................................................................................................. 6
Figure 5 Participatory Design - Source: https://link.springer.com/chapter/10.1007/978-3-319-96071-
5_97 .............................................................................................................................................................. 8
Figure 6 Activity-Centered Design - Source: https://medium.com/dermot-holmes/activity-centred-
design-dd28ed1eec59 ................................................................................................................................. 10
Figure 7 Cognitive Psychology .................................................................................................................... 12
Figure 8 Example Prototype - Source: https://www.thingiverse.com/thing:1327093 .............................. 17
Figure 9 Example Prototype 2 - Source:
https://uomustansiriyah.edu.iq/media/lectures/6/6_2019_04_29!10_56_43_PM.pdf ........................... 18
Figure 10 Story board example - Source: https://www.nngroup.com/articles/storyboards-visualize-
ideas/ .......................................................................................................................................................... 19
Figure 11 Example of High-Fidelity Prototype - Source: https://medium.com/7ninjas/low-fidelity-vs-high-
fidelity-prototypes-903a7befaa5a .............................................................................................................. 19
Figure 12 Conceptual Model - Source: https://www.s4m.io/product-insights-conceptual-model/ .......... 20
Figure 13 Age of survey: Worldwide survey of fitness trends for 2020 by Walter R. Thompson, Ph.D.,
FACSM ......................................................................................................................................................... 22
Figure 14 Top 20 Worldwide Fitness Trends for 2020 of Worldwide survey of fitness trends for 2020 by
Walter R. Thompson, Ph.D., FACSM ........................................................................................................... 23
Figure 15 Survey Respondents Occupation of Worldwide survey of fitness trends for 2020 by Walter R.
Thompson, Ph.D., FACSM ........................................................................................................................... 23
Figure 16 Tempo Screen – Source: https://techcrunch.com/2020/02/26/tempo-weight-lifting-
screen/?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&guce_referrer_sig=AQAA
AFSL1dtyh07M1fbZvMa-9JV-y2sBh6O0XTm7N7juYyaqW0p055lzi-
hKdY1vfRJCZTMHui3R_i0kpKPLDm4T9ly2qk6mRsByWCuLS4ybawGeAAm4EEwrMCHdwL-
Kl7__2N4Z90qY9YTJBOTgiJkeCw0_kbNufNkrPIDZX5C9o2D- ..................................................................... 24
Figure 17 Tonal – The smartest home gym – Source: https://www.tonal.com/equipment/ .................... 25
Figure 18 Personas 1 ................................................................................................................................... 26
Figure 19 Personas 2 ................................................................................................................................... 27
Figure 20 Conceptual Model for this coursework ...................................................................................... 30
Figure 21 Mood board for this coursework ................................................................................................ 31
Figure 22 Storyboard for this coursework .................................................................................................. 32
Figure 23 Wireframe of large screen for this coursework 1 ....................................................................... 33
Figure 24 Wireframe of Mobile app for this coursework ........................................................................... 33
Figure 25 Wireframe of large screen for this coursework 2 ....................................................................... 34
Figure 26 Paper prototype - The Front & Rear of Large screen ................................................................. 35
Figure 27 Paper prototype - Login Mobile .................................................................................................. 36
Figure 28 Paper prototype - Mobile frame ................................................................................................. 36
Figure 29 Paper prototype - Performance data on Mobile app ................................................................ 37
Figure 30 Paper prototype - Connect Bluetooth to large screen............................................................... 37
Figure 31 Paper prototype - Detail information of Course ........................................................................ 38
Figure 32 Paper prototype - Main page of Large screen ........................................................................... 38
Figure 33 Paper prototype - Workout of each day ..................................................................................... 39
Figure 34 Paper prototype - Workouts for the week................................................................................. 39
Figure 35 Paper prototype - Exercises of the workout day ........................................................................ 40
Figure 36 Paper prototype -Training. .......................................................................................................... 40
Figure 37 High Fidelity Prototype – Login interface ................................................................................... 41
Figure 38 High Fidelity Prototype - Performance data on Mobile App 2 ................................................... 41
Figure 39 High Fidelity Prototype - Performance data on Mobile App 1 ................................................... 41
Figure 40 High Fidelity Prototype - Receive request connect..................................................................... 42
Figure 41 High Fidelity Prototype - Find Large Screen on Mobile App ....................................................... 42
Figure 42 High Fidelity Prototype - Update information of user ................................................................ 43
Figure 43 High Fidelity Prototype - Control large screen by Mobile App ................................................... 43
Figure 44 High Fidelity Prototype - Receive request update information .................................................. 44
Figure 45 High Fidelity Prototype - Home page of large screen ................................................................. 44
Figure 46 High Fidelity Prototype - Exercises page on Large Screen .......................................................... 45
Figure 47 High Fidelity Prototype - Workouts page on Large Screen ......................................................... 45
Figure 48 High Fidelity Prototype - Course detail on large screen ............................................................. 46
Figure 49 High Fidelity Prototype - Setting on large screen ....................................................................... 46
Figure 50 High Fidelity Prototype - List workout of day ............................................................................. 47
Figure 51 High Fidelity Prototype - List day of Week.................................................................................. 47
Figure 52 High Fidelity Prototype – Ready? scan body & heart rate .......................................................... 48
Figure 53 High Fidelity Prototype - List exercises of a workout.................................................................. 48
Figure 55 High Fidelity Prototype - Training interface ................................................................................ 49
Figure 54 High Fidelity Prototype - Rest time ............................................................................................. 49
Figure 56 High Fidelity Prototype - Performance data after workout complete ........................................ 50
Figure 57 Introduction of questionnaire ..................................................................................................... 53
Figure 58 Questionnaire ............................................................................................................................. 54
Figure 62 Questionnaire data – How old are you? ..................................................................................... 57
Figure 63 Questionnaire data – What industry do you do?........................................................................ 57
Figure 64 Questionnaire data - How often do you work out? .................................................................... 58
Figure 65 Questionnaire data - Why are you interested in this study? ...................................................... 58
Figure 66 Questionnaire data - some reviews ............................................................................................ 59
Figure 67 Questionnaire data - What functionality do you want to improve/add in my system? ............. 60
1. INTRODUCTION
My name is Nguyen Cong Nhat, a student at University of Greenwich (Vietnam) - Da Nang
Campus. In the Human Computer and Interaction Design (COMP1649) subject, I have been
commissioned to create a concept and a prototype that shows the parent for a new piece of
smart gym equipment. The basic brief I have been given for the system is that it consists of a
large wall-mounted screen whose contents ought to be controlled by a mobile app and that it
should enable people to take part in gym classes (either pre-recorded classes or live classes). I'm
asked to create a proof of concept for the parent of this system to see if users find it desirable.
The basic brief is open for interpretation and I can add desirable as I see fit (e.g. providing user
personalization functions, performance data, integration of sensor data) based on your
background readings and my research activities.
In this report there are 6 parts:
• Background requirements: Brief definition of some key terms: what is smart gym
equipment, what are connected devices and how is this discussion embedded in a wider
societal context of technology adoption and expected future uses of technology.
• Literature reviews: Discussion of different frameworks for interaction design, Cognitive
Psychology and Interaction Design. I have to discuss about how them apply to this
coursework.
• Design Process: Based on Literature reviews studied before, I have to research and discuss
how my coursework will be built.
• Prototypes of Coursework: After defined the requirements and Conceptual model, I will
build the prototype from Low → High Fidelity Prototype.
• Research study: In this step I need to present the design of a research study including the
question(s) that my research study attempts to answer. Then evaluate what I can do.
• Conclusion.
Human Computer Interaction and Design | 1

2. BACKGROUND REQUIREMENTS
Today, people's living needs are increasing higher in the developed society. To survive and
develop, people need good health to work, so the need for fitness training is increasing. With this
form of fitness training today, users need to spend a large amount of money to go to the gym
and hire a mentor. Therefore, home practice is more popular for many people because of its
convenience, speed and privacy.
What is gym? Gym is abbreviated from Gymnastics, meaning exercise and sports to keep in good
shape and good health. Currently, the need for human exercise to exercise increases with the
development of technology. The need to apply technology to exercise is increasing. Currently
there are a number of wearable devices to monitor the health and performance data of users
while exercising. So people are in need of a device to help schedule, guide their workouts and
track their health while exercising.
I will create a concept and a prototype envisaged using the technology in the future that shows
the parent for a new piece of smart gym equipment.
So, what is smart gym equipment? It is a large wall-mounted screen with contents where the
user can join fitness classes (either pre-mounted or live classes). This device will record activity,
measure related metrics such as bpm, calories and rely on the user's fitness to recommend
training to improve the user's health.
What are connected devices? A mobile device that has an application installed for controlling a
large wall-mounted screen and controlling exercise stats.

3. LITERATURE REVIEWS
3.1. Processes and Frameworks for Interaction Design
3.1.1. User-Centered Design
User centered design - this means user centric and the user will be the one who understands the
most. When using a product, the user needs to know the needs, preferences, and goals achieved
when using the product and the designer must find out what it is to design. User engagement to
uncover design features at every stage of product design. (Cannot open a motorbike
manufacturing services without talking and finding out what people like motorbike , who buy
motorbike for what purpose). An important goal in User Centered Design (UCD) is that the
designer focuses on what the end user wants, then the designers define the tasks and means to
achieve those goals, but have to paying attention to the needs and preferences of most users.
Therefore, most designers consider users to be co-creators of products, because they draw
design inspiration from users' needs. Designers will collect and consult potential users before
starting the project to evaluate the feasibility of the project to meet the needs of the user. Simply
put, user data has been the deciding factor in product design throughout the project from the
start.
User goals — UCD's true goals — are notoriously slippery and often difficult to determine,
especially long-term goals. They can design in their own ambiguity. Let's say a designer is creating
an app to help college students manage their schedules. What's the goal there? To help students
learn better? But why? So can they graduate? What's the goal there? To get a good job? To
become educated? User goals can be nested within goals. Therefore, it is important to do UCD
designers away from their own preferences and instead focus and focus on the needs and goals
of the users.
User Centered Design helps designers eliminate the “You are not a user” trap because designers
are human like everyone else, with their own prejudices and experiences. Sometimes the bias of
designers contradicts the user. In such cases, we need to apply UCD - "You are not a user".
Figure 1 User-Centered Design - Source: https://rno-its.piarc.org/en/systems-and-standards-

human-factors-systems-approach-its-design/user-centred-design

User-centered design is based on 4 fundamental principles:
• Users are joined to the team at the beginning of design process. Activities are assessed
for feasibility based on their impact on the end user.
• Clarification required. The design team needs to understand the user's needs for their
product and make adjustments to improve the effectiveness of that product.
• User’s feedback loop in the product life cycle. The design team needs to collect and
analyze user needs continuously and regularly. This helps to increase the practicality of
the product.
• Iterative design process. The design team is constantly improving products to suit the
context and needs of the user.
However, UCD is not always applied to large systems because it is impractical (the number of
users, the segment is too large). Focusing on information about the needs and purposes of the
user makes the product narrowly defined and developed. So UCD is a valuable approach, but it's
just an approach to design. (Saffer, 1900-01-01)
3.1.2. Goal-Directed Design
Goal-Directed Design aims to create the best product design by focusing on the user's goals and
achieving those goals, not only towards the user's goals, but also towards the design about the
product's behavior, visual appearance, and physical appearance.
Origins of Design Targeted Company founder, software inventor Alan Cooper. He will ask himself
why he will be doing a certain task in the first place, what he will know at the start of the mission
and what he is more likely to find out as he goes on. He has been developing the method since
1995. His years of work, research, thought processes and rationale have become more and more
clear to help convince them to adopt a particular design direction.
This approach creates a framework in which designers can do what they do best. By 2000 or later,
Goal-Directed Design Components are a set of best tools and methods developed and studied
based on hands-on experience. The method consists of four components: principles, patterns,
processes, and practices. (Goodwin, 2009)
Figure 2 Goal-Directed Design - Source: https://www.researchgate.net/figure/In-our-design-

process-we-implemented-four-phases-of-the-goal-directed-design-process_fig2_267779017
• Principles:
The principle is that instructions deal with different circumstances in order to produce the
best results. Principles that are relevant in one context will not work in other contexts. For
example, design approaches on a computer screen are different from a TV monitor or manual
device, otherwise it may interfere with the user's goal of reaching those products.
When a rule is in place, the tests must be carried out:
o Does that help your users achieve their goals? The objectives of the user will not
be fulfilled by any valid principle.
o Will it help users minimize work? Work is the actions and actions of the user on
the product (click, tap, save, drag and drop, etc.).
Cooper's Goal-Directed Design 5 principles are as follows: (Dubberly, 2001)
o Design first; program second.
o Separate responsibility for design from responsibility for programming.
o Hold designers responsible for product quality and user satisfaction.
o Define one specific user for your product; then invent a persona—give that user a
name and an environment and derive his or her goals.
o Work in teams of two: designer and design communicator.
• Patterns:
Patterns are types of solutions to resolve certain problems in certain circumstances. Example,
In the picture below, the screen of Facebook Messenger is divided into 3 components. In the
component on the left, the user can search for users who have ever contacted them. In the
middle component, is their conversation. On the right component, the user can perform
other functions here. Thus, patterns of Facebook messenger design are formed from goals.
Patterns are important for designers, as it is the foundation of their vocabulary building. So,
principles are the designer's grammar rules that help them work faster and more efficiently.
(Goodwin, 2009)
Figure 3 Example Patterns of Goal-Directed Design

• Processes:
Project Planning
Implementation
Research
Support
Detailed Design Modeling
Framework Requirement
Definition Definition
Figure 4 Processes of Goal-Directed Design
The design process involves: the stages and technologies employed in designing and
organizing design thinking, using it to develop people, scenarios and requirements, and then
using it to develop and optimize a design solution. This process may be phased out in such a
way that it is financially appropriate or the contexts of the product.
o Project planning: Before using resources for a project, the project should include
structural outlines, implementation practices, activities, risks, and expected
outcomes from which to plan. Plans will be added or changed in phases but the
most important thing is that the project is started.
o Research: Research helps you understand problems and make better product
decisions and definitions. Research will help the design progress develop faster
because then you have the data and clear evidence of related issues.
o Modeling: Model is the most important thing because it brings together the
characteristics and needs of the user to help the designer evolve according to his
ideas. Each group user will have group personalities, sample behaviors, and goals.
Designers do not need to design for all users, but only design to meet the needs
of the representative.
o Requirement Definition: This is last step in to data analysis. Based on the personas,
environment, behavior and the goals of the users, the designer can determine
what their requirements are.
o Framework Definition: When you do this, you already know the user group and
the destination of your product. The framework is then in place to support the
behavior, specifications, and standards of the product.
o Detailed Design: The design detail scenario is configured when defined product
scopes. Design details are further developed and refined the design during the

design process. The more detailed designs are, the product's feasibility is
increased.
o Implementation Support: Designers and engineers must have a good relationship
with each other for the product to be deployed more easily. For any good engineer
or designer, in the course of their work, unexpected problems will arise that are
not within their scope of treatment.
• Practices:
Design is a catalyst that helps projects go from concept to development projects that exceed
expectations. Not all companies and organizations can make full use of the value of design.
For example, we have a good design process, a lot of capital but engineers are not skilled, the
project will go bankrupt. But with an organization with little capital, but a harmonious team
of designers and engineers can completely help that project grow.
However, for this to happen we have to change, practice, research, learn from experience,
plan a coherent and implementation support.(Goodwin, 2009)
3.1.3. Participatory Design
Participatory Design (PD) is a design framework to gather designers as co-designers to create
products in the design process. PD's methodology is based on values that co-designers in the
design process, which are often high-fidelity prototypes (products, services) to demonstrate and
underpin organization can construct or plan for the future. The core theme of Participatory
Design, as formulated by Pelle Ehn (1988), is addressing the dialectics of tradition and
transcendence: the tension between what is and what could be. Participatory Design methods
allow design project participants to predict the feasibility of a future product or service to replace
something older.
Participants will be both “users” and “designers”, going through the processes of investigating,
investigating, researching, reflecting, editing, and developing participants will come up with the
entries. Clear spending of the user wants the same as the real situation. Ultimately, they provide
viable means and solutions to achieve those goals. (Maja van der Velden, 2014)

Figure 5 Participatory Design - Source: https://link.springer.com/chapter/10.1007/978-3-319-
96071-5_97
The Norwegian Iron and Metal Workers Union (NJW) launched one of the first PD projects in
cooperation with researchers from the Norwegian Computing Center from 1970 to 1973. The
objective was to involve workers in the design of a computer-based planning and control system
for their workplaces. A plan was designed, based on a participatory approach and the integration
of workers' knowledge, with a number of activities for the trade unions, including working
groups, to discuss and find solutions through action programs, assessments of existing
information systems and proposals for changes. (Nygaard & TerjeBergo, 1975)
To have a design approach, designers had to practice many times over the years and had to
maintain relationships, interactions and trust between stakeholders. Kensing and Greenbaum
mentioned four principles: situation-based actions, mutual learning, tools and techniques, and
alternative visions about technology. (Kensing & Greenbaum, 2012)
• Situation-based actions:
Situation-based action follows the work that people participate in the design process,
whether in the design work or other actions (individual or collective actions & technology,
skills to share between participate). So the design is performed by humans and nonhumans
with embodied and situated action.
• Mutual learning:
When participating in the design process, co-designers allow learning from each other. For
example, workers and designers are involved in a design process. Workers are allowed to
learn from designers of technologies and techniques related to products. Designers learn how
to design a production process in the most effective way. It's the way to maximize

productivity and efficiency because Co-designers then understand the work of their
stakeholders in the design process.
Aside from the value of mutual learning, this principle should avoid the need for designer of
equipment to be segregated. This means that the design process tends to focus on the
product's values and goals without forgetting the rules of the professional designer.
• Tools and techniques:

To use a participatory framework, we need to use methods, tools, and techniques to form
principles in the Participatory Design. A variety of methods have been introduced such as:
mock-ups, storyboards, scenarios, probes, walk-throughs, games, workshops, cartographic
mappings, collaborative prototyping, etc.
Tools and techniques are important in the PD-based design process, when start design
process it will creating a space that is closely interrelated between the practice and
experience of tool selection and engineering. technique.
• Alternative visions about technology:

There are many monopolies of the technology providers. Therefore, Participatory Design
wants to create, expand vision for the future to overcome the limitations in technology. This
will help increase the voice value of the design process throughout the product development
life cycle.
3.1.4. Activity-centered design

Activity-centered design (ACD) does not focus on the user's goals or preferences but on the
behaviors around the main tasks. Tasks are defined by actions and decisions made to achieve a
certain goal. Activities can be short, simple, and time consuming and complex. Activities are
stopped only when affected by the gestures that decide it to end. For example, when
withdrawing money from an ATM, activities end when you receive the money from the moment
it is received.
ACD is rooted in the theory of activity, a psychological framework of the first half of the 20th
century. Activity theory suggests that people are creating tools as a result of "exteriorized"
mental processes. The decision-making and inner life of individuals are de-emphasized in favor
of what people do and the tools they collectively set up to make. This philosophy translates well
into activity-based design, where the activity and the tools to support it — not the user — are at
the center of the design process.

Figure 6 Activity-Centered Design - Source: https://medium.com/dermot-holmes/activity-
centred-design-dd28ed1eec59
Activity-centric design allows designers to focus closely on the workflow and stay on the right
track for the purpose of the product. Therefore, it is well-suited for creating complex actions,
products with a large and varied user base. Activities are made up of actions - called tasks. The
purpose of a mission is to engage in processes to complete an activity. Each task is a moment in
the life of the activity, and many of those moments can be aided by design. Some tasks have
enough parts so that they are considered side activities to themselves. For example, when we
want to make a phone call, one of the first tasks we have to do is find the right number to call.
There are many ways to find a phone number: call your assistant to find, look up the phone
number, call back from the call log, and more. Each of these solutions to the task of finding a
number is itself a task. So is finding phone numbers a task or an activity? (Saffer, 1900-01-01)
Finally, Activity-Centered Design helps designers rely on “activity” to focus on the tasks, actions
and the purpose of the products.

3.1.5. Choose interaction design framework for course work:
Although there are 4 types of frameworks, after analyzing and learning I choose 2 frameworks to
compare and choose for this coursework is: User-Centered Design and Goal-Directed Design.
• User-Centered Design takes the user as the center of the design. During the design
process, the user needs to be emphasized to design, develop and maintain a product
rather than adapting the user to it. So, Products are inspired by users' needs and develop
products to adapt to users. But in my opinion, a good design if it doesn't meet human
needs is not competitive and difficult to develop, and it just comes from the needs of the
user. People are living and developing, they have to adapt and learn so it doesn't matter
if we develop a product that is responsive and serves the future. Why? Humans are living,
things are dead, and things die, it is difficult to adapt and serve humans. Therefore, it is
unnatural so it is very difficult to achieve great achievements.
• Goal-directed design can be divided into six stages, namely, research, modeling,
definition of needs, definition of the framework, design refinement and design support.
In the research phase, the designer must put aside his subjective opinion to understand
the user comprehensively, preferably "pointless" to achieve subjective research. During
the research phase, it is necessary to apply qualitative research methods to avoid the
formation of subjective results that do not satisfy the majority of users actually think. In
the future, with the number of highly developed companies, there will be design
interactions in any design. Your gestures are going to exist between all of them interacting
in a blink of an eye, or even inadvertently it would be an interactive way. Interaction is a
relationship or behavior that carries out the transfer of information, so the design of
interaction is actually an act of design. The goal-oriented design is geared towards the
relationship between users and objects.
In conclusion, I will apply Goal-Directed Design to this coursework. Because my application is
forward-centered, there are currently not a large number of users so User-centered Design
cannot be applied. During the research to develop design prototypes in this coursework, I will
find the human relationship with the objects in the product.

3.2. Cognitive Psychology
3.2.1. Definition of Cognitive & Cognitive Psychology
Cognitive is the act or process of acquiring knowledge and insights through thought, experience
and senses, including processes such as knowledge, attention, memory, appreciation, estimation
quantity, reasoning, calculation, problem solving, decision making, perception and use of
language. To distinguish between different modes of Cognitive is based on experiential or
reflective. (Sharp, et al., 2019)
• Experiential Cognition: The form of cognition formed from life around people. Direct
observation and memory of the daily situations, actions, and outcomes of human life and
production. The experiential cognition is very rich because it is changed daily.
• Reflective Cognition: A form of cognition abstract of everyday rules and activities.
Reflective cognition is based on experiential cognition, so it synthesizes theories, reflects
the nature of each event. Therefore, Reflective is more precise and systematic.
Cognitive Psychology is the branch of psychology devoted to the scientific study of the mind.
Cognitive psychologist tries to build cognitive models like the human brain. This model will handle
processes including perception, attention, learning, memory, reading, speaking and listening .
(Neisser, 1967)
Figure 7 Cognitive Psychology
(McLeod, 2015)

• Attention:
Attention is an important thing in human life. It is the process of concentrating on one thing
without being distracted by other influences. This process involves senses such as sight,
hearing (Sharp, et al., 2019). Example: The presenter is presenting what he showed on the
board. But the audience does not pay attention to what he has to share, he can clap and ask
everyone "Can you see the contents on the board clearly?". When that makes people pay
attention to the contents on the board, hearing and sight are at work.
• Perception:
Perception is the process of receiving information from the external environment affecting
the senses (sight, hearing, taste, smell and touch) of humans. From there, those impacts are
received and processed, then summarized into experience. In addition to the 5 senses,
perception also includes the body movement processes through the movement of the
muscles and joints of the human body. (Sharp, et al., 2019)
• Learning:
Learning is tied to memory. It involves the accumulation of skills and knowledge that would
not be possible without memory. Likewise, people won't be able to remember everything
unless they've learned them. In cognitive psychology, learning is assumed to be random or
intentional. Random learning happens without any learning purposes. Examples include
learning about the world like facial recognition, streets, and objects, and what you did today.
Purposeful learning, on the other hand, is goal oriented with the goal of being able to
remember it. Examples include studying for exams, learning foreign languages and learning
to design, development software. (Sharp, et al., 2019)
• Memory:
Through many events and actions, the actions are taken over by the senses and brought to
the brain. Since then, Perception's work is summarized into experience by each type of case,
each person. The memory process will be filtered, because if we remember all the things we
have been through, our brain will be overloaded. How does this filtering work? Initially, the
encoding process takes place, determining what information is noticed in the environment
and how it is interpreted. The extent to which it occurs affects people's ability to recall that
information in the future. The more attention you pay to something and the more you
process it by thinking about it and comparing it to other knowledge, the more likely it is to be
remembered. (Sharp, et al., 2019)
• Language, reading, speaking and listening:

Reading, speaking and listening are the three forms of language processing that have a
number of similar and different properties. One similarity is the meaning of language, any
sentence is conveyed in any form, the meaning of that word remains the same.

o Written language is permanent while listening is transient. It is possible to re-read
the information if not understood the first time. If it is a form of listening, we
cannot listen again if the talk is forced to be replayed. Reading can be faster than
speaking or listening, as written text can be quickly scanned in ways that are
impossible to hear spoken words presented in succession.
o Listening requires less cognitive effort than reading or speaking. Therefore,
children are more likely to listen to hearing or to listen before bed.
3.2.2. Discussion of how aspects of cognitive psychology affect interaction design
Here are some principles and rules to help designers understand human psychology and enhance
the user experience:
• Fitt’s Law: “It is easier and faster to hit larger target closer to you than smaller target
further from you” (Hudkar, 2017). The size and position of the object are important in
interactive design.
• Gestalt laws: Gestalt laws are simple principle which tell us how different element are
perceived when combining them in a certain way or order and numbers of different
aspect of human thought and human vision. (Hudkar, 2017)
o Law of Similarity: When objects have similar shapes, sizes, and colors, we consider
them to be related.
o Law of Continuation: This law means that the human eye often looks straight or
curved and images are continuous rather than discrete images.
o Law of Closure: When an object is not completely covered, but the human brain
uses the learned experiences and knowledge to fill it.
o Law of Proximity: The law of proximity indicates that elements which are close to
each other tend to be perceived as a group or single unit.
o Law of Figure & Ground: The human brain can rely on color and size to distinguish
an object and the area around it.
• Hick’s Law: “Increasing the number of choices will increase decision time” (Hudkar, 2017).
This helps the designer to categorize the options and clear the flow. Making it easy for
users to access, saving time and energy, it is important to improve decision-making
power.
• Miller’s Law: “An average person can hold 7 (+/- 2) numbers of items in their working
memory” (Hudkar, 2017). It helps designers stream data for the application to increase
the efficiency of customer memory. In addition, it also helps to improve the client's ability
to understand the application.
Below are the results of the process of learning and quoting from books and from my personal
point of view about the application of psychology to design to create products. We will discuss 3
issues: Learning, Attention, Perception.

• Learning:
o Abstract theory: The human brain, reason is a set of logical rules that can be
applied in all situations and fields in life. When we apply it to our design, we have
to make users associate, predict what's going to happen in our software. Applying
Law of Similarity to this case, we will see that when users see objects shaped
similar to the cases they have experienced, the user can guess what that object is.
(The house has been learned and recorded by the user, when the user sees the
house icon in your product, the user will refer to the homepage or main page)
(Durrani & Dirrani, 2009)
o Transference: User expectations of a new product that will have similar
interactions and experiences with older products. The knowledge and experience
of using the application that the user has learned will be applied to the new
product, this helps users not to be confused when faced with new references and
circumstances.
o Limitation of motor system: The human brain can perceive many different things
at once, but the brain cannot control the body to do two gestures for different
purposes at once. (Durrani & Dirrani, 2009)
o Memory limitation: Apply the Miller’s Law.
• Attention:
o Abstract theory: Is the user attention to the more important information (larger,
opacity, color) than the information less important or later. So we're going to get
users to store and remember the information we need.
o Left to right theory: Users tend to access information from left to right and from
top to bottom. This rule is based on the reading order of most countries in the
world. So we can put more important information in a more subtle way so that
the user can notice it. (Aberg & Chang, 2005)
o Blue Peripheral View: This theory maintains that because the rods in our optic
nerve describe the blue color at the outer parts of the eye, blue is a great color for
our awareness. If we attempt to bring the viewer's attention to these parts of the
GUI, just one color which can perform great is blue. On either hand, if we're to
deliver an alert message, e.g. the red file deletion procedure is the most suitable
color of using. It's something which has nothing to do with neural network but
with how we've performed out of social system (red light, red danger sign).
o Simon effect: Apply the Simon impact to accelerate up the reaction of the user.
According to (Wikimedia, 2019) In psychology, the Simon impact is the discovery
that the distinction in correctness or moment of response between stimulation
and reaction tests on same corner and those on the opposite side, with the
reaction being significantly slower and less precise when the stimulus and
response are still on the contrary direction.

o Automatic processing: Once you've started doing something many times, now
you can get it done again without having to think like the first time. In the GUI, we
can apply this to force the user to read the information we want.
• Perception:
o Perception Proximity: Apply the Law of Proximity in Gestalt Laws. In the GUI, the
parts that are close together tend to be a group of actions.
o Similarity: Apply the Law of Similarity in Gestalt Laws. We can create groups in the
GUI, which are understood by the user as a unity. (Durrani & Dirrani, 2009)
o The user sees what he expects to see: In the past, users developed an awareness
of the cases and images they experienced. When the GUI posts those cases and
images, the user can have true expectations of what they are associated with. So
we need patterns to build the interface design process. (Pomerantz, 2003)
3.2.3. How cognitive psychology apply to this coursework
In this coursework, I'll apply Fitt's Law, Gestalt Law and Miller's Law. Below are the situations in
which I will apply rules and principles:
• Fitt’s Law: In this coursework, I use this principle to put the most important courses in the
middle and bigger than the other images. Other important pieces of content include:
Heart rate graphs, calorie charts and other types of controls.
• Gestalt Law:
o Law of Similarity: When the images of the courses are placed together, they are
a group of bodybuilding genres. For example: Lose fat, get fitter, gain muscle, etc.
o Law of Continuation: In this design, I do not use short distances to avoid boring
users.
o Law of Proximity: The elements are so close together that they are grouped
together - information of the courses. The icons in the menu bar are arranged
close together to form a group of menu icons.
o Law of Figure & Ground: In my coursework, I divide the pieces of content
according to their color and size.
• Miller’s Law: In this coursework, I have divided the data stream (Home, Workout,
Exercise, Data after train, etc.), avoid overloading the user's memory to increase memory
efficiency, the highlight of the application for the customer.

3.3. Interaction Design Theory
3.3.1. Low to High fidelity prototypes:
What is Prototypes?
A prototype is a design version of a product or a function of a product created by the designer so
that the user can interact with it. Unlike mockups, prototypes help us interact (touch, press, hold,
swipe, etc.). Instead of Mockup only showing spatial view: there are elements on the screen.
Then the Prototype can always show the viewing angle over time: the current screen is like this,
after pressing A, the screen will look like this, after dragging B, the screen will turn like this, or
press the button C, 5 seconds After that, this message will appear. This will help customers have
a clearer picture of the product they will receive.
Figure 8 Example Prototype - Source: https://www.thingiverse.com/thing:1327093
Prototypes help stakeholders discuss and evaluate product ideas. With it, members of the
design team can discuss, exchange and find out-of-the-box design ideas. Prototypes respond
and assist designers in developing product ideas. Or you can discuss with customers and users
about the first impression of the product. Therefore, prototypes are very important in the
product development process, it is more important to rely on prototypes to evaluate the
technical feasibility of an idea. In addition, it also helps stakeholders to statistics and manage
risks during product development. (Preece, et al., 2002)

Figure 9 Example Prototype 2 - Source:
https://uomustansiriyah.edu.iq/media/lectures/6/6_2019_04_29!10_56_43_PM.pdf
Low-Fidelity Prototype:
A low-fidelity prototype is neither the same as the final product nor offers the functionality. It
can be made from paper, wood, or cardboard instead of an electronic or metal screen. The Low-
fidelity prototype shows only a limited number of functions, or it represents only functions but
not work. Low-fidelity prototypes are made from simple materials because they are used to
outline and add to the scope of the product. These materials allow designers to modify or
supplement the idea. Although it does not fully showcase the functionality of the product, it is
an important step in the design process as the Low-fidelity prototypes enable designers to
explore flexible product ideas and development. (Preece, et al., 2002)
• Storyboard: Storyboard is one example of low-fidelity prototyping. Storyboards are

sketches that show the user how to complete a task in their product. It's screen drafts or

series of scenes showing how the user is interacting with the product. Storyboarding
shows customers the interactive scenarios in which users can interact with their products
to comment, modify and develop the product through other steps.
Figure 10 Story board example - Source: https://www.nngroup.com/articles/storyboards-

visualize-ideas/
High-Fidelity Prototype:
A high-fidelity prototype looks more like the final product and usually provides more functionality
than a low-fidelity prototype. Teams design usually create high-fidelity prototypes when they
have a solid understanding of what they are going to build and they need to either test it with
real users or get final-design approval from stakeholders. (Preece, et al., 2002)
Figure 11 Example of High-Fidelity Prototype - Source: https://medium.com/7ninjas/low-fidelity-

vs-high-fidelity-prototypes-903a7befaa5a

3.3.2. Conceptual model
The user must be knowledgeable about an application in order to use it. Such an understanding
is called a “mental model” because it is in the user's mind. The Mental model is part of the
functions and interfaces of the application. And users will understand the task they are trying to
use when using the application. In addition, the user's mental model may change during the app's
experience (Johnson & Henderson, n.d.). For example, although different users are using the
iPhone 12, they may have different feelings and experiences. Which includes good and bad
experiences. So, Mental models are personal, uncertain and subject to change.
Conceptual model is a mental model that people define before doing something. Conceptual
modeling can be conceived at a very early point in time, it helps to outline work in order to save
time in design and provide more efficient applications for users.
Conceptual models are designed to help convey the underlying design intent of the application.
The more the conceptual model is related to metal models, the more effective the conceptual
model will be because it makes clear what we will design.
Figure 12 Conceptual Model - Source: https://www.s4m.io/product-insights-conceptual-model/
In a nutshell, a conceptual model provides a working strategy and a framework of general

concepts and their interrelations. The core components are as follows: (Sharp, et al., 2019)
• Metaphors and analogies: It is a way of communicating to our users to understand our

products. When you see a certain icon - users can understand what the next step will be
when you click that icon. For example: When you click on the home icon, the user will
know that the application will go back to the main page of the application.

• The concepts: Includes objects that we have created. What properties do those objects
have, and interactions are performed on those objects. Example: Review activity history.
• The relationships between those concepts: The objects that we have created can have
relationships with each other and interact with each other or objects that reside in other
objects (Children & Father).
• The mappings between the concepts and the user experience: Users can either assist or
invoke the services they need. For example they can view the list they have previously
saved or review their activity history. To do this we need mappings between concepts and
UX.
The main structure are as follows: (Johnson & Henderson, n.d.)
• Purpose & High-level functionality.

• Major Concepts and Vocabulary.
• Objects/Operations analysis.
• Conceptual Design Issues.
• Mapping from Task-Domain.
3.3.3. Modes & Types of Interaction
Mode in HCI is the context in which the actions of the user interacting on (key press, mouse click,
etc.) are handled according to specific modes. Means same action but can have different
meanings in modes (Anon., 2012). Interaction modes also offer us a design tool that can help
tame our technology, giving it manners that work in a variety of contexts.
Types of Interaction are types of forms to redefine user experience. Based on how one person
interacts with the app, there are 4 types of interaction: instructing, conversing, manipulating,
and exploring. A fifth type has since been proposed by Christopher Lueget al. (2019) that we have
added to ours, which they call responding.
Types of Interaction help designers build conceptual models before designing with a specific
interface (voice, gestures, touch, etc.). An interaction type is considered to help the application
have a high user experience and increase the value of the product.
• Instructing: The system receives instructing from the user and works. There are many
ways Instructing is done such as: entering commands, selecting menu items, gestures,
pressing buttons or using function buttons, etc.
• Conversing: Where to convert conversations between users with the system. Users can
communicate with the system via an interface, voice or text.
• Manipulating: Where users interact with objects that designers create in virtual or real
space by manipulating them. Through many interactions with objects, users will easily
remember interactions with them.
• Exploring: Where users move through a virtual environment or a physical space. Virtual
environments include 3D worlds and augmented and virtual reality systems. They enable

users to hone their familiar knowledge by physically moving around. Physical spaces that
use sensor-based technologies include smart rooms and ambient environments, also
enabling people to capitalize on familiarity.
• Responding: Where the system interacts with the users and realizes the user interactions
with the system. For example, Google maps relies on the user's schedule and gives
suggestions of locations to the user when opening the Google maps app.
4. DESIGN PROCESS
4.1. Interaction Design
4.1.1. Interaction Design Framework for this course work
In sections 3.1, 3.1.5 I discussed the choice of Goal-Directed Design for this coursework. I will
apply the Goal-Directed Design process to understand the nature of users' needs and their
behavior to create a product with an interface that meets those requirements. Finally generate
user interactions and user model to make sure my product is accepted by the user and uses it.
• Research:
In the 21st century, people are chasing technology, money forgetting health is the foundation of
everything. With health, people can do what they like, what they want to meet the increasing
living needs. Therefore, workouts are an indispensable factor for people today, when a person
has a proper and regular workouts regime, that person always has a good health to work and
live. According to Worldwide survey of fitness trends for 2020 by Walter R. Thompson, Ph.D.,
FACSM, Human demand for exercise is increasing. Not only are the traditional workout exercises,
but the need to practice applying modern technologies and equipment is gradually increasing
because of its convenience. (Thompson, et al., 2019)
Figure 13 Age of survey: Worldwide survey of fitness trends for 2020 by Walter R. Thompson,
Ph.D., FACSM

Figure 15 Survey Respondents Occupation of
Worldwide survey of fitness trends for 2020 by
Walter R. Thompson, Ph.D., FACSM Figure 14 Top 20 Worldwide Fitness Trends for 2020 of
Worldwide survey of fitness trends for 2020 by Walter R.
Thompson, Ph.D., FACSM
As you can see in the photos above, most people in any job need exercise. Anyone who works at
any job or at any age also has a need to exercise regularly, this proves that exercise is an essential
need of people today. The trend of exercisers is gradually towards private and technology
adoption. Why? Concern about weight or body shape, lack of experience in training makes people
want to practice alone, with smart devices(Rank 1) suggesting or at least having a personal
training (Rank 5) or a small group(Rank 3).
o Tempo Screen:
Tempo intends to become the barbell's Peloton. It's a 42-inch high screen with a 3D image
recognition that detects and informs you how to operate. The massive upright HD display allows
you to feel like your fitness instructor is straight here now with you whenever you remain
competitive with each other in live and on-demand courses. Tempo's Microsoft Kinect IoT devices
monitor you 30 times a second and warn you if your form is incorrect. This is all accommodated

in a beautifully styled stand-alone panel that carefully stores included barbells, dumbbells,
mounting weights, exercise mat, stability ball recovery, and fitness tracker. Tempo begins for
prices starting for $1995 today, needing a $250 down payment and a $39 monthly content
membership fee.
Figure 16 Tempo Screen – Source: https://techcrunch.com/2020/02/26/tempo-

weight-lifting-
screen/?guccounter=1&guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&gu
ce_referrer_sig=AQAAAFSL1dtyh07M1fbZvMa-9JV-
y2sBh6O0XTm7N7juYyaqW0p055lzi-
hKdY1vfRJCZTMHui3R_i0kpKPLDm4T9ly2qk6mRsByWCuLS4ybawGeAAm4EEwrMC
HdwL-Kl7__2N4Z90qY9YTJBOTgiJkeCw0_kbNufNkrPIDZX5C9o2D-

o Tonal – The smartest home gym:
Tonal seems to be a home-based regular exercise machine that produces magnetic fields to
develop immunity and attach your wall for an individualized training session from over 200
workouts, such as deadlifts, bicep curls, overhead presses, and on-demand training. Tonal was
developed by Aly Orady, a veteran of Hewlett-Packard that desired a convenient way to remain
in form at home that did not require sweaty, used materials, and tiresome gym rides. With Tonal,
social anxiety in the fitness center can be a non-issue - no more self-consciousness beside your
apparently more experienced gym-goers, never more half hour round trips to the fitness center,
and no more club memberships. That is indeed, once you can manage the $3,000 price.
Figure 17 Tonal – The smartest home gym – Source: https://www.tonal.com/equipment/
• Modeling:
According to Worldwide survey of fitness trends for 2020 by Walter R. Thompson, Ph.D., FACSM,
I have compiled and summarized the personas for my products. Based on the two products
above, we can see that the price for such a smart product is very high, which will not be suitable
for all human classes in society. My product is designed for the future and regardless of rich or
poor, everyone has the right to exercise for good health. So below are some of the features of
users wishing to use my products:

o People in need of good health in the future.
o Office workers are inactive.
o People in the sports industry.
o People who are less confident in their physique and want to change themselves.
o People who need to be in good health to get their jobs done.
o About age: We think everyone can exercise but to get the best performance, the
age group is 14 - 60 years old.
The below are 2 personas representing the users of this product.
Figure 18 Personas 1

Figure 19 Personas 2

• Requirements & Framework Definition:
At this stage, I need to define what the user request is. In the two sections above, I have identified
persona and their purposes. My product is a wall mount device that has the following
requirements:
o The large wall-mounted screen whose contents ought to be controlled by a mobile
app and that it should enable people to take part in gym classes (either pre-
recorded classes or live classes).
o Connected by mobile app.
o Performance data page of user.
o Integration of sensor performance data.
o Devices has been connected with internet by LAN to access gym classes or play
video.
o Devices have Bluetooth connection.
o Mobile app and large wall-mounted screen have the new trend theme.
o User enters their current information and the app will automatically recommend
them the appropriate courses.
• Refinement:
The aim of this phase is to create a mature and detailed design specification to the goal of its
persona. I will present in part 5 prototypes of coursework.
• Development Support:
In this coursework, I just need to generate prototypes from low-high fidelity prototypes, so the
support I won't cover. I need to maintain the main structural features of my design while keeping
its central concept intact.
4.1.2. Interaction mode & types for this course work
As we discussed in sections 3.3, 3.3.3. There are 5 Interaction types and basic interaction mode.
Now, we will discuss how interaction types work in this coursework. There are a lot of cases in
this coursework that apply interaction types but I just give the most prominent cases so that you
can understand the nature of my system best.
• Instructing: The system receives instructing from the user and works (3.3.3). In my
coursework, When the user touches the menu bar, the user presses the start workout
button or enters his / her information into the screen, the screen will process those
interactions and return the results as expected. User wants: Visit the desired page, start
timer workouts.
• Conversing: Where to convert conversations between users with the system(3.3.3). In this
coursework, users can interact with the screen by touching, holding and inputting into

the system. This means that when users interact with those gestures, then the system
and users are communicating with each other.
• Manipulating: Where users interact with objects that designers create in virtual or real
space by manipulating them (3.3.3). When applying to this coursework, when the user
wants to practice exercises - the user must join a certain course and perform the actions
to practice the workouts.
• Exploring: Where users move through a virtual environment or a physical space(3.3.3). In
this coursework, using heart rate sensor and camera so that the monitor can recognize
the user's activity while practicing workouts. Then the image and heart rate will be
recorded in the system and displayed on the screen.
• Responding: Where the system interacts with the users and realizes the user interactions
with the system (3.3.3). When the user enters customer information into the system, the
system will process and recommend suitable courses.
4.1.3. Metaphor
Metaphors are considered the central component of a conceptual model. Metaphors gathers
visual images, actions and procedures in the user interface. When the user interacts with the
application, the user will gain knowledge about it without having to learn from scratch. When
metaphors are applied to the system, it helps users to quickly access and familiarize themselves
with the application's interface and understand how to interact with the application to produce
the expected results. For example, when referring to the computer, everyone envisions that the
screen that appears after booting is "Desktop", where there is no data called "File", the place to
manage data files is called "Folder", And where unnecessary data is called "Recycle Bin". (Sharp,
et al., 2019)
4.2. Conceptual model for this course work
Based on the theory of interaction design 3.3, I have formed a Conceptual model of ShinYi Smart
gym, including Metaphor, Connection, Type of interaction and interaction so that users can know
which connections the system works through, which functions, which types of interaction and
which metaphors are available. This is the step for the user to understand the system in most
detail. Below is the Conceptual model of ShinYi Smart Gym.

Figure 20 Conceptual Model for this coursework

5. PROTOTYPES OF COURSEWORK
5.1. Low Fidelity prototype:
5.1.1. Mood board
Figure 21 Mood board for this coursework
A mood board is a collage or composition of images, visuals and other objects, often created for
the purposes of design or presentation. Mood boards can help designers to figure out how to
create unified styles or themes for a design project.
Based on the user needs of the persona and the color of the gym, I analyzed those issues and
built a mood board for the ShinYi- Smart gym prototype.
Why did I choose the main color above for the system? This color is the trend of 2020 (Anon.,
2020) and is loved by many users. More importantly, in section 4.1.1 Personas mentioned these
colors, I chose them as the main color for ShinYi-Smart gym.

5.1.2. Storyboard
Figure 22 Storyboard for this coursework
Storyboards are used to present scenes as users interact with your application. It is also
considered a comic version of your product because it is a set of squares that draw sections of
the product displayed case by case.
I designed a Storyboard for the ShinYi-Smart gym so that the person looking at it could
understand some of the system's scenes as it worked.

5.1.3. Wireframe
Based on the story board that I designed and built in the previous section, I designed the
wireframe for the main pages of our product. Based on this, users can imagine what the screen
will have, the layout of the interface will be like. From the wireframe, users can comment, discuss
and edit before starting to develop prototype.
Figure 24 Wireframe of Mobile app for this

coursework
Figure 23 Wireframe of large screen for this coursework 1

Figure 25 Wireframe of large screen for this coursework 2

5.1.4. Paper prototype
Based on the requirements defined in section 4.1.1. I have built a screen 1: 8 (figure 26 above)
with real aspect ratio so that I can outline the system's interactions. It is a large screen that
includes: 1 camera, 1 heart rate sensor, 2 LEDs for Bluetooth and Internet LAN signals, a speaker
strip, a type C jack to supply the power and finally a LAN jack to connect Internet.
Camera and Sensor 2 LEDs
LAN & TypeC Jack
Speaker strip
Figure 26 Paper prototype - The Front & Rear of Large screen

As you can see in the image below (Figure 28), I've built a phone framework for building
interactions in the Mobile app. When users want to use my system, they need to login in Mobile
App(Figure 27) first so that the system can collect and process user data before training on the
big screen.
Figure 28 Paper prototype - Mobile Figure 27 Paper prototype - Login Mobile

frame

In Mobile App delivery, the user interface has been optimized for the simplest way because I've
applied Miller's Law. Here, the user can see the performance data history of the days of the week
(figure 30), see the training status of the courses and search and connect to the large screen
(mobile app can control the large screen) (figure 29).
Figure 29 Paper prototype - Performance

data on Mobile app
Figure 30 Paper prototype - Connect
Bluetooth to large screen

Back to the big screen, you can see that I followed the wireframe I designed in section 5.1.3, the
main page is a list of courses and shows some basic information of the user (figure 32). The details
and timeline of a course (figure 31) will be opened when the user clicks on a course. Here users
can refer to what they will have to practice when choosing this course.
Figure 32 Paper prototype - Main page of Large screen Figure 31 Paper prototype - Detail information of Course

After joining a certain course, the user will have a list of topics for all days of the week, in the list
of training days (figure 34), the user will have a horizontal list of weeks and the status bar to
display the status. % completed. In the daily training interface (figure 33), users will see the
exercises including warm-up before training.
Figure 34 Paper prototype - Workouts for the week Figure 33 Paper prototype - Workout of each day

When choosing a workout, the user will be shown a list of exercises (figure 35) of that workout.
Here the user will see some workout information (calories, time, exercises) that the user will have
to practice. After the start of a workout, users will be redirected to the ready page, followed by
the practice page. Here, the screen (figure 36) will display 3 main parts: the user's live video
recorded by the camera, the trainer's video tutorial, the live heart rate measured from the
monitor's sensor. Users can pause/resume or skip exercise.
Figure 35 Paper prototype - Exercises of the workout day Figure 36 Paper prototype -Training.

5.2. High Fidelity prototype:
After the paper prototype is approved, I will build the High Fidelity Prototype so that customers
can interact with it and apply a color palette to my system according to the chosen theme. Below
(figure 37) is the login interface of the mobile app.
After Login, the user will go to the homepage of the mobile app. Below (figure 38 & figure 39),
there will be training history in which course, user performance chart by day. Users can view the
history of heart rate, water and calories for the days of the week.
Figure 37 High Fidelity

Prototype – Login interface
Figure 39 High Fidelity Prototype - Performance data on Figure 38 High Fidelity Prototype - Performance data on
Mobile App 1 Mobile App 2

User can search for nearby screens by Bluetooth (figure 41). After sending the connection request
to the screen, the big screen will show whether to agree to connect or not (figure 40). When you
press agree, the screen will go to the home page of the application.
When Bluetooth is not connected,

the green light will blink
Figure 41 High Fidelity Prototype - Find Large Screen on Mobile

App
Figure 40 High Fidelity Prototype - Receive request connect

Once connected, at the phone interface, users can control (figure 43) the large screen through
the mobile app. The system allows users to disconnect the large screen, customize the brightness
and volume of the screen. Alternatively users can shut down the large screen in the mobile app.
The user will enter their basic information(figure 42) (weight, height) and their needs so that the
system can compare pre- and post-workout data. Recommend to users courses tailored to the
information and needs of the user.
Figure 43 High Fidelity Prototype - Control large screen by Figure 42 High Fidelity Prototype - Update information of user
Mobile App

After updating the information, in the large screen will send a message to the user that "Do you
want to update latest information?" (figure 44) User will have 2 options: Update or Remind me
later. The user's information will be immediately updated according to the information entered
from the mobile app.
After approving the connection, the interface of the large screen will be as shown below (figure
45). There will be 3 sections: Course, Workouts and Exercises. Course is the main interface of the
screen, which will contain the courses that the user can join, in addition the system also
recommend courses for the user to match the weight, height and needs of the user.
Figure 45 High Fidelity Prototype - Receive request update

information Figure 44 High Fidelity Prototype - Home page of large screen

On the workouts page, here is a list of workouts (figure 47) of the courses that the user has
attended which is the user's duty to practice during the day. These workouts are updated daily
and depending on the courses the user has attended, the number of workouts will be less or
more.
On the Exercises page (figure 46) there will be a list of exercises when the user wants to do more
exercises on his own. Here the exercises will not be related to the courses the user has attended.
It is not mandatory for the user, depending on the user's needs, they can refer to how to practice
the exercises. This page is a priority for people with training experience who know what exercises
their bodies are in need.
Figure 47 High Fidelity Prototype - Workouts page on Large Figure 46 High Fidelity Prototype - Exercises page on Large
Screen Screen

Below is the settings interface on the large screen (figure 49). Similar to the Mobile app, users
can Disconnect with the mobile device and the screen will switch back to the disconnected
interface. In addition, users can customize the screen brightness, volume.
This page (figure 48) shows the details of a course including How? Why? And Timeline when the
user wants to Join Course. Users will know in advance some information and the timeline of the
course to prepare the training spirit. Once sure, the user will click Start Course to participate in
the course.
Figure 49 High Fidelity Prototype - Setting on large screen Figure 48 High Fidelity Prototype - Course detail on large screen

After joining Course, users will see the timelines by week (figure 51). Main exercise categories for
each day through to the end of a course. There is also a status bar to let users know how much
% of this course they have completed.
Below is the one-day work out for users that includes warmup and rest time (figure 50).
Figure 51 High Fidelity Prototype - List day of Week Figure 50 High Fidelity Prototype - List workout of day

Below are the Exercises for a Workout (figure 53). Here users can see after completing this
workout how much calories they can burn and how much time it will take.
When you start a workout, the large screen automatically turns on the camera and heart rate
sensor to scan the user and begin measuring your heart rate (figure 52). There will be 15 seconds
before entering official training, during which time users should stand in front of the screen so
that the monitor can scan images and measure heart rate accurately.
Figure 53 High Fidelity Prototype - List exercises of a workout Figure 52 High Fidelity Prototype – Ready? scan body & heart
rate

After the preparation is complete, users will begin to practice. There are two parts of the video
on the large screen, above is a live photo of the user while practicing, below is a tutorial photo of
the trainer. In the training interface, which will display the exercise countdown time, users can
pause / resume and skip exercise (figure 55). The lower part is the heart rate directly measured
by the sensor from the user. Live heart rate allows users to directly monitor their own state. After
finishing an exercise (figure 54), users will be rested for 15 seconds.
Figure 55 High Fidelity Prototype - Rest time
Figure 54 High Fidelity Prototype - Training interface

After finishing the exercises of a Workout (figure 56), the user can review the performance data.
Here the system will automatically compare the data before and after the workout is completed.
Figure 56 High Fidelity Prototype - Performance data after workout complete

Video demo high prototype at YouTube: https://youtu.be/pAbFpsY8crE
6. RESEARCH STUDY
Evaluation is an indispensable stage in the design process, it helps designers better understand
their products from the user's point of view, or look at their own products. This is the stage of
collecting data and analyzing the process of users using a product, interacting with a prototype,
application or finished product. The review process focuses on the usability, the product's
performance, and the user interaction on the product. This phase is to improve interaction, the
quality of products suitable for real life.
According to (Sharp, et al., n.d.), they classify evaluations into three broad categories, depending
on the setting, user involvement, and level of control. There are 3 types of evaluations: controlled
settings directly involving users, natural settings involving users, any settings not directly
involving users.
I choose directly involving users evaluation method for this course work. Because I selected Goal-
directed design main framework for ShinYi-Smart gym, so directly involving users will fit to

framework. Because the directly involving users helps control and measure user behavior and
activities, the key to this type of assessment is: usability and testing the product.
To perform the prototype evaluation in my coursework, I will have to answer 3 questions: What?
Who? And How?
• What?
o I want users to interact with the high prototype in this coursework to assume that
users enjoy practicing with my product. Users will be able to try out my product
to feedback the functionality and user experience on the high prototype.
• Who?
o The participants of my study will be those mentioned in section 4.1.4, who are 14-
60 years old who are in need of exercise at home to have a good health.
o During the pandemic covid-19 I could not do the offline research, and with the
budget of a final year student paying a lot of fees, I would do the research online.
I will use social media and Axure Cloud to find potential clients to volunteer in my
research.
• How?
o I will build questionnaire and Axure for deployment on social networks. Also I have
to research the user needs including (interaction rule, color trend 2020 or theme,
layout trend).
o Once I have collected the data, I will analyze it and compare it with my product.
Finally I will conclusion and product development plans.
6.1. Questionnaire:
Because of the online research, I used Google Form to build questionnaire, then published it on
social media to find potential users and volunteer to join.
Questionnaire at: https://forms.gle/57o6UYHFgGoamjct9
Demo high prototype by Axure cloud at: https://fsr1yt.axshare.com
Demo high prototype at YouTube: https://youtu.be/pAbFpsY8crE

Figure 57 Introduction of questionnaire

Figure 58 Questionnaire



The age of the largest survey participants is between

22 to 34 years old (39.1%). The lowest is: 45 to 54
(8.7%).
Figure 62 Questionnaire data – How old are you?
Officer is the profession most interest in research

accounting for 52.2%. Student or unemployed,
retired account for 8.7%
Figure 63 Questionnaire data – What industry do you do?

The number of people who practice usually and
sometimes accounts for 30.4% and 39.1%
respectively. Seldom exercise accounts for 21.7%,
this figure is also quite high and Never accounts for
8.7%.
Figure 64 Questionnaire data - How often do you work out?
Figure 65 Questionnaire data - Why are you interested in this study?
Some things that interest users with this study and high prototype: Need to workout (52.2%), smart
device in the future (52.2%) and private training (43.5%)

Figure 66 Questionnaire data - some reviews
According to the figure 67 above, we can see most of the interactions and hardware activities
that make the user feel comfortable and satisfied, but we can see the Layout of Large screen,
Sensor heart rate and Performance data chart is not appreciated by users.

Figure 67 Questionnaire data - What functionality do you want to improve/add in my system?
You can see that the user has suggested gesture function, voice control more function and color-
blind mode for color blind persons.
6.2. Conclusion and product development plans:

According to the figure 62, Adults often need to exercise because this is the most comprehensive
age of human development. In 21 and under years old people, they have not thought of
exercising yet so they are not interested in this survey. The need to practice to have a good health
of the elderly also accounts for a large part, 65 and over years old 13% and 45 to 54 years old
8.7%. Here we can see, everyone has a need to learn and exercise to have a good health.
According to the figure 63, After hours of stress and fatigue at the company, they often tend to
workouts to reduce fatigue, stress so the percentage of officers at the highest is 52.2%. In
addition, those who work in a sports environment but still want to practice more accounting for
17.4%.
According to the figure 64, People increasingly attach importance to exercise. This is true because
without good health, there is nothing they can do.
According to the figure 65, My system is getting users to enjoy interactions and ideas. So I think
this is a prerequisite for the society to develop smart device to train workouts.
According to the figure 66, Layout of Large screen, sensor heart rate and camera action,
performance data has been given negative reviews by the user. The heart rate sensor and camera

action are a new technology that is being developed further so the user has not yet trusted it, so
the negative points will be reduced as the technology becomes widely available. Performance
data is not well optimized for the small screen. And large screens have not been developed much
so users have not adapted to this layout.
According to the figure 67, user has suggested gesture function, voice control more function and
color-blind mode for color blind persons.
Based on the data after survey in section 6.1, you can see that my system has the following
problems:
• Sensor is not really stable because of new technology, so there are many limitations.
• Performance data chart has not helped users understand clear parameters.
• There is no gesture function.
• Voice control has many limitations.
• There is no color-blind mode.
In addition to the above problems, the high prototype of ShinYi-Smart gym products is working
well, users feel excited and comfortable when using the service on the system.
Based on the above issues: I was planning to maintenance and upgrade ShinYi's high prototype -
Smart gym:
Phase 0 Phase 1 Phase 2 Phase 3

Concept and Research Planning Design Testing
Find and
update latest
Sensor
Performance
Research and analysis Planning built Design based
data chart Testing and
data to resolve to work on Research
Gesture evaluation
problems effectively and plan
function
Voice control
Color blind
mode

7. CONCLUSION
In this report, I have covered the Interaction design framework. Then analyze and choose Goal-
Directed Design as the main framework for coursework. I explore Cognitive Psychology and the
aspects of it that influence interaction design. Next, I tried to apply cognitive psychology to this
coursework. Research interaction design theory and apply interaction design framework into this
coursework. Build the design process and start designing. The coursework prototypes building
process is made from the Low fidelity prototype to High fidelity prototype. Use a high prototype
to research study to evaluate the things I have not done yet and plan for future product
development (6.2 product development plan).

8. REFERENCES
Aberg, G. & Chang, J., 2005. Applying Cognitive Science Research in Graphical User Interface. s.l.:s.n.
Anon., 2012. Human-Computer Interaction, 4e. [Online]

Available at:
https://www.hcibook.com/e4/glossary/mode/#:~:text=A%20mode%20in%20HCI%20is,meaning%20dep
ending%20on%20the%20mode.
[Accessed 22 10 2020].
Anon., 2020. Shutterstock. [Online]

Available at: https://www.shutterstock.com/blog/trends/2020-color-trends
[Accessed 08 11 2020].
Dubberly, H., 2001. Alan Cooper and the Goal Directed Design Process. Gain AIGA Journal of Design for
the Network Economy, pp. http://www.dubberly.com/articles/alan-cooper-and-the-goal-directed-
design-process.html.
Durrani, S. & Dirrani, Q. S., 2009. Proceedings of the First International Conference on Intelligent Human
Computer Interaction Paper. s.l.:s.n.
Goodwin, K., 2009. Chapter 1 - Goal-Directed Product and Service Design. In: Designing for the Digital
Age: How to Create Human-Centered Products and Services. s.l.:Wiley Publishing, Inc., pp. 3-13.
Hudkar, T., 2017. Medium. [Online]

Available at: https://medium.muz.li/human-cognition-and-its-effect-on-design-ed23cfff7f18
[Accessed 18 10 2020].
Johnson, J. & Henderson, A., n.d. Structure. In: Conceptual Models - Core to Good Design. s.l.:s.n., pp. 27-
36.
Johnson, J. & Henderson, A., n.d. Using Tool. In: Conceptual Models- Core to Good Design. s.l.:s.n., pp. 5-
10.
Kensing, F. & Greenbaum, J., 2012. Heritage: having a say. In: J. Simonsen & T. Robertson, eds.
Routledge International Handbook of Participatory Design. New York: Routledge, pp. 21-36.
Maja van der Velden, C. M., 2014. Participatory Design and Design for Values. In: Handbook of Ethics,
Values, and Technological Design. s.l.:s.n., pp. 1-22.
McLeod, S. A., 2015. Cognitive psychology. [Online]

Available at: https://www.simplypsychology.org/simplypsychology.org-Cognitive-Psychology.pdf
[Accessed 16 10 2020].
Neisser, U., 1967. Cognitive psychology. In: Century psychology series. S. A.: New York : Appleton-
Century-Crofts.
Nygaard, K. & TerjeBergo, O., 1975. In: The Trade Unions ‐ New users of research. s.l.:MCB UP Ltd, pp. 5-
10.

Pomerantz, J., 2003. Perception: Overview. In: Encyclopedia of cognitive science.. s.l.:s.n.
Preece, J., Sharp, H. & Rogers, Y., 2002. Prototyping - Chapter 12 Design, Prototyping and Construction.
In: Interaction Design: Beyond Human-Computer Interaction 4th Edition. s.l.:s.n., pp. 421-466.
Saffer, D., 1900-01-01. Activity-Centred Design - Chapter 2: The Four Approaches to Interaction Design.
In: Designing for Interaction: Creating Innovative Applications and Devices. s.l.:Pearson Education Inc,
pp. 35-37.
Saffer, D., 1900-01-01. User Centred Design - Chapter 2: The Four Approaches to Interaction Design. In:
Designing for Interaction: Creating Innovative Applications and Devices. s.l.:Pearson Education Inc, pp.
33-35.
Sharp, H., Preece, J. & Rogers, Y., 2019. Chapter 4 - Cognitive Aspects. In: INTERACTION DESIGN Beyond
Human-Computer, Fifth Edition. s.l.:John Wiley & Sons, Inc., pp. 102-123.
Sharp, H., Preece, J. & Rogers, Y., 2019. CONCEPTUALIZING INTERACTION. In: I. I. I. John Wiley & Sons,
ed. Interaction Design: Beyond Human-Computer Interaction 5th Edition. s.l.:John Wiley & Sons, Inc., pp.
69-97.
Sharp, H., Preece, J. & Rogers, Y., n.d. INTRODUCING EVALUATION. In: Interaction Design: Beyond
Human-Computer Interaction 5th Edition. s.l.:s.n., pp. 495-522.
Thompson, W. R., Ph.D. & FACSM, 2019. WORLDWIDE SURVEY OF FITNESS TRENDS. American College of
Sports Medicine, pp. 10-18.
Wikimedia, 2019. Simon effect. [Online]

Available at: https://en.wikipedia.org/wiki/Simon_effect
[Accessed 18 10 2020].

CW COMP1649 9324 nn0344w 10112020 083642 2021 1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CW COMP1649 9324 nn0344w 10112020 083642 2021 1 PDF

Uploaded by

Copyright:

Available Formats

Human Computer

[Student name: Nguyen Cong Nhat]

Figure 1 User-Centered Design - Source: https://rno-its.piarc.org/en/systems-and-standards-human-

Human Computer Interaction and Design | 1

Human Computer Interaction and Design | 2

Figure 1 User-Centered Design - Source: https://rno-its.piarc.org/en/systems-and-standards-

Human Computer Interaction and Design | 3

Figure 2 Goal-Directed Design - Source: https://www.researchgate.net/figure/In-our-design-

Figure 3 Example Patterns of Goal-Directed Design

Human Computer Interaction and Design | 5

Detailed Design Modeling

Figure 4 Processes of Goal-Directed Design

Human Computer Interaction and Design | 6

Human Computer Interaction and Design | 7

Human Computer Interaction and Design | 8

• Tools and techniques:

• Alternative visions about technology:

3.1.4. Activity-centered design

Human Computer Interaction and Design | 9

Human Computer Interaction and Design | 10

Human Computer Interaction and Design | 11

Figure 7 Cognitive Psychology

Human Computer Interaction and Design | 12

• Language, reading, speaking and listening:

Human Computer Interaction and Design | 13

Human Computer Interaction and Design | 14

Human Computer Interaction and Design | 15

Human Computer Interaction and Design | 16

Figure 8 Example Prototype - Source: https://www.thingiverse.com/thing:1327093

Human Computer Interaction and Design | 17

• Storyboard: Storyboard is one example of low-fidelity prototyping. Storyboards are

Human Computer Interaction and Design | 18

Figure 10 Story board example - Source: https://www.nngroup.com/articles/storyboards-

Figure 11 Example of High-Fidelity Prototype - Source: https://medium.com/7ninjas/low-fidelity-

Human Computer Interaction and Design | 19

Figure 12 Conceptual Model - Source: https://www.s4m.io/product-insights-conceptual-model/

In a nutshell, a conceptual model provides a working strategy and a framework of general

• Metaphors and analogies: It is a way of communicating to our users to understand our

Human Computer Interaction and Design | 20

• Purpose & High-level functionality.

Human Computer Interaction and Design | 21

Human Computer Interaction and Design | 22

Human Computer Interaction and Design | 23

Figure 16 Tempo Screen – Source: https://techcrunch.com/2020/02/26/tempo-

Human Computer Interaction and Design | 24

Figure 17 Tonal – The smartest home gym – Source: https://www.tonal.com/equipment/

Human Computer Interaction and Design | 25

Human Computer Interaction and Design | 26

Human Computer Interaction and Design | 27

Human Computer Interaction and Design | 28

Human Computer Interaction and Design | 29

Human Computer Interaction and Design | 30

Figure 21 Mood board for this coursework

Human Computer Interaction and Design | 31

Figure 22 Storyboard for this coursework

Human Computer Interaction and Design | 32

Figure 24 Wireframe of Mobile app for this

Figure 23 Wireframe of large screen for this coursework 1

Human Computer Interaction and Design | 33

Human Computer Interaction and Design | 34

Camera and Sensor 2 LEDs

LAN & TypeC Jack

Figure 26 Paper prototype - The Front & Rear of Large screen