The Anatomy of a Great Tutorial
A few months ago, I wrote an article here on SpyreStudios, entitled “Content Mosaic: The 6 Most Common Posts on Design Blogs”. The title makes it clear that I outlined what I perceived to be the six most common types of posts that we see published on design blogs all across the internet. One of these types is the tutorial, which continues to maintain its immense popularity.
That being said, however, not all tutorials are created equal. Some are very good. Some are great. Still others seem to fall flat on their face and hardly seem worth the server space they’re saved on.
So, in this article, I would like to draw on my own experience as both an author and a reader of tutorials and offer some of my personal insight into what I think makes a strong and effective tutorial.
Target an Audience
The first thing that any tutorial author has to do in order to create an effective article is to both establish and understand their target audience. In other words, who are you writing to? If you are composing a Photoshop tutorial, are you targeting designers, photographers or digital artists? Are you writing for amateurs or professionals, newbies or advanced users?
This is important to know because it should have a direct effect on the way you compose the piece. If it is directed at people with a minimal amount of experience, then you may need to dig into some of the basics of how Photoshop works. On the other hand, if you are writing to a more experienced audience, it might be safer to assume a certain familiarity with the application, allowing you to gloss over the basics and really focus on the meat of the technique that you are teaching.
Knowing your audience can also help improve overall engagement. A really basic article is likely to bore advanced users, while a really advanced article is likely to confuse or intimidate beginners. Flip those around, however, and you have a perfect match.
Of course, when discussing about tutorials on the internet, it’s impossible to know the exact experience level of every single visitor, but most site owners have a pretty good idea of who their general target audience is. If you’re writing tutorials for your own site, get to know your readers to determine what level to write at. If you’re writing for a third party site, you can always talk to the owner and ask him or her about their general audience.
A good tutorial also has a logical structure. I don’t think it would come as much of a surprise to say that tutorials should be broken down into logical steps, since virtually every tutorial that I have read on the net is structured this way. That being said, however, there are good breakdowns and non-so-good breakdowns.
In my view, a tutorial should be structured in meaningful steps. There is really no need to create a new step for each separate action. For example, if you are adding several different layer styles to an element in Photoshop, a good tutorial will not break these all out into separate steps (at least not without good reason). Instead, it would likely consider these actions in a single step, since they are all conceptually related.
On the other hand, however, steps should still be manageable. A good tutorial should not have excessively long steps that take minutes and minutes to read and process. That would just make it difficult to read and/or work through, thereby lessening the overall efficiency and approachability of the piece.
Another key element of a great tutorial is to provide good, quality examples to help clarify what is being taught. In many cases, this can be achieved with screenshots that show the development of a design or effect through the various steps. These screenshots should be easily understood and recognizable. It can also be useful to add a bit of extra detail or information, highlighting a particular segment of the screenshot or creating visual differentiation.
The point is to use these shots as a means of clarifying the text.
With other kinds of tutorials, such as those dealing with coding, examples may come in the form of code snippets. In these cases, it’s still important to keep the examples clear and understandable. Use descriptive names for any use-defined segments of the code, and employ comments to help break up longer blocks or to provide helpful explanations.
Basically, any information you can provide within the tutorial to make the discussion clearer and easier to understand will generally help to improve the overall quality. Of course, this is only true within reason. There does come a point when you start approaching information overload. You should try to avoid that.
Demos and Downloads
Another great way of improving the overall quality of a tutorial is to provide working demos or downloadable files. You can have all the copy and explanation in the world, but sometimes nothing quite beats being able to get your hands on something and actually play with it.
In the case of demos, I would generally say that the best thing to do is to keep it simple. Show what you need to show, and do it well. Don’t go adding too much extra stuff in an effort to “jazz up” the demo. The reader or user wants to see a particular technique or effect in action, without being distracted by a wide range of other, meaningless “stuff”.
Also, be explicit about support. If you’re writing a tutorial about the latest CSS3 techniques, then be upfront about what browsers your demo is intended to work in, and which browsers probably won’t support it. This way you’re not setting users of those unsupported browsers up for disappointment.
Downloads are another great way of offering readers something to play with. If a tutorial is more about how to create a particular kind of design in a program like Illustrator or Photoshop, then providing the working files as a downloadable archive gives readers a great way to play with the effect themselves. If the tutorial is more code-oriented, a downloadable library can provide a valuable resource that can streamline readers’ workflow, giving them snippets that they can customize and integrate into their own work.
The Larger Picture
Okay, while knowing your target audience, structuring your tutorial, providing clear examples and offering demos and/or downloads are all important elements to creating a great tutorial, this last point is, in my opinion, by far the most critical. A great tutorial should be about more than itself. For example, if you are writing a tutorial about creating a wicked website layout in Photoshop, the tutorial should be about more than just creating that particular layout.
Instead, the tutorial should provide practical knowledge about creating web layouts in general. It could discuss the intricacies of working with grids and guides, or about using shapes and clipping masks to create highly editable layouts. Regardless of its actual subject, a great tutorial will provide the reader with skills that they can then take and apply to their own work!
After all, how often do you think someone will need to create the exact same effect that you’ve covered in your tutorial? It happens, but is probably a relatively rare occurrence. More often than not, visitors will love a tutorial because it teaches them a more general concept that they can add to their arsenal of tools, or which may provide a solution to a current design.
And in my view, any tutorial that helps solve a problem is a tutorial that was well worth reading!
As someone who has been writing pretty much all my life, I can tell you that it’s not easy – or at least it’s not always easy (sometimes, though, words do just seem to pour out seemingly of their own free will). However, the need for content rarely coincides with these fleeting moments of “easy” writing, either in terms of ratio or timing. This is when having a good, solid understanding of how to structure an article can be a huge benefit.
So, even if you’re not feeling all that engaged the next time you sit down to write a tutorial, try keeping these five concepts firmly in your mind. If you do, you should already have the framework for creating a good, solid article. Mix in a little enthusiasm and passion for the subject matter and I’m sure it will be great!
Your Turn to Talk
Okay guys, now it’s time for you to have your say! What do you think of this anatomy lesson? Are there any more important elements that I’ve left out? If so, bring them to our attention with a comment!
Also, how would you all feel about turning this post into the first of a series of “anatomy” posts where we discuss the important elements of some other types of articles? Have your say!