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: duncanc@un.org

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?