BUILDING MOBILE USER INTERFACE

BY APPLYING DESIGN PRINCIPLES

LAB University of Applied Sciences

Bachelor of Business Administration, Business Information Technology
2022
Khanh Dinh
 Abstract

Author(s) Publication type Published

Khanh Dinh Thesis, UAS 2022
Number of pages
32
Title of Publication
Building mobile user interface by applying design principles

Degree and field of study

Bachelor of Business Administration, Business Information Technology.
e.g. title and organisation of the thesis supervisor
Name,
Aki Vainio, Lecturer, LAB UAS

Abstract
The purpose of this thesis is to develop a mobile user interface applied design princi-
ples and enhances user perceptions of quality. Six design principles are mentioned in
this research paper, which are Visual hierarchy, similarity, proximity, common region,
common fate, and symmetry.
The empirical part of this thesis employs a qualitative research method, deductive
reasoning, and design science research. Due to the empirical method starts with de-
sign principles as a theoretical part and applies them in a test designed for mobile in-
terfaces, where two mobile interfaces are created based on the menu screen of food
application.
The study shows that using design principles improved the aesthetic appeal and use-
fulness of mobile interface for users. It assisted users in precisely completing speci-
fied tasks in addition to pleasing the user’s eyes.

Keywords
Mobile user interface, Use interface design, Design principles
Contents

1 INTRODUCTION ....................................................................................................... 1
1.1 Research Background ........................................................................................ 1
1.2 Research Problem .............................................................................................. 1
1.3 Thesis Objectives and Research Questions........................................................ 2
1.4 Theoretical Framework ....................................................................................... 3
1.5 Research Approach ............................................................................................ 3
1.6 Methodology and Data Collection Methods ......................................................... 4
1.7 Thesis Structure ................................................................................................. 7
2 LITERATURE REVIEW ............................................................................................. 8
2.1 User interface design .......................................................................................... 8
2.1.1 User interface design’s principles ................................................................ 9
2.1.2 The significance of UI design ......................................................................14
2.2 Mobile user interface .........................................................................................14
2.3 User perceived quality .......................................................................................15
3 EMPIRICAL RESEARCH ..........................................................................................16
3.1 The non-applied principles interface ..................................................................16
3.2 The applied principles interface .........................................................................21
❖ Apply Principle of Visual Hierarchy: ...................................................................22
❖ Apply Principle of Similarity: ...............................................................................23
❖ Apply Principle of Proximity ...............................................................................23
❖ Apply Principle of Common Region ...................................................................24
❖ Apply Principle of Common Fate........................................................................24
3.3 The comparison between two interfaces ............................................................26
4 CONCLUSION ..........................................................................................................27
5 SUMMARY ...............................................................................................................28
References ......................................................................................................................29
 1

1 INTRODUCTION

1.1 Research Background

Currently, it is essential for mobile applications to have a mobile user interface design that
leaves a lasting impression on users (Mishra 2019).

Mobile user interface design focuses on a user’s interaction with the output on the phone’s
screen. A good user interface (UI) design enhances the user experience (UX) by providing
intuitive design components on the screen. UI designers concern with the visual appeal and
usability of a website, software product or an application. (Harris 2018, 4.) When it comes
to mobile app design, the importance of the mobile screen backdrop is evident. Over the
past decade, users’ preferences have developed and changed, which results in the intro-
duction of several new trends in the design sector generally and mobile interface design
specifically. UI designers all over the world have realized that employing components and
adopting design principles may aid in guiding the user’s eyes and enhancing text readability.
(Costa 2018.)

The purpose of a great user interface is to make the user experience uncomplicated, fluid,
and intuitive that requires the least amount of effort from the user to achieve the maximum
desired result. The UI is essential for meeting user expectations because it reflects the
accessibility, visual aesthetic, and ease of use. Additionally, UI anticipated the demands of
the user and then satisfies those needs, an appropriate blend of effective aesthetics and
efficient responsiveness will boost the mobile application’s conversion rates. (Indeed Edito-
rial Team 2021.)

1.2 Research Problem

When UI is executed correctly, users are unaware of it. However, when it is executed poorly,
users are unable to get over it to meet their requirements on phone.

In a sense, badly designed user interfaces effect user experience directly by creating dis-
content, stress, financial loss, lower efficiency, and output in the absence of UI design prin-
ciples. UI flaws can have a direct and immediate influence on the app’s performance, lead-
ing to its failure if not corrected swiftly. Some basically common problems usually appear
on mobile application which are easily caught such as color contrast, alignment, inappropri-
ate button size, low contrast, typographical hierarchy, etc. (Sharma 2019.) They may result
in:
 2

- Users devote a greater amount of effort to adapt to the interface

- Causing discomfort for users

- Errors happen while users using application

- Make the total interface sloppy and complicated for users

1.3 Thesis Objectives and Research Questions

The researcher’s clear sense of purpose and direction is more widely accepted as proof of
research objectives. It is possible that either option will suffice. Because research objectives
necessitate more rigorous reasoning, which is derived from the use of more formal lan-
guage, they are more likely to lead to higher specificity than research or investigation ques-
tions. (Ayiro 2012, 166.)

Mobile application user interfaces can be the difference between a very successful program
and one that fails to make an impression or, worse, leaves a lasting unfavourable impres-
sion on the user experiences. All components of mobile interfaces are critical when they are
combined to design high-quality apps. As each app is unique and there is no single is to
determine if applying UI design principles to the creation of a mobile user interface influ-
ences users’ viewpoints. (Niebla 2021.)

To put it another way, the primary objective of this thesis is to develop a mobile user inter-
face that applies design principles and improves user perceptions of quality. This research
may aid UX/UI designers in determining the influence of design principles on mobile user
interfaces and in understanding how to apply design principles to future design projects.

Research Questions

According to Ayiro (2012, 157), in quantitative or qualitative research, research questions

are items that reduce the purpose statement to questions that researcher attempt to answer.
These are created before focusing on the study’s actual methodology, such as the sorts of
data to be collected, analysed, and evaluated. The goal statements depict a single asser-
tion; however, research questions may consist of many inquires designed to study a topic
in depth. Both quantitative and qualitative research have research questions, but the ele-
ments or narration varies depending on the style of study being conducted.

The research analyses the main theme of UI design by applying its principles, to determine
if they can improve user perceived quality. Hence, the research focuses on the main re-
search question: How do design principles affect mobile user interface?
 3

In the empirical research, the researcher precisely explains the conducting design principles
in mobile user interface in order to support the main research question.

1.4 Theoretical Framework

In this thesis, the study framework and literature review were conducted to gain a funda-
mental understanding of how to design a better mobile user interface, and the focus was on
the perspectives of users when interacting with a mobile application whose user interface
is designed using UI design principles. This research framework is comprised of three pri-
mary concepts derived from the literature review study.

The first notion mentions user interface design for short in essence is creating visual inter-
face for software and machines. Especially, it introduces the primary criteria of the research
which is UI design principles and the significance of UI design. The second concept is mo-
bile user interface which illustrates the typically touch-sensitive screen on mobile phone
allows users to interact with the applications, features, and functions. The last concept is
user perceived quality, which concentrates on the users feeling, thinking, giving feedback
while experience services, products, etc.

1.5 Research Approach

The research approach is a strategy and technique that encompasses everything from
board assumptions to particular data collecting, analysing and interpretation procedures.
Consequently, it is determined by the nature of the research problem. The research ap-
proach is separated into two primary kinds which are the approach of data collection and
the approach of data analysis or reasoning. (Chetty 2016.)

Figure 1: Components of research approach (Chetty 2016)

 4

There are two main approaches of reasoning which are inductive and deductive. Generally,
they are highly different, but can also be complementary. Deductive researchers begin with
a plausible social theory before evaluating its implications using evidence. The deductive
research method is most closely associated with this thesis. The researcher considers what
others have done, reviews existing theories about what ever phenomenon which is re-
searched, and then puts those theories to the test. Using inductive technique, acquiring
data linked to the topic research is the initial stage. The researcher examines the data pat-
terns and formulates an explanation for them. Typically, researcher starts with collection of
observations and build up to a more board set of hypotheses based on those observations.
Finally, they shift from specific to broad. (DeCarlo 2018.)

Figure 2: Deductive research (DeCarlo 2018)

This thesis applies deductive reasoning. Due to the empirical process begins with the prin-
ciples of UI design (as a theory part) and applies all of them in a test intended for mobile
interfaces. In a sense, it can be understood as moving from the general theory to the specific
confirmation result.

1.6 Methodology and Data Collection Methods

The term “methodology” describes how the researcher approaches the problem and find
out the answer. It also refers to how the research paper is carried out in the social sciences
and thus, the assumptions, goals and objectives influence the applied method. (Taylor et
al. 2016, 14.)

Quantitative research is based on quantity or amount measurement. It can be used to de-

scribe phenomena that have a numerical value. Qualitative research looks at qualitative
phenomena such as quality or kind. (Kothari 2004, 3.) Furthermore, it also allows interview-
ees to express their emotions and opinion by using their own words. (Kuada 2012, 94.)
Qualitative research method is characterized by the exploration and comprehension of a
phenomenon. In comparison to quantitative research, qualitative research method is more
 5

adaptable in terms of expanding questions, learning about interviewee perceptions, devel-

oping theories based on participants’ perspectives and gathering information from people
sites. (Ayiro 2012, 87.) The third research method, known as mixed methods research, was
created by combining these two above methods, qualitative and quantitative methods. This
third method supports in connecting and improving the results sufficiently. The research
may focus on several different aspects, so this method helps to diversify the study’s view-
point and since one method supports not enough data so the end-results may be inexplica-
ble. (Saunders et al. 2016, 173.)

Obviously, this study puts qualitative research method into practice because this method
enables to raise the topics, issues that the researcher has not anticipated and that may be
essential to investigate. To construct concrete research, the first point to focus on is re-
search problem, which mentions about what have been happened with the mobile user
interface in this digital era, then leads to the main research question. To figure out the an-
swers, it directs the research to the main point that is literature review, where the UI design
principles are defined. The author decided to apply secondary research in this thesis due
to all the theories are based on published literature sources method, which is one of the
data collection methods and referred as secondary data collection. Specifically, information
about UI design, design principles, mobile user interface and so on, is provided by the re-
searcher, which can be looked for from Google books, LAB Primo, reliable academic web-
sites, etc. Later, the researcher starts building from an original mobile user interface which
is totally not applied any UI design principles. The following step, the author explains in
detailed step by step how the principles work with the interface.

Therefore, this thesis concentrates on the design process of mobile user interface based
on design science research, which is utilized in a variety of design and technology sectors
to develop artifacts. According to Venable and Baskerville (2012), design science research
is defined as the creation and evaluation of a new purposeful artifact to address a general-
ised kind of problem. (Teperi et al. 2021). In other words, design science research concen-
trates on developing improved solutions for certain problems. From the perspective of
knowledge creation, design science research has a dual objective: the application of
knowledge and the generation of knowledge. Specifically, the application of knowledge is
the creation of original or innovative artifacts that result in the change or improvement of an
existing problem. (Simon 1996, according to Baskerville et al. 2011, 544.) Hence, the re-
searcher decided to apply this research model to conduct the report.
 6

Figure 3: Design Science Research Cycles (Hevner et al. 2004)

There are three cycles of design science research which are relevance, design, and rigor
cycles. First, according to the relevance cycle, when researcher constructs or designs an
artifact utilizing theories as inputs, the artifact must be relevant and acceptable for the end-
use output. Second, the rigor cycle ensures that the artifact is primarily concerned with
research innovation and is based on a concrete knowledge foundation. The selection and
use of appropriate theories and procedures by researchers and the assessment of the arti-
fact form the basis of this cycle. Lastly, the core of any design science is design cycle, in
which activities are iterated more swiftly between the development of an artifact, its evalu-
ation, and subsequent feedback to modify the design future. (Hevner et al. 2004).

In this thesis, design principles are leveraged as theoretical inputs to construct a mobile
user interface artifact. The design process is then analysed on a regular basis so that the
mobile user interface may be adapted properly. Finally, the result may assist UX/UI design-
ers in their future careers, therefore fixing the problem and achieving the thesis objective.
 7

1.7 Thesis Structure

•INTRODUCTION
•Research Background, Research Problems, Thesis Objectives, Research Questions,
Research Methodology, Design Science Research and Data Collection Methods.
Chapter 1

•LITURATURE REVIEW
•User Interface Design including UI design principles, How important UI design is, Mobile
CHAPTER 2 User Interface, User Perceived Quality.

•EMPIRICAL RESEARCH
•Based on design science research, creating mobile user interface from applying UI
principles step by step, explain and assess in detailed how these principles work.
CHAPTER 3

•CONCLUSION
CHAPTER 4 •Answering the Research Questions and providing Limitations during the process.

•SUMMARY
CHAPTER 5 •Concluding the whole thesis.

Figure 4: Thesis Structure

 8

2 LITERATURE REVIEW

2.1 User interface design

In user interface design, communication is the essence of a specific interface and visual
communication factors account for 83% of people’s reception of external elements. User
interface is the source of information which user interacts with while using the software. (Li
et al. 2020). User interface design is the creation of interfaces with an emphasis on styling
and interactivity. The process of UI design is crucial for every project that requires human-
centred product design. According to Widawski (2021), typography, images, and other vis-
ual design elements are utilized in UI design to transform a plain interface into something
comprehensible and usable. (Kreimer 2021.) Design principles illustrate how people ob-
serve the world visually, including digital interfaces and specifically describe how humans
decide whether numerous separate pieces belong to the same group. Hence, these princi-
ples are connected in some manner to assist people in understanding and interacting with
interfaces in general. When it comes to design principles, there are several crucial elements
that go into designing a complete interface. The most significant element of design princi-
ples is colour; thus, the quickest approach to make users immediately impressed with the
interface and draw more attention is to use context appropriate colours. Regarding the de-
sign process, the great majority of colours have their own unique connotations and tremen-
dous communication potential (Li et al. 2020.)

According to Velarde 2019, the design principles most applicable to a UI designer are those
that define the connection between items on a visual display and how to make them operate
effectively together. The design principles apply to colours, lines, forms, backdrop, etc. In
terms of design principles, which include simplicity, similarity, proximity, closure, figure and
ground, continuity, order, symmetry, and synchrony. However, this thesis presents the def-
inition of UI design, six selected design principles, and the significance of UI design. Fol-
lowing is a list of the chosen design principles:

• Principle of Visual Hierarchy

• Principle of Similarity

• Principle of Proximity

• Principle of Common Region

• Principle of Common Fate

• Principle of Symmetry
 9

2.1.1 User interface design’s principles

Principle of Visual Hierarchy

The manner in which designers structure a website or application has a significant influence
on user experiences. Specifically, visual hierarchy concentrates on the arrangement of de-
sign elements in descending order of significance, with the most crucial information at the
top and the less crucial information moving below as the page scrolls. Since users scroll
from top to bottom, the most essential information should be located at the page’s top. The-
oretically, the design should include a clear hierarchy strategy. Users might become con-
fused if there is no hierarchy in a design, they may leave the interface without interacting
with anything or abandon the application out of irritation. Using a clear hierarchy in design
helps designers attract more potential clients. (Nielson 2021.)

Viewers will always establish visual associations between visual items. Not only will they
not know where to look first, but they will be also put off and finally leave if the design is
unbalanced. This principle emphasizes size, alignment, placement, and spacing, among
other factors. (Velarde 2018.)

+ Size: When something is larger than others, it will receive greater attention. The size of a
header is always more than that of a subheading, and the size of a subheading is always
larger than that of the body text. What users need to perceive initially is the information’s
primary purpose.

+ Placement, alignment and spacing: The way that elements are arranged also affects the
hierarchy position. When objects are lined up, human eyes tend to follow the line. When
objects are vertically aligned, the viewers will naturally follow them, like when reading a list
by scrolling down.

Principle of Similarity

Even when comparable design elements are separated, the human eye interprets them as
a single picture or shape. The brain appears to connect elements of similar essence. Human
eyes excel at filling “gaps” and linking “dots”. It naturally occurs. In other words, the shape,
color, and size of elements affect similarity. When objects with greater levels of similarity
are mixed with a group of different objects, the brain commits time and energy to create link
between them to comprehend their connection. The similarity law can aid in the formation
of linkages between related elements. This connection might be physical or intellectual.
Designers may take advantage of this natural human inclination by assisting the users’ eyes
in identifying elements of their design that they wish to emphasize. (Soegaard 2022.)
 10

Figure 5: Principles of Similarity elements (Soegaard 2022)

Furthermore, due to the law of similarity, related things generally appear categorized to-
gether. Respectively visual and auditory stimuli can be grouped. (Cherry 2021.) Especially,
objects that are visually similar in size, shape and color will be visually grouped together,
even if they are not in proximity (UXTOAST 2022).

Figure 6: Principle of Similarity colour elements (UXTOAST 2022)

 11

Principle of Proximity

According to UXTOAST (2022), objects placed in close proximity will be visibly grouped
together. Many of these principles appear to be self-evident, and this principle is no excep-
tion. The greater the visual association between two items, the closer they are put near one
other. When it comes to UI design, this is crucial to understand. Otherwise, even if objects
are different in colour, size, and shape, the distance (proximity) between some of the circles
is the only thing that has altered (Oppermann 2020).

Figure 7: Principle of Proximity (Oppermann 2020)

As stated by Fitzgerald (2021), even though some of the objects have different colours, the
three rows of objects on the left side belong to one group. And, while being the same size
and colour as many of the shapes on the right stands out as a distinct group. This is since
the three rows of forms on the left are closer together than the shapes on the right. (See
figure 8)

Figure 8: Principle of Proximity (Fitzgerald 2021)

 12

Principle of Common Region

The common region theory mentions that objects within a border are viewed as a group and
are assumed to share some fundamental feature or functionality (Harley 2020). Figure 9
shows how the border around the three main circles unites them and separates them from
the other, less-related surrounding circles. Hence, using a border or background colour to
create a container for related objects in a user interface enables users to grasp the structure
and interconnections of the UI quickly and effectively.

Figure 9: Principle of Common Region (Harley 2020)

Principle of Common Fate

According to Shikhrakar (2019), objects whose motions are coordinated in the same direc-
tion are considered to be more interconnected. Individuals see items moving in the same
direction as more connected than those that are stationary or moving in different directions.
The common fate principle categorizes related components so that users may connect them
and demonstrates the relations between elements. People who are interested in one ele-
ment may want to investigate others. Those who are not, on the other hand, will ignore
similar elements, saving their time. Furthermore, by coordinating across design elements,
common fate reduces the complexity of interfaces and clarifies the design. Consequently,
this principle assists users in locating the primary point of emphasis. Objects in continual
motion attract constant attention and become the figure element, which means they become
 13

the point of focus. The fundamental purpose is to quickly locate the interface’s primary fea-
tures.

Figure 10: Principle of Common Fate (Colomy 2021)

Principle of Symmetry

The center of an arrangement of symmetrical objects draws the viewers’ attention. When
UI elements are symmetrical to each other, it is simpler to identify patterns. Symmetry
makes it easy to focus on the important. When navigation options are symmetrical, better
stability is seen. This is an excellent method for designing gallery layouts on mobile inter-
face. (Colomy 2021.)

Figure 11: Principle of Symmetry (Colomy 2021)

 14

2.1.2 The significance of UI design

According to Aziz (2021), a good UI prevents designers from repeatedly redesigning inter-
faces, which saves time and cost. If a designer spends a significant amount of time on UI
design, there will be less obstacles during and after the launch since users have no prob-
lems with the interfaces. Because a flawless interface does not require regular maintenance
and upgrades. Moreover, according to Charles Eames, the duty of the designer is that of a
gracious host who anticipates the guests’ requirements. A good UI captures the user’s at-
tention and keeps them engaged. However, only an intuitive UI will keep people engaged.
Therefore, when users land on an application, they should feel enticing to return as fre-
quently as they like.

The primary objective of UI design is to make contents (pictures, text, and other design
components) appear more engaging and navigation simpler. UI design facilitates compre-
hension, hence enhancing user happiness. A pleased customer is more likely to return to
the application and suggest it to others. Positive evaluations will drive designers to further
develop the product or service’s usability to increase its value and outperform the competi-
tion. (Aziz 2021.) Furthermore, users can quickly access and operate a consistent applica-
tion since they do not need to learn anything new. Obviously, users are encouraged to
interact with the mobile interface, which improves its usefulness. A unified user interface
promotes communication. The designers employ aesthetic consistency to make the content
accessible, prioritize, and emphasize the most important aspects.

2.2 Mobile user interface

A mobile user interface is a mobile device’s display or screen. It is the area where users
interact with the displayed content. Most of these user engagements are touch-based and
take place on vibrant touchscreen displays brimming with high-level interactions. Obviously,
mobile UI design concepts differ from desktop UI design ideas. On the other hand, mobile
UI relates to the behaviour and appearance of an app during user interaction. The UI is one
of the final steps of app development and a crucial component of the user experience. The
emphasis is on creating a pleasant and user-friendly experience for users. (Palko 2021.)

The first step in efficiently utilizing mobile device interfaces is to understand the use context.
The design of mobile user interfaces is challenging, since designers attempt to gracefully
show an almost infinite amount of information, and user experience difficulties are accentu-
ated on mobile devices. Specifically, text-heavy interfaces lower engagement when user’
 15

eyes glaze over, and they turn to a different application. Therefore, design principles have
always had a significant impact on design, as they describe how human mind receives and
organizes information. (McWherter and Gowell 2012, 90-91.)

2.3 User perceived quality

In today’s user-centric environment, both manufactures and service providers place a pre-
mium on service quality. In other words, the need of giving high quality service is so well
recognized that certain firms demand it not just for success but also for existence. Conse-
quently, attaining and sustaining user perceived quality is seen as a crucial approach for
the effective delivery of total customer satisfaction and retention (Taylor and Baker, 1994;
Reichheld and Sasser, 1990, according to Negi, 2009,700 -701.) Alternatively, the user’s
perception of a product’s quality is known as user perceived quality. The sort of quality that
production and service teams often analysed, such as pass/ fail criteria, tolerance values,
dimensions, and defect analysis, is distinct from perceived quality. It is frequently defined
by a person’s initial observation and interaction with a product or service. (Espinosa & As-
sani, 2019.)

According to Dzida et al., 1978, “user perceived quality” is known as “user-oriented system
behaviour” or “user friendliness”. All these phrases refer to system characteristics, such as
simplicity of use, tolerance of user failures, reduction of user error possibilities, minimum
astonishment behaviour, etc., that are seen essential for efficient man-computer interaction.
They relate to “how” systems behave to fulfil the limits and requirements of users.
 16

3 EMPIRICAL RESEARCH

The author of the thesis created two mobile interfaces based on the menu screen of a food
application to gain a broad understanding of the effect of design principles on mobile user
interface. In this section, two mobile interfaces are mentioned, along with an explanation of
whether each interface adheres to design principles. The interfaces are designed by using
Adobe Illustrator, with iPhone X as a chosen model (1125x2436 pixels).

3.1 The non-applied principles interface

The first interface is designed without applying six design principles as they are mentioned
in literature review part.

Figure 12: The non-applied principles interface.

 17

• None of Visual Hierarchy:

Figure 13: Screen shot of food information section

As the screen shot image displayed above, the interface does not utilize Principle of Visual
Hierarchy. The usage of same typeface with capital letters and almost same size for food’s
names and description may cause confusion among users. The price would be the most
essential piece of information; however, it is not placed in an easily scannable location,
causing users to instantly skip it.

Besides, the alignment of each food portion is inconsistent, the gap between information is
extremely close and overlapping, and there is a slight vertical gap on the left, but none on
the right, which may make users feel uncomfortable.
 18

It is diametrically opposed to Principle of Visual Hierarchy when the orange text “Add+” has
nearly analogous colour with the background. It provides low contrast to the text, and users
with colour blindness may be unable to discern the text from the backdrop.

• None of Similarity

Figure 13 demonstrates furthermore that the interface did not adhere to Principles of Simi-
larity as well. For example, not all food pictures have the same shapes which does not
contribute to a unified interface.

Figure 14: Foods’ names, descriptions, and prices

As the principle of Similarity mentioned in the theorical part, the brain seems to link items
of comparable kind. Therefore, human eyes may collect the foods’ names, descriptions,
and prices as a group (see Figure 14).

• None of Proximity

Even if the navigation button “Add” is orange, which is distinct from other texts, human eyes
nevertheless presume it is in the same group as others. Furthermore, the spacing between
each meal item is too close and unequal (see Figure 13), making the user interface sloppy
and unobvious.

• None of Common Region

As the principle of Common Region mentioned, objects inside a border are viewed as a
group and are presumed to have some common information or functionality. The lack of this
principle is shown in the special text in special offer meal, which should be arranged in a
sperate location so that users may take a fast glance to comprehend the information. There-
fore, to make the connection between the pictures and the related contents, border would
 19

be an ideal solution to gather all of them in one area, which researcher will demonstrate
later.

• None of Common Fate

The interface also lacks the Principle of Common Fate; thus, users may be unaware that
each food section has a variety of dishes. However, they do not know to swipe right since
there is no indication that there are other items on the next side. (See Figure 13). Since
there is a gap on the left but none on the right, the interface has become more complicated.
Instead of wasting time understanding out how the interface functions, users may exit im-
mediately.

• None of Symmetry

Figure 15: Screen shot of restaurant information and user’s profile

The interface is imbalanced and asymmetrical due to the placement of “Restaurants”,

“Search”, “Contact us”, “Profile”, and the middle bag displaying the amount of food that user
orders. In addition, they occupy a substantial portion of the interface, which is unnecessary
and inappropriate. (See Figure 15).
 20

Figure 16: Screen shot of heading section

In addition, “Menu” section is located on the left side, close to food section, which is unob-
vious and makes user’s comprehension difficult. (See Figure 16).

Hence, the researcher produces a strategy including objectives that will make the interface
more appealing and satisfy the users when applying six principles:

❖ The whole user interface is depicted in clear detail by taking advgantage of the
space and reshaping images of food to the same geometric forms.

❖ Balanced, straightforward, and symmetrical layout food products must be distinctly

separated in terms of information, pricing, and images.

❖ The combination of dishes that are not seen on other sides of the interface may be
easily identified by users by adding a few indications.
 21

3.2 The applied principles interface

In this section, a food menu interface utilizing six design principles is demonstrated and the
design process is detailed in detail. Here is the interface looks like (see Figure 17):

Figure 17: The applied principles interface

 22

❖ Apply Principle of Visual Hierarchy:

Figure 18: Screen shot of food information

The names and descriptions of foods altered in a distinguishable manner. The foods names
are written in Bebas Neue typeface with capital letters to emphasize the primary information
while the foods descriptions used Tahoma font with smaller size to highlight the name and
price of food as Visual Hierarchy Principle mentioned in the theorical part.

Besides, the interface’s alignment is greatly changed to make it more comprehensible, and
the new interface makes use of space and gap to avoid making the information confusion.
 23

Figure 18 also illustrates the alteration of the orange “Add+” in Figure 13 which is turned
into a clicked button. Specifically, instead of using the orange color for “Add+”, the re-
searcher changed it to white, which is inherently a high contrasting hue of orange and
painted a border around it on an orange backdrop to generate and draw users’ attention.

❖ Apply Principle of Similarity:

Since human eyes typically scan visuals first, of all information conveyed to the brain, al-
most is visual, then text; Figure 18 contains the visuals of foods are united into circle shapes
and same size, which still depict the food elements in detail. Hence, the relationship be-
tween the food descriptions and images is displayed obviously, and the users can readily
distinguish between the name, food information and the price.

❖ Apply Principle of Proximity

Figure 19: The turquoise lines

 24

In order to implement the Proximity principle, the researchers divided distance between
each food section using turquoise lines. (See Figure 19). This resulted in an obvious ar-
rangement, distinct separation of food sections, and adequate space.

❖ Apply Principle of Common Region

Depicted in Figure 19 is the installation of a new area for special offer meals. This section
allows users to quickly recognize if food is special offer or not. Additionally, each portion
was created with a shadow border. This facilitates a clearer display of the specific infor-
mation for each portion when the users receive information. Utilizing the Principle of Com-
mon Region ensures that interfaces are well organized, which conveys harmony and com-
fort to users.

❖ Apply Principle of Common Fate

Figure 20: Dots sign

Principle of Common Fate is fundamental in motion design to guide human eyes in the aim
side. Therefore, Figure 20 provides a sign consisting of dots which leads human eyes follow
the correct direction; in this case, users are aware that they must swipe right to continue
seeing many dishes behind.

❖ Apply Principle of Symmetry

Figure 21: Menu section

 25

The utility buttons such as search, restaurant, contact us, etc.…were relocated to the bot-
tom toolbar and grouped symmetrically around the shopping bag which makes the inter-
face’s layout more aesthetically pleasing and balanced. In addition, lowering these utility
buttons created more rationale for the interface by providing more space for the previously
mentioned special offer meal. After applying Principle of Symmetry, the “Menu” section was
moved to the top middle of the interface to be separated with the food section and make
the whole screen symmetrical. (See Figure 21).
 26

3.3 The comparison between two interfaces

Figure 22: Food menu interface before and after applying Design Principles

After utilizing six design principles and taking account the goals outlined above by the re-
searcher, the food menu interface has achieved all these goals. Generally, in the new inter-
face, the names, descriptions, images, and pricing followed same style respectively to indi-
cate that they belong in same group and perform comparable functions which affected by
Visual Hierarchy, Proximity and Similarity Principles. The implementation of these three de-
sign principles (Common Region, Common Fate, and Symmetry) has resulted in an inter-
face that is aesthetically pleasing, symmetrical, and easy for user to comprehend. Overall,
design principles created a decent graphical user interface for any application or website,
which provides users with clearer and simpler instructions for locating information.
 27

4 CONCLUSION

Humans routinely embrace and accept design principles in a variety of contexts, including
artworks, aesthetic products, and mobile interface design. In the empirical part above, the
author described in depth the obvious differences between the two interfaces before and
after applying six design principles in order to support the thesis question, which is: How do
design principles affect mobile user interface? The non-applied design principles mobile
interface now turns into an aesthetic mobile interface, which is more attractive and appeal-
ing to use, showing a high degree of user satisfaction. The study also confirmed six design
principles are extensively used in mobile user interfaces and can help UX/UI designers learn
more about aesthetic design principles.

Overall, design principles have helped to create a decent mobile user interface, which pro-
vides a clear direction for user to access information, makes tasks easier for users to com-
plete and speeds up processes.

The conclusion of this research may be subjective because there was no user survey, which
is one of thesis’s limitations. As a result, the conclusion is based on the author’s evaluation
when developing two mobile interfaces. However, as the author pointed out earlier, this
research conducted the design research process method, which entails providing a specific
knowledge foundation on the research topic, then building a suitable artifact applied that
theory foundation to make evaluation and development for subsequent projects in the fu-
ture.

The recommendation of the author for the future research is that this thesis concentrates
on six design principles specifically, there are a lot of other aspects of aesthetic department
affecting mobile user interface, which need to be explored and examined in order to learn
more the user experience, when user interface is becoming more advanced changes over
time. Additionally, it is possible to conduct a survey which can make the thesis more objec-
tive and include more user’s comment sections.
 28

5 SUMMARY

User interface is crucial for living up to user expectations because it represents accessibility,
aesthetic appeal, and usability. It is now common knowledge among UI designers that using
components and implementing design principles help to guide the user’s eyes and improve
text readability. When UI is executed correctly, users are unaware of it. However, when it is
poorly implemented, users are unable to overcome it to satisfy their phone’s requirements.

The theoretical and empirical parts of this thesis are primary sections which are found in
chapters 2 and 3, respectively. Chapter 2, which starts with the fundamental definitions
relating to user interface design and mobile interface to help readers understand the general
background of the topic, followed by the introduction of six design principles, the signifi-
cance of user interface and user perceived quality.

In chapter 3, two mobile interfaces are developed to support the applying process of design
principles. The artifacts are based on the menu screen of a food application to gain a broad
understanding of the effect of design principles on mobile user interface. The significant
differences between the two interfaces are explained at the end of this chapter, which is
also an answer for the research question of this thesis.

Chapter 4 concludes the thesis, outlining the limitations and making some recommenda-
tions for more research in the future.
 29

References

Written References

Ayiro, P. 2012. A Functional Approach to Educational Research Methods and Statistics:

qualitative, quantitative, and mixed methods approach. New York: The Edwin Mellen
Press.

DeCarlo, M. 2018. Scientific Inquiry in Social Work. Creative Commons Attribution-Non-

Commercial-ShareAlike 4.0 International License.

Harris, P. 2018. What Is User Interface Design? 1st Edition. New York: The Rosen Pub-
lishing Group.

Kuada, J. 2012. Research Methodology: A Project Guide for University Students. 1st Edi-
tion. Frederiksberg: Samfundslitteratur Press.

Kothari, C. 2004. Research Methodology: Methods and Techniques. Second Edition. New
Age International (P) Ltd.

McWherter, J. & Gowell, S. 2012. Professional Mobile Application Development. Indiana:

John Wiley & Sons.

Taylor S., Bogdan R. & DeVault M. 2016. Introduction to Qualitative Research Methods: A
Guidebook and Resource. 4th Edition. Canada: John Wiley & Sons.

Saunders, M., Lewis, P. & Thornhill, A. 2016. Research Methods for Business Students.
7th Edition. Essex: Pearson Education Limited.

Electronic References

Aziz, S. 2021. The Importance of User Interface Design in Mobile Applications. Retrieved
on 9 July 2021. Available at: https://invozone.com/blog/the-importance-of-user-interface-
design-in-mobile-applications

Baskerville, R., Kaul, M. & Storey, V. 2011. Genres of Inquiry in Design-Science Re-
search: Justification and Evaluation of Knowledge Production. MIS Quarterly, Vol. 39. Re-
trieved on 13 June 2022. Available at: https://web-s-ebscohost-
com.ezproxy.saimia.fi/ehost/pdfviewer/pdfviewer?vid=0&sid=6db781d1-84d9-4e92-bde1-
f34ed66deec4%40redis
 30

Colomy, M. 2021. How to implement Gestalt Principles. The Z Rule, and the Rule of
Thirds in Design. Retrieved on 13 August 2021. Available at: https://feltmag-
net.com/misc/The-Basics-of-Good-Graphic-Design

Costa, R. 2018. Graphic backgrounds: 6 great trends for mobile UI/UX. Retrieved on 07
November 2018. Available at: https://www.justinmind.com/blog/graphical-backgrounds-
trends-mobile-ui-ux/

Cherry, K. 2021. Gestalt Laws of Perceptual Organization. Retrieved on 25 April 2021.

Available at: https://www.verywellmind.com/gestalt-laws-of-perceptual-organization-
2795835#:~:text=The%20law%20of%20pr%C3%A4gnanz%20is,appear%20as%20sim-
ple%20as%20possible

Chetty, P. 2016. Importance of Research Approach in a Research. Retrieved on 12 Octo-

ber 2016. Available at: https://www.projectguru.in/selecting-research-approach-business-
studies/

Chichi, U. 2020. Authentic Nigerian Fried Rice. Retrieved on 7 December 2020. Available
at: https://www.mydiasporakitchen.com/authentic-nigerian-fried-rice/

Dzida, W., Herda, S. & Itzfeldt, D. 1978. User-Perceived Quality of Interactive Systems.
IEEE Transactions of Software Engineering. Vol.SE-4. Retrieved on 4 July 1978. Availa-
ble at: https://lut.primo.exlibrisgroup.com/permalink/358FIN_LUT/1hu-
jjmv/cdi_proquest_journals_195574534

Espinosa, M. & Assani, K. 2019. Perceived Quality – What it is and why it is Important.
Retrieved on 23 December 2019. Available at: https://userwiseconsulting.com/Perceived-
Quality-What-it-is-and-Why-it-is-Important#:~:text=A%20user's%20percep-
tion%20of%20the,dimensions%2C%20and%20analysis%20of%20defects.

Fitzgerald, A. 2021. What is The Law of Proximity & Why Does it Matter in UX Design?
Retrieved on 1 July 2021. Available at: https://blog.hubspot.com/website/law-of-proximity

Harley, A. 2020. The principle of Common Region: Containers Creates Groupings. Re-
trieved on 12 July 2020. Available at: https://www.nngroup.com/articles/common-re-
gion/#:~:text=Definition%3A%20The%20principle%20of%20com-
mon,part%20of%20the%20same%20group.

Hevner, A. 2004. A Three Cycle View of Design Science Research. Scandinavian Journal
of Information Systems. Available at: https://www.researchgate.net/publica-
tion/254804390_A_Three_Cycle_View_of_Design_Science_Research
 31

Hevner, A., March, S., Park, J. & Ram, S. 2004. Design Science in Information System
Research. MIS Quarterly, Vol. 28. Retrieved on 13 June 2022. Available at: https://www.re-
searchgate.net/figure/Organizational-Design-and-Information-Systems-Design-Activities-
Adapted-from-J_fig1_201168946

Indeed Editorial Team, 2021. What is a User Interface? (Definition, Types and Examples).
Retrieved on 17 September 2021. Available at: https://www.indeed.com/career-advice/ca-
reer-development/user-interface

Kreimer, I. 2021. User Interface Design: Definition, guidelines, and process. Retrieved on
20 May 2021. Available at: https://maze.co/collections/ux-ui-design/ui-design/

Li, X., Li, Y. & Jae, M. 2020. Neural network’s selection of color in UI design of social soft-
ware. Springer-Verlag London Ltd. Retrieved on 29 May 2020. Available at:
https://lut.primo.exlibrisgroup.com/permalink/358FIN_LUT/1hujjmv/cdi_proquest_jour-
nals_2488036714

Palko, I. 2021. Mobile User Interface (Mobile UI): What is, Patterns, Examples & How To.
Retrieved on 19 December 2021. Available at: https://shoutem.com/blog/mobile-ui/

Maggie, Z. 2020. Beef-Pan Fried Noodles. Retrieved on 29 June 2020. Available at:
https://omnivorescookbook.com/beef-pan-fried-noodles/

Mishra, S. 2019. Significance of UI/UX design in mobile applications. Retrieved on 19

April 2019. Available at: https://uxdesign.cc/significance-of-ui-ux-design-in-mobile-applica-
tion-f90b2c56c204

Negi, R. 2009. User’s perceived service quality of mobile communications: experience

from Ethiopia. International Journal of Quality & Reliability Management. Vol 26. Retrieved
on 14 January 2009. Available at: https://www-emerald-com.ezproxy.saimia.fi/insight/con-
tent/doi/10.1108/02656710910975769/full/pdf?title=users-perceived-service-quality-of-mo-
bile-communications-experience-from-ethiopia

Niebla, H. 2021. 10 Common UI Design Mistakes (And How to Avoid Them). Retrieved on
06 August 2021. Available at: https://careerfoundry.com/en/blog/ui-design/common-ui-de-
sign-mistakes/

Nielson, Z. 2021. Principles of Design. Retrieved on 20 July 2021. Available at:

https://xd.adobe.com/ideas/process/ui-design/5-principles-design/

Oppermann, L. 2020. The Gestalt Principle of Proximity – in action. Retrieved on 29 De-

cember 2020. Available at: https://uxdesign.cc/how-to-enhance-your-design-with-the-ge-
stalt-principles-of-proximity-a7828452058b
 32

Savita, G. Spicy Soba Noodles Vegetable Stir Fry. Retrieved on 18 May. Available at:
https://www.chefdehome.com/recipes/851/spicy-soba-noodles-vegetable-stir-fry

Sharma, O. 2019. Common UI Problems in Apps. Retrieved by 28 February 2019. Availa-

ble at: https://www.appfutura.com/blog/common-ui-problems-in-apps/

Shikhrakar, S. 2019. Gestalt Principle: Common Fate (Using Coordinated Motion in Design
to Associate Relations). Retrieved on 17 November 2019. Available at: https://ux360.de-
sign/common-fate-design/

Soegaard, M. 2022. The Law of Similarity – Gestalt Principles. Retrieved on 5 June 2022.
Available at: https://www.interaction-design.org/literature/article/the-law-of-similarity-ge-
stalt-principles-1

Teperi, A., Gotcheva, N. & Aaltonen, K. 2021. Design thinking perspective for developing
safety management practices in nuclear industry. Elsevier Ltd. Available at: https://www.sci-
encedirect.com/topics/engineering/design-science-research

UXTOAST 2022. Gestalt Principles in UI Design. Available at: https://www.uxtoast.com/de-

sign-tips/gestalt-principles-in-ui#:~:text=Law%20of%20Proximity,-Ob-
jects%20that%20are&text=This%20rules%20states%20that%20the,form%20field%20and
%20the%20label.

Velarde, O. 2018. Quick tips on how to use Hierarchy in design. Available at:
https://www.freepik.com/blog/quick-tips-on-how-to-use-hierarchy-in-design/

Velarde, O. 2019. An Overview of the Basics of User Interface Design (UID). Available at:
https://www.freepik.com/blog/overview-basics-user-interface-design-uid/