Organization may be the key component to clarity in a tutorial. Those users who need visuals to supplement your text need to not only be able to find the images, but mentally associate them with the description. Take this awk tutorial for example. While the website itself violates most of the web design principles we’ve discussed in class. As much as images in any other type of tutorial, written code is critical to understanding the material. It is not clear on some of these pages which lines of code go to which outputs or results, it’s not even clear what are supposed to be the outputs or results. On pages 5 and 6 he changes how code appears on the page from the only thing to a white background to more or less identical to the rest of the text on the page.
If the author of this tutorial had instead clearly grouped code, output, and text related to each step, and fixed the clear contrast problems, this tutorial may be useful. However as is, even those with experience with other code languages would likely find it near impossible to read. In this case the lack of contrast hides elements of the organization scheme making it even harder to read. In a way, a successful tutorial is actually multiple different types of tutorials that allow the reader to read along simultaneously. Even in a video tutorial, explaining vocally the visuals more than double the effectiveness of the video. In the case of coding tutorials, there are 3 parts, the explanation, the code for the user to compare what they’re doing to the right way, and when relevant, the output associated with code. If these aren’t grouped in a way for the reader to view them simultaneously, or near simultaneously, the reader likely won’t make the mental connection between each of the pieces and therefore must rely on one piece of the puzzle or another.