Writing engaging tutorials

62
Writing engaging tutorials Making them come back for more Christian Heilmann Yahoo! Frontend Engineering Summit UK December 2007 http://creativecommons.org/licenses/by-sa/3.0/

description

My final talk at the Yahoo! Frontend Engineering summit in London. This is a presentation containing tips and ideas about how you can write successful, engaging tutorials for online use.

Transcript of Writing engaging tutorials

Page 1: Writing engaging tutorials

Writing engaging tutorialsMaking them come back for more

Christian HeilmannYahoo! Frontend Engineering Summit UK

December 2007

http://creativecommons.org/licenses/by-sa/3.0/

Page 2: Writing engaging tutorials

There is no perfect tutorial.

Page 3: Writing engaging tutorials

… as there is no “one”audience.

Page 4: Writing engaging tutorials

One thing to keep in mind is the perceived speed of the

internet and the impatience of developers.

Page 5: Writing engaging tutorials

We are much more patient when it comes to assembling

a plumbing unit in our flat than when it comes to using

other people’s code.

Page 6: Writing engaging tutorials

Developers work with the IKEA model when using code

that is not theirs:

Page 7: Writing engaging tutorials

Developers work with the IKEA model when using code

that is not theirs:

Open it, mess around, start reading when you get stuck.

Page 8: Writing engaging tutorials

Developers work with the IKEA model when using code

that is not theirs:

Open it, mess around, start reading when you get stuck.

Complain when you find a channel that answers.

Page 9: Writing engaging tutorials

Readers I encountered:

Page 10: Writing engaging tutorials

Readers I encountered:

– Give me all the information, I find what I need.

Page 11: Writing engaging tutorials

Readers I encountered:

– Give me all the information, I find what I need.

– Get me a step-by-step instruction how to do things

Page 12: Writing engaging tutorials

Readers I encountered:

– Give me all the information, I find what I need.

– Get me a step-by-step instruction how to do things

– I want to click on things and see how they work, then read.

Page 13: Writing engaging tutorials

Readers I encountered:

Page 14: Writing engaging tutorials

Readers I encountered:

– I need something to copy + paste and get on with it myself

Page 15: Writing engaging tutorials

Readers I encountered:

– I need something to copy + paste and get on with it myself

– I don’t get it, can you show me?

Page 16: Writing engaging tutorials

Readers I encountered:

– I need something to copy + paste and get on with it myself

– I don’t get it, can you show me?– Doesn’t work for me, I know better

and this never worked in my professional environment.

Page 17: Writing engaging tutorials

Catering for them all is tricky.

Page 18: Writing engaging tutorials

However, readers are not Pokemons – you don’t need

to catch them all.

Page 19: Writing engaging tutorials

Start with the basics

Page 20: Writing engaging tutorials

Start with the basics

– Why is this a good idea– Which real-life day to day web

development problem is solved by it.– What is the level of this tutorial – what

do you need to know.– Show a prominent link to a working

example – if there is a visual outcome use a linked screenshot.

Page 21: Writing engaging tutorials

Start with the basics

– Why is this a good idea– Which real-life day to day web

development problem is solved by it.– What is the level of this tutorial – what

do you need to know.– Show a prominent link to a working

example – if there is a visual outcome use a linked screenshot.

Page 22: Writing engaging tutorials

Start with the basics

– Why is this a good idea– Which real-life day to day web

development problem is solved by it.– What is the level of this tutorial – what

do you need to know.– Show a prominent link to a working

example – if there is a visual outcome use a linked screenshot.

Page 23: Writing engaging tutorials

Start with the basics

– Why is this a good idea– Which real-life day to day web

development problem is solved by it.– What is the level of this tutorial – what

do you need to know.– Show a prominent link to a working

example – if there is a visual outcome use a linked screenshot.

Page 24: Writing engaging tutorials

Start with the basics

– Offer links to full documentation elsewhere (W3C, MSDN, YDN)

– Offer the download package with code examples or image templates upfront.

– Give an estimate as to how long it should take to go through this tutorial.

– Say your name, a way to contact you and when you wrote this.

Page 25: Writing engaging tutorials

Start with the basics

– Offer links to full documentation elsewhere (W3C, MSDN, YDN)

– Offer the download package with code examples or image templates upfront.

– Give an estimate as to how long it should take to go through this tutorial.

– Say your name, a way to contact you and when you wrote this.

Page 26: Writing engaging tutorials

Start with the basics

– Offer links to full documentation elsewhere (W3C, MSDN, YDN)

– Offer the download package with code examples or image templates upfront.

– Give an estimate as to how long it should take to go through this tutorial.

– Say your name, a way to contact you and when you wrote this.

Page 27: Writing engaging tutorials

Start with the basics

– Offer links to full documentation elsewhere (W3C, MSDN, YDN)

– Offer the download package with code examples or image templates upfront.

– Give an estimate as to how long it should take to go through this tutorial.

– Say your name, a way to contact you and when you wrote this.

Page 28: Writing engaging tutorials

Start with the basics

– Offer links to full documentation elsewhere (W3C, MSDN, YDN)

– Offer the download package with code examples or image templates upfront.

– Give an estimate as to how long it should take to go through this tutorial.

– Say your name, a way to contact you and when you wrote this.

Page 29: Writing engaging tutorials

Offer landmarks

Page 30: Writing engaging tutorials

Offer landmarks

– Offer a “quick jump / table of contents”feature – this also allows bookmarking

– Cut the tutorial up into logical steps / units with useful headings (don’t try to be funny)

– Add a link to the state of the code at each step – so people can follow the changes without needing to copy and paste.

Page 31: Writing engaging tutorials

Offer landmarks

– Offer a “quick jump / table of contents”feature – this also allows bookmarking

– Cut the tutorial up into logical steps / units with useful headings (don’t try to be funny)

– Add a link to the state of the code at each step – so people can follow the changes without needing to copy and paste.

Page 32: Writing engaging tutorials

Offer landmarks

– Offer a “quick jump / table of contents”feature – this also allows bookmarking

– Cut the tutorial up into logical steps / units with useful headings (don’t try to be funny)

– Add a link to the state of the code at each step – so people can follow the changes without needing to copy and paste.

Page 33: Writing engaging tutorials

Language

Page 34: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I”, instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 35: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I”, instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 36: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I”, instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 37: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I”, instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 38: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I”, instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 39: Writing engaging tutorials

Language

– PBE - Plain Bloody English – Explain your TLAs– Explain product names and special

terms– Use short sentences. – Avoid the “I” - instead invite the reader

with a “then you can do…” or a “Let’s…”

Page 40: Writing engaging tutorials

Credibility

Page 41: Writing engaging tutorials

Credibility

– Back up your statements with examples.– Back up your statements with third party

resources.– Never hush up errors you made. If

feedback changes your tutorial, thank the commenter and add the changes. <del>/<ins>

Page 42: Writing engaging tutorials

Credibility

– Back up your statements with examples.– Back up your statements with third party

resources.– Never hush up errors you made. If

feedback changes your tutorial, thank the commenter and add the changes. <del>/<ins>

Page 43: Writing engaging tutorials

Credibility

– Back up your statements with examples.– Back up your statements with third party

resources.– Never hush up errors you made. If

feedback changes your tutorial, thank the commenter and add the changes. <del>/<ins>

Page 44: Writing engaging tutorials

Credibility

– Back up your statements with examples.– Back up your statements with third party

resources.– Never hush up errors you made. If

feedback changes your tutorial, thank the commenter and add the changes. <del>/<ins>

– Have an editor / reviewer

Page 45: Writing engaging tutorials

Leaving them hungry

Page 46: Writing engaging tutorials

Leaving them hungry

– Offer extra problems / other application ideas at the end and let people try them out.

– Hint at more tricks in the same vain or link to other tutorials.

– Show high-class solutions using that trick (which awesome sites use it)

Page 47: Writing engaging tutorials

Leaving them hungry

– Offer extra problems / other application ideas at the end and let people try them out.

– Hint at more tricks in the same vain or link to other tutorials.

– Show high-class solutions using that trick (which awesome sites use it)

Page 48: Writing engaging tutorials

Leaving them hungry

– Offer extra problems / other application ideas at the end and let people try them out.

– Hint at more tricks in the same vain or link to other tutorials.

– Show high-class solutions using that trick (which awesome sites use it)

Page 49: Writing engaging tutorials

Traps to avoid!

– Don’t offer the solutions to code exercises, people will only copy + paste and learn nothing.

– Don’t cut up code into non-executable chunks, show the whole script then repeat the parts bit-by-bit.

– Stick to one solution per tutorial and explain this one well.

Page 50: Writing engaging tutorials

Traps to avoid!

– Don’t offer the solutions to code exercises, people will only copy + paste and learn nothing.

– Don’t cut up code into non-executable chunks, show the whole script then repeat the parts bit-by-bit.

– Stick to one solution per tutorial and explain this one well.

Page 51: Writing engaging tutorials

Traps to avoid!

– Don’t offer the solutions to code exercises, people will only copy + paste and learn nothing.

– Don’t cut up code into non-executable chunks, show the whole script then repeat the parts bit-by-bit.

– Stick to one solution per tutorial and explain this one well.

Page 52: Writing engaging tutorials

Traps to avoid!

– Don’t offer the solutions to code exercises, people will only copy + paste and learn nothing.

– Don’t cut up code into non-executable chunks, show the whole script then repeat the parts bit-by-bit.

– Stick to one solution per tutorial and explain this one well.

Page 53: Writing engaging tutorials

Maintenance

Page 54: Writing engaging tutorials

Maintenance

– Don’t leave your tutorials to collect dust.

– If they become outdated, find a better, up-to-date solution and link or even redirect to this one.

– We have more than enough information graveyards.

Page 55: Writing engaging tutorials

Maintenance

– Don’t leave your tutorials to collect dust.

– If they become outdated, find a better, up-to-date solution and link or even redirect to this one.

– We have more than enough information graveyards.

Page 56: Writing engaging tutorials

Maintenance

– Don’t leave your tutorials to collect dust.

– If they become outdated, find a better, up-to-date solution and link or even redirect to this one.

– We have more than enough information graveyards.

Page 57: Writing engaging tutorials

What are you in for?

– Last but not least, it is not about you!

– You will get positive and negative comments targeted at you and not the subject.

– Don’t take any of these serious. – Most of your readers will never

contact you or take part.

Page 58: Writing engaging tutorials

What are you in for?

– Last but not least, it is not about you!

– You will get positive and negative comments targeted at you and not the subject.

– Don’t take any of these serious. – Most of your readers will never

contact you or take part.

Page 59: Writing engaging tutorials

What are you in for?

– Last but not least, it is not about you!

– You will get positive and negative comments targeted at you and not the subject.

– Don’t take any of these serious. – Most of your readers will never

contact you or take part.

Page 60: Writing engaging tutorials

What are you in for?

– Last but not least, it is not about you!

– You will get positive and negative comments targeted at you and not the subject.

– Don’t take any of these serious. – Most of your readers will never

contact you or take part.

Page 61: Writing engaging tutorials

What are you in for?

– Last but not least, it is not about you!

– You will get positive and negative comments targeted at you and not the subject.

– Don’t take any of these serious. – Most of your readers will never

contact you or take part.

Page 62: Writing engaging tutorials

THANKS!

http://[email protected]