DESIGN USABILITY FOR
HUMANITARIAN WEB SITES
Guidelines and international best practices	

Dean Wood, Vinko Grgic, Colette ...
HUMANITARIAN SITES OFTEN
FAIL BECAUSETHEY:
• Don’t help people understand what the site is about or find
what they need - l...
WEB USABILITY & USER
EXPERIENCE DESIGN
• Usability has become an established part of large
organisations to ensure they ac...
WHAT MAKES SITES EASY?
1. Information architecture / site structure
Organisation of information and functionality to give ...
SITE STRUCTURE
WHAT DOESN’T WORK
This is intended to help others learn, not just criticise	

Organisation of information a...
MSF presents a reasonable top level structure but it
could be hard for people to know where to go to get
involved in a pro...
The Red Cross provides some random and confusing
categories, such as War and Law. This would be better
presented in a sepa...
Users are likely to be confused by the number of categories
and how they relate to each other (both top and left nav).
8
S...
SITE STRUCTURE
SITES TO LEARN FROM
Organisation of information and functionality to give
people clear and fast access to w...
Overall, reasonable number of categories	

The first section ‘How we help’ enables users to learn what the group
does and w...
The Red Cross provides good categories to help
people understand their work and to find information
and resources they need...
Red Cross Australia provides a greater number of categories in
its structure but this can help users make the best choice ...
NAVIGATION
WHAT DOESN’T WORK
Positioning of links to guide people through content
13
The Red Cross site presents navigation everywhere.
14
Navigation
NAVIGATION
WHAT WORKS
Positioning of links to guide people through content
15
MSF presents a mega menu when users move their cursor over the
heading. 	

This saves users time in navigating and helps t...
The site provides a good navigation bar and call to action
for users to donate.
17
Navigation
The site provides good calls to action at the bottom of
the page.
18
Navigation
CONTENT AND LABELLING
WHAT DOESN’T WORK
Clarity of labels and content
19
OzHarvest does not provide a clear, concise overview of what they
do or engage people in their mission. Our impact is a so...
CONTENT AND LABELLING
WHAT WORKS
Clarity of labels and content
21
The site uses clear language.	

It also presents an overview about the group on the
home page so people can know what they...
The site provides a good overview on the home page.	

Users can scroll to learn more about the services.
23
Content & labe...
VISUAL DESIGN
WHAT DOESN’T WORK
24
The visual design of sites can quickly get
overwhelming, dis-engaging and appear dated.
25
Visual design
The MSF site could move the Highlights section a bit higher
to give users an indication there is more below if they scroll...
Avoid using light colours for text as it impacts readability
(e.g. the mid-green).Always ensure high contrast
between text...
VISUAL DESIGN
WHAT WORKS
28
ReliefWeb does a great job of providing an overview on the
home page of what is going on and to give people quick, clear
a...
The MSF site presents a neat, clean home page which makes it
easy for users to focus.The site also scrolls sections throug...
The site provides clear orientation at the top	

and a clear visual style.	

It would be better if users could filter cours...
The site presents a clear style with a sense of visual
hierarchy that guides the user’s attention to the most
relevant inf...
INTERACTIVITY
WHAT WORKS
Sites are increasingly enabling users to connect according to
location or interest and via social...
www.350.org	

The site presents information about local groups.While there is
unnecessary duplication of links it presents...
MSF presents a great timeline feature so users can see events that
have happened at different times.While this is good, it...
DESIGN FOR MOBILE
WHAT DOESN’T WORK
Layouts that respond to device resolution (responsive)
36
On a mobile the Oxfam site does not re-factor and is
very hard to read.This will lead many users accessing
the site on a m...
DESIGN FOR MOBILE
WHAT WORKS
Layouts that respond to device resolution (responsive)	

Check out http://blog.xmlswf.com/bes...
39
Mobile responsive
http://www.templatemonster.com/wordpress-themes/46791.html	

This template meets a lot of the key req...
40
Mobile responsive
The WWF site rolls up navigation but still provides clear
calls to action.
41
Mobile responsive
The Red Cross site is quite responsive, even if it has
strange / random categories at the top of both...
SEARCH ENGINE
OPTIMISATION
WHAT WORKS
Use keywords in the name, address, banner and contents so
they are ranked highly in ...
The sites listed here are doing a good job of including
keywords on the pages to get ranked highly in Google.
43
SEO
The sites listed here are doing a good job of including
keywords on the pages to get ranked highly in Google.
44
SEO
SOCIAL MEDIA
WHAT WORKS
Ensure you have a good presence and make regular updates
to social media sites like Facebook.
45
Ensure you have a Facebook presence and get people
involved in your group to get others to like the page.WWF
has over 1 mi...
RECOMMENDED NEXT STEPS
‣ Apply the recommendations and principles in this
presentation to sites where possible	

‣ Groups ...
Upcoming SlideShare
Loading in...5
×

Humanitarian site ux best practices v1.1b

215

Published on

This presentation is intended to help community groups, non-profits and humanitarian organisations to design web sites that are easy to use. This will help you achieve the best results for the people you are trying to assist.

After having helped many large corporations achieve good results through user centred design we have tried to package up our knowledge and insights to assist community and non-groups to help others.

Rather than helping one group at a time we wanted to get our knowledge out there to help as many groups as we can in the important work you do.

The insights are based on over 20 years of usability testing in several countries across a range of industries.

The presentation is just a starting point. Feel free to add additional comments or guidance you think will be useful for community and non-profit groups.

Also feel free to use or evolve the content in any presentations you give to community groups that will help them.

We hope you find it helpful.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
215
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Humanitarian site ux best practices v1.1b

  1. 1. DESIGN USABILITY FOR HUMANITARIAN WEB SITES Guidelines and international best practices Dean Wood, Vinko Grgic, Colette Grgic, Jaana Anttila, Dorota Raczkowska and Sophie Orchard April 2014 1
  2. 2. HUMANITARIAN SITES OFTEN FAIL BECAUSETHEY: • Don’t help people understand what the site is about or find what they need - leading people to leave • Use language that people outside their groups do not understand - confusing users • Are designed by committee - so lack of focus • Don’t involve real users in the design process • Lack resources, time or knowledge about usability • Don’t have analytics / metrics to track and improve design How much more could sites achieve for people they are intended to help? 2
  3. 3. WEB USABILITY & USER EXPERIENCE DESIGN • Usability has become an established part of large organisations to ensure they achieve their goals • The field is a growing and evolving body of knowledge about what works for users. Practitioners apply the knowledge and skills • User centred design is a process of designing for users and involving users in the design process to: ‣ Gain insights into what they need, how they approach tasks plus their equipment, environment, skills and attitudes ‣ Collaborate and complete usability testing 3
  4. 4. WHAT MAKES SITES EASY? 1. Information architecture / site structure Organisation of information and functionality to give people clear and fast access to what they need Number and type of categories (e.g. task, priority, lifecycle...) 2. Navigation and flow Positioning of links to guide people through content 3. Content / Labelling Clarity of labels and content 4. Visual design Clarity of links + aesthetics 5. Interactivity Richness of functionality, e.g. ability to create, filter, save... 6. Mobile first Design for mobile / tablet resolutions before desktop 4
  5. 5. SITE STRUCTURE WHAT DOESN’T WORK This is intended to help others learn, not just criticise Organisation of information and functionality to give people clear and fast access to what they need The number and type of categories 5
  6. 6. MSF presents a reasonable top level structure but it could be hard for people to know where to go to get involved in a programme or to donate money. Not finding this information will impact MSF’s effectiveness. 6 Site structure
  7. 7. The Red Cross provides some random and confusing categories, such as War and Law. This would be better presented in a separate area or with better context. 7 Site structure
  8. 8. Users are likely to be confused by the number of categories and how they relate to each other (both top and left nav). 8 Site structure
  9. 9. SITE STRUCTURE SITES TO LEARN FROM Organisation of information and functionality to give people clear and fast access to what they need The number and type of categories 9
  10. 10. Overall, reasonable number of categories The first section ‘How we help’ enables users to learn what the group does and what they can get. Sections like dates and workshops could be grouped but are generally OK. 10 Site structure
  11. 11. The Red Cross provides good categories to help people understand their work and to find information and resources they need. 11 Site structure
  12. 12. Red Cross Australia provides a greater number of categories in its structure but this can help users make the best choice to find what they need. 12 Site structure
  13. 13. NAVIGATION WHAT DOESN’T WORK Positioning of links to guide people through content 13
  14. 14. The Red Cross site presents navigation everywhere. 14 Navigation
  15. 15. NAVIGATION WHAT WORKS Positioning of links to guide people through content 15
  16. 16. MSF presents a mega menu when users move their cursor over the heading. This saves users time in navigating and helps them find the right section straight away. 16 Navigation
  17. 17. The site provides a good navigation bar and call to action for users to donate. 17 Navigation
  18. 18. The site provides good calls to action at the bottom of the page. 18 Navigation
  19. 19. CONTENT AND LABELLING WHAT DOESN’T WORK Clarity of labels and content 19
  20. 20. OzHarvest does not provide a clear, concise overview of what they do or engage people in their mission. Our impact is a somewhat strange label and does not really equate to achievements or work. 20 Content & labels
  21. 21. CONTENT AND LABELLING WHAT WORKS Clarity of labels and content 21
  22. 22. The site uses clear language. It also presents an overview about the group on the home page so people can know what they are about. 22 Content & labels
  23. 23. The site provides a good overview on the home page. Users can scroll to learn more about the services. 23 Content & labels
  24. 24. VISUAL DESIGN WHAT DOESN’T WORK 24
  25. 25. The visual design of sites can quickly get overwhelming, dis-engaging and appear dated. 25 Visual design
  26. 26. The MSF site could move the Highlights section a bit higher to give users an indication there is more below if they scroll. 26 Visual design
  27. 27. Avoid using light colours for text as it impacts readability (e.g. the mid-green).Always ensure high contrast between text and background. 27 Visual design
  28. 28. VISUAL DESIGN WHAT WORKS 28
  29. 29. ReliefWeb does a great job of providing an overview on the home page of what is going on and to give people quick, clear access to what they need. 29 Visual design
  30. 30. The MSF site presents a neat, clean home page which makes it easy for users to focus.The site also scrolls sections through the carousel on the left so users do not need to navigate. 30 Visual design
  31. 31. The site provides clear orientation at the top and a clear visual style. It would be better if users could filter courses by location. 31 Visual design
  32. 32. The site presents a clear style with a sense of visual hierarchy that guides the user’s attention to the most relevant information. 32 Visual design
  33. 33. INTERACTIVITY WHAT WORKS Sites are increasingly enabling users to connect according to location or interest and via social media. 33
  34. 34. www.350.org The site presents information about local groups.While there is unnecessary duplication of links it presents clear sections for local ‘groups’,‘events’ and ‘members’. 34 Visual design
  35. 35. MSF presents a great timeline feature so users can see events that have happened at different times.While this is good, it is not really clear what the timeline presents (MSF’s work or simply global events). 35 Visual design
  36. 36. DESIGN FOR MOBILE WHAT DOESN’T WORK Layouts that respond to device resolution (responsive) 36
  37. 37. On a mobile the Oxfam site does not re-factor and is very hard to read.This will lead many users accessing the site on a mobile to simply leave. 37 Mobile responsive
  38. 38. DESIGN FOR MOBILE WHAT WORKS Layouts that respond to device resolution (responsive) Check out http://blog.xmlswf.com/best-premium- responsive-charity-wordpress-themes-2014/ http://bradfrostweb.com/ http://mobile.smashingmagazine.com/2012/08/22/separate- mobile-responsive-website-presidential-smackdown/ 38
  39. 39. 39 Mobile responsive http://www.templatemonster.com/wordpress-themes/46791.html This template meets a lot of the key requirements identified in this review and is responsive, making it a good resource to consider.
  40. 40. 40 Mobile responsive The WWF site rolls up navigation but still provides clear calls to action.
  41. 41. 41 Mobile responsive The Red Cross site is quite responsive, even if it has strange / random categories at the top of both mobile and desktop.
  42. 42. SEARCH ENGINE OPTIMISATION WHAT WORKS Use keywords in the name, address, banner and contents so they are ranked highly in unpaid search results (e.g. on Google). 42
  43. 43. The sites listed here are doing a good job of including keywords on the pages to get ranked highly in Google. 43 SEO
  44. 44. The sites listed here are doing a good job of including keywords on the pages to get ranked highly in Google. 44 SEO
  45. 45. SOCIAL MEDIA WHAT WORKS Ensure you have a good presence and make regular updates to social media sites like Facebook. 45
  46. 46. Ensure you have a Facebook presence and get people involved in your group to get others to like the page.WWF has over 1 million ‘friends’ who can help them reach others. 46 Social media
  47. 47. RECOMMENDED NEXT STEPS ‣ Apply the recommendations and principles in this presentation to sites where possible ‣ Groups without much money should look for design templates in WordPress that implements these recommendations. ‣ Test ideas with target users.Test the structure, labels and layout of hand drawn sketches with users initially to save time and cost ‣ Once the site structure and draft content prove easy for target users, develop the site fully. 47
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×