Coursework Title : Personal Activity Monitoring System

COMP1650 : User Interface Design

Center : KMD Institute (Myanmar)
Date : 6st Nov 2018

Table of Content
1. Design Issue
………………………………………………………………………………2

Issue (1)
……………………………………………………………………………………2
Issue (2) ……………………………………………………………………………….
…..3
Issue (3)
……………………………………………………………………………………4
Issue (4)
……………………………………………………………………………………5
Issue (5)
……………………………………………………………………………………6
2. Target User
………………………………………………………………………………7
3. Use case
……………………………………………………………………………………8
4.
Principles………………………………………………………………………………
……8

Visibility……………………………………………………………………………..
………8
Feedback………………………………………………………………………………
……9
Constraints………………………………………………………………………………
…9
Consistency……………………………………………………………………….
………10
Affordance………………………………………………………………………………
…10
5. Mobile Guideline………………………………………………………………….
……10

Make Navigation Self-Evident…………………………………………….………10

Avoid Sending Too many notifications in a short period……….……11
Content Prioritization………………………………………………………….…….12
Touchscreen Target sizes…………………………………………………………..12
6. Theory of Color, Font, Layout, Graphic Design Elements……………12

Color…………………………………………………………………………………….
……12
Justification (Color) ……………………………………………………………………
14
Font……………………………………………………………………………………
………15
Justification (Font)
………………………………………………………………………16
Layout………………………………………………………………………………….
………17
Justification (Layout)
……………………………………………………………………19
Graphic Design
……………………………………………………………………………19
7. Legal, Social, Ethical Issues….………………………………………………………
20

Assumption……………………………………………………………………………
………21
Prototype………………………………………………………………………………
……21 to 27
8.
Evaluation………………………………………………………………………………
……28 to 31
9.
Conclusion………………………………………………………………………………
……32
10.
References………………………………………………………………………………
……32

(1) Hamburger Menu Issue

Some menu is not visible and hidden as hamburger menu. In mobile, you will see that menu when you swipe
horizontal on the left sight. It seems like a lot of widely space that programmer can add data. But the
disadvantage is discoverable data that user cannot see easily and the main fact, the system is restricted user
visible options.
Especially in IOS devices, their swipe horizontal is “back”. So, this website is not suitable for user who is
using IOS.

In mobile

In desktop
Solution
According to visibility and accessibility, this type of menu will be difficult for user easy to see and
understandable so that I will avoid this in my prototype. The main thing is user has to search easily data in
predictable ways and cognitive and perceptual ability when using system.

(2) Content Prioritization issue & discoverability info

In desktop, a lot of space to put information data and you can completely add navigation Bars and other
contents. But in mobile, there has some issue to add all of them because of it has limitation to add due to lack
of widely space. So, some information is initially hidden on mobile and user may be inconvenient searching
so long to see what user needs that hidden information in detail.
For example, Ebay website are selling motors and others car parts their website as massive categories. But in
mobile, they are hidden this information.
In mobile

In desktop
Solution
For usability, I will apply above invocation issue in my mobile design and put the main categories for each
suitable data that are necessary to know and easy to use for user. Only focus on user must be reliable on this
design without encumbrance for searching data.

(3) Lack of contextual and global navigation issue

According to picture in the desktop view, they are using form of contextual and global navigation menu. But
in mobile, it doesn’t support for contextual navigation menu on header and user may be confuse and irritated
about misleading information. So, when user go to website and do instruction step by step and click button to
go another page, they don’t know where page they reach middle now and where they are if there has no
navigation bar at the top.
In mobile

Lack of navigation menu

In desktop
Solution
For consistency, I will avoid from being not consistent navigation bar for both mobile view and desktop view.
Mainly focus on user point of view and promote appropriate standardization level according to user
experience.

(4) Minimal Graphic Issue

Developers are used to put promotional and marketing graphic at the website. But in mobile, most of them
are not including to put graphic and one problem is some of mobile device do not support software that
desktop website design and very small screen size to show content and lack navigation menu at the top beside
logo dell. This make impression down and not attractive for user when they see with mobile view and it look
like very disgusting design and they don’t use anymore.
In mobile

In desktop
Solution
For visibility, I will deploy personality differences of user what graphic to be good visible for design that
have to support any platform and. This is important to be attractive from mobile user and desktop user that all
of design must be consistent with both.

(5) Hyper text issue

According to under pic, designer use hyper text in price. But in mobile, they use as a button. For user who is
not good at mouse pointer, user go to desktop and click that price but can not holder that link and this can
uncomfortable for user when they use.
In desktop
They use hyper text

In mobile
They use as button in mobile

Target User
There are divided into four groups for ages and they are 16 to 25, 26 to 36, 37 to 49 and 50 to 67. It has two
type of customer gender for male and female and mainly target to international Asia region. Including
Myanmar, most of Asian used to eat rice and others for food and the same as living habituation according to
culture. So, this can be the same result why becoming consequence of overweight that depending on their
foods and generally system is easy to control as a problem. Mostly first language is English for all over the
world. So, we will use languages to be readable for all users such as English.
I will do prototype design for only android user because according to research, Demystify Asia reported that
what is the most common 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%

In system, containing heart beat measure, working per kilo meter measure, blood pressure, Sleep measure,
Fitness equipment, Diet control, medication tracking. User may use this system in many different ways. Some
are to do diet and some gains loss weigh with exercise or some follow medicine. For disable user, we will
support personal alarm device individually, show subtitle in video, image caption that for vital sign, audio and
chat message that we send instruction.
Personal Monitoring System
Measure Heart Beat

Measure Working Kilo Meter

Monitor Blood Pressure

Control Fitness Equipment

Customer

Control Diet
 TheyBBC newswith
ask user use all of same
a very color
simply for each page.
feedback.

Track Medication

Principles
(1) Visibility
User can easily know to login according to icon.

(2) Feedback
All of this use constraint for user

(3) Constraints

User automatically know to search data.

(4) Consistency

(5) Affordance
Mobile Guideline
1 Make Navigation Self-Evident
To be consistent navigation, avoiding hidden menus on mobile and mobile developer often hide the menus
on their design and this can be confused and disorient for user.
For better design of navigation, using standard patterns such as Navigation Drawer (for Android). My
design is only target user who is mobile android user. But for IOS user, I recommend tab bar is suitable for
that.
Image credits: Google design

https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/ X

2. Avoid sending too many notifications in a short period

According to research, 71% of people uninstall mobile apps because of annoying notifications message from
app. So, connect with email that you can send what information want user to know each of them Instead of
giving on app.
> Source: Appiterate Survey

https://www.uxpin.com/studio/blog/guide-mobile-app-design-best-practices-2018-beyond/ X
 Most of food and fruits website represent their site as green color.

3. Content Prioritization
Adobe photoshop cs6 website use color based on RGB especially red color indicated as important
It is very short to get attention from mobile user so that it needs to grab their attention within the few seconds
data.
when they check your products or software. The main important thing is showing only essential content and
One of civil bank is using blue color that focused on visibility label by using white words.
functionalities on mobile that user needs because of limited space. Menu list must be simple terminology
that prevent not to confuse for that and use icon instead of more text to reduce clutter.
http://uxbert.com/10-mobile-ux-design-principles/#.W7YvRegzbIV

4. Touchscreen Target sizes

Most of people are using with their thumbs rather that other fingers when using mobile phone. Small touch is
frustrating for user. So that “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 X

Theory of color, font, layout, Graphic design elements

(1) Color
According to color wheel, they are two type of model and the first is additive color model and the second
is subtractive color model.
In additive color, we consider Red, green and blue are as a primary color and also known as RGB. Others
colors are combination depend on these three colors.
In subtractive color, cyan, magenta, yellow and black are the most including color and we called CMYK.

Some websites are using RGB with white colors in their design

Justification on color for my prototype

Firstly, additive color and subtractive color is mostly different where using their color. Additive color model
is mostly used in digital and web media and subtractive color is used for print media. So, I will use only
additive color and especially target to green color for the header because my intention creating design is user
 The News website use their layout as F-shaped

must be healthy and happy in their life.

For error message and other important that user has to know, warm color red will use to be effective visibility.
Blue and white color will use together in label that user feel like easy to visible when they see. Orange will
use for only equipment image border such as heart beat machine, gym and others.
(2) Font
According theory, ifhttps://www.dtelepathy.com/blog/design/21-stunning-serif-fonts-websites
some contact is important and essential to know for user, that contact shouldThe use vogue
italic site
Basecamp
use sans website
serif to focused
look on their
emphasizing main
the content
meaning using
title words. Z-pattern
and focus on visibility. According to research data, font size is suitable at least 12px and larger size is 14px.
https://theblog.adobe.com/11-website-layouts-that-made-content-shine-in-2017/
https://www.dtelepathy.com/blog/design/21-stunning-serif-fonts-websites
So, reader can see easily font size and no need to engross too much on screen and all of words areRolling Stone
readable.
Facebook is
There are five kindsisofantypefaces using
iconic magazine Z-shaped
for fontsthat layout
suchusing in their
sansSans
as serif, design.
serifserif,
font as https://uxplanet.org/z-shaped-pattern-for-
a headline.
Script, decorative and dingbats.
reading-web-content-ce1135f92f1c
Especially Sans Serif is popular and most of developer usingThis isthat
Z-shaped Prototype
fonts because X style is simple and easy
fonts
to read and clear for all user even on different screen size.
This website uses their layout as F-shaped This is F-shaped Prototype
For font placement, it is suitable 50-75 characters per line at 16pt font or higher for desktop and use 30-40
characters per line for mobile.

https://www.dtelepathy.com/blog/design/21-stunning-serif-fonts-websites

Justification on font for my prototype

In my prototype, for important contact of font will use italic to be visible for user. Font size is either 12px or
14px that easy to read for user and I choose Sans serif typefaces because it must work visible on different
screen mobile and desktop rather than others typeface. Most of highlight paragraph will use regular weight
and font placement will apply according above theory.

(1) Layout
There have two kind of layout pattern called Z-Pattern and F-pattern. Nowadays, most of website is using
based on these two layouts according to their input data. If data is less showing for user, they often use Z-
pattern and this layout is clear, sample and easy to visible for user.
According research theory, this pattern is sample and easy to see important information for user. Nowadays,
most of website is using Z-pattern in their layout.

For F-shaped Pattern, some of websites have referred to this research, but in later this research F-shaped is
less correctly and misconceptions their other instances. Most of user and business site are negative for that.

https://uxplanet.org/f-shaped-pattern-for-reading-content-80af79cd3394
 Graphic Icon
Justification onThis
layout
icon isfor my prototype
for Blood Pressure This icon is for diet control. This icon is for fitness
I will put the mainequitment.
componentsThis icontop
on the is horizontal
for checking
lineheartbeat. This
so that user canicon is the
focus for control medicine.
very first when theyThis
see.
icon is for working per kilo.
My prioritization for design must have simplicity and use can easily familiar with the layout design. F-shaped
is mostly error in mobile layout because text columns are wider than screen and layout is not visible and clear
when user swipe the screen. So, this is why I choose and z-pattern layout is better suited for my prototype.
All are using
as a graphic
(2) Graphic Design icon
There are six kind of design the line, the shape, the color, the value and space.

Legal,
social,
ethical
issues

System is personal activity monitoring system and there are different type of monitoring. Some will be
trained with equipment and some are controled by medicine. this is so important that the medicine must be
recognized from FDA and others ISO certificate. But untentionally user has some trouble and disturbing of
their health when they drink medicine according to instruction of system, legally customer can sue to
organization for that case. Ethically, even the organization either know or not that medicine can hurt for
humen and should not drink according to medical research, they should not give to customer with uncertainty
situation.Socially, the organization can be disrepute and impression down for customer and finally the whole
organization will stop their process.However ethically, the organization need to check their product and
invistigate the list in detail customer information that what kind of medicine is suitable for them before
giving to customer.
Two Prototype
Desktop view (Z) Mobile view(Z)

<article>

<section>
<article>

<footer>

<header>

<section>

<aside>

<nav>

<Header>

Desktop view(F) Mobile(F)

<aside>
<nav>

<aside>

<article>

<header>

<footer>

<article>

<aside>
<nav>

<header>

Assumption
My prioritization for design must have simplicity and use can easily familiar with the layout design. F-shaped
is mostly error in mobile layout because text columns are wider than screen and layout is not visible and clear
when user swipe the screen. So, this is why I choose and z-pattern layout is better suited for my prototype.

Supporting Disable User

Heart Beat Perso

Working Kilo nal
Blood Pressure Monit
oring
Syste
m

Medic
ine

Worki
ng
Kilo

Home
 Fitnes
s
Heart Beat

Diet
Blood Pressure

Personal Monitoring System

Supporting Disable User

Heart Beat
Working Kilo

Blood Pressure

Heart Beat
Working Kilo
Blood Pressure

Fitness

Diet
Medicine

Personal Monitoring System

Blood Pressure
 Kilo ----------
---------- -----------------
---
Day/Mo
nth/Year Age
Home

Heart Beat R
---------- Record
Fitness ----------
-

Diet
Medicine User
Name

Working

Heart Beat

User Name
12

Age

Female

Male

Record

Personal Monitoring System

Fitness

Blood Pressure

Walking Kilo

Heart Beat
 Diet

Distance Target

1.0 km

Medicine Record

Home

Walking Kilo

Distance Target
+ -

1.0 km

Start

Personal Monitoring System

Working Kilo Age

Fitness Home

Diet Blood
Blood Pressure
Type

Heart Beat
Customer
Name Gender

Medicine

Record
Blood Pressure

SCANNING YOUR FINGER….

Start

Personal Monitoring System

Working Kilo Fitness Blood Heart

Pressure Beat
 Leg
Home
Tricep
Forearm
Diet
Bicep

Record
Abdominals Chest

Medicine
Back Shoulder

Workout
Fitness (Exercise)

4 days a week

2 days a week

Back

Abdominals

6 days a week Forearm

Workout Program1 Shoulder

Tricep
Leg
Chest
6 days a week
Bicep
Workout Program1

Measure
Beginners

Personal Monitoring System

Fitness

Working Kilo

Blood Pressure

Heart Beat
Medicine

Home

Diet

Dinner

Evening Snacks

Tue, Nov 6

Set
Diet

Tue, Nov 6

Breakfast

Lunch

Dinner

Evening Snack
Set

Personal Monitoring System

Fitness

Diet

Working Kilo

Blood Pressure

Heart Beat
Medicine

Home

Daily/Weekly

Type of Medicine

Record
Qty

Medicine

Type of Medicine

Qty
Daily/Weekly

Record

Evaluation

There are three type of method namely Heuristics, Walk through and GOOM.
GOMS
GOMS have four main functions they are Goals, Operators, Methods and Selection. GOMS is especially
for analysis user’s action what they do and how they use what way. My protype is mainly focus on analysis
design so that I will apply walk through to evaluate design for that.

Work through
(1) Login
➢ Open Browser
➢ Navigate to site
➢ Click login button
➢ Enter User Name
➢ Enter Password
➢ Click Login

Question1: Do they know exactly to login for your design?

Question2: Can they do successfully login in a short-term period?
Question3: Will they achieve the right outcome?

User1 (expert):
Answer: YES (1,2,3)

User2 (Beginner):
Answer: YES (1,2,3)

User3 (Beginner)
Answer: YES (1,2,3)

User4 (Normal)
Answer: YES (1,2,3)

According to user analysis research, Different type of user recommend YES for all of Question 1 to 3. So that
we conclude above 50% will achieve for user satisfaction. So, this login function totally 100% user
satisfaction from feedback.

(2) Heart Beat Function

➢ Open Browser
➢ Navigate to site
➢ Type User Name
➢ Type Age
➢ Choose Gender
➢ Click Record

Question 1: Do they know how to use the system for heart beat function?
Question2: Is that real work?
Question3: Do they exit from system to home?

User1 (expert):
Answer: YES (1,2,3)

User2 (Beginner):
Answer: No (1), Yes (2,3)

User3 (Beginner)
Answer: No (1), YES (2,3)

User4 (Normal)
Answer: YES (1,2,3)
According to above research, 90% of user will satisfy to use this function.
(3) Working Kilo Function
➢ Open Browser
➢ Navigate to site
➢ Choose Distance Target (km)
➢ Click Start

Question1: Do they comfortable using this function?

Question2: Do they know how to do for system?
Question3: Is that function really necessary for user?

User1 (expert):
Answer: YES (1,2,3)

User2 (Beginner):
Answer: Yes (1,2,3)

User3 (Beginner)
Answer: YES (1,2,3)

User4 (Normal)
Answer: YES (1,2,3)
According to above research, 100% get user satisfaction to use this function.
(4) Blood Pressure
➢ Open Browser
➢ Navigate to site
➢ Choose Customer
➢ Choose Age
➢ Choose Gender
➢ Choose Blood Type
➢ Click Record

Question1: Is user easy to use this function?

Question2: Can they do successfully login in a short-term period?
Question3: Can they get their goals?
User1 (expert):
Answer: YES (1,2,3)

User2 (Beginner):
Answer: Yes (1,2,3)

User3 (Beginner)
Answer: YES (1,2,3)

User4 (Normal)
Answer: YES (1,2,3)
According to above research, 100% get user satisfaction to use this function.
(5) Fitness Function
➢ Open Browser
➢ Navigate to site
➢ Choose Exercise for one
➢ Click Measure

Question1: Do the system effective for user?

Question2: Can user easily follow instruction?
Question3: Will the user achieve the right outcome?
User1 (expert):
Answer: No (1,2,3)

User2 (Beginner):
Answer: Yes (1,2,3)

User3 (Beginner)
Answer: YES (1,2,3)

User4 (Normal)
Answer: YES (1,2,3)
According to research, 70% of user like using this system.

Conclusion
To be effective design, Firstly I did analysis the design issue between desktop and mobile the reason of why I
analysis is avoiding this example issue and for more comfortable for user when they use system correctly and
smoothly.
For visibility, I analysis that before other website and not to do the fact of user dislike. So, my system is
more effective for user that they can run very well without many problems. According to Walk through, I
identified a lot of user and ask question and finally 90% of user is satisfied for my design. So, in the reality
my system is more useful for environment and people who are using this system and intend for all different
type of user and they can gain a lot of their desire healthy life and no need to extra time and expensive money
for that.
References
➢ Helen Armstrong (2009). Graphic Design Theory [ONLINE]

[Accessed 27 Oct.2018]
➢ Daniel Sweiry and Maxine Willitts (2010). Attitudes to age in Britain [ONLINE]

Available at: http://www.nationalrchives.gov.uk/doc/open-government-licence X

[Accessed 12 Oct.2018]
➢ Stephanie Mialki (2018). The Z-Pattern Layout: What it is, why it works, and When to Use It

Available at: https://instapage.com/blog/z-pattern-layout X

[Accessed 14 Oct.2018]
➢ Stephanie Mialki (2018). What is the F-Pattern and How to Use It for Increased Conversions?

Available at: https://instapage.com/blog/z-pattern-layout X

[Accessed 14 Oct.2018]
➢ Cameron Chapman (2010). Color Theory for Designers, Part 1: The Meaning of color

Available at: https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-

color/ X
[Accessed 2214 Oct.2018]