0
Today I would like to review some design/dev blogs with great characteristics of usable “How To” type articles. There’s an abundance of tutorial style articles, but nothing is worse that hitting a tutorial that confuses it’s users. If you are starting up your own blog, or already running one, I hope this may help you shape your tutorials so it can be more effective to your visitors. Here are some quick points that I find useful when taking the tutorial articles:
- Solid Introduction
- Clear Preview
- Clear “View Demo” Link
- Quality Demonstration of Final Product
- Clear Typography
- Clear Code Samples
- Effective Visual Aids
1. Solid Introduction
Users will start scanning as soon as they hit your article, and its crucial that we clearly state what the tutorial is about, and what they should expect. Below are some great examples of tutorials with great introduction and previews of the topic.
Vector Tuts does a great job in outlining exactly what the user needs to know before they take this tutorial. What subject are we on? How long will it take to take this tutorial? What is the learning curve? As soon as a user lands on their tutorial, with a glance they will have a good idea if this is a good tutorial suited for them or not.
Jeff Star of Perishable Press outlines in list form exactly what is going to be covered. This is specially useful when going over multiple topics/points in a tutorial. A user is able to see the overview and this information is easily scannable.
2. Clear Preview
Nick La of Web Designer Wall does a beautiful job with his preview images. Not only are the tutorials top notch, but the way he presents his tutorials are highly effective in motivating the users to continue. Most users will judge the quality of your tutorial by the way you present it. I highly recommend you put just as much love into your preview shots and demos as you do with your instructions.
I love how Remy Sharp of jQuery for Designers offers a screencast on top of his live demo and preview image. This gives a variety of options in viewing the outcome of this tutorial. This method is effective since it is applicable for all types of learning styles.
3. Clear “View Demo” Link
One of the most frustrating things when scanning a tutorial is not being able to find the “Demo” link. The title of the article intrigues you to learn more but in many cases we want to know exactly what the outcome is in a working format. Make all “demo” links easy to find and scannable, it is probably one of the first things a user looks for in a tutorial.
Tutorialzine and Net Tuts has big clear buttons right at the beginning to demo their tutorial. Clear, loud, and easy to find.
4. Quality Demonstration of Final Product
As stated before, putting some time into making your demo look sharp is always a great idea. Good presentation is a big contributing factor to a successful tutorial.
5. Clear Typography
It’s a huge turn off when you stumble across a tutorial with bad typography and crammed content. Check out Nick La’s guide on Typographic Contrast and Flow for a good break down.
Break up your tutorial into logical sections, separating each section with a clear heading. The easier it is to scan the page, the more inviting it is to continue reading.
6. Clear Code Samples
When providing code samples, its important to have supporting comments and clear view of the actual code. This may be a personal choice, but I personally find line-breaks in code hard to follow. If a line of code is too long to fit in the code box, then a scroll bar or expanding the box is a good idea. Here is good tutorial on a clean way to expand your code samples on hover: Simple jQuery Solution To A Simple Problem. I also wrote a simple tutorial on Styling Code Snippets with CSS.
7. Effective Visual Aids
Some are visual learners and some are not. By providing illustrations and visual aids to demonstrate your techniques, you are able to reach out to a wider audience and their learning styles. Take the time to break down your tutorial and illustrate your thoughts, this will not only be good exercise for your design skills, but it helps tremendously for those who are visual learners.
Chris Coyier of CSS Tricks breaks down how to calculate CSS Specificity Values. The color coordination in the demonstration is a great way to show the relations.
I really liked how David Desandro demonstrated his blue print of his “Curtis Type”. You can clearly see how each shape made up the letter “R”.
The anatomy of Nick La’s beautiful CSS gradient buttons are clearly demonstrated here with a close up. Each property is broken down supported with an effective visual aid.
Louis Lazaris makes the z-index property easy to understand with this visual aid. For a complete beginner, understanding absolute positioning and z-index is usually not an easy task. Good visual aids like this makes the lesson much easier to understand.
Your Thoughts?
As designers and developers, we have all taken some sort of tutorial online through blogs and community articles. What are some traits of a useable “How To” article? Do you have any advice you would like to share?
