10/7/10

1

Mandy  Zhang  New  York  Institute  of  Technology  

Know  Your  Audience  

Hypertext:  

  Definition:  “A  linked  document  in  electronic  format  (i.e.,  files  on  a  hard  drive,  a  CD,  or  a  DVD  containing  text,  graphics,  audio,  video,  or  some  combinations  of  these  elements).  The  link  enables  readers  to  jump  between  documents”  (Kilian,  2009).  

  Elements:  text,  pictures,  graphics,  audio,  video,  links,  interactive  features,  social  media  elements  or  a  combination  of  these  elements  

  Example:  Columbia  Missourian’s  “3-­‐2-­‐2-­‐1-­‐1”  format  

  Figure  out  why  you’re  creating  this  site?  What  do  you  want  to  convey?  

  Think  about  your  audience.  How  can  you  tailor  your  content  to  appeal  to  this  audience?  For  example,  should  you  add  lots  of  graphics  or  is  it  more  important  that  your  page  download  quickly?  

  How  many  pages  will  you  need?  What  sort  of  structure  would  you  like  it  to  have?  Do  you  want  visitors  to  go  through  your  site  in  a  particular  direction,  or  do  you  want  to  make  it  easy  for  them  to  explore  in  any  direction?  

  Sketch  out  your  storyboard  on  paper.  

  Devise  a  simple,  consistent  naming  system  for  your  pages,  images,  and  other  external  files  

Source:  HTML,  XHTML,  &  CSS  (2009),  p.  44    

10/7/10

2

Feature  Story  Webpage  

  Feature  proposal:   What  is  your  

story  idea?   Why  is  important  

or/and  interesting   What  elements  

do  you  plan  to  collect?    

Website  Layout    Draw  the  layout  for  the  feature  story  page  on  paper  

  Incorporate  rich  media  elements  (e.g.,  photo  ,  graphics,  video,  etc.)  in  the  “.content”  area  

Element  1:  Text  

  Two  types  of  information  retrieval  via  the  Web    Chunking:  hit  and  run  information  retrieval  

  What  is  a  chunk?  Whatever  information  you  can  fit  on  a  single  screen.  

  When  chunking,  you  break  your  material  up  into  segments  of  no  more  than  100  words  (often  much  less),  so  that  every  word  within  a  chunk  is  visible  on  a  monitor  screen.  

  Two  or  more  chunks,  when  linked  electronically,  form  a  stack.  

  Scrolling:  information  retrieval  by  downloading    Provide  internal  links  

Eye  Track  Studies  

  Poynter  Eye  track  Study  2007  (videos)  

  Jacob  Nielsen’s  F-­‐Pattern  

Source:  Nielsen,  J.  (2006),  F-­‐Shaped  Pattern  for  Reading  Web  Content.  

10/7/10

3

Implication  of  the  F-­‐Pattern  

  Users  scan  the  text.  

  The  first  two  paragraphs  must  state  the  most  important  information.  

  Start  subheads,  paragraphs,  and  bullet  points  with  information-­‐carrying  words  that  users  will  notice  when  scanning  down  the  left  side  of  your  content  in  the  final  stem  of  their  F-­‐behavior.  

Scannable  Text  

  Highlighted  keywords  (hypertext  links,  font  variation  and  color  change)  

  Meaningful  sub-­‐headings    

  Bulleted  lists    One  idea  per  paragraph  

  The  inverted  pyramid  style,  starting  with  the  conclusion  

  Half  the  word  count  (or  less)  than  conventional  writing  

How  Users  Read  on  the  Web  

Version   Guidelines  Followed   usability  improvement  

No.  1   promo)onal  wri)ng   0%  

No.  2   concise  text   58%  

No.  3   scannable  layout   47%  

No.  4   objec)ve  language   27%  

No.  5   combined  version     124%  

Source: Nielsen, J. (1997). How Users Read on the Web.