How to take your writing
for the web to the next level
This workshop has one inspiration
   and three sets of source materials

                          The writing challenges that
                          we encounter, through work
                          or in professional life




Ginny Redish‟s book http://slideshare.net/cjforms   http://editingthatworks.com
Introductions
• Your name and role
• Your aims for today‟s workshop




                                   3
Introductions – part 2.
Getting started on writing
• Write a 20-word explanation
  of the piece of writing you chose for today
   – Why you chose it
   – What you aim to achieve with it




                                                4
Part A: From writing to great writing
         1. Understand context of use
         9. Rest it then test it

Agenda
         Part B: Edit for the web
         2. Choose what to say
         3. Slash everything else
         4. Edit sentences
         5. Put into logical order
         6. Demolish walls of words
         7. Choose links
         8. Check it‟s consistent
         9. Rest it then test it
                                            5
Let‟s share some stories
• You use web sites that others have developed.
   – When did you last go to the web?
   – Why did you go to the web?
   – What were you trying to do or what were you looking for?
• Share your story with your neighbour




                                                                                        6
                 Ginny Redish. This comes from her presentation:
                 http://www.slideshare.net/GinnyRedish/writing-web-content-that-works
Think about different types of reading
• Think of 10 things you have read today
   – Web, electronic, paper, at home, at work, somewhere else
• Did you read to learn or read to use?
   – Read to learn = focus, read continuously, retain
   – Read to use = skim, scan, pick
• What type of reading did you do in your web story?




                                                                7
Great web writing lets us…




                                                            Act
                    Understand
                    what we find
      Find what
      we need
                                                                                            8
                    Inspiration: Ginny Redish‟s definition of usability   Images: shutterstock.com
Part A: From writing to great writing
         1. Understand context of use
         9. Rest it then test it

Agenda
         Part B: Edit for the web
         2. Choose what to say
         3. Slash everything else
         4. Edit sentences
         5. Put into logical order
         6. Demolish walls of words
         7. Choose links
         8. Check it‟s consistent
         9. Rest it then test it
                                            9
10
Illustrations by Francis Rowland
1. Understand context of use
• Who are you writing for?
• Why will they use what you create?
• When and where?
• How will they use it?
• What are you trying to achieve?




                                                                              11
                                       Picture credits: Flickr @chelmsfordpubliclibrary
1. Understand context of use
• Who are you writing for?
   – Choose a photograph of someone you are writing for
   – Write the story of who that person is
• Why, when and where
  will the users use what you create?
   – Add that to your story




                                                          12
“Usability testing” =
 get someone to use it,
 while you watch




                    Picture credit: infodesign.com.au   13
Try some testing
• Decide on
   – Who is the user and
   – Who will watch
• If you are the user
   – Please use this document
   – As you work with it, please identify any problems
   – At the end, explain the key messages of the document
• If you will watch
   – Write notes
   – You will report back on the key messages to the group



                                                             14
2. Choose what to say




                        15
2. Choose what to say
• Decide on the key message of this text
• Apply a (temporary) heading to each paragraph
• Remove any paragraphs that don‟t help
• Put the best bit first
   – Think „bite, snack, meal‟




                                                  16
17
Science doesn‟t have to be verbose




                                     18
Science doesn‟t have to be verbose




                                     19
3. Slash everything else
• Slash by half, slash by half again
• Use short paragraphs and short sentences
• Try deleting the first paragraph or sentence




                                       Picture credit: John Sankey   20
3. Slash everything else
• Don‟t rewrite the text just yet
• Decide whether to cut any paragraph
• Decide which order the paragraphs should go in
• Decide whether to cut any sentence,
  or part of a sentence
   – Think „bite, snack, meal‟ (again)




                                                   21
22
4. Edit sentences

• Be active
• Use action verbs, not nouns that hide verbs
• Be positive
• Use personal pronouns or name the actors




                                                                             23
                               Picture credit: Flickr Canadian Film Centre
4. Edit sentences
• Identify which of these sentences are in passive voice
• Edit these sentences to:
   – Turn passive sentence to active ones
   – Name the actors
   – Make the text seem more approachable
• (Bonus task: decide if the text is in the right order)




                                                           24
Part A: From writing to great writing
         1. Understand context of use
         9. Rest it then test it

Agenda
         Part B: Edit for the web
         2. Choose what to say
         3. Slash everything else
         4. Edit sentences
         5. Put into logical order
         6. Demolish walls of words
         7. Choose links
         8. Check it‟s consistent
         9. Rest it then test it
                                            25
A short exercise based on Dixon, 1987
• Dixon, P. 1987. "The Processing of Organizational and
  Component Step Information in Written Directions"
  Journal of Memory and Language, 26, pp24-35,
  Academic Press, Inc.




                                                          26
27
5. Put into logical order
• IF before THEN
• List conditions separately
• First things first, second things second
• Try writing like a recipe




                                             Picture credit: Flickr _Raúl_   28
5. Put into logical order
• This document has several chunks
• Organise them into logical order:
   – First things first
   – Second things second
   – Think „bite, snack, meal‟ (again)




                                         29
30
6. Demolish walls of words
• Use bulleted lists for items or choices
• Use numbered lists and imperatives for instructions
• Use tables for "if, then" or "to do that, do this" sentences
• Use highlighting techniques, but don't overuse them
• Use visuals when they help




                                            Picture credit: Flickr G A R N E T   31
6. Demolish walls of words
• Here is a chunk of a document
• Split it up




                                  32
Example from Will Stahl-Timmins
Stahl-Timmins, W., Pahl, S., Depledge, M., and Lilley, A. (2012)
Seeing is believing: the comparative effects of textual vs visual presentation of the health impacts
of climate change on attitudes and behavioural intentions of the UK general public                     33
Information Design Conference, Greenwich
Example from Will Stahl-Timmins, Information Design Conference 2012
                                                                  34
Part A: From writing to great writing
         1. Understand context of use
         9. Rest it then test it

Agenda
         Part B: Edit for the web
         2. Choose what to say
         3. Slash everything else
         4. Edit sentences
         5. Put into logical order
         6. Demolish walls of words
         7. Choose links
         8. Check it‟s consistent
         9. Rest it then test it
                                            35
36
7. Meaningful links
• Give a reward for each click
• Write meaningful links
• Position important links higher




           Picture credit: Flickr jek in the box   37
7. Choose links
• Review the list of links on this page
• Rewrite them so that:
   – You would know whether you want to click it
   – You give a reward for each click




                                                   38
39
8. Check it‟s consistent
• Launch and land on the same name
• Call each concept by one name
• Use different names for
  different concepts




                                  Francis Rowland told me about this picture.   40
                                  We haven‟t been able to find its origin.
                                  If you know it, please let me know.
8. Check it‟s consistent
• Review the links on this page to see
  whether they have the correct titles.
   – Do any of them need better titles?
   – If so, write the new title
• (Harder challenge: rewrite the page)




                                          41
Biologists know that these different
types of strand both represent DNA.
Non-biologists are confused




 Example from Marek Kultys
 Kultys, M. (2012)
 Two heads are better than one: a first-hand report on a collaborative approach to information design and sciences   42
 Information Design Conference, Greenwich
Marek‟s simplified diagram shows similar strands




 Example from Marek Kultys
 Kultys, M. (2012)                                                                                                   43
 Two heads are better than one: a first-hand report on a collaborative approach to information design and sciences
 Information Design Conference, Greenwich
Source: Marek Kultys www.marekkultys.com   44
Marek‟s simplified
diagram is very
successful.




                 45
46
9. Rest it and test it
• Rest: leave it alone for a few hours, then review.
• Test: try it out on someone, preferably a real user.




                                     Picture credit: infodesign.com.au   47
Try some testing
• Decide on
   – Who is the user and
   – Who will watch
• If you are the user
   – Please use this document
   – As you work with it, please identify any problems
   – At the end, explain the key messages of the document
• If you will watch
   – Write notes
   – You will report back on the key messages to the group



                                                             48
http://www.editingthatworks.com




                                  49
Caroline Jarrett
Twitter @cjforms
http://www.slideshare.net/cjforms
carolinej@effortmark.co.uk




                                    50

Write clearly: take your web writing to the next level

  • 1.
    How to takeyour writing for the web to the next level
  • 2.
    This workshop hasone inspiration and three sets of source materials The writing challenges that we encounter, through work or in professional life Ginny Redish‟s book http://slideshare.net/cjforms http://editingthatworks.com
  • 3.
    Introductions • Your nameand role • Your aims for today‟s workshop 3
  • 4.
    Introductions – part2. Getting started on writing • Write a 20-word explanation of the piece of writing you chose for today – Why you chose it – What you aim to achieve with it 4
  • 5.
    Part A: Fromwriting to great writing 1. Understand context of use 9. Rest it then test it Agenda Part B: Edit for the web 2. Choose what to say 3. Slash everything else 4. Edit sentences 5. Put into logical order 6. Demolish walls of words 7. Choose links 8. Check it‟s consistent 9. Rest it then test it 5
  • 6.
    Let‟s share somestories • You use web sites that others have developed. – When did you last go to the web? – Why did you go to the web? – What were you trying to do or what were you looking for? • Share your story with your neighbour 6 Ginny Redish. This comes from her presentation: http://www.slideshare.net/GinnyRedish/writing-web-content-that-works
  • 7.
    Think about differenttypes of reading • Think of 10 things you have read today – Web, electronic, paper, at home, at work, somewhere else • Did you read to learn or read to use? – Read to learn = focus, read continuously, retain – Read to use = skim, scan, pick • What type of reading did you do in your web story? 7
  • 8.
    Great web writinglets us… Act Understand what we find Find what we need 8 Inspiration: Ginny Redish‟s definition of usability Images: shutterstock.com
  • 9.
    Part A: Fromwriting to great writing 1. Understand context of use 9. Rest it then test it Agenda Part B: Edit for the web 2. Choose what to say 3. Slash everything else 4. Edit sentences 5. Put into logical order 6. Demolish walls of words 7. Choose links 8. Check it‟s consistent 9. Rest it then test it 9
  • 10.
  • 11.
    1. Understand contextof use • Who are you writing for? • Why will they use what you create? • When and where? • How will they use it? • What are you trying to achieve? 11 Picture credits: Flickr @chelmsfordpubliclibrary
  • 12.
    1. Understand contextof use • Who are you writing for? – Choose a photograph of someone you are writing for – Write the story of who that person is • Why, when and where will the users use what you create? – Add that to your story 12
  • 13.
    “Usability testing” = get someone to use it, while you watch Picture credit: infodesign.com.au 13
  • 14.
    Try some testing •Decide on – Who is the user and – Who will watch • If you are the user – Please use this document – As you work with it, please identify any problems – At the end, explain the key messages of the document • If you will watch – Write notes – You will report back on the key messages to the group 14
  • 15.
    2. Choose whatto say 15
  • 16.
    2. Choose whatto say • Decide on the key message of this text • Apply a (temporary) heading to each paragraph • Remove any paragraphs that don‟t help • Put the best bit first – Think „bite, snack, meal‟ 16
  • 17.
  • 18.
    Science doesn‟t haveto be verbose 18
  • 19.
    Science doesn‟t haveto be verbose 19
  • 20.
    3. Slash everythingelse • Slash by half, slash by half again • Use short paragraphs and short sentences • Try deleting the first paragraph or sentence Picture credit: John Sankey 20
  • 21.
    3. Slash everythingelse • Don‟t rewrite the text just yet • Decide whether to cut any paragraph • Decide which order the paragraphs should go in • Decide whether to cut any sentence, or part of a sentence – Think „bite, snack, meal‟ (again) 21
  • 22.
  • 23.
    4. Edit sentences •Be active • Use action verbs, not nouns that hide verbs • Be positive • Use personal pronouns or name the actors 23 Picture credit: Flickr Canadian Film Centre
  • 24.
    4. Edit sentences •Identify which of these sentences are in passive voice • Edit these sentences to: – Turn passive sentence to active ones – Name the actors – Make the text seem more approachable • (Bonus task: decide if the text is in the right order) 24
  • 25.
    Part A: Fromwriting to great writing 1. Understand context of use 9. Rest it then test it Agenda Part B: Edit for the web 2. Choose what to say 3. Slash everything else 4. Edit sentences 5. Put into logical order 6. Demolish walls of words 7. Choose links 8. Check it‟s consistent 9. Rest it then test it 25
  • 26.
    A short exercisebased on Dixon, 1987 • Dixon, P. 1987. "The Processing of Organizational and Component Step Information in Written Directions" Journal of Memory and Language, 26, pp24-35, Academic Press, Inc. 26
  • 27.
  • 28.
    5. Put intological order • IF before THEN • List conditions separately • First things first, second things second • Try writing like a recipe Picture credit: Flickr _Raúl_ 28
  • 29.
    5. Put intological order • This document has several chunks • Organise them into logical order: – First things first – Second things second – Think „bite, snack, meal‟ (again) 29
  • 30.
  • 31.
    6. Demolish wallsof words • Use bulleted lists for items or choices • Use numbered lists and imperatives for instructions • Use tables for "if, then" or "to do that, do this" sentences • Use highlighting techniques, but don't overuse them • Use visuals when they help Picture credit: Flickr G A R N E T 31
  • 32.
    6. Demolish wallsof words • Here is a chunk of a document • Split it up 32
  • 33.
    Example from WillStahl-Timmins Stahl-Timmins, W., Pahl, S., Depledge, M., and Lilley, A. (2012) Seeing is believing: the comparative effects of textual vs visual presentation of the health impacts of climate change on attitudes and behavioural intentions of the UK general public 33 Information Design Conference, Greenwich
  • 34.
    Example from WillStahl-Timmins, Information Design Conference 2012 34
  • 35.
    Part A: Fromwriting to great writing 1. Understand context of use 9. Rest it then test it Agenda Part B: Edit for the web 2. Choose what to say 3. Slash everything else 4. Edit sentences 5. Put into logical order 6. Demolish walls of words 7. Choose links 8. Check it‟s consistent 9. Rest it then test it 35
  • 36.
  • 37.
    7. Meaningful links •Give a reward for each click • Write meaningful links • Position important links higher Picture credit: Flickr jek in the box 37
  • 38.
    7. Choose links •Review the list of links on this page • Rewrite them so that: – You would know whether you want to click it – You give a reward for each click 38
  • 39.
  • 40.
    8. Check it‟sconsistent • Launch and land on the same name • Call each concept by one name • Use different names for different concepts Francis Rowland told me about this picture. 40 We haven‟t been able to find its origin. If you know it, please let me know.
  • 41.
    8. Check it‟sconsistent • Review the links on this page to see whether they have the correct titles. – Do any of them need better titles? – If so, write the new title • (Harder challenge: rewrite the page) 41
  • 42.
    Biologists know thatthese different types of strand both represent DNA. Non-biologists are confused Example from Marek Kultys Kultys, M. (2012) Two heads are better than one: a first-hand report on a collaborative approach to information design and sciences 42 Information Design Conference, Greenwich
  • 43.
    Marek‟s simplified diagramshows similar strands Example from Marek Kultys Kultys, M. (2012) 43 Two heads are better than one: a first-hand report on a collaborative approach to information design and sciences Information Design Conference, Greenwich
  • 44.
    Source: Marek Kultyswww.marekkultys.com 44
  • 45.
  • 46.
  • 47.
    9. Rest itand test it • Rest: leave it alone for a few hours, then review. • Test: try it out on someone, preferably a real user. Picture credit: infodesign.com.au 47
  • 48.
    Try some testing •Decide on – Who is the user and – Who will watch • If you are the user – Please use this document – As you work with it, please identify any problems – At the end, explain the key messages of the document • If you will watch – Write notes – You will report back on the key messages to the group 48
  • 49.
  • 50.