DESIGN OF A WEBSITE FOR THE WORLD ANTI-BULLYING FORUM - A WEBSITE WITH FOCUS ON USABILITY AND INCLUSION - DIVA
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Design of a website for the World Anti-
Bullying Forum
A website with focus on usability and inclusion
Caisa Sixtensdotter
Civilingenjör, Teknisk design
2020
Luleå tekniska universitet
Institutionen för ekonomi, teknik och samhälle
MASTER THESIS PROJECT Design of a website for the World Anti-Bullying Forum - A website with focus on usability and inclusion Caisa Sixtensdotter 2020 Supervisors: Åsa Wikberg-Nilsson & Karin Bellander Reviewer: Amanda Bertilsson Examiner: Åsa Wikberg-Nilsson Industrial design engineering Luleå University of Technology
CIVILINGENJÖR I TEKNISK DESIGN Master of Science Thesis in Industrial Design Engineering Design of a website for the World Anti-Bullying Forum - A Website with focus on usability on usability and inclusion © Caisa Sixtensdotter Published and distributed by Luleå University of Technology SE-971 87 Luleå, Sweden Telephone: + 46 (0) 920 49 00 00 Cover: Illustration by Caisa Sixtensdotter Printed in Luleå Sweden by Luleå University of Technology Reproservice Luleå, 2020
Acknowledgements
First and foremost, I would like to thank Friends for putting the trust in me to be
a part of their future development and for letting me become part of their small
family for a couple of months.
I would like to acknowledge my supervisor at Friends, Karin Bellander, for
supporting me during what has been a tough time for us all. You have provided
me with tips and information along the process and have been their to support me
even at a distance.
I would like to dedicate a special thanks to my flatmate, Camilla Sundqvist,
who has been an invaluable support during a time of isolation. You have been
there through thick and thin, listening to all my ideas, given me feedback and
participated in endless brainstorming sessions and discussions.
I would also like to acknowledge my supervisor at Luleå University of Technology,
Åsa Wikberg-Nilsson, who has, as always, been of great support. You have trusted
me in my work and provided me with good guidance.
Lastly, I would like to thank my mother and father for supporting me along the
way, and believing in me in a way only parents can. This is for you!
Caisa Sixtensdotter
Abstract Since 1997 the non profit organization Friends has worked towards a world where no child should become victim to bullying. In 2017 Friends initiated the internation- al forum World Anti-Bullying Forum where researchers and practitioners can meet and share knowledge. A next step in the development of the forum is to develop a website that can be used for the purpose of establishing the forum further and to create a meeting place during the years between each forum. This master thesis deals with the development of a prototype for a permanent website for the World Anti-Bullying Forum. The main focus of the project has been to create a user-friendly and inspiring platform for the two main target groups, re- searchers and practitioners. In order to achieve this, both literature and creative methods have been used and the work has followed a modified version of the design process Human-Centered Design Approach by IDEO. In order to follow Friends wishes for a website that is as- sociative with their brand, focus on visual communication and illustrations has been key. The project resulted in a user-friendly and vivid website designed for the two main target groups. The website is a platform designed for information and registration regarding upcoming forums as well as a place to find facts and inspiration. The website is associative with the Friends brand while its colour choices and elements indicate that the forum is also something of its own. Key words: Industrial design engineering, user-centered design, visual communi- cation, interaction design
Sammanfattning Sedan 1997 har den ideella föreningen Friends arbetat för en värld där inget barn ska utsättas för mobbning. År 2017 initierade Friends det internationella forumet World Anti-Bullying Forum där forskare och praktiker kan mötas och dela kunskap. Ett nästa steg i utvecklingen av forumet är att ta fram en hemsida vilken kan använ- das i syfte att etablera forumet ytterligare samt för att skapa en mötesplats under de år forumet inte äger rum. Detta examensarbete behandlar framtagningen av en prototyp till en permanent hemsida för World Anti-Bullying Forum. Huvudfokus vid arbetet har varit att skapa en användarvänlig och inspirerande plattform för de två huvudsakliga målgrupper- na forskare och praktiker. För att åstadkomma detta har såväl litteratur som kreativa metoder använts och arbetet har följt en modifierad version av designprocessen Human-Centered De- sign Approach av IDEO. För att följa Friends önskemål om en hemsida som går att koppla till deras varumärke har ett stort fokus lagts på visuell kommunikation och illustrationer. Arbetet resulterade i en användarvänlig och livlig hemsida där de två målgrupperna kan mötas på ett bra sätt. Hemsidan är en plattform designad för att läsa på och reg- istrera sig för kommande forum samt en plats att hitta fakta och inspiration. Hem- sidan går att koppla till Friends varumärke samtidigt som dess färgval och element visar på att forumet också är något eget. Nyckelord: Teknisk design, användarcentrerad design, visuell kommunikation, interaktionsdesign
Content
1. Introduction 5 Final results
1.1 Background 2
5.2 Home Page 58
1.2 Research questions 2
5.3 Secondary navigation 59
1.3 Stakeholders 3
5.4 Resources 62
1.4 Project objectives and aims 3
5.5 The benefit of attending WABF 63
1.5 Project scope 3
5.6 Illustrations 64
2. Context 6. Discussion
2.1 Friends 5
6.1 Theoretical framework 68
2.2 The World Anti Bullying Forum 5
6.2 Relevance 71
2.3 Bullying 5
6.3 Reflection 72
2.4 Existing solution 7
6.4 Conclusion 73
2.5 Benchmarking 7
References 76
3 Theory
3.1 Industrial design engineering 13
3.2 Website design 13
3.3 Personas 23
3.4 Visual communication 24
4 Method
4.1 Design process 31
4.2 Project planning 32
4.3 Literature review 33
4.4 Understanding and Defining 33
4.5 Exploration and ideation 43
4.6 Concept development 46
4.7 Detail development 50
List of Appendix Appendix A - Interviews List of figures Figure 1. Swedish railways home page 8 Figure 2. Hello Monday home page 8 Figure 3. Frog Design home page 8 Figure 4. Eat Forum navigation 9 Figure 5. Dog studio home page 9 Figure 6. Friends navigation 10 Figure 7. Friends example illustration 10 Figure 8. Friends colour palette 10 Figure 9. Illustration of navigation segments 15 Figure 10. Fully connected navigation model 16 Figure 11. Multi-level navigation model 16 Figure 12. Proximity 18 Figure 13. Similarity 19 Figure 14. Continuity 19 Figure 15. Closure 19 Figure 16. Illustration of the chosen design process 31 Figure 17. Gantt chart 32 Figure 18. Friends wishlist 35 Figure 19. First navigation draft 36 Figure 20. Researcher persona 40 Figure 21. Practitioner persona 41 Figure 22. General user persona 42 Figure 23. Selection of ideas from brainstorming 44 Figure 24. Colour palette 45 Figure 25. Concept 1 47
Figure 26. Concept 2 48 Figure 27. Idea from Sandbox Play 51 Figure 28. Example of change made during Sandbox Play 52 Figure 29. Change made to the primary navigation 53 Figure 30. Change made to the Home page 53 Figure 31. Example of change made based on a user test 55 Figure 32. Primary navigation 57 Figure 33. Home page 58 Figure 34. Secondary navigation resources 59 Figure 35. Secondary navigation tabs 60 Figure 36. Secondary navigation tabs 60 Figure 37. Highlighted deadlines 61 Figure 38. Resources 62 Figure 39. Quotes from the forum 63 Figure 40. The benefit of WABF 64 Figure 41. Illustration Previous years 65 Figure 42. Illustration Tools & tips 66 Figure 43. Illustration Articles 66
1. Introduction
11. Introduction
The non profit organization Friends has since 1997 worked towards a world where
no child should become victim of bullying, and in 2017 they initiated the interna-
tional forum World Anti Bullying Forum. The World Anti Bullying Forum, WABF,
is a conference where researchers and practitioners from all over the world can meet
and share knowledge on the subject. The conference is held every two years but a
permanent website for the forum has not yet been created.
One step in developing the forum further is to establish a website that can be used
when the forum is held, but also in the years between. Friends wanted help with
finding a creative and user friendly way of presenting information to participants
and non participants, and that is where this master thesis project comes in.
Welcome to this Master thesis report in industrial design engineering at Luleå
university of technology. The master thesis project was done together with the non
profit organization Friends, in Stockholm, between January and June 2020.
1.1 Background
The World Anti-Bullying Forum is an international forum initiated by the non profit
organization Friends. The forum is held every two years, and is mainly a conference
for practitioners and researchers, working together to decrease bullying in schools.
Currently, the forum is lacking a website where the two different target groups can
communicate and get information about the conference, and this is where this mas-
ter thesis begins.
The World Anti-Bullying Forum is a new concept, and the forum has only been held
twice. At this moment, Friends is still developing WABF, and there are areas that
need development for which they do not have the competence within the Friend
team.
1.2 Research questions
These are the research questions defined for the project:
1. How could a website for the World Anti-Bullying Forum be design to achieve an
intuitive and user friendly interface for researchers and practitioners?
22. How could the design of the website lead to a faster exchange of knowledge
between practitioners and researchers and therefore lead to less of a gap between
research and practice?
1.3 Stakeholders
User centered design requires that the user’s needs are at centre, but the project has
also had other stakeholders whose interest has been taken in consideration during
the design process.
The primary stakeholder of the master thesis is Friends that will be the receiver of
the website prototype. The website prototype will stand as a base for the WABF
website. The website might result in positive exposure for Friends and more partici-
pants during the World Anti Bullying Forum.
Secondary stakeholders are the participants (researchers and practitioners) at the
World Anti-Bullying forum that will be the primary users of the website. The web-
site should give the users inspiration, information and a chance to interact.
Tertiary stakeholders are the public that might feel the positive impact of the forum
and the associated website.
1.4 Project objectives and aims
The aim of this project is to create a prototype of a website for the World Anti-Bul-
lying Forum initiated by Friends. The main goal is to create a user friendly website
meant to inspire and inform without creating any hierarchy between practitioners
and researchers while building a bridge between disciplines.
1.5 Project scope
This master thesis project was performed within a 20 weeks time frame consisting of
full-time work. The project was carried out in Stockholm, Sweden for the non-profit
organization Friends.
Due to the nature of the Industrial design engineering program at Luleå Univer-
sity of Technology, the project was limited to the design and prototype of a future
website, while coding and launching the website was not part of the project scope;
Neither was a mobile version of the website.
32. Context
42. Context
This chapter describes the current situation and relevant research linked to this. The
chapter also deals with existing solutions relevant for the project.
2.1 Friends
Friends is a non-profit organization working for a world where no child should
become victim of bullying. Friends work is interdisciplinary, with a combination of
established practice and current research. Their work is based upon the Swedish
education act where it is stated that ”education should rest on a scientific basis and
proven experience” (Riksdagen, 2010) and they believe that sharing knowledge and
experience is key. They provide research-based tools to adults with a focus on pre-
ventive solutions. (Friends, n.d)
2.2 The World Anti Bullying Forum
The World Anti Bullying Forum, WABF, is an international forum initiated by
Friends in 2017 with the goal to bring practitioners and researchers together against
bullying. The forum is held every two years where the participants have the opportu-
nity to share knowledge and create dialogue in areas related to bullying. With WABF
Friends want to facilitate the dissemination of research in an attempt to bring re-
search and practice closer together.
In the forum of 2019, 700 delegates from 48 different countries participated. The
forum consisted of 13 keynote presentations made by researchers, 130 oral pres-
entations, 89 poster presentations and 36 workshops. The WABF newsletter reaches
3500 recipients.
2.3 Bullying
In the Friends report of 2019 it is stated that almost one fourth of all students in
the grades 3 to 9 feel lonely at school. In the same survey by Friends, more than one
fourth of the students in middle school state that they have been victim of violations
during the past year and of these 36 percent answered that they have been victim to
bullying. (Loodberg & Warg, 2019)
5These are the last lines in the diary of 13 year old Vijay Singhs from Manchester.
On Sunday the same week, he was found dead, hanging from the staircase of his
home.
” Monday: my money was taken.
Tuesday: names called.
Wednesday: my uniform was torn.
Thursday: my body pouring with blood.
Friday: it’s ended.
Saturday: freedom
- Barbara Coloroso (2010, p. 1)
Being a victim of bullying can lead to bad self esteem, anxiety, depression and even
suicidal thoughts (Loodberg & Warg, 2019). A study for the Swedish National Agen-
cy for Education showed that a long time exposure of bullying can lead to long-time
exclusion in the future (Flygare & Johansson, 2013). In a collaboration between
Friends and Örebro university a study showed that students who state that they feel
lonely at school run a three times higher risk of getting failed grades the same year
(Loodberg & Warg, 2019).
One part of bullying is harassment and violations. According to Friends, Violations
in the school environment is often linked to the seven grounds for discrimination:
sex, gender identification or gender expression, ethnicity, religion or other belief,
disabilities, sexual orientation or age. Anyone can be a victim of harassment, but
studies have shown that student who feel alone, LGBT-youths and students with a
neuropsychiatric disability are more affected than others (Loodberg & Warg, 2019).
In the Friends report of 2019 it is suggested that a fifth of students in grades seven
to nine don’t know where to turn or who to talk to if they become victim of bullying
online. It is also suggested that detection, prevention and action regarding harass-
ment or violations is always the responsibility of adults, whether it happens online
or at school. They suggest that it is important to investigate what causes and what
prevents harassment in order to create an organization that foster all humans equal
worth (Loodberg & Warg, 2019).
The importance of how adults act is emphasized in the Friends report. It is stated
that trusting relationships is key to enable the possibility of students choosing to talk
to an adult if they are a victim of bullying. It is common for kids to choose to talk to
6a friend instead of an adult and it is also common that the trust in adults decreases
as children age. In grades 6 to 9, 21 percent of bullying victims have not told any-
one about their situation, and in grades 7 to 9 almost 50 percent feel that teachers
at school sometimes, rarely or never act when they notice ongoing harassment of a
student (Loodberg & Warg, 2019).
2.4 Existing solution
In the forum of 2019, the National Anti-Bullying Research and Resource Centre,
ABC, hosted the forum in Dublin. ABC created a temporary website specifically
for the forum of 2019, www.wabf2019.com. This temporary website is specifically
targeted to the attendees, and therefore most of the information is regarding WABF
2019. Friends requested that the website prototyped in this master thesis project
would contain the elements of the temporary website, but also expressed that there
where a lot missing in order to make it permanent.
The temporary website is built upon drop down menus and no secondary naviga-
tion. Some information appears twice, and there is no information about Friends
on the site. The color palette is discreet with most of its colours deriving from the
photos added.
2.5 Benchmarking
Benchmarking was made with two purposes; to gain creative and visual inspiration
from completely different websites, and to gain information of how similar websites
has built their navigation systems. The websites were compared on two criteria;
usability and aesthetics. On all websites the same tasks where performed to be able
to get a fair picture of their usability;
• Explore the home page
• Finding information about the company/organization
• Understanding their mission
• Finding information when questions occur (FAQ/contact)
Some of the personal favorites are listed in figure 1-5.
7The website of the
Swedish Railways, SJ, is
both user friendly and
aesthetically pleasing.
They use a question
mark on their home
page as a shortcut to
FAQ (See figure 1).
Figure 1. Swedish railways home page
Hello Monday, not really
user friendly in my opin-
ion, but definitively some-
thing else. The website
is full of animations and
illustrations that bring
something extra to the
table (See figure 2).
Figure 2. Hello Monday home page
Frog Design uses colour
coding in their navigation
(See figure 3), with a drop
down menu in the same
colour as the page you
will enter. The website is
in my opinion both intu-
itive and exciting at the
same time.
Figure 3. Frog Design home page
8Eat Forum was used as an
inspirational source for how
another forum has chosen
to present their work. The
website is mainly navigated
by a primary navigation. It
is simple yet aesthetically
pleasing, but in my opinion
hard to navigate (See figure
Figure 4. Eat Forum navigation 4).
Dog studio is probably
the least user friendly of
the websites found during
the benchmarking, but
still one of the websites I
have returned to the most
solely for the experience.
It is animated all the way
through, with text that re-
ally ’pop’ and colours that
are both down to earth
Figure 5. Dog studio home page
and extreme at the same
time (See figure 5).
Websites such as SJ and Frog Studio where good inspirational sources when looking
at how a website can be user friendly, and still aesthetically pleasing, while websites
such as Hello Monday and Dog Studio where good inspirational sources for the
more creative part of the project.
9Analyzing Friends website was also part of the benchmarking. This was made to
get a good sense of their visual identity as well as how they have chosen to present
information to users.
The navigation on Friends website differs from many other websites since their
secondary navigation is part of the primary navigation (See figure 6). When a user
choose to enter a site, they have to return to the navigation to enter another. Friends
website contain over 70 different pages, all accessible from the same navigation.
Figure 6. Friends navigation
The visual identity of Friends consists of 7 bright colours, both saturated and desat-
urated (See figure 8). Friends use photos and illustrations, where their illustrations
only carry colours from their colour palette. Their illustrations are quite neutral with
little to no emphasis on gender (See figure 7).
Figure 8. Friends colour palette
Figure 7. Friends example illustration
10They mainly communicate their message via text and photos, while their illustra-
tions are a more prominent element in materials such as their annual Friends report.
Their colour palette is mainly used on headlines, to highlight information or to
colour single elements on the website while the background is kept white.
Friends, however, is not only their logo and visual identity. Their website, and all
other material they produce, has the primary goal to inform and help others. This
can be seen throughout their website, where you are immediately met by the tagline:
” Always act for each child’s safety
and the mission statement;
” Friends is a non-profit organization for
children’s rights that wants to create a
world without bullying. Where every child
feels loved and respected. Where no one
falls asleep sad, wakes up with anxiety or
leaves home with their stomach in knots.
Their entire brand is based upon providing information and tools for grownups, and
a posibility to interact with employees at friend for children who need support. They
provide a varaity of materials such as online courses, inspirational lectures and re-
cent research whitin the area, all located on their website. They also use their social
media platform as a way to communicate their message.
113. Theory
123 Theory
In this chapter, relevant theory for the project is presented, such as website design,
personas and visual communication.
3.1 Industrial design engineering
According to Wikberg Nilsson, Ericson and Törlind (2016) most of what we see
around us is designed in one way or another. They suggest that design has been a
part of human kind for as long as we have been aware of the world around us, and
that ‘design’ has been a way to improve and/or simplify the world we live in.
” ...the interaction between human kind and her surroundings.
- Wikberg Nilsson, Ericson and Törlind (2016, p. 10)
Sometimes design is about the aesthetics of a product, while it in other situations it
is about the process and the activity itself (Wikberg Nilsson et al., 2016). They sug-
gest that to be able to produce a product or service that is intuitive and understand-
able for the user, it is important to be aware of both form and function. That it as a
designer is important to have an understanding and empathy for the user, as well as
an open mind for changing old patterns.
Wikberg Nilsson et al. (2016) suggest that design is not only about products, but
about all interaction between human and her surroundings. Interaction with ser-
vices, systems or products. They suggest that in design meaning, significance and
communication is important. They describe communication as exchanging informa-
tion of some sort, and emphasize that visual communication is an important part of
presenting a product or system.
3.2 Website design
In order to design a user friendly website, the knowledge of User experience-design
and Web usability had to be improved. Subjects such as important elements, things
’not to do’ and user testing will be investigated in this chapter.
133.2.1 The Home page
According to Krug (2014) the home page should accomplish a few things:
• It should clearly state the site identity and mission. In other words a user should
get a good sense of what kind of website this is and what it is for.
• The home page should include a good overview of the navigation of the site.
This should tell you what you can do and find on this website, and how to get
there.
• It should intrigue the user enough to make the user stay on the site and choose
to read more. Krug (2014) suggests to look at the design of a home page like the
cover of a magazine.
• It should highlight new, popular and/or the best content.
• It should include shortcuts when necessary and suitable. This could for example
be links to sign in or register.
• It should create a good first impression, and establish credibility and trust.
• It should expose you to things you are looking for, but also things you are not
looking for but might benefit off or have interest in. Krug (2014)
It can be debated whether it is as important with a home page as users can find
direct links to pages on the website via for example a search engine or a link in an
email. Krug (2014) agrees with this to some extent, but also argues that many users
tend to orient back to the home page at some point to further get a sense of what
the website has to offer more than the specific page they visited.
Krug (2014) suggests that a tagline is an important element on a Home page. Ac-
cording to Krug (2014) a tagline is a short pithy phrase characteristic for the compa-
ny, but not a mission statement. This, if used, he suggests should appear right below,
above or next to the site ID.
Krug (2014) emphasizes the importance of using as much space as necessary, but
not more than necessary. According to him, it is important to understand that not all
users know what the site is, and therefore it is important to use space to explain the
meaning of the site. Although, he also states that on most sites it is not necessary to
use a lot of space to explain this meaning. ”Keep is short - just long enough to get
your point across” Krug (2014). To make sure that you get your point across, Krug
(2014) suggest that the home page is one of the most important things to test on a
website, and that it should be tested on users outside the organization.
143.2.2 Navigation
Krug (2014) compares web navigation with navigation in a store. He states that the
moment you walk in you tend to look for clues and signs of where to go. He sug-
gests that a user is usually on a mission to find something, and therefore it is impor-
tant with a clear and consistent navigation system. Krug (2014) states that a well
composed navigation system tells us what is where, how to use the site and gives us
confidence in the company standing behind the site.
Krug (2014) divides navigation on the web in segments: Site ID, sections, utilities
and page name (See figure 9).
• The site ID lets you know that you are still on the same website. It should be
prominent, but not dominant.
• The sections are the primary navigation on a website, and the top level of a
websites hierarchy. The sections could include a secondary navigation, reached
by either pointing at the section name to reveal a dropdown menu or by clicking
on the section name to reveal a secondary navigation on the section page.
• Utilities are important elements that the user should be able to reach no ma-
ter where they have navigated to on the website. These could for example be a
search function or a register button.
• The page name is the heading revealed when clicking on a section. The page
name should be the same as, or very close too, the section name. It should be so
prominent that the user is sure that this heading counts for the entire page. Krug
(2014)
Site ID
Utilities
Sign in Track your order Stores
COMPANY NAME
Primary navigation
TROUSERS TOPS DRESSES SHIRTS SHOES BAGS
DRESSES
Secondary navigation
MINI DRESSES MIDI DRESSES MAXI DRESSES
Quick view Quick view Quick view Quick view Quick view Quick view
Associative and inline navigation
Figure 9. Illustration of navigation segments 15Tidwell (2011) uses a similar division of navigation but adds that the ’Utilities’, or
the Utility navigation as she puts it, are elements which are non-content such as
sign-in or language tool-buttons. She also ads the ’Associative and inline navigation’
which are links or buttons that are directly related to some content of the site.
Krug (2014) suggests that a navigation should include the elements needed to have
on hand at all times, and that the navigation should appear on all pages. It should
also include some sort of indication to your location on the website. He suggests that
this could be done by for example highlighting the current location. Tidwell (2011)
talks about this locational indication as ’signposts’, which are features to help the
user locate themselves on the page. She suggests that signposts include page titles,
tabs, selection indicators and web page logos. Tidwell (2011) states that in order to
help a user navigate, the navigation could be constructed as a ’map’ to enable a con-
stant mental picture of where on the website the user is located, and to help which
further navigation. This ’map’ refers to a clear and constantly visible navigation
rather than ’click after click’ that leads the user to a place where they are not sure of
where they are or how to get back.
Krug (2014) suggests that there are no rules for how many ’clicks’ you should restrict
yourself to, and states that a user doesn’t mind a lot ’clicks’ ”as long as they each
click is painless and they (the user) have continued confidence that they’re on the
right track”. In contradiction to this, Tidwell (2011) states that navigation should
be kept short and that ”less is better”. That the best navigation is no navigation at
all; where everything you need is ”right at your fingertips”. On large websites where
navigation is a must, she instead suggests to keep the number of pages down do
minimize the page jumps. She talks about two common navigation models that en-
able this: ’fully connected’ and ’multi-level’. The fully connected-model (See figure
10) refers to a navigation where every page is connected to the other, and where all
pages can be reached from another with a single click. The Multi-level-model (See
figure 11) is when all main pages are fully connected but where the main pages have
some sort of sub-navigation that can only be reached after a main page has been
entered.
Figure 10. Fully connected navigation model Figure 11. Multi-level navigation model
163.2.3 Visuals & aesthetics
Krug (2014) states that users tend to search for things that are clickable when they
enter a website, and therefore suggest that it is of great value to make it clear and
obvious what is clickable. One way to do this, he suggests, is to be consistent and use
one colour for everything that is clickable.
Krug (2014) states that the one enemy to a user friendly website is visual noise. He
states that to ensure a page isn’t full of distractions you should look out for three
things: Shouting, disorganization and clutter. Not everything on a site should scream
for your attention, and he suggests to keep the attention to the things that are really
important. He also emphasizes the importance of aligning elements on a page to
avoid making a page that does not look organized. Lastly, he speaks about pages full
of clutter and suggests that this could be extra important to think of when designing
a home page. To avoid clutter on a page, he suggests to see everything on the page
as visual noise, and gradually remove thinks that does not contribute.
According to Lidwell, Holden and Butler (2010), one of the best ways to increase
understanding of a system is improving the visual hierarchy. Krug (2014) states that
one way to ensure a good visual hierarchy on a website is to make sure that the more
important something on the website is, the more prominent it should be. This, he
writes, could be done by making it larger, bolder, in a prominent colour and/or by
using more space around the object or text. Tidwell (2011) presents very similar
views on visual hierarchy but also suggests that it is important to think about in what
way elements are arranged on the page, so that the eye is instantly drawn to the
element/elements that have more importance.
Krug (2014) continues by stating that another way to create good hierarchy is by
making sure that related elements are related visually too. He states that they should
be set in the same visual style or be grouped together. Lidwell et. al (2010) present
similar opinions regarding visual resemblance and usability. They state that usability
and learnability improves when similar items share similar visual features, and that
two items that share similarity elements are interpreted as being relevant to each
other. Lidwell et. al (2010) state that visual consistency can cultivate trust, since the
consistency is an indicator that the system has been thoughtfully designed.
Lidwell et. al (2010) suggest that aesthetics are important and talk about something
called the ’Aesthetic-Usability Effect’. According to them design that is ’more-aes-
thetic’ is also perceived as easier to use, even if in reality it is not. They also state
17that usable, but less aesthetic design, can result in less acceptance from the user, and
that aesthetic design can result in more tolerance towards potential problems or
issues with the product or service. Tidwell (2011) suggest that website design should
follow the same guidelines as graphic design, and that the designer should think
about things like gestalt principles, density, colour, position and rhythm while mak-
ing a page layout.
3.3.4 Gestalt principles
Tidwell (2011) suggests that there are four gestalt principles that should be taken
into consideration when designing a website; proximity, similarity, continuity and
closure, and emphasizes the positive outcome of using all four at the same time.
Proximity
Tidwell (2011) suggests that elements that are close together are also perceived as
elements that are related to each other (see figure 12). Lidwell et. al (2010) suggests
that utilizing proximity can reduce the complexity of design. They also suggest that
overlapping elements are ”interpreted as sharing one or more common attributes”.
They suggest that is is one of the most powerful tools to indicate that elements are
related in design.
Figure 12. Proximity
Similarity
According to Lidwell et. al (2010) similar elements are perceived as more related
compared to elements that are dissimilar (See figure 13). They state that similarity
can be achieved with colour, size and shape, where they suggest that colour has the
strongest grouping effect. Tidwell (2011) suggest that using similarity in website
design can result in the user associating these elements with each other. Lidwell et. al
(2010) also suggests to use the ideas of similarity the other way around; to use differ-
ent colours, sizes and shapes to show when elements are not related to each other.
18Figure 13. Similarity
Continuity
Osvalder and Ulfvengren (2015) describes continuity as the principle that people
tend to follow a line until it encounters a new object (See figure 14). According to
Tidwell (2011) a user want to see continuity in curves and lines and therefore the
alignment of objects on straight lines is important.
Figure 14. Continuity
Closure
Tidwell (2011) states that a user wants to see elements in closed forms rather than
scattered (See figure 15). Lidwell et. al (2010) describes closure as the effect of
grouping elements together in a way so that they are perceived as one element or a
pattern rather than individual elements. They also suggest that closure works best if
the elements are simple geometrical forms ranged together. Lidwell et. al (2010) also
suggest that the use of closure can reduce complexity in a system and also increase
how interesting we find the design to be.
Figure 15. Closure
193.3.5 Colour
According to Lidwell et. al (2010) colour is used for aesthetic purposes as well as to
attract attention, indicate meaning and group different elements together. They sug-
gest that the use of colour not only makes a design more interesting, but that colour
can reinforce the organization itself. Osvalder and Ulfvengren (2015) suggest that a
designer should strive to use the same colour coding throughout the entire interface.
Lidwell et. al (2010) suggest to keep a colour palette to a minimun, but that this min-
imum can depend on the complexity of the design. They suggest that five colours is
a god guideline for a colour palette.
According to Lidwell et. al (2010) bright colours that are desaturated are seen as
friendly and professional, while highly saturated colours are seen as more dramatic
and intriguing. They suggest the use of desaturated colours when efficiency is the
primary goal and the use of dark colours to convey professionalism. Lidwell et.
al (2010) also discourage the use of many saturated colours as the can create eye
fatigue.
Osvalder and Ulfvengren (2015) suggest that specific colours evoke specific emo-
tions, but that this emotion can vary amongst cultures. They suggest that red is
perceived as ’stop and danger’, yellow as ’warning or testing’, green as ’ok/go/con-
tinue’ and blue as ’cold and calm’.
In contradiction to this, Lidwell et. al (2010) suggest that there is no evidence to if
specific colours evoke specific feelings, and no universal symbolism. They instead
suggest to test the chosen colours on the target group beforehand to see if they
evoke any specific meaning to them.
3.2.6 Words and language
According to Strunk and White (1935) a sentence should only include the words
necessary, and a paragraph only the sentences necessary to convey your message.
Krug (2014) suggests that this statement should be taken into consideration when
developing web pages. He states that much of words on todays websites are just
taking up space, and suggest that half of the word written could often be removed
without loosing any value. By getting rid of unnecessary words, Krug (2014) suggests
that you could have beneficial effects like reducing noice on the page and making
important information more prominent while making the pages shorter.
20Krug (2014) writes about something he calls ’Happy talk’, which for example could
be a welcome text on a home page. He suggests that this happy talk is like small talk.
Content free sentences that doesn’t fill any purpose, and sentences that should be
removed from a website. He states that:
” Web users don’t have time for small talk
-Krug (2014, p. 50)
Krug (2014) mentions that instructions should not be a part of a website if not
absolutely necessary. Instead, he suggests that a web designer should strive to make
everything so self-explanatory instructions are not needed. If instructions are need-
ed, Krug (2014) suggests to keep them to their bare minimum.
Krug (2014) states that users rarely read all the text on a page, but rather scan if
for information that might be off interest to them. For this reason, he suggests that
when designing a website, the text on the pages should be formated to make it easier
to scan. Krug (2014) proposes to use headings when text is necessary. The headings
should tell you what each section is about, and should intrigue the user for further
reading. According to him, it is important to keep the heading close to the section it
refers to, to make sure the heading doesn’t ’float’ and confuse the reader.
Krug (2014) also suggests to keep paragraphs short. He suggests that writing a
paragraph for a website is different to writing for not-online-purposes. In this case,
he states that even single sentence paragraphs are okay. With too long paragraphs,
Krug (2014) suggests that a users has a harder time scanning the text for important
information. One solution to this, he suggests, is the use of bullet lists and highlight-
ing of key terms to present and highlight information.
3.2.7 User testing
According to Krug (2014) user testing is crucial if you want to achieve a user friendly website.
Since user testing will be a big part of this project it will also be a part of the theory.
To make sure that you get your point across, Krug (2014) suggest that the home
page is one of the most important things to test on a website, and that it should be
tested on users outside the organization.
Krug (2014) suggest that there is no average web user, but rather that all web users
21are unique. He states that there are not really any right answers in web design, but
what works well rather is web design that is well integrated and that fills a need.
To achieve this, the design has to be well thought out, well executed and user test-
ed along the process. For this reason, Krug (2014) suggest that there is no point is
asking questions that relates to one specific element or aesthetic since there is no
right answer. To know that your website is user friendly the goal he suggests should
instead be to test elements together to see if they create a good experience.
Krug (2014) suggests that user testing a website is about watching one person at a
time trying to execute pre established tasks on the prototype, to be able to detect
and fix elements of confusion or frustration. He suggests that as a web designer you
become blind towards these problems after a while and that the only way to know if
your website actually works is to test it. Krug (2014) states that you should start user
testing as early as possible, and during the entire development process. Krug (2014)
also suggests that it is much better to test one or few users continuously during the
project than a lot of users in the end. He states that one mistake we do is to make
user testing into a big deal, and that this can lead to that we do not do user tests
early enough.
Krug (2014) states that user testing is not about proving anything, but that this kind
of continuous testing is about improving. He also states that it will never be possible
to find all of the problems with your website, but that the focus at each test should
be to find the bigger problems and fix them. Continuous testing can result in more
of these ’bigger’ problems to arise.
According to Krug (2014) the tests should be simple enough that you actually do
them, and he suggests that three participants each time is enough to find the biggest
problems at each user test-round. Krug (2014) also suggests that it may not be neces-
sary to do these tests on users from your target group, but suggests that most of the
testing could be done on almost anyone since most of the user interface-problems
will occur no mater who tries it. He states that what we are looking for is clarity, and
that if ”almost anyone could use it, your experts will be able to use it , too”.
223.3 Personas
According to Lidwell et. al (2010) personas is a way to understand and design for the critical few.
Since this project is dependent on understanding and designing for the target groups, personas will be
a part of the theory.
Hasdogan (1996) states that designers have a tendency to build personas based upon
personal experiences and imagination rather than on real information about a user.
(Nielsen, 2004) states that the idea of a persona is to build a shared scenarion from
the user’s point of view, built on data. She suggests that a persona can lead to a
more focused design process, while still designing for a broad audience. She states
that the persona can create empathy, understanding and identification which can
help to focus the design process on the user’s needs and wants (Nielsen, 2004). Kier-
kegaard (1859) states that:
” In order truly to help someone else, I must un-
derstand more than he - but certainly first and
formost understand what he understands. If I
do not do that, then my greater understanding
does not help him at all.
-Kierkegaard (1859, p. 45)
A persona is a fictional user built on information gathered during the context phase.
The persona should be vividly described with details rather than numeric data
to create a personality. This fictional character might create empathy for the user
while defining values and needs for one target group. (Wikberg Nilsson, Ericson &
Törlind, 2016).
Lidwell et. al (2010) describes personas as a tool to guide decision making during the
design process. They states that in website design, the needs are different for a buyer
versus a browser and proceeds by saying:
” It is better to understand and per-
fectly meet the needs of the critical
few than to poorly meet the needs
of many
-Lidwell et. al (2010, p. 182)
23Lidwell et. al (2010) adds by stating that the number of personas should be small
if executed well, and not exceed 3 primary personas. If personas are used on these
kind of problems, an impersonal and homogenized construct could be avoided
while ensuring that requirements for the high-value users are met.
Lidwell, Holden and Butler (2010) suggest that personas should be considered early
on in the process as a way to define the users and their requirements. They point out
thet personas from old projects should not be recycled and reused, but created from
interviews and market research.
3.4 Visual communication
According to Machin (2014) visual communication is the act of representation. The
act of converting thoughts, values, ideas and dreams into ’the visual’, ’the image’.
Machin (2014) means that visual communication is part of our everyday life; from
the design of the electrical bill, to how we portray characters in a movie. He talks
of how visual communication is not only about presenting good looking visuals, but
often also about influencing people and sending a message; sometimes clear and
visible and sometimes not.
Yikun and Zhao (2015) describes visual communication as an opportunity for the
reader to interact with the information presented, and an opportunity for the one
presenting to filter and present the information in new and meaningful ways, while
Roxburgh and Caratti (2018) describes visual communication as a cultural mediator
between an organization and a client.
In visual communication, you face dilemmas alike the ones in product design. Ap-
plied illustrations, for example, is about problem solving in the sense that you need
to understand the context before you work on a solution (Hall, 2011).
Hall (2011) presents a process alike product design with 6 steps:
1. Defining the problem
2. Gathering information
3. Exploring and generating ideas without criticism
4. Idea evaluation
5. Selection
6. Implementing the selected option
243.4.1 Illustrations and words
The picture has the power to communicate globally independent of audience, age
or era. Visuals can communicate instantaneously, and connect with emotions and
experiences while bringing a delight in terms of shape, space and colour (Hall,
2011). According to Tversky (2002) sketches do not portray reality, but rather
conveys conceptions of reality. She expresses that sketches have the advantage of
conveying thought and ideas in a visual and metaphorical way.
Hall (2011) also states that pictures and words can assist in communicating when
used together, where both words and illustrations possesses great qualities; some
apart and some in common. He states that words can be more specific and commu-
nicate with greater accuracy at the same time as engaging an audience for a longer
period of time. He means that words also have an ability to create delight via form,
space and colour. Hall states that both words and illustrations have strengths weak-
nesses, but when used together can compensate for weaknesses while enhancing
their strengths.
3.4.2 What is communication?
David Gill and Bridget Adams (ABC of Communication Studies, 1999) describes
communication as “A social activity, where people in a given culture create and ex-
change meanings in response to the reality they experience.”
To be successful in communicating a message and to be successful as an illustrator it
is crucial to understand the four stages of the communication process:
1. You (originator of message)
2. The message
3. Channel/Medium (the physical/digital means and media in which your message
is carried)
4. Destination (intended destination of your message) (Hall , 2011)
Your style of communication depends on you as a person. Your age, experiences,
education, family, cultural background etc. all contributes to your personal identity
and your identity as a communicator and illustrator. Personal change or growth will
therefore be seen in your work. It is important to understand that the receiver of the
message will have there own identity that will affect how they interpret your illustra-
tions. (Hall, 2011)
25Hall (2011) suggests to build a library of codes, rules and signs shared by the send-
er and the audience. These could be icons, symbols or indexes. He suggest that
these will help to convey your message over time and space. He also empathizes
the importance of how key elements are arranged in a picture. That the same key
elements arranged in different ways kan lead to a completely different messages. He
exemplifies this with the elements; a tiger and a girl. A tiger behind bars with a girl
locking through the bars sends a completely different message than a girl and a tiger
looking at each other without any obstacle in between.
Icon
An icon closely resembles the object it is signifying. For example an icon of a car, so
simply explained that anyone would understand what it resembles (Hall, 2011).
Symbol
A symbol does not have any visible resemblance to the object or action it i signifying,
but rather a social acceptance of what it means. For example the symbol for recy-
cling, which does not portray the actual act of recycling but rather implies recycling
because of a cultural agreement of the symbol (Hall, 2011).
Index
An index is a ’natural sign’. The index has some sort of connection to what it signi-
fies. Hall exemplifies this with a grey cloud that can signify rain coming. He suggest
that an index could be turned into an illustration with the same purpose.
When conveying a message through illustration, Hall (2011) suggests that an icon is
most efficient if you want to communicate as broadly and fast as possible. He sug-
gests that even a toddler can se and understand an icon. He states that no special
knowledge is required to understand an icon, but that it is necessary that the recipi-
ent has seen the object the icon is signifying beforehand. For this reason, he suggests
that figurative art is one of the most popular ways of conveying a message. Krug
(2014) also suggests that standardized icons are one of the best ways to, as he puts it,
”to make almost anything easier”.
In comparison to this, he states that symbolic signs are more complex, since they re-
quire that the recipient has learnt the meaning of the symbol to understand what it
signifies. Hall (2011) also suggests that the symbolic sign is complex due to our own
personal identity. Because of different experiences, cultures and memories we can
interpret a symbolic sign in different ways.
263.4.3 What creates meaning in visual communication?
Communication is a two way street. There is the created message and the people
that receive and read the created message, in other words the audience. The crea-
tion of the message is important, but the process of receiving a message is as im-
portant (Hall, 2011). He states that it is the illustrators responsibility to shape the
message, and that it is important to consider the intended target group during the
process of creating a message to ensure that is is received as intended.
According to Hall (2011) here are a few key elements in how we create meaning in
communication. Setting, clothes, character, composition, colour, properties, body
language and drama.
Via the setting we can visualize where an illustrated event takes place. Via clothes
we can illustrate profession, wealth, social group, age, gender and situation. We can
also use character to denote race, age and profession, but also personality. With col-
our and how the key elements are composed we can determine hierarchy amongst
people and places, and also emphasize status and symbolic value. To illustrate pro-
fession, character, personality, situation, location and period we can use properties
and objects belonging to characters. The body language and physical gestures can
denote intention, psychological state, status and age. And lastly, drama can create
action and reaction within the illustration. (Hall, 2011)
Stereotypes
According to Arendt (2017) research has shown that in media today, we tend to
present social groups in a simplified way, something he argues can influence our
perception of and behavior towards that specific social group. Arendt (2017) talks
about the negation of media stereotypes as something that plays an important role
in how we see media. He suggests that negation of media stereotypes can reduce the
effect of the media stereotype itself, and also effect how we read and understand for
example news in media.
Degand (2019) suggests that role models in media today effect in what way me-
dia students use stereotypes. He emphasizes the importance of culturally relevant
media, and suggests that this can assist digital media artists in their work, and that
culturally conscious content can combat social stereotypes and suggests that this can
be done by portraying a scenario from multiple perspectives. Degand (2019) also
suggests that problematic stereotypes can contribute to a less interesting and com-
plex media, and suggest that in visual communication today, we are taught and even
27encouraged to draw white male characters while there are exceptions. He exem-
plifies this with the illustration book How to draw afrakan super- heroes: No 1. basics. by
Brown (2016) in which Brown discourage artist from using thin lips, thin noses and
straight hair.
Race and ethnicity
According to Lee (2015) racial and cultural responsive teaching is crucial for how art
students themselves understand and work with cultural differences and social inclu-
sion. She emphasizes that racial experiences are real and that it influences how we
see the world. Lee (2015) says that the word ’race’ itself is often grounded in the idea
that one group of people is distinct in terms of physical appearance, and that the
term ’race’ is something socially constructed. Sadker, Sadker, and Zittleman (2008)
defines race in a similar way, as a physical attribute that cannot be changed.
According to Lloyds Banking group (2017), mixed- and multi racial as well as people
defined as ’black’ where over represented in Britain advertisement, while asian
where under represented. Despite this, only 33 percent of respondents who defined
themselves as black thought that they where accurately represented in advertising,
while 45 percent with Asian ethnicity answered that they felt accurately represented.
Gender
Navarro, Martinez, Yubero and Larranaga (2014) suggest that we associate gender
with colours, and that we do so even in an early age. They also suggest that boys
and girls share similar gender stereotypes, and that we actively seek gender-related
information in media that will guide us.
Degand (2019) suggests that it is important to attempt to portray male and female
gender equally, while Rushton, Gray, Canty and Blanchard (2019) rather focuses on
gender minorities and suggests that there is a gap in applying gender terminology
in practice. Rushton et al. (2019) suggests that there is a lack of research in gender
minorities and a lack of research in how to minimize their exclusion. In their mean-
ing, gender is defined as the area between the different physical characteristics that
are used to define male and female; definitions that Degand (2019) suggest influence
how we act during a creative process.
28Shapes
According to Tidwell (2011) round shapes are percieved as soothing, and the use of
curved corners can make a design more interesting. She suggest that consistency in
the use of one or several curves corners on elements in a design or an interface can
create a distinctive and unified look.
Lidwell et. al (2010) suggest that using round and/or anthropomorphic shapes in
design can create an honest and appealing impression. They also state that we tend
to favor design with round shapes rather than angular design, since sharp angles can
be processed as a potential threat of connected to ‘fear’. They suggest the use of
sharp features to attract and/or provoke and the use of round shapes in features to
create a ‘kind’ impression.
294. Method
304 Method
This chapter contain the chosen design process for the practical part of the project,
chosen methods, how they where performed and the results of the chosen approach.
4.1 Design process
For this project, an iterative process with four different stages was used (See figure
16);
1. Planning
2. Understanding and defining
3. Exploration and ideation
4. Prototyping and testing
The process is based on the same values as the Human-Centered Design Approach
by IDEO (2015) but with two added stages: ‘Planning’ and ‘Prototyping and testing’
(instead of implementation). IDEO (2015) describes the Human-Centered Design
Approach as a mindset in which the designer believes that the solution lies in the
people we are designing for. They describe it as a nonlinear process in which we test,
and fail.
The Human-Centered Design Approach is divided into three stages: Inspiration,
Ideation and Implementation in which the designer should converge and diverge.
The first stage, Inspiration, is about understanding the people you design for. The
second stage, Ideation, is about making sense of the situation, generating ideas and
testing your ideas. The last, Implementation, is described as the stage in which you
implement your design and get your idea to the market (IDEO, 2015).
Understanding Exploration Prototyping
Planning & testing
& defining & ideation
1 23 4
Figure 16. Illustration of the chosen design process
31You can also read
