The 5 c s of web design
Download
1 / 35

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


  • 67 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