Assignment

Human Computer Interaction- COMP1649

Ha Tuan Anh
Student ID: GCD17220
Class ID: TCD0102
Tutor: Ly Quynh Tran
Contents
I. Introduction .................................................................................................................................... 6
II. Background requirement ................................................................................................................ 7
III. Literature review............................................................................................................................. 8
1. Process and Interaction Design Frameworks ............................................................................... 8
1.1. User-centered Design .......................................................................................................... 8
1.2. Goal-directed Design ......................................................................................................... 10
1.3. Participatory Design .......................................................................................................... 11
1.4. Choose the framework ...................................................................................................... 12
2. Cognitive Psychology................................................................................................................. 12
2.1. Cognition and Cognitive Psychology .................................................................................. 12
2.2. Kind of Cognitive Psychology ............................................................................................. 14
3. Interaction Design theory.......................................................................................................... 14
3.1. Type of Interaction ............................................................................................................ 14
IV. Design process .............................................................................................................................. 17
1. Interaction Design research....................................................................................................... 17
1.1. Definition........................................................................................................................... 17
1.2. 5 dimensions of interaction design .................................................................................... 18
2. Conceptual Design ..................................................................................................................... 23
2.1. Conceptual Design ............................................................................................................. 23
2.2. Design Conceptual model .................................................................................................. 23
3. Prototype .................................................................................................................................. 24
3.1. Definition........................................................................................................................... 24
4. Storyboard and Wireframes ...................................................................................................... 25
4.1. Storyboard ......................................................................................................................... 25
4.2. Wireframes ........................................................................................................................ 27
5. Low- fidelity prototype.............................................................................................................. 34
6. High-fidelity prototype .............................................................................................................. 37
7. Physical Design .......................................................................................................................... 46
8. Requirement ............................................................................................................................. 46
8.1. User requirement .............................................................................................................. 46
8.2. Method gathering data ...................................................................................................... 48
 8. The chosen method for gathering data for this product ............................................................ 49
9. What kind of analyzing data ...................................................................................................... 54
9.1. Quantitative ...................................................................................................................... 54
9.2. Qualitative ......................................................................................................................... 54
V. Evaluation ..................................................................................................................................... 59
1. Introduction .............................................................................................................................. 59
2. Evaluation type ......................................................................................................................... 61
VI. Conclusion..................................................................................................................................... 71
Bibliography .......................................................................................................................................... 72

Table of Figures
Figure 1. The multidisciplinary field of HCI ............................................................................................................. 6
Figure 2. Smart Screen device ................................................................................................................................ 8
Figure 3.User-center Design ................................................................................................................................... 9
Figure 4.Goal-directed Design .............................................................................................................................. 10
Figure 5. Participatory design .............................................................................................................................. 12
Figure 6. Cognition ............................................................................................................................................... 13
Figure 7.ATM by Instructing ................................................................................................................................. 15
Figure 8.Using Voice by conversing ...................................................................................................................... 16
Figure 9.Search web by Exploring and Browsing .................................................................................................. 17
Figure 10.Design Process ..................................................................................................................................... 17
Figure 11. Word dimension in interaction design ................................................................................................. 18
Figure 12. Visual representation dimension in interaction design ........................................................................ 18
Figure 13. Physical objects or space dimension in interaction design ................................................................... 19
Figure 14. Time dimension in interaction design .................................................................................................. 19
Figure 15. Behavior dimension in interaction design............................................................................................ 20
Figure 16. Instructing in Smart screen .................................................................................................................. 22
Figure 17. Conversing in Smart screen ................................................................................................................. 23
Figure 18.Conceptual Model ................................................................................................................................ 24
Figure 19.Storyboard ........................................................................................................................................... 26
Figure 20.Initial Hierarchy .................................................................................................................................... 27
Figure 21.Welcome page ..................................................................................................................................... 28
Figure 22.Login page ............................................................................................................................................ 28
Figure 23.Sign up page ......................................................................................................................................... 29
Figure 24.Device connect page............................................................................................................................. 29
Figure 25.Loading screen page ............................................................................................................................. 30
Figure 26.Home page ........................................................................................................................................... 30
Figure 27.Exercise page........................................................................................................................................ 31
Figure 28.Workouts page ..................................................................................................................................... 31
Figure 29.Information workout page ................................................................................................................... 32
Figure 30.Training screen page ............................................................................................................................ 32
Figure 31.Classes page ......................................................................................................................................... 33
Figure 32.Class live page ...................................................................................................................................... 33
Figure 33.Low-fidelity prototypes- Sign in and sign up page ................................................................................ 34
Figure 34.Low-fidelity prototypes- Device connect page...................................................................................... 35
Figure 35.Low-fidelity prototypes- Home page .................................................................................................... 35
Figure 36.Low-fidelity prototypes- Workout information page ............................................................................ 36
Figure 37.Low-fidelity prototypes- Training page ................................................................................................. 36
Figure 38.Low-fidelity prototypes- Class live page ............................................................................................... 37
Figure 39.Moodboard .......................................................................................................................................... 38
Figure 40.High fidelity prototype – Welcome page .............................................................................................. 39
Figure 41.High fidelity prototype – Login page..................................................................................................... 39
Figure 42.High fidelity prototype – Sign up page.................................................................................................. 40
Figure 43.High fidelity prototype – Device connect page ..................................................................................... 41
Figure 44.High fidelity prototype – Loading screen page...................................................................................... 42
Figure 45.High fidelity prototype – Home page.................................................................................................... 42
Figure 46.High fidelity prototype – Exercise page ................................................................................................ 43
Figure 47.High fidelity prototype – Workouts page.............................................................................................. 43
Figure 48.High fidelity prototype – Information workout page ............................................................................ 44
Figure 49.High fidelity prototype – Training screen page ..................................................................................... 44
Figure 50.High fidelity prototype – Classes page .................................................................................................. 45
Figure 51.High fidelity prototype – Class live page ............................................................................................... 45
Figure 52. Physical Design .................................................................................................................................... 46
Figure 53. Personas user 1 ................................................................................................................................... 47
Figure 54.Personas user 2 .................................................................................................................................... 48
Figure 55. Question 1 ........................................................................................................................................... 51
Figure 56.Question 2............................................................................................................................................ 52
Figure 57.Question 3............................................................................................................................................ 52
Figure 58.Question 4............................................................................................................................................ 52
Figure 59.Question 5............................................................................................................................................ 53
Figure 60.Question 6............................................................................................................................................ 53
Figure 61.Question 7............................................................................................................................................ 53
Figure 62. Chart 1................................................................................................................................................. 55
Figure 63. Chart 2................................................................................................................................................. 56
Figure 64. Chart 3................................................................................................................................................. 56
Figure 65. Chart 4................................................................................................................................................. 57
Figure 66. Chart 5................................................................................................................................................. 58
Figure 67. Chart 6................................................................................................................................................. 58
Figure 68. Chart 7................................................................................................................................................. 59
Figure 69.10 Usability Heuristics .......................................................................................................................... 62
Figure 70.Visibility of System Status in mobile ..................................................................................................... 63
Figure 71.Match Between System and the Real World in Smart Screen ............................................................... 64
Figure 72.User Control and Freedom in Smart Screen .......................................................................................... 65
Figure 73.Consistency and Standards in Smart Screen ......................................................................................... 66
Figure 74.Error Prevention in mobile ................................................................................................................... 67
Figure 75.Recognition Rather Than Recall in mobile ............................................................................................ 68
Figure 76.Flexibility and Efficiency of Use in Smart Screen ................................................................................... 69
Figure 77.Aesthetic and Minimalist Design in Smart Screen ................................................................................. 70
Figure 78.Help Users Recognize, Diagnose, and Recover from Errors in mobile ................................................... 71
Figure 79.Help and Documentation in Smart Screen ............................................................................................ 71
 I. Introduction

What is Human Computer Interaction?

Based on (Carroll) Human-computer interaction (HCI) is a multidisciplinary area of research that

focuses on computer technology design and, in particular, human (user) interaction with
computers. HCI has since grown to include almost all aspects of information technology design,
although it was originally concerned with computers.

Figure 1. The multidisciplinary field of HCI

User

We can mean "user" as an individual user, a community of users who work together. It is important to
understand the way the sensory systems of people (sight, hearing, touch) transmit knowledge. Different
users also establish different conceptions or conceptual models of their experiences and have different
ways of learning and retaining knowledge. Furthermore, cultural and national distinctions play a role.

Computer

We apply to any technology, ranging from desktop computers to large-scale computer systems, when
we speak about computers. For instance, if we were discussing a website's design, the website itself
would be referred to as' the machine.' It is also possible to consider devices such as cell phones or VCRs
to be 'computers.'
 Interaction

Differences between humans and computers are evident. In spite of this, HCI aims to ensure that they
all get on with each other and communicate effectively. You need to apply what you know about
humans and machines, and communicate with possible users during the design process, to achieve a
functional framework. The schedule and the budget are critical in real systems, and it is necessary to
find a balance between what would be ideal for the users and what is realistic in practice.

The main purpose of the report

The report aims to highlight the content of smart technology applications and through that will
design a smart device support for the phone. In addition, will study how to design interaction to
understand human psychology then find out how to solve problems and discuss solutions
between devices with Smart gym equipment.

II. Background requirement

Currently, the social development and the higher the demand from users. In order to have good
health and work effectively, I will take time to come up with solutions for users. Basic brief I
have been tasked with creating new smart exercise equipment to support workout users. It
consists of a large wall-mounted display (Main: device A) whose content must be controlled by
a mobile app (app B). Users can practice through exercises and view the exercises and view
specific parameters. And it allows the user to join either pre-recorded classes or live classes.

From requirement, we have specific functions:

 Smart Screen (A device)

 User can see detail exercises, trainer.
 User can choose the exercises and perform the workout based on screen.
 User can join either pre-recorded classes or live classes.
 User can see personal information and change information.
 User can collect training data and view process.
 Mobile(B app)
 User can sign in and sign up
 User can collect training data and view process.

Smart gym equipment

Smart gym equipment offers the ability to monitor, and even adjust your workout through the
use of some form of linked technology or paired equipment.
Smart gym devices include things like smaller smart gym devices, wearable fitness monitors,
and an increasing number of dedicated smart watches that carry some tracking features. Stay
active in your regular routine.

For example, when it comes to smart exercise equipment like a smart treadmill, turbocharger
or smart rowing machine, and some smart gym equipment can provide live compatibility. next
through their own software.

Figure 2. Smart Screen device

What Are Connected Devices?

Connected devices are physical objects which, via the Internet, can link to each other and other
systems. They range from conventional computer hardware, such as a laptop or desktop, to
common mobile devices, such as a smartphone or tablet, to an increasingly wide range of
artifacts and physical devices.

III. Literature review

1. Process and Interaction Design Frameworks
1.1. User-centered Design
 Figure 3.User-center Design

User-centered design is an iterative design process in which designers in each step of the design
process concentrate on the users and their needs. In User-centered design, design teams
include users during the design process to create highly functional and available products for
them through a combination of testing and design techniques.

Three main principles

There are three main principles of user centered design:

- Developers and designers should concentrate on users and activities at an early stage.
The developers and designers should specify, in this theory, who the users would be.
Through studying the habits of users and the characteristics of users and the cognitive
characteristics of users. This could be accomplished by watching users perform their
usual tasks, learning from those tasks, and then engaging users in the design process.
- Empirical calculation is the second principle. In this one, the responses and results of
expected users will be calculated in theory. Simulations and prototypes are then
produced and user performance and responses are documented and evaluated as users
use simulations and prototypes.
- Last but not least, iterative design is the third principle. Unit research will be applied
under this principle. Therefore, problems will be corrected as problems are discovered
and further checks will be generated for the outcomes of the corrections. For this
 purpose, growth and design are iterative. The process will be replicated as required
(including design, test, measurement and redesign).

1.2. Goal-directed Design

Figure 4.Goal-directed Design

Goal Directed Design is a user-centered approach created by Alan Cooper to solve

circumstances where a potential product's different users demonstrate a desire for different
things. Most circumstances, in short. Development teams will also take any user concept at face
value and create a framework that attempts to please everyone, but continues not to please
everyone.

The process

- Research is the first step. The first component is to interview stakeholders in this
process. The product team should, for this reason, have a clear view of the business
priorities and technical requirements. After that, prospective consumers should be
investigated. The product team will be able to understand priorities and other variables
through research with prospective customers.
- Modeling is the second step. One of the most important models is a compilation of
personas. Personas will assist in making design choices for the product team. In
addition, personality requires a range of goals and habits. By developing a template that
is based on a series of personas, the product team will address the needs of multiple
users.
- The third step is the requirement definition. Objectives, personas, personas in this
phase .Environments and attitudes would allow the product team to define the
requirements of the customer. The additional needs will be assessed as consumers use
the product in the future. It was possible to understand these needs as specifications.
There are also business priorities and limitations on the list of specifications.
- The fourth step is the framework. In this point, the users and specifications for the
design were decided by the product team. It was possible to build the basic structure for
 the product's attitudes, based on personas and specifications. It is important to explore
several solutions. It is necessary to define the concept of design structure and flow.
- Refinement is the fifth stage. The scope of the product should be clearly defined in this
phase. For this purpose, to refine the design, a project plan should be developed. The
best case is that the product team is able to explain how the goods look. In a first draft,
the product team can show as much detail as the product team can, so that the product
is checked by the experts. The product team will adjust the product before the item
becomes acceptable.
- Implementation support is the seventh step. Unexpected problems can occur in the
development process. For this purpose, the development needs of the design team or
stakeholders should be supported in this process.
1.3. Participatory Design
Participatory design (originally cooperative design, more also co-design) is a design approach
that aims to deliberately include all stakeholders in the design process to help ensure that the
outcome meets and is functional for their needs. Participatory design is an approach that
focuses on design processes and procedures and is not a type of design.

In several contexts and at different scales, participatory architecture has been used. This policy
has a political dimension of user control and democratization for others. For some, it is seen as
a way by designers to abrogate design accountability and creativity.
 Figure 5. Participatory design

1.4. Choose the framework

In conclusion, the design framework that I will use here will be User-centered design. Because
we focus on the users and their needs in each phase of the design process to create highly
usable and accessible products for them.

In order to be successful in a user-centered design , it is important to find as much knowledge

as possible. This helps to counteract the inherent inclination to build for ourselves (or our
stakeholders) rather than for our target audience.

Emphasis should be on "deeper" perspectives rather than on more superficial aspects

2. Cognitive Psychology
2.1. Cognition and Cognitive Psychology

Cognition
Based on (Jennifer Preece, Chapter 3, 3.2. What Is Cognition?, 2019) Cognition is a term that
refers to the mental processes involved in acquiring information and understanding. Thinking,
understanding, recalling, assessing, and problem-solving are these cognitive processes. These
are higher-level brain functions and include vocabulary, creativity, perception, and planning.

Figure 6. Cognition

Cognitive psychology

Cognitive psychology is human cognition's empirical inquiry, that is, all of our mental skills-
perceiving, learning, recalling, thought, reasoning, and understanding. Cognitive psychology
essentially explores how individuals learn knowledge or information and apply it. It is closely
connected to cognitive science, which is strongly interdisciplinary and inspired by artificial
intelligence, computer science, anthropology, philosophy, linguistics, genetics, physics and
neuroscience.
 2.2. Kind of Cognitive Psychology

Based on (Jennifer Preece, Chapter 3, 3.2. What Is Cognition?, 2019)

Perception: Those studying perception try to understand how we establish subjective

perceptions of the environment's proximal knowledge.

Attention: attention the issue of information overload in cognitive processing systems is

addressed by choosing such information for further processing or by handling resources applied
simultaneously to multiple information sources.

Learning: Learning strengthens the organism's reaction to the environment. Cognitive

psychologists study the processing of new knowledge and the situations in which it is learned.

Memory: One of the most evolved aspects of cognitive science is the study of the ability and
fragility of human memory. The study of memory focuses on how memories are obtained,
preserved, and restored.

Reading, Speaking, and Listening: Three modes of language processing, which have similar and
different properties, are reading, speaking, and listening. One similarity is that, regardless of the
mode in which it is expressed, the essence of sentences or phrases is the same.

Problem Solving, Planning, Reasoning, and Decision Making: Processes requiring analytical
cognition are problem solving, planning, reasoning , and decision making. They include thinking
about what to do, what the alternatives are, and what the implications of carrying out a given
action could be. Aware processes, discussion with others, and the use of different kinds of
objects are also involved.

3. Interaction Design theory

3.1. Type of Interaction

In terms of the interaction types that will underlie the user experience, another way to
conceptualize the design space is. In essence, these are the ways in which a individual interacts
with an application or product. We propose that there are four main types: instructing,
conversing, manipulating, and exploring.

3.1.1. Instructing

Based on (Jennifer Preece, Chapter 2, 2.5.2.Conversing, 2019) In this type of conceptual model,
by asking the system what to do, users can do tasks. Users may, for example, order the device
to perform such operations, such as sending a message, making a phone call, and so on. There
are so many ways to teach the method to consumers. By way of example, by pressing the
buttons or typing or using a voice, users can instruct the machine. For more detail, readers can
see the example below.

Figure 7.ATM by Instructing

In ATM machines, users only need to select the button to withdraw the amount to be
withdrawn.

3.1.2. Conversing

Based on (Jennifer Preece, Chapter 2, 2.5.2.Conversing, 2019) Conversing is created from the
principle of a person talking to a machine. Conversing is also used to find information and
address something with the device when users want to. There are several forms of dialog that
can be used by users to communicate with the device using speech. Users may, on the other
hand, type search queries into the search engine.
 Figure 8.Using Voice by conversing

In figure, this is a Google assistant tool to help get acquainted and guide. It helps in interaction
between users with the system

3.1.3. Manipulating and Navigating

Based on (Jennifer Preece, Chapter 2, 2.5.3.Manipulating, 2019) Through studying how users do
the same in real life, manipulating and navigating can be understood as the process of
communicating with objects and navigating through virtual spaces.

3.1.4. Exploring and Browsing

Based on (Jennifer Preece, Chapter 2, 2.5.4.Exploring, 2019) Exploring and Browsing dictates
that users should be able to explore and browse information across the system. Users should
be assisted by the product with efficient navigation and users can scan, browse and find
information.
 Figure 9.Search web by Exploring and Browsing

As figure above, we can search on the web browser to find information and display the
results for the user

IV. Design process

Figure 10.Design Process

1. Interaction Design research

1.1. Definition
Interaction design is an essential component of user experience (UX) design within the giant
umbrella. We will illustrate in this article what interaction design is, some useful interaction
design models, as well as define briefly what an interaction designer normally does.

1.2. 5 dimensions of interaction design

A helpful model for understanding what interaction design entails is the 5 dimensions of
interaction design.

Words should be meaningful and easy to understand, particularly those used in interactions,
including button labels. To overwhelm the user, they should communicate information to users,
but not too much data.

Figure 11. Word dimension in interaction design

Visual representations: This concerns graphical elements such as pictures, typography, and
icons with which users communicate. These usually complement the phrases used to convey
data to users.

Figure 12. Visual representation dimension in interaction design

Physical objects or space: What physical artifacts do users connect with the product through? A
laptop with a touchpad or a mouse ? Or a tablet, with fingers for the user ? And what kind of
physical space is the consumer doing it in? For example, when using the app on a mobile, is the
user standing in a crowded train, or sitting on a desk in the office browsing the website? All of
these influence the interaction between the consumer and the object.

Figure 13. Physical objects or space dimension in interaction design

Time: Although this dimension sounds a little abstract, it mainly refers to media (animation,
images, sounds) that shift over time. Motion and sounds play a key role in providing users'
experiences with visual and audio input. The amount of time a user spends interacting with the
product is also of concern: can users track their progress, or resume their interaction some time
later?

Figure 14. Time dimension in interaction design

Behavior: This involves a product's mechanism: how do users carry out website actions? How is
the product handled by users? In other words, this is how the interactions of a product are
described by the previous dimensions. It also involves the reactions of users and the product,
such as emotional responses or suggestions.
 Figure 15. Behavior dimension in interaction design

How cognitive psychology apply to coursework

Perception

Representations of information need to be designed to be perceptible and recognizable across

different media. Icons and other graphical representations should enable users to readily
distinguish their meaning. Bordering and spacing are effective visual ways of grouping
information that makes it easier to perceive and locate items.

Sounds should be audible and distinguishable so users understand what they represent.

Speech output should enable users to distinguish between the set of spoken words and also be
able to understand their meaning.

Text should be legible and distinguishable from the background (e.g. it is okay to use yellow text
on a black or blue background but not on a white or green background).

In my coursework, I have used it as buttons, icons representing each thing to help users
recognize (for example, the bell button is used to remind, the speaker button is used to turn on
the sound).

Memory

Memory involves recalling various kinds of knowledge that allow us to act appropriately. It is
very versatile, enabling us to do many things. For example, it allows us to recognize someone's
face, remember someone's name, recall when we last met them, and know what we said to
them last

In my coursework, I used it to store accounts and remember passwords, results from workouts.
It helps to remember personal information.
 Learning

Design interfaces that encourage exploration. Design interfaces that constrain and guide users
to select appropriate actions when initially learning.

Dynamically link concrete representations and abstract concepts to facilitate the learning of
complex material.

I used it as the opening page of the app it will guide the selection steps so the viewer can learn
and continue to explore.

Reading, Speaking and Listening

I have applied the above 3 elements to my coursework. In the workout information, people can
either read the news or watch the introductory video or listen depending on the wishes of each
person.

Attention

Make information salient when it needs attending to at a given stage of a task.

Use techniques like animated graphics, color, underlining, ordering of items, sequencing of
different information, and spacing of items to achieve this.

Avoid cluttering the interface with too much information. This especially applies to the use of
color, sound, and graphics: it is tempting to use lots, resulting in a mishmash of media that is
distracting and annoying rather than helping the user attend to relevant information.

Search engines and form fill-ins that have simple and clean interfaces are easier to use.

I used the moodboard to make-up the app, use the buttons and turn the pages uniquely to
make people look curious.

How interaction type apply to coursework

The Interaction type I apply to the coursework is instructing and conversing.

- Instructing: describes how users carry out their tasks by telling the system what to do.
Examples include providing a system with instructions for carrying out operations such
as telling the time, printing a file, and reminding the user of an appointment. Based on
 this model, adverse has designed a variety of products, including home entertainment
systems, consumer electronics, and computers. The figure below shows the Smart
screen is using the instructing method.

The icon, button,

toolbar to how to
move to different
page

Figure 16. Instructing in Smart screen

- Conversing: Conversing is a way of interacting where the machine acts like a human
partner rather than a computer that merely obeys the instructions of the user. It needs
almost no new skills to be learned and allows users, particularly novices, to interact
easily with the system. As Smart Screen device, allowing users to use the voice feature
to easily interact with others.
 Voice to
interaction with
class

Figure 17. Conversing in Smart screen

2. Conceptual Design
2.1. Conceptual Design

Based on (Jennifer Preece, Chapter 11, 11.3.Conceptual Design, 2019) Conceptual design is
concerned with transforming requirements into a conceptual model. It is important for
interaction design to design the conceptual model, but it can be difficult to understand the idea
of a conceptual model. One of the reasons for this is that conceptual models take several
different forms and a conclusive, thorough characterization of one can’t be given.

The model of an application which the designers want users to understand is a conceptual
model. Users create a model in their minds of how it operates by using the program and
perhaps reading its documentation. It is best if the model created in their minds by users is like
the one that the designers expected. If you build a simple conceptual model beforehand, that is
more likely.

2.2. Design Conceptual model

 Based on conceptual modeling theories, I designed a model diagram for the Gym smart
device so that when users look at it, they can understand the features and things that can
be related to the system or other metaphor for users to easily understand and use it.

Figure 18.Conceptual Model

In conclusion, there are some kinds of conceptual model were added together and they are
applied in the conceptual model.

- Instructing: users can interact with the device by buttons such as users can click on
“power” button to turn on/off the device or “volume” button to change sound.

- Conversing: users can interact with the device by talking to the device directly .

- Interface metaphors are also applied in the conceptual model, for example:

 Power icon – turn on/off the device.

 Volume icon – increase/ reduction volume.
 Microphone icon – interact with voice assistant.
3. Prototype
3.1. Definition

(Jennifer Preece, Chapter 11, 11.2.1 What Is a Prototype?, 2019)A prototype is a

fundamental experimental model of a potential solution used to evaluate or validate ideas,
 design assumptions and other aspects of its conceptualization easily and cheaply, so that
the concerned designer may make necessary refinements or possible changes in direction.

When sharing or reviewing concepts with stakeholders, prototypes are helpful; they are a
collaboration device between team members, and an important way for designers to test
concept ideas. Prototype building practice promotes contemplation in design and is
regarded as an important feature of design by designers from many disciplines.

Why people need prototypes?

In the early stages of discovery, design teams can quickly become fixated on the research
objects they have acquired, creating a prejudice against their ideas. You will expose
prejudices and biases that you have about your concepts by prototyping and then testing
those prototypes, and discover information about your customers that you can use to
refine your solutions or build new ones.
You may use prototyping as a form of testing even prior to other phases of Design
Thinking, allowing you to explore problem areas in interfaces, products or services, and
spot areas for improvement or innovation.
4. Storyboard and Wireframes
4.1. Storyboard

Storyboard

A storyboard is a visual depiction of a series of films and the action is broken down into
individual panels. It is a sequence of arranged sketches, with direction of the camera,
dialogue, or other related information. It maps out, shot by shot, how a video will unfold.

The figure below outlines the steps the user takes:

 Figure 19.Storyboard

Initial Hierarchy

This will establish the initial hierarchy. Readers could then see all the pages required and
the mobile application's key features and all smart health interface functionalities. We can
see figure below:
 Figure 20.Initial Hierarchy

4.2. Wireframes

In this section, I used the Axure application to draw wireframes. These figures below
demonstrate wireframes of the screens of the application and the description on what each
screen does.

Design wireframe for B application

User click Sign in
User click Sign up
button to connect
button to create
account
account

Figure 21.Welcome page

Enter the user's

account
information

User click Sign in

button to connect
application

Figure 22.Login page

Sign up for an
account

Click to Sign up

Figure 23.Sign up page

Dropdown

Click switch to
turn on/ off
Bluetooth Click to connect
Smart Screen

Figure 24.Device connect page

Design wireframe for A application

 Click Sound button
to increase Volume

Figure 25.Loading screen page

Click this picture

to next to Class
page

Click this picture

Click this picture to next to Class
to next to page
Exercise page

Toolbar

Figure 26.Home page

 Click start
button to see
workouts

Figure 27.Exercise page

Click each
workout user
want training

Figure 28.Workouts page

Click this button
to return Click to add
workouts page workouts in
farvourite

Click to watch
trailer workout Start workout
video

Figure 29.Information workout page

Click to skip
Exit workout workout

Click to Continue/
Pause workout

Figure 30.Training screen page

Click to return
home page

User click this

button to john
Class live

Figure 31.Classes page

Click this icon to

Return Class page turn on/ off micro
voice

Click to watch
Class live

Figure 32.Class live page

5. Low- fidelity prototype

Based on (Jennifer Preece, Chapter 11, 11.2.3. Low-fidenlity prototyping, 2019) Prototypes
with low fidelity are often paper-based and do not allow user interactions. They range from
a series of hand drawn mock-ups to printouts. In general, low-fidelity sketches are quicker
to make. Low-fidelity prototypes are helpful in enabling the early visualization of alternative
design concepts, which helps to generate imagination and change. An additional benefit to
this strategy is that users can feel more secure proposing improvements while using rough
sketches.

Design interface for B application

Figure 33.Low-fidelity prototypes- Sign in and sign up page

 Figure 34.Low-fidelity prototypes- Device connect page

Design interface for A application

Figure 35.Low-fidelity prototypes- Home page

Figure 36.Low-fidelity prototypes- Workout information page

Figure 37.Low-fidelity prototypes- Training page

 Figure 38.Low-fidelity prototypes- Class live page

This is link Paper Prototype and Axure application:

https://drive.google.com/drive/folders/1gk68JxhG8NCfv2J6ZllagN1GgVz6egxO?usp=sharing

6. High-fidelity prototype

Based on (Jennifer Preece, Interaction Design: beyond human-computer interaction, 2019)

Prototypes with high fidelity are often computer-based, and usually allow realistic user
interactions. High-fidelity designs take you to a true representation as similar as possible to
the user interface. High-fidelity prototypes are assumed to be much more effective in
capturing true human performance data ( e.g., time to complete a task) and showing actual
products to clients, management, and others.
Moodboard: A selection of assets and materials intended to convey a specific concept,
brand, or project's style, speech, direction, and language.

Figure 39.Moodboard

Design interface for B application

Figure 40.High fidelity prototype – Welcome page

Figure 41.High fidelity prototype – Login page

Figure 42.High fidelity prototype – Sign up page
 Figure 43.High fidelity prototype – Device connect page

Design interface for A application

Figure 44.High fidelity prototype – Loading screen page

Figure 45.High fidelity prototype – Home page

Figure 46.High fidelity prototype – Exercise page

Figure 47.High fidelity prototype – Workouts page

Figure 48.High fidelity prototype – Information workout page

Figure 49.High fidelity prototype – Training screen page

Figure 50.High fidelity prototype – Classes page

Figure 51.High fidelity prototype – Class live page

7. Physical Design

Figure 52. Physical Design

8. Requirement
8.1. User requirement

Project idea: I was charged with designing new smart fitness equipment to help users of the
workout. It consists of a wide wall-mounted monitor (main: device A) with a mobile app
(app B) controlling its content. Via exercises, users can practice and see the exercises and
view particular parameters. And it enables the user to engage in either pre-recorded or live
lessons.

Personas information:
Figure 53. Personas user 1
 Figure 54.Personas user 2

8.2. Method gathering data

8.2.1. Interview

Based on (Jennifer Preece, Chapter 7, 7.4.Interviews, 2019)It is possible to think of

interviews as a "conversation with a reason." The way the interview will be like an ordinary
conversation depends on the kind of interview methodology used. Four major forms of
interviews exist: open-ended, structured, semi-structured and focus group interviews.

Open-end interview: At one end of the continuum, open-ended interviews are about how
much impact the interviewer has on the interview process. They are exploratory and are
more like discussions about a specific subject; they also go into great detail.

Structured Interviews: The interviewer asks predetermined questions identical to those in

the questionnaire in structured interviews, and the same questions are used with each
respondent so that the study is consistent. The questions need to be brief and clearly
worded, and they are usually closed questions, meaning that they require a predetermined
list of alternatives to answer them.
 Semi-structured interviews: this interviews combine structured and unstructured interview
characteristics and use both closed and open questions. The interviewer has a basic script of
instructions so that each interviewee will address the same subjects. The interviewer starts
with pre-planned questions and then checks each interviewer for more details until no new
relevant data is available.

Focus Groups: The focus group is one type of group interview that is widely used in
marketing, political campaigning, and social science research.

7.1.2. Questionnaire

Based on (Jennifer Preece, Chapter 7, 7.5.Questionnaire, 2019) Questionnaires are a well-

established method for collecting demographic data and user views. They are similar to
interviews in that they can have closed or open questions, but they may be extended to a
wider number of participants in order to collect more data than would typically be available
in the interview sample.

7.1.3. Observation

Based on (Jennifer Preece, Chapter 7, 7.6.Observation, 2019) Observation at any point of

product production is a valuable technique for collecting data. Early in design, observation
allows designers to consider the meaning, roles, and priorities of the users. Observation
followed later in development.

Users can be specifically monitored by the investigator when they conduct their tasks, or
indirectly by means of activity logs that are subsequently analyzed. In the field, or in a
regulated environment, observation can also take place.

8. The chosen method for gathering data for this product

I choose two methods for gathering data my research: interview and questionnaire

Interview

I choose the interview form because it is most efficient for qualitative research:

They help me explain, understand and analyze the thoughts , actions, perceptions,
phenomena, etc. of research subjects.

Interview questions are typically open-ended questions so that in-depth knowledge is

gathered in the context of study.

Here is the interview board of the question I did:

Name Information Questionnaire Answers
Nguyen Duy Hung Business Analyst Question 1: Explain Fitness accessories
me are you proficient and workouts change
in the latest smart all the time, just like
fitness equipment? anything else in
technology. Personal
trainers are always
up-to - date with the
latest technologies
and items that you
can illustrate by
mentioning recent
developments in the
field.
Question 2: Suppose First of all, I need to
any client walks in know if he's doing
and says they want pre-gym exercises,
to start training, just need to know
what evaluations the health history or
would you begin some health
doing to determine program, and have to
their appropriate know the goal of
fitness program? going to the gym, so
I'm going to
determine the
program that's right
for him.
Tran Thanh Minh Trainer at Gym Question 3: Tell me Such cases rarely
what would you do if arise, as I am very
a client is injured careful and
during a workout at thoroughly direct
the Gym? clients as they use
gym equipment.
However, if anything
happens, I am
trained and
completely capable
of providing first aid
and calling an
ambulance if
necessary.
Question 4: How do I find your device
you think about very attractive from
Smart Gym color to device
 equipment? functionality. It
actually quite fully
supports the
practice. It is easy to
understand for
beginners and safe
for health.

Questionnaire

I chose the questionnaire approach because it offers a relatively inexpensive, fast and
effective way to collect large quantities of information from a large sample of individuals or
groups.

Data can be obtained very easily so there will be no need for the researcher to be present.

It avoids wasting other people's time and gets into question problems. And the questions
are not too difficult to answer. That's why I chose the questionnaire.

Question 1

Figure 55. Question 1

Question 2
 Figure 56.Question 2

Question 3

Figure 57.Question 3

Question 4

Figure 58.Question 4

Question 5
 Figure 59.Question 5

Question 6

Figure 60.Question 6

Question 7

Figure 61.Question 7

This is link Questionnaire form:

 https://docs.google.com/forms/d/e/1FAIpQLSckWG1DIakQtBgwxBqDlnhPAmWbwoLOe4jp
a-E83eAPkUW_kA/viewform?usp=sf_link

9. What kind of analyzing data

9.1. Quantitative

Based on (Jennifer Preece, Chapter 8, 8.2. Qualitative and Quantitative, 2019) In numbers
and graphs, quantitative analysis is suggested. It used to test hypotheses and conclusions or
to validate them. It is possible to use this form of research to evaluate general isable facts
about a topic.

Quantitative methods of data collection:

Surveys, questionnaire: List of closed or multiple choice questions (online, in person, or over
the phone) that are distributed to a sample.

Experiments: A condition in which variables are monitored and manipulated to establish

relationships between cause and effect.

Observations: Studying subjects in a natural situation in which it is difficult to monitor

variables.

9.2. Qualitative

Based on (Jennifer Preece, Chapter 8, 8.2. Qualitative and Quantitative, 2019) Qualitative
research is represented in phrases. It is used to define principles, ideas and experiences.
This research method allows you to collect in-depth insights on subjects that are not well
known.

Qualitative methods of data collection

Interviews: Asking respondents open-ended questions orally.

Focus groups: Debate on a subject between a group of people to gain views that can be
used for further study.

Ethnography: Engaging for an extended period of time in a group or association to study

culture and behavior closely.

Analysis of literature: survey of published works by other writers.

10. Data analysis

I choose questionnaire because it help me better understand, and explore research
subjects' opinions, behavior, experiences, phenomenon.

I will choose 30 people test product and ask them to run a questionnaire, including both
experienced and inexperienced people. In order to collect customer data and consult an
expert, I determine the purpose of the question that best suits the customer. Those
questions will involve research. Options such as multiple choice questions, questions that
use a rating scale, or a scoring scale will create different types of answers. I write questions
that are clearly expressed in the natural and familiar language that respondents completely
understand, giving them the basis on which they know the question. My questions are put
in Google form.

14

12

10

8 Sky blue
Sunny yellow
6
Purple

0
What is your favorite colors

Figure 62. Chart 1

Based on the chart we see that Sunny yellow is the most selected and Purple is the least
selected
 30

25

20

15 Yes
No
10

0
Have you ever used a smart device ?

Figure 63. Chart 2

Based on the chart above, the answer yes has 25 people choose to have used a lot, answer
No is 5 users have not used or used less. According to the feedbacks above, most people
have used and exposed a lot with Smart devices.

30

25

20

Good
15
Normal
Not good
10

0
So how do you experience using Gym smart device ?

Figure 64. Chart 3

As shown in the chart above, a good answer of 24 people choose is very good, a Normal
answer is 5, and the other few choose not well. So everyone tried it out and thought it was
great.

16.5

16

15.5

15
Group classes
14.5 Invidual training

14

13.5

13
Do you prefer group classes or individual training ?

Figure 65. Chart 4

Looking at the chart above, Group classes have 14 people choose, the rest choose individual
training, and the other few choose not well. From the chart it can be inferred that almost 2
functions of the application are very good and everyone all like.
 35

30

25

20
Understand
15 Not understand

10

0
Are the exercises difficult or difficult to understand for you ?

Figure 66. Chart 5

In chart 4, all answers were understand, showing that most people understand the
exercises and no one finds it difficult to practice.

35

30

25

20
Yes
15 No

10

0
Does Gym smart device really meet your needs?

Figure 67. Chart 6

As shown in the chart, they all choose yes. That means their exercise needs are important
and beneficial to them. Perhaps nowadays, everyone wants to be healthy.

Too bad
Bad
Rate Smart gym device by level
Normal
Good
Very good

0
5
10
15
20

Figure 68. Chart 7

Based on the final questionnaire chart of questionnaire, a very good answer has a very high
number of people with 16 votes. A good answer is 8 and normal is 6. No one has a bad
rating. So everyone thinks this application is really good and should be widely disseminated.

V. Evaluation
1. Introduction

Based on (Jennifer Preece, Chapter 13, 13.1.Introduction, 2019) In the context of software
development, user experience and interface design reflect an approach that places the user
at the core of the process rather than the framework. From the outset of the design
process, called user-centered design, integrates user interests and advocacy and governs
the user's needs in all design decisions.

The main purpose of the study: Find out how participants interacted with the Smart Screen
devices. The findings were intended to help developers decide whether unique Screen
Smart applications need to be created.

Usability means that Screen Smart guarantees that it is easy to read, efficient to use and
enjoyable from the user's point of view. This involves optimizing people's experience with
interactive products so that they can carry out their work at work, at school and in their
everyday lives. The Smart Screen is built for the general public such that the selection of
users is wide in terms of age and digital technology experience.

Based on (Jennifer Preece, Chapter 13, 13.2.The Why,What,Where and When of Evaluation,
2019)

 What to evaluation

Whether to test varies from low-tech prototypes to complete systems, from the
function of the individual screen to the entire workflow, from aesthetic design to safety
features.

 Why evaluation

User experience includes all facets of the engagement of the user with the product.
Nowadays consumers demand a lot more than just a functional system — they're still
looking for a more pleasurable and interactive product experience. Simplicity and
elegance are valued so that the product is a joy to own and use.

We should be aware, after doing this exercise, that different types of users can use the
same software in different ways. Therefore, in our evaluations, it is necessary to include
a variety of different types of users.

 Where to evaluation

Having children play in a natural environment will show when the kids get bored and
avoid playing with the toy, unlike a laboratory study. The kids are told what to do in a
laboratory study, so the UX researchers can’t easily see how the kids naturally interact
with the toy and when they get bored.

 When to evaluation

If these specifications have been developed, initial drawings, a storyboard, a set of

screens, or a prototype of the design ideas are produced using them. They are then
checked to see if the designers have correctly interpreted and properly embodied the
criteria of the consumers in their designs. According to the assessment input, the
designs will be updated and new prototypes produced and subsequently assessed.

They are called formative checks as evaluations are carried out during design to ensure
that the product continues to meet the needs of users. Formative reviews cover a wide
range of design methods, from the production of early sketches and prototypes to the
tweaking and implementation of a nearly completed design.
2. Evaluation type

We categorize evaluations into three broad categories. These are:

Controlled settings involving users (examples are labs and living laboratories): In order to
test theories and quantify or observe those behaviors, users' actions are monitored.
Usability testing and tests are the primary approaches.

Natural settings involving users (examples are online forums and goods used in public
places): to determine how the product will be used in the real world, there is little or no
influence over the actions of consumers. Field experiments are the primary process
used.

Any settings not involving users: In order to recognize the most evident usability
concerns, consultants and researchers critique, predict, and model aspects of the
interface. Inspections, heuristics, walkthroughs, templates, and analytics are part of the
spectrum of approaches.

- In this study, we choose Any settings not involving users

Inspection approaches are widely used to forecast user behavior and to detect usability
issues, based on knowledge of usability, users’ behavior, the contexts in which the system
will be used, and the kinds of activities that users undertake.

In these situations, other people, typically referred to as experts, can provide input. There
are people who know both the design of interactions and the expectations and the normal
behavior of users. Heuristic evaluations and walkthroughs include inspection methods for
interaction design, in which experts analyze the interface of an interactive product, often
role-playing typical users, and suggest issues that users will actually have while interacting
with it. One of the attractions of these strategies is that it is possible to use them at any
stage of a design project. To complement user research, they can also be used.

Definition

Based on (Jennifer Preece, Chapter 15, 15.2.1.Heuristic Evaluation, 2019) Heuristic

evaluation is a usability inspection tool developed by Nielsen and his colleagues and others
and later adapted by other researchers to test particular types of systems. In heuristic
evaluation, experts determine whether user-interface components, such as dialog boxes,
menus, navigation structure, online support, and so on, adhere to tried and tested
principles, guided by a set of usability principles known as heuristics. These heuristics
closely mimic the concepts of high-level design. There usability heuristics is listed below:
 Figure 69.10 Usability Heuristics

Reason choose Heuristics evaluation

Heuristics may allow evaluators to concentrate their attention on such issues.

Heuristic assessment does not answer legal and functional issues / problems associated
with inspection approaches affecting human users.

Evaluating projects using a collection of heuristics will help to define usability issues with
individual elements and how they affect the overall user experience.

How implement it in this study

Visibility of System Status: The framework should always keep users up to date, through
sufficient feedback and within a fair period of time, about what is going on.

In this, users should know what is going on inside the product and status. The product will
give feedbacks to users.
 The mobile application
will show the progress
while the device is
taking an ECG

The mobile
application will
show the progress
during the day

Figure 70.Visibility of System Status in mobile

Match Between System and the Real World: Instead of system-oriented jargon, The device
should speak the language of the user, with vocabulary, phrases and concepts familiar to
the user. It should obey conventions in the real world, allowing data appear in a natural and
logical order.
 Users can interact
with the
classroom
through the voice
assistant

Figure 71.Match Between System and the Real World in Smart Screen

User Control and Freedom: In order to leave the unwelcome state without the need for an
extended dialog, users often select device functions by mistake and would need a clearly
defined emergency exit. Undo and redo can help the framework.
 There is no
restriction in the
mobile
application, users
just need to
interact with one
screen and
navigate by using
bottom navigation

Figure 72.User Control and Freedom in Smart Screen

Consistency and Standards: Users do not have to worry if the same thing is implied by
various words, circumstances, or acts. Platform conventions should be adopted by the
framework.
 The toolbar, the
bottom navigation,
the icons, buttons
are the same in the
page.

Figure 73.Consistency and Standards in Smart Screen

Error Prevention: The system should integrate careful design rather than just good error
messages that prevent a problem from happening in the first place. Before committing to
the action, either delete error-prone conditions or search for them and provide users with a
option of confirmation.
 A warning panel will
appear if the user did
not enter account
information.

Figure 74.Error Prevention in mobile

Recognition Rather Than Recall: Make objects, behaviors, and options available to
minimize the memory load of the user. Knowledge from one section of the dialog to
another does not have to be recalled by the user. Instructions for using the system should,
whenever necessary, be available or easy to retrieve.
 Training progress
information and
exercises will appear
on the phone when
the workout is
complete.

Figure 75.Recognition Rather Than Recall in mobile

Flexibility and Efficiency of Use: Unseen to the inexperienced consumer, accelerators will
also speed up the engagement of the skilled user so that both new and seasoned users can
be catered to by the machine. Enable regular acts to be customized by users.
 Users can interact with
the classroom through
the voice assistant

Figure 76.Flexibility and Efficiency of Use in Smart Screen

Aesthetic and Minimalist Design: Dialogs shouldn’t contain data that is meaningless or
occasionally needed. Each additional information unit in a dialog competes with the related
information units and decreases their relative visibility.
 The mobile
application will show
some relevant
information such as
basic personal
information

Figure 77.Aesthetic and Minimalist Design in Smart Screen

Help Users Recognize, Diagnose, and Recover from Errors: Error messages should be
addressed in simple language (not in codes), clearly defined, and constructively suggested.

A warning panel
will appear help
users recognize
 Figure 78.Help Users Recognize, Diagnose, and Recover from Errors in mobile

Help and Documentation: While it is best if the device can be used without any
documentation, support and documentation will need to be provided. Such data should be
easy to scan for, concentrate on the mission of the user, list specific steps to be taken, and
not be too large.

If User don’t know

the product will
provide help page or
documentation to
help users.

Figure 79.Help and Documentation in Smart Screen

VI. Conclusion

Smart gym device research has been done. In the framework selection section, we have
studied very carefully about User Centered Design, Goal-oriented Design, Participatory
Design. Finally, we conclude to choose User Centered Design to apply in the research. And
point out the perceptions and the types of consciousness. Analyze different types of
interactions and give specific examples. Create Conceptual model and Storyboard design.
Then, drawing low-fidelity prototyping and high-fidelity prototyping for each device through
Axure application. And finally out of the data collection methods, I chose 2 methods used in
my research: interview and questionnaire. Do a detailed analysis through qualitative and
quantitative analysis from user responses, and evaluation through evaluation. In the future,
applications can develop and create more diverse and more functional integration.
Bibliography
Carroll, J. M. (n.d.). What is Human-Computer Interaction (HCI)? https://www.interaction-
design.org/literature/topics/human-computer-interaction.

Jennifer Preece, H. S. (2019). Chapter 11, 11.2.1 What Is a Prototype? In H. S. Jennifer Preece,
Interaction Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 11, 11.2.3. Low-fidenlity prototyping. In I. D.-c. interaction,
Jennifer Preece, Helen Sharp, Yvonne Rogers. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 11, 11.3.Conceptual Design. In H. S. Jennifer Preece, Interaction
Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 13, 13.1.Introduction. In H. S. Jennifer Preece, Interaction Design:
beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 13, 13.2.The Why,What,Where and When of Evaluation. In H. S.
Jennifer Preece, Interaction Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 15, 15.2.1.Heuristic Evaluation. In H. S. Jennifer Preece, Interaction
Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 2, 2.5.2.Conversing. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 2, 2.5.2.Conversing. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 2, 2.5.3.Manipulating. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 2, 2.5.4.Exploring. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 3, 3.2. What Is Cognition? In H. S. Jennifer Preece, Interaction
Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 3, 3.2. What Is Cognition? In H. S. Jennifer Preece, Interaction
Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 7, 7.4.Interviews. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 7, 7.5.Questionnaire. In H. S. Jennifer Preece, Interaction Design:

beyond human-computer interaction. John Wiley & Sons.
Jennifer Preece, H. S. (2019). Chapter 7, 7.6.Observation. In H. S. Jennifer Preece, Interaction Design:
beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Chapter 8, 8.2. Qualitative and Quantitative. In H. S. Jennifer Preece,
Interaction Design: beyond human-computer interaction. John Wiley & Sons.

Jennifer Preece, H. S. (2019). Interaction Design: beyond human-computer interaction. In H. S. Jennifer

Preece, Interaction Design: beyond human-computer interaction. John Wiley & Sons.