the 5 c s of web design
Download
Skip this Video
Download Presentation
The 5 C’s of Web Design

Loading in 2 Seconds...

play fullscreen
1 / 35

The 5 C’s of Web Design - PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on

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 !.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' The 5 C’s of Web Design' - jolie


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
the 5 c s of web design
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 design1
The 5 C’s of Web Design
  • Content
  • Continuity
  • Cut to the chase
  • Context
  • Community

+ USABILITY !

the 5 c s of web design 1
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
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 3
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
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
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 51
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 design2
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 design3
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 design5
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 design7
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 design8
The 5 C’s of Web Design (+)

+ USABILITY

Usability Testing – SAVES MONEY !

  • Low Fidelity prototyping
  • Paper Prototyping
the 5 c s of web design9
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 design10
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 design11
The 5 C’s of Web Design (+)

+ USABILITY

User Testing

  • Decide on top 10 tasks
  • Create Scenarios
the 5 c s of web design12
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 design13
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 design14
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 design15
The 5 C’s of Web Design (+)

+ USABILITY

User Testing – How To

  • Facilitator welcomes participant and explains procedure
the 5 c s of web design16
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 design17
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 design18
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 design19
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 design20
The 5 C’s of Web Design (+)

+ USABILITY

User Testing – Subjective feedback

  • After tasks are finished
the 5 c s of web design21
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 design22
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 design23
The 5 C’s of Web Design
  • Content
  • Continuity
  • Cut to the chase
  • Context
  • Community

+ USABILITY !

the 5 c s of web design24
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
ad