This is my University Assignment for UX. In this project, there is research about mobile, web design issues and I demonstrate the project with mobile design.

1. COMP 1650 : User Interface Design
Due Date : 7/11/2017
School Name : KMD (Yangon, Myanmar)
Word Count : 2700

2. 1. Introduction 3
2. User Interface Design Issues 3
2.1 Different Device Issues 3
2.1.1 Different OS Version Issue 3
2.1.2 Different Screen Resolution Issue 4
2.2 Design Approach Issues 5
2.2.1 Responsive Design 6
2.2.2 Adaptive Design 6
2.2.3 Choosing of Design Approach 7
3. Legal, Social and Ethical 8
3.1 Copyright 8
3.2 User Permission 8
3.3 Data Theft 9
3.4 Privacy and Confidentiality 9
4. Design Principles 9
4.1 Don Norman Design Principles 9
4.1.1 Mapping 9
4.1.2 Consistency 9
4.1.3 Visibility 10
5. Main Concepts of Prototypes 11
5.1 Colour Theory 11
5.1.1 Color Wheel 11
5.1.2 Color Harmony 11
5.1.3 Context of how colors are used 12
5.2 Font Terminology 14
5.3 Layout 14
5.4 Graphic Design Elements 15
6. Evaluation Techniques 20
6.1 Nielsen’s Usability Heuristics 20
6.1 Visibility of system status 21
6.2 Match between system and the real world 22
6.3 User control and freedom 22
6.4 Consistency and standards 22
6.5 Error Prevention 23
7. Proof of Concept 23

3. 8. Evidence of Effective User Interface 25
9. Conclusion 27
Reference 27

4. 1. Introduction
Yangon Institute of Technology, is one of the University and located in Yangon.
Currently, university want to create tablet application and provide more personalised experience
for students to get various university services and information such as building locations, news,
accommodation office services, restaurant services, etc.
2. User Interface Design Issues
2.1 Different Device Issues
There are a lot of issues between different. Among them, different os version issue and
different screen resolution issue briefly describe.
2.1.1 Different OS Version Issue
There have a lot of version OS in each device. Especially, there have a lot of version OS
on Mobile device. If the developer will not check version OS correctly, the program will crush.
For example, the ripple effect in button on Android Mobile phone, the ripple effect only work on
above version 21. If developer will not check the version of user phone, the phone will crush
when the phone version below 21.
The above error message will show and the application will automatically be killed by
OS.

5. 2.1.2 Different Screen Resolution Issue
There have different density in different device. For example, Even some image is ok in
low density device, you cannot say it is ok in high density.
In above picture, the first row of screenshot is showing that the higher the density, the
smaller the image.
The above picture is showing that which resolution of image needed in which density of
device.
2.2 Design Approach Issues
Nowadays, most people have more than one device and they would like to use same
user experience on each of their device. So, the website must be compatible with different
screen size and screen resolution.

6. We have two approach to solve the gap between devices. They are Responsive Design
and Adaptive Design.
2.2.1 Responsive Design
Responsive Design Approach is that make the decision for the layout at client (Browser).
RWD is depend on the browser window.
The above picture show how the RWD change the layout according to browser. The
most advantage is of RWD is the maintenance because it only need to set one content. RWD
won’t need to create a lot of website for different devices. That is the major advantage of RWD.
But RWD has some issues. The issues will be following.
Issues of Responsive Web Design

7. Issues Description
Load Speed RWD basically make up of HTML5 and linked all CSS and
Javascript. So, all devices need to load all the data.
Respect of Usage RWD won’t fully consider the contexts and the specific
usage of each device.
Web Browser Compatibility HTML5 is not supported in old smartphones. RWD is not
the solution for old version of smartphones.
2.2.2 Adaptive Design
The mean of Adaptive Design is to create a different page for different devices, the
target of Adaptive Web Design resolutions are 320, 480, 760, 960, 1200 and 1600. The
Adaptive Web Design will automatically detect the screen size and resolution, and then load
appropriate layout and show the best layout for the screen. The Adaptive Approach is that make
the decision the layout for screen is at the web server. There are a lot of famous websites using
Adaptive Approach such as Maplin, Home Depot, Corcoran, etc,. Adaptive website are more
fast loading time performance and more user experience.
The above photo is show the website which use Adaptive Web Design and the size of
page in mobile and desktop. The size is different in between mobile and desktop and that is the
proof of the advantage of Adaptive Web Design. But there have some issues.

8. Issues of Adaptive Design
Issues Description
Labor-intensive A lot of developers shy to do AWD because AWD need
different HTML codes stored on the server to deliver the
suitable screen size and resolution.
Professional Required The to the complexities of the design the solid professional
team is required.
Resource and Budget Heavy ADW need solid professional team and that is make more
expensive.
2.2.3 Choosing of Design Approach
Responsive Design is more easier and less work than Adaptive Design to implement. By
using RWD, we can get a lot of cheap template and CMS and only create one simple design for
all screen.
According the above the photo, we can get a lot of advantage using RWD. So, in this
coursework, we use the RWD.
Citation
​"3 Responsive Web Design Issues and Solutions - QBurst - Blog." 15 Jan. 2016,
https://blog.qburst.com/2016/01/3-responsive-web-design-issues-and-solutions/​.
"5 Great Adaptive Web Design Examples for Inspiration - Mockplus." 12 May. 2017,
https://www.mockplus.com/blog/post/adaptive-web-design-examples​.

9. "The Pros and Cons of Adaptive Web Design That Web Developers ...." 17 Jan. 2017,
http://mediumwell.com/pros-cons-adaptive-web-design-web-developers-need-know/​.
3. Legal, Social and Ethical
3.1 Copyright
Copyright means that protection of author’s work. The application should be describe
when use some data from other side and should be describe (@) sign with university name
when own data used.
3.2 User Permission
User Permission is very important for security. All of the users want to from the
application for using of permission. For example, the application use GPS service, the
application should to request GPS permission from user.
3.3 Data Theft
Data theft mean that unauthorized copying or removal of confidential information from a
business or other large enterprise. So, that is very important for security. The application should
give the trust to user.
3.4 Privacy and Confidentiality
Privacy is the right of an individual of certain information to prevent the disclosure to
another individual or organization. Confidentiality mean the situation to obtain or disclose the
information within a confidential relationship.
4. Design Principles
Design Principles are standard how to organize and arrange the structural contexts
and graphic design elements. In this chapter, discuss about Don Norman Design Principles
and Shneiderman’s Eight Golden Rules.
4.1 Don Norman Design Principles
● Visibility
● Feedback
● Constraints
● Mapping
● Consistency

10. ● Affordance
4.1.1 Mapping
“Mapping” is the relationship between controls and their effects in the world. Eg up and
down arrows on computer keyboard.
4.1.2 Consistency
A submit button should be the same across the whole application. If not, the user will
know the two submit button cannot be do the same function.
The above picture is the example of bad design.
4.1.3 Visibility
“Visibility” means the more visible an element is, the more likely users will know about
them and how to use them.

11. In above picture, the application use hamburger button and tab bar menus. The
hamburger menu provides a convenient place to store a lot of menu items in application, it will
be a huge disadvantage, the lack of visibility of contained menu items. We’ve seen a shift in
major apps like facebook away from hamburger menus and back toward tab-bar menus to
improve the visibility of their key experiences.
“Feedback” is clearly making what user action has been taken and what has been
accomplished.
Citation
"Don Norman's Principles of Interaction Design – Sachin Rekhi – Medium." 23 Jan. 2017,
https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33​.
5. Main Concepts of Prototypes
5.1 Colour Theory
“A color can involve one reaction in one person will involve the opposite reaction in
another, due to culture, prior association, or even just personal preference.” There are three
basic categories of colour theory, they are color wheel, color harmony and the context of how
colors are used.

12. 5.1.1 Color Wheel
Color wheel is based on red, yellow and blue. The first color wheel was
developed in 1666 by Sir Isaac Newton.
5.1.2 Color Harmony
Color Harmony is that something is pleasing in the eyes. It pleasant the viewer and
creates an inner sense of order that mean balance of visual experience. There has some
formulas for color harmony. Among them, a color scheme based on analogous colors will be
described.
Analogous colors are the three colors of side by side on a 12-part color wheel such as
yellow-green, yellow and yellow-orange. But usually one of the three colors are predominates.
5.1.3 Context of how colors are used
The the above picture, The starting point of three color are relativity. The relation between
each color of values, saturations and the warmth or coolness of respective is differences in
perception of color.
There have also color terminology such as chroma, value and saturation. Chroma mean
purity of a color.

13. In the above website, the chroma difference between the pink dark purple on this site
provides solid contrast in the design.
In the above website, slightly saturation in the header of letter create a more calming feel
than pure hues.

14. The value also mean that lightness and it refers to how light or dark the color is. Lighter
the color, the higher the value. For example, orange is the higher value than dark purple. Black
is the lowest value of any hue.
In the above website is the combination of high value and low value hue to create a very
modern look and feel.

15. 5.2 Font Terminology
The above picture show, the standard of font which font family and size will be use in
which device according to material design typography section.
5.3 Layout
The meaning of Layout in design is that elements arrangement on a page and that
layout are placement of image, text and style. If the layout is not correctly understood, the
message want to give is probability will be lost. So, the understanding of layout design is very
important. There are 6 design components of good composition in layout. They are balance,
proximity, alignment, repetition, contrast and white space.

16. In the above picture, balance is achieved by making all elements visually equal on all
sides.
5.4 Graphic Design Elements
There have 3 kinds of graphic design elements. They are input controls, informational ui
elements and navigation elements.
The common input controls are button, text fields, checkbox, radio button, toggle button,
spinner and pickers.

17. The common informational ui elements notifications, progress bar, tooltips, message
boxes, modal window (pop-up).

19. The navigation elements are search field, breadcrumb, pagination, tags, sliders, icons
and image carousel.

21. Citation
"Color Theory for Designers, Part 1: The Meaning of Color – Smashing ...." 28 Jan. 2010,
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/​.
"Color Theory For Designers, Part 2: Understanding Concepts." 2 Feb. 2010,
https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-a
nd-terminology/​.
"accessibility - Minimum font size for mobile view ... - UX StackExchange." 22 Dec. 2016,
https://ux.stackexchange.com/questions/102813/minimum-font-size-for-mobile-view​.
"Input Controls | Android Developers."
https://developer.android.com/guide/topics/ui/controls.html​.
"User Interface Elements | Usability.gov."
https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html​.
6. Evaluation Techniques
There have a lot of evaluation and among them, Nielsen’s Usability Heuristics will be
described in this chapter.
6.1 Nielsen’s Usability Heuristics
● Visibility of system status

22. ● Match between system and the real world
● User control and freedom
● Consistency and standards
● Error prevention
● Recognition rather than recall
● Flexibility and efficiency of use
● Aesthetic and minimalist design
● Help users recognize, diagnose, and recover from errors
● Help and documentation
6.1 Visibility of system status
In above picture, google drive show the user of image uploading status.

23. 6.2 Match between system and the real world
The above photo is from neilpatel and they use “YES, I WANT NEIL TO TEACH ME
HOW TO GROW MY BUSINESS!” for “Sign up”.
6.3 User control and freedom
User control and freedom is giving the user to control and navigate the action.
In above picture, gmail give the user to Undo function. If you do wrong action for some
mail, they can undo the action.
6.4 Consistency and standards
A submit button should be the same across the whole application. If not, the user will
know the two submit button cannot be do the same function.
The above picture is the example of bad design.

24. 6.5 Error Prevention
Error Prevention mean if you have some rule to create or etc, you should pre show the
rule.
The above picture is showing the function of create new email account. G-mail show the
rule while user typing the password.
Citation
"10 Usability Heuristics with Examples – Prototypr." 17 Aug. 2016,
https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c​.
7. Proof of Concept
In this chapter, we will choose of the one screen of design and decide to continue to
make design.

25. Figure 1
Figure 2

26. Figure 1 and 2 are the login screen of the university. In figure 1, the space are very
meaningful, the space between username and password is shown the relation and Sign In and
Forget password button is also shown. In figure 1, the application is using color wheel theory.
They use similar color code such as #3D7BA3, #4A9AD1 and #6DB2DB. In figure 1, the
application also follow the rule of Font Terminology, it correctly use font size and font family. So,
the design will continue with Figure 1.
8. Evidence of Effective User Interface
The above picture follow a lot of colour theme and font terminology, layout and design
element. Above screen flow the color wheel, use simple layout and suitable font terminology.

27. In above screen, view pager is used to show the context of university and user can
which context is arrived and how many context are left. This concept is follow the ​visibility of
system status​ of Nielsen’s Usability Heuristics technique.

28. The above picture, student information, university information are the name of the group
of data. The user can easily know timetable, course and grades and student’s unions are the
Student Information. That is the follow of ​mapping​ of Don Norman Design Principles. The user
know when they see the arrow, there have other context in this tag. That is follow the ​Visibility
of Don Norman Design Principles.
9. Conclusion
The full resolution of images that used in this course are available at images folder in Zip
file. Please see the screen flow in marvel app the following link.
( ​https://marvelapp.com/71d557h​ )
Reference
​"3 Responsive Web Design Issues and Solutions - QBurst - Blog." 15 Jan. 2016,
https://blog.qburst.com/2016/01/3-responsive-web-design-issues-and-solutions/​.
"5 Great Adaptive Web Design Examples for Inspiration - Mockplus." 12 May. 2017,
https://www.mockplus.com/blog/post/adaptive-web-design-examples​.
"The Pros and Cons of Adaptive Web Design That Web Developers ...." 17 Jan. 2017,
http://mediumwell.com/pros-cons-adaptive-web-design-web-developers-need-know/​.
"Adaptive web design: pros and cons | Econsultancy." 14 May. 2014,
https://econsultancy.com/blog/64833-adaptive-web-design-pros-and-cons​.
​"3 Disadvantages of Responsive Web Design – Matthieu Lerat – Medium." 29 Jan. 2015,
https://medium.com/@matthieulerat/4-disadvantages-of-the-responsive-design-37eb6942e521​.
"10 great examples of adaptive web design - DeviceAtlas." 27 Mar. 2015,
https://deviceatlas.com/blog/adaptive-web-design-examples​.
"Color Theory for Designers, Part 1: The Meaning of Color – Smashing ...." 28 Jan. 2010,
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/​.
"Color Theory For Designers, Part 2: Understanding Concepts." 2 Feb. 2010,
https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-a
nd-terminology/​.
"accessibility - Minimum font size for mobile view ... - UX StackExchange." 22 Dec. 2016,
https://ux.stackexchange.com/questions/102813/minimum-font-size-for-mobile-view​.
"Input Controls | Android Developers."
https://developer.android.com/guide/topics/ui/controls.html​.

29. "User Interface Elements | Usability.gov."
https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html​.
"Don Norman's Principles of Interaction Design – Sachin Rekhi – Medium." 23 Jan. 2017,
https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33​.
"10 Usability Heuristics with Examples – Prototypr." 17 Aug. 2016,
https://blog.prototypr.io/10-usability-heuristics-with-examples-4a81ada920c​.