Designing the Navigation to E-services

Improving the Accessibility and Usability to Report a Crime or

Loss at the Swedish Police Authority’s Website
Master’s Thesis in Computer Science and Engineering

MAJA ALBREKTSON & CAROLINE XIA

Department of Computer Science and Engineering

C HALMERS U NIVERSITY OF T ECHNOLOGY
U NIVERSITY OF G OTHENBURG
Gothenburg, Sweden 2021
 Master’s Thesis 2021

Designing the Navigation to E-services

Improving the Accessibility and Usability to Report a Crime or Loss

at the Swedish Police Authority’s Website

MAJA ALBREKTSON & CAROLINE XIA

Department of Computer Science and Engineering

Chalmers University of Technology
University of Gothenburg
Gothenburg, Sweden 2021
Designing the Navigation to E-services
Improving the Accessibility and Usability to Report a Crime or Loss
at the Swedish Police Authority’s Website
MAJA ALBREKTSON & CAROLINE XIA

© MAJA ALBREKTSON & CAROLINE XIA, 2021.

Supervisor: Sara Ljungblad, Department of Computer Science and Engineering

Advisor: Nina Mujdzic, Swedish Police Authority
Examiner: Staffan Björk, Department of Computer Science and Engineering

Master’s Thesis 2021

Department of Computer Science and Engineering
Interaction Design Division
Chalmers University of Technology and University of Gothenburg
SE-412 96 Gothenburg
Telephone +46 31 772 1000

Cover: An illustration of the design concept when the user has answered all relevant
questions and been presented with information about which service to use.

Typeset in LATEX
Gothenburg, Sweden 2021

iv
Designing the Navigation to E-services
Improving the Accessibility and Usability to Report a Crime or Loss
at the Swedish Police Authority’s Website
MAJA ALBREKTSON & CAROLINE XIA
Department of Computer Science and Engineering
Chalmers University of Technology and University of Gothenburg

Abstract
In the fast-paced digital world, authorities and organizations are moving towards
developing and providing digital services on the internet. Regarding the Swedish
Police Authority, citizens can use e-services to report crimes or losses. However, the
authority has acknowledged that multiple citizens use the wrong e-service for their
case and sometimes have trouble finding the correct one.

The thesis aimed to explore how the web navigation to the e-services can be im-
proved to help the citizens find the correct service for their circumstances. The
investigation of the topic is based on a user-centered design process where 14 meth-
ods have been executed. The methods included data gathering, development of
requirements and exploration of a potential design concept.

The results are presented in 15 design guidelines about improving the navigation
to e-services regarding usability and accessibility. Furthermore, a design concept
is presented that exemplifies how the guidelines can be explicitly applied to the
Swedish Police Authority’s website.

Keywords: user experience, user research, interaction design, design guidelines,

design concept, data collection, usability, accessibility, computer science, e-services

v
Acknowledgements
We would like to express our gratitude to all the people that made this thesis pos-
sible.

To our supervisors Sara Ljungblad and Nina Mujdzic for your never ending support
and guidance. We can not emphasize enough how helpful it has been to know that
you always had our backs. Thank you!

To all the participants in our studies - this project would not have been possible
without you. Thank you for your time, engagement and feedback.

We would also like to dedicate a thanks to all the employees at the Swedish Police
Authority, that welcomed us with open arms and made us feel comfortable. A spe-
cial thanks to Daniel Svan who believed in us and gave us this opportunity.

Thank you all for your support and interest in our project!

Maja Albrektson & Caroline Xia

Gothenburg, 2021

vii
 Contents

1 Introduction 3
1.1 Research Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Research Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Aim & Deliverables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 Background 7
2.1 The Swedish Police Authority . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Stakeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.3 Ethical Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4 Previous Work and the Thesis’s Contribution . . . . . . . . . . . . . 10
2.4.1 E-Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.2 Website Navigation . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4.3 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4.4 The Thesis’s Contribution . . . . . . . . . . . . . . . . . . . . 12

3 Theory 13
3.1 Website Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.1.1 Navigational Models . . . . . . . . . . . . . . . . . . . . . . . 13
3.1.2 Website Navigation - Design Guidelines . . . . . . . . . . . . . 16
3.1.3 Information Foraging . . . . . . . . . . . . . . . . . . . . . . . 16
3.2 Decision Making Theory . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2.1 Heuristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2.2 Biases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3 Design System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.4 Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
3.5 Inclusive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.5.1 Disability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4 Methodology 27
4.1 Research Through Design . . . . . . . . . . . . . . . . . . . . . . . . 27
4.1.1 Wicked Problems . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.2 Remote Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.3 User Research Methods . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4.4 Design Thinking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.4.1 Empathize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

ix
Contents

4.4.2 Define . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4.4.3 Ideate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
4.4.4 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
4.4.5 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

5 Planning 39
5.1 Project Initiation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.2 Design Thinking Process . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.2.1 Empathize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.2.2 Define . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.2.3 Ideate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
5.2.4 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
5.2.5 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
5.3 Report Writing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

6 Execution and Process 45

6.1 Empathize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.1.1 Literature Review . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.1.2 Simulation Exercise . . . . . . . . . . . . . . . . . . . . . . . . 45
6.1.3 Indirect Observation . . . . . . . . . . . . . . . . . . . . . . . 47
6.1.4 User Study (Eye Tracking and Questionnaire) . . . . . . . . . 49
6.1.5 Think Aloud with a Visually Impaired Person . . . . . . . . . 53
6.1.6 Expert Interviews . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.2 Define . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
6.2.1 Affinity Diagramming . . . . . . . . . . . . . . . . . . . . . . 57
6.2.2 Behavioral Archetype . . . . . . . . . . . . . . . . . . . . . . . 62
6.2.3 Design Requirements . . . . . . . . . . . . . . . . . . . . . . . 64
6.3 Ideate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.3.1 Sketching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6.3.2 Flowchart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
6.4 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
6.4.1 Digital Prototyping (High Fidelity Prototyping) . . . . . . . . 71
6.5 Test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
6.5.1 Usability Test with Experts from the Contact Center . . . . . 71
6.5.2 Usability Test with UX Designers at the Authority . . . . . . 73
6.5.3 Think Aloud & Interviews with Users . . . . . . . . . . . . . . 74
6.5.4 Usability Test with Accessibility Expert . . . . . . . . . . . . 77

7 Results 79
7.1 Design Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
7.1.1 Home Page & Middle Page . . . . . . . . . . . . . . . . . . . . 81
7.1.2 Understanding If an E-service is the Appropriate Choice . . . 83
7.1.3 Selecting a Crime or Loss . . . . . . . . . . . . . . . . . . . . 84
7.1.4 Clarifying the Crime or Loss . . . . . . . . . . . . . . . . . . . 85
7.1.5 The End of the Guide . . . . . . . . . . . . . . . . . . . . . . 86
7.2 Design Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
7.2.1 Design - Look & Feel . . . . . . . . . . . . . . . . . . . . . . . 89

x
 Contents

7.2.2 Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
7.2.3 Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
7.2.4 Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
7.2.5 Methods & Process . . . . . . . . . . . . . . . . . . . . . . . . 96

8 Discussion 97
8.1 Design Guidelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.2 Design Concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
8.3 Methodology Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 99
8.3.1 Simulation Exercise . . . . . . . . . . . . . . . . . . . . . . . . 99
8.3.2 Eye Tracking . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
8.3.3 Behavioral Archetypes . . . . . . . . . . . . . . . . . . . . . . 100
8.3.4 Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . 101
8.3.5 Different Methods of Evaluation . . . . . . . . . . . . . . . . . 101
8.3.6 Remote Testing with Users . . . . . . . . . . . . . . . . . . . . 102
8.4 Transferability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
8.5 Ethics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
8.6 Future Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

9 Conclusion 107

References 109

Appendix I
A Conclusions, Simulation Exercise . . . . . . . . . . . . . . . . . . . . I
B Consent Form, User Study . . . . . . . . . . . . . . . . . . . . . . . . II
C Information Form, User Study . . . . . . . . . . . . . . . . . . . . . . III
D Questionnaire Questions . . . . . . . . . . . . . . . . . . . . . . . . . IV
E Interview Guide, Accessibility Expert . . . . . . . . . . . . . . . . . . IX
F Interview Guide, UX Design Expert . . . . . . . . . . . . . . . . . . . X
G Behavioral Archetype, the ’Good Enough’ Gale . . . . . . . . . . . . XI
H Behavioral Archetype, the ’Careful’ Charlie . . . . . . . . . . . . . . . XII
I Flowchart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIII
J Usability Test with Experts from Contact Center . . . . . . . . . . . XX
K Think Aloud & Interviews with Users . . . . . . . . . . . . . . . . . . XXI

1
Contents

2
 1
Introduction

In Sweden, all citizens who have been the victims of a crime, regardless of when it
happens in life, need to contact the police. The Swedish Police Authority is a public
service with the purpose to "reduce crime and increase public safety" (The Swedish
Police, n.d.). To achieve this, effective communication with citizens is of the utmost
importance.

The digital development combined with new technology has made citizens accus-
tomed to a digital world, thus creating higher expectations of e-services (electronic
services) in the public sector (Bharosa et al., 2020). Furthermore, all public sectors
in Sweden need to follow specific web accessibility guidelines (Infrastrukturdeparte-
mentet RSED DF, 2018). To meet this need, public sectors around the world have
realized that it should be easy to use their services without knowing all the bureau-
cracies behind (OECD, 2017). Personalization and more ease of use are expected
from the users, making digital technologies essential while simultaneously offering
a reduced cost (Bharosa et al., 2020). Furthermore, it is becoming more common
to create holistic solutions putting the need of the user and the feedback from the
citizens in focus (OECD, 2017).

Users want to easily find the information they are looking for. However, it is fre-
quently reported that users have trouble with navigational tasks such as finding a
specific site or content. In some contexts, these troubles might lead to the user
using another site or service instead (Lazar et al., 2003). Regarding the Swedish
Police Authority, such frustration might lead to more severe consequences, such as
ignoring reporting a crime. That, in turn, might lead to other consequences, includ-
ing skewed statistics, unresolved crimes, and dissatisfied citizens. Thus, the need to
make efficient navigation with the user in focus is more critical than ever.

1.1 Research Problem

To report some crimes and losses, the citizens can use e-services on the Swedish
Police Authority’s website. However, the Police Authority has recognized that many
reports are done using the wrong e-service (e.g. burglary instead of theft). In some
cases, when the users are having trouble finding the correct one, they decide not to
finish the report and call 114 14 for personal help instead. One example of how this

3
1. Introduction

might happen and the potential consequences is presented in the scenario below.

Kim was tired after a long day but decided to go down to the base-
ment and pick out the Easter decorations. On arrival, Kim noticed that
someone had tried to break in. The lock was destroyed, and all the
decorations were gone. Kim felt very stressed and upset while return-
ing to the apartment. After searching the internet and looking at the
Swedish Police Authority website, Kim started to report the crime as
’Förlustanmälan’. However, the e-service asked for questions not related
to the crime, and there was no option to report the broken lock as a
consequence of the burglary. Is this the correct e-service to use? Kim
felt stupid not being able to use the service but decided that it was more
important to do it correctly and called the police instead. First, there
was a telephone queue with a waiting time of 20 minutes. When Kim
finally reached a person on the other side, the registrar needed to note
everything manually while Kim patiently spelt the name and address
letter by letter. When hanging up, Kim felt very frustrated that this
matter occupied the entire evening.

This fictional scenario is not unreasonable and might lead to multiple problems for
the authority as well. The case will be delayed, the telephone line will be loaded,
and resources that could be used for other things are occupied. In other scenarios,
the user might continue to use the e-service even though it is incorrect. Hence, the
user will answer questions that are irrelevant to the crime or loss they are reporting.

Moreover, it is a growing need to create digital accessibility for everyone. DIGG

- Myndigheten för digital förvaltning (n.d.) is an agency for digital government
aimed to improve digital accessibility on all public websites, including the Swedish
Police Authority. Therefore, it is crucial to make navigation towards the e-services
accessible for all user groups and include a diversity of users that covers variation
in capabilities, needs, and aspirations.

The e-service team at Swedish Police Authority have suggested a potential solution
to make people find the correct e-services. The solution is to incorporate a question
guide before users access the different e-services. The question guide will collect rel-
evant information from the users and, based on that, redirect the user to the correct
e-service. The thesis will consider the findings and insights gathered throughout the
process and ideate on all ideas to find the optimal solution.

1.2 Research Question

This research problem has resulted in the following research question and sub-
question:

What should be considered when designing an accessible

and usable web navigation to e-services?

4
 1. Introduction

The research question will be answered by a set of guidelines. Thus, the sub-question
is:

How could such guidelines be applied to the Swedish Police Authority’s website re-
garding the e-services that are used to report a crime or loss?

1.3 Aim & Deliverables

The project aims to improve the navigation to different e-services at the Swedish
Police Authority’s website, focusing on the e-services that are used to report a crime
or loss. The project will follow a user-centered design process called the design
thinking process covering the phases: empathize, define, ideate, prototype and test.
A crucial part of the process will be interacting with the users and experts in the
field to investigate their perspective and create a seamless interaction that guides
them toward the correct e-service.

The purpose is to contribute with knowledge that gives the Swedish Police Authority
a better understanding of improvements made to create user-friendly navigation,
which involves understanding the users and their needs.

To reach the project’s aim, the thesis will result in deliverables related to the re-
search questions. The deliverables for the thesis are guidelines to consider when
improving the navigation of a website with e-services and a high fidelity prototype
that visualizes an example of how the guidelines can be implemented.

1.4 Limitations
The thesis’s focus is to create improved navigation to the e-services that are used
for reporting a crime or loss. Moreover, the improved navigation should be reusable,
making it possible to develop it and include more e-services in the future. The design
will be made for desktop devices and created in Swedish since that is the primary
language for the website.

The thesis also focuses on guiding users in the navigation towards the e-services
used to report a crime or loss. To narrow it down, the thesis will not cover the
navigation to other e-services on the site, e.g. the services that are used to apply for
permission. Nor will there be any focus on how to best design the actual e-services.
The findings from the study might apply to other authorities and organizations that
need a similar solution. However, there might be a need for corrections to suit those
specific circumstances.

Due to the pandemic of Covid-19, no methods related to physical meetings will be

conducted. Instead, the selection of methods will be adjusted and performed online.
If not possible, alternative methods will be used.

Furthermore, the thesis will not include the implementation of the prototype in

5
1. Introduction

terms of code. The launching of a coded product would make the project heavily
dependent on external parties, risking the deadline of the academic part. Thus,
that part will be assigned to people within the IT department at the Swedish Police
Authority.

6
 2
Background

This chapter aims to bring knowledge into the thesis’s background regarding the
Swedish Police Authority and the stakeholders. Moreover, the chapter presents con-
siderations about the ethical aspects. Finally, some related work within the domain
is highlighted, and the thesis’s contribution to the academic world is presented.

2.1 The Swedish Police Authority

The Swedish Police Authority is a one-council authority operated by the National
Police Chief, responsible for the Police activities. The Swedish Police states that
their mission is to reduce crime and increase public safety. The mission includes
to "monitor public order and safety, conduct reconnaissance and carry out criminal
investigations" (Polisen, n.d.-b).

There are several ways to report a crime or a loss. Citizens can call in with the
numbers: 112 for urgent help or 114 14 for other cases such as police reports, tip-
offs or information. Other ways to report are visiting the police station, reporting
via a police on-the-spot, or using the different e-services on the website. Some of
the e-services are report of theft, credit card fraud, shoplifting, damage and parking
damage (Polisen, 2020). Altogether, all the e-services receive about 370 000 case
registrations per year. The e-services can be reached from the start page; see figure
2.1 for an overview of the structure today.

The website of the Swedish Police Authority provides external information and con-
sists of approximately 20 different e-services accessible to the citizens. An overview
of today’s navigation to report a burglary is illustrated in figure 2.1.

7
2. Background

1. 2.

3. 4.

Figure 2.1: Overview of today’s navigation to report a burglary. (1) The user
selects the button ’I have been through something’, (2) In the list of e-services to
report a crime or loss, the user selects the link to ’Report a burglary’, (3) The user
selects the button ’Start e-service’ and (4) the e-service of reporting a burglary is
presented. Authors’ own collage of screenshots from Polisen (n.d.-a).

2.2 Stakeholders
The thesis has several stakeholders that are interested in or will be affected by
its result. The two researchers Maja Albrektson and Caroline Xia, are enrolled

8
 2. Background

at Chalmers University of Technology and will perform the thesis as part of the
academic institution program Interaction Design of Technologies. The university
is interested in the thesis to receive an academic report that will contribute to
research within the interaction design discipline. Furthermore, the supervisor from
the university, Sara Ljungblad, will give academic support during the process of
conducting the research and writing the report.

The client for the project is the Swedish Police Authority in Gothenburg, primarily
the IT department of e-services. The department is responsible for the e-services
that interact with the general public. The department has provided a mentor for
this project, Nina Mujdzic, who works as a Business Analyst and UX Designer in
the assigned area. The expectation from the client is results that can contribute to
knowledge on how to improve the navigation to their e-services.

Other stakeholders for the thesis are the participants who will be recruited for data
collection and evaluation. From their perspective, sensible information may be col-
lected during the project. Because of that, the researchers will ensure informed
consent and comply with ethical guidelines and laws that regulate the ethical re-
quirements for the research process.

The target group could also be seen as stakeholders. For this project, the target
group consist of mainly every citizen that in some time, either in the future or now,
needs to report a crime using an e-service at the Swedish Police Authority website.
Therefore, they will be affected by the result of this project.

Hereafter, the client the Swedish Police Authority, will be referred to as the authority
in this thesis.

2.3 Ethical Considerations

Ethical considerations play an essential role when conducting research. The re-
searchers have a responsibility to follow the ethical guidelines towards all who are
participating in the research and towards all stakeholders who may be affected by
the results of it.

The end-users of the project are every citizen that some time, either in the future or
now, need to report a crime to the authority. It is a wide range of people, and there
will be a need for data gathering from the users to practice user-centered design and
adjust the system after their needs. The data gathering will be made with informed
consent, anonymity and confidentiality by using a consent form or similar to comply
with the ethical guidelines and laws that regulate and set ethical requirements for the
research process (Vetenskapsrådet, 2017). That involves informing the participants
about what data will be collected, how it will be stored and how it will be used. It is
also crucial to know data collection regulations, for example, GDPR (The General
Data Protection Regulation).

The researchers will consider the potential ethical issues during the whole design pro-

9
2. Background

cess and do their best to minimize their impact. Potential recordings such as sound
and video will be destroyed after the study to ensure the participants’ anonymity.
All participation will be voluntary.

2.4 Previous Work and the Thesis’s Contribution

This section defines the concept of e-services, and presents opportunities as well as
challenges regarding these. Furthermore, previous work within the area of website
navigation is presented. The section also brings up information about the accessi-
bility perceptive and concludes with the thesis’s contribution.

2.4.1 E-Services
E-services can be defined as web-based services or interactive services that are pro-
vided by the use of information and communication technologies (ICTs) (Rowley,
2006). Furthermore, Hoffman and Bateson (1997) states that e-services can be de-
fined as:

"E-service is deeds, efforts or performances whose delivery is mediated

by information technology (including the Web, information kiosks and
mobile devices). Such e-service includes the service element of e-tailing,
customer support and service, and service delivery.".

It is a broad domain including both e-businesses which acts in the private sector, and
e-government which means that government provide e-services to citizens (Rowley,
2006). There is no face-to-face interaction between the customer and the organi-
zation. Instead, the interaction happens through the technology, such as a website
(Rowley, 2006).

The emerging trend of e-services opens up opportunities and challenges for end-users
and organizations. Privacy and security are some of the challenges. The viability of
e-services can be threatened if these are not correctly managed. This implies that
the end-user might be concerned about the fact that an unknown third party can
have access to the information that the user provides about himself/herself (Rust
& Kannan, 2002). Despite the privacy and security concern, e-services can make it
convenient for customers to access the service without constraints such as distance
and opening hours (Rowley, 2006).

2.4.2 Website Navigation

A challenging aspect faced by website designers is to reduce the disorientation when
trying to locate desired information (Pilgrim, 2012). The provided tools from web
browsers are limited and do not give information about the relationship between
pages (Pilgrim, 2012). Nor does it help users to answer questions such as ’Where
am I?’, ’Where can I go from here’ or ’Which pages points to this page’ (Bieber
et al., 1997).

10
 2. Background

Farkas and Farkas (2000) studied the different guidelines related to the most com-
mon navigational issues and synthesized these into their guidelines. The authors’
research is drawn from limited empirical research; however, it includes research and
theory from human-computer interaction (HCI), interface design, cognitive psychol-
ogy, and information design.

Pilgrim (2012) investigated the frequently used website navigation tools from 2002
to 2011 and found three other dominating navigational support. Those were site
search tools, sitemaps and index tools. Despite the dominating tools to provide
effective navigation in websites, the author draws attention to the lack of detailed
guidelines for designing these tools. Pilgrim (2012) states that disorientation within
websites may never be solved. However, it can be reduced with the help of tools
that aims to minimize the cognitive load when navigating. Pilgrim (2012), further
states that future research needs to be done in this domain to help developers in
their selection of website usability guidelines.

2.4.3 Accessibility
Accessibility means that an interactive product can be used by as many people
as possible (Sharp et al., 2019) and addresses that the user experience should be
equivalent for people with and without disabilities (Web Accessibility Initiative,
2010). Web accessibility refers to the fact that people with disabilities should have
the same experience of perceiving, understanding, navigating and interacting with
websites (Web Accessibility Initiative, 2010).

Moreover is the importance of incorporating accessibility from the beginning of a

project to avoid redoing work (Lawton Henry, 2019). Some of the tools that increase
the knowledge of web accessibility (Freire et al., 2007) are web browser plugins such
as Funkify (n.d.), Voyant (n.d.), Webaim WebAim (n.d.) or digital products such as
Microsoft Design toolkit (Microsoft Design, n.d.) and Cambridge Inclusive Design
Toolkit (Clarkson & Coleman, 2007).

Furthermore, a common framework and standard are the Web Content Accessibility
Guidelines (WCAG) which has been approved as the international ISO-standard
for web accessibility (Web Accessibility Initiative, 2010). The WCAG guidelines
are grouped into: perceivable, operable, understandable, robust, and conformance.
Each guideline has three levels of success criteria: A, AA and AAA. The latest
update is the third version, WCAG 2.2, which is a working draft from the 13th of
May 2021 that contains all the three levels of success criteria (Adams et al., 2021).

Starting from 1st of January 2019, a new law about Web Accessibility Directive,
(Lag (2018:1937) om tillgänglighet till digital offentlig service (Infrastrukturdeparte-
mentet RSED DF, 2018)), also referred to ’DOS’-lagen, states that every public
sector in Sweden has to follow the accessibility standards described in the European
standard EN301549 (CEN CENELEC ETSI, 2015) which is based on the interna-
tional standard WCAG level AA. The public sector in Sweden refers to authorities,
county councils, municipalities, and other actors classified as bodies governed by

11
2. Background

public law (DIGG, n.d.). The law applies to:

• Web sites (including intranet and e-services)

• Applications

• Documents distributed from these platforms

• Content that is spread through a third party (i.e. social media)

The law also states that an accessibility report (’tillgänglighetsredogörelse’ in Swedish)

has to be created by the public sector, which should describe how the current website
or application follows the accessibility requirements (DIGG, n.d.). The Agency for
Digital Government (DIGG) works to improve digital accessibility on websites and
digital platforms controlled by the public sector (DIGG - Myndigheten för digital
förvaltning, n.d.).

2.4.4 The Thesis’s Contribution

The work presented in this thesis builds on earlier research to explore how to improve
web navigation. Furthermore, existing guidelines in accessibility will be considered
to create an accessible and usable product. While previous work focuses on general
navigation to different information pages, and accessibility in general, this thesis will
focus on a case study to further explore how to improve the navigation to certain
e-services within a website. The main contribution of the thesis will help authorities
and organizations gain more knowledge about how to design to help all users locate
the correct e-services.

12
 3
Theory

The chapter covers relevant theoretical frameworks, concepts and related research
to the thesis. It starts with an introduction about website navigation which aims to
bring knowledge about navigation models, guidelines and navigation behaviors. The
chapter follows up with theories about decision making to understand how humans
make decisions in different situations. The theory about design systems is presented
and describes the different terminologies used in the domain. Moreover, the chapter
highlights the inclusive design methodology and covers definitions about disability,
accessibility, and an introduction to the web accessibility directive.

3.1 Website Navigation

Navigation plays an important role, not only for finding information on the web,
but also to enhance understanding, reflect on the brand or organization and give
credibility to the site (Kalbach, 2007). Website navigation can be defined in three
ways (Kalbach, 2007, p. 5):

1. The theory and practice of how people move from page to page on the Web.

2. The process of goal-directed seeking and locating hyperlinked information;

browsing the Web.

3. All of the links, labels, and other elements provide access to pages and help
people orient themselves while interacting with a given website.

Web navigation is about linking and creating relationships between different pages.
Together, the elements form a system of navigation that help people find the infor-
mation they are looking for.

3.1.1 Navigational Models

Access to information on the web can take shape as different navigational models.
Kalbach (2007) provides examples of some models to understand how information
websites can be accessed. However, the author points out that nowadays, these
models rarely exist alone but are somewhat mixed.

13
3. Theory

’The content-linking-only model’ describes how pages are linked to each other with-
out any hierarchical organization or linking patterns (figure 3.1). In general, there
is no traditional home page, and the links are embedded in the text. Although it
may provide a strong relationship between pages, it does not provide high findabil-
ity. This model will make it difficult to orient and search for information (Kalbach,
2007).

Figure 3.1: The navigational model referred as the content-linking-only model.

The Researchers’ own version of the original figure presented in Kalbach (2007,
p. 6)

’The liquid information model’ characterizes a page where every word is an interac-
tive element (figure 3.2). In other words, that means that all text are linked to other
content pages. For instance, when clicking a word, an option menu can appear and
refer to actions such as conducting a search, define the term or translate it (Kalbach,
2007).

Figure 3.2: The navigational model referred as the liquid information model. The
Researchers’ own version of the original figure presented in Kalbach (2007, p. 6)

’The filter model’ lets the user access all content through a single web page by
filtering different chunks of materials (figure 3.3). The page provides interactive
elements to let the user access the full content when clicking on it. All the content
is presented on the same page, which means that the user never leaves the page, but
instead keeps updating its content (Kalbach, 2007).

14
 3. Theory

Figure 3.3: The navigational model referred as the filter model. The Researchers’
own version of the original figure presented in Kalbach (2007, p. 7).

’The search model’ does not provide direct navigation or linking patterns to the
internal pages (figure 3.4). To access the internal pages, the users have to go through
three steps: (1) interact with a search system, and type in the correct keywords,
(2) find the internal page in the presented search list and (3) click on the correct
page. This model assumes that the item is known in advance and that the users
know which keyword is practical to use (Kalbach, 2007).

Figure 3.4: The navigational model referred as the search model. The Researchers’
own version of the original figure presented in Kalbach (2007, p. 8)

’The structural browse model’ takes form as a hierarchical tree structure where a set
of links are visually represented and separated from the page (figure 3.5). These links
provide branches to the tree, which provides access to more information (Kalbach,
2007).

Figure 3.5: The navigational model referred as the structural browse. The Re-
searchers’ own version of the original figure presented in Kalbach (2007, p. 9)

15
3. Theory

3.1.2 Website Navigation - Design Guidelines

Design guidelines are useful as a framework for designers to make grounded decisions
in situations where there are limitations in resources hindering an examination of
every feature (Pilgrim, 2012). According to Pilgrim (2012) there are mainly two
types of guidelines; detailed low-level rules and high-level guiding principles. Com-
monly, different guidelines become too general or too narrow, resulting in difficulties
implementing them in specific projects. There are limited guidelines focused on the
navigational aspects of the websites (Pilgrim, 2012). However, some of the general
guidelines of web design have more focus on guiding the user towards finding the
relevant information. Horton et al. (2016) describes the following;

• The terminology and organization structure of websites should match the users
mental model to help them navigate the site. Websites that order their content
according to how the management works often confuse the user and make it
hard to find the content.

• When guiding the user to find what they are looking for, it is good practice
to segment the information into short chunks. Bulleted lists, tables, titles and
subtitles together with short information enables quick scanning.

• The user expect hyperlinks to lead them directly to related information. If this
need should be met, the chunks need to be structured and organized placing
related information together. A logical consistent site organization allow the
user to predict where to find things.

• The design should be made with ’enough’ levels in the menus since too many
branches buries the information deep and requires too many clicks. Further-
more, users tend to be confused by deep hierarchies.

• For sites bigger than a few dozen pages, the users expect a functional search
function. Browsing can never assure the user that they found all relevant
information about a subject indicating the importance of the search box.

Pilgrim (2012) indicate that the web navigational guidelines are deficient, lacking
advice of specific navigation.

3.1.3 Information Foraging

A theory of how people navigate on the web and how they behave can be explained
with Information Foraging, developed by Peter Pirolli and Stuart Card (Budiu,
2019). The theory was inspired by animal behavior, more specifically, how they forge
for food which shares a similar language with information foraging as illustrated in
table 3.1. The theory of information foraging states that when users have a goal to
find information, they estimate and choose the candidates they believe can maximize
the rate of gain (Pirolli & Card, 1999):

16
 3. Theory

Inf ormation V alue

Rate of gain =
Cost associated with obtaining that inf ormation

In general, the equation means that people will make decisions based on (1) the
likeliness that the page will lead them to their goal and (2) the time it takes to get
to the goal. In other words, it means that the theory can explain why people do not
visit every single link or keeps scrolling: they want to spend as little time possible
to get as much information they can, thus maximize the Rate of gain (Budiu, 2019).

Animal Foraging Information Foraging

Goal Food Information

Patch A site containing one or more A website (or other source of

potential sources of food. information)

Forage Search for food Search for information

Scent The animal’s assessment of How promising a potential

how likely the patch will source of information appears
provide food to the user

Diet The totality of food types that The totality of the information
an animal may consider in sources that a user may
order to satisfy hunger consider to satisfy information
need

Table 3.1: The common language between animal foraging and information for-
aging. The Researchers’ own version of the original figure presented in (Budiu,
2019).

Information Scent
One of the factors affecting the Rate of gain equation is the ’information scent’,
which was popularized by Spool et al. (2004). The concept of information scent
plays an important role when users search for information on the web. The user
estimates how well the web page suits their information need by judging the ’scent’
of how likely it is to find the information.

The scent of a web page is the titles, images, and information displayed on the site.
For instance, a user that is looking for dish towels but lands on a page displaying
images of candies can, by judging the information scent understand that information

17
3. Theory

about towels will not be found there (Budiu, 2019). Spool et al. (2004) means that
people usually scan for their trigger words (words or phrases similar to what they
are seeking) which can give them a sense of the scent.

The Cost-Benefit Perspective

Another factor affecting the rate of gain equation is the cost associated with obtain-
ing that information (Budiu, 2019), which can be explained with the cost-benefit
perspective (Katz & Byrne, 2003). In general, the cost-benefit perspective describes
the human decision-making process. It consists of two factors: the cognitive effort
to use a strategy and the rate of accuracy in the results it can provide (Kleinmuntz
& Schkade, 1993). For the information foraging, that means the cost of time and
effort involved to extract the information and the cost of opportunity. The cost of
opportunity relates to the fact that once something is decided, the potential oppor-
tunity to look for others will be lost (Budiu, 2019). The cost of time and effort
involves the two types of user activities (Budiu, 2019): (1) Between-patch activities:
Finding and gathering sources (patches) of information. (2) Within-patch activities:
Inspecting the sources (patches) to gain information.

Enrichments
The two activities describing the cost of time in the cost-benefit perspective (section
3.1.3) can be affected by adaptations called enrichments. That refers to a type of
interaction, behavior or strategy to maximize the information foraging. In other
words, enrichments can be described as a tool that is used for foraging information
which can either be a learned behavior (behavioral enrichments) or created to the
specific patch where the user has to invest time and build it (interaction enrichments)
(Budiu, 2019).

’Behavior enrichments’ are learned tools that have proved to be successful in helping
the user extract information efficiently. An example is the ’F-pattern scanning’
where users can search for a specific word or sentence on the web page and effectively
scan the information scent without reading the entire page. Pernice (2017) lists more
scanning patterns which are summarised in table 3.2

18
 3. Theory

Scanning Pattern Description

Layer-cake pattern The eyes focus on the headings and

subheadings but skips the normal text
below. If the behaviour was plotted on a
heat map, it would show horizontal lines
resembeling a cake.

Spotted pattern User scans the information and skips big

chunks of text to look for specific elements
such as links, digits or a word.

Marking pattern The eyes are focused in one place while

scrolling or swiping the page. It happens
more often on a moblie than on desktop.

Bypassing pattern When user skips the first word of a text

where the list starts with the same words.

Commitment pattern When the user reads through the whole

page such as all paragraphs and contents.

Table 3.2: Behavior enrichments can be described with different types of scanning
patterns. The Researchers’ own table.

In turn, ’Interaction enrichments’ refers to the amount of effort a user has to find
information effectively. For instance, the time users spend thinking of keywords that
can increase the relevant searches (Budiu, 2019).

Pirolli and Card (1999) highlights the importance of considering designing websites
that can maximize the efficiency of information foraging without the use of enrich-
ments. Budiu (2019) provides examples that optimize the websites, such as using
systems that rank search results and put the relevant results first. Other optimiza-
tion tools are auto-suggestions (Moran, 2018), and scanning-friendly formatting such
as descriptive headlines, italic or bolded words and bulleted lists (Budiu, 2019).

19
3. Theory

The Attentional Capture Perspective

The attentional capture perspective can become a critical factor in the choices users
make on the web. It refers to how visual elements in the environment can draw
(or ’capture’) attention and therefore affect the decision making (Todd & Kramer,
1993). It could be colors, brightness, and objects on or close to visual boundaries. A
feature that catches a user’s attention will immediately signal that it is a ’landmark’
on the page. For instance, if a search bar draws attention with its visual cues, the
user may perceive that the search bar is the primary way to find items and that
other features are secondary alternatives (Katz & Byrne, 2003). In addition to that,
Burke et al. (2005) studied how commercial banner ads affected the search time on
a web page and concluded that it hindered the search even though the users did not
look at the ads.

3.2 Decision Making Theory

Information is all around us, everywhere. To handle this information overload, hu-
mans need to filter the information and the stimuli to a reasonable amount (Stern-
berg et al., 2011). Decision making works the same way - by reducing the available
information, the human makes it possible to make decisions. When navigating a
website, many decisions need to be made about where to click, what to search for,
and where to direct the focus. Heuristics is an aid in these circumstances, allowing
the brain to examine fewer cues and simplify the design making process (Sternberg
et al., 2011). Generally, a heuristic could be seen as a rule of thumb, helping the
person use previous experiences to act more quickly. However, beyond reducing the
cognitive load, the shortcuts also open up for biases and errors since much informa-
tion falls out (Caraban et al., 2019; Sternberg et al., 2011). This section will present
some heuristics and possible biases.

3.2.1 Heuristics
There are several heuristics used in different situations. ’Satisfacing’ is one of them,
relating to the idea that humans get as close as possible to optimizing a decision
without really optimizing (Sternberg et al., 2011). The idea is that because of lim-
ited resources and time, and it is too expensive to make the best decision. However,
the decision is optimized to the resources the person has. When using the satisfic-
ing heuristic, the person selects the first option that meets the minimum level of
acceptability, i.e. it is ’good enough’ (Sternberg et al., 2011).

Other heuristics are ’Elimination by Aspects’ and ’Framing’ (Sternberg et al., 2011).
Elimination by Aspects treats the problem of too many options that cannot be
considered in the available time. By focusing on one aspect at a time, e.g. "needs to
be cheaper than 500 SEK", the person can efficiently eliminate many options and end
up with a reasonable amount. The Framing Heuristic implicate that how different
options are represented affect how they are selected (Sternberg et al., 2011). For
example, humans tend to prefer certain gains rather than uncertainty. If a problem

20
 3. Theory

is stated and formulated so that one option seems more safe and more certain than
the others, that option is more likely to be selected.

In user interface design, Jakob Nielsen has formed ten usability heuristics that have
acted as rules of thumb for human-computer interaction (Nielsen, 2020). An example
is the heuristic ’Error Prevention’ that prevents errors and can be done by supporting
undo and giving warnings to users. A similar heuristic is ’Help users recognize,
diagnose, and recover from errors’, which means that error messages should be
expressed in plain language where the problem is stated, and a solution is suggested.
All usability heuristics are presented in 3.6.

10 Usability Heuristics

By Jakob Nielsen

#1 Visibility of System Status

#2 Match Between System And the Real World

#3 User Control And Freedom

#4 Consistency And Standards

#5 Error Prevention

#6 Recognition Rather Than Recall

#7 Flexibility and Efficiency of Use

#8 Aesthetic and Minimalist Design

#9 Help Users Recognize, Diagnose, And Recover From Errors

#10 Help and Documentation

Figure 3.6: The 10 usability heuristics by Jakob Nielsen presented in Nielsen

(2020). The Researchers’ own illustration.

3.2.2 Biases
As mentioned, decisions made by heuristics might lead to unintended biases (Cara-
ban et al., 2019; Sternberg et al., 2011). Some of these biases are ’Overconfidence’,
’Illusory Correlation’ and ’Hindsight Bias’.

Research has shown that people tend to be overconfident, either of their skills, judg-
ment or knowledge (Sternberg et al., 2011). If a poor decision is made because of
this overconfidence, it is called the overconfidence bias. Exactly why people tend to
be overconfident is unclear. However, it might be because people are unaware of how
little they know or that their resource is unreliable (Sternberg et al., 2011). People
tend to create correlations and relationships between things that do not correlate,
so-called illusory correlation (Sternberg et al., 2011). It could be events, categories
or attributes. For example, people might believe that a specific cause affected some-

21
3. Theory

thing while it was unconnected. The bias might also impact the thought of other
people and form stereotypes, making it easier to prejudge.

When looking at a happening in retrospect, it is easy to believe that the outcome

could have been figured out beforehand while noticing all the signs (Sternberg et
al., 2011). However, research indicates that humans rarely recognize the signs while
they are happening; thus, first afterwards feel that the outcome was obvious. This
phenomenon is called the hindsight bias (Sternberg et al., 2011).

3.3 Design System

The design system does not have a standard definition, and people within the web
community use it differently (Kholmatova, 2017). According to Kholmatova (2017,
page 25), a design system can be defined as "a set of interconnected patterns and
shared practices coherently organized to serve the purpose of a digital product".
In other terms, it is a framework consisting of style guides and pattern library
(Fitzpatrick, n.d.) as seen in figure 3.7.

A style guide is a part of the design system and defines the rules of branding and
visual style of a product (Mockplus, 2020). It consists of guidelines for typography,
icons, color, etcetera (Mockplus, 2020).

A pattern library is a collection of recurring and reusable patterns that are used
to solve design problems (Kholmatova, 2017). It consists of several building blocks
(Fitzpatrick, n.d.). One of them is ’Identity’, which aligns with the style guide such
as logos, fonts and colors. ’Components’ help define the user flows and take form as
a login structure, survey form, or error screen. ’Elements’ are smaller parts of the
components such as buttons, form fields and dropdowns. Elements can use ’Gestalt
Principles of Visual Perception’ to describe how a specific arrangement of content
can help people determine if certain elements belong to the same group. An example
is the principle of proximity, which explain how placing elements near each other
can provide visual cues that these are grouped (Harley, 2020). Another block is
’Interactions’ that shows the state of an activity, for instance, hover states, page
loads, or slide effects. One way of showing interactions is to use ’Affordances’ which
provide visual cues on how to interact with an object. All these patterns create
a design language of the interface and can be viewed as a vocabulary of design
elements in terms of shape, color, typography and the combination of these (Cooper
et al., 2014).

22
 3. Theory

Design System

Style Guides Pattern Library

Identity Components Elements Interactions

Figure 3.7: Overview of a design system that can include both a style guide and
a pattern library. The Researchers’ own figure.

3.4 Usability
According to the ISO-standard of Usability (ISO 9241-210:2019, 2019, p. 3), usability
is defined as the "extent to which a system, product or service can be used by
specified users to achieve specified goals with effectiveness, efficiency and satisfaction
in a specified context of use", and goes in line with the five components of usability
presented by Nielsen (Nielsen, 2012). These are learnability, efficiency, memorability,
errors, and satisfaction.

Several methods and approaches can improve usability. The fundamental approach
is usability testing, which consists of three modules (figure 3.8). One of the modules
is to find representative users who know about the user group’s needs, opinions,
struggles, and preferences. The following module is to let the users perform repre-
sentative tasks and provide context to engage with the interface. The third module
involves observing the users and identify what they do, where they succeed and what
difficulties appear when interacting with it (Nielsen, 2012).

The Three Modules of Usability Testing

1 2 3

Find representative
Find representative
Observe users
users tasks

Figure 3.8: The three modules of usability testing. The Researchers’ own figure.

23
3. Theory

Nielsen and Landauer (1993) have researched the ultimate amount of users involved
in usability testing. Their conclusion is presented with a graph (figure 3.9) that
illustrates how the amount of users corresponds with the percentage of identified
usability problems. In their final analysis, Nielsen and Landauer (1993) argues that
five users are enough to capture 85 percent of the usability issues. The equation
acknowledges that involving more than five users will fall into the risk of not finding
or learning anything new and instead becoming costly. However, the best scenario
is to run as many small tests as possible within the budget and the time frame.

100%
Usability Problems Found

75%

50%

25%

0%
0 3 6 9 12 15
Numbers of Test Users

Figure 3.9: The usability graph that illustrates how the amount of test users
corresponds to the percentage of identified usability problems. The Researchers’
own version of the graph and original data presented in Nielsen and Landauer (1993,
p. 209).

3.5 Inclusive Design

Inclusive design is a methodology that strives to include and learn from people with
different perspectives by encouraging the creation of products, systems and services
in a diversity of ways for people with and without impairments. The most important
part is to make it possible for everyone to participate with a feeling of inclusion and
belonging (University of Cambridge, n.d.).

Moreover, Microsoft Design (n.d.) has created a table (figure 3.10) that divides
the different dimensions and impairments into touch, see, hear and speak with an
example of the respective time dimensions: permanent, temporary and situational.
The purpose of the table is to illustrate the range of different impairments that can
lead to disability.

24
 3. Theory

Figure 3.10: The persona spectrum by Microsoft Design (n.d.) under CC BY-NC-
ND.

There are principles aimed to make it easy for everyone to have an inclusive design
approach. The principles are found in Microsoft’s inclusive design toolkit (Microsoft
Design, n.d.) and present the following:

• Recognize exclusion: exclusion happens due to mismatched interactions be-

tween a person and society. By identifying the factors that lead to exclusion,
designers can generate ideas and solutions for interactions between a wider
range of people.

• Learn from diversity: when products, systems or services do not perform well
for people with a set of disabilities, these people adapt to the situation. By
learning from diverse people, insights will be gathered to understand how
people adapt to new situations and the emotional context around them.

• Solve for one, extend to many: exclusion can be experienced by all people,
anywhere, anytime. The principle highlights the notion of the persona spec-
trum. It emphasizes that a solution for one person with a permanent disability
will likely become a solution for the people with temporary and/or situational
disability.

3.5.1 Disability
Disability can be defined with the medical model and the social model. The medical
model claims that people are disabled because of their impairment, such as visual,

25
3. Theory

cognitive, hearing, or physical impairment. On the contrary, the social model states
that people are disabled because of society and the surroundings. In recent years, the
latter model has been widely used to define the term disability, and World Health
Organization (2020) describes it as "an umbrella term for impairments, activity
limitations, and participation restrictions". Siebers (2008) writes that the issue is
created by environmental and social barriers rather than the impairment of a person.
A product, system or service created in a way that necessitates a specific type of
interaction can make it unusable for someone with a disability, thus leading to a
new disability. In this context, disabilities were created due to the poor design of
the interaction between the user and the technology, not due to the disability itself
(Sharp et al., 2019).

In Sweden, there are no statistics on the number of people who face society’s chal-
lenges due to their disability. There are different types of impairments, and the
Swedish government is not allowed to collect information on various disabilities
among the population. Furthermore, some disabilities are hard to diagnose while
others only affect the person during some periods of life (Funka, n.d.). However,
World Health Organization (2020) estimates that over 1 billion people worldwide
live with some form of disability which equals about 15 percent of the world’s pop-
ulation. According to Sharp et al. (2019), the number of people born with some
disability is fewer than 20 percent. At the same time, it is estimated that 80 percent
of people will have any disability when they reach 85.

26
 4
Methodology

This chapter provides a description of relevant frameworks and methods for the
project. The beginning of the chapter introduces the concept of research through
design to understand why design activities are helpful to solve problems. It continues
with a section on remote research, user research methods, and the design process
intended to be used in the thesis. Furthermore, the chapter introduces a list of
different methods considered helpful for answering the research questions.

4.1 Research Through Design

Design is a broad definition, which might refer to both the design process and the
final design of a product or prototype. The combination of ’design’ and ’research’
in human-computer interaction has been developed for many years (Zimmerman
et al., 2007). It has previously been regarded as separate areas, where design comes
from the industrial practice and research from academic experiences (Stappers &
Giaccardi, n.d.). Research through design can, at first sight, seem non-academic be-
cause of its exploratory manner. However, it is also possible to see it from another
perspective and worship the design research with its aptitude for exploration and
speculation (Gaver, 2012). Gaver (2012) explains that every design-related research
is unique and often covers statements such as ’what might be’ instead of ’what is’.
Accordingly, the design problems can often not rely on doing traditional scientific
hypotheses testing. The goal is instead to reach the point where theories are ’some-
times right’. Stappers and Giaccardi (n.d.) means that research through design can
be viewed as design activities that contribute to new knowledge. By using the design
process, practitioners can understand, frame and work in iterations to develop pro-
totypes that address the problem. The notion of research through design is related
to Rittel and Webber (1973)’s definition of wicked problems.

4.1.1 Wicked Problems

Rittel and Webber (1973) categorize problems into two areas: tame and wicked
problems. The definition of tame problems is the ones that can be clearly defined
and solved by applying the correct methods. In contrast, wicked problems are more
complex and cannot be properly formulated (Rittel & Webber, 1973). Furthermore,
Churchman (1967) states that wicked problems are a:

27
4. Methodology

" (...) class of social system problems which are ill-formulated, where
the information is confusing, where there are many clients and decision-
makers with conflicting values, and where the ramifications in the whole
system are thoroughly confusing."

(Churchman, 1967, p. 141)

In other words, a wicked problem consists of many variables that would be impossible
to control and therefore seem impossible to solve (Interaction Design Foundation,
n.d.-b).

Rittel and Webber (1973) explains wicked problems by taking a freeway as an ex-
ample. It is expressed that it would not be feasible to start building a freeway and
then later change things after its performance. Nevertheless, it is not feasible to test
the freeway in all scenarios. Somewhere in that process, a decision has to be made.
Designers are often dealing with wicked problems, and one way to solve them is to
use Design thinking since it can be re-framed into a human-centered approach and
make it easier to prioritize the users’ needs (Interaction Design Foundation, n.d.-a).

4.2 Remote Research

The project was written during the spring of 2021 when Covid-19 was widely spread
worldwide, inevitably forcing everyone who had the opportunity to work from home.
Due to these circumstances, the researchers focused on methods that could be done
digitally - remote research.

Remote research means researching without interacting in-person or face-to-face

(Asjes, 2014). The research is often performed using tools such as a computer or
phone, allowing both the researcher and participant to see and hear each other.
Some software provides screen-sharing, which makes it possible to see what the
other person is seeing and interacting with (Asjes, 2014).

Preece et al. (2015) highlight the advantages and disadvantages of remote research
and state different aspects to consider before starting. Poor connections can cause
difficulties in video and acoustics performance, including a risk that the participant
might multitask instead of focusing on the session. Moreover is the aspect of security,
where sensitive information or confidential materials can be a concern when doing
research remotely (Tulathimutte & Bolt, 2010). Another concern might be if special
equipment such as software or physical equipment are required to run the study
(Tulathimutte & Bolt, 2010). Likewise is the aspect of having to install and configure
tools, which can become complicated for first-time users or people that have lower
computer literacy (Asjes, 2014). Despite the disadvantages, remote research also
opens up advantages and opportunities. There is no need to travel (Preece et al.,
2015) which can lead to geographic diversity (Tulathimutte & Bolt, 2010), and
participants are in their habitat, which can make them feel more relaxed (Preece
et al., 2015). In addition, participants can leave the conversation, which can make
them feel more controlled and secure (Preece et al., 2015).

28
 4. Methodology

4.3 User Research Methods

Interaction design includes different methods of user research. The methods range
from data gathering to data analysis and can be classified into different dimensions
such as: qualitative and quantitative, or behavioral and attitudinal. A coverage of
these methods is essential in the design process, and one way to break down the
methods is to use a chart suggested by Rohrer (2014). The chart consists of two
axes defining both Qualitative vs. Quantitative and Behavioral vs. Attitudinal.
An example is given with some of the methods that are considered for the project
where the methods about the dimensions are referred from Martin and Hanington
(2012), seen in figure 4.1. Even if the chart gives an overview of the methods’
positions in relation to the dimensions, Preece et al. (2015) argues the importance of
understanding that all types of data gathering methods can result in both qualitative
and quantitative data.
BEHAVIORAL

What people do

• Simulation
• Eye-tracking

• Think aloud
• Questionnaires
• Cognitive walkthrough

• A/B Testing

• Questionnaires

• Affinity diagramming

Why and how • Persona

How many and
to fix • Scenario
how much
• Digital prototyping (hi-fi)

• Interview
• Questionnaires
• Questionnaires

What people say

ATTITUDINAL
QUALITATIVE QUANTITATIVE
(DIRECT) (INDIRECT)

Figure 4.1: A method matrix with the dimensions of qualitative, quantitative,

attitudinal and behavioral aspects. Authors’ own version of the figure inspired by
Rohrer (2014).

Quantitative research is well suited to understand problems related to ’how many’

and ’how much’ (Rohrer, 2014). The data often includes numbers and is based on
the performance of a task, such as success rate or a number of errors. The context

29
4. Methodology

of the problem might be lost since the result often is presented as numbers, making
it harder to interpret it without a reference point (Budiu, 2017). The findings often
need to complement qualitative research, which answers questions related to ’why’
or ’how to fix a problem’. It might be data with detailed verbal descriptions (Baxter
et al., 2015), where the outcome is a set of words and images (Preece et al., 2015).

The attitudinal dimension deals with what people say (Rohrer, 2014) and serves
the purpose of understanding peoples’ opinions, feelings, beliefs, or thoughts (MBA
Skool Team, 2020). In other words, what people express. The contrast of attitudinal
is behavioral, which gives insights into what people do (Rohrer, 2014). Scott (2017)
highlights the importance of combining attitudinal and behavioral data since they
supplement each other. As an example, it is common for participants to behave in
ways that are different from their expressions (Scott, 2017).

4.4 Design Thinking

It is important to understand and address changes in the users’ behaviors, and the
environment around them (Interaction Design Foundation, n.d.-a). Interaction De-
sign Foundation (n.d.-a) mention that wicked problems (section 4.1.1) are increasing
and that design thinking is one way to target the problem; by breaking down the
problem in smaller pieces and focusing on the user. It could be seen as a five-step
process, often performed in iterations or parallel to each other (Interaction Design
Foundation, n.d.-a). The five steps are Empathize, Define, Ideate, Prototype & Test
(Figure 4.2) (Siang & Dam, 2021).

Empathize Define Ideate Prototype Test

Figure 4.2: The five stages of the design thinking process which can include iter-
ations of phases. Authors’ own figure.

4.4.1 Empathize
Empathize is the first stage of the design thinking process to capture an empathetic
understanding of the problem. This can be done by engaging and immersing with
the users to understand their feelings, experiences, and motivations (Siang & Dam,
2021). The goal is to discover users’ explicit and implicit needs and find the gaps
between what users do and what they say they do (Siang & Dam, 2020). Siang and
Dam (2021) highlights the importance of applying empathy in the human-centered
design process to allow designers and researchers to leave assumptions about the
world behind and instead focus on other peoples’ actual needs. Many methods can
be used in the empathize phase. This section will cover the methods illustrated in
figure 4.3.

30
 4. Methodology

Empathize

Literature
Simulation
Think Aloud Eye Tracking Interview Indirect Cognitive
Questionnaire
Reviews Exercises Observation Walkthrough

Figure 4.3: The eight methods involved in the empathize stage. Authors’ own
figure.

Literature Reviews
Literature reviews is a research method and a fundamental part of academic papers
where previous research enables contextualization and foundation of the designated
area (Snyder, 2019).

The method is a practical approach to provide answers, give an overview of the

research area, identify gaps, discuss a specific topic, or laying the foundation to a new
conceptual model or theory (Snyder, 2019). Furthermore, Martin and Hanington
(2012) writes that literature reviews can be freestanding or a component of a research
paper.

Simulation Exercises
Simulation exercises are established in multiple professions, offering circumstances
that are hard to create otherwise (Martin & Hanington, 2012). According to Martin
and Hanington (2012), the primary purpose of the simulations is to evoke user
empathy and affect the design decisions through experience. The simulations can
be created and designed in different ways, mainly treating physical disabilities and
limitations, e.g., cognition deficits, brain injuries, and visual impairments (Martin
& Hanington, 2012). However, a limitation is that an experience from a simulation
exercise might not always correspond to reality.

Think Aloud
Think aloud is a method used for evaluating existing products, prototypes, ser-
vices, or systems. The participant is asked to articulate their thoughts, feelings, and
actions while simultaneously performing some task (Martin & Hanington, 2012).
While taking part in the participants’ actions and reasoning, the designer gets valu-
able data about struggles and frustrations which enables improvements and correc-
tion (Martin & Hanington, 2012).

31
4. Methodology

Eye Tracking
Eye tracking is a method measuring technical information about where, when, and
for how long a participant is looking at something (Martin & Hanington, 2012).
According to Martin and Hanington (2012) it helps examine participant’s naviga-
tion on websites. The eye movements are identified as fixations or saccades (rapid
movements between points), and a heat map is created visualizing the result. The
heat map does not explain the underlying motivations of the user, thus making it
suitable to perform together with complementary methods (Martin & Hanington,
2012).

Interview
Interviews can be divided into four categories: open-ended/unstructured, semi-
structured, structured, and group interviews (Sharp et al., 2019). If the purpose
is to get a first impression about something, an informal and open-ended interview
is often suitable (Sharp et al., 2019). Even though an unstructured interview is open
for new perspectives and questions, it is recommended to prepare an agenda and
discuss topics. It is important to remember that the data will not be coherent be-
tween different participants since the interviews develop their format (Sharp et al.,
2019). This might make it harder to analyze.

Interviews conducted remotely are increasing in popularity. It might be ensuring for

the participant to be in their environment without worrying about the circumstances
around them, such as other participants, clothing, and the possibility of leaving the
conversation (Sharp et al., 2019).

Indirect Observation
The indirect observation could be performed in different ways, either by analyzing
textual material from observations or directly from narratives such as tweets and
forum posts (Anguera et al., 2018). According to Anguera et al. (2018) it can
be helpful to mix non-spontaneous behavior, such as questionnaire responses, with
data from more natural circumstances to get value from both the qualitative and
quantitative data.

Indirect observation in terms of examining trails of activity and scraping data is an

unobtrusive method. However, it might raise ethical questions if the user is unaware
of the activity (Sharp et al., 2019).

Cognitive Walkthrough
One way to examine prototypes is to let a usability expert perform a cognitive walk-
through from the user’s point of view. The method focuses on user interaction by
examining how a new user can perform specific tasks in a system (Interaction Design
Foundation, 2020). The first step is to define the tasks that should be evaluated
and divide them into smaller subtasks (i.e., ’open the browser’). Preferably, one
can ask four questions after each subtask; "Will the user try and achieve the right

32
 4. Methodology

outcome?", "Will the user notice that the correct action is available to them?", "Will
the user associate the correct action with the outcome they expect to achieve?" and
"If the correct action is performed; will the user see that progress is being made
towards their intended outcome?"(Interaction Design Foundation, 2020).

Questionnaires
Questionnaires are simple to produce and the dominant tool to collect survey in-
formation (Gillham, 2008). Martin and Hanington (2012) states that it could be
used independently and in integration with other methods to supplement the data.
The authors further highlight the importance of considering how the questionnaire
is structured. Open-ended questions enable depth of response, while closed-ended
questions provide an opportunity for numerical analysis. Likert scale questions are
highly recommended to keep both neutrality in question but also receiving strength
of response. In general, the method can be used in various phases for different pur-
poses (Martin & Hanington, 2012). A disadvantage with the method is that it does
not give any space for asking follow up questions directly to the user.

4.4.2 Define
The second stage is used to gather the data from stage one and analyze it (Inter-
action Design Foundation, n.d.-a). The defined core problems are called problem
statements and should be human-centered (Siang & Dam, 2021). Furthermore, af-
ter defining the problems, the designers might accelerate against the third stage by
introducing questions as "How might we...?" (Siang & Dam, 2021). The section will
cover the methods illustrated in figure 4.4.

Define

Affinity Persona Scenario Behavior Design

Diagramming Archetypes Requirements

Figure 4.4: The six methods involved in the define stage. Authors’ own figure.

Affinity Diagramming
Affinity diagramming is used to organize and structure the data from earlier research
(Martin & Hanington, 2012). Researched-based insights are noted on separate sticky
notes, which later are clustered according to their similarities. Affinity diagramming
is an inductive method, creating clusters and groups gradually instead of using
predefined categories (Martin & Hanington, 2012).

33
4. Methodology

Persona
Personas help present the goals and needs that a product or service should be de-
signed against (Preece et al., 2015). They can be used to communicate and express
the purpose and vision (Sharp et al., 2019). Personas do not describe real users;
instead, they are meant to be realistic representations of the typical user. Behind
each persona, there is a synthesis of real users. By including detailed information,
such as name, personal details, and photographs, the persona feels like a real person
- making it easier for the designer to see them as potential users (Sharp et al., 2019).
This method supports inclusive design where accessibility personas can be created
to establish an understanding of people with disabilities. A risk with the method is
that the demographical data can lead to biases and assumptions, which should be
avoided.

Scenario
Scenarios could be described as a combination of things that might happen (Good-
win, 2009). They can be used for different purposes, including creating requirements
and checking interaction options. Goal-Directed scenarios are making use of the per-
sonas by describing their future interaction with a product, thus giving them value
and explains their motivations for a particular behavior (Goodwin, 2009). When
scenarios are used to define requirements, called context scenarios, it is still early
in the process. Thus the focus naturally lies on high-level functions, portraying the
ideal system behavior for different situations.

Behavioral Archetype
Behavioral archetype is a method similar to Persona (section 4.4.2) with the differ-
ence that, instead of presenting a person based on demographics such as age and
gender, behavioral archetypes represent and present the behavior and motivation of
the users. This is done by capturing their motivations, goals and general attitudes
(Doneva, 2017).

A toolkit by Smashing Ideas (2017) explains the creation of behavioral archetypes

which can start with a determination of the goals, needs, pain points, thoughts,
feelings, and actions of the user is to the context or scenario they are active in.
The method provides a foundation to prioritize features of a product so that it will
match the users’ behaviors (Doneva, 2017).

Design Requirements
While defining a description of the service or product that should be designed and
developed, requirement activities might be helpful to gather insights in terms of
requirements. A requirement could be defined as a statement that specifies how a
product should perform or what it should do (Sharp et al., 2019). The discovery
of requirements is done continually and is an iterative process. Sharp et al. (2019)
states that it is necessary to capture all iterations’ requirements to ensure that noth-
ing gets lost in the process. A consequence of limited notations of the requirements

34
 4. Methodology

might be miscommunication and misunderstanding.

Traditionally, it is possible to divide requirements into two categorizations - func-

tional and nonfunctional. The functional requirements determine what the product
shall do, while the nonfunctional express constraints or characteristics. However,
more categorizations exist, and they vary between different contexts.

4.4.3 Ideate
The focus of stage three is to ideate and generate ideas (Interaction Design Founda-
tion, n.d.-a). The knowledge from previous steps is used to challenge assumptions
and brainstorm potential solutions (Siang & Dam, 2021). Siang and Dam (2021)
highlights the importance of examining multiple ideas and problem solutions while
’thinking outside the box’. The section will cover the methods illustrated in figure
4.5.

Ideate

Sitemap Flowchart Brainstorming Sketching

Figure 4.5: The three methods involved in the ideate stage. Authors’ own figure.

Sitemap
Sitemaps can be used in the design process to help with the organization of content
and the navigation (Babich, 2019). There are two types of sitemaps - visual ones
representing the site organization and coded ones showing a list in XML. The visual
sitemap often shows a hierarchical view of the relations between pages (and sub-
pages) and helps to identify how items might be grouped. The purpose of this
structured representation is to create a better information architecture.

The production of a sitemap is done by creating blocks and connecting them with
lines (Babich, 2019). The sitemap should include a home page and items. The
items can have numbers correlating to their position in the hierarchy and a label
that explains more about them.

Flowchart
Flowchart represents sequences of steps in a process (Chapin, 2003) that can show
the whole process, the different steps, the relationship between the steps, as well as
the beginning and end of a process. Flowcharts are a helpful tool to communicate

35
4. Methodology

and create an understanding of a process. To build a flowchart, standard symbols

are used to represent specific actions (Associates Staff, 1995).

Brainstorming
Brainstorming involves combining a group of people, creating possibilities and ideas
(Goodwin, 2009). Even though many of the generated ideas are a bit crazy and
perhaps built on faulty assumptions, it is good to write them down and get them
out of the system. It is essential to have an open mind and not criticize or comment
on the ideas too much since it will hinder creativity - the idea might develop into
something suitable later on. A brainstorming session should be one to two hours
at most; then, the interesting ideas should be noted and saved for later (Goodwin,
2009).

Sketching
Sketching is a method used for creating the ground of the design work (Arvola, 2014).
According to Arvola (2014) a sketch could be seen as a suggestion, an exploratory
action that asks questions. It is a cheap method, meaning that the investment is
low, thus opening up for creating many versions and getting a better understanding
of the future product (Buxton & Buxton, 2007).

Cognition could be seen as an interactive process between the mind and the world,
making it natural to use sketching as a supportive tool for the thinking process
(Gedenryd, 1998). Gedenryd (1998) states that sketching most often is performed
in a simple context with elementary tools, such as pen and paper. Drawings and
sketches help the human mind to put things in context and see if ideas are doable
(Gedenryd, 1998).

In a design process, it is essential to create many sketches to expand the ideas and
avoid selecting the first standard ideas (Arvola, 2014; Traynor, 2012). The sketches
should be annotated to enable further development and examination (Arvola, 2014).

4.4.4 Prototype
Stage four involves a more experimental standpoint to identify the most suitable
solution for each problem (Interaction Design Foundation, n.d.-a). Inexpensive ver-
sions of the product, or specific features of the product, should be produced to in-
vestigate the solutions created in the previous stage (Siang & Dam, 2021). Without
prototypes, the designers would produce the final product and not until afterward
realize the demands of the product (Arvola, 2014). According to Arvola (2014),
using prototypes during the process makes small changes easier to implement and
test before developing the final product. The purpose of the stage is to highlight
potential constraints and problems combined with better insights about how the
users might behave and feel for the final product (Siang & Dam, 2021). The section
will cover the methods illustrated in figure 4.6.

36
 4. Methodology

Prototype

Digital
Paper

Prototyping Prototyping

Figure 4.6: The two methods involved in the prototype stage. Authors’ own figure.

Digital Prototyping (High-Fidelity Prototyping)

A high-fidelity prototype often provides much functionality and involves the look
and feel, making it similar to the final product (Sharp et al., 2019). This can be
compared to low fidelity prototypes that often are made of paper or similar. It could
be seen as a scale, where some prototypes might be of higher fidelity than another,
even though both of them could be classified as low fidelity. The main idea is that
the prototype needs to have enough fidelity to test the wanted functions. One way
to handle it is to follow the economic principle:

"The best prototype is one that, in the simplest and most efficient way,
makes the possibilities and limitations of a design idea visible and mea-
surable." (Lim et al., 2008, 7:3).

There are both positive and negative aspects of high-fidelity. The positive part
is that it offers almost complete functionality, the look and feel of the intended
product, is fully interactive, and can easily be used for testing and marketing (Sharp
et al., 2019). However, it is also more resource-heavy during development, time-
consuming, and might be mistaken for the final product while testing and creating
false expectations. High-fidelity prototypes do not need to be produced from scratch.
Instead, it might be efficient to create them by combining existing components from
libraries, developer kits, or similar (Sharp et al., 2019).

Paper Prototyping (Low-Fidelity Prototyping)

A low fidelity prototype is a simpler version of the final product and could, as an
example, consist of paper or cardboard (Sharp et al., 2019). The simple and cheap
production makes paper prototypes suitable for exploring different ideas (Sharp et
al., 2019).

4.4.5 Test
The final stage involves comprehensive testing of the prototype (Interaction Design
Foundation, n.d.-a). The results from this stage are often used to redesign existing
solutions from previous steps, working with the stages in iterations (Siang & Dam,
2021). The section will cover the methods illustrated in figure 4.7.

37
4. Methodology

Test

A B

A/B
Cognitive
Think Aloud Eye Tracking Interview
Testing Walkthrough

Figure 4.7: The five methods involved in the test stage. Authors’ own figure.

A/B Testing
A/B tests are used to put two different versions of the same product or prototype
against each other and compare them in terms of which performs better in a deter-
mined goal (Martin & Hanington, 2012). An A/B test often consists of a hypothesis,
a controlled test, and an altered test. The hypothesis is the main question that is
tested to confirm whether it is true or not (Stepanov, 2018). The controlled test
is referred to ’Test A’ and will provide data to compare with the altered test. The
altered test is referred to ’Test B’, which is where the changes are implemented.
This setup will make it possible to conclude a hypothesis (Farmen, n.d.).

Usability Testing
As mentioned in the theory about ’usability’, Nielsen and Landauer (1993) means
that usability testing consists of the three modules: (1) find representative users,
(2) let the users perform representative tasks, and (3) observe the users. Different
methods can be used to conduct usability testing. Some of the methods that can be
used are described earlier in the empathize phase, such as a cognitive walkthrough,
think aloud, eye tracking, and interviews. These methods can be reused and tested
on a new design that can either be low or high fidelity. Eventually, the insights can
generate a better understanding of how to improve the design requirements (section
4.4.2).

38
 5
Planning

The chapter outlines a plan to achieve the aim described in section 1.3. Moreover,
the chapter presents the work process with a selection of the methods that are
planned to be executed and an explanation of why specific methods were excluded.

5.1 Project Initiation

Week 1-2 will involve a project initiation consisting of a pre-study and planning
phase. The weeks will include introductions to the authority’s organization, meeting
with people in the department, and receiving relevant resources for the project.

5.2 Design Thinking Process

Week 3-14 will cover the design thinking process consisting of the following phases:
empathize, define, ideate, prototype, and test. Each phase has a purpose and a goal
that is planned to be reached with different activities and design methods.

5.2.1 Empathize
The empathize phase is planned to involve seven methods; literature review, sim-
ulation exercise, think aloud, eye tracking, interviews, indirect observation, and
questionnaires as illustrated in figure 5.1.

Empathize

Literature
Simulation
Think Aloud Eye Tracking Interview Indirect Cognitive
Questionnaire
Reviews Exercises Observation Walkthrough

Figure 5.1: The seven methods with a yellow background that are planned to be
used in the empathize stage. Authors’ own figure.

39
5. Planning

The phase will begin with a literature review to establish the theory and find suit-
able methods for the project. The eye tracking will serve the purpose of gathering
behavioral data about how users currently navigate to the e-services, specifically to
understand where they direct their visual attention (section 4.4.1). The selected
eye tracking software, RealEye (n.d.), uses the in-built webcam in the computer,
which makes it possible to conduct studies remotely, and the plan is to recruit 5-10
users. Moreover, the software enables participants to interact with the eye tracking
without the presence of the researchers. The initial thought was to combine eye
tracking with think aloud. However, a pilot test revealed that it would result in
cognitive overload to perform think aloud while simultaneously interacting with the
eye tracking system. To avoid this, the plan changed to introduce a questionnaire
immediately after the users have interacted with the eye tracking system and receive
more attitudinal data.

Nevertheless, think aloud will be executed on its own when doing remote user re-
search on visually impaired people since it will not be possible to use eye tracking.
The idea is to use a video conference software that enables screen sharing and ex-
ecute think aloud while the participant uses a screen reader. This setup makes it
possible for the researchers to see how the participant interacts with the website.

Furthermore, interviews with people from different departments at the authority will
be executed to gain knowledge about the existing system and the previous work,
findings, and insights. It will also help understand how the different departments
are interlinked and how they might be affected by the result of the project. To avoid
’reinventing the wheel’, indirect observation will be used to receive already collected
data (in terms of user feedback and statistics) from previous research conducted by
the different departments at the authority.

To understand the accessibility issues, simulation with Funkify (n.d.) (Chrome-

plugin) will be used to simulate how navigation is experienced by people with cog-
nition, dyslexia, motor and vision disabilities. Using automated usability testing
software instead of manual testing such as a cognitive walkthrough is because the
plugin will provide a quick overview of the main accessibility issues. The idea was
to perform a cognitive walkthrough with the help of the WCAG guidelines. How-
ever, after further reflection, it is believed that a cognitive walkthrough with WCAG
would result in findings that have already been found in previous research from the
authority.

5.2.2 Define
For the define stage, the plan is to conduct four different methods; affinity diagram-
ming, personas, scenarios, and design requirements as illustrated in figure 5.2.

40
 5. Planning

Define

Affinity Persona Scenario Behavior Design

Diagramming Archetypes Requirements

Figure 5.2: The four methods with a yellow background that are planned to be
used in the define stage. Authors’ own figure.

The affinity diagramming will be performed first since it helps sort and organize the
data gathered in the empathize stage. The idea is to write down everything that
might be of interest (subjects, ideas, problems) on sticky notes. This might be done
physically or digitally depending on how the regulations of Covid-19 will be during
that stage. The sticky notes will then be sorted into clusters and categories to find
struggles, opportunities, goals, and opinions that can be used for further analysis.

Personas will be created as the second step in the define stage, using insights from
the previous step. As mentioned in the methodology, personas are helpful in con-
certizing goals and needs, making it a suitable way to use the data categorized in
affinity diagramming. The aim is to represent different kinds of users from the target
group, preferably with different abilities encouraging an inclusive design suitable for
everyone. The personas will be created using a mix of demographics from the users
involved in the study, focusing on their goals, skills, and behaviors.

Scenarios are selected as the third step since a practical way to get value from the
personas is to put them in a context. The plan is to create goal-directed scenarios
where the personas’ interaction with the future product is described, creating an
initial idea of how the product might be designed to match the persona’s goals.

Design requirements are planned to be the last step of the define stage. Hopefully,
the previous steps have guided the process in the right direction. However, it might
be hard to grasp how to use all data in a helpful way. The design requirements
are meant to concertize it and create an overview of what the product should do.
The idea is to create a list with all the functional and nonfunctional requirements,
creating a natural starting point for the ideation stage.

5.2.3 Ideate
The idea for the ideate stage is to perform two different methods; sitemapping and
sketching as illustrated in figure 5.3.

41
5. Planning

Ideate

Sitemap Flowchart Brainstorming Sketching

Figure 5.3: The two methods with a yellow background that are planned to be
used in the ideate stage. Authors’ own figure.

Using the requirements from the previous step, the purpose of the site mapping is
to explore different structures and ideas of how to order the content. The sitemaps
will be of the visualizing type, created digitally in Figma (Figma, n.d.). The goal is
to get a joint view of how the navigational guide’s information architecture should
be.

Secondly, sketches will be made showing how the different views of the product
could look. First, many sketches will be created to explore many possibilities. The
sketches will be made using paper and pen. Later in the process, the two researchers
will discuss the sketches and write down comments, positive and negative aspects
of each (annotations), and decide which sketches to use for the prototyping stage.

The brainstorming method is not selected as a different method since brainstorming

is preferably done in larger groups in its raw form. Only two researchers are carrying
out this project, making it hard to implement a ’real’ brainstorming session without
external people involved. However, both site mapping and sketching could be seen
as a light version of brainstorming since it is a different idea generation.

5.2.4 Prototype
For the prototyping stage, digital prototyping (i.e. high-fidelity prototyping) will
be used instead of paper prototyping (i.e. low-fidelity prototyping) as illustrated in
figure 5.4.

42
 5. Planning

Prototype

Digital
Paper

Prototyping Prototyping

Figure 5.4: The one method with a yellow background that is planned to be used
in the prototype stage. Authors’ own figure.

The reason for selecting a paper prototype often refers to the implication that it
is faster and cheaper to create. However, the authority already has a high-fidelity
ready-to-use design system in the program Axure (Axure Software Solutions, n.d.),
implicating that it should not take more time to create a digital prototype for this
project. Furthermore, due to limited time resources, there is no possibility to create
both types of prototypes, and the digital one opens up the opportunity to offer a
more finished concept to the stakeholders. Thus, this project will be implemented
with a digital prototype created in Axure.

5.2.5 Test
The evaluation will cover eye tracking and A/B testing as illustrated in figure 5.5.

Test

A B

A/B
Cognitive
Think Aloud Eye Tracking Interview
Testing Walkthrough

Figure 5.5: The two methods with a yellow background that are planned to be
used in the test phase. Authors’ own figure.

The test phase evaluates the created prototype and highlights potential issues to
consider in future editions. The plan is to use eye tracking to understand how users
behave during the interaction. A/B testing will serve to test the navigation of the
final prototype against the current navigation at the authority’s website. In turn, it
will also help decide which option is most effective.

Furthermore, the results from the evaluation will contribute to the revision of the
design requirements. The list will be updated and become a collected summary of

43
5. Planning

design guidelines for designing navigation to e-services. In other words, the design
guidelines will be based on the research from the thesis project.

The methods that will be excluded are cognitive walkthrough, think aloud, and
interviews. The expectations are that the findings gathered from both methods will
be similar to the ones in eye tracking and A/B testing.

5.3 Report Writing

The report writing should be performed continuously during the whole project.
Most focus on the writing will be at the beginning (methods & theory) and the
end (execution, result & discussion). Notes should be taken after each method is
completed, making sure that no details are forgotten.

Week 15-18 will cover intense report writing. The weeks 18-20 will prepare and
execute the thesis presentation and revise the report to deliver it to both Chalmers
University of Technology and the authority.

44
 6
Execution and Process

The chapter is structured in sections based on the different phases of the design
process. Each conducted method is presented under the correlated phase with a
description of the execution, a summary of the results, and a box with the most
relevant insights to bring forward in the process. Note that all information has been
collected in Swedish and translated into English for this report.

6.1 Empathize
The empathize phase involved literature reviews, a simulation exercise, indirect
observations of existing materials provided by the authority, two expert interviews
from the authority, a user study consisting of eye tracking and questionnaire, and a
think aloud.

6.1.1 Literature Review

Literature reviews were conducted to understand the design topic and theory. The
researchers found literature from Chalmers Library, ACM Library and Google Scholar.
In addition to that, other credible sources such as websites (e.g. nngroup.com,
interaction-design.org etc.) and theses have been accessed. The main keywords that
contributed to the findings were: design methods, web navigation, decision making,
usability and accessibility. The findings from the literature review can be found in
the theory (chapter 3) and methodology (chapter 4).

6.1.2 Simulation Exercise

The Google Chrome plugin Funkify was used to understand how the navigation to
various e-services on the authority’s website is experienced by people with dyslexia,
cognitive, visual, and motor disabilities. The goal was to gain first-hand experience
and understand what to consider when making a navigation accessible. Funkify
has ten simulators acting as overlapping filters on the screen, allowing the users
to experience the same information as they would do if they had the simulated
disability (figure 6.1). This section describes the different simulation disabilities,
while the conclusions from each simulator can be found in appendix A.

45
6. Execution and Process

Figure 6.1: The ten different simulators on Funkify. Authors’ own version of
screenshots taken from Funkify (n.d.).

Results from the Simulation Exercise

The dyslexia simulator made all the letters scramble, creating an overwhelming
feeling while reading the text. An example is shown in the figure 6.2.

Dyslexia

Figure 6.2: A screenshot of the authority’s website with the dyslexia filter. Au-
thors’ own version.

The vision simulator simulated multiple vision impairments such as color blindness
(black/white, red/green and blue/yellow), blurry vision, tunnel vision, peripheral
vision, sunlight casting on the screen and lower vision often experienced by older
people. The sunlight casting simulator used intensity to highlight issues that appear
when people use devices in the sunlight. The simulation for tunnel vision visualized
the loss of peripheral vision where the user only could see the content inside a circular
or rectangle view. On the contrary, peripheral vision illustrated the loss of central
vision by having a black circle that could be adjusted in scale and blurriness. For
an authentic experience, the simulator encouraged the user to focus on the black
circle while interacting with the page. The sunlight, tunnel and peripheral vision
are illustrated in figure 6.3.

46
 6. Execution and Process

Vision - Sunlight Vision - Tunnel

Vision - Peripheral

Figure 6.3: Screenshots of the authority’s website with the sunlight, tunnel and
peripheral filter. Authors’ own version.

The cognitive simulator provided experience of having autism and/or ADHD by

adding background noises and advertisements that distracted and caught attention.
The purpose was to steal the reader’s focus.

The motor simulator imitated how people with different motoric disabilities might
perceive the web. The simulator imitated tremors, which could be either from a
disease or temporary tremors from a bus ride. The filter affected the cursor and
made it shake.

Insights from Simulation Exercise

The results from this method resulted in several insights to bring into the next
stage.
• Use illustrations, videos and icons in combination with the text. However,
not too big icons.
• Use short sentences and sections
• Use bullet points and keywords
• Structure the content with boxes, borders and frames
• Use big contrasts between colors
• Use clear headings and subheadings describing the content
• Create a clear start and end of the margins
• Use consistent navigation elements
• Use large target size for clickable elements
• Avoid links (use buttons instead)
• Give feedback on hover

6.1.3 Indirect Observation

The researchers studied existing documents from different departments of the au-
thority to conduct an indirect observation. Two sessions were held with similar
procedures; the documents were divided between the researchers and scanned sep-
arately. The most important results were extracted and discussed. After that, a
summary of the most important findings was done. The process is briefly illustrated
in figure 6.4.

47
6. Execution and Process

The materials from the e-service team consisted of written feedback from the users
who had cancelled a specific e-service and answered the feedback form. The purpose
was to get background knowledge and gather information about the users’ thoughts
and opinions. Furthermore, the information provided knowledge to create optimal
tasks for the user study (section 6.1.4). The materials served the purpose of gather-
ing qualitative insights about why people cancelled the specific e-service. This was
done by reading comments written by the users.

Regarding the materials from other departments, 14 documents were read and
scanned through, including a mix of raw data and summaries of a previously con-
ducted website study. The documents were of various kinds, for instance, survey
results and old workshop material. The purpose of analyzing these materials was to
understand how other departments define the navigational problem and how they
might be affected by the result of the thesis.
Observed material Extracted data Summarised data

Figure 6.4: An illustration of the indirect observation’s process. Author’s own

figure.

Results from Indirect Observation

The documents from the e-service team indicated that many of the cancellations
concerning the e-service’ Report loss’ happened when the user wanted to adjust an
already sent report, thus using the incorrect e-service. Another takeaway was that
most users navigate directly to the website, indicating that the eye tracking should
start from the home page. In addition to that, it was found that ’Report loss’ was
the most common e-service to cancel among the e-services in the category of crime
or loss.

Regarding the materials from other departments, it was shown that the authority
aims to make it easy for the citizens to select the most effective channel (e.g. call, e-
service, mail, form, visit police station) for their situation. Therefore, the authority
values seamless transitions between the communication channels. Regarding the
website, work needs to be done to help the users to select the correct e-service.
One solution could be to integrate some checklist or ask relevant questions to guide
the user correctly. The authority is aware that the information and content on
the website rely on internal structure and terminologies, making it challenging for
citizens who do not understand the internal words. A mentioned example was that
a user wants to ’report a crime’, not ’search for an e-service’.

On the current web page called ’Report a Crime or Loss’, a lot of information and

48
 6. Execution and Process

options are shown simultaneously, and the user is expected to read all the text before
selecting an e-service. One problem is that the page does not contain any information
about the different types of crimes and does not help or guide the insecure citizens
about which crime they are supposed to report (and which e-service they should
use).

Insights from Indirect Observation

• It is more common that the user navigates directly to the website rather
than through a search engine. Thus the eye tracking should start from
the authority’s home page.
• Explore why the users decide to use the e-service ’Report loss’ rather
than ’Supplement or Update a Report Loss’ when the latter is the correct
choice.
• It is important to keep a seamless transition between different communi-
cation channels.
• The authority has suggested two possible solutions: providing a checklist
or integrating some function that asks relevant questions to guide the user
to the correct e-service.
• Consider the terminology and make sure that the language is written from
the user’s perspective.
• Provide information about which crimes can be reported through an e-
service.

6.1.4 User Study (Eye Tracking and Questionnaire)

The user study contained an eye tracking and a questionnaire. The eye tracking
was selected for observing the user’s behaviors and gaze points while navigating the
website. The questionnaire had the purpose of understanding why they acted as
they did. By using the two methods, both behavioral (eye tracking) and attitudinal
(questionnaire), relevant data could be collected.

The participants were recruited using convenience sampling, meaning that the sam-
ples were based on people that were easy to reach. However, the researchers also
reached out to organizations and a Facebook group to include a wider variety of
people and people with different disabilities. The researchers aimed to find a variety
in age, gender, language (Swedish) skills and disabilities.

The process started with users receiving a consent form (appendix B) describing
how the data was collected and used, together with an informational document
(appendix C) describing how to set up the eye tracking software. The online eye
tracking software RealEye was used, and the users had one of two tasks. The tasks
were based on the insights from the indirect observations, determining which e-
service the researchers would focus on and from which page the eye tracking would
start. The tasks were:

49
6. Execution and Process

(1) Your dog Harry was reported missing last week. You have now found
Harry and want to remove your report via the police website. The eye
tracking will end after one minute no matter how far you have come in
the task, do not stress. If you feel done, just let the time run out. Good
luck!

(2) You lost your driving license and need to report this via the police
website. The eye tracking will end after one minute no matter how far
you have come in the task, do not stress. If you feel done, just let the
time run out. Good luck!

The informational document contained a link that guided them to the eye tracking
test. Each link was personal and connected to a participant number. They followed
the step-by-step information provided by the software to set up the test environment.
When the test started, the user had one minute to navigate the correct e-service
for their case. After that, the users were provided with a link to the questionnaire
created in Google Forms. The questions were grounded on insights from the indirect
observations combined with information that would be useful to understand the
users’ behaviors and motivations (see appendix D).

The researchers watched the eye tracking together and discussed their interpretation
based on how the users acted together with their answers on the questionnaire. A
screenshot of the eye tracking data can be seen in figure 6.5.

Figure 6.5: A screenshot of one participant’s eye movements (1 second).

The data was summarized in separate documents for each participant. The docu-
ments involved a sitemap with a visualization of the users’ navigational path, their
answers on the questionnaire, demographics and a field with general post-it notes
from the researchers when observing the eye tracking (see figure 6.6). Red post-it
notes indicated something negative, green positive, and white neutral. These were
later used for the affinity diagramming described in section 6.2.1 while the whole
template provided insights to create the behavioral archetypes.

50
 6. Execution and Process

User’s navigational
path

Researchers’ notes

Questionnaire 

answers
Demographical
aspects

Free form
questions

Figure 6.6: An example of a filled in template, used to insert the results from the
eye tracking and questionnaire.

Results from the User Study

21 participants conducted the user study, with 11 participants for the dog task and
10 participants for the card task. The distribution of age, disability, language skills
and how many found the correct e-services are all presented in figure 6.7.

21 PARTICIPANTS IN TOTAL AGE LANGUAGE SKILLS DISABILITIES E-SERVICES

Participation in the eye tracking 
 What was the 
 What was their 
 Did they had any
Did they find 

and questionnaire distribution of age? language skills? disabilities? the e-services?

Dog task Years Total

10

18-29 4 9 9

30-45 2

11 participants
46-55

56-65 3
2

1 1 1
2

Fluent Not
 Nothing Dyslexia Motoric Yes No

Fluent

Card task Years Total 10

9
18-29 4
8

30-45 3

10 participants
46-55

56-65
1

2
1
2

Fluent Not
 Nothing Dyslexia Motoric Yes No

Fluent

Figure 6.7: Results from the User Study.

The main takeaway from the eye tracking was that users visited many different web
pages when navigating to the e-services for their tasks. The site map in figure 6.8
illustrates the different pages users visited when they navigated to the e-services.
The boxes represent different views on the website. Each box was annotated with

51
6. Execution and Process

a number in the corner to indicate the number of visits. The illustrated sitemap
indicates that the users ended up on different pages, meaning that they have received
different information during the process, affecting the difficulty of completing the
tasks. Many of the visited pages are irrelevant for the task. Out of the ten web
pages on the first level, only four of them can be used to find the correct e-service
successfully.

Navigational Paths 22

Home Page

Menu Icons Hitta snabbt

2 1 3 4 6 1 4 1 1 5
Jag har sett Pass och
Utsatt för Tjänster och Jag har råkat Hitta E-tjänster
Aktuellt Kontakt eller hört nationellt ID- Sök
brott tillstånd ut för något Polisstation A-Ö
något kort

1 1 1 9 5
Stöld eller
Telefon- Polis- Förlust- Search
förlust av Id-
nummer stationer anmälan Results
handlingar...

1 2 2 2
Anmäl stöld, Anmäl Anmäl Komplettera
inbrott eller borttappat bortsprunget bortsprunget
inbrottsförs. föremål djur djur

Figure 6.8: A visualization of all the pages the users visited. The number in each
box represents how many users visited that page.

Another finding is related to the fact that 13 users mentioned that they believed
that they found the correct e-service while the eye tracking revealed that only 4
users found the correct one. This is illustrated in figure 6.9.

20
Did you find the
16 17 correct e-service?

12 13 What users answered

in questionnaire
8
8
4 4 What the eye tracking
showed
0
YES NO

Figure 6.9: A chart showing the amount of users that said they found the correct
e-service versus the reality.

There are two buttons on the authority’s home page where users can either report
a crime/loss or leave a tip to the police. The researchers have named them ’Action

52
 6. Execution and Process

Icons’, and they are illustrated in figure 6.10. Regarding how many users noticed
them, it is worth mentioning that 62% noticed them while 38% of the users did not
see them.

Action Icon to Report a Crime or Loss Action Icon to Leave a Tip to the Police

Figure 6.10: A screenshot of the two action icons in the authority’s home page.

Insights from the User Study

• 38% of the users did not notice the action icons.
• Considering that different navigational paths were taken, the users
might have received different information during the process which
could affect the difficulty to complete the tasks.
• 4/10 web pages in the first level could successfully lead the users to the
specific e-service.
• 13 users believed that they found the correct e-service while in reality,
only 4 found the correct one.
• 4/21 users found the correct e-service. However, it is important to
remember that they only had one minute to complete the task. 9
people were on the right track.
• 2 people managed to find the e-service ’Report a Loss’ but chose the
incorrect one from there. Those people entered the e-service to report
a lost animal instead of changing or complementing an existing one.
• It is important to consider the fact that people navigate differently
already from the home page.

6.1.5 Think Aloud with a Visually Impaired Person

Think Aloud was performed with one participant. The participant had vision im-
pairment (10% visual acuity on one eye, blind on the other), implying that think

53
6. Execution and Process

aloud was more suitable than eye tracking. The participant was between 30-45 years
old and was used to smartphones and computers.

The method was conducted online with the video communication program Zoom
due to Covid-19. The participant used an iPad and activated screen sharing with
the two researchers, making it possible for everyone to see the process and decisions
(figure 6.11). The audio, screen and clicks were recorded for later analysis. The
think aloud was performed using both tasks mentioned in the user study (section
6.1.4). While completing the tasks, the user spoke out loud about decisions and
thoughts. The think aloud session lasted for one hour.

Figure 6.11: A screenshot of the think aloud session. The two researches are
visible in the picture.

After the tasks, similar questions to the questionnaire were used to gather more in-
formation about the experience. The questions were asked by one of the researchers,
while the other took notes digitally. The participant also described a bit about what
kind of aids were used and how they worked.

54
 6. Execution and Process

Insights from the Think Aloud

• If a visually impaired user is presented with the options to either call
or use the e-services to report a crime; the user will most likely choose
the option to call.
• If a screen reader is used to navigate the website and no matching
elements are found, the user will try to find a search tool to proceed.
• When using speech synthesis, it is important to understand its pattern,
such as reading from left to right, top to down, etc.
• If popup windows are used, it is important to inform the user who uses
screen magnification on websites, which can be done by changing the
saturation on the background to locate the popup window.
• It is important to make sure that links on logos works, especially for
those who use speech synthesis.

6.1.6 Expert Interviews

Two expert interviews were conducted; one with an accessibility expert and one with
a UX design expert. These interviews were conducted with people from different
departments in the authority to share their knowledge about the current website and
the navigation to e-services. The interviews were held separately over the authority’s
video conference system. Both researchers and the mentor from the authority were
present during the interviews. One researcher asked questions while the other took
notes. Audios were recorded and saved for transcription and later analysis. The
interviews started with a presentation of the consent form where the participant
got time to read through it and ask questions. It continued with a semi-structured
interview. Sometimes, the mentor provided complementary answers during the in-
terview who knew more about the organization’s work procedure. Both interviews
took one hour.

For the accessibility interview, the purpose was to understand how the authority
worked with accessibility at the website. The questions are presented in appendix
E. For the interview with the UX Designer, the purpose was to gain insight into the
work behind the website, and the questions can be found in appendix F.

Results from Interview with Accessibility Expert

Regarding navigation to the e-services, the expert once conducted a user test with
a visually impaired user on the website and realized that the search tool did not
give accurate results. The user expressed that it was too annoying to do it alone
that they would probably ask for help if they ever want to use the service again.
The expert means that users either try to find the information directly on the home
page or use a search tool. Many users use the search function, and if it does not
help them, it becomes a big problem. It is believed that many users face similar
problems, including users without visual impairments. The expert also mentioned
a conclusion from a previous test: “(...) [the e-services] is on a page that is not

55
6. Execution and Process

obvious to find even if it is raised on the home page. It feels quite spontaneously
exemplary on the home page, but if you do not see it, it is not necessarily as clear.”

In terms of the accessibility work, the expert mentioned that the most common mis-
take is not involving accessibility verification until the last step of the design process.
By introducing the accessibility that late, adjustments are made in the late stages,
forcing a ‘good enough’ mentality. Another insight is that the considered group
for testing accessibility are people with visual impairments due to their interaction
patterns that are different from what we are used to. However, it is important not
to forget other disabilities.

Result from Interview with UX Design Expert

The first takeaway was that the menu on the website is not pedagogically designed
and does not give users an overview of the content. Moreover is the deep hierarchy
and the fact that the same information can exist in four different places frustrates
the user who does not know how to locate the information. This is especially crucial
for users who navigate from a search engine since they can end up in one of the four
places. In the same aspect, the search function in the website sometimes does not
give an accurate result. The expert mentioned that if a user wants to report their
bicycle stolen, they might search for ’bike’ or ’stolen bike’, which does not directly
link to an e-service to report the crime. Another significant issue is the language
which is not the same as the users’ mental models.

56
 6. Execution and Process

Insights from the Expert Interviews

• Accessibility is an ongoing work that never ends. It is important to
keep working with it continuously.
• The accessibility testing is mainly done in two ways - either on the
entire website or on a certain aspect/part of the interface.
• From the accessibility perspective, it is easy to determine if something
is approved according to the law. However, it is essential also to test
the design on users with different disabilities.
• Multiple plug-ins can be used for testing more practical things such
as contrast. However, the plug-ins cannot determine if the content is
good.
• It is important to mix manual and automated testing.
• The most common accessibility problems today are posted pdfs that
are unavailable, faulty hierarchy in the headings or issues related to
captions.
• It is common to perform too few user tests on too few users.
• It is important to test with a wide range of users with disabilities and
not only on visually impaired people.

Problems related to navigation on the website of the authority:

• The search function.
• It is unclear where you are going and hard to know how to get there.
• There is a big button on the home page. However, just because the
button is visually big, it does not automatically mean that it is big in
the code (for screen readers).

6.2 Define
The define phase presents the process of defining the findings and insights from the
previous phase, empathize. The section explains how the affinity diagram was used
to analyze the findings from the user study and think aloud. It further presents why
behavioral archetypes were used instead of personas and scenarios. It enabled the
researchers to analyze the same data (user study and think aloud) but deliver another
output that would act as a communication tool. Lastly, the phase summarizes the
results and insights from the previous methods into a requirements list using Design
Requirements.

6.2.1 Affinity Diagramming

Affinity diagramming was used to categorize the data from the user study and the
think aloud into relevant themes. When analyzing the user study (section 6.1.4),
post-it notes were created to highlight findings related to positive, negative and
neutral insights. In this method, the same post-it notes were categorized into themes

57
6. Execution and Process

by transferring all of them to the two unsorted boards in Miro; one for all the post-it
notes related to the dog task and the other related to the card task. These were
later put in a common board with a brief grouping of struggles, positive, neutral and
terms. Afterwards, the researchers sorted them into different categories, discussed
them, and assigned them relevant names. This process was repeated until it became
four major categories. The process is visualized in figure 6.12.

Unsorted data in Unsorted data in Sorted data in

different boards common board common board

Figure 6.12: A visualization of the process of affinity diagramming.

Results from the Affinity Diagram The affinity diagram resulted in the following
four major categories (figure 6.13): Action Icons, Reading Behavior, Gradings, and
Find the Suitable Function.

Affinity Diagram

Noticing the Action Reading Users' Gradings of Find the Suitable

Buttons or Not Behavior Content and Structure Function

Figure 6.13: An illustration of the four major categories in the Affinity Diagram.

Noticing the Action Buttons or Not

The category describes the two action icons illustrated in figure 6.14. These are
divided into two subcategories in terms of if users noticed them or not. The group
of people who noticed the icons were further divided into the ones who selected one
of the icons and the ones who actively chose not to select the icons (figure 6.14). It
was revealed that more people noticed the icons. However, there were still people
missing them, which indicates that they need to be improved. An example of some
interpreted data from the category is illustrated in figure 6.15.

58
 6. Execution and Process

Noticing the Action

Buttons or Not

Noticed Did Not Noticed

Selected the Did Not Selected

Icons the Icons

Figure 6.14: An illustration of the category ’Action Icons’ and its subcategories
in the Affinity Diagram.

The button to report The person looks at Had the gaze on “I The eyes scan the
a loss item felt very both icons and picks have been through icon but one does
clear so I chose it.

the one that gives something” multiple not register it.

the best match.

times during a longer

time.

Knappen till anmälan av Personen kollar på båda Ögonen skannar ikonen

försvunnen ägodel kändes Hade blicken på "Jag har men man registrerar den
ikoner och väljer den som varit med om något" flera
rätt tydlig så valde den. matchar bäst. inte.
gånger under längre tid.

Figure 6.15: An example of some interpreted data from the category ’Icons’ in the
Affinity Diagram.

Reading Behavior
The data were classified into two groups of reading behavior. Either the user
reads/views/scans all the content on the page, or they only quickly scan through
the page and skip most of it. People who read everything resulted in the different
subcategories: home page, menu, text about e-services, and the right column. The
category where people did not read everything involves the users who saw all the
content on the page but did not read and register all of it. Instead, they briefly
scanned through it to find something suitable for their case. This category consists
of the different groups: home page, menu, text about e-service, and text about re-
porting a loss which is illustrated in the figure 6.16. An example of some interpreted
data from the category is illustrated in figure 6.17.

59
6. Execution and Process

Reading
Behavior

Read Does not read

Text About E- Text About E- Text About

Menu Home Page Right Column Menu Home Page
services services 'Förlustanmälan'

Figure 6.16: An illustration of the category ’Reading Behavior’ and its subcate-
gories in the Affinity Diagram.

Views the menu, Saw the link to Did not view the Do not look at the
‘hitta snabbt’, (...) but ‘förlustanmälan’ and home page but menu.

continues to scrolls didn’t click but rather takes the first

since nothing feels scrolled up to read best.

right.

more.

Kollar igenom menyn, hitta Såg länken till Kollar inte igenom Kollar inte på menyn.
snabbt, (...) men fortsätter ‘Förlustanmälan’ men startsidan utan tar första
ändå scrolla för att inget klickade ej utan skrollade bästa.
känns rätt. upp för att läsa.

Figure 6.17: An example of some interpreted data from the category ’Reading
Behavior’ in the Affinity Diagram.

Users’ Gradings of Content and Structure

The questionnaire consisted of questions where the user was asked to grade different
statements. The gradings were divided into four subcategories; clarity of the cases
that can be reported, amount of text, the relevance of information, and degree of
difficulty (figure 6.18) The result of the gradings indicated that there needs to be
clear information related to each e-service explaining which crimes can be reported
with each service and making the text as short as possible.

Users' Gradings of
Content and Structure

Information
Clarity of Cases Amount of Text Difficulty
Relevance

Figure 6.18: An illustration of the category ’Gradings’ and its subcategories in

the Affinity Diagram.

The users could find the correct e-service by taking two different paths. One path is
where the users do not visit the e-services page, which acts as a guide and entrance
to choose the correct e-service. The other path is users who visit the e-services page.

60
 6. Execution and Process

The gradings were highly dependent on which path the users took, and to keep track
of that, each post-it note was coded with the path the user took. An example of
some interpreted data from the category is illustrated in figure 6.19.
THE PATH

(T) (F) Thought the (S) (F) It was unclear (I) (F) (A) The text (I) Thought it was
information was which case that was enough (3).

super hard to solve

relevant (5).

could be reported the task (1).

under each e-service

THE GRADING
(2).

(I) Tyckte det var jättesvårt

(T)(F)Tyckte informationen (S)(F) Det var otydligt vilka (I)(F)(A) Det var lagom att lösa uppgiften (1).
var relevant (5). brott som kunde anmälas med text (3).
med vilken tjänst (2)

Figure 6.19: An example of some interpreted data from the category ’Gradings’
in the Affinity Diagram.

Find the Suitable Function

The category describes the different paths or functions chosen to navigate and solve
the task. It was further categorised in different subcategories (figure 6.20). The
search function refers to all the users who entered a keyword or phrase in the search
box to solve the task. ’Hitta snabbt’ is another category regarding the usage of
the sub-menu placed on the left side of the home page. ’Headings’ were the users
who tried to find a suitable heading on the website. This subcategory is similar to
’Terms’ which relates to the specific terms users had in mind when they scanned the
menu or searched the site. ’Confusion Driver’s license’ refers to the users’ confusion
between driver’s license and other identification methods such as passport or identity
cards. ’Mixed pages’ includes different pages on the site where users ended up. All
notes in this category relate to the dog task, which could indicate that the users
were confused about where on the site it is possible to remove a report. ’Navigation
with tools’ describes the findings from the think aloud on the website using a screen
reader. An example of some interpreted data from these categories is illustrated in
figure 6.21.

Find the Suitable

Function

Confusion
Terms 'Hitta Snabbt' Helping Tools Mixed Pages Search Function Headings
Driver's License

Events Items

Figure 6.20: An illustration of the category ’Find the Suitable Function’ and
its subcategories in the Affinity Diagram. ’Find the Suitable Function’ highlights
different ways to find information.

61
6. Execution and Process

Did not get any Ended up on the list Assumed ‘exposed to End up on the page
suitable results when of e-services A-Ö but crime’ but realized about national ID
searching.

did not know if it was that it is incorrect cards but don't find
right

and should be ‘lost’

information about
driver licenses.

Antog "utsatt för brott"

Fick inga bra träffar vid Hamnade på listan med men insåg att det är
sökning. Hamnar på sidan om
e-tjänster A-Ö men visste inkorrekt pga borde vara nationellt ID kort men
ej om det var rätt "borttappad". hittar inte information om
körkort.

Figure 6.21: An example of some interpreted data from the category ’Find the
Suitable Function’ in the Affinity Diagram.

Insights from the Affinity Diagram

• The affinity diagram was helpful to gather insights from the eye tracking,
questionnaire, think aloud, and naturally sort them.
• There are many potential ways to sort the insights. The presented cate-
gories are one way.
• The problems and findings from each category will make an excellent base
for the design requirements.
• No user is the same. There are both positive, negative and neutral post-its
from each user.

6.2.2 Behavioral Archetype

To group the users into one of these archetypes, each template that was used to insert
the results from the eye tracking and questionnaire (see figure 6.6) was discussed
among the researchers, while the eye tracking was used as supplementary data when
needed. The base of the behavioral archetype was based on the template from ’A
Smashing Idea’ toolkit (Smashing Ideas, 2017), with its divisions between narrative,
goals, needs, thoughts, feelings, actions and pain-points. However, the divisions were
adjusted according to the gathered data, mostly related to the studied behavior of
the eye tracking and the answers from the questionnaire. The used divisions for
the behavioral archetypes were narrative, goals, pain points, actions and needs.
One template for each archetype was created, where the data from different users
that related to each archetype was summarized with post-its and rephrased into
sentences. The templates are illustrated in figure 6.22, where a bigger version can
be found in appendix G and H.

62
 6. Execution and Process

Figure 6.22: The filled in templates for creating the archetypes. The template
comes from Smashing Ideas (2017). For a bigger version, see G for creating ’Good
Enough Gale’ and H for ’Careful’ Charlie.

Results from the Behavioral Archetype

Two archetypes were identified from a general overview of the web behaviors of the
user study. Those were: The ’careful one’ and The ’good enough’. This result aligns
with the theory presented, where the careful one might be seen as the scanning
technique called ’commitment pattern’ presented in section 3.1.3. The good enough
could be seen as the ’satisficing’ heuristic, shown in section 3.2.1.

Gender-neutral names were used to represent the archetypes, and the focus was on
the behavioral aspects rather than the demographics. Furthermore, the headings
were rephrased while creating the final archetypes, to better suit the project.

The data from eye tracking, questionnaire and think aloud show that the participants
with the archetype ’Careful’ Charlie did not come close to the correct e-service (one
out of nine participants reached the page with multiple links to report a loss).
This might be a consequence of the behavior, that they aim to read most of the
information, which takes a long time, and the eye tracking had a limit of one minute.
As a comparison, most of the participants with the archetype ’Good Enough’ Gale
came closer to the e-service (8/13 participants reached the page with multiple links
to report a loss). The final result of the two behavioral archetypes are presented in
the results (see chapter 7.1).

63
6. Execution and Process

Insights from the Behavioral Archetypes

• The two behavioral archetypes gave an overview of the two dominating
behaviors when users navigated on the website.
• The archetypes will be helpful when communicating the different behaviors
to the stakeholders.
• The archetypes will continually be used during the rest of the process to
make sure that the design correlates to those behaviors and assuring that
the users are involved.
• Even though previous work was done to gather insights about people with
disabilities, this method does not present those insights explicitly. In
this case, personas and scenarios might have been more helpful. How-
ever, the data that relates to the disabilities are implicitly involved in the
archetypes.

6.2.3 Design Requirements

The design requirements were gathered from the relevant methods: indirect obser-
vation (IO), affinity diagram (AD), simulation exercise (AR, Accessibility Require-
ments), and expert interviews (EI). The requirements from the simulation exercise
were based on the ’Insights’-box from that method. Each summary of the different
categories was discussed for the affinity diagram and then transferred to the re-
quirements list. For the expert interviews and indirect observations, the important
findings in the written summaries were translated into relevant requirements. All
requirements were gathered in an excel sheet. Some of the requirements were more
focused on redesigning the current navigational path to the authority’s e-services.
In contrast, other requirements were more general, which could be applied to other
companies or authorities.

All requirements were listed in the sheet together with its source, such as simula-
tion, expert interviews etc. The requirements were later grouped into four different
categories with an ID that related to that category.

Results from the Design Requirement

The requirement list resulted in 26 requirements divided in four categories; Design,
Language, Content, and Structure (table 6.1, 6.2, 6.3 & 6.4). The ’Design’ category
relates to the look and feel of the web pages. ’Language’ covers the terminology and
how to use it to fit the user’s mental model. ’Content’ has to do with how best to
display the information, function, or action to be understandable and intuitive for
the user. ’Structure’ involves the overall arrangement of the different elements and
pages.

64
 6. Execution and Process

ID Requirement Source

DESIGN (look & feel)

D1 Use illustrations, videos and icons in combination with the text AR
What If the majority of the web page is filled with text, it should be combined with associated visual elements.
Why People with dyslexia struggles in different degrees when they meet walls of text. By combining text with other visual
elements, it will be easier for those users to read the information.
D2 Use high contrast AR + WCAG
What The contrast ratio between different colors needs to follow the WCAG AA criterion.
Why People with color blindness or visual impairments have trouble distinguishing elements if the contrast is limited. The
lack of contrast might also be a temporal struggle for users if their screen is exposed for sunlight. Furthermore, this is
expressed in WCAG Success Criterion 1.4.3 Contrast (Minimum).
D3 Use aligned margins AR
What Put all content inside the margins to indicate that no content will be displayed outside of it.
Why All content should be contained within the left and right margins. Clear margins act as guidelines for people who use
zoom magnifyers, and people with tunnel vision, to understand that the content will be inside the margins. By using
margins, the unneccessary lateral movements will be reduced.
D4 Give feedback on hover AR
What Show the functionality of interactive elements.
Why Tremors or similar disabilities might make it difficult to steer the mouse. It's a common feature to offer feedback while
hovering a clickable item. The feature helps the user recognize when to click.
D5 Use distinct elements AD
What Provide a great distinction between elements. Each element should be visible and clearly indicate which action it
represents.
Why Screen reader users and zoom magnifyer users need distinct elements. The screen reader enables the user to select
what to read from a website, such as all the headings or links. Zoom magnifyer users need to be able to distinguish the
elements without having to zoom out. Furthermore, the user study implied that many users missed or didn't notice the
action icons, which are important buttons for easy navigation.
D6 Use large target size for clickable elements AR
What Make buttons large enough to be clickable and avoid elements that are difficult to hit, for example text links.
Why Large hit areas are useful for people with different aspects of disabilities, for instance permanent or temporary motoric
disabilities such as tremors. Furthermore, it's useful for users with situational disabilities such as browsing on a bumpy
bus ride. However, don't use extreme sizes since that will cover the whole vision area for people using zoom magnifiers
or having tunnel vision.

Table 6.1: The ’Design’ category of the design requirements that will act as a guide
in the redesign of the navigation to the e-services to report a crime or loss.

ID Requirement Source
LANGUAGE

L1 The action icons on the home page need to have a better description of the actions AD
What When reading the description of action icons, the user should understand exactly what the functions provide.
Why The user study concieved that some users misunderstand the descriptions that are used today. They didn't understand
that the action icons could be used to remove a report which made them exclude that navigational path.
L2 The menu needs to use more destinct and descriptive headings that describe the content AD +EI
What The user should view the menu as a helping guide to find the information/web page they are looking for. It is also
mentioned in Information Scent (Theory 3.1.3) that the user estimates how well the information can be found by judging
the scent of for instance the menu, titles, and images.
Why The current menu do not have descriptive headings to the extent that it can help users navigate efficient and correctly
at the same time.
L3 Use words that match the users' mental models, especially for headings, buttons and icons AD
What Users should be able to understand the information and functions in the website regardless of the differences in
language skills.
Why The words are not matched to follow the citizens' mental models, but rather builds on the authority's words and
structure. An example from the user study showed that the users do not understand the difference between ID and
driver's license. When asked which words they scanned for, the users mentioned either items or events (see Affinity
Diagram). The authority often refers to 'e-service' which is a word none of the participants mentioned.
L4 Use clear headings and subheadings that describe the content AR
What Users should be able to understand the overall information by reading headings and subheadings.
Why Clear headings help the users to quickly scan the information, and is especially applicable for screen reader users.

Table 6.2: The ’Language’ category of the design requirements that will act as a
guide in the redesign of the navigation to the e-services to report a crime or loss.

65
6. Execution and Process

ID Requirement Source

CONTENT (how to display information/functions/actions)

C1 All information about the same subject should be presented regardless of which path the user take AD
What If a page can be found by different navigational paths, make sure that the same information is provided.
Why Currently, the user can enter the same web page with different paths. However, the content in the different paths does
not provide the same information. The flow and information gets interrupted if users do not follow the 'correct' path.
C2 The home page should only contain the most relevant information (less disturbance) AD
What When entering the home page, the user should understand which information that can be found on the site. The user
should't be interrupted by detailed or 'irrelevant information'.
Why A home page with much disturbance interrupts the users flow.
C3 Provide information about the differences of crimes and cases IO
What The user should be able to understand which information or page they should look for to proceed with their case.
Why The indirect observation revealed that some users had a difficulty to recognize the difference between different crimes
and cases which lead to a confusion about which e-service to use. This might prevent some users from using the
website for reporting their case, and rather use other communication channel instead.
C4 Provide information about which cases that are/are not a police matter IO
What Users should be provided with information so that they themselves can evaluate when to involve the police.
Why The indirect observation showed that the lack of information can lead to users making incorrect decisions on whether
or not to involve the police.
C5 Provide suitable information about each e-service to help the users select the correct one for their case AD
What Provide suitable information about the different e-services when the users have to choose between several options.
Why The user study showed that the information regarding different e-services might be too unspecific. Several users
selected the incorrect e-service, despite the fact that the eye-tracking indicated that users scanned through the
information.
C6 The text should be as short as possible AD
What A text should be shortened as much as possible to help the users effectively find the correct information.
Why Few users actually read all the text. If they do, they use scanning patterns (see theory **) to filter out irrelevant
information for their case. A shorter and concise text is beneficial for a fast process while easing the process for people
with dyslexia.
C7 Use short sentences and sections AR
What Aim for short sections and sentences when providing information to the users.
Why Long sections and sentences create an overwhelming feeling, especially for aging people and people with dyslexia.
Even if the complete text needs to be long, the user can get helped by shorter sentences.
C8 Use bulleted lists AR
What Combine floating text with bulleted lists.
Why Bulleted lists helps the user get an overview of the content.
C9 Make it clear for the user how to cancel a previous sent report AD
What Guide the user to the function that cancels a previous sent report.
Why The user study indicated that many of the users had troubles understanding how and where they should navigate to
remove or cancel an existing report.
C10 The search function should help the user find the correct search results (accuracy) AD
What The search function should support the users and help them find the intended result.
Why The user study showed scenarios where the user searched for something and got results that didn't match their
intention, which led to frustration.
C11 Create soft transitions between the communication channels IO
What If the user needs to use another communication channel, there should be a soft transition. For instance, if no e-service
matches the users case, do not leave them there, but rather provide the different options.
Why Different communication channels are suitable for different cases. Seamless transition between the communication
channels avoids frustration and instead helps the users to solve their cases.
C12 Consider using boxes, borders and frames to display information AR
What Make use of boxes, borders and frames to separate different groups of information.
Why People with tunnel vision only views a limited area at the same time. Thus, the users with this diagnosis might miss the
overview and correlations between different elements. For people with dyslexia, it might be useful with frames that
doesn't change size or jump around.

Table 6.3: The ’Content’ category of the design requirements that will act as a
guide in the redesign of the navigation to the e-services to report a crime or loss.

66
 6. Execution and Process

ID Requirement Source

STRUCTURE (layout)
S1 Important information should be displayed before the actions AD
What Place important text that all readers should see before potential actions.
Why The user study revealed that some users do not read all the information on the page. By displaying the information
before an action, the user will more likely notice and read it. Some examples are the text on the e-services page and
'förlustanmälan'.
S2 Keep the hierarchy to a limited amount of levels EI
What The website should not have too many hierarchal levels.
Why The deep hierarchy in the website makes it difficult to navigate and get an overview of how the content is structured.
S3 Use consistent navigation elements AR
What Use consistent navigation elements located in the same place in all views.
Why Users with tunnel vision and zoom magnifiers only see a limited part of the website at the same time. By using
consistent elements located in the same place in all views, the user can find the elements without wasting time looking
for them. This might include the menu, footer, header and logotype.
S4 Make sure that the screen reader works on all platforms AD
What Use the correct HTML elements for their correct purpose (semantic elements) to enable the use of screen readers.
Why The think aloud showed that it is important that the content and code is structured so that screen readers can be used
correctly.

Table 6.4: The ’Structure’ category of the design requirements that will act as a
guide in the redesign of the navigation to the e-services to report a crime or loss.

Insights from the Design Requirements

• Several of the requirements that were collected in the Empathize phase
matched the findings from the theory.
• It is important to phrase the requirements so that they do not present
functional solutions but rather state those as problems that will lead to a
solution.
• Some of the requirements are specific for this context while others are
more general. For the future guidelines, it might be suitable to use the
’general’ ones while the ’specific’ ones might make it easier to generate
ideas ideal for redesigning the current navigation.
• The requirement list will act as a good ground for future general guidelines.

6.3 Ideate
The ideation phase used the insights from the previous phases to create solutions
to the defined problem areas. The phase started with different rounds of sketch-
ing, which eventually led to two potential solutions. The process followed with a
flowchart to outline relevant content for one of the potential solutions.

6.3.1 Sketching
Sketching helped the researchers to explore potential solutions matching the design
requirements (section 6.2.3). The aim was to sketch all ideas that came into mind.

The process started with pen and paper, while later, the sketches were scanned and
inserted into a common board in Miro. The ideas were grouped into categories and

67
6. Execution and Process

annotated in terms of positive, negative and interesting facts about each solution.
In addition, dot voting was used to target the favorites. The favorite ideas were
further improved and resulted in two rough sketches:

1. Question Idea: display questions to guide the user to the correct e-service.
This is similar to the unexplored idea the authority had.

2. Browsing Idea: display all the e-services with suitable information to let the
users choose which they believe is the correct one.

The primary reflection was that the Question Idea would be suitable for first-time
users, while the Browsing Idea would be more appropriate for users who already
know which e-service they should use. Both ideas were shown to the mentor at the
authority to receive initial feedback and understand which one was more preferred.
The understanding was that both ideas could be combined. However, the Question
Idea will be more likely to be applied and implemented in the near future. Mean-
while, the Browsing Idea might be produced if there is time. The rough sketches
of the two ideas and the flow from the home page to an e-service are illustrated in
figure 6.23.

Entry Point

Question Idea Browsing Idea

1 2
1

3 2
4

Figure 6.23: Sketches of the Question Idea, Browsing Idea and their connection.

After receiving the feedbacks, the researchers decided to focus on the Question Idea,
and continue the Browsing Idea only if there were time. That resulted in more

68
 6. Execution and Process

sketching on detailed views of the Question Idea before creating the high fidelity
prototype in Axure (section 6.4.1). Moreover, more sketching was done to improve
the Action Icons based on the design requirements. A selection of some digital
sketches of the action icons is presented in figure 6.24.

Anmäl brott eller förlust Tipsa polisen

Med polisens e-tjänster kan du anmäla, Om du sett eller hört något som skulle
ändra eller avanmäla ett brott. kunna hjälpa polisen att upptäcka,
förebygga eller utreda brott.
Brott eller förlust
Tipsa polisen

Hitta e-tjänst Tipsa polisen

Anmäl & ändra anmälan

Jag har råkat ut för något Jag har sett eller hört något

Anmäl brott eller förlust Tipsa polisen

Med polisens e-tjänster kan du anmäla, Om du sett eller hört något som skulle
ändra eller avanmäla ett brott. kunna hjälpa polisen att upptäcka,
förebygga eller utreda brott.
Brott eller förlust
Tipsa polisen

Hitta e-tjänst Tipsa polisen Anmäl & ändra anmälan

Jag har råkat ut för något Jag har sett eller hört något

Anmäl brott eller förlust Tipsa polisen

Om du råkat ut för något kan du använda polisens e-tjänster för att Om du sett eller hört något som skulle kunna hjälpa polisen att
anmäla, ändra eller avanmäla ett brott. upptäcka, förebygga eller utreda brott.

Anmäl brott eller förlust Tipsa polisen

Hitta e-tjänst Tipsa polisen Om du råkat ut för något kan du använda polisens e-tjänster för att Om du sett eller hört något som skulle kunna hjälpa polisen att upptäcka,
anmäla, ändra eller avanmäla ett brott. förebygga eller utreda brott.

Figure 6.24: A selection of some sketches on the Action Icons.

Insights from the Sketching

• After showing the ideas to the mentor at the authority, the researchers
understood that both were good ideas and that we were on the right
track.
• The Question Idea will more likely become implemented, but the Browsing
Idea could still be of value to the stakeholders.
• Consider that the authority already has their own design system and try
to make it as close as possible to their design style.

6.3.2 Flowchart
To understand what questions to include in the Question Idea, a flowchart was
created containing all relevant information currently provided on the website to
help the user make decisions on which e-service is most suitable for their crime or
loss. The initial plan was to use a sitemap, but after considering the output of
that method, the researchers realized that it would only result in a structure of the
whole website, which was not what was needed in this stage. Instead, a flowchart was
expected to generate a better overview of the information and bring more value to
move forward in the process. The flowchart was created in the collaborative software
Lucidchart (Lucid Software Inc., n.d.) which enables creating and sharing charts and
diagrams. The process started with collecting all the relevant information from the
website and rephrasing it to questions. Depending on the answer to a question, a
new question, web page, e-service or other solution was presented (figure 6.25).

69
6. Execution and Process

KONTROLLFRÅGOR
(flervalsfråga) För at t vet a om du k an an vän da n ågon av de digit ala t jän st er n a
beh över du k r yssa i de alt er n at iv som st äm m er in på dig

Om du har drabbats av ett Om du tycker att polisen har

Om du är i en akut Om du inte har svenskt Om du tidigare gjort en Om inget av de andra
Om du lever under skyddad brott utomlands och vill behandlat dig illa eller på
nödsituation med fara för personnummer eller anmälan och vill ha en kopia alternativen stämmer in på
identitet. anmäla brottet till svenska annat sätt gjort något
liv, egendom eller miljö. samordningsnummer. på anmälan. dig.
Polismyndigheten. felaktigt.

Jag har varken Jag har Jag söker en Jag vill anmäla
Det är en Jag har skyddad svenskt drabbats av kopia av en ett Inget av
nödsituation identitiet personnr/ ett brott tidigare tjänstebrott av ovanstående
samordningsnr utomlands anmälan polisen

Vänta. Den
Anmäl brottet i det land du skickas till din Ring 114 14 eller
Ring 112 Ring 114 14 befann dig i. Ring +46 77 114 14 digitala eller besök polisstation
00 om du fortfarande är fysiska brevlåda.
utomlands och vill anmäla via
telefon, eller fortsätt för att hitta
rätt e-tjänst.

START

Någon har använt ditt Du har redan gjort en

Ditt parkerade fordon har Någon har skadat eller haft Någon har tagit dina saker, Du har tappat något, eller
kort/dina uppgifter till att anmälan som du vill justera
blivit påkört sönder dina eller någon brutit sig in eller försökt att om ditt husdjur har
köpa/beställa saker, eller så eller radera
annans saker bryta sig in någonstans försvunnit
har du inte fått de varor du
betalt för

zo
Vad vill du an m äla?

Jag vill ändra,

Stöld, inbrott och komplettera eller Inget av
Bedrägeri Parkeringsskada Skadegörelse inbrottsförsök Förlust ta bort en ovanstående
anmälan

Ring 114 14

SKADEGÖRELSE KOMPLETTERING
KONTOKORTSBEDRÄGERI PARKERINGSSKADA STÖLD, INBROTT OCH FÖRLUSTANMÄLAN
AV ANMÄLAN Observera! Polisen är skyldig att utreda all brott som anmälts, därför kan du inte ångra eller ta bort
Med kontokortsbedrägeri menas En parkeringsskada är när ditt
Skadegörelse är när någon har INBROTTSFÖRSÖK en gjord anmälan. Den ursprungliga anmälan kommer fortfarande att finnas kvar i systemet. Det du
Infotext Någon har utan tillåtelse Ditt husdjur har sprungit
att någon kommit över dina skadat eller haft sönder din eller Du har tappat bort något kan göra är att komplettera den ursprungliga anmälan med information om att du exempelvis har
parkerade fordon har blivit påkört Stöld, inbrott och inbrottsförsök är Förlustanmälan är om du tappat tagit något som är ditt bort eller försvunnit. Du har hittat någon
kortuppgifter och använt dem för någon annans fasta eller lösa föremål. annans föremål som du återfunnit föremålet.
av ett annat motordrivet fordon, om någon tagit dina saker, brutit Om inget av ovanstående
Någon har stulit en bil något eller om ditt husdjur har eller försökt/lyckats bryta
egendom. Det vill säga, er mark Någon har stulit något vill lämna till polisen.
att betala för varor och tjänster, utan att föraren har lämnat sina Info-text sig in eller försökt att bryta sig in stämmer
eller något annat
försvunnit. sig in i ditt låsta utrymme
Någon har stulit ditt pass från en butik
vanligtvis på internet. eller era saker. motorfordon (ex.lägenhet).
kontaktuppgifter eller gett sig till någonstans. eller id-kort
känna. Info-text
Blev någon Någon har brutit sig in
Gäller det kontokort? NEJ Ring 114 14 skadad i samband med JA Är skadegörelsen
Ring 114 14 JA Ring 114 14 eller försökt ta sig in i din Du har återfunnit Du har anmält
orsakad av en brand?
händelsen? Info-text bostad utan lov och Vad gäller f ör lu st en ? Du har återfunnit husdjuret eller vill Du vill ändra eller Du vill ändra eller något annat brott
begått en stöld föremålet eller vill ändra ändra något i din lägga till något i lägga till något i än de ovanstående
Jag har hittat något i din anmälan om anmälan om din anmälan om din anmälan om och vill ändra eller
Ett bortsprunget någon annans
Stöld, inbrott eller Ett borttappat borttappat föremål bortsprunget stöld, inbrott eller kontokortsbedrägeri lägga till något i
eller ett borttappat
Info-text föremål föremål som jag
Infotext Vilken sor t s st öld/ in br ot t / in br ot t sf ör sök gäller det ? inbrottsförsök husdjur
vill lämna till
husdjur inbrottsförsök din anmälan
Infotext
Infotext polisen

Alla bedrägerier som inte gäller Vad vill du kom plet t er a?

kontokort ska anmälas genom att
Om någon blev skadad i samband Stöld av ett
ringa 114 14. Det gäller bland annat Inbrott eller försök Stöld av pass eller
Annat registrerat Stöld från en butik
om du lämnat ut dina kortuppgifter till med händelsen ska detta anmälas Skadegörelse orsakad av en brand till inbrott i bostad id-kort
motorfordon Komplettera
en telefonbedragare eller betalat för genom att ringa 114 14. ska anmälas genom att ringa 114 14. Komplettera Komplettera
NEJ Komplettera anmälan av stöld,
JA bortsprunget anmälan om Annan anmälan
tjänster/varor du inte fått. NEJ borttappat föremål inbrott eller
husdjur kontokortsbedrägeri
inbrottsförsök
Lämna föremålet
på närmaste
polisstation eller
De flesta resebolag har en skicka till polisen
hittegodsavdelning dit
Info-text
man kan anmäla
borttappade saker
Ring 112 Infotext
Info-text

Har skadorna Rör det ett inbrott Om du har förlorat något

Spärra kortet hos Har du
uppkommit på grund av JA eller försök till inbrott i JA Ring 112 Vilket sor t s pass på exempelvis en buss, ett
Har du Hittegods är ett upphittat föremål som någon
Har du spärrat ditt NEJ
den bank eller
företag som
fått
kontaktuppgifter till Vänd dig till ditt inbrott? bostad? tåg eller ett flygplan Är det en förlust på JA
kontaktat
respektive företags NEJ
Kontakta
respektive företags
Vilket är en de gäller det ? har tappat bort eller glömt kvar. Bortkastade Ring 114 14
kort?
utfärdat kortet personen som
JA
försäkringsbolag
Infotext
eller id-kor t gäller resa?
hittegods- hittegodsexpedition eller övergivna föremål eller föremål utan
orsakade Är du butiksanställd? expedition? värde är däremot inte hittegods och hanteras
skadan? det ? Jag har hittat ett inte av polisen. Här hittar du en lista på alla
Mitt husdjur har
bortsprunget
försvunnit polisstationer som hanterar hittegods. Lämna
När det skett en stöld, inbrott husdjur
Infotext in eller skicka föremålet till närmaste
eller inbrottsförsök i en bostad Pass eller NEJ JA Infotext
Infotext NEJ vill polisen ha möjligheten att nationellt id-kort Körkort eller JA
polisstation.
utfärdat hos annat id-kort
Skadegörelse orsakad av inbrott eller komma till platsen för att säkra polisen
För att kunna anmäla ett
försök till inbrott i bostad ska anmälas bevis. Vänligen ring 112 för att
kontokortsbedrägeri behöver kortet Om du har fått kontaktuppgifterna till genom att ringa 112. När det skett en
Vad är det f ör f ör em ål?
vara spärrat hos den bank eller det
göra din anmälan.
den som orsakade skadan behöver
stöld, ett inbrott eller ett inbrottsförsök För närvarande finns det ingen
företag som utfärdat kortet. Gör det du inte göra en polisanmälan, vänd
i en bostad vill polisen ha möjlighet att Pass eller e-tjänst för att ändra eller lägga till
först, och återgå sedan till guiden. dig i stället direkt till ditt
försäkringsbolag. komma till platsen för att säkra bevis. Körkort eller nationellt id-kort, något i din anmälan. Vänligen ring
JA annat id-kort Annat föremål utfärdat av Nycklar Ring 114 14
NEJ
NEJ 114 14 för ditt ärende.
polisen

Infotext
Har du utsatts för Ring 114 14 NEJ
hot eller våld i JA Om det gäller ett pass
samband med Om det gäller körkort eller eller nationellt id-kort som Om det gäller nycklar.
händelsen? annat id-kort som har
Om inget av de andra har utfärdats av
utfärdats hos exempelvis Polismyndigheten. Upphittade föremål ska lämnas på närmaste polisstation som
alternativen stämmer in Borttappade nycklar ska inte
Migrationsverket,
Skatteverket eller en
på dig.
anmälas till polisen. Besök hanterar hittegods eller skickas på posten. Hittegods är ett
bank. upphittat föremål som någon har tappat bort eller glömt kvar.
närmaste polisstation som
Vet du Vänta med Bortkastade eller övergivna föremål eller föremål utan värde är
namnet på anmälan till dess Är skadan hanterar hittegods för att se om däremot inte hittegods och hanteras inte av polisen. Här hittar
NEJ orsakad av att Rör
företaget som dragit du kan se namnet NEJ
på företaget som någon ristat eller JA skadegörelsen någon har lämnat in dina du en lista på alla polisstationer som hanterar hittegods. Lämna
pengar från ditt
JA ett fordon där skadan
konto? dragit pengarna klottrat på
nycklar. Hittegods ör ett in eller skicka föremålet till närmaste polisstation.
fordonet? är orsakad av ett
annat
Kräver ditt upphittat föremål som någon
fordon? Ring 114 14 Här hittar du en lista på alla polistationer som hanterar
försäkringsbolag att du NEJ har tappat bort eller glömt kvar.
Infotext gör en anmälan? Infotext hittegods.
Bortkastade föremål, övergivna
NEJ
NEJ föremål eller föremål utan värde
För att kunna anmäla ett är däremot inte hittegods och
kontokortsbedrägeri behöver du veta
namnet på företaget som dragit hanteras inte av polisen.
pengarna. Vänta med att göra din JA Hitta polisstation
anmälan tills du på kontoutdraget kan med hittegods
se namnet på företaget som dragit Här hittar du en lista på alla
pengarna, återgå sedan till guiden.
polistationer som hanterar
hittegods.

JA

Infotext
Resultat av körkort:
Körkort ska även anmälas
till transportstyrelsen
(länk) Polisen registrerar inte upphittade
nycklar vilket gör att du själv behöver
uppsöka en polisstation om du vill få
tillbaka dina nycklar. Om du av någon
anledning ändå vill göra en
E-tjänst: E-tjänst: E-tjänst: E-tjänst:
E-tjänst: förlustanmälan (till exempel att ditt
E-tjänst: E-tjänst: E-tjänst: E-tjänst: E-tjänst: försäkringsbolag kräver det) använder E-tjänst: Komplettera/ändra Komplettera/ändra Komplettera/ändra Komplettera/ändra
Anmäl stöld, inbrott eller due-tjänsten för förlustanmälan
Kontokortsbedrägeri Parkeringsskada Skadegörelse Butiksstöld Förlustanmälan Anmäl bortsprunget djur anmälan av borttappat anmälan om bortsprunget anmälan av stöld, inbrott anmälan om
inbrottsförsök
föremål djur eller inbrottsförsök kontokortsbedrägeri

Figure 6.25: An overview of the created flowchart.

Results from the Flowchart

The flowchart resulted in four levels. The first level consists of a ’control question’
that should be displayed before using any e-services, examining if the user can use
the e-services. If their answer indicated that they could not use an e-service, they
might have a hidden identity or similar. Then the user would get redirected to the
appropriate communication channel. Otherwise, the user would pass the first level
and move on to the second level with questions related to understanding which type
of crime or loss. Based on the answer, the user gets redirected to the questions for
one of the corresponding e-services in the third level. In the third level, users are
presented with questions related to the potential e-service that is chosen. The user
will either get redirected to other communication channels or move to the fourth
level consisting of the correct e-service. See appendix I for more details about the
questions.

Insights from the Flowchart

• Even if the primary focus is to guide the user to the correct service, it is
essential to reduce the number of steps for each path; otherwise, the user
might avoid using the guide.
• The second level specifies the crime or loss directly, requiring the user to
have some pre-knowledge. However, the user is provided with explanations
to differentiate them.
• Consider if the second level should be broader, e.g. ’What is it about?’
with answers such as ’person’, ’animal’, ’car’, ’house’, instead of specifying
a crime or loss directly.

70
 6. Execution and Process

6.4 Prototype
The following phase presents the execution of digital prototyping, resulting in an
interactive high fidelity prototype that was later used for testing.

6.4.1 Digital Prototyping (High Fidelity Prototyping)

A high fidelity prototype was created digitally with the prototyping tool Axure
(Axure Software Solutions, n.d.). As mentioned in the planning (section 5.2.4),
the authority already has a ready-to-use design system, or digital profile, in Axure,
which made it possible to create a high fidelity prototype in a short time.

The prototype included navigation from the home page with the redesigned action
icons, a button to redirect users to the guide from the middle page ’Anmäl brott
eller förlust’, and the questions. The prototype was interactive and included hov-
ering states which enabled a more authentic experience for the usability test. The
complete design concept with changes after the test phase is presented in the results
(chapter 7).

Insights
The digital prototype provided an authentic experience. However, some ad-
vanced interactive actions required more time to create. To save time, easier
interactive solutions were used and therefore, it is important to consider this
when testing with the users.

6.5 Test
The test phase involved several usability test sessions with stakeholders from the
authority and end-users. Each session resulted in feedback related to the prototype,
and for some cases, the data was used for other sessions. The usability tests with
users were conducted with think aloud and interviews. The phase concluded with
an iteration of the design requirements.

6.5.1 Usability Test with Experts from the Contact Center

A usability test with four experts from the contact centre was the first step of the
test phase. The employees at the contact centre are the people answering when the
citizens call 114 14 to report a crime or ask a question. They receive reports, both
from calls and the e-services and decide how to continue the process. In other words,
they are experts in understanding what questions to ask the citizens when reporting
a crime or loss.

The session lasted for one hour and started with an introduction and background
of the thesis, where the process was briefly explained. It followed up with a presen-

71
6. Execution and Process

tation of the prototype where the structure was shown by using the three following
scenarios:

Scenario 1: The user lost his/her driving license and wants to report it
to the police.

Scenario 2: The user has previously reported his/her lost dog and has
now found it and wants to report it to the police.

Scenario 3: The user lost his/her bike and suspects that it has been
stolen. The user wants to report it to the police.

The experts were encouraged to provide feedback during the session. After the
prototype was shown, seven questions were prepared to gain more detailed insights
on the prototype. The questions can be found in the appendix J.

Takeaways from the Usability Test with Experts

The initial discussion was that the guide had too many steps before reaching a result.
However, as the discussions continued and questions in the guide were shown one by
one, the experts realized that these steps were necessary to avoid misunderstandings,
"It is true that it has many steps; however, it feels very thoughtful. One gets a
question stated in different ways many times to avoid as many misunderstandings
as possible". The experts also believed that the guide would help the users move
forward towards finding the correct e-service.

Furthermore, the user study (section 6.1.4) indicated that many users used the
words’ remove report’ when looking for their destination on the home page. The
experts agreed that the same words often are used when answering the phone. How-
ever, the experts mentioned that" it might be weird if we express to the user that it
is possible to remove the report, but in reality, it is still in the system. Even though
the users call and say that they want to remove, we as the operators understand
what they mean and lead them to what they should do, which is not to remove, but
instead, fill in a supplementary report".

Another input was that people could misunderstand things, and because of that,
the experts believed it would be useful to replace:

• ’It regards shoplifting’ to ’Theft from a shop’

• ’Have you experienced threats or violence’ to ’Have you experienced threats

or violence in connection to the incident’

In terms of the updated action icons, the experts were positive towards the change
and felt that they were visually distinct. The change from ’I have been through
something’ to ’Report a crime or loss’ was mentioned as a significant improvement
"I brought up the polisen.se just to compare and what you have created is clearer".

72
 6. Execution and Process

An idea of future improvement was to incorporate the answers from the guide into
the specific e-service. This would eliminate the risk that the user has to answer the
same question twice.

Insights from Usability Test with Experts

• It is important to consider the number of steps in the guide.
• Rephrase the identified sentences.
• The updated action icons seemed to give significant improvements.
• A future improvement could be to incorporate the answers from the guide
into the specific e-service.

6.5.2 Usability Test with UX Designers at the Authority

Four UX Designers from the authority participated in a meeting to give feedback
on the prototype in terms of user experience. The process started with showing the
prototype to the experts and then ask specific questions such as:

• What is the smallest font size that can be used?

• What is your input on stating ’remove report’ when in reality it does not work
to remove a report?

Takeaways from the Usability Test with UX Designers at the Authority

In the prototype, some options have a hover function where a descriptive text ap-
pears on mouseover. The experts identified that it reduced the clutter. However, it
could cause problems in terms of accessibility for users with tremors. They recom-
mended a discussion about this with the accessibility expert.

Regarding the phrasing ’remove report’, the experts suggested adding an extra step
where the user could select if they wanted to ’change the report’, ’supplement the
report’ or ’remove the report’. If a user selected ’remove report’ the system could
inform the user that it is not impossible and explain the alternatives.

Other comments were related to the user interface, such as minor changes to specific
components and colors to match the existing design profile. Furthermore, a sugges-
tion was to add more information to the result page explaining why specific action
was needed, such as explaining why they had to call instead of using an e-service.

73
6. Execution and Process

Insights from the Usability Test with UX Designers

• Double check the accessibility of the hover function.
• Consider adding question for the users who want to ’remove a report’.
• When users are presented with the result on how they should proceed, it is
important to provide information about why they should take the certain
action.

6.5.3 Think Aloud & Interviews with Users

Based on the knowledge from Nielsen and Landauer (Nielsen & Landauer, 1993) that
five users are enough to capture 85 percent of the usability issues, the researchers
recruited five users to conduct a think aloud and interviews. Two of them were
between 18-45, and three were between 65-90. Two of the age group of 65-90 had
audio impairments, and two of them had visual impairments, including blindness on
one eye.

The sessions were held one by one in Swedish over Zoom and took between 30-45
minutes each. One researcher moderated while the other recorded and took notes.
The purpose was to examine the user experience of the guide and gain feedback
about how it could be improved. The users were given one to three tasks for the
think aloud depending on the amount of time it took. After two users, the first
task was changed from lost to stolen due to user feedback. After the think aloud,
interview questions were asked about demographics and the prototype. The majority
of the questions were reused from the questionnaire (section 6.1.4). The complete
setup of the the think aloud and interviews can be found in the appendix K.

Takeaways from the Think Aloud & Interviews

The main takeaways are summarised with descriptions and some quotes into the
categories (1) Home page, (2) Content in the guide, and (3) When to Use the
Guide.

Home Page
Generally, the home page resulted in divided results. The younger users (2 out of
5) noticed the action icons immediately. One user expressed that the new design
of the action icons and the guide contributed to significant improvements. Two
users expressed confusion regarding the action buttons when the task was to edit or
remove a sent report.

“I think it was very nice to use. (...) When you entered the police site,
they [the action icons] were directly in the eye catchy, and it was so much
better.”

“I didn’t want to report the crime, so I would probably have been a little
hesitant to press the button ‘report crime or loss’, but if I had not found

74
 6. Execution and Process

something better, I would have pressed it anyway. But I was still a little
hesitant because it says report”

The users did not read the subtitle, thus missed the line where it said that the
button could be used to edit a report, implying that it might be helpful to add the
word ‘edit’ in the headline of the button.

One user directed all attention to the box ‘Hitta snabbt’. The user read through the
alternatives twice but could not find any relevant action. Both times, the attention
was directed to the option ‘Passport and national id-card’, and the user believed
that driver’s licence should be an alternative. Furthermore, multiple users mentioned
that the home page contained too much content. Regarding the middle page, one
user expressed the need for another term on the button to start the guide.

“(...) unnecessarily much text. With only one eye, one would prefer it
to be more concentrated”

“The problem was that I felt that it might be faster not to use the guide.
Because sometimes, guides can be quite slow since you have to fill in so
many options. So if it had been, for example, an ‘express guide’ or a
‘quick guide’, then maybe I would have had the courage to use it instead.”

Content in the Guide

One user questioned the ’control question’ and expressed that it felt irrelevant at that
stage. However, after an explanation of the process, the user could understand why.
Furthermore, one user understood directly why the control question was needed.
Another user misunderstood the first alternative and was certain that the crime was
an emergent situation, indicating that all events might feel emergent for the user
experiencing it.

"Then I can really understand them, and then I think it is the right way
to go because (...) I would have been frustrated if I answered everything
and then found out that yes, but now I have to call them - like could
you not say that before?"

"I think it’s right [that the control questions are the first thing shown in
the guide]. (...) maybe it is not even something that you can report to
the Swedish police, and then I would have wasted time."

"I perceive that the [stolen] driver’s license is an emergent situation."

Multiple users experienced confusion about the similarities between ID cards and
driver’s licenses, both on the home page and in the guide. In the guide, a user
mentioned that even though it was not the perfect choice, it was the most relatable.

"ID is probably the closest, I think" and "driving license is counted as a

national ID card. I would have selected the national ID card if it was
my driver’s license that had been stolen"

75
6. Execution and Process

One user felt that it might be too many steps, while another user mentioned that
the questions felt too detailed for the purpose. On the contrary, other users thought
that the guide was quicker than expected.

"... it feels a bit like I’m filling in the loss already"

"If I had known it [the guide] was as fast as it was, I would have used it
first."

"It is very clear, so I felt very confident (...) that I had come to the right
place"

When to Use the Guide

Regarding which situations the users would prefer to use the question guide, they
answered that the guide is fast and could help them avoid telephone queues. Fur-
thermore, it could help in situations when it would be difficult to find a specific
e-service. Additionally, several users expressed that the guide is suitable for mild
crimes, such as a stolen driver’s license, while more severe crimes should be handled
with personal contact.

"If I had not found this down here [link that leads directly to the e-
service]. Then I had thought that okay, I might need help finding it"

"If you have experienced threats etc. and need to calm down, then it
feels better to contact a real person [via telephone]"

Insights from the Usability Test with Users

• Multiple users looked for the solution in ’Hitta snabbt’. Thus something
to consider could be to include a link to the page for reporting a crime or
loss there as well (with the same functionality as the action icon).
• The action icons could be more descriptive.
• Consider another phrasing for the button to start the guide.
• Consider a better description for the option ’It is an emergent situation’
and ’Nothing of the above’ since some users misunderstood those.
• One user mentioned that the guide felt a bit like filling in the e-service.
This is similar to the thought from the Usability Test with Experts where
an expert suggested incorporating the answers from the guide to the spe-
cific e-service.
• Several users thought that driving license was the same as passport and
national id-card which led them to the wrong result. Consider adding an
extra question or explanation to guide.

76
 6. Execution and Process

6.5.4 Usability Test with Accessibility Expert

A usability test session was held with the same accessibility expert as in the em-
pathize stage (section 6.1.6). The focus with this session was to gain feedback on
how the prototype met the WCAG AA requirements and accessibility in general.
The process started with showing the prototype with the same scenarios as in the
Usability Test with Expert from Contact Center, while the expert simultaneously
gave feedback. Afterwards, questions related to accessibility were asked. The session
lasted for 30 mins.

Takeaways from the Usability Test with Accessibility Expert

The feedback from the accessibility expert covered the complete prototype and re-
sulted in a few adjustments. Overall, the expert seemed satisfied with the result.

"As I said, I think it looks good. (...) As far as I can see here, it’s good."

"It looks helpful.".

The opinion about the new design of the action icons was positive as well.

"Good. That’s just it. I think a lot depends on how you highlight
the headlines differently. Previously, it’s more, it’s simply a link text,
while now the most important words are the headline on these buttons,
I believe in it.".

Some concerns of the title of the guide were expressed.

"You can also reflect on the word ’guide’ here. It is a guide to find the
correct e-service, so you might want to call it ’the e-service guide’ or
something like that. Make it clear. On the other hand, we have the
heading ’finding the right e-service’ underneath but yes.".

The expert confirmed that the hover function on some of the buttons is okay re-
garding the accessibility law.

"There are some requirements for how that [hover function] should work
to meet the accessibility requirements in the legislation. Shaking is actu-
ally not really covered (...). If more information is displayed, you should
be able to move the cursor over the new information without it collaps-
ing. (...) here it is not a problem, but it is a requirement that exists.".

However, the expert also mentioned that the touch screen format and keyboard use
need to be considered. It is technically possible to meet the accessibility requirements
as long as the developers make sure that the text appears when users use their
keyboards to tab between the options. The expert mentioned that the alternatives
might lose a bit of the clickable affordance when used on a touch screen, for example,
no hover indication and more text. When alternatives were discussed, the following
solution was suggested:

77
6. Execution and Process

"An alternative would be, but then we increase the number of clicks, but
it is that you click once and then this text [the hover text] comes up with
a button or link. (...) But I do not know if it’s better.".

Furthermore, the expert mentioned that it was positive that the history of the
previously answered question is shown on the same page. When asked about text
size and specifics about different elements, the most important thing was to follow
the design profile for the other e-services to get a unified feeling and invoke a safe
feeling. Regarding the word choices for different expressions, the expert said that
the most important thing is to use the users’ terms.

"My gut feeling is that you should try to use the terms that the users
use.".

"[A possible solution for the ’remove report’ wording is to add a text
box on the next page] have an information text where it says ’note that
in practice you can not delete a report, but you add a supplementary
report (...)".

Insights from the Usability test with the Accessibility Expert

• Change the title of the guide.
• The hover function does meet the WCAG AA requirements and does not
need to be changed for that reason. However, it still has the potential to
be improved and increase the affordance further.
• Regarding the phrasing of ’remove report’, it is important to follow the
users’ terms. A suggestion is to insert a text box and inform that it is
impossible to delete it.

78
 7
Results

The result of this project is divided into two parts. First, the final design concept is
visualized. Secondly, the final set of design guidelines to consider while designing a
navigational path to e-services is presented. Together, these results answer the two
research questions. Furthermore, the client, the Swedish Police Authority, will be
referred to as the authority.

The primary research question, answered with 15 design guidelines, is:

What should be considered when designing an accessible and

usable web navigation to e-services?
The secondary research question, answered with a design concept, is:

How could such guidelines be applied to the Swedish Police Authority’s

website regarding the e-services that are used to report a crime or loss?

7.1 Design Concept

A design concept was created to give an example of how the navigation to the e-
services used to report a crime or loss could be improved at the authority’s website.
The concept is a high fidelity prototype based on the research and data that has
been collected throughout the design thinking process. The concept is a guide with
questions that leads the user to the correct e-service for their needs. The guide is
supposed to be used before using the specific e-service. The entry to the guide is
located on the already existing page, where all e-services for reporting a crime or
loss are displayed in a list.

The design concept will be illustrated together with the behavioral archetypes. Be-
havioral archetypes represent the behavior of the users, commonly defined by cap-
turing their goals, motivation and general attitudes. The method is important for
prioritizing different features with the user in mind (Doneva, 2017). Furthermore,
the authority already use archetypes in some of their design processes. The pro-
duced archetypes are developed from the user data where the users’ actions were
divided into two different archetypes. These will be used together with the design
concept to exemplify how specific elements and functions suits each of them.

79
7. Results

The ’Good Enough’ Gale quickly scans the website and continues with the action
that feels good enough. See figure 7.1.

THE ‘GOOD ENOUGH’ GALE

- Searches for a solution that is good enough
NARRATIVE STRATEGY ATTITUDE
This person aims to read just enough • Makes the choice that most • Prefers to communicate with
information to make an informed likely directs towards the goal.
companies via e-services.

decision. The user doesn't see any

reason for reading more information • Prioritates time efficiency.

• Prefers to communicate with

than necessary. When reaching a the police via telephone.

button, link or service that suits the • Doesn’t discover all possible
goal, the user clicks it without scrolling actions.

• More likely to report minor

further.

cases to the police via

• Is okey with the risk of e-services than the telephone.

When visiting a website, the person missing the most perfect

only look for the words that they option.

• Might become 'overconfident'
believe will get them towards the goal. and believe that they did
When the keyword is found, the person • Uses the same procedure and something correct even though
is satisfied.

strategy as planned, even if it it was incorrect.

doesn’t seem to work.

This person might get frustrated when

the word or function they are looking E-SERVICES SHOULD
for is nowhere to be found on the
website. Another frustration might be • Be easy to find

if it takes too long time to reach the • Be fast to answer

goal. • Be easy to use

Figure 7.1: The ’Good Enough’ Gale. Authors’ own illustration.

The ’Careful’ Charlie takes time to carefully scan through the website and double
checks all possible actions before deciding on how to proceed.

THE ‘CAREFUL’ CHARLIE

- Considers all info before making a decision
NARRATIVE STRATEGY ATTITUDE
This person aims to make correct • Makes the right choice from • Contacts companies and the
decisions without drawing any drastic the beginning

Police via e-services or the

conclusions. Before making a decision, telephone

it’s important to double-check all the • Considers all information

information. Even though the answer is before taking action

• Uses e-services to report

right in front of the person, there is a minor cases

need to inspect all the other options • Uses the same procedure and
before feeling satisfied and settling strategy as planned • Will usually not assume
with the first one.

anything before knowing it is

100% correct
The person rather reads too much
information, than too little. This person
is also aware of the time it takes to find
the information. When visiting a
website, the first thing they do is to
scan all visible information and scroll
down showing what's out of sight.

E-SERVICES SHOULD
One frustration might be when the • Be easy to use

person scans for a word on the website • Be easy to find

and can’t find it.

Figure 7.2: The ’Careful’ Charlie. Authors’ own illustration.

80
 7. Results

7.1.1 Home Page & Middle Page

The home page is the first view when entering the authority’s website. It has two
significant buttons: ’Report a crime or loss’ and ’Leave a tip to the police’ (figure
7.3). The buttons help the users quickly navigate to the view used for presenting
information regarding reporting a crime or a loss. The buttons exist on the page
today but are redesigned with added shadow and hovering functionality. These
improvements provide visual cues to indicate that the buttons are clickable, and the
descriptive texts are matched with the users’ mental models.

The ’Good Enough’ Gale

The large clickable buttons with icons and headings provide quick in-
formation and promote the button as a suitable option for reporting or
editing a crime or loss.

The ’Careful’ Charlie

The icons, headings and descriptive texts with bold keywords on the two
buttons to inform and help this behavior type to be certain about the
action.

Mouseover

Figure 7.3: The home page with the two action icons. The left one is colored blue
to indicate that the user currently has the cursor over the element.

Once the user clicks the left button, the middle page is shown (figure 7.4). An
information box with the heading ’Uncertain which service you should use?’ is
displayed below the introductory text. Some users might continue to scroll down
the page, find a list of the different e-services and find one that matches their need.
However, the research showed that other users felt a need for guidance. The latter
can click the button ’Starta guiden’ in the box.

81
7. Results

The ’Good Enough’ Gale

The guide could be perceived as time-consuming, Gale might decide to
scroll down and consider the other options first.

The ’Careful’ Charlie

The guide is the perfect way to avoid uncertainty, to make sure you do the
right thing and select the correct service. The text inside the information
box provides information about the functionality of the guide.

Figure 7.4: The ’middle page’ with an information box and a button that directs
the user to the beginning of the guide.

When clicking the button, the user gets directed to the guide. The guide has a
few essential elements that are consistent in all views, no matter the content of the
specific view. These are the header, an informational text about the guide, and a
cancel button to go back to the previous page (figure 7.5).

}
Figure 7.5: The basis of the question guide - all pages contain these elements.

82
 7. Results

7.1.2 Understanding If an E-service is the Appropriate Choice

Some circumstances prevent the user from using an e-service. For instance, they
might have a hidden identity or be in a life-threatening situation. In those cases,
they will have to call instead. To pinpoint these specific situations and inform the
user about this, they have to answer a ’control question’ (figure 7.6). The options
are presented as checkboxes since several of them might be relevant for one user.
However, the presented result will be related to the most prioritized option (i.e. the
emergency number is prioritized over 114 14). The options are phrased as statements
in terms of ’It is an emergent situation’ or ’I have a hidden identity’. When hovering
the cursor over an option, a more descriptive text is displayed, which serves as a
details-on-demand solution to avoid visual clutter while still keeping it informative.
When selecting one or multiple items, the user will be presented with contact details
to the relevant source. Suppose the user selects the last option, ’None of the above’.
In that case, all other options are automatically deselected as it is impossible to
choose that option together with another (i.e. the option functions more like a radio
button).

Mouseover

Figure 7.6: The page with questions controlling if the user can use the e-services.
On hovering, an explanation of the hovered object is shown. When selecting one or
multiple items, the user will be presented with contact details to the relevant source.

83
7. Results

The ’Good Enough’ Gale

The most essential information is displayed without hovering over the
different options, making it easy to get a quick overview of the other
options, understand the content and make a good enough decision.

The ’Careful’ Charlie

The hovering function makes it possible to double-check the content and
meaning of the different options before making a decision.

7.1.3 Selecting a Crime or Loss

If the answer to the control question indicates that the user is allowed to use the
e-services, they are asked which kind of crime or loss they want to report (figure
7.7). The options have the functionality of radio buttons, meaning that it is only
possible to select one. Most of the phrasings are specific subjects such as ’Burglary’
and ’Parking Damage’, while one alternative is phrased as ’I want to change, sup-
plement or delete a report’. On hovering, descriptive text is shown to provide more
information about the specific option. Above the question, the previous question is
folded and showed together with the selected answer. To the right, there is a button
called ’Ändra’ that can be used to go back and edit the answer.

The ’Good Enough’ Gale

The fact that the history is constantly present supports the user type
’good enough’ gale. If the user selects an option too quickly and is
incorrect, they can easily see their previous answers and quickly change
them.

The ’Careful’ Charlie

Always seeing the history makes it easy to double-check what you have
answered previous questions, and thus create a safe feeling for the user.

84
 7. Results

Mouseover

Figure 7.7: After passing the control question, the user is asked to select the crime,
loss or action that suits their case. More descriptive information are provided on
hovering.

7.1.4 Clarifying the Crime or Loss

The next step provides more questions related to the type of crime or loss that was
previously selected. As an example, if the user selected that they wanted to report
a loss in the previous question (figure 7.7), the user gets more questions to clarify
the type of crime or loss as seen in figure 7.8. These are asked to fully understand
the different circumstances connected to the lost item and direct the user towards
the correct action - other answers give different results.

85
7. Results

1 2

Mouseover
Mouseover
3

Mouseover

Figure 7.8: An excerpt of the questions to clarify the type of crime or loss. The
questions in the example are related to a loss.

7.1.5 The End of the Guide

Eventually, the user will reach the end of the guide and receive information about
which e-service suits their need (figure 7.9). In some circumstances, there is no
e-service. In those cases, the result will display another solution, such as calling
a specific number or redirecting the user to different parts of the website, other
authorities or companies. It clearly shows that this is the end of the question guide
and provides information about what to do next.

The result box has a similar design in all views, no matter which action it presents.
A descriptive heading displays the following step for the user. Below the heading, a
more descriptive text is displayed to inform the user of different use cases and how
to proceed. At the bottom, the button ’Start the e-service’ redirects the user to a
new page with the described e-service.

The ’Good Enough’ Gale

The green button stands out from the background and catches the user’s
attention, which invites the user to a quick action if they want to skip
reading the text and start the service immediately.

The ’Careful’ Charlie

The information text explain the different use cases to ensure the user
that they have ended up in the right place instead of just including the
start button.

86
 7. Results

Figure 7.9: One of the result views, guiding the user to report a loss.

7.2 Design Guidelines

The following section presents the 15 guidelines developed in this project, divided
into five different categories (table 7.1). Each guideline is illustrated with an expla-
nation of what it means and why it is important. Additionally, most of the guidelines
are provided with examples from the design concept presented in section 7.1.

The design guidelines comprise the following categories: (1) Design - describes the
look and feel of the system’s appearance and is related to enhancing and usability
and accessibility. (2) Language - describes how to use terminology that fits the
users’ mental models’. (3) Content - describes how to best display the information,
function, or action to be understandable and intuitive for the user. (4) Structure -
describes the arrangement of the user interface elements and pages. (5) Methods &
Process - describes parts of the helpful methods and process to acknowledge when
designing a navigation path to e-services.

The first four categories of the guidelines are an updated version of the design
requirements from the define phase (section 6.2.3). The last category is a compilation
of the most valuable parts of the process.

These guidelines aim to support authorities and organizations that intend to design
navigation to e-services, focusing on accessibility and usability. The design guidelines
have multiple usages and can be applied during different phases of the design process.
In general, they can be used in the following formats:

• Checklist for anyone to go through to ensure that no usability or accessibility

factors are overlooked.

• User requirements for understanding what users expect and demand in such
systems.

• Heuristics to act as a rule of thumb for designers and stakeholders when

designing navigation to e-services.

87
7. Results

Design

(1) Use illustrations, videos, and icons in combination with the text

(2) Give feedback on hover

(3) Use large target size for clickable elements

Language

(4) Use words that match the users’ mental models, especially for headings, buttons, and icons

(5) Use clear headings and subheadings that describe the content

Content

(6) Use short sentences and sections

(7) Make it clear to the user how to undo previously submitted information

(8) Create soft transitions between different communication channels

(9) Group things that belong together

Structure

(10) Important information should be displayed before the actions

(11) Use consistent navigation elements

Methods & Process

(12) Include the accessibility perspective throughout the complete process

(13) Involve the end-users as much as possible

(14) Use methods that provide first hand experiences

(15) Use flowcharts for better overview of complex navigations

Table 7.1: All the guidelines.

88
 7. Results

7.2.1 Design - Look & Feel

The category describes the look and feel of the system’s appearance and is related
to enhancing and usability and accessibility.

(1) Use illustrations, videos, and icons in

combination with the text

What? If the majority of the web page is filled with text, it should be combined
with associated visual elements.

Why? Combining text with other graphic elements will be beneficial for people
with dyslexia who struggles when reading walls of text. This goes in line with the
Attentional Capture Perspective by Todd and Kramer (1993) that refers to how
visual elements such as colors, brightness, and objects in the environment can draw
attention and therefore affect the decision making. An example on how this guide-
line has been applied in the design concept can be seen in figure 7.10 where text are
presented in combination with an icon.

Figure 7.10: An example of how the first guideline can be applied where the text
is presented in combination with an icon.

(2) Give feedback on hover

What? Show the functionality of interactive elements.

Why? Tremors or similar disabilities can make it difficult to steer the cursor.
It is a common feature to offer feedback while hovering a clickable item. The fea-
ture helps the user recognize when to click and relates to the use of Affordances,
which indicate that cues and hints are given to users on how to interact with the
specific object (Cooper et al., 2014). This also aligns with the guideline ’Be sure
that all links clearly indicate their destinations’ presented by Farkas and Farkas
(2000, p.356), meaning that mouse rollovers can be used to clarify the link of the
destination. Figure 7.11 shows an example of how this is used in the design concept.

89
7. Results

Mouseover

Figure 7.11: An example of how the second guideline can be applied. During
hover on the right button, it changes color to indicate that it is clickable.

(3) Use large target size for clickable elements

What? Make buttons large enough to be clickable and avoid elements that are
difficult to hit, for example, text links.

Why? Large target size is useful for people with tremors as well as for users with
situational disabilities such as browsing on a bumpy bus ride. A similar requirement
is stated in the WCAG AAA level that highlights the importance of providing large
enough target sizes, which should be at least 44 by 44 CSS pixels (Lawton Henry,
2019). However, it is equally important not to use extreme sizes since that will cover
the whole vision area for people using screen magnification or having tunnel vision.
The button ’Starta e-tjänsten’ in figure 7.12 is an example of using a large target
size for clickable areas.

Figure 7.12: An example of how the third guideline can be applied where the
action to start the e-service is connected to a big button ’Starta e-tjänsten’ instead
of a link or similar design elements.

7.2.2 Language
The category describes how to use terminology that fits the users’ mental models.

(4) Use words that match the users’ mental models,

especially for headings, buttons, and icons

What? Users should be able to understand the information and functions on the
website regardless of the differences in language skills.

Why? Websites that are built with the organization’s words and structure rather

90
 7. Results

than following the users’ mental models often confuses users and makes it hard to
find the content (Horton et al., 2016). For instance, the authority separates pass-
ports and identity cards issued at the authority from other identity cards such as
driver’s licenses issued at another authority. However, in users’ mental models, these
are the same. To highlight the difference between them, an additional question was
added in the design concept so that it would align with users’ mental models but
also make it correct according to the authority’s structure (see figure 7.13).

Figure 7.13: An example of how the fourth guideline can be applied. An additional
question was added in the design concept to align with users’ mental models and
clarify the differences between passport/national identity card issues at the authority
from driver’s license/other identity cards issued at other authorities before making
an action

(5) Use clear headings and subheadings

that describe the content

What? Users should be able to understand the overall information and available
actions by reading headings and subheadings.

Why? Clear headings and subheadings help users and screen reader users to scan
the information. The guideline is aligned with what Spool et al. (2004) describes as
the Information Scent, which explains how users can judge the likeliness to find the
wanted information on a specific web page by reading the titles, images, and content
on the site. This is also related to one of the guidelines presented by Farkas and
Farkas (2000, p. 356), namely ’Design the interface to readily reveal the underlying
information structure’, meaning that the interface should help the user build an
understanding of the content. To illustrate with an example, the user study showed
that the action icons did not provide a clear description explaining that it was pos-
sible to edit an existing report by pressing the button. This was solved by changing
the subheading shown in figure 7.14 (updated action icon to the left).

91
7. Results

Figure 7.14: An example of how the fifth guideline can be applied where the left
image is the new action icon, explaining the possible actions (report or edit report),
while the right action icon only presents one of the possible actions (report).

7.2.3 Content
The category describes how to best display the information, function, or action to
be understandable and intuitive for the user.

(6) Use short sentences and sections

What? Aim for short sections and sentences when providing information.

Why? Long paragraphs and sentences create an overwhelming feeling, especially

for older people and people with dyslexia. Moreover, the Spotted Pattern principle
describes how users skip big chunks of text to look for specific elements (Pernice,
2017). Therefore, as mentioned in the theory by Budiu (2019) and Horton et al.
(2016), a good practice for web optimization is to create scanning-friendly format-
ting and segment the information into short chunks. Even if the complete text
needs to be long, the user can get helped by shorter sentences. In the design con-
cept, the step-by-step guide has decreased the relevant text into smaller segments.
The longest text in the design concept is the result text as seen in figure 7.15, which
was perceived as short according to the users.

Figure 7.15: An example of how the sixth guideline can be applied where the
presented text is short and concise.

92
 7. Results

(7) Make it clear to the user how to

undo previously submitted information

What? Guide the user to the function that is used to edit or remove previously
sent information. If they used the e-service a while ago, how should they edit or
delete information from it?

Why? The user study indicated that many of the users had troubles understanding
how and where they should navigate to undo or delete a submitted report. The
guideline is similar to one of the ten usability heuristics by Nielsen (2020), namely
to ’help users recognize, diagnose, and recover from errors’, which means that errors
and mistakes should be presented to users in plain language where the problem is
stated and a solution is suggested. To illustrate the guideline in the design concept,
the option ’I want to edit, supplement or delete a report’ has made it clear to the user
what to select to undo a previously submitted information (figure 7.16). However,
it is important to mention that once they select that option, they are provided with
information explaining that it is not possible to undo or delete a previous report
from the authority completely. In this case, the information text also suggests what
other actions they can do instead, which is to edit or supplement a previous report.

Figure 7.16: An example of how the seventh guideline can be applied on the
design concept. The option ’I want to edit, supplement or delete a report’ has
made it clear to the user what to select if they want to undo or delete a previously
submitted information. They are later presented with information that a previously
sent report cannot be completely deleted, but what they can do instead.

(8) Create soft transitions between different

communication channels

What? If the user needs to use other communication channels, e.g. call, send
e-mails, visit a police station or use e-services, there should be a soft transition be-
tween these channels. For instance, if no e-service matches the users’ case, do not
leave them there. Instead, provide other options such as a phone number.

Why? Different communication channels are suitable for different cases. Seam-
less transition between the communication channels avoids frustration and helps
the users to solve their cases. This is closely related to Nielsen’s usability principle
’Help users recognize, diagnose, and recover from errors’ (Nielsen, 2020) where the
design should prevent the system from leaving the users without any information

93
7. Results

about how to proceed. An example in the design concept is the result view illus-
trated in 7.17. The user is provided with information about the next suitable action
together with a clickable icon that act as a direct button to call the number if used
by a suitable software on the device.

Figure 7.17: An example of how the eight guideline can be applied where the
information text explains why another service is needed, and the icon could act as
a direct button to call the number if used by the correct software.

(9) Group things that belong together

What Put things that belong together, close together. Make use of visual elements
such as boxes, borders and frames to separate different groups of information.

Why? People with tunnel vision only view a limited area at the same time. Thus,
the users with this diagnosis can miss the overview and correlations between differ-
ent elements. For people with dyslexia, it is useful with frames that do not change
size or jump around. Moreover, the Principle of Proximity strengthens the fact that
placing elements near each other provides visual cues that these belong together
(Harley, 2020). In the guide, the questions are presented as ’cards’ with a border,
and the history is presented as folded cards. That is one example of how it could
be implemented. The distinct borders make it easy to determine which elements
belong together (figure 7.18).

Figure 7.18: An example of how the ninth guideline can be applied. The borders
indicate where one element end and the next one begin.

7.2.4 Structure
The category describes the arrangement of the user interface elements and pages.

(10) Important information should be

displayed before the actions

What? Place important text that should be noticed for all readers before making
potential actions.

Why? The user study revealed that multiple users skipped information on the

94
 7. Results

page. The ’Good Enough’ Gales only read just enough to be able to make a deci-
sion. By displaying all relevant information before the actions, the user will more
likely notice and read it. Furthermore, the Spotted Pattern describes a type of scan-
ning pattern where the user scans the information and skips big chunks of text until
the specific element they are looking for is found (Pernice, 2017). By displaying
the important text before the action, the user will be able to spot the important
text first. An example of this is the set-up of the question guide, where the user is
presented with all relevant information for each option they select. The guide helps
the user to filter out the information for them. Another example is the result view,
where the short information text is presented before the button (figure 7.19).

Figure 7.19: An example of how the tenth guideline can be applied where the text
is displayed before the action.

(11) Use consistent navigation elements

What? Use consistent navigation elements located in the same place in all views.

Why? Users with tunnel vision and screen magnification only view a limited part
of the website at the same time. Using consistent elements located in the same place
in all views allows the user to find the elements without wasting time looking for
them. This is also strengthened in WCAG level AA that points to the fact that
navigational mechanisms should occur in the place if they are repeated on multiple
web pages (Adams et al., 2021). A similar guideline is presented by Farkas and
Farkas (2000, p. 357) describing that a link to the home page should be provided
throughout the whole site. Examples from the design concept are the footer, the
header, and the ’avbryt’ that are all located in the same place throughout the whole
guide (see figure 7.20).

Figure 7.20: An example of how the eleventh guideline can be applied where the
footer, the header, and the ’avbryt’ that are all located in the same place throughout
the whole guide

95
7. Results

7.2.5 Methods & Process

The category describes parts of the process that are useful to acknowledge when
designing a navigation path to e-services.

(12) Include the accessibility perspective throughout

the complete process

What? Involve an accessibility expert and/or accessibility methods continuously.

Why? If the accessibility perspective is added in the end, it will be harder to

adjust the design. By involving that perspective in the beginning and throughout
the complete process, the design will consist of more thoughtful solutions instead of
last-minute fixes. This is also highlighted by the Web Accessibility Initiative that
states the importance of incorporating accessibility from start, to avoid redoing work
at the end of the process (Lawton Henry, 2019).

(13) Involve the end-users as much as possible

What? Involve real end-users in multiple methods during the whole process.

Why? The end-users are the people that will interact and be satisfied with the
experience of the product. This is also stated by Nielsen and Landauer (1993) who
means that one of the fundamental approaches to improve usability is to test it with
the end-users. Furthermore, it is an effective way to avoid ’designing for oneself’
and instead broaden the view and design for users different from you.

(14) Use methods that provide first hand experiences

What? Use methods that help the designer to understand the users’ situation and
put them in the users’ position. An example of such a method is simulation exercises.

Why? Methods used in this thesis have helped the researchers to set aside their
assumptions and enabled them to understand the goals and frustrations from the
users perspective. Besides, empathy is the first stage of the design thinking process,
which aims to focus on understanding the users by imagining ourselves in the users’
world (Siang & Dam, 2021).

(15) Use flowcharts for better overview of complex navigations

What? Flowchart is a graphical illustration of a process with descriptions of the

steps and actions.

Why? The flowchart creates a graphical representation of the different steps of

a process, which is helpful to getting a common overview of complex navigation or
structure. As stated in the methods, a flowchart can illustrate the whole process,
the different steps, the relationship between the steps, as well as the beginning and
end of a process (Associates Staff, 1995).

96
 8
Discussion

This chapter outlines a discussion around the thesis. It will involve discussions about
the design guidelines, design concept, an extract of some methods, the transferability
of the thesis, ethics, and future work.

8.1 Design Guidelines

The design guidelines consist of both usability and accessibility factors to improve
website navigation. However, even if these guidelines mention accessibility factors,
it is crucial to consider that they do not fully solve all the accessibility issues. To
ensure that the accessibility factors are met, the WCAG requirements should be
used in parallel with these guidelines. In terms of the usability perspective, the
created guidelines can be used together with the usability heuristics presented by
Nielsen (2020). The same goes with factors related to web navigation provided by
Farkas and Farkas (2000) and Pilgrim (2012) where their guidelines can be used in
parallel to the created ones in this thesis.

In addition, each project has different users, aims, and functionality. Following
these guidelines can not ensure that it would lead to the same design concept as the
deliverable in this study. Instead, the concept should be based on the same guidelines
but adapted to the specific circumstances. The guidelines need to be general enough
to suit all kinds of e-services and areas but specific enough to contribute value in a
design process. As mentioned in theory, it is a common fact that guidelines might
end up either too specific or too general (Pilgrim, 2012). Too strict guidelines might
hinder creativity and result in a standardized interface without any new or improved
elements. There is a balance between guiding and deciding, and it is essential to be
aware and reflect on this. These guidelines have only been tested in this project by
the researchers who wrote them. To ensure the value of the guidelines, it would be
interesting to see other people test and evaluate them in other projects.

8.2 Design Concept

The design concept is a prototype that exemplifies how the guidelines could be used,
with a focus on the authority’s circumstances. Even though the design concept

97
8. Discussion

fulfills the guidelines and has been tested with real users and experts within the
authority, it is essential to understand that design is an ongoing process. It should
not end here. The design concept might lack specific functions or user needs that
should be further explored.

The design concept might be designed in other formats than a question guide. As
stated in section 1.1, the authority already had an unexplored idea of a guide that
would lead users to the correct e-service. The researchers took note of that idea
and conducted their own research, from start to finish, to open up for other possi-
ble solutions. However, even though the design concept was created based on the
conducted studies, the researchers eventually ended up on the same track as the
authority.

Given that a predetermined design system could be used, the guide had the same
’look and feel’ as the other e-services, which established a relation between them
while making the user feel safe and comfortable. As presented earlier in theory,
Cooper et al. (2014) states that the design language is a vocabulary of design ele-
ments in terms of shape, color, and typography, indicating that it is essential that
the design elements are coming from the same design system. Even if the researchers
would create an entirely new design system, it would differentiate from the design
profile and contribute to a feeling of insecurity for the user, leading their minds to
scam. That should always be avoided and is even more important, especially when
the service relates to reporting crimes. However, the researchers could sometimes
feel limited in exploring other solutions and work with the white spaces in the left
and right margins.

Furthermore, the question guide resulted in an effective way to filter out relevant
information for the user. Since the authority is a large organization with many e-
services, it quickly becomes much information and long texts if you have to inform
all users about everything. This is a heuristic highlighted in theory by Sternberg
et al. (2011) who means that using ’elimination by aspects’ will help people focusing
on one aspect at a time and effectively eliminate many options. The guide makes
it possible to only show the relevant information for the specific circumstance such
as ’The crime was related to a burglary’ and avoid information related to the other
crimes such as loss or damage. Thus, for an organization with many e-services, this
format might be suitable. Another valid format for similar organizations might be
an AI-based solution where users write (or speak to) a bot on the website and get
accurate answers. However, this concept was not further developed due to technical
aspects.

The structure of a question guide might not be suitable for smaller organizations
with fewer e-services. There is always this balance between too many and too few
questions in a guide, where the goal is to deliver a quick to use solution but helps the
user find the correct service. A question might feel irrelevant and time-consuming
during circumstances like that. Thus, for smaller organizations with only a few
services, it might be better to design short and concise information to support the
user’s decisions.

98
 8. Discussion

Another aspect to consider is whether or not the design concept solves the main
problem. From one perspective, the user test of the design concept showed that
everyone who used it eventually found the correct e-service for their crime or loss.
However, it should not be forgotten that both the behavioral archetypes and user
tests of the design concept point to the fact that not all users prefer to use the guide
to find the e-service. From that point of view, the root problem might still exist for
the users who try to find an e-service without help from the guide.

To understand the root problem, it would be sufficient to review the structure and
hierarchy of the website and identify which of the navigational models presented by
Kalbach (2007) that is currently used and how to improve it. The user study in the
empathize phase revealed that many users faced challenges to navigate already from
the home page. For this case, many website guidelines can be used to improve the
design, for example the guideline by Pilgrim (2012) that implies that a useful search
function should be used for sites bigger than a few dozen pages, as stated in the
theory. At present, the search function on the authority’s website is dysfunctional,
which has led to frustrations for users. Unfortunately, the home page was not
within the scope of the dissertation, and therefore the researchers could not explore
it further. In conclusion, it is important to not rely solely on the guide and develop
a user-friendly experience for the entire user journey.

Additionally, the design concept has only been tested on users in a fake context
and not in a situation where they needed to find an e-service. Even if the users
provided many findings, the tests still lack in understanding how users in an actual
situation and context would perceive the guide. A user mentioned that the guide was
understandable but could be different if the user would be in a stressful situation.
This is an important insight to consider, not only for this thesis but also in general.

8.3 Methodology Discussion

This section brings up discussions of a selection of methods and processes. It in-
volves the simulation exercise, eye tracking, behavioral archetypes, usability testing,
different evaluation methods, and concluded with challenges and opportunities of
remote testing with users.

8.3.1 Simulation Exercise

The simulation exercise was used in the early stage of empathizing phase (section 6.1)
to provide authentic insight and first-hand experience of having different disabilities.
The simulation provided valuable insight into this field and gave more empathy
towards the users with disabilities compared to reading the accessibility guidelines
and WCAG. It is one thing to be presented with information about how it feels
to have dyslexia when the letters ’jump around’, but it gives you empathy on an
entirely different level to perceive it yourself. This is one of the insights that have
been developed into guidelines. However, it is essential to remember that this is
only a simulation which means that a person with a disability may not perceive a

99
8. Discussion

system or a situation in the way that the simulation suggests.

8.3.2 Eye Tracking

In terms of the eye tracking, there were both positive and negative aspects to be
considered. On the positive side, it enabled the researchers to see what elements
the participants viewed, which not always turned out to be as expected or matched
the participants’ answers mentioned in the questionnaire. For instance, some par-
ticipants could state that they found the correct e-service even if the eye tracking
revealed the opposite. This correlates to the overconfidence bias mentioned in the
theory by Sternberg et al. (2011) meaning that people tend to overconfident either
their skills, judgment or knowledge. Sternberg et al. (2011) further means that this
might happen because people are unaware of how little they know or that the re-
source is unreliable. This insight could be found by using eye tracking, which would
be hard to reveal with other methods.

On the negative side, it was limited to one minute, which was too short for the task.
In addition to that, the eye tracking was rich in quantitative data; however, it lacked
qualitative data. Even if the questionnaire was used to supplement the method and
provide qualitative insights, many challenges, thoughts, and opinions could not be
predicted. When analyzing the data, the researchers realized that the questionnaire
did not fill up all the gaps, so some data could not be interpreted. If having the
chance to redo this method, the researchers would use eye tracking and interview
questions to adjust the questions for each participant.

8.3.3 Behavioral Archetypes

Behavioral archetypes were used in the define phase (section 6.2) to replace both
personas and scenarios. As much as possible, the researchers aimed to avoid bi-
ases and assumptions about the users based on their demographics, which are often
represented in personas. For instance, the theory chapter states that the illusory
correlation is a bias where people tend to create correlations and relationships be-
tween things that do not correlate, such as events, categories or attributes. The
bias might also impact the thought of other people and form stereotypes, making it
easier to prejudge (Caraban et al., 2019; Sternberg et al., 2011). On the knowledge
of that, the goal was to step aside from stereotypes and instead focus on the main
problems and frustrations. Thus behavioral archetypes was used to understand the
users in terms of their behaviors and motivations.

However, one weakness is that the presented archetypes lack a wide range of dis-
abilities. Considering that the presented archetypes are based on the data collection
and that only one user had a disability, they cannot be seen as contributors to the
inclusive design perspective. To balance this, the inclusiveness was covered by the
accessibility expert and the simulation exercise. Ideally, more users with disabilities
would have been included.

The behavioral archetype ’Good Enough’ Gale can be related to information forag-

100
 8. Discussion

ing, where some people tend not to visit every single link or keep scrolling. That
is because they want to spend little time getting as much information as possible
to maximize the Rate of Gain (Budiu, 2019). This can be aligned with why users
with that behavior type usually avoided the guide in the usability tests. Moreover,
the archetype also aligns with scanning patterns (table 3.2) such as the ’Spotted
pattern’, meaning that the user scans for specific elements and skips big chunks of
texts. Another scanning pattern that can be applied to the archetype is the ’layer-
cake pattern’ where the eyes focus on the headings and subheadings but skips the
normal text, resulting in horizontal lines resembling a cake if plotted on a heat map.
Lastly, the archetype also relates to the ’satisficing heuristic’, meaning that the per-
son selects the first option that meets the minimum level of acceptability (Sternberg
et al., 2011). For the behavioral archetype ’Careful’ Charlie, the scanning pattern
(table 3.2) ’commitment pattern’ can be applied, that describes the action of reading
through the whole page, such as all paragraphs and contents.

8.3.4 Usability Testing

Usability testing is an essential factor for usability and accessibility. When con-
ducting usability testing on the design concept, an aspect to discuss is that Axure
replaced the symbol of a mouse pointer with a circle which might have affected their
user experience. However, hover states on the elements were created to indicate what
was clickable, which hopefully eliminated the frustrations. Secondly, regarding the
home page and the middle page of the prototype, only a few clickable elements were
clickable since screenshots from the published website represented the background.
Meanwhile, when using the eye tracking, which was tested on the published website,
everything was clickable. These aspects might have given hints to the user about
how to proceed when using the prototype, thus affected the study.

Nielsen (2012) means that usability test is about three modules: (1) find represen-
tative users, (2) let the users perform representative tasks and (3) observe the users.
Looking in retrospect, the researchers followed the modules, which provided valu-
able insight to the work. However, Nielsen (2012) also means that the users should
perform the same tasks, which was not done in the test with our users. Instead, the
researchers changed the task after testing it with two users, which is hard to know
afterwards if it has affected the result.

8.3.5 Different Methods of Evaluation

From the beginning, the plan was to use A/B Testing, where the A-testing would
be the eye tracking in the empathize phase, and the B-testing would use the same
method in the test phase. However, due to the time required, challenges with the set-
up of the eye tracking and the lack of qualitative data, think aloud, and interviews
were performed in the test phase instead. This means that two different evaluation
methods have been used. The eye tracking provided more quantitative insights
about which elements the users noticed and used, while the think aloud resulted
in more qualitative data. Additionally, 21 participants were recruited for the eye
tracking while five were enough for the think aloud. One reflection is that both

101
8. Discussion

evaluation methods provided valuable data as they were used on different occasions
and at sufficient scales for the project. It is also worth mentioning that users only
had one minute to find the correct e-service in the eye tracking while they had
unlimited time to navigate in the think aloud. Therefore, it is hard to conclude
whether or not the guide was an improvement or not.

After all, the most important takeaway is that testing with users is essential and
especially to reflect on what Sternberg et al. (2011) means by the phenomenon called
hindsight bias. In general, this means that people rarely recognize the signs while
something is happening, thus not until afterwards feel that the result was obvious.
This was especially true when many of the users did not notice the action icons,
which surprised the researchers, stakeholders, and users when they were shown to
them.

8.3.6 Remote Testing with Users

Due to the Covid-19 pandemic that spread worldwide during the execution of this
project, all methods were conducted remotely and digitally. The researchers were
aware of these particular circumstances at the beginning of the project, making it
possible to consider different alternatives and plans. The circumstances led to both
challenges and opportunities.

The challenges have mainly been connected to the restriction of no physical meet-
ings. All data collection has been conducted online, meaning that the participants
themselves have been forced to set up the systems and make sure that everything
works. The eye tracking system was extra complicated for some users, which re-
sulted in unusable data. For example, one user had trouble entering the test since
the camera did not notice the eyes, resulting in the software recording a completely
black screen instead. However, these struggles were treated differently with retakes
and new connections, ensuring not losing the participants.

Additionally, the pandemic also led to limitations in recruiting participants. It was

challenging to recruit people over the age of 65 for the eye tracking study ( section
6.1.4) due to the technical setup and without being able to offer the opportunity to
assist them physically. For the same reasons, it was equally hard to recruit people
with different disabilities. When designing for accessibility, it is essential to involve
a wide range of users. After contacting several organizations and joining Facebook
groups, the researchers eventually managed to recruit one person with visual impair-
ment and one with dyslexia which was valuable. With this in mind, the researchers
took knowledge of Nielsen and Landauer’s rule (figure 3.9), that about five users are
enough to understand 85 percent of the problems, and applied it to the usability
study in the test phase. The rule opened up a more effective way to gather data
while also ensuring that the number of insights would be enough. However, in the
theory about inclusive design, Microsoft Design (n.d.) and Sharp et al. (2019) high-
lights the importance of understanding different disabilities: temporary, situational
and permanent. The users for this study have been in the categories of permanent
disabilities. For future testing after the pandemic, it would be interesting to involve

102
 8. Discussion

more context related to situational and temporary impairments such as one-arm

restrictions or visual and hearing disturbances.

Despite these challenges, the pandemic also opened up new possibilities. The nor-
malization of digital communication made it easy to schedule meetings with multiple
experts within the authority. For the participants, interacting with the current web-
site and the design concept in their contextual state has been more appropriate
and realistic than a physical setup in the school or police building, which would
have been the case if it had not been done remotely. Even though the recruitment
was challenging, the remote study made it possible to collect all user data from 22
participants in the empathize phase during one and a half weeks, which would be
extremely difficult if the user study would be organized physically. Furthermore,
the participants lived in different cities, which opened up to a broader target group
than otherwise.

8.4 Transferability
Transferability describes how the findings of qualitative data from a specific context
can be transferred and reused to similar contexts and projects.

The design concept could be adjusted and used by authorities and organizations
that aim to guide their users to the correct e-service, especially if there are many
e-services to choose between. However, the graphical elements and phrases used in
this design concept are specific for the authority and should be adjusted to others.
The most important parts to bring from the design concept are the guide’s overall
structure, the use of different types of elements for different situations, and infor-
mation flow. Moreover, the behavioral archetypes have been used together with the
design concept. Since the archetypes describe behaviors that are not specific to the
authority’s website, those could be used for other similar projects.

The guidelines have been created from the data and insights from the methods
in the design thinking process. The guidelines can be used on many occasions,
such as creating new navigation to e-services or improving an existing one. Despite
the fact that the guidelines are narrowed for this context, one can also insist that
some guidelines are general and can be applied in other areas, such as creating
or improving a website. In those cases, some guidelines that can be used are, for
instance, (3) Use large target size for clickable elements and (4) Use words that
match the users’ mental models (figure 7.1).

The thesis was performed with the approach of research through design which, as
stated in section 4.1, can be viewed as exploratory and speculative. From one point
of view, a repetition of the methods and the process could lead to rich insights,
as in this dissertation. However, as mentioned in wicked problems (section 4.1.1),
designers often deal with several variables that are impossible to control. Thus,
Design Thinking is used to re-frame the problem space and prioritize. In other
words, even though one has the same research question and follows the same process

103
8. Discussion

and methods, it can not be ensured that the outcome will be the same since every
project have their variables and limitations.

8.5 Ethics
All data has been collected from participants where consent forms have been used
to inform about anonymity and how the data will be collected, used and stored. To
ensure participants’ anonymity, the recordings and notes will be removed when the
thesis is finished. The researchers have also made sure that all the software used for
this project are fully compliant with GDPR.

On the subject of ethics related to the design concept, it is notable that the concept
supports a digital format of a service provided to all the citizens in Sweden. As
mentioned in the theory, Microsoft Design (n.d.) states that it is important to rec-
ognize exclusion to find opportunities for a broader range of people in the society.
As understood in the usability study with users, some users expressed that even
though the guide and e-service were effective to help them report a crime or loss,
they still wanted the human-to-human contact and therefore preferred the option to
call. Furthermore, as mentioned in section 2.4.1, some challenges with an increasing
amount of e-services are the privacy and security aspect (Rust & Kannan, 2002).
Some end-users might feel reluctant to fill in their private information on the inter-
net. At present, the authority offers several ways to report a crime or loss. It is
important that these alternatives remain and are improved on the same scale as the
digital alternatives.

8.6 Future Work

The thesis has been limited in terms of time, competencies and tools, leaving many
topics untouched. This section provides thoughts and suggestions for future im-
provements.

Develop the Phrasing of the Questions in the Design Concept

Currently, the researchers selected words and phrasings with feedback from stake-
holders and users, which has caused a mix of formal and informal language. An
example is one of the action icons where the earlier phrasing was ’I have encoun-
tered something’, which was changed to ’report crime or loss’ that can be experienced
more formal and serious. The change was a result of the user study. However, it is
essential to consider what feeling the authority wants to convey. Furthermore, the
theory chapter means that the ’framing’ of different options affect how the alterna-
tives are perceived and selected (Sternberg et al., 2011). By phrasing the options to
make the user value them equally, the user might choose the option that suits their
case.

Additionally, the heuristic reinforces that it should be carefully considered how to

phrase the option to select the guide for the user. The test showed that some users
felt that a guide could be a slow choice instead of a fast support system. The

104
 8. Discussion

authority should reflect on this and rename it to something that matches the users’
mental models. All wording should be reviewed together with a linguist to ensure
quality in word choice for both users and authorities.

Explore the Browsing Idea

As mentioned in the ideation phase (section 6.3), the two ideas (Question Idea and
Browsing Idea) were selected and considered as a complete solution to the problem.
However, due to time constraints, only one could be developed into a design concept.
Even though the question guide was developed further, the browsing idea should not
be forgotten. Instead, it should be further explored.

Testing after Implementation

Even though the design concept has been tested with real users, it is important to
remember that they tested on a prototype that is an effective solution for gathering
feedback in an early stage. However, it should not stop here. Instead, the real
product should be tested as well.

Explore Mobile Version

Due to limitations in time, only one format of the concept could be developed. The
eye tracking software was constrained only to allow desktop use, and the remote
think aloud worked better with the desktop version, which made it natural to prior-
itize that format. However, considering that many people also use their phones to
navigate on the site, it is important to explore the mobile version.

Incorporate Answers from the Guide to the E-services

One idea from both the usability test with experts (section 6.5.1) and the usability
test with users (section 6.5.3) was to incorporate the answers from the guide into
the specific e-service. This would eliminate the risk that the user has to answer the
same question twice. The technical possibility of doing this should be examined.

105
8. Discussion

106
 9
Conclusion

The study aimed to conduct a user-centered design and create a concept of how to
improve the navigation to different e-services. The primary research question was:

What should be considered when designing an accessible and

usable web navigation to e-services?
To answer the question, 15 guidelines have been developed using multiple methods.
A selection of some methods are simulation exercises to involve inclusive design
and understand what to consider to make the navigation accessible, eye tracking
to observe the user’s behaviors and gaze points while navigating the website, and
expert interviews to understand the situation from the stakeholder’s perspective.
The design guidelines are the following:

1. Use illustrations, videos, and icons in combination with the text

2. Give feedback on hover

3. Use large target size for clickable elements

4. Use words that match the users’ mental models, especially for headings, but-
tons, and icons

5. Use clear headings and subheadings that describe the content

6. Use short sentences and sections

7. Make it clear to the user how to undo previously submitted information

8. Create soft transitions between different communication channels

9. Group things that belong together

10. Important information should be displayed before the actions

11. Use consistent navigation elements

12. Include the accessibility perspective throughout the complete process

107
9. Conclusion

13. Involve the end-users as much as possible

14. Use methods that provide first hand experiences

15. Use flowcharts for a better overview of complex navigations

The guidelines resulted from a user-centered design process, focusing on design

thinking and concluded the knowledge gained during this study. A total of 39
people were involved in the process, including users, experts, and stakeholders. The
guidelines were used to develop a design concept and answer the secondary research
question:

How could such guidelines be applied to the Swedish Police

Authority’s website regarding the e-services that are used to
report a crime or loss?
The design concept was a high fidelity prototype that can be used as a basis or
framework when designing navigation to e-services. The authority’s predetermined
design profile was used as a starting point, while new elements and content were
created to match the guidelines and the users’ needs.

In summary, both research questions have been answered through a user-centered

process.

108
 References

Adams, C., Campbell, A., Montgomery, R., Cooper, M., & Kirkpatrick, A. (2021).
Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/
TR/WCAG22/
Anguera, M. T., Portell, M., Chacón-Moscoso, S., & Sanduvete-Chaves, S. (2018).
Indirect observation in everyday contexts: Concepts and methodological guide-
lines within a mixed methods framework. Frontiers in Psychology, 9 (JAN).
https://doi.org/10.3389/fpsyg.2018.00013
Arvola, M. (2014). Interaktionsdesign och UX : om att skapa en god användarup-
plevelse (1st ed.). Studentlitteratur AB.
Asjes, K. (2014). The Hidden Benefits of Remote Research. Retrieved January 29,
2021, from https : / / www . uxbooth . com / articles / hidden - benefits - remote -
research/
Associates Staff, J. (1995). Flowcharts: Plain & Simple: Learning & Application
Guide. Oriel Inc.
Axure Software Solutions. (n.d.). Powerful Prototyping and Developer Handoff. Re-
trieved February 5, 2021, from https://www.axure.com/
Babich, N. (2019). Sitemaps & Information Architecture (IA). Retrieved January 27,
2021, from https://xd.adobe.com/ideas/process/information-architecture/
sitemap-and-information-architecture/
Baxter, K., Courage, C., & Caine, K. (2015). Understanding your users: a practical
guide to user research methods.
Bharosa, N., Meijer, K., & van der Voort, H. (2020). Innovation in Public Service De-
sign: Developing a Co-Creation Tool for Public Service Innovation Journeys.
The 21st Annual International Conference on Digital Government Research,
275–284. https://doi.org/10.1145/3396956.3396981
Bieber, M., Vitali, F., Ashman, H., Balasubramanian, V., & Oinas-Kukkonen, H.
(1997). Fourth generation hypermedia: some missing links for the World Wide
Web. International Journal of Human-Computer Studies. https://doi.org/
10.1006/ijhc.1997.0130

109
References

Budiu, R. (2017). Quantitative vs. Qualitative Usability Testing. Retrieved January

27, 2021, from https://www.nngroup.com/articles/quant-vs-qual/
Budiu, R. (2019). Information Foraging: A Theory of How People Navigate on the
Web. Retrieved February 1, 2021, from https://www.nngroup.com/articles/
information-foraging/
Burke, M., Hornof, A., Nilsen, E., & Gorman, N. (2005). High-cost banner blindness.
ACM Transactions on Computer-Human Interaction, 12 (4). https://doi.org/
10.1145/1121112.1121116
Buxton, W., & Buxton, B. (2007). Sketching User Experiences: Getting the De-
sign Right and the Right Design. Elsevier Science & Technology. https : / /
ebookcentral . proquest . com / lib / chalmers / reader . action ? docID = 317018 %
7B%5C&%7Dppg=1
Caraban, A., Karapanos, E., Gonçalves, D., & Campos, P. (2019). 23 Ways to Nudge:
A review of technology-mediated nudging in human-computer interaction.
Conference on Human Factors in Computing Systems - Proceedings. https:
//doi.org/10.1145/3290605.3300733
CEN CENELEC ETSI. (2015). Accessibility requirements suitable for public procure-
ment of ICT products and services in Europe (tech. rep.). https://www.etsi.
org/deliver/etsi%7B%5C_%7Den/301500%7B%5C_%7D301599/301549/
02.01.02%7B%5C_%7D60/en%7B%5C_%7D301549v020102p.pdf
Chapin, N. (2003). Flowchart. John Wiley; Sons Ltd.
Churchman, C. W. (1967). Guest Editorial: Wicked Problems. Management Science,
14 (4), B141–B142. http://www.jstor.org/stable/2628678
Page: B 141-142
Clarkson, J., & Coleman, R. (2007). Inclusive Design Toolkit. University of Cam-
bridge.
Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About Face: The Essen-
tials of Interaction Design, 4th Edition.
DIGG. (n.d.). Om lagen om tillgänglighet till digital offentlig service. Retrieved
January 29, 2021, from https://www.digg.se/digital-tillganglighet/om-lagen
DIGG - Myndigheten för digital förvaltning. (n.d.). Om oss. Retrieved January 18,
2021, from https://www.digg.se/om-oss
Doneva, R. (2017). Behavioural archetypes instead of personas. Medium. https :
//radinadoneva.medium.com/behavioural-archetypes-instead-of-personas-
c7ccc5b8b998
Farkas, D. k., & Farkas, J. B. (2000). Guidelines for Designing Web Navigation.
Technical Communication, 47 (3), 341–358.

110
 References

Farmen, N. (n.d.). A/B Testing: Optimizing The UX. Retrieved February 5, 2021,
from https://usabilitygeek.com/a-b-testing-optimizing-the-ux/
Figma. (n.d.). Where teams design together. Retrieved February 5, 2021, from https:
//www.figma.com/
Fitzpatrick, D. (n.d.). Understanding Design Systems and Patterns. Retrieved Jan-
uary 27, 2021, from https://www.toptal.com/designers/ux/design-system
Freire, A. P., de Mattos Fortes, R. P., Barroso Paiva, D. M., & Santos Turine, M. A.
(2007). Using screen readers to reinforce web accessibility education. Proceed-
ings of the 12th annual SIGCSE conference on Innovation and technology in
computer science education - ITiCSE ’07. https://doi.org/10.1145/1268784.
1268810
Funka. (n.d.). Statistik. Retrieved January 25, 2021, from https://www.funka.com/
design-for-alla/statistik/
Funkify. (n.d.). About our simulators. Retrieved January 19, 2021, from https://
www.funkify.org/simulators/?v=f003c44deab6
Gaver, W. (2012). What Should We Expect from Research through Design? Proceed-
ings of the SIGCHI Conference on Human Factors in Computing Systems,
937–946. https://doi.org/10.1145/2207676.2208538
Gedenryd, H. (1998). How designers work: making sense of authentic cognitive ac-
tivities (tech. rep.). Cognitive Science.
Gillham, B. (2008). Developing a Questionnaire (2nd ed.). Bloomsbury Publishing
Plc.
Goodwin, K. (2009). Designing for the Digital Age: How to Create Human-Centered
Products and Services. Wiley Publishing.
Harley, A. (2020). Proximity Principle in Visual Design. Retrieved May 20, 2021,
from https://www.nngroup.com/articles/gestalt-proximity/
Hoffman, K. D., & Bateson, J. E. (1997). Essentials of service marketing. The Dry-
den Press.
Horton, S., Marcotte, E., & Lynch, P. J. (2016). Web style guide: foundations of
user experience design. Yale University Press.
Infrastrukturdepartementet RSED DF. (2018). Lag om tillgänglighet till digital of-
fentlig service. 2018:1937. https://www.riksdagen.se/sv/dokument- lagar/
dokument/svensk- forfattningssamling/lag-20181937-om- tillganglighet-till-
digital%7B%5C_%7Dsfs-2018-1937
Interaction Design Foundation. (n.d.-a). Design Thinking. Retrieved January 19,
2021, from https://www.interaction- design.org/literature/topics/design-
thinking

111
References

Interaction Design Foundation. (n.d.-b). Wicked Problems. Retrieved January 25,

2021, from https://www.interaction- design.org/literature/topics/wicked-
problems
Interaction Design Foundation. (2020). How to Conduct a Cognitive Walkthrough.
Retrieved February 5, 2021, from https : / / www . interaction - design . org /
literature/article/how-to-conduct-a-cognitive-walkthrough
ISO 9241-210:2019. (2019). Ergonomics of human-system interaction – Part 210:
Human-centred design for interactive systems (tech. rep.). www.sis.se
Kalbach, J. (2007). Designing Web Navigation. O’Reilly.
Katz, M. A., & Byrne, M. D. (2003). Effects of scent and breadth on use of site-
specific search on e-commerce Web sites. ACM Transactions on Computer-
Human Interaction. https://doi.org/10.1145/937549.937551
Kholmatova, A. (2017). Design Systems. A practical guide to creating design lan-
guages for digital products. (Vol. 46).
Kleinmuntz, D. N., & Schkade, D. A. (1993). Information displays and decision
processes. Psychological Science, 4 (4), 221–227.
Lawton Henry, S. (2019). Introduction to Web Accessibility. Retrieved May 20, 2021,
from https://www.w3.org/WAI/fundamentals/accessibility- intro/%7B%
5C#%7Dcontext
Lazar, J., Bessiere, K., Ceaparu, I., Robinson, J., & Shneiderman, B. (2003). HELP!
I’M LOST: USER FRUSTRATION IN WEB NAVIGATION. IT & SOCI-
ETY, 1 (3), 18–26. http://www.itandsociety.org
Lim, Y.-K., Stolterman, E., & Tenenberg, J. (2008). The Anatomy of Prototypes:
Prototypes as Filters, Prototypes as Manifestations of Design Ideas. ACM
Transactions on Computer-Human Interaction (TOCHI), 15 (2), 27. https:
//doi.org/10.1145/1375761.1375762
Lucid Software Inc. (n.d.). Den visuella arbetsytan för distansteam. Retrieved April
6, 2021, from https://www.lucidchart.com/pages/sv
Martin, B., & Hanington, B. (2012). Universal methods of design: 100 ways to re-
search complex problems, develop innovative ideas, and design effective solu-
tions. Quayside Publishing Group. https://ebookcentral.proquest.com/lib/
linkoping-ebooks/detail.action?docID=3399583
MBA Skool Team. (2020). Attitudinal Research. Retrieved January 29, 2021, from
https://www.mbaskool.com/business- concepts/marketing- and- strategy-
terms/17841-attitudinal-research.html
Microsoft Design. (n.d.). Inclusive 101 (tech. rep.). https://www.microsoft.com/
design/inclusive/

112
 References

Mockplus. (2020). 10 Best UI Style Guide Examples & Templates for Better UX.
Retrieved January 27, 2021, from https://www.mockplus.com/blog/post/ui-
style-guide
Moran, K. (2018). Site Search Suggestions. Retrieved February 2, 2021, from https:
//www.nngroup.com/articles/site-search-suggestions/
Nielsen, J. (2012). Usability 101: Introduction to Usability. Retrieved January 25,
2021, from https://www.nngroup.com/articles/usability-101-introduction-
to-usability/
Nielsen, J. (2020). 10 Usability Heuristics for User Interface Design. Retrieved May
20, 2021, from https://www.nngroup.com/articles/ten-usability-heuristics/
Nielsen, J., & Landauer, T. K. (1993). A mathematical model of the finding of
usability problems. Proceedings of the SIGCHI conference on Human factors
in computing systems - CHI ’93. https://doi.org/10.1145/169059.169166
OECD. (2017). Embracing Innovation in Government: Global Trends (tech. rep.).
https://www.oecd.org/gov/innovative-government/embracing-innovation-
in-government.pdf
Pernice, K. (2017). F-Shaped Pattern of Reading on the Web: Misunderstood, But
Still Relevant (Even on Mobile). Retrieved February 2, 2021, from https :
//www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
Pilgrim, C. (2012). Website navigation tools: a decade of design trends 2002 to
2011. Proceedings of the Thirteenth Australasian User Interface Conference -
Volume 126, 3–10.
Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106 (4).
https://doi.org/10.1037/0033-295X.106.4.643
Polisen. (n.d.-a). Polisen. Retrieved February 12, 2021, from https://polisen.se/
Polisen. (n.d.-b). Tasks and Objectives for the Police. Retrieved February 9, 2021,
from https://polisen.se/en/the-swedish-police/tasks-and-objectives/
Polisen. (2020). Gör en anmälan. Retrieved February 9, 2021, from https://polisen.
se/kontakt/om-webbplatsen/teckenspraksfilmer/gor-en-anmalan/
Preece, J., Sharp, H., & Rogers, Y. (2015). Interaction Design: Beyond Human-
Computer Interaction (4th ed.). John Wiley & Sons. https : / / chalmers .
skillport . eu / skillportfe / assetSummaryPage . action ? assetid = RW % 7B %
5C$%7D1508:%7B%5C_ %7Dss%7B%5C_ %7Dbook:142571%7B%5C#
%7Dsummary/BOOKS/RW%7B%5C$%7D1508:%7B%5C_%7Dss%7B%
5C_%7Dbook:142571
RealEye. (n.d.). Webcam Eye-Tracking. Retrieved February 4, 2021, from https :
//www.realeye.io/

113
References

Rittel, H., & Webber, M. (1973). Dilemmas in a general theory of planning. Policy
Sciences, 4, 155–169.
Rohrer, C. (2014). When to Use Which User-Experience Research Methods. Re-
trieved January 27, 2021, from https://www.nngroup.com/articles/which-
ux-research-methods/
Rowley, J. (2006). An analysis of the e-service literature: Towards a research agenda.
Internet Research, 16 (3), 339–359. https://doi.org/10.1108/10662240610673736
Rust, R. T., & Kannan, P. (2002). The Era of e-service. New directions in theory
and practice. Taylor & Francis Group.
Scott, A. (2017). Attitudinal vs. Behavioural. Retrieved January 29, 2021, from
https://medium.com/@andyscottux/attitudinal-vs-behavioural-246b91ca7dd3
Sharp, H., Preece, J., & Rogers, Y. (2019). Interaction Design : Beyond Human-
Computer Interaction (Vol. Fifth edit). Wiley. https : / / search . ebscohost .
com/login.aspx?direct=true%7B%5C&%7Ddb=edsebk%7B%5C&%7DAN=
2097340 % 7B % 5C & %7Dsite = eds - live % 7B % 5C & %7Dscope = site % 7B %
5C & %7Dauthtype = guest % 7B % 5C & %7Dcustid = s3911979 % 7B % 5C &
%7Dgroupid=main%7B%5C&%7Dprofile=eds
Siang, T. Y., & Dam, R. F. (2020). Design Thinking: Getting Started with Empathy.
Retrieved January 19, 2021, from https : / / www . interaction - design . org /
literature/article/design-thinking-getting-started-with-empathy
Siang, T. Y., & Dam, R. F. (2021). 5 Stages in the Design Thinking Process.
Retrieved January 19, 2021, from https : / / www . interaction - design . org /
literature/article/5-stages-in-the-design-thinking-process
Siebers, T. (2008). Disability Theory. University of Michigan Press.
Smashing Ideas. (2017). BEHAVIORAL ARCHETYPES: a smashing ideas toolkit
(tech. rep.). Seattle. https://smashingideas.com/wp-content/uploads/2017/
10/SmashingIdeas%7B%5C_%7DBehavioralArchetypesToolkit.pdf
Snyder, H. (2019). Literature review as a research methodology: An overview and
guidelines. Journal of Business Research, 104. https://doi.org/10.1016/j.
jbusres.2019.07.039
Spool, J. M., Perfetti, C., & Brittan, D. (2004). Designing for the Scent of Infor-
mation: The Essentials Every Designer Needs to Know About How Users
Navigate Through Large Web Sites. User Interface Engineering.
Stappers, P. J., & Giaccardi, E. (n.d.). Research through Design. https : / / www .
interaction-design.org/literature/book/the-encyclopedia-of-human-computer-
interaction-2nd-ed/research-through-design
Stepanov, M. (2018). 7 steps of A/B testing. Retrieved February 5, 2021, from
https://uxdesign.cc/7-steps-of-a-b-testing-what-how-cf3b209467fd

114
 References

Sternberg, R. J., Sternberg, K., & Mio, J. S. (2011). Cognitive Psychology. Wadsworth/Cengage
Learning. https://books.google.se/books?id=DIg5XwAACAAJ
The Swedish Police. (n.d.). The Swedish Police. Retrieved January 29, 2021, from
https://polisen.se/en/the-swedish-police/
Todd, S., & Kramer, A. F. (1993). Attentional Guidance in Visual Attention. Pro-
ceedings of the Human Factors and Ergonomics Society Annual Meeting,
37 (19). https://doi.org/10.1518/107118193784162290
Traynor, B. (2012). Rapid paper prototyping: 100 Design sketches in 10 minutes, 18
designs presented, 6 prototypes tested, student engagement-Priceless! IEEE
International Professional Communication Conference, 1–5. https://doi.org/
10.1109/IPCC.2012.6408618
Tulathimutte, T., & Bolt, N. (2010). Remote Research (1st ed.). Rosenfeld Media.
University of Cambridge. (n.d.). What is inclusive design? Retrieved January 25,
2021, from http://www.inclusivedesigntoolkit.com/whatis/whatis.html
Vetenskapsrådet. (2017). God forskningssed. Vetenskapsrådet.
Voyant. (n.d.). Voyant: see through your text. Retrieved January 26, 2021, from
https://voyant-tools.org/
Web Accessibility Initiative. (2010). Accessibility, Usability, and Inclusion. Retrieved
January 26, 2021, from https://www.w3.org/WAI/fundamentals/accessibility-
usability-inclusion/
WebAim. (n.d.). We have web accessibility in mind. Retrieved January 26, 2021,
from https://webaim.org/
World Health Organization. (2020). Disability and health. Retrieved January 25,
2021, from https://www.who.int/news-room/fact-sheets/detail/disability-
and-health
Zimmerman, J., Forlizzi, J., & Evenson, S. (2007). Research through Design as a
Method for Interaction Design Research in HCI. Proceedings of the SIGCHI
Conference on Human Factors in Computing Systems, 493–502. https://doi.
org/10.1145/1240624.1240704

115
References

116
 Appendix
A
Conclusions, Simulation Exercise
Dyslexia
Illustrations, pictures, symbols, boxes, borders and icons don’t change size or shape, implying that it can
be effective to use these for guiding the user.
Capital letters in the beginning of each word (i.e. Title Case) makes it easier and faster to interpret the start.
Long sentences and sections of text become overwhelming. Avoid these and aim for shorter sections in
combination with bullet lists.

Vision
Good contrast makes it possible to distinguish elements for people with color blindness (color blindness).
Differentiate headings, subheadings and paragraphs so that people with blurry vision can distinguish them
(blurry vision).
For people with tunnel vision, it is important to not make the icons too big so that it is possible to grasp
the context when only seeing the circular or rectangular view (tunnel vision).
Make use of frames to indicate which elements belong to each other (tunnel vision).
Use the same margins in the left and right of the page. That will make it easier for people with tunnel
vision to understand where to find content (tunnel vision).
Use consistent navigation elements and put them in the same place if they are repeated in different
pages (tunnel vision).
Images and videos are easier to grasp than text (peripheral vision).
Separate elements (such as headers etc.) to make it easier to understand the layout (peripheral vision).
Use high contrast ratio (sunlight).
Use big hit areas such as buttons and links (older people).
Icons and symbols are preferred instead of links (older people).
Avoid using too long text (older people).

Cognition
Distractions will make people reach their goal by using the easiest path, i.e.just scanning through the page.
Avoid too much text - stick to keywords and short sentences.

Motor
It is very important with big hit areas. Make buttons big and avoid things that are hard to hit, for example
links.
The website provided feedback when hovering an item, which is a very useful feature when it is hard to
steer the mouse.

Table A.1: Table of conclusions from the Funkify plugin used in the simulation
exercise.

I
Appendix

B
Consent Form, User Study

Samtycke

Användarstudie - Att hitta till Polisens e-tjänster

Bakgrund

Vi skriver just nu vårt examensarbete inom masterprogrammet Interaktionsdesign (Interaction Design

and Technologies) på Chalmers Tekniska högskola. Arbetet sker i samarbete med Polismyndigheten 


och syftet med arbetet är att förbättra navigationen till deras olika e-tjänster vid anmälan av brott. Vårt

mål är att så många medborgare som möjligt ska kunna använda tjänsterna, och för att uppnå det vill vi

involvera er redan i skapandeprocessen.

Vad ingår i studien?

Du kommer att få genomföra två olika aktiviteter:

• Eye-tracking (ca 5-10 min)

• Enkät (ca 5-10 min)

Är jag anonym?

Ja. Eye-tracking innebär mätning av ögonrörelser och kommer att ske via
din dators webbkamera. Resultatet kommer att presentera ögonrörelser samt

ögonfixeringar på sidan tillsammans med musrörelser och klick. Se exempel

på resultatbild här till höger. Det kommer även gå att se rörelserna som en

video. Ingen personlig data på dig så som bild eller ljud från webbkameran
kommer därmed lagras. Realeye.io är ett företag som vistas i Europa, vilket
medföljer att de följer GDPR.

I enkäten kommer du att få fylla i ditt deltagarnummer istället för ditt namn .

Eventuella uppgifter från eye-trackingen och enkäten som publiceras i

masteruppsatsen kommer att vara anonyma.

Bildkälla: https://realeye.io

Övrigt

Ditt deltagande är frivilligt och du har rätt att avbryta undersökningen när du vill utan att ge en

förklaring eller bli ifrågasatt.

Samtycke

Jag samtycker härmed till att delta i studien genom att signera detta dokument. Studien har beskrivits
och jag känner till de förutsättningar som gäller. Jag är medveten om att data från mitt deltagande i

eye-trackinguppgiften och frågeformuläret kommer att samlas in och analyseras. Jag vet att jag när som

helst kan bestämma mig för att avsluta mitt deltagande i studien utan att ge någon förklaring.

Signering

Ladda ned och spara pdfen på datorn. Gå in på hemsidan https://signera.ebox.nu/ och följ beskrivningen
för att signera dokumentet med Bank-ID. Skicka sedan tillbaka det signerade exemplaret till oss i

vändande mail. Kontakta oss om du inte har Bank-ID eller önskar signera på ett annat sätt.

Ansvarig student
Ansvarig student
Ansvarig handledare

Caroline Xia
Maja Albrektson
Sara Ljungblad

[email protected]
[email protected]
[email protected]

0739 79 78 05 0737 36 41 38

Figure B.1: The consent form used for the eye tracking and questionnaire.

II
 Appendix

C
Information Form, User Study

Informationsblad
Deltagarnummer

#
Användarstudie - Att hitta till Polisens e-tjänster

Tack för att du har signerat samtyckesdokumentet.

Har du inte gjort det än? Gör det och skicka det tills oss innan du fortsätter att läsa detta dokument.

Hur går studien till?

I slutet av detta dokument finns det en grön knapp. Knappen länkar till en sida som heter realeye.io vilket är

sidan där eye-trackingen utförs. Sidan kommer att ge steg-för-steg instruktioner (på engelska) om hur du ska

gå tillväga för att påbörja uppgiften. Dessa steg involverar bland annat att man ger tillåtelse till att använda

webbkameran på datorn för att se ögonrörelserna. Skulle du få problem är det bara att kontakta oss så ska vi

göra vårt bästa att stötta dig via telefon. Studien avslutas med att du skickas vidare till en enkät där du fyller

i ditt deltagarnummer för att sedan svara på några frågor.

Vad behövs från din sida?

• Dator med webbkamera

• Internetuppkoppling

Vad ska jag tänka på när jag utför eye-trackingen?

• Se till att ansiktet är i bra ljus.

• Stäng alla andra sidor och länkar på datorn (annars kan det synas på inspelningen om man väljer fel fönster).

• Programmet kommer endast att spela in det valda fönstret och hur ditt fokus förflyttas på hemsidan (dina

ögons rörelsemönster) samt muspekarens förflyttning. Ingenting av dig, några ljud, hur du ser ut eller något

runt omkring dig kommer att lagras.

Viktig information

Starta bara eye-trackinguppgiften en gång. Uppstår det problem när du redan startat en omgång? Ring oss så

kan vi lösa det tillsammans. Då det är en betald tjänst så har vi bara ett visst antal tester, därför är det viktigt

att varje person endast gör uppgiften en gång.

Används endast till enkäten

Redo?

Du har följande deltagarnummer: #

Klicka på den gröna knappen för att påbörja studien.

Problem med eye-trackingen?

Testa dessa knep:

Använd Google Chrome eller

Starta studien Microsoft Edge som webbläsare




Du skickas automatiskt till enkäten efter eye-trackingen.

Använd privat fönster (inkognito)



Vill du göra enkäten vid ett senare tillfälle istället? Klicka här
Stäng av annonsblockerare (plugin)


Kom ihåg att detta är inte en bedömning av hur bra eller dålig Se till att inget annat program

du är på uppgiften. Det finns inget rätt eller fel sätt. Alla använder kameran samtidigt

handlingar hjälper oss att förstå hur du tänker.

Ansvarig student
Ansvarig student
Ansvarig handledare

Caroline Xia
Maja Albrektson
Sara Ljungblad

[email protected]
[email protected]
[email protected]

0739 79 78 05 0737 36 41 38

Figure C.2: The information document used for the eye tracking and questionnaire.

III
Appendix

D
Questionnaire Questions
Allmän information
Nedan kommer du svara på frågor om dig själv och dina preferenser.

Vilket är ditt deltagarnummer (som du fick i informationsbladet)?

(Lista med radioknappar)

Vad är din ålder? (Radioknappar)

• 15-29
• 30-45

• 46-55

• 56-65

• 65+

Var är du bosatt? (Radioknappar)

• Landsbygd/Småstad/By
• Mellanstad (ex. Linköping/Lund)

• Storstad (ex. Stockholm/Göteborg/Malmö)

Hur är dina språkkunskper i svenska? (Skala 1-5)

1=Förståelse, 5=Flytande

Har du några/något av följande? (Kryssrutor)

• Psykiska svårigheter (ADHD, Autism etc.)
• Fysiska svårigheter (darrningar, ledvärk etc.)

• Synnedsättning (synbortfall, gula fläcken etc.)

• Kommunikationssvårigheter (hörselnedsättning, selektiv mutism etc.)

• Dyslexi

• Inget

• Annat

Hur van är du vid att använda mobil/dator? (Skala 1-5)

1=Jag använder aldrig mobil/dator, 5=Jag använder mobil/dator till det mesta i min vardag

IV
 Appendix

Har du några/något av följande? (Kryssrutor)

• Psykiska svårigheter (ADHD, Autism etc.)
• Fysiska svårigheter (darrningar, ledvärk etc.)

• Synnedsättning (synbortfall, gula fläcken etc.)

• Kommunikationssvårigheter (hörselnedsättning, selektiv mutism etc.)

• Dyslexi

• Inget

• Annat

Vilka typer av sidor surfar du oftast på? (Kryssrutor)

• Nyheter (GP, Aftonbladet, Omni etc.)
• Webbshop (kläder, mat, saker etc.)

• Recept (Köket, Tasteline etc.)

• Fakta (Wikipedia, Nationalencyklopedin etc.)

• Sociala medier (Facebook, Twitter, Instagram etc.)

• Annat

Hur föredrar du att ta kontakt med myndigheter? (Radioknappar)

E-tjänst är en internetbaserad tjänst som används för att t.ex. boka tid eller svara på formulär
via webben.

• Besöka platsen
• E-tjänst
• Telefon
• Mail
• Vet ej
• Annat

Hur föredrar du att ta kontakt med polisen när du ska anmäla ett brott?
(Radioknappar)
E-tjänst är en internetbaserad tjänst som används för att t.ex. boka tid eller svara på formulär
via webben.

• Besöka platsen
• E-tjänst
• Telefon
• Mail

V
Appendix

• Vet ej
• Annat

Hur troligt är det att du skulle anmäla ett mindre brott via Polisens
e-tjänst (exempelvis stöld av hörlurar)? (Skala 1-5)
1=Inte alls troligt, 5=Väldigt troligt

Hur troligt är det att du skulle anmäla ett mindre brott via Polisens
telefontjänst (exempelvis stöld av hörlurar)? (Skala 1-5)
1=Inte alls troligt, 5=Väldigt troligt

Hur troligt är det att du skulle anmäla ett mindre brott via Polisens
e-tjänst? Välj max 2 alternativ ? (Kryssrutor)

• Lätt att använda

• Snabbt att fylla i

• Ärendet prioriteras

• Lätt att hitta

• Vet ej

• Annat

Uppgiften (eye-trackingen)
Nedan kommer du att få svara på lite frågor om den uppgift som du utförde på
Polisens hemsida i samband med eye-trackingen. Svara så gott du kan på frågorna,
oavsett om du hann göra klart uppgiften eller inte. Tack!
Tror du att du hittade rätt e-tjänst när du utförde uppgiften? (Radiok-
nappar)
E-tjänst är en internetbaserad tjänst som används för att t.ex. boka tid eller svara på formulär
via webben.

• Ja
• Nej
• Kanske

Upplevde du att du hittade den informationen du sökte? (Radioknappar)

E-tjänst är en internetbaserad tjänst som används för att t.ex. boka tid eller svara på formulär
via webben.

• Ja
• Nej
• Kanske

Om du saknade information, vilken? (Svarstext)

VI
 Appendix

Hur lätt/svårt var det att hitta e-tjänsten du sökte? (Skala 1-5)
1=Jättesvårt, 5=Jättelätt

Om det var någonting som förvirrade dig när du letade efter rätt e-tjänst,
vad var det? Svara gärna utförligt. (Svarstext)

Hur planerade du att lösa uppgiften när du först fick den? (Radioknap-
par)

• Använda sökfunktionen på polisens hemsida

• Leta efter den rubrik som passade bäst och utgå därifrån

• Söka via en sökmotor (ex. Google)

• Vet ej

• Annat

Hur försökte du lösa uppgiften? (Radioknappar)

• Använda sökfunktionen på polisens hemsida

• Leta efter den rubrik som passade bäst och utgå därifrån

• Söka via en sökmotor (ex. Google)

• Vet ej

• Annat

Vad för ord letade du efter på hemsidan eller sökte på i sökfunktionen?

Ex. anmäla, e-tjänst, borttappad. (Svarstext)

Jag upplevde att informationen om de olika e-tjänsterna hade... (Skala

1-5)
1=För lite text, 5=För mycket text

Jag upplevde att informationen om de olika e-tjänsterna var.... (Skala

1-5)
1=Irrelevant, 5=Relevant

Jag upplevde att det var tydligt vilka brott som kunde anmälas vid varje
e-tjänst (Skala 1-5)
1=Håller inte med, 5=Håller med

Jag upplevde att begränsningen på en minut för att hitta e-tjänsterna

var... (Skala 1-5)
1=För lite tid, 5=För mycket tid

VII
Appendix

Lade du märke till denna knapp på startsidan? (Radioknappar)

• Ja
• Nej

• Kanske

Har du några synpunkter på studiens upplägg? (Svarstext)

Finns det något annat du vill tillägga? (Svarstext)

VIII
 Appendix

E
Interview Guide, Accessibility Expert
Syftet med intervjun
Få en förståelse över (Polisens) tillgänglighetsarbete och hur vi kan använda den förståelsen för
att göra vårt arbete tillgängligt.

Övergripande
• Berätta om din arbetsroll - vad gör du och hur länge har du gjort det?
• Hur skiljer sig din roll från dina kollegors?

• Berätta om ett vanligt projekt och hur du brukar arbeta? Tillvägagångssätt.

Tillgänglighet generellt (tillvägagångssätt)

• Vilka “metoder” använder du? Checklistor? WCAG?
• Gör ni tester för att kolla tillgängligheten? Hur går sådana tester i så fall till? Automatis-
erade och/eller manuella tester?

• Har du testad någon plug-in liknande Funkify (förklara), vad anser du om liknande pro-
gramvara i så fall? Är det något du tror kan hjälpa oss eller rekommenderar du någon
annan metod?

• Hur lång är processen från ett identifierat fel till åtgärd på ett ungefär? Hur upptäcks fel?
Rapportering? Input från annat håll?

• Vad skulle du säga är de vanligaste misstagen (inom tillgänglighet) som görs?

• Vad för handlingar rekommenderar du/ni ofta att prioritera när man gör en tillgänglighets-
förändring i en organisation? Ex. färg/text.

Organisationen & E-tjänsterna

• Vad har du, från ett tillgänglighetsperspektiv, noterat angående navigationen till e-tjänsterna?
• Kan du ge exempel på förändringar som du föreslagit i denna organisation/e-tjänsterna?
Vilka var de största/viktigaste enligt dig?

• Finns det saker som inte ändrats ännu men som bör ändras?

Avslut
• Har du tips på några bra källor (hemsidor, böcker, föreläsare)?
• Finns det något annat du tycker att vi bör veta för att kunna genomföra vårt arbete?

• Något mer du vill tillägga?

Tack för din tid!

IX
Appendix

F
Interview Guide, UX Design Expert
Syftet med intervjun
Få en förståelse över hemsidan och hur den fungerar idag, bakgrunden till designen, strukturen
och layouten samt eventuella svårigheter kring navigationen på den.

Introduktion
• Berätta om din arbetsroll - vad gör du och hur länge har du gjort det?
• Berätta om ett vanligt projekt och hur du brukar arbeta? Tillvägagångssätt.

• Vilken designprocess brukar du följa på ett ungefär? Vanligaste metoderna.

Uppbyggnad/struktur på hemsidan
• Vad är tanken kring hur hemsidan är uppbyggd idag? Strukturen?
• Har man undersökt användarnas mentala modeller (ex. hur användaren tänker att de ska
hitta till olika e-tjänster)? Eller hur har besluten tagits?

• Vad har ni utgått ifrån när ni bestämde er för att använda de begrepp ni använder idag?
Ex. ”komplettera anmälan” istället för uppdatera/ändra/ta bort eller liknande.

• Vad gör ni för arbete idag för att göra sidan mer användbar/tillgänglig/enkel?

• Hur får ni in tankar och kommentarer från användare? Mail? Metoder? Tester?

• Hur upptäcks eventuella problem/fel på hemsidan förutom från användare?

Navigation & E-tjänsterna

• Vad för sorts data har ni kring användarnas rörelsemönster?
• Vad för problem har ni sett att det finns kring hemsidan? Kring navigationen? Har ni
någon idé på hur det skulle kunna lösas?

• Vad har det kommit fram för information kring navigationen till e-tjänsterna under ert
arbete?

• Har ni någon idé på hur det skulle kunna lösas?

Avslut
• Har du tips på några bra källor (hemsidor, böcker, föreläsare)?
• Finns det något annat du tycker att vi bör veta för att kunna genomföra vårt arbete?

• Något mer du vill tillägga?

Tack för din tid!

X
 The 'Good Enough' Gale

(5) (8) Not

"Overconfident" "Overconfident"

This person aims to read just enough For this person, it's important to make a choice that most likely
Sometimes, the person might become
information to make an informed decision. The directs the user towards the goal. However, it must be time
'overconfident' and believe that they did something
user doesn't see any reason for reading more efficient thus they don't discover all possible actions and are
correct even though it was incorrect.
information than necessary. When reaching a therefore okey with the risk of missing the most perfect option.
Prefers to communicate with companies via e-​
button, link or service that suits the goal, the
services.
user clicks it without scrolling further.
Företagskontakt: Företagskontakt:
Prefers to communicate with the police via
Företagskontakt:
mail (2) e-​tjänst (9)
telefon (1)

When visiting a website, the person only look telephone.

for the words that they believe will get them More likely to report minor cases to the police via e-​
Poliskontakt: Poliskontakt: Poliskontakt:
towards the goal. When the keyword is found, mail (0) telefon (9) e-​tjänst (3)
services than the telephone. (2) Mer benägen (7) Mer benägen (4) Samma
benägenhet att
att anmäla att anmäla
använda telefon
mindre brott via mindre brott via
the person is satisfied. och e-​tjänst vid
telefon än e-​ e-​tjänst än anmälan av
tjänst telefon mindre brott

This person can be frustrated when the word

Enough’ Gale from Smashing Ideas (2017).

G

or function they are looking for is nowhere to

be found on the website. The person might
also get frustrated when it takes a long time When it comes to preferences of using an e-​service, this
to find reach the goal. person prioritizes the easiness of using it and then the
easiness of finding it as well as fast to fill in.
Sometimes, the person might become
'overconfident' and believe that they did
something correct even though it was
(11) Lätt (6)
incorrect. (6) Lätt (1) Ärendet
att prioriteras
Snabbt
att hitta
använda att fylla i
The person prefer to contact companies by
using the telephone. However, the person is
more likely to use e-​services rather than the
phone when reporting a case to the police.
Often visit social media platforms, news sites and different
When it comes to preferences of using an e-​ This person can be frustrated when the word or function they sites with facts such as Wikipedia.
service, this person prioritizes the easiness of are looking for is nowhere to be found on the website. The When the person has decided to find information by
using it and then the easiness of finding it as person might also get frustrated when it takes a long time to looking for specific headings or searching for the content, it
well as fast to fill in. find reach the goal. is quite unlikely that the procedure will change. It's more
likely that the person will continue with the same procedure
(4) while frustration builds up.
(3) Hitta (4) (2)
Action (3)
snabbt (2) frustrerad (1)
Menu Icons Sök frustrerad över att inte frustrerad
över att inte hitta rätt över att det
hitta rätt ord funktion tog mkt tid
Läste inte texten Kollade inte Kollar inte Valde
efter igenom texten Läser tills hen surfar (12) Samma (1) Annat
igenom surfar på: surfar på: surfar på:
länkarna/gröna under hittat den länk ikonen på surfar på: tillvägagån tillvägagån
startsidan
rutan på förlustanmälan, den söker, sociala nyheter på: webbshop
utan tar första startsidan gssätt som gssätt än
förlustanmälanssi tryckte på länken recept (5)
inget under medier (11) (5)
dan direkt bästa direkt, 5s (9) fakta (6) plan plan
Behavioral Archetype, the ’Good Enough’ Gale

Figure G.3: The filled in template for creating the behavioral archetype ’Good

XI
Appendix
XII
Appendix

The 'Careful' Charlie

Poliskontakt: Poliskontakt: Poliskontakt:

besök (1) telefon (4) e-tjänst (3)
(2) (7) Not
This person aims to make correct decisions For this person, it feels very important to make the right choice "Overconfident" "Overconfident"

without drawing any drastic conclusions. Before from the beginning. To be able to do this, the person usually
making a decision, it is important to double- considers all information that is presented before it takes action. Företagskontakt: Företagskontakt:
e-tjänst (5) telefon (4)

check all the information. Even though the (7) Mer benägen (1) Samma (1) Mer benägen
benägenhet att
att anmäla att anmäla
använda telefon
mindre brott via mindre brott via
och e-tjänst vid
answer is right in front of the person, there is a e-tjänst än anmälan av telefon än e-
telefon mindre brott tjänst
huge need to inspect all the other options
before feeling satisfied and settling with the

Charlie from Smashing Ideas (2017).

first one.
The person rather reads too much information,
than too little. This person is also aware of the
time it takes to find the information. When
H

visiting a website, the first thing they do is to

scan all visible information and scroll down
showing what's out of sight.
When using an e-service, it is highly valuable
that it is easy to use and find. One of the major
frustrations is when the person scans for a
word on the website and it is nowhere to be
found.
The person has no preference regarding (9) Lätt (1)
(6) Lätt (2) Ärendet
att prioriteras
Snabbt
contacting companies or the police by either e- att hitta
använda att fylla i
service or using the telephone. However, the
person is more likely to use e-services rather
than the phone when reporting a minor case.
This person is used to technical things such as computers. In the
This person's frustration is when they scan for a word on the
free time, common websites to visit are social media platforms,
website and it is nowhere to be found. The person might also
news sites and different sites with facts such as Wikipedia.
feel frustrated when visiting a website with too much
information on the home page.
When the person has decided to find information by looking for
specific headings or searching for the content, it is quite unlikely
that the procedure will change. It's more likely that the person
will continue with the same procedure while frustration builds
(3) (2) Läste all (3)
(4) (1) Känner sig
up.
(2) (1) Hitta frustrerad över att
text om e- Skannade/läste frustrerad
Action det är för mycket surfar (7) Samma (2) Annat
tjänsterna igenom hela över att inte surfar på: surfar på: surfar på:
saker på första
snabbt startsidan sidan
surfar på: tillvägagån tillvägagån
Menu icon (även under) hitta rätt ord sociala nyheter på: webbshop
recept (2) gssätt som gssätt än
medier (7) (5) fakta (5) (3)
plan plan
Behavioral Archetype, the ’Careful’ Charlie

Figure H.4: The filled in template for creating the behavioral archetype ’Careful’
 Appendix

I
Flowchart

Figure I.5: The first question, determining if the user can use the e-services.

Figure I.6: What do you want to report?

XIII
Appendix

Figure I.7: Report credit card fraud.

XIV
 Appendix

Figure I.8: Report parking damage.

XV
Appendix

Figure I.9: Report damage.

XVI
 Appendix

Figure I.10: Report a theft.

XVII
Appendix

Figure I.11: Report a loss.

XVIII
 Appendix

Figure I.12: Complementary questions.

XIX
Appendix

J
Usability Test with Experts from Contact Center
Scenarion

1. Pelle har tappat bort sitt körkort och ska anmäla detta till polisen
2. Elsa har gjort en förlustanmälan på sin bortsprungna hund Harry. Hon har nu hittat Harry
och ska meddela detta till polisen.
3. Alfred har förlorat sin cykel och misstänker stöld. Han ska nu göra en polisanmälan.

Diskussionsfrågor
• Vad har ni för arbetsuppgifter och hur ser ert arbetssätt ut?
• Vad ställer ni för frågor till medborgarna idag för att förstå vilket brott det handlar om?
Vilka inledande frågor? Vilka frågor är avgörande för att hamna på rätt område?

• Vilka brott brukar medborgarna oftast ta fel på eller blanda ihop enligt er (ex. stöld istället
för förlust)? Tror ni att vår lösning idag hjälper till med det? Upplever ni att dessa frågor
kommer att guida medborgarna till rätt tjänst?

• Finns det någonstans i guiden/processen där ni tror att medborgarna kommer att ha svårt
att komma vidare? Vilka frågor använder ni för att komma vidare i liknande fall?

• Hur fungerar prioriteringen av kontrollfrågorna? Ex. person som har skyddad identitet men
också varit med om ett brott utomlands.

• När vi gjorde användarstudien såg vi att medborgarna hade svårt att hitta till komplet-
tera/ändra anmälan. Är det något ni har märkt också? Har ni några tankar kring placerin-
gen av den frågan? Bra eller dåligt att ha “komplettera anmälan” redan i tidigt stadie?

• Finns det något annat ni vill tillägga?

XX
 Appendix

K
Think Aloud & Interviews with Users
Inledning (Scenario)
Föreställ dig att du har varit med om ett brott och behöver ta kontakt med Polisen. Du väljer att
använda deras hemsida. Vi kommer nu att läsa upp ett scenario på vad som har hänt.

Uppgift 1: Du har åkt buss och tappat bort ditt körkort. Du har även varit i kontakt med
resebolagets hittegods och de har inte funnit något där. Nu ska du anmäla ditt borttappade
körkort via polisens hemsida. Stressa inte. Lycka till! Uppdaterad fråga: Någon har stulit ditt
körkort. Nu ska du anmäla detta via polisen hemsida. Stressa inte. Lycka till!

Uppdaterad fråga: Någon har stulit ditt körkort. Nu ska du anmäla detta via polisen hemsida.
Stressa inte. Lycka till!

Observation

• Hittar användaren rätt på startsidan/mellansidan?

• Scrollar personen på startsidan och mellansidan?
• Klickytor - behöver personen klicka flera gånger? Klickar den utanför?
• Storlek på text - kan personen läsa vad som står?
• Förstår användaren designelementens funktioner?
• Dras uppmärksamheten till de element som personen ska använda vid rätt tidpunkt?
• Vilken behavior archetype?
• Hur lång tid? (Från startsida till rätt e-tjänst)
• Vilken väg tar personen?
• Hamnar personen till rätt e-tjänst?

Extrauppgifter
Uppgift 2: Din hund Harry anmäldes försvunnen förra veckan. Du har nu hittat Harry och vill
ta bort din anmälan via polisens hemsida. Stressa inte. Lycka till!

Uppgift 3: Din kanin har sprungit bort och du ska anmäla detta via polisens hemsida.

Demografiska frågor

• Vad är din ålder?

• Har du någon funktionsvariation? Synnedsättning, darrningar, autism, hörselnedsättning
• Hur van är du vid att använda mobil/dator?
1 = aldrig, 5 = använder till det mesta i vardagen
• Vad är viktigast för dig när du använder en e-tjänst? Välj max 2.
(Lätt att använda, Snabbt att fylla i, Ärendet prioriteras, Lätt att hitta, Vet ej)

Frågor om guiden

XXI
Appendix

• Tror du att du hittade rätt e-tjänst när du utförde uppgiften?

• Upplevde du att du hittade den information du sökte? Upplevde du att du hittade den
information du sökte?
• Hur planerade du att lösa uppgiften när du först fick den?
• Hur löste du uppgiften?
• Hur svårt/lätt var det att hitta e-tjänsten du sökte? 1 = väldigt svårt, 5 = väldigt lätt
• Om det var någonting som förvirrade dig när du letade efter rätt e-tjänst, vad var det?
• Vad för ord letade du efter på hemsidan eller sökte på i sökfunktionen? Ex. anmäla, e-tjänst,
borttappad.
• Jag upplevde att det var tydligt vilka brott som kunde anmälas vid varje e-tjänst. 1 =
håller inte med, 5 = håller med
• Hur upplevde du navigationen/uppgiften?
• Fanns det någonting som du upplevde som frustrerande eller svårt? Vad?
• Kan du nämna någon gång då du var fundersam eller förvirrad över vad du skulle göra?
(Vill besvara: Hur är strukturen? Logisk/ologisk?)
• Hur upplevde du tidsåtgången, tog det lagom mycket tid eller för lite/mycket? Upplevde
du att det var lagom många steg i guiden?
• Hur kändes frågorna? Förstod du skillnaden mellan de olika alternativen?
• Hur kändes presentationen av resultatet? Är det tydligt vad du skulle göra eller saknas
någon tydligare information?
• Allmänt för mycket/lite text?
• Vid vilka tillfällen skulle du föredra att använda guiden?
• Vid vilka tillfällen skulle du inte föredra att använda guiden?
• Saknas något?

XXII