Coursework Title : Electrocardiogram (ECG)

COMP1649 : Interaction Design

Center : KMD Institute (Myanmar)
Date :8th April 2019

P a g e 1 | 29
Table of Content
1. Introduction ------------------------------------------------------------------------ Page 3
2. Principle ---------------------------------------------------------------------------- Page 3
2.1 Norman Principles ------------------------------------------------ Page 3
2.2 Nielsen’s Usability Heuristics ----------------------------------- Page 3
2.3 Analysis Principle ------------------------------------------------- Page 4 to 7
3. Target Device ---------------------------------------------------------------------- Page 8
4. Target User ------------------------------------------------------------------------- Page 8
5. Current Issue ------------------------------------------------------------------------ Page 9
5.1 Fat finger ---------------------------------------------------------- Page 9
5.2 Hamburger Menu Issue ------------------------------------------ Page 9, 10
5.3 Customize keyboard issue --------------------------------------- Page 10
5.4 Hypertext issue in mobile ---------------------------------------- Page10
5.5 Hidden Menu ------------------------------------------------------ Page 11
5.6 Visibility Issue Data for order ----------------------------------- Page11
6. Mobile Guideline ------------------------------------------------------------------- Page12
6.1 Cut out the Clutter ------------------------------------------------ Page 13
6.2 Make Navigation Self-Evident ---------------------------------- Page 13
6.3 Touch Screen Target Size ---------------------------------------- Page 13
6.4 Make Navigation Intuitive and contextual --------------------- Page 14
7. Framework --------------------------------------------------------------------------- Page 14
7.1 User Centered Design -------------------------------------------- Page 14,15
7.2 Goal-directed design --------------------------------------------- Page 15,16
7.3 Choosing Framework and Justification ------------------------ Page 16
8. Cognitive Psychology -------------------------------------------------------------- Page 17
9. Low-fidelity Prototype ------------------------------------------------------------- Page 18
10. Questionnaire ------------------------------------------------------------------------ Page 19 to 21
11. High-fidelity Prototype ------------------------------------------------------------- Page 21 to 24
12. Applying Principle in prototype --------------------------------------------------- Page 24
13. Evaluation ----------------------------------------------------------------------------- Page 25
14. Conclusion----------------------------------------------------------------------------- Page 26
14.1 Future Plan----------------------------------------------------------- Page 26
15. References------------------------------------------------------------------------------ Page 26

P a g e 2 | 29
 Introduction
The name of my system is ECG system that perform to track personal healthcare and
record the electrical signals of heart. ECG is for detecting of heart problem and monitor in many
ways of heart’s status. It is noninvasive, painless test and result quickly. User need to attach
sensors (electrodes) on their chest and sometimes their limbs during ECG. There are many kinds
of heart measurement and result in this ECG system such as Heart rate, Heart rhythm, Heart
attack and etc. Heart rate is checking by user pulse that to be measured for heart rate.
This ECG system can detect some following-
 Cholesterol clogging up user heart blood
 A heart attack in the past
 Abnormal heart rhythms
 Heart palpitations
 Rapid pulse
 Chest pain

Principles
Norman Principles
Feedback: It is essential user must know clearly when receiving information from system.
Feedback will be different depending on their action and user can know what action they have
done from feedback.
Consistency: To be consistency, we need to use the same color and layout in every page and all
the font size will be the same for content. So, user will be familiar what page they go and see
information and all of page are normally the same and consistence design.
Affordance: Affordance means automatically knowing how to use it and what they have to do.
If your design and interface is giving affordance for customer, surely you will get satisfaction
user needs.

Nielsen’s Usability Heuristics

Visibility of system status: Visibility is vital for website and application to be efficiency. For
user, the system needs easily to know visibility when they see design without confusing and
misunderstanding. Besides, also showing to inform from feedback that what is going on and
where they are.
Recognition rather than recall: Recalling is important for customer to reach their desire
completely within using system. So, developer should consider how to recall their memory
without overthinking and minimize the user’s memory so that they don’t need to remember all
detail when searching something and give recognizable information that can recall their memory.

P a g e 3 | 29
User control and freedom: Most of the users are confuse and nervous when they do mistake
and willing to leave the unwanted state. So as designer, need to reduce as much as possible for
happening doing mistake from user and support undo and redo.
Flexibility and efficiency of use: It is necessary your design must be predictable for user when
they see and use your application to cater both of experienced users and inexperienced users. For
example, initially your home page should the list group of categories that user easy to know and
familiar with your design.
Help and documentation: There has different kind of user who has user experience or not
before and you need to consider all level of user and put for help documentation if they need in
application. This can be more effective to be done completely from starting to ending processing
for user.

Analysis Principle
(1) Affordance

User automatically
know to search data.

P a g e 4 | 29
 (2) Feedback

This ECG site is giving

feedback that Email field
need to input when we
register.

Source from: https://www.ecgmc.com

(3) Consistency

This ECG page uses all

the color and layout
design in every page

Source from: https://www.ecgmc.com

P a g e 5 | 29
 (4) Visibility of system status

According to icon, we can

know easily where we are and
what page we click.

Source from: https://www.ecgmc.com

(5) Recognition rather than recall

This site recall data that user

doesn’t need to think too
much

Source from: https://www.heart.org/

P a g e 6 | 29
(6) User control and freedom

If you accidently click unwanted

page, you can easily see and click
close icon to come back the
previous page.

Source from: https://www.heart.org/

(7) Flexibility and efficiency of use

This site categories group of data

that to be flexible and efficiency
for user

Source from: https://www.en.my.ekg.com

(8) Help and documentation

P a g e 7 | 29
 My EKG supports the user
manual for user how to read and
report an ECG system.

Source from: https://www.en.my.ekg.com

Target Device
According to research, Demystify Asia showed that the percentage of mobile use in Asia as
below.
Country Android OS IOS
China 71.4% 27.1%
South Korea 71.4% 28.4%
Vietnam 65% 35%
Singapore 58% 42%
Thailand 74% 26%
Nowadays, most of Asia countries are using android device rather than IOS. So, mainly
target of this system is for android device to show the result of ECG and that connect with smart
watch by sensor. For processing steps, firstly user has to scan and measure their heart situation
by smart object and all the result and detail showing in smart phone and mobile device (android).
So, customers can know easily their result themselves.

Target User

P a g e 8 | 29
https://sueokaxrenzosiji.blogspot.com/2018/07/heart-attack-facts-graphs.html?m=1
According to research, nowadays age group of 75 years and above are the most common
heart attack with 46.1% of adults for male and 32.2% for female. The second highest occurring
heart attack of age group is between 65 to 74 years (female=21.4%, male=3.4) and the 3rd age of
group is 45 to 64 years and the last group is 18 to 44 respectively.
For target user, generally any age including (kids) can use our system and we plan to use this
ECG for every kind of age group. But especially the main target has four group of age that we
divided such as 18 to 44 years, 45 to 64 years, 65 to 74 and 75 years and above. The system
intends to both of Male and Female for gender throughout Asia. Basically, default language will
be English.

Current Issue
(1) Fat finger
In most of mobile, one of the greatest issues of UI design is fat finger and that is
annoying and despondent at the moment when using for user. In my design, I will consider this
kind of issue and make suitable size of finger according to following Guide line. Moreover, I will
define pixel width that user can easy to click without emphasizing while designing.

https://www.probeseven.com/blog/mobile-uiux-design-considerations-outdoors-visually-
challenged/

P a g e 9 | 29
(2) Hamburger Menu Issue

In this design, menu is hidden on screen and if we want to appear menu, swipe
horizontal on the left side. This design seems good for develop because they can add more than
data on limited screen. But for customer side, that menu is discoverable and restricted customer
view may be who don’t know exactly how to do to appear that menu and that is becoming
disadvantage of issue for design. In my design, I will avoid that Hamburger menu and set up
menu on the top where user can easily to see.

(3) Customize keyboard issue

https://www.smashingmahazine.com/2018/02/comprehensive-guide-to-mobile-app-design/

P a g e 10 | 29
 It is necessary to display relative keyboard according to giving information. For
example, need to display numeric keyboard when we asking phone number and for
usability, we need to consider customer’s expectation and it must be easy to understand
and comfortable and familiar when they using our feature completely. For solution in my
design, I will customize keyboard and considerable the best way to display on screen to
be effective interface design.

(4) Hypertext issue in mobile

This site is one of the ECG websites and they don’t use the link as button in their
system. In mobile, user is hard to click the link because the mobile screen is too small
and it is difficult to capture link. So, in my design I will apply as button for mobile
interface that easy to click for user.

User is difficult to
point on that.

Source from: https://www.gerodontology.eu/apply-for/

(5) Hidden Menu

This site doesn’t have menu and user is difficult to come back home page and take
time to go back click twice again and again. So, user will not be satisfied on that. In my
design, I will show ostentatious for menu or go back arrow that user is easy to go back
previous stage.

P a g e 11 | 29
 Source from: https://ecg.utah.edu/img-ind
(6) Visibility Issue Data for order
This site put search box in menu and user is difficult to find where search box for
miss ordering place. Most of search box should put at the top of the home page that user
can easily to find it.

User is difficult to
find search.

Source from: http://www.ecgsa.com/projects

Mobile Guideline
(1) Cut out the Clutter
It is necessary to show relevant information (signal) to be good UI design and
avoiding from unnecessary information on screen. Being clutter interface can overload
data that user annoying when they see design and needing to reduce: irrelevant added
button, image, icon happens the screen more complicated as below figure 1. Clutter is
more terrible in mobile rather than desktop because it has no free screen and smaller
limited space.
P a g e 12 | 29
 Figure (1)
https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/

(2) Make Navigation Self-Evident

There have three rules of navigation as below
 Don’t hide it: avoid doing hidden navigation in design such as gesture-driven
because mostly users are hard to spend their time too much when finding
navigation.
 Consistent Navigation: most of mobile developers are hiding menu when
creating their design. This is one of mistake concept to be usability and
accessibility design for user and avoid that mistake as much as possible when
developing design and it can confuse and disorient your users.
 Communicate the current location: lack of indicating current location is the
most problems in many mobile applications. Mainly user don’t know “Where
am I?” and if your design can solve and answer this question, user is surely to
navigate your design successfully.

Figure (2)
https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/

(3) Touch Screen Target Size

It is essential to be effective touch screen for interface that must be big enough to
capture actions. But how big we make within small limitation space for mobile? It should be
considerable the spacing between each button and too close each button makes undesired
actions leading to frustration. For solution, I will apply below guideline to be comfortable for
user when they touch button on screen.
P a g e 13 | 29
 I Phone Human Interface Guideline suggested that “the minimum target size must
be 44pixels wide x44 pixels tall “and also “Microsoft suggested that it should be 9mm/34px
within the minimum of 7mm/26px for window phone UI”.

http://uxbert.com/10-mobile-ux-design-principles/#.W7YvRegzbIV

(4) Make Navigation Intuitive and contextual

Being intuition interface design is key for success design and user is clear to navigate
through your app by completing all tasks without needing any explanations. In my design, I will
put the contextual on header for navigation bar that user can know easily where they are and
what they do.

http://uxbert.com/10-mobile-ux-design-principles/#.W7YvRegzbIV

Framework
User Centered Design
UCD has iterative design process and mainly target to user needs and requirement when
operating process. So, create to be highly usable and accessible products and users is
involving in each of design and process.

P a g e 14 | 29
 Generally, there has four distinct phases for iteration process of UCD. Firstly, designer
attempt to be understandable context that user use in system that who will use the system and
what for they will use and they will use under what condition.
As second, identify and specify user’s requirement. Analysis what user needs and
collect information that to be successful product outcome and to meet with business
requirement or users’ goals.
In design phase, development team create the design solution. Generally, all of process
will be done in this stage from raw concept to a complete design.
Then, design team proceed and evaluate product outcomes that actually match with
user’s requirement or against user’s context.
We will build all the previous steps that we planed and develop in the implementation
phase including our business model, idea and reliable solutions.
In Deployment phase, assess the team’s goals and outcome from system meet or not.
Then, decide to launch for product deployment according to system outcomes.
Moreover, UCD considers user’s side of their experience. Designers tend to be
explicit design that user must be clear and easy to understand when they look their interface
design. The target of process is to capture and address the whole of user experience and allow to
involve user themselves. To be a good design team must be organized with professionals’ people
such as ethnographers, psychologists, software and hardware engineers and domain experts.

https://producttribe.com/ux-design/user-centered-design-guide

Goal-directed design
Copper created goal-directed design and this type of interaction design methodology is mainly to
analysis goals and identify the behaviors of users. To achieve business goals and directly
translate into design.
There are six steps of process in goal-directed design.

P a g e 15 | 29
 (1) Research
This is essential to collect qualitative data from user who is potential as key
stakeholder and studied at their field and interview with them to get their requirement.
Doing field observation and user interview is to emerge set of usage patterns. These
patterns will support goals and specify the desire of outcomes when using product. In
research including Interviews, contextual inquiry, ethnographic research, focus groups,
usability tests, competitor products and literature review.

(2) Modelling
Two parts of stage in modelling stage and in part one it needs to define domain
model according to research stage on the workflow patterns. In domain model, including
information flow and workflow diagram. Then, the second part is to define user model
that is detailed and representing different group of behavior pattern, goals and identifiable
groups of users.

(3) Requirements Definition

In this stage three is instrumental and focus on context scenarios and need to
consider business goals, technical considerations and brand guidelines. Design methods
created by teams in requirements definition phase and that is to provide necessarily
connection between user and other models of framework design. This phase focus on
scenarios not on user tasks and specify user personas.

(4) Framework Definition

The team operate the concept of overall product and create prototype in this phase
to synthesize interaction framework by employing critical methodological tools.

(5) Detailed Design

Analysis detailed design form and defined behavior specification for interface
according to principles, patterns and practices.

(6) Implementation Support

In this implementation support phase, starting to write coding that based on
specifications.

Choosing Framework and justification

I will apply User Centered Design in my design because that allow user involvement.
User involvement is important during development. If there has no involving users, it can’t be
exactly to get their expectation and goals and finally product outcomes and user needs may be
wrong and fallible. Using User Centered Design, that can defend being badly defined

P a g e 16 | 29
requirements initially at the begin of project and less poor communication among customers.
Moreover, reducing conflict and misunderstanding between developer and stakeholders.

Cognitive Psychology
Cognitive Psychology is study of behavior things and mental processes that is happening
in our mind and there are many kinds of cognition such as thinking, learning, reading and etc.
cognitive is one of the branches from psychology and mainly learning how people acquire, act
and react that coming from their brain.
Cognition has described in terms of specific processes as below-
 Attention
 Perception
 Memory
 Learning
 Language
All of these above facts are connected and interdependent each other. For example, if you read a
book, you may need to concentrate the content first and memorize that in your brain to be
remember.

Attention
Attention becomes when focusing on information that relevant what we are doing that
process. In interaction design book by John Wiley & Sons Ltd, published 2011 in page 67 with
the title of WHAT IS COGNITION? & subtitle with Attention described that “the process of
selecting things to concentrate on, at a point in time, from the rage of possibilities available.
Attention involves our auditory and visual senses”. To get attention easily, we need to have
clear goals and salient environment where we absorb information for attention.

Perception
Perception concerns how to acquire information to inform in environment that come from
sense organ of eyes, ears, fingers and transformed into objects, events, sounds and tastes
(Roth,1986). It is involving some cognitive process such as memory and attention and vision is
essential sense for sighted and followed by hearing and touch. To be respect interaction design,
your design must be readily perceived in their manner when user see your design. For example,
although a website is good design for interaction, but it is not enough and needing user to
recognize and revisit your site again.

Memory

P a g e 17 | 29
 Memory is recalling that previously we knew various kinds of knowledge and that allow
us to act appropriately. It is difficult to remember all of everything that we see, hear, taste, smell
or touch because that completely overloaded in our mind. There have two type of memories such
as short-term memory (know as working memory) and long-term memory.

Learning
Learning is the purpose to understand how to use system and to know what is the mainly
target topic in system. If you want to do learning, you may need to consider (i) how to use and
(ii) to understand given topic. Carroll (1990).

Language
Language is one of the important things in design that interpreted to know user as symbols like
sounds, gestures. Using language should not be hard to know for user and it must be meaningful
for people who used this language.

Low-fidelity prototype

P a g e 18 | 29
Comparing 3C
For consistent, all the color, font and layout design will be the same for interface. For
continuous, I will show the step by step in detail and user can know easily how to process.

Questionnaire
P a g e 19 | 29
 Questionnaire is important to effective and efficiency in your design. It can get data from
user what is their desire and what they want to. I asked these six questions to 12 users by using
google form.
(1) What is your favorite color?
Yellow is the most choosing color and highest 8% rather than others colors. So
that I will apply this color in my application.

yellow yellow

Figure (1) Figure (2)

(2) Do you know how to use ECG application?

60% of users don’t know how to use ECG so that I will be added user manual to know them.

Figure (1) Figure (2)

(3) What you think about this ECG low prototype?

Most of user like my low prototype design according to figure (2) so that I will develop this
low prototype without any changes.

P a g e 20 | 29
 Figure (1) Figure (2)

(4) Do you need to share as PDF for ECG result?

81.8% of user need to share PDF so that I will add to share PDF file that is supporting
when they go to doctor and discus for result.

Figure (1) Figure (2)

(5) What kind of devices you use the most?
90.9 of the user is using mobile so that I will not draw desktop interface for the next height
level prototype.

Figure (1) Figure (2)

P a g e 21 | 29
(6) Do you need user manual?
According to figure (2), 81.8% of users need user manual and I will add user manual for user in
my application.

Figure (1) Figure (2)

High-fidelity prototype & applying above principle in my design

Home Page
Firstly, there will show home page as below and user I give information that general
knowledge that user needs to know. I apply the principle and make a list of categories that user
can be familiar with application to be flexibility and efficiency of use (Norman Principle).
There has their type of info: such as ECG HR (Heart Rate), ECG BP (Blood Pressure) and ECG
HRV (Heart Rate variability) Analysis.

Give to user general

knowledge to know

Make a list that to be

familiar with app

P a g e 22 | 29
Measurement
If you want to measure your heart rate, you can click Measurement button and there will
appear as figure (1). So, User can click start Measuring button and instantaneous put their figure
on smart watch and it will scan your heart rate and there will be appearing on mobile screen as
rhythm (Figure 2). Moreover, I will apply one of Nielsen’s principle (help and documentation)
in my design. Generally, user maybe he doesn’t know how to use and screen for measuring heart
rate and I will support help as symbol (‽) at the top of the screen and user can learn the user
manual for instruction. After measuring, the system will output the detail measurement as a box.
For visibility of system status, I showed the currently page name at the top of the scree so that
user can easily know where they are and what is going on the next.

The application
supports user manual

User can know where

page they are

Figure (1) Figure (2)

Detail Result after

measurement

ECG HRV Analysis

This application will record all the history of measurement and saved by date, time. User
can see their record again and user can choose two option of reports in ECG Report such as
Detail Report and Health Report. Detail report is showing the number of percentages generally.
Health Report can share as pdf file that including user name, age, sex, height and weight and also

P a g e 23 | 29
users can bring that data when they go and see doctor for discussion. If user want to shar pdf file
and after that, the system will give feedback successfully or not and I apply Feedback principle
in this interface.
According to User Control and freedom (Nielsen’s principle), I apply this principle in
my interface design and allowing user to control by themselves to fine their record by choosing
date. For affordance (Norman), I will put (up arrow) icon that user can easily know how to use
it. To be consistency, I use the same colors, white space, fonts, fonts size and layout for every
page. For Recognition rather than recall, I showed the data with time such as (12:39:01) and it
can recall their mind which data is relevant with them predictable according to Time.

User recall User can find their

their data by record by date
showing time

All the
user’s
record

User can
easily know
to click up Figure (1) Figure (2)

P a g e 24 | 29
 Health
Detail
Report
Report
Page
Page

Figure (3) Figure (4)

System give
feedback to user

Figure (3): After clicking share pdf file button, there will appear this box.

Applying Cognitive Psychology in my design

(1) Attention

The system wants

user to focus on the
main three categories

P a g e 25 | 29
 (2) Learning

User can learn how

to measure ECG in

(3) Memory

To choose correctly their data by

showing time that is to memorize
their brain.

Evaluation
my application, I apply all the principle in my design that user can easily use and
familiar during application. Using yellow color is to be cool user’s eyes and all the font style and
size is the same in every page and showing data info: at the top of the page to know where they
are and what they done. Moreover, I added date and time box in ECG report because smart-
watch will use more than one user and it is the best way to find their record by date and time
among all records and that is comfortable and familiar for user.

P a g e 26 | 29
Conclusion
I drew the ECG system for every kind of people and defined target user and device for
development initially. I considered what user needs, their expectation and experiences that apply
in application design to be suitable form for user when using. So, firstly I analyzed currently
mobile issue that happening nowadays and I avoided as much as possible I could. I choose
suitable framework for my design and following process according to framework and applied
principle guide line and cognitive psychology in application. Principles and guideline are so
essential and all of these are supporting to be effective and efficiency for design interface.
For future plan, I don’t have activity categories in my application that will be including
sleep, measure walking km, etc. For sleep and walking, I will measure average of result by daily,
weekly and monthly. So, I have a chance to maintain my application in future, I will be added
that feature to be more effective and comprehensive application.

References
 ECG app and irregular heart rhythm notification today on Apple Watch (2018).
[ONLINE]
Available at: https://www.apple.com/newsroom/2018/12/ecg-app-and-irregular-heart-
rhythm-notification-available-today-on-apple-watch/
[Accessed 04 April.2019]

 Nick Babich (2018). A Comprehensive Guide to Mobile App Design [ONLINE]

Available at: http://www.smashingmagazine.com/2018/02/comprehensive-guide-to-
mobile-app-design/
[Accessed 22 March.2019]

 Steven Hoober (2017) Design for Fingers, Touch, and People, Part 2[ONLINE]
Available at: https://www.uxmatters.com/mt/archives/2017/05/design-for-fingers-
touch-and-people-part-2.php
[Accessed 10 March.2019]

 Sergey Gladkiy (2018) User-Centered Design: Process and Benefits [ONLINE]

Available at: https://uxplanet.org/user-centered-design-process-and-benefits-
fd9e431eb5a9
[Accessed 11 March.2019]

P a g e 27 | 29
 Christine Perfetti (2009) Goal Directed Design Process [ONLINE]
Available at: https://konigi.com/uiref/goal-directed-design-process/
[Accessed 16 March.2019]

 Jagriti Pande (2018) 10 Nielsen’s Heuristics Explained Learn & Build Amazing UX
[ONLINE]
Available at: https://uxgorilla.com/nielsens-heuristics/
[Accessed 20 March.2019]
 “Interaction Design: beyond human-computer interaction” book, written by Yvonne
Rogers, Helen Sharp, Jenny Preece, copyright 2002 John Wiley & Sons, Inc.
[Accessed 25 March.2019]
 Saul Mcleod (2015) Cognitive Psychology [ONLINE]
Available at: https://www.simplypsychology.org/cognitive.html
[Accessed 19 March.2019]
 Ulric Neisser (2012) Remembering the Father of Cognitive Psychology [ONLINE]
Available at: https://www.psychologicalscience.org/observer/remembering-the-father-
of-cognitive-psychology
[Accessed 11 March.2019]

 Senin (2018) Heart attack facts Graphs [ONLINE]

Available at: https://sueokaxrenzosiji.blogspot.com/2018/07/heart-attack-facts-
graphs.html?m=1
[Accessed 11 March.2019]

 Iren Korkishko (2019) UI/UX design guide with terms, explanations, tips and trends
[ONLINE]
Available at: https://medium.com/swlh/ui-ux-design-guide-with-terms-explanations-tips-and-
trends-754b9356d914
[Accessed 11 March.2019]

 Marc McNeill (2013) 7 Benefits of Agile and User Centered Design [ONLINE]
Available at: https://www.thoughtworks.com/insights/blog/agile-and-user-centered-design
[Accessed 20 March.2019]

P a g e 28 | 29
P a g e 29 | 29