The 5 C

1
The 5 Cs of Web Design

• Craig Duncan
• Project Manager
• ReliefWeb www.reliefweb.int
• United Nations Office for the
• Coordination of Humanitarian Affairs
• Email duncanc_at_un.org

2
The 5 Cs of Web Design

• Content
• Continuity
• Cut to the chase
• Context
• Community
• USABILITY !

3
The 5 Cs of Web Design (1)

• Content
• The reason people VISIT websites
• Users are TASK ORIENTED
• Write FOR the WEB Scannable
• HIGHLIGHT new content

4
(No Transcript)
5
(No Transcript)
6
The 5 Cs of Web Design (2)

• Continuity
• Graphics are NOT IMPORTANT
• Trust IS
• Design for the USER EXPERIENCE

7
The 5 Cs of Web Design (2)
8
The 5 Cs of Web Design (3)

• Cut to the Chase
• 3 click ruleBUT Painless clicks
• Make SHORTCUTS to popular content

9
The 5 Cs of Web Design (4)

• Context
• Avoid POGO-STICKING
• Where AM I, and where can I go from here?
• Related documents

10
The 5 Cs of Web Design (5)

• Community
• Email links on ALL PAGES
• Include a Mailing Address and Phone
• Put people together

11
The 5 Cs 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 Cs of Web Design ()

• USABILITY
• Heuristic Evaluations
• Jacob Nielsens 113 guidelines for Home Page
  Usability
• Information Architecture review

13
The 5 Cs of Web Design ()

• USABILITY
• Usability Testing
• Yes, with real people !
• Because YOU ARE NOT THE USER

14
The 5 Cs of Web Design ()
Don Norman
15
The 5 Cs of Web Design ()

• USABILITY
• Usability Testing
• Solves arguments Amazon.com
• Guaranteed revelation
• BUT - Leave your EGO at the door

16
The 5 Cs of Web Design ()
17
The 5 Cs of Web Design ()

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

18
The 5 Cs of Web Design ()

• USABILITY
• Usability Testing SAVES MONEY !
• Low Fidelity prototyping
• Paper Prototyping

19
The 5 Cs of Web Design ()

• USABILITY
• Paper prototyping
• Paper screen shots
• One person acts as the computer
• Have an Under Construction page

20
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• Does NOT make up for lack of knowledge about your
  target audience

21
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• Decide on top 10 tasks
• Create Scenarios

22
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• Test typical users new and experienced
• Warm bodies will do
• Hallway grab

23
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• 4-5 users will do
• Test fewer people but more often

24
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• One facilitator advising and conducting test
• Two observers not in line of sight

25
The 5 Cs of Web Design ()

• USABILITY
• User Testing How To
• Facilitator welcomes participant and explains
  procedure

26
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• Testing the SITE not the USER!
• Verbal protocol keep talking
• Encourage questions no answers

27
The 5 Cs of Web Design ()

• USABILITY
• User Testing
• Facilitator keeps poker face
• Observers stay silent and take notes

28
The 5 Cs of Web Design ()

• USABILITY
• User Testing What to look for
• Task completion
• User confidence
• Errors time spent in error state

29
The 5 Cs of Web Design ()

• USABILITY
• User Testing Observables
• Head slappers
• Confusion of terminology
• Areas missed or overlooked

30
The 5 Cs of Web Design ()

• USABILITY
• User Testing Subjective feedback
• After tasks are finished

31
The 5 Cs of Web Design ()

• USABILITY
• User Testing Debriefing
• After Subjective feedback
• Explain the goals of the test to the user

32
The 5 Cs of Web Design ()

• USABILITY
• Usability Testing when to test
• Iterative design
• Design, test, design, test then code it.

33
The 5 Cs of Web Design

• Content
• Continuity
• Cut to the chase
• Context
• Community
• USABILITY !

34
The 5 Cs of Web Design

• Resources
• www.useit.com - Nielson Norman Group
• Dont Make Me Think Steve Krug
• Home Page Usability Jacob Nielsen
• Information Architecture for the WWW
• SIG CHI SIG IA - Google

35
The 5 Cs of Web Design

• Questions?