The 5 C’s of Web Design Craig Duncan Project Manager ReliefWeb United Nations Office for the Coordination of Humanitarian Affairs

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

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

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

The 5 C’s of Web Design (2)

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

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

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

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

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

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

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

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

The 5 C’s of Web Design (+)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The 5 C’s of Web Design Questions?