Embed Size (px)
DESCRIPTION
The 5 C’s of Web Design. Craig Duncan Project Manager ReliefWeb www.reliefweb.int United Nations Office for the Coordination of Humanitarian Affairs Email: [email protected]. The 5 C’s of Web Design. Content Continuity Cut to the chase Context Community + USABILITY !. - PowerPoint PPT Presentation
Citation preview
The 5 C’s of Web Design
Craig Duncan
Project Manager
ReliefWeb www.reliefweb.int
United Nations Office for theCoordination of Humanitarian AffairsEmail: [email protected]
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
Email 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 (+)
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:
www.useit.com - 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?
