The 5 c s of web design
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

The 5 C’s of Web Design PowerPoint PPT Presentation


  • 50 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

The 5 C’s of Web Design

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 21

The 5 C’s of Web Design (2)


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 design4

The 5 C’s of Web Design (+)

Don Norman


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 design6

The 5 C’s of Web Design (+)


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


The 5 c s of web design25

The 5 C’s of Web Design

Questions?


  • Login