UID_AZY_COMP1650

User Interface Design
COMP1650

1
Contents
Introduction...................................................................................................................................................3
1. Current issues in user interface design for mobile design.........................................................................4
1.1 Screen size too small...........................................................................................................................4
1.2 Responsive design and adaptive design..............................................................................................5
1.3 Multimedia too less.............................................................................................................................6
1.4 Online and Offline Viewing................................................................................................................6
1.5 View of Portrait and Landscape in Android .......................................................................................7
1.6 Design Content Layout issue ..............................................................................................................8
1.7 Font choosing issue.............................................................................................................................8
2. Review guidelines, standards and the issues of legal, social and ethical..................................................9
2.1 Feedback (Don Norman).....................................................................................................................9
2.2 Visibility (Don Norman).....................................................................................................................9
2.3 I should always know where I am (Google) .....................................................................................10
2.4 Simplify My Life (Google)...............................................................................................................10
2.5 Legal Issues.......................................................................................................................................11
2.6 Social Issues......................................................................................................................................11
2.7 Ethical Issues ....................................................................................................................................11
3 Evaluation techniques..............................................................................................................................12
3.1 Heuristic evaluation (Don Norman’s design of everyday things).....................................................12
3.1.1 Visibility ....................................................................................................................................12
3.1.2 Feedback ....................................................................................................................................12
3.1.3 Mapping.....................................................................................................................................12
3.2 Usability Evaluation Basics ..............................................................................................................12
3.2.1 Is there Memorability?...............................................................................................................12
3.2.2 Is there Error frequency and severity? .......................................................................................12
3.2.3 Is there Subjective satisfaction?.................................................................................................12
3.2.4 Is there Efficiency of use?..........................................................................................................13
3.2.5 Is there Intuitive design?............................................................................................................13
4. The visual interface with color theory, font terminology, layout and the graphic design.......................14
4.1 Color theory for visual interface design............................................................................................14
4.2 Font terminology for visual interface design ....................................................................................15

2
4.3 Layout for visual interface................................................................................................................16
4.4 Design elements for visual interface.................................................................................................17
5. Design Implementation...........................................................................................................................18
5.1 Overview of Yangon Technological University application ............................................................18
5.1.1 Site Map of Yangon Technological University (See in figure 5.1.1) ........................................18
5.1.2 Overall Use Case diagram for Yangon Technological University (See in Figure 5.1.2)...........19
5.2 Home layout design in Application ..................................................................................................20
5.3 Open Day layout design in Application............................................................................................21
5.4 Facilities layout design in application...............................................................................................22
5.5 Evaluation of the Yangon Technological University application.....................................................22
6. Conclusion ..............................................................................................................................................23
7. Reference ................................................................................................................................................24
7.1 Website References...........................................................................................................................24

3
Introduction
The aim of developing the mobile application is to help to know university’s student about open
day information and other. That application is portable and easy to use about this application when they
came to university. But they need the general knowledge interested about the mobile application when
they before come to university. The mobile application is very compatible with university open day and
them.
The application must be easy to use for student and their parents. But some of the application
with many functions and features was trouble in their using the application (e.g. see in Pic 1). Really, that
application must be show directly about the main feature because those people will be confusing and can't
be remember easily when they using the application with many features like Newcastle University
Application. So that application is worst for student and their parents.
Pic 1 Newcastle University Application

4
1. Current issues in user interface design for mobile design
1.1 Screen size too small
Surfing the internet mobile typing area is too small in smart phone. And also sometime user
touched the wrong place on the smartphone because of that also screen size too small in smartphone (see
in 1.1.1 and 1.1.2 [http://www.sciencedirect.com/]). So that my mobile design will be simple with clearly
content to avoid the screen size problem.
1.1.1 Screen Size small 1.1.2 Screen Size big

5
1.2 Responsive design and adaptive design
The issue is choosing the one of the design from responsive or adaptive. Adaptive design is can’t
size automatically on the every device. Responsive can that but additional process or coding must be do
for responsive. So that I will choose the responsive design for my mobile design because my mobile
design user is parents, students and also they can use any device or smartphone with various screen size.
(See in 1.2.1 and 1.2.2)
1.2.1 Responsive Design 1.2.2 Adaptive Design

6
1.3 Multimedia too less
In mobile, we can’t add all of the multimedia in implementation of mobile designing because the
mobile screen is too small and some of the multimedia type is not compatible with mobile. So I choose
the text, images and audio multimedia type for learning easily to my application (See in 1.3.1 and 1.3.2).
1.3.1 Screen with multimedia less 1.3.1 screen with multimedia more
1.4 Online and Offline Viewing
The online application design must contain the warning message design for the lack of connection
and loading icon and etc. The offline application is very simple and response time is faster than the online
application because the data come from the local. That’s why I choose the offline (see in 1.4.1 and 1.4.2).
1.4.1 Newcastle University online application 1.4.2 Yangon Technological University offline application

7
1.5 View of Portrait and Landscape in Android
Android mobile design needs to support or design the two types of view of the application (e.g.
see in 1.5). That multiple view of the application is much work for the designer. And also my application
will be support the portrait and landscape view for the user.
1.5 Portrait and Landscape View of Skype

8
1.6 Design Content Layout issue
Some content of layout is match with laptop and desktop but in mobile, isn’t match with content.
Because the mobile screen size is small and difficult to design the layout with content. (See figure 1.6.1
and 1.6.2).
Figure 1.6.1 content layout in desktop Figure 1.6.2 content layout in mobile
1.7 Font choosing issue
And also the choosing the font is important for mobile design because font style can also change
the design of content layout. The main issues of the font are choosing Unicode and Zawgyi in Myanmar.
So I choose the English popular font “Arial” for any mobile device (See in figure 1.7)
Figure 1.7 Myanmar font errors with Zawgyi

9
2. Review guidelines, standards and the issues of legal, social and ethical
2.1 Feedback (Don Norman)
It is sending back information about what activity has been finish. Share button color changed
when after share button as feedback (see in 2.1.1 and 2.1.2)
2.1.1 before shared 2.1.2 after shared
2.2 Visibility (Don Norman)
All of functions are visible in application according the Don Norman's Design Principles. User
doesn’t know the functions are out of sight. Visibility drop down button and back button in my
application design. (see in figure 2.2).
Figure 2.2

10
2.3 I should always know where I am (Google)
User will know the current screen information every time when they using the application. The
action bar contains the title information (see in figure 2.3).
Figure 2.3
2.4 Simplify My Life (Google)
According the Google design standards users aren’t like the long sentences. The short phrases and
simple words are using in my application. It will help to user easy to read and understand. (See in figure
2.4)
Figure 2.4

11
2.5 Legal Issues
First, explain about the application data. The data is come from the staff of Yangon
Technological University. So the application need to update year by year because the data in the
application not to be same each year e.g. each of the programme duration time is changes upon the
government. And also may be the data is wrong when the policy of this university is changing
immediately. So that inform to user often for about the data in this application and also other application.
2.6 Social Issues
First, explain about the mobile user. The people mobile user is more than website user. That’s the
good one for creating the mobile application but they aren’t interesting about education because they
spend the time using Facebook and Game with smartphone. May be they will be use that application
sometime as first time testing or reading.
2.7 Ethical Issues
First, explain about the culture of the parents in the Myanmar. Most of parents are busy day by
day. So that may be most of the parents can’t come to the University for ceremony. Second, the
programme and other facility of University is display on the website and mobile. And also that isn’t
useful for the parents and the student in Myanmar because that’s way isn’t popular in here. That’s way
means looking the programme and facility on website or mobile.

12
3 Evaluation techniques
3.1 Heuristic evaluation (Don Norman’s design of everyday things)
3.1.1 Visibility
The more visible actions are the more likely end user will be able to see what to do next. In
compare, when actions are "out of sight," it makes them harder to find and see how to use.
3.1.2 Feedback
Feedback is about referring back information about what function has been done and what has
been finished, agreeing the person to continue with the function. Numerous kinds of feedback are
available for interaction color, design-audio and etc.
3.1.3 Mapping
This refers to the connection with controls and effects in the world. An example of a good
mapping with control and effect is the up and down arrows on a computer keyboard.
3.2 Usability Evaluation Basics
3.2.1 Is there Memorability?
After enter the mobile application, if a user can recall enough to use it well in future enter to the
mobile application.
3.2.2 Is there Error frequency and severity?
How regularly users make errors while using the system, how genuine the errors are, and how
users recuperate from the errors.
3.2.3 Is there Subjective satisfaction?
Is the user likes using the mobile application? That also measure user satisfaction. But the mobile
design provides their review from their mind when they using. How they reply the emotion with using the
application?

13
3.2.4 Is there Efficiency of use?
How fast knowledgeable user can achieve tasks? That is measure the user experience upon the
end user. If users are friendly with some of the mobile application they will not be difficult to use the new
mobile application. If they aren’t friendly need to learn the mobile application design nature.
3.2.5 Is there Intuitive design?
Understand of the architecture and navigation of the design without effort. That will be help to
end user.

14
4. The visual interface with color theory, font terminology, layout and the
graphic design
4.1 Color theory for visual interface design
Firstly explain about the color using in mobile application, website and windows application. In
mobile application choosing the color of the whole application is the important. If the color and activity
isn’t match the application is worst for everyone. And also this application will not be used in world.
What’s happens choosing wrong background color and font color? Yes it happen end user isn’t easy to
understand about the application and also complexity and can’t be memorable long time and disappointed
to use that application (See in figure 4.1.1). So the color choosing is important for all of the application
and platforms and also using our environment things e.g. the water bottle mustn’t be black. The basic
color theory is the white background with black font color. So that my application is use like that theory
but white background is too contrast for user in mobile application. So I choose the background color
light grey and black font color with bold. (See in figure 4.1.2).
Figure 4.1,1 choosing wrong color Figure 4.1,2 choosing right color

15
4.2 Font terminology for visual interface design
Secondly explain about the font using in mobile application and etc. It also important like’s
explanation above Color Theory. What’s happens choosing wrong font? Yes it happens end user isn’t
easy to read about the application content and also complexity and can’t be memorable long time and
disappointed to use that application (See in figure 4.2.1). So the font choosing is important for all of the
application and platforms. Most of the website used “Arial” font for readable the content smoothly. So
that users are friendly with that font. So I choose the font “Arial” in my application. (See in figure 4.2.2).
Figure 4.2.1 choosing wrong font Figure 4.2.1 choosing right font

16
4.3 Layout for visual interface
Thirdly explain about the layout using in mobile application and etc. It also important like’s
explanation above Color Theory. What’s happens placing wrong layout? Yes it happens end user isn’t
easy to understand about the application content layout and also complexity and can’t be memorable long
time and disappointed to use that application (See in figure 4.3.1). So the layout placing for the
information is important for all of the application and platforms. Most of the mobile application used
“action bar” is top of the layout. So that users are friendly with that layout standard. So I will follow that
layout standard follow. (See in figure 4.3.2).
Figure 4.3.1 placing wrong layout Figure 4.3.2 placing right layout

17
4.4 Design elements for visual interface
Finally explain about design elements using in mobile application and etc. It also important like’s
explanation above Color Theory. What’s happens using wrong design elements? Yes it happens break the
whole application design standard e.g. the one of the screen header text size is 14, all of the screen header
text size must be 14, not be different on each screen design. So I follow that design elements method for
my application (see in figure 4.4.1).
Figure 4.4.1
Same header
text size
between two
Screens

18
5. Design Implementation
5.1 Overview of Yangon Technological University application
The application objective is to help to know university’s student and their parents about open day
information and other. Firstly user can be seen six of the menu lists in home screen when users open the
application. Six of the menu lists are Programmes, Services, Facilities, Laboratories, Open Day and
About.
In Facilities user can be search by A to Z sorting by touching the list and then touched the desire
item and go to detail page.
And then next menu is the Open Day screen (Same Services, Programmes and Laboratories
screen). In Open Day screen, user can be seen the article list of doing in open day. And then user can go
the detail of the article screen by touching the desire article.
The last of the menu is the “About”. About mean describe about the Yangon Technological
University.
5.1.1 Site Map of Yangon Technological University (See in figure 5.1.1)
Figure 5.1.1 Site Map

19
5.1.2 Overall Use Case diagram for Yangon Technological University (See in Figure 5.1.2)
Figure 5.1.2 Use Case Diagram

20
5.2 Home layout design in Application
User can be seen vertical list view with the text in Home Screen. According discussed above font,
color layout and design elements are match with the Home screen of the Yangon Technological
University application. That screen using the font color is black and background color is gray and also
the font is “Arial” and also using the vertical list layout and using match design elements according
discussed above. According discussed above guidelines visibility, user can be seen all of the action in
home screen. This screen can go to further vertical list view by touching desire each list on screen except
from “About” list because if touching the about list it will show the detail of school information directly
(see in figure 5.2).
Figure 5.2 Home screen

21
5.3 Open Day layout design in Application
User can be seen vertical list view with the text in Open Day screen called sub screen (Note: sub
screen likes Programmes, Services and Laboratories). All of the using of color, font, layout, design
elements and guidelines in this screen are same with Home Screen. And also this screen can go to detail
of each list by touching desire list. (See in figure 5.3.1 and figure 5.3.2).
Figure 5.3.1 Sub Screen of Open Day Figure 5.3.2 Talks details screen of Open Day

22
5.4 Facilities layout design in application
User can be seen vertical list view with the text and Image in Facilities screen. All of the using of
color, font, layout, design elements and guidelines in this screen are same with Home Screen. And also
this screen can go to detail of each list by touching desire list. (See in figure 5.4.1 and figure 5.4.2).
Figure 5.4.1 Sub Screen of Facilities Figure 5.4.2 Bookshop details screen of Facilities
5.5 Evaluation of the Yangon Technological University application
According the Don Norman’s visibility, all of the functions not out of sight in my application and
as feedback, shared button color changing in all detail screen of my application and as mapping, back
button placing top of the left on all sub screen of my application. According usability evaluation when
enter to my application, recall every time to use it well in future because it so simple to using it’s called
memorable. So that simple application can avoid the error frequency and severity. And also user must
satisfy when using my application because all of the facts in my application are subjective. User must get
the experienced immediately when using my application first time it’s called efficiency of use. User must
easy to use that application without effort because it is Intuitive design.

23
6. Conclusion
The YTU application of the user is students and their parents. Their requirement is application
can help to user about the open day information and other.
We discussed the in User Interface Design. That discussion helps how to avoid the issue and how
to get the good results in the application design. Thirdly, we discussed the android design principles and
standards plus legal, social and ethical issues. Discussion of the android design principle is perfect to the
application design and user experience. And also the discussions of design standard help how to avoid the
user confusing. Last discussion is evaluation method of application design. That discussion help the what
process need in the application and who is the actor for the application.
Finally, drawing and evaluation the Low-fidelity prototype. The Low-fidelity prototype
drawing with the color theory, font terminology, layout, design elements and design principles.
So they can be easy to use the application without confusing.

24
7. Reference
7.1 Website References
Ryan Boudreaux, April 11, 2013, 12:56 AM PST, http://www.techrepublic.com/blog/web-designer/what-
is-the-difference-between-responsive-vs-adaptive-web-design/ (Visited time: 09:18 PM 10/05/2016)
Google, 4/24/2016, http://developer.android.com/design/get-started/principles.html (Visited time: 09:19
PM 10/05/2016)
Don Norman, Jan 8, 2008, http://www.slideshare.net/gelvan/design-principles (visited time: 09:20 PM
10/05/2016)
Usability.gov, Oct 07, 2013, https://www.usability.gov/what-and-why/usability-evaluation.html (Visited
time 09:26 PM 10/05/2016)

UID_AZY_COMP1650

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a UID_AZY_COMP1650

Semelhante a UID_AZY_COMP1650 (20)

UID_AZY_COMP1650