1. The 5 C’s of Web Design Craig Duncan Project Manager ReliefWeb www.reliefweb.intwww.reliefweb.int United Nations Office for the Coordination of Humanitarian Affairs Email: duncanc@un.org

2. The 5 C’s of Web Design Content Continuity Cut to the chase Context Community + USABILITY !

3. The 5 C’s of Web Design (1) Content The reason people VISIT websites Users are TASK ORIENTED Write FOR the WEB = Scannable HIGHLIGHT new content

6. The 5 C’s of Web Design (2) Continuity Graphics are NOT IMPORTANT Trust IS Design for the USER EXPERIENCE

7. The 5 C’s of Web Design (2)

8. The 5 C’s of Web Design (3) Cut to the Chase 3 click rule…BUT – Painless clicks Make SHORTCUTS to popular content

9. The 5 C’s of Web Design (4) Context Avoid POGO-STICKING Where AM I, and where can I go from here? Related documents…

10. The 5 C’s of Web Design (5) Community Email links on ALL PAGES Include a Mailing Address and Phone Put people together

11. The 5 C’s of Web Design (5) + USABILITY ISO definition: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments

12. The 5 C’s of Web Design (+) + USABILITY Heuristic Evaluations Jacob Nielsen’s 113 guidelines for Home Page Usability Information Architecture review

13. The 5 C’s of Web Design (+) + USABILITY Usability Testing Yes, with real people ! Because YOU ARE NOT THE USER

14. The 5 C’s of Web Design (+) Don Norman

15. The 5 C’s of Web Design (+) + USABILITY Usability Testing Solves arguments – Amazon.com Guaranteed revelation BUT - Leave your EGO at the door

16. The 5 C’s of Web Design (+)

17. + USABILITY Usability Testing – when to test Test early, test often Iterative design

18. The 5 C’s of Web Design (+) + USABILITY Usability Testing – SAVES MONEY ! Low Fidelity prototyping Paper Prototyping

19. The 5 C’s of Web Design (+) + USABILITY Paper prototyping Paper screen shots One person acts as the computer Have an ‘Under Construction’ page

20. The 5 C’s of Web Design (+) + USABILITY User Testing Does NOT make up for lack of knowledge about your target audience

21. The 5 C’s of Web Design (+) + USABILITY User Testing Decide on top 10 tasks Create Scenarios

22. The 5 C’s of Web Design (+) + USABILITY User Testing Test typical users – new and experienced Warm bodies will do… Hallway grab

23. The 5 C’s of Web Design (+) + USABILITY User Testing 4-5 users will do Test fewer people but more often

24. The 5 C’s of Web Design (+) + USABILITY User Testing One facilitator – advising and conducting test Two observers – not in line of sight

25. The 5 C’s of Web Design (+) + USABILITY User Testing – How To Facilitator welcomes participant and explains procedure

26. The 5 C’s of Web Design (+) + USABILITY User Testing Testing the SITE not the USER! Verbal protocol – keep talking Encourage questions – no answers

27. The 5 C’s of Web Design (+) + USABILITY User Testing Facilitator keeps ‘poker face’ Observers stay silent and take notes

28. The 5 C’s of Web Design (+) + USABILITY User Testing – What to look for Task completion User confidence Errors – time spent in error state

29. The 5 C’s of Web Design (+) + USABILITY User Testing – Observables Head slappers Confusion of terminology Areas missed or overlooked

30. The 5 C’s of Web Design (+) + USABILITY User Testing – Subjective feedback After tasks are finished

31. The 5 C’s of Web Design (+) + USABILITY User Testing – Debriefing After Subjective feedback Explain the goals of the test to the user

32. The 5 C’s of Web Design (+) + USABILITY Usability Testing – when to test Iterative design Design, test, design, test… then code it.

33. The 5 C’s of Web Design Content Continuity Cut to the chase Context Community + USABILITY !

34. The 5 C’s of Web Design Resources: www.useit.com - Nielson Norman Group www.useit.com Don’t Make Me Think – Steve Krug Home Page Usability – Jacob Nielsen Information Architecture for the WWW SIG CHI + SIG IA - Google

35. The 5 C’s of Web Design Questions?