1

URI: urn:nbn:se:bth-16452

The user interface and user experience

of Web Design

Zackarias Madsen
Aleh Talstoi

Faculty of Computing
Blekinge Institute of Technology
SE-371 79 Karlskrona Sweden

1
This thesis is submitted to the Faculty of Computing at Blekinge Institute of
Technology in partial fulfillment of the requirements for the bachelor degree in
Software Engineering. The thesis is equivalent to 10 weeks of full time studies.

Contact Information:
Zackarias Madsen
Aleh Talstoi

zacke.madsen@gmail.com
talstoialeh@gmail.com

University advisor:
Dr. Ahmad Nauman Ghazi
Department of Software Engineering

Faculty of Computing Internet : www.bth.se

Blekinge Institute of Technology Phone : +46 455 38 50 00
SE-371 79 Karlskrona, Sweden Fax : +46 455 38 50 57

2
 _____________________________________________
ABSTRACT
Design principles are an important aspect in web designing, they build up a
trust towards the visitors and make the website look and feel professional. With this
thesis the goal is to show the importance of design principles and how big impact
they have on a website. We research this by having a survey where we recruit
participant from school and experienced web developers / Web designer. We prove
with this thesis that design principles have a big impact on visitors stay on a website.
From this research we can see that there is an comparison between a well and not
well integrated user interface, based on the result that we have achieved.

Keywords: design, web, UX, UI

3
 _____________________________________________
CONTENTS

Abstract 3

Contents 4

Introduction 5
1.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2 Purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Research Questions 8
2.1 Research questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.2 Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Expected result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Research Method 10
3.1 Theoretical Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 Research method (Empirical method) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2.1 Technology used for research method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.2 Research purpose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.2.3 Survey distribution and Sample . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.2.4 Instrument design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.3 Connection between empirical methods and research questions . . . . . . . . . . . . . . 12

Literature Review 13

Results and Analysis 22

5.1 RQ1: Are design principles important from a business perspective? . . . . . . . . . . . 25
5.2 RQ2: What are the factors that influence design principles? . . . . . . . . . . . . . . . . . 28
5.3 RQ3: How does user interface (UI) affect the users experience on a website? . . . . 30

Conclusion 31
6.1 RQ1: Are design principles important from a business perspective? . . . . . . . . . . . 31
6.2 RQ2: What are the factors that influence design principles? . . . . . . . . . . . . . . . . . 31
6.3 RQ3: How does user interface (UI) affect the users experience on a website? . . . . 31

Future Work 32

References 33

Appendix 34

4
CHAPTER 1
_____________________________________________
INTRODUCTION

1.1 Background
Nowadays, one cannot undermine the importance of design. If you look
around and take a closer look at the first item you see. It has been designed for you to
be able to use it easily. Absolutely everything around us has been designed this way
to fulfill its purpose in an easy way, from a simple pen, to more complex thing like
laptops and, more importantly in the context of this thesis, webpages. One of the
most common ways of using the internet is websites. It could be an e-mail website,
Facebook, a restaurant website with their menu, company site or YouTube. And that
is just a dust in universe of websites. As you might already understand, that is a big
part of almost everybody's life. In fact, according to statistics[2], over 54% (4,1
billion people) of whole population (7,6 billions people) who has at least once used
internet in any way by dec 31, 2017. Today we can do anything on web including
chat with friends, shopping, work, watch movies, play, research etc. Therefore it is
very important to keep up the standards of design.

To see what impact web pages with- and without applied design principles
have on users. We are going to compare two different websites that, both have the
same purpose and goal. The difference is that one of them have design principles
implemented, and the other do not. We will test this by creating various of different
tests on www.usabilityhub.com. The tests will focus on design principles that we
have stated as key principles from “The Essential Guide to UI Design” [1]. We
looked at what tests we could create on www.usabilityhub.com from that, we
excluded principles that was not able to be included in covering them in the tests.

To find the two websites we wanted to compare we needed to have the

mindset that they should have the same purpose and goal. We had this mindset so
that they would have the same equal chance in this thesis. Secondly we wanted one
of the website to have design principles applied and the other does not. To be able to
tell that those webpages we found are a good match for us, we had to do our research
about principle beforehand. After we got to know what design principles are - we
could clearly see if they are implemented or not, which made our search much easier.
Below you can find two websites that, in our opinion, is a good match.

https://www.mistergatesdirect.com/ MisterGatesDirect is a website where

they sell gates and fences and all that includes to that. This website have been
thought through and have implemented design principles.

http://www.gatesnfences.com/index.html GatesNFences is a website where

they sell gates and fences. The website have not been thought through and have not
implemented design principles.

5
1.2 Purpose

The thesis presented herein, reports the findings of a research study done to
evaluate the impact of design on users and customers of websites. Almost anyone can
find something useful in this thesis, such as thinking of different design principles
when designing a website or be more careful when choosing what website to use. It
could also give them a better understanding of how users think and what they focus
on while browsing web pages. Reading this thesis will both improve web-developers
as employees and web pages they create, making web a better place. Our main
audience will be web-developers and web-designers.

1.3 Scope

Since design and usability are very broad areas, we could not include
everything about it in this thesis. To narrow down the scope of this research study,
we chose to focus on a smaller part of it, which is ‘design principles’ of a satisfying
website design. In this thesis, we will dive into detail of important design
principles[1, Chapter 2, General principles] and explain how they can improve user
experience on the website as well as business for companies. Why web pages should
be using them for users and their own best. We will also cover some of possible
consequences of not including those principles in web sites.

6
Here are the design principles we looked at as part of this study:

Accessibility Flexibility

Operability Predictability

Aesthetically Pleasing Simplicity

Clarity Efficiency

Availability Familiarity

Consistency Obviousness

Control Directness

Safety

7
CHAPTER 2
_____________________________________________
RESEARCH QUESTIONS

2.1 Research questions

RQ1: Are design principles important from a business perspective?

We chose to research this question because we think that design principles may have
a positive impact on users stay on a companies website and therefore may result in a
positive business perspective.

RQ2: What are the factors that influence design principles?

With this question we would like to research what are the factors that influence
design principles. With that we mean that if each design principle have certain
factors that are important to fulfill the certain principle.

RQ3: How does user interface (UI) affect the users experience(UX) on a
website?

With this question we would like to observe how the user interface affect the user
experience of a website. With that we mean, how can a website with design
principles implemented affect the users experience while using a website.

8
2.2 Goal

With this thesis we want to achieve a better knowledge and understanding

around this topic and provide valuable information to other web developers that lack
this knowledge. For our thesis we would like to state which design principles that are
important ones that build up the foundation to a well designed user interface.

This thesis should also be directed towards companies that wants to establish
themself via websites or if they want to improve their current websites. So from this
thesis we want companies to get a better understanding of the importance of well
designed user interface from a business perspective.

2.3 Expected result

With the tests we have created our expected end result is that the website A
actually have the great design and the principles achieved when website B does not.
We also think people will have much better reviews about the web page that have
principles implemented and much worse about the one without them.

Our expected result also is that we can prove that having a well designed user
interface affects the user experience for users while using websites.

Lastly, with our expected result we believe that we can prove that a well
designed user interface is important in a business perspective through our research
question one.

9
CHAPTER 3
_____________________________________________
RESEARCH METHOD

3.1 Theoretical Method

We searched for relevant literature in research databases such as Scopus and

Summon (a database provided at the BTH Library). We searched in these databases
to look for the most relevant and peer-reviewed articles and books. Searching at the
BTH library, we could also find old theses that were deemed relevant to our study.
Secondly, we are going to perform a search in Diva where we can find old students
thesis about relevant topics. Lastly, we are going to search for books in Safari Books
Online and try to find books that will be helpful for our study.

Criteria for our search is:

● Not blogs
● Peer-reviewed articles
● Books written by certified writers or experienced developers

3.2 Research method (Empirical method)

The survey method used in this study is an explanatory survey where we

would like to draw conclusion of the population that participates in the survey and
make claims from the results. Online questionnaires are used as a data collection
method herein. We used convenience sampling and invited students and teachers at
BTH to be the participants. The participants that are students is a mix different
experience in using the web. See Table 1 below. The participants that are teachers are
experienced web users and web developers where they are included in experience 5.

Table 1. Participant’s experience

10
3.2.1 Technology used for research method

The technology used to build up our survey is mainly questionpro survey,

sponsored by BTH for students. This software was perfect for us to structure up our
questions, it had various of designs for questions to display to the participants.
Question pro also comes with a great user interface(UI) to review the results from the
survey. You can see all of the statistics you would like to see, such as: Average time
to complete the survey, individual participants responses and useful graphs to get a
better understanding.

To complement our survey we used tests where the participants explore the different
websites we are comparing. They do this by performing various of different tests on
a website called www.usabilityhub.com. The various of tests the participants
performed was:

● Five second test, The tester will see an image for five seconds and answer a
follow up question about the image.
● Navigation test, The tester will be able to navigate through images as they
would have on a real website. The one that creates the test is the one that sets
out the correct area to proceed to the next image.
● Design question test, The tester will be able to see an image all the time and
answer questions about the image.
● Click test, The tester will see and image and have an instruction on where the
would click for something, and they will just click on the image where they
think it is.

How we chose the website that we have compared was from our own
conclusion, where we had the mindset that the websites should have the same
purpose and goal with it. The website should be the opposite of each other, with that
we mean that one of the websites should have well integrated user interface while the
other does not. To evaluate how the website that has a great user interface actually
has that, we analyzed the website with our design principles and see if they fulfill it
and then the other way around for the other website.

3.2.2 Research purpose

The purpose and goal of the survey is to prove the importance of design
principles in websites and how it affects the users stay on a website. With the survey
and tests we can make conclusions based on what the participants answered and
prove our research questions with valid facts and data.

11
3.2.3 Survey distribution and Sample

We used convenience sampling to obtain the answers. We did not exclude

any participant based on their knowledge or area of interest, all participants were of
interest for data collection. The sample was obtained through mass e-mail to the
students of BTH. The e-mail was sent twice, first to recruit as many participants as
possible and the second one to thank everyone that participated and to serve as a
reminder to students who could not respond earlier. We also distributed the survey
personally to contacts that are experienced web developers/users. The total
respondents of the survey and tests were around 45. Out of these, 25 were 100%
complete answers.

3.2.4 Instrument design

The explained design below are for both websites that we are comparing, the
participants are performing the steps instructions-End question twice.

The survey instrument is structured along the following themes.

- Welcome screen: We explain how the survey will work and what the
participants can expect. We explain how long the survey will take and that it
is 100% voluntary and anonymous.
- Instructions: We link the tests we have on usabilityhub and explains the
participant to complete those tests before proceeding.
- Questions: After the tests the questions begins, the questions varies from a
Likert scale 1-5 to checkbox answers. All questions have a multiple answers
row section, where the participants can if they will explain more of their
answer.
- End question: We ask if the the participant have any furthermore questions
of the current website.
- End: The participant can if they want to leave their email that we can use to
email them if we have any follow questions.

3.3 Connection between empirical methods and research questions

With our empirical method, we will gather a lot of data about what people
think of design on two web pages we chosen. That will give us various opinions
about those sites which we will group up in subgroups and groups. For example,
group 1 will be people with positive feedback and group 2 will be those with
negative. Subgroups will be more detailed groups with more oriented opinions such
as: subgroup 1 will like color theme, and subgroup 2 will like simplicity of the page.
From answers on our question in the survey, we will also see if people would trust
those pages or want to buy from it, what kind of impression they get from being there
etc. This will help us to answer our most important questions about the role of design
principles in business and in user experience.

12
CHAPTER 4
_____________________________________________
LITERATURE REVIEW

Within this literature review is the results and explanations for each design
principle we include and exclude. The goal is to give a fundamental understanding of
each principle. The design principles are explained from the book [1] where Wilbert
O. Galitz describe these principles as “these principles are general characteristics of
the interface they apply to all aspects” and also states them as “They are fundamental
to the design and implementation of all effective interfaces, including both GUI and
Web”.

● Accessibility

System shall be usable by as many people as possible without needed

modifications.
It increases amount of people using specific service. More people -
more income for company. This principle includes many sub-principles such
as Operability, Simplicity and Perceptibility. Those will be explained below.
[1, Chapter 2, General Principles] [5]

● Operability

Sub-principle of Accessibility. Its main objective is to ensure that

system is usable by everyone, regardless of physical abilities. Operability is
achieved by minimizing repetitive actions and sustained physical effort. For
example, by making buttons larger, make positioning better and more
accessible elements of control. Operability also requires that the design is
compatible with assistive technologies.
This is an important principle because it makes it possible for even
more people to browse web page/ use its services. It improves named above
for more casual users because it makes elements more accessible and
therefore simpler to use [1, Chapter 2, General Principles].

13
● Simplicity

Sub-principle of Accessibility. Simplicity is hard to achieve because it

is bound with many other principles but it is absolutely not impossible.
Webpages that has achieved simplicity is a page with:
- Simple interface
- Most important/necessary functions showing first
- Respective hiding less used functions
- An obvious visual hierarchy
- Providing defaults in text fields/dropdowns
- Making most used actions simpler and more uncommon actions
harder.
- Being consistent.
- Having all unnecessary elements removed from the screen.

To summarize what simplicity is - a simple web page, usable and

understandable by everyone regardless of experience, literacy, or
concentration level. This is important to maintain, in a webpage, because it
makes it much easier for users to use this web page. When customer/user do
not have to think as much as act, when most of the actions are familiar,
simple, understandable and accessible - it is a successful and simple design.
Simplicity in web page, increases the chances that customers will return in
future. [1, Chapter 2, General Principles] [4] [6] [7]

● Aesthetically Pleasing

Website should provide a visual appeal by following these graphic

design principles:
- Provide contrast between screen elements.
- Create groupings.
- Align elements and groups.
- Provide 3D representation.
- Use colors and graphics effectively and simply.

This is an important principle that is affected by principles such as

Simplicity, Clarity, Familiarity. This is an important principle since it gives
user a first impression of the site. If users visit a site for the first time and
does not find it Aesthetically Pleasing - it may significantly reduce chance of
them visiting it again. To achieve the Aesthetically Pleasing look of a web
page, developer would have to go through many other sub-principles and
fulfill them which could be very challenging. [1, Chapter 2, General
Principles] [4] [5] [6]

14
● Availability

Availability concerns with making every functionality of the system

available at all times and also about not using any mode or state restrictions
that prevent user from interaction with the system.
This is an important principle that allows user to have a great flow
through the system. In case any restrictions would exist in a system, user
would lose his flow. That could lead to leaving the system. If user does not
have time or will to understand why that occurred, that could result them to
prefer using other websites.
One thing that should be considered, while implementing this
principle, is not to just output everything you can do on one page straight
away. That will make it unclear and not aesthetically pleasing anymore, it
will become a towering pile of links and words. All of options should be
grouped and hidden in things such as dropdown menus or similar elements.
[1, Chapter 2, General Principles] [9]

● Clarity

Clarity is one of many principles that are connected with Simplicity.

When web page is simple it is also clear and easily understandable. Clarity is
achieved when webpage is visually, conceptually and linguistically clear.
Which means that web page should have clear:
- Visual elements
- Functions
- Metaphors
- Words and text

With all that achieved, you will have a simple, clear, pleasant to eye
web page which will leave a positive impression on customers. Clear web
pages is simpler to scan with eyes and find the information you are searching
for. Which makes this principle even more important.
Formatting of this specific topic could be an excellent example of
Clarity. This is not a website, but we pretend that it is, for a short time. Most
of users will not read this chapter as is, but instead just scan it. First thing that
is clearly visible for readers is a bullet list. They will read names of
principles. Some, will find it enough, but some may be willing to dive deeper
and get to know more about it. The next most visible part is not the text
paragraph, but instead a sub-bullet list. They look directly at it(if such exists)
and read it. To conclude this - how you put information in front of a user is
very important and now you should have a brief understanding of how users
scan pages.[1, Chapter 2, General Principles] [8] [9]

15
● Consistency

This principle requires web page to look and operate in the same way.
Elements that have same purpose should have similar looks, so user will
know that they do the same thing without thinking about it. It is also
important that different flows that have same purpose should operate in same
way. Those flows should also yield the same results so user will not get
confused about the outcome of his actions. Another important requirement for
this principle is that main elements should be static and not be
changing/moving around.
This design principle speaks for itself, it is an important principle,
because it has an excessive impact on the learning and productivity of the
web page. If anything changes in future, it will be hard to learn about those
changes. There is much more risks of users to do mistakes. If web pages lack
Forgiveness as well, that could lead to critical errors.[1, Chapter 2, General
Principles] [4] [5] [6] [7]

● Control

Control is very self-explanatory design principle but yet could be

misunderstood by some web developers. It is mostly about to give user the
control over what the system/ web page does. Nothing should happen without
user requesting it. Everything user does should be able to be interrupted or
terminated at any time.
As exemple, we could imagine a flow of user buying something
online. User finds an item he needs and presses “Add to cart” button. What do
you expect to happen then? I would expect item to be added to the cart and be
able to browse further, in case I need anything. If that happens exactly this
way, I will feel like I control actions in the system. Other scenario could be
that item adds to cart, web page redirects me to the card, fills my information
and is ready for me to purchase. In this case I would feel like I am no longer
in control of what is going on. I would think “Hold on! What is going on? I
want to keep browsing! What if I leave now? Will cart discard changes?”.
And that is what we want to avoid on web pages. So control is very important
principle.
Speed of completing user requests is also important. If any action will
take too long time, user, subconsciously, will feel like losing control over
actions. User will get confused and distracted from his original flow. That
should be taken to consideration while making web pages as well. [1, Chapter
2, General Principles] [5] [7]

16
● Safety

Very basic and helpful principle in our opinion , but yet we have seen
many pages not having it included. Safety is about to protect user from
making mistakes. That could be some mistakes that user do by accident or by
misunderstanding. For example by pressing one button in your profile, we
say, you can permanently delete your account and all progress on the web
page. We do not want that that cat walks over users keyboard and accidently
makes that critical mistake. This is why developers should implement a way
of protecting users from that. In this case it could be a Popup window with
confirmation and more explaining text. Then even if user presses it
intentionally, he will get warned once more and explained what will
happened upon complete of this request, which will give user a better
understanding and make them think twice.
Safety is not only about accidently deleting things. It could also be
dropdown menus or radio buttons. They prevent user by writing wrong option
by themself and even avoid user typos. Very important principle to include
into our thesis. [1, Chapter 2, General Principles] [7] [9]

● Efficiency

To achieve efficiency on a web page developers have to come up with

a layout that greatly minimizes users eye and hand movements, as well as
other control actions. Some elements that affect efficiency:
- Transitions between system controls
- Navigation paths should be short and easy rememberable
- Eye movement through a screen should be sequential and obvious

Web developer should always know exactly what user wants and
provide them with tools needed to complete these task. User should never
search for those necessary tools.
Also, if a web page is constructed of many forms, developers could
try to reduce often switching between input devices such as mouse and
keyboard. It is not efficient for user to be required to click on a field, fill it,
click on next one, fill it and so on.
An important design principle for companies that want to provide a
quick and efficient experience for customers on their site. [1, Chapter 2,
General Principles] [7]

17
● Familiarity

Familiarity is closely connected to Efficiency, Clarity, Aesthetically

Pleasing and Simplicity principles. This principle is a simple one to achieve
but yet there is many web pages out there lacking it. To achieve this principle,
website should simply content concepts that are familiar to the user(mostly
from the real world). That could be icons, imagery, headlines etc.
For example, beside text in menus(or insead of it), we can put icons
that are connected with real world and could simplify browsing for user. A
building icon aside “Home” or a cogwheel icon besides “Settings” will do
very well. User will recognize those elements and know that this is where he
wants to go even before reading a label or starting thinking about it. You
should notice that this will directly affect Efficiency on this site because it
will reduce the time for user to perform wanted actions and also make them
think less, which is great. Clarity and Simplicity are also involved in this
principle. Having describing imagery or familiar icons instead of wall of
describing text is much simpler, easier to understand, easier to learn and looks
better overall. This is why this principle is important and is included in our
research. [1, Chapter 2, General Principles] [9]

● Flexibility

Flexibility is ability of the website to respond to individual differences

in people. Web pages should be as easy to use by experienced users as it is
used by new users. It should also be sensitive to each user’s habits, personal
preferences or specific conditions at that moment. It is indeed a hard principle
to achieve and not without danger.
It is common that very flexible systems are confusing to novice users
and only desired by experienced users. To solve it, developers usually use so
called The concept of progressive disclosure, which mean that users are not
exposed to systems flexibility at the start, but as they gain experience. This
principle of progressive disclosure is a part of simplicity principle, but also
could be applied here.[1, Chapter 2, General Principles] [9]

18
● Obviousness

Another principle that is tightly connected to Simplicity and Clarity.

User, while browsing the web page, should know the following:
- What to look at
- What to do
- What it is
- When to do it
- Where to do it
- Why to do it
- How to do it

It could seem to be a lot to have in mind as developer, but it is not. As

long as design is kept simple and clear, all of above questions should be
answered by user subconsciously. This is also when Familiarity could really
help. If developers are using self-explanatory icons, simple texts and obvious
headlines - this principle should not make any trouble. But it is also important
to have it on the webpage. Even when you get it for free by implementing
Simplicity, Clarity and Familiarity, it still is an important principle to
include.[1, Chapter 2, General Principles]

● Predictability

A principle that is connected to Simplicity and Familiarity. This

principle makes sure that users can anticipate the natural progression of each
task. For example, we can take a flow of buying from a store in real life.
Customer chooses an item, puts it into his card, goes to checkout, puts out a
wallet, pays the amount, leaves with the item. Users of web pages are used to
exactly that flow from real life store so they will expect and predict such flow
in online stores as well. By providing that exact flow on web for a user will
make them comfortable, which is what companies should want from their
sites. To help to achieve that, developers should pay attention to familiar
elements and flows on the page as well as not combining actions.[1, Chapter
2, General Principles] [10]

19
 ● Directness

Directness is about to provide direct ways to accomplish tasks on web

page. That could be achieved by making available alternatives visible. This
will greatly reduce mental workload of a user[1, Chapter 2, General
Principles]. The best example for this principle could be dropdown menus in
forms. When we want to find something on web and we see a search form, it
would help a lot to see dropdown menus with available search options or
different products options, instead of searching by yourself and, if result is
not satisfying, redo search over and over.
This is a less(but still is) important principle, which is easily testable
and could be seen or not seen on web pages right away which is great for our
tests.[1, Chapter 2, General Principles] [4]

Excluded principles:

● Compatibility
○ Compatibility is a principles takes users needs into account see them
from a users point of view. Compatibility is all about knowing your
users needs. [1, Chapter 2, General Principles]
○ We are excluding this principle because we see that it would be hard
to test it.
● Configurability
○ Configurability is a principle that shall enhance the users feel of
control and personalization of the software. The system should be able
to be configurable the the users needs and desires. [1, Chapter 2,
General Principles]
○ We excluded this principle because it is a principle that is not general
for all softwares of the same importance as others do. This principle is
more of personal think for the developer and designer.
● Forgiveness
○ Forgiveness is a principle that forgives the user if the do a mistake,
forgiveness keeps a user out of trouble and safens a system so that the
user will not create a tragic error for themself or the system.
Forgiveness could be that the user should be able to review, change or
undo certain actions. [1, Chapter 2, General Principles]
○ We excluded this principle because we did not see how it would fit in
our thesis and testing..

● Immersion
○ Immersion is a principle that makes the user feel joy and a lot of
satisfaction when using the system. It could be challenges, goals, a
feeling of control and feedback. [1, Chapter 2, General Principles]
○ We are excluding this principle because we see that it would be hard
to test it.

20
 ● Recovery
○ Recovery is a principle that allows the user to “undo” actions they
have performed in a software. This principle exists to reduce the
distress of the users fear of doing something and not being to able to
return/undo the action. This should be obvious for the user in the
design. The user should not be scared of doing something. [1, Chapter
2, General Principles]
○ We are excluding this principle because we see a difficulty in testing
this principle in the way we have designed our testing.
● Responsiveness
○ Responsiveness is a principle that shows the responsiveness of a
system, for example that the system responds on the user request
immediately. And if there is a delay in the loading or something the
user should be notified and not stand there wondering what is
happening. [1, Chapter 2, General Principles]
○ We are excluding this principle because we see that it would be hard
to test it.
● Transparency
○ Transparency is a principle that makes the user focus on the task they
are performing and not on the technical details of a system. [1,
Chapter 2, General Principles]
○ We are excluding this principle because we see that it would be hard
to test it.

All principles that we have included and excluded are equally important to
achieve a well integrated user interface. The reason why we excluded principles is
because they would be hard to test through the tests that we could create via
usabilityhub and cover them in our survey. The excluded principles should not be
considered as less important principles.

21
CHAPTER 5
_____________________________________________
RESULTS AND ANALYSIS

Sidenote: In this chapter we are often going to name our websites, so to

simplify it for our reader, we are going to use terms Website A and Website B as we
did in our survey. Where Website A is Mister Gates Direct and Website B is Gates n’
Fences
Website A - https://mistergatesdirect.com
Website B - http://gatesnfences.com

Participants in our survey are mainly students on BTH that we recruited

through mailing our survey to them. We had around 45 people who started the test,
but only 25 who made it to the end and completed all of the tests. We decided to use
those 25 results in our analyze because it will be simpler for us to represent their
thoughts in graphs. It also will be simpler to name amounts of participants when
100% is constantly 25 people. We have also asked 2 professionals within web
design/development. Those experienced developers are as well teachers who teach
students about design. We thought it is great to include them into our participant
group and get to know their opinion about web pages we chosen to analyze. We will
therefore separate them from main group and will compare their results with casual
users.
In Table 1 below, you can find how experienced our participants are in
shopping online. More than half of them are very experienced which means that they
have seen a lot of web stores and have used many of them to purchase online. That
indicates on that those people are experienced and know how to evaluate web pages.

Table 1. Participant’s experience

22
 In our survey, we had a section where users, after completing all tests, could
rate their experience. The aspects users were raiting are ease of navigation, accuracy
of information, quality of content, layout/design, ease of finding support contact and
ease of purchasing process. Table 2 includes ratings for Website A with average
rating at 3,92 and Table 3 includes rating for Website B with average rating at 1,97.

Table 2. Overall rating for Website A

Table 3. Overall rating for Website B

23
 Only based on this first snippet of our findings we can conclude that Website
B is getting much lower ratings and therefore is liked less by users. We also asked
users follow-up questions on www.usabilityhub.com after each of the tests. Answers
do vary and are hard to go through “as is” in here so we have summarized all
opinions that people had into 2 tables. For clearer picture, we simplified opinions to
positive, negative and neutral. Note that one person could leave opinions several
times by answering different questions about different aspects of the webpages. The
Y-axle covers the feedback from the participants of the amount of
Positive/Negative/Neutral answers from what they have answered on our questions.
Table 4 does cover opinions about Website A and Table 5 does it for Website B.
Service that we used for making tests at www.usabilityhub.com does offered
a very usable feature called Word Cloud, that helped both us and will help our reader
to get an overview over users answers. Feature does show most used words that were
used in a specific test. You can almost clearly see in a Word Cloud 1 and Word
Cloud 2 below what people answered when we asked them about “What they think
about Website B and Website A?” after completing the First Impression Test.

Table 4. Opinions about Website A

Table 5. Opinions about Website B

24
 From an overall review of our result we have gathered through our survey, we
observed that our expected result is in true our end result from our survey. We can
see that from Table 4 and Table 5, that our participants have a positive feedback on
Website A and a Negative feedback on Website B. This outcome is because that
Website A has thought of and implemented design principles and had expected
outcome from that.

5.1 RQ1: Are design principles important from a business perspective?

From our findings on our tests on www.usabilityhub.com we found out that

design principles have a big impact on the users experience while visiting a website.
Both from a first impression and a longer stay. If we refer to Website B the first
impression from the participants was that they felt very confused and did not
understand the purpose of the website. They thought it was very ugly and
unprofessional. With that we mean that the participants answered for example that
the site had to much information, outdated, too many colors and amateurish and that
they explicitly answered ugly and unprofessional. See Word Cloud 1.

Word Cloud 1. First impression of Website B

25
 The data collected from the experienced Web Developers we recruited the
answer was about the same as the other participants. They answered that that the site
was in disorder, there was too much information, too many options in the side menu
and too much mixed colors.

If we then refer to Website A, we can see a excessive opposite of what the

participants think of Website B, they think that Website A has satisfying interface
and looks professional. Event hough Website A is supposed to be the favorable site
of them two, the participants still had some opinions about the site. They also thought
that Website A contained a bit too much information. See Word Cloud 2.

Word Cloud 2. First impression of Website A

The data collected from the experienced Web Developers we recruited the
answer was about the same as the other participants. They answered that the site was
well structured, looked great and followed a grid but still thought that the site was a
bit clumsy with big blocks on it.

The data collected that is most important for this research question is that we
asked the participants If they would trust this website. If we compare the two
Websites with this question, from our result we can see clear answer on this that the
participants would trust Website A and not Website B. See Word Cloud 3, 4 where
you can see that for Website A one of the biggest word is Yes and for Website B it is
No. See Table 6 for Website A where 64% said Yes, 32% said Maybe and 4% said
No. See table 7 for Website B where 64% said No, 32% said Maybe and 4% said No.

26
Word Cloud 3. Trust, Website A Word Cloud 4. Trust, Website B

Table 6. Would users trust Website A?

Table 7. Would users trust Website B?

27
 We can conclude from this research question that implementing design
principles will clearly have big impact on the users that visits a website. We can see
that if a website does not think of design principles the response will be that the users
feel that the website is unprofessional and in participants words, ugly. That will
result in them leaving the website for competitor with better integrated user interface
and which in turn will affect the business of a company. But if a website does infact
think of design principles and implement them, it will have positive affect the
business of a company since the visitors will feel that the site looks professional and
will have trust towards it.[3]

5.2 RQ2: What are the factors that influence design principles?

With factors that influence design principles we mean, what are the specific
factors and areas that influence a specific design principle. By understanding the
factors you can achieve and understand the whole design principle a lot more and
better for your system.

● Operability
○ Size of buttons
○ Positioning of elements
○ Accessibility of elements of control
● Simplicity
○ Important functions showing first
○ Obvious visual hierarchy
○ Defaults in text fields / Dropdowns
○ Most used actions should be simple
○ Hiding unnecessary elements of the screen
● Aesthetically pleasing
○ Groupings
○ Aligning elements and groups
○ Providing 3D representation
○ Using colors and graphics effectively and simply
○ Contrast between screen elements
● Availability
○ Options available at all time
● Clarity
○ Clear visual elements
○ Clear functions
○ Clear metaphors
○ Clear words and text

28
● Consistency
○ Different flows with same purpose should operate in the same way
○ Different flows with same purpose should yield same result
○ System should look the same throughout the system
○ Main elements should be static
● Control
○ Control over what the system/ web page does
○ Response times for request
● Safety
○ Confirmation windows
○ dropdown menus / radio buttons
● Efficiency
○ Transition between system controls
○ Navigation paths
○ Positioning of elements
○ Switching between input devices
○ Access to important tools
● Familiarity
○ Icons/Buttons/Menus style
○ Color scheme
○ Imagery
● Flexibility
○ Familiarity
● Obviousness
○ Familiarity
○ Simplicity
○ Clarity
● Predictability
○ Predictable actions
○ Progress indication in continuous actions
● Directness
○ Dropdowns / Radio buttons
○ Autocomplete in search

29
5.3 RQ3: How does user interface (UI) affect the users experience (UX) on a
website?

As we can see from previous research question answers and our displaying of
our result we can conclude that a great integrated user interface that implements
design principles have a big impact on users stay. If we compare Website A to
Website B we have a clear comparison of a well structured user interface and poorly
structured user interface. If we focus on Website A, the majority of our participants
had a positive feedback of the website. They thought it was great looking,
professional, clear purpose and that they trust the website. Our experienced
participants had the same opinion as other participants.

With this in mind, we can conclude that having user interface that have
design principles well implemented have a big impact on the users stay, mainly
because they feel like the website is trustworthy and will stay on it and eventually
purchase something from it.

30
 CHAPTER 6
_____________________________________________
CONCLUSION

This research, studies the importance of design principles in websites. It

provides valuable knowledge and understanding of the principles and how to
implement them in the best way. From this research the major research questions that
were asked and answered was:

6.1 RQ1: Are design principles important from a business perspective?

Design principles have a big impact on the business perspective. Mainly because
they in general build up a trust towards the visitor and makes them stay. However, if design
principles are not taken into consideration, the outcome would be negative. Visitors will feel
like the website is unprofessional and will not have trust towards it.[3] It would result in that
users decides to leave for competitors that have a better user interface integrated, and will in
turn affect the business of a company. That does not mean that users think about design
principles while browsing websites but they do impact how users feel and think on those web
pages. Which leads us to our next research question.

6.2 RQ2: What are the factors that influence design principles?
This research shows that there are many factors that influence design principles
which, if implemented, will help web developers to build up an professional website and
leave users with positive thoughts. Since customers subconsciously want to have a flawless
experience on websites, they will have no reason to leave and search for other ones if website
does provide exactly this flawless experience. To achieve which, web developers need to
think about those key principles that we gone through in this thesis.

6.3 RQ3: How does user interface (UI) affect the users experience (UX) on a
website?
As tests and survey shows, excluding them from a website will lead to enormous
negative feedback from visitors, make them feel like this is an unprofessional site and at the
end will make them think several times before buying or visiting it ever again.

31
CHAPTER 7
_____________________________________________
FUTURE WORK

An interesting future work of this thesis would be that we take the results and
all the design principles from this thesis and take them into practise in developing a
website. The development should focus on trying to achieve all the design principles
and see the difficulties in them, if some maybe are harder to achieve than others and
if design principles might be in conflict of each other.

Some questions for a future work could be like stated below:

Can you achieve all design principles?

Are there any difficulties in any design principle?

Are some design principles harder to achieve than others?

Can design principles be in conflict of each other?

32
CHAPTER 8
_____________________________________________
REFERENCES

[1] Wilbert O. Galitz, “The Essential Guide to UI Design”, 2007, Chapter 2 - General
Principles

[2] Internet World Stats, 2017 (https://www.internetworldstats.com/stats.htm)

[3] Goran Paunovic, 2017

(https://www.forbes.com/sites/forbesagencycouncil/2017/03/23/the-bottom-line-why
-good-ux-design-means-better-business/#764132552396), 30/5-18

[4] Microsoft Corporation. (1995). The Windows Interface Guidelines for Software
Design. Redmond, WA: Microsoft Press.

[5] Lidwell, W., Holden, K. and Butler, J. (2003). Universal Principles of Design,
Gloucester. MA, Rockport Publishers

[6] 10 Rules of Web Design, 8/2 - 17 ( https://sharpened.com/web_design_rules ),

5/6 - 18

[7] Principles for Usable Design,

(http://www.usabilitybok.org/principles-for-usable-design) 5/6 - 18

[8] 10 principles of good web design,

(https://www.glidedesign.com/10-principles-of-good-web-design/) 5/6 - 18

[9] Steve Krug, “Don’t make me think, Third Edition”, 2013

[10] A Secret Weapon of Successful Designers: Predictability

(https://millo.co/a-secret-weapon-of-successful-designers-predictability) 5/6 -18

33
CHAPTER 9
_____________________________________________
APPENDIX
Questions that we asked our participants in our survey, about both websites, are
listed below:

1. Did you experienced any confusion or problems during tests for website A?

2. How experienced are you with buying anything online? (1 - Not experienced ,
5 - Very experienced ).

3. Please rate the following attributes of this website: Ease of navigation,

Accuracy of information, Quality of content, Layout/design, Ease of finding
support contact, Ease of purchase process.

4. Would you trust this website? (Would you buy anything from this website?)

5. How likely are you to visit this website ever again? (1 - Very unlikely, 5 -
Very likely)

6. How likely are you to recommend this website to a friend in the future? (1 -
Very unlikely, 5 - Very likely)

7. What was your first impression of the site?

8. Do you think this website has a good design? Please explain.

34