University of Greenwich

1. Course Name: User Interface Design
Course Code: COMP 1650
Due Date: 6 Nov 2018
Centre: KMD Institute (Yangon, Myanmar)
Words used: (2080) words

2. Table of Contents
1 Critical evaluation..............................................................................................................................3
1.1 Current Issues.......................................................................................................................3
1.1.1 Font Issue............................................................................................................................3
1.1.2 Color issue...........................................................................................................................4
1.1.3 Unidentified page ...............................................................................................................5
1.1.4 Layout issue........................................................................................................................6
1.1.5 Page with much information .............................................................................................7
1.2 Legal, Social and Ethical issues ........................................................................................8
1.2.1 Legal.....................................................................................................................................8
1.2.2 Social....................................................................................................................................8
1.2.3 Ethical...................................................................................................................................8
2. Theories.........................................................................................................................................9
2.1 Development of low level prototype ..................................................................................9
2.1.1 Color Theory .................................................................................................................9
2.1.2 Font Theory...................................................................................................................9
2.1.3 Elements Layout.................................................................................................................9
2.2 Guidelines and Standards...................................................................................................9
3. Analysis........................................................................................................................................11
3.1 Target users........................................................................................................................11
3.2 Usecase Diagram for functions........................................................................................12
3.3 How to implement Interface Design ................................................................................13
4. Implementation for home page ................................................................................................14
5. Selection of the prototype .........................................................................................................15
Evaluation........................................................................................................................................15
6. Implementation for other pages ...............................................................................................16
7. Evaluation for selected prototype ............................................................................................22
8. Conclusion...................................................................................................................................23

3. 1 Critical evaluation
1.1 Current Issues
1.1.1 Font Issue
You can see the website as the other websites on laptop. The font size is normal on laptop.
When you look this website on phone browser, you can’t see clearly and it so complicated.
The font size is so small to see.
The font size problem is happens only on mobile phone. On laptop, it just likes other
websites.
Users can increase the power of glasses. And it can cause eyes’ problem and damage the
eyes.
Make font bigger on mobile phone version and develop at least two versions for mobile
phone and desktop.

4. 1.1.2 Color issue
Color of the background, font color and tab bar color are doesn’t match each other. This
issue goes for both device desktop and mobile phone. Also the font color of address makes
not clear. If you look accidently, you won’t notice for address.
User can get annoy, headache and can’t get exact information because of font color.
Make sure to use the match color. Like dark color and bright color. If the background color is
dark, it needs to use bright color for font color. And background color is bright and use dark
color for font color.

5. 1.1.3 Unidentified page
Users don’t know about where they are now. There’s no sign of pages where you are. This
issue goes for both devices.
Users can confuse because they don’t know where they are and what are they already
watched and read.
Name of the page should highlight to show the users where they are now. And other signs of
something to show the users what are they reading.

6. 1.1.4 Layout issue
Choosing of background color and design of the website aren’t same each pages.
Background of the websites is a little bit complicated. Content of the page and background
design are not related at all.
It give confusion and make negative side to the users. Users can’t be understood easily.
Users can get wrong idea about the websites.
It should use the related background design with the content of the website and main idea of
the website. You can’t use random background design.

7. 1.1.5 Page with much information
Need to visit every link to know everything. It make a little bit busy. This issues goes for both
devices.
Users need to visit every links and they will get bored.
Add only which you need for sure. And don’t put anything what you wants.
References
(Yale University School of Art, 2018)

8. 1.2 Legal, Social and Ethical issues
1.2.1 Legal
When trying to develop a system, there are many legal obligations to abide for. The
web application for a personal activity monitoring system is need to follow some laws for
certainly. Need to get information from respective areas. Developer need to consult and
communicate with medical authorities, need to interface with township medical offices to get
disease data, Collect personal data from medical authorities about patients and doctors.
The most important things are privacy and copyright. Privacy is the most important. When
developer obtains the data, the data are the privacy of patient and doctor. Developer need to
keep the data with highly security not to leak. And copyright is second important thing after
privacy. When the product comes out, the product will sell to the customer who will use this
product. So developer needs to make the authority of owner for this product. So no one can
steal the data and design. The product will be protected by the laws.
1.2.2 Social
When developer tries to acquire the data of patients and doctors which concern with
privacy and person securities, developer need to careful with the security. So make sure not
to do mistakes when taking data. If the mistakes occur, social issue will be serious and can
take place in developing system.
1.2.3 Ethical
Developer need to have some certain ethics because this system concern with health
and patients data. So developer needs to keep the data secretly and keep mouths shut
when working on the system.
(User Interface Design, 2018)

9. 2. Theories
2.1 Development of low level prototype
2.1.1 Color Theory
The color of the website or product affects to user’s first impression and is the visual
appearance. Most users take very short time to make the decision by looking the color of the
product. The most important thing is to choose the right color for users’ needs. In the website
which is called Mockplus said “Look at the most commonly used Apps or sites, Facebook,
Twitter, Microsoft, Safari, etc. Websites use various kinds of blue. According the research,
Blue is the No.1 color that women and men both like”. In reality, most products can be seen
with blue color. If the developer can’t decide which color should use for the product,
choosing various kinds of blue is safe. Most people will like and satisfied with the product.
(How to use color in UI Design wisely to create a perfect UI Interface?, 2018)
2.1.2 Font Theory
Font which developer chooses needs to be flexible. Font effects to the users who use
the products. Font needs to be flexible. Font should have variety of weight and wide range.
Paying attention to aspects of users is important and will not suffer from ignorance. To have
a perfect ratio to font is important thing to developers and will effect to the users also.
(How to use typography in UI Design, 2018)
2.1.3 Elements Layout
Choosing interface elements is important to the users. Users need to familiar and
know how to use the product. The developer needs to choose the usability layout. Choose
simple forms of input controls such as buttons, text fields, checkboxes, radio buttons,
dropdown lists, list boxes, toggles, date field, etc. Make simple interface and use common
elements are most important to developers and users both.
(User Interface Design Basics, 2018)
2.2 Guidelines and Standards
Visibility
Visibility is very important for users. Because more familiar functions become easier and
more comfortable to users than unfamiliar functions. So, the developer needs to add
common icons, functions, pictures and words.
Constraints
User can only control the functions that related to the users. Users can’t involve to other
functions of admin. Developers need to make control for user and limit user control.

10. Consistency
Developer should use only familiar icons, functions, pictures and words to users. And make
simple user interface design for users to use easily and comfortably.
Strive for consistency
Developer should decide which color, fonts and layout design should use for the system to
become usability. And make to use match color and color that good for eye and not
complicated and bright color. And use the fonts to see for everyone who wear glasses or not.
And make simple layout and usability layout for users.
Support internal locus of control
User need to control their personal data. So, developer needs to make limit for user and user
can control the system.
Reduce short-term memory load
Developers need to make the system in simple way and don’t add too much information
because users don’t like too much information and users need to work for their daily life and
users have a lot of things to remember. So, user won’t use if the system has too much
information. It can make user irritated, complicated, and annoying.
Involvement of people with disability
People with disability are also people. World can’t make discrimination for disabilities. In
everywhere, people need to welcome and involve with disabilities in public and society.
Choice
People with disability can make a choice for their life. They can care about themselves and
make what they want to do. Disabilities can own their life.
Universal approach
Systems, products, applications, environments and community are needs to make
something for disabilities. For this system, developer needs to add some functions for
disabilities.
(Department of Health and Human Services)

11. 3. Analysis
3.1 Target users
This app is made for teenagers. Everyone can use this for healthy life. This app will
record how many kilometers and minutes run and walk and heart rate for a person per day.
People can see the record of activities for a day. And people can make goals for a day. This
app will lead a healthy life.
This app will be made for international users. Most international people interest in
living healthily. People walk and run every day in every age. This app will helpful for those
people. International people will use this app a lot. Everything and every directions in this
app will be used English as language for international.
For disability people, the developers need to add for hearing loss and blind people.
Adding sound file and text file to the system is the good function for disability people.
Nowadays, most people use mobile phone better than desktop. Mobile usage
becomes higher and higher compare to previous years. And Android user percentage is
higher than ios user. Android user percentage is increase to the last years. That’s why this
app will focus on android mobile user more.
(Mobile vs Desktop Usage in 2018: Mobile takes the lead, 2018)
(Android v iOS market share 2018, 2018)

12. 3.2 Usecase Diagram for functions
Usecase for functions
Set Goals
Record Activities
User
System
Show Result
Check Results
Show Lists to do
Follow Guidelines

13. 3.3 How to implement Interface Design
Desktop
IOS

14. Android
4. Implementation for home page
1st
set 2nd
set

15. 1st
set 2nd
set
Color Blue Black
5. Selection of the prototype
Evaluation
Criteria 1st
set (Grade) 2nd
set (Grade)
Color match A B C A B C
Visual A B C A B C
Interface design A B C A B C
Summarize
1st
set has more good point and colors of design are also matches each other. And
this set is suitable for teenager users. That’s why 1st
set will use in the app.

16. 6. Implementation for other pages
Home page
Log in

17. Profile

18. Goals page

19. Water page

20. Walking and running page

21. Heart rate page

22. 7. Evaluation for selected prototype
(1) Visibility of system status
This system always gives the status of the person every second and every minute.
User can check the condition anytime.
(2) Match between system and the real world
This system uses familiar icon which every people know and they can know what it
mean when they see it. This system only uses common icon for users.
(3) User control and freedom
User can make control this system. Users can set goal for themselves and they can
change the goals and they can do whatever they like to control this system.

23. (4) Consistency and standards
User will know exactly what meaning of icon on the user surface. This system only
uses common icon and picture for user.
(5) Error prevention
This system doesn’t have error message to show user what going on. If something
wrong, error message won’t appear.
(6) Recognition rather than recall
This system uses a lot of icon more than words because most of people so lazy to
read the words. That’s why watching icon will be easier and more comfortable for
users.
(7) Flexibility and efficiency of use
This system is made for everyone and every standard. There are no settings for
experienced users or expert users. This system has one version and one standard
for everyone.
(8) Aesthetic and minimalist design
This system only added the functions which only need for users. There are no
unnecessary things, pictures, icons, functions and links.
(9) Help users recognize, diagnose, and recover from errors
If the system accidently logged out, the account won’t disappear. User can log in
again and get the data back and use again.
(10) Help and documentation
This system makes simple design and the developer thinks there are no needs to
add help documentation and steps instructions for users.
(10 Usability heuristics explained, 2016)
8. Conclusion
This system is made for teenagers who interested in their daily life. Because they
can control goals for their daily life, they can see how long they walk, running and
their heart rate. And they can make water reminder for their healthy life. And for
disabilities, this system is really easy to use and simple. For disabilities who can’t
see and who can’t hear, this system added sound file and word file. This system is
really simple. So people who can’t use phone well or not, they can use this system
for daily life. This system is only use common words, functions, icons, pictures. This
system uses match color, simple layout design and font size for usability. This
system will suitable for everyone all over the world.

24. References
10 Usability heuristics explained. (2016, October 1). Retrieved November 2, 2018, from A Medium
Corporation: https://medium.com/@erangatl/10-usability-heuristics-explained-
caa5903faba2
Android v iOS market share 2018. (2018, October 16). Retrieved November 1, 2018, from Device
Atlas: https://deviceatlas.com/blog/android-v-ios-market-share
Department of Health and Human Services. (n.d.). Retrieved November 2, 2018, from Tasmanian
Government:
https://www.dhhs.tas.gov.au/disability/plan/disability_services_strategic_plan_2015-
18/guiding_principles
How to use color in UI Design wisely to create a perfect UI Interface? (2018, September 28).
Retrieved from Mockplus: https://www.mockplus.com/blog/post/how-to-use-color-in-ui-
design
How to use typography in UI Design. (2018, September 29). Retrieved from Prototypr.io:
https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2e
Mobile vs Desktop Usage in 2018: Mobile takes the lead. (2018, April 27). Retrieved November 1,
2018, from Stone Temple: https://www.stonetemple.com/mobile-vs-desktop-usage-study/
User Interface Design. (2018, September 28). Retrieved from Slide Share:
https://www.slideshare.net/naylynnaung/nay-lynn-aung-uid
User Interface Design Basics. (2018, September 29). Retrieved from usability.gov:
https://www.usability.gov/what-and-why/user-interface-design.html
Yale University School of Art. (2018, September 2). Retrieved from Yale University School of Art:
http://art.yale.edu/