Does providing screenshots help with documentation manual?

Question

I am documenting the site administrator and content creator roles for my web application which I am working on. The documentation manual walks the readers through how to add, delete, update members, news articles, and how to configure the site with different options.

I had one of the developers say that I should add screenshots of the pages on how to do these actions within the documentation also. Which, I think he is right, but at the same time, I do not.

I know if that the user can read, then he will be able to follow my instructions in my ordered list.

Example:

1. First Step, click here
2. Second Step, click this
3. Third Step, type this

Should I add screenshots to the documentation manual? Would it also help with the ordered list of instructions to clarify things for users? Or should I stay with my method of using text only?

Answer 1

This conclusions from Michael Hughes might be helpful for you to decide when to include a screenshot and when not to:

So where does this leave me?

I am going to be more open to including screen shots where they do the following:

• Help reassure the user that where they are in the UI is the right place to be
• Help call attention to a specific area of a complex UI
• Support an example that is hard to visualize otherwise, e.g., setting up a desktop configuration

So where they add value, I'll be more willing to tackle those aspects that make my job harder (e.g., documentation maintenance). But just as I would with words, I'll cut out the obvious and whatever does not add value.

I prefer an additive approach (put it in only when the words seem inadequate) over a subtractive approach (take it out if it seems superfluous). In other words, I'll be more open to screen shots in the future, but they have to work themselves into the document, not just be their by entitlement until expelled.

Answer 2

You should use the screenshot in below case

1. When you cant explain the screen in words properly i.e. if there are more similar option on the screen which might confuse the user.

2. When user will get navigate from one screen to another screen which are non consistent i.e. major UI change or you are redirecting user to different application.

Also, you might feel the putting screenshot will make the documentation bulky. But as user perspective it's always good to include the screenshot but you make sure you include required details only in screenshot. No need to include the part of the screen which is not required at that particular moment. Contextual use of screenshot is good while taking care of above mentioned point.

P.S. The goal is to reduce cognitive load on user's mind.

Answer 3

The best thing to do is make the application self-explanatory, so people just know what and where to click.

And on those screens where that doesn't work you can include the manual in the application directly, add hints, example images, animations, whatever needed to understand the task.

Having the application and the help in the same place will alsp help you update it whenever you change the application.

Nobody is really reading manuals anymore and even if they are, you will have probably missed the relevant points when writing it. Easy to add in an application, hard in a delivered manual.

Answer 4

If you wanted to minimize the number of screenshots, you could always use CSS to display boxes over regions of the screenshot where you want to draw the user's attention to, like here: http://www.bioinformatics.org/librarian/screenshots.php. It'll take some work, but the display is beautiful and limits noise in the documentation.

Answer 5

If its like a training/ "how to" kind of content that you are preparing screenshots will be helpful.

If you have to add a member for instance you may write: 'Select feature > click on add > enter details > click on submit' and if you provide a screen supporting that action following these instructions then it will make it easier for the user to relate the action with the screen.

Now there may be simple action like deleting user/ article and its right there less likely to be missed out. In that case you can use just the visual artifact instead of adding the entire screen: 'Select feature > click on delete' and provide just the artifact that the user has to click.

If you have multiple actions which use the same screen like add/ update user details, you can provide the screen shot while explaining either of the modules and use it as a reference in the other. However this approach is subjective to the interface you provide for the user and the net result the actions have on the system (for above case for both the actions the user information is updated)

Answer 6

I think one of the main things with designing user manuals is knowing your audience. If you are engaging with an audience that you believe are familiar with the system then written instructions are acceptable. However if the users are new to the system/UI then screenshots can make it clearer.

Some users learn in different ways. Some people respond better to visual images than they do list of instructions and some by verbal instructions. By encompassing as many learning styles into your manual the easier it is for the user to understand (although audio sometimes increases the time so I would personally avoid)