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
Design of a website for the World Anti-Bullying Forum
Caisa Sixtensdotter
2020
Supervisors: Åsa Wikberg-Nilsson & Karin Bellander Reviewer: Amanda Bertilsson
Examiner: Åsa Wikberg-Nilsson
Industrial design engineering Luleå University of Technology
MASTER THESIS PROJECT
- A website with focus on usability and inclusion
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
1.1 Background 2
1.2 Research questions 2
1.3 Stakeholders 3
1.4 Project objectives and aims 3
1.5 Project scope 3
2. Context
2.1 Friends 5
2.2 The World Anti Bullying Forum 5
2.3 Bullying 5
2.4 Existing solution 7
2.5 Benchmarking 7
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
5 Final results
5.2 Home Page 58
5.3 Secondary navigation 59
5.4 Resources 62
5.5 The benefit of attending WABF 63
5.6 Illustrations 64
6. Discussion
6.1 Theoretical framework 68
6.2 Relevance 71
6.3 Reflection 72
6.4 Conclusion 73
References
76List of Appendix List of figures
Appendix A - Interviews
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
1. Introduction
1. 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?
3 2. 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.
2. Context
5
2. 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)
These 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
”
7 a 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.
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).
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 2. Hello Monday home page
Figure 3. Frog Design home page
The 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
9 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 and extreme at the same time (See figure 5).
Figure 5. Dog studio home page
Eat 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 4).
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.
Figure 4. Eat Forum navigation
Analyzing 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.
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 6. Friends navigation
Figure 7. Friends example illustration
Figure 8. Friends colour palette
11 They 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:
and the mission statement;
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.
Always act for each child’s safety
”
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.
”
3. Theory
13
3 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.
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.
- Wikberg Nilsson, Ericson and Törlind (2016, p. 10)
”
3.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.
15 3.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 pagename 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)
COMPANY NAME Sign in Track your order Stores TROUSERS TOPS DRESSES SHIRTS SHOES
DRESSES
MAXI DRESSES MINI DRESSES MIDI DRESSES
Primary navigation BAGS
Utilities Site ID
Secondary navigation
Quick view Quick view Quick view Quick view Quick view Quick view
Associative and inline navigation
Figure 9. Illustration of navigation segments
Tidwell (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
17 3.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
that 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.
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.
Figure 12. Proximity
19 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.
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 13. Similarity
Figure 14. Continuity
Figure 15. Closure
3.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.
21 Krug (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) 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
”
-Krug (2014, p. 50)are 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”.
23
3.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:
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)
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)
”
Lidwell 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
25 3.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)
Hall (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.
27 3.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
encouraged 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.
29 Shapes
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.
4. Method
31
4 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).
1 23 4
Planning Understanding
& defining Exploration
& ideation Prototyping
& testing
Figure 16. Illustration of the chosen design process
As described above, the key values of the Human-Centered Design Approach where used but with changes to the stages. The implementation stage was substituted with prototyping since implementation of the final prototype is not a part of this thesis project, while a planning stage was added to give the project more structure.
4.2 Project planning
Because of the free nature of this project it was necessary with a good structure of time. Even though a plan can change because of many different factors, it helped with staying on track and enabled a sense of what to do next in the project.
A preliminary Gantt chart has been made to give the project structure as well as personal deadlines (see figure 17). The submission deadlines are marked in the fig- ure. The Gantt chart was used to set weekly goals that corresponded somewhat with the preliminary time plan.
JANUARY FEBRUARY MARCH APRIL MAY JUNE
Litterature review
Need finding
& limitations
Ideation
Concept development
Choosing a concept User testing
Adaptation & detail development
Report
50% Thesis 90% Thesis
95% Thesis
Presentation 100% Thesis Project plan
Figure 17. Gantt chart
33
4.3 Literature review
The project started with a literature study of the areas presented below. These are areas that was found necessary to understand the problem but also important for the creative process. Following an iterative process, the literature study was an ongo- ing part of the project as new important topics emerged. According to Milton and Rogers (2013) a literature study consists of research question, data collection, data evaluation, analysis and interpretation and literature review presentation. These five steps serve as a guide for a bias and relevant literature study.
To be able to create a user friendly, and aesthetically pleasing, website, a lot of the context immersion revolved around User experience design and User interface design. Since the website is a platform that should convey the values of Friends, literature about bullying, violations and sexual harassment was also used. Literature regarding these topics was mostly provided by Friends.
Since visual communication, and illustrations, where used as a tool to convey val- ues, information and messages, literature regarding this topic was investigated. Both books and articles where used for this area.
The LTU article database was the primary search tool for all articles not provided by Friends. The selection of articles was based upon relevance and personal judge- ment.
Key words used: Website design, illustrations, usability, interaction design, perso- nas, visual communication, gender+media, race+media
4.4 Understanding and Defining
To be able to design a website suitable for the users and for Friends, understanding and mapping the context was very important in this specific project where there where no, too little, limitations.
4.4.1 Needs analysis
Needs analysis was used to map needs that where big, small, complex, crucial and/
or uncertain. According to Wikberg Nilsson et. al (2016) a needs analysis is a qual-
itative way of defining the needs related to a project. They state that identifying needs is a way of making sure that the end product will fulfill its function.
Part of the need finding was completed together with the WABF project group to get insights into what they think the website requires to fulfill the needs of the users.
The WABF-project group have a good overview of the forum and all its components with expertise in different areas. The group consists of:
Frida Warg - Development manager and executive manager for the World An- ti-Bullying Forum.
Karin Bellander - Communications Officer with graphic responsibility Marie Ahlén - Development Manager for digital learning
The need analysis was made as a brainstorming session online where the three headlines crucial, uncertain and desirable where used. For each category we used brainstorming with speak aloud where all thought where written down on post-its and put up on a wall by me as a facilitator. Before the session it was clearly stated that criticizing anyone else’s thought or ideas was of the table.
The result showed that the WABF-group wished for elements such as a database with articles and a clickable program. It also showed that the group wished for a lot of visually related elements such as structure, credibility, clarity and vividness (See figure 18).
35
WISHLIST from Friends
• Userfriendly
• Associative with Friends
• Meets the two target groups
• Create structure
• A vivid website
• A website that can be used in between forums
• A database with articles
Figure 18. Friends wishlist
Figure 19. First navigation draft
4.4.2 Navigation draft
Before anything else, I found it necessary to create an initial overview of what the website needed to contain. Important information as well as crucial functions where written down on cards which could be moved around and grouped to create some sort of first idea of the main navigation. This first draft would work as a guiding tool both when creating interview questions, but also in the ideation process.
The first navigation draft was put up on a wall at the office where employees at Friends could comment, add and change. The navigation draft was also put up on a wall at home where it could be seen and changes by me during the process.
This first mapping of information and functions was a great way to kick-start the project and a great tool for further work. The navigation began with the elements that exists on the temporary website for WABF 2019 and where later on extended and changed according to interviews, user testing and employee comments. This draft gave a good overview of the current situation while giving a hint of which categories could be trickier to design later on (see figure 19).
37 4.4.3 Expert interviews
To be able to create personas, and also to understand the different target groups, interviews where held. According to Wikberg Nilsson et. al (2016) an interview is a meeting with a user or expert, with purpose of understanding their motivations, opinions and actions towards a product or service. They state that an interview can be structured, semi-structured or unstructured, where a semi-structured interview is based upon areas and questions but with flexibility and room for adjustments and conversation.
The main focus with the interviews was not to understand what kind of website the target groups desired, but rather to understand the interviewee, their personality, their thoughts of WABF.
The interviews would enable personas with a personality, something that, as stated by Nielsen (2004), could help create empathy for the users later on in the design process. The interviews where semi-structured, based upon some pre-established questions but also on a conversation with the user. The questions where written in such a way that the answer would lead to a conversation on the subject rather than a direct answer (Except for the four final ’quick questions’).
Before writing the questions, a mindmap was made to make sure that the questions actually covered subjects that would be of great use in the project, and subjects that would be hard to find my own answers to in a literature study. The interviews can be seen in appendix 1. All names have been removed from the interview answers since this was a request from the participants.
The interviewees where carefully chosen to give both a narrow and broad perspec- tive. The following where interviewed:
Researcher - from Belgium with the research area School Psychology & Develop- ment. Attendee of WABF 2017 and 2019.
Practitioner 1 - from Iceland working as Managing Director at Home and School for the National Parent Association in Iceland. Attendee of WABF 2019.
Practitioner 2 - from Lithuania working for the child right organization Child Line.
Attendee of WABF 2019.
