4 Preparing images for procedures
When using images in procedures, the pixel dimensions need to be as small as possible while keeping details as clear as possible.
When documenting programs with user interfaces, almost all steps will require an image of the program's screen or part of it. When an image is included in a step response, it needs to show enough of the expanse of the screen so that the procedure performer can recognise it as what they see on the actual program screen or part of the device, but detailed enough to be able to clearly see the controls and text they will have to interact with. These are often conflicting goals, so some compromises are needed.
Reduced pixel dimensions also means reduced file sizes, leading to faster page loading completion, which can be significant with procedures and all the images they often require.
When it comes to capturing and manipulating images, the tools do not have to be sophisticated, though for images of equipment, some filtering might be needed to bring a measure of consistency of lighting and tone. Of course, proficiency in doing the basic operations down to the pixel level is required, but that is not a steep learning curve. Images need to compressed but not so much that artifacts stand out. Smallsite Design interlaces images when importing them, so the tools do not need to do that.
Preparation△
Like most complex activities, some planning helps.
Success path - Since the procedure is supposed to be about following the process that leads to success, focus on the steps that make up that success path. Errors can be dealt with in learning notes as they should be the occasional exception. Even troubleshooting processes, while dealing with errors, are still targeted at a successful procedural outcome, where the errors are just the subject being processed.
Focus on the main path - If there is a main outcome, there will be a main path which would be followed most of the time. Then any variations can be conditional steps. If there is not a pronounced main path, use separate procedures for each major outcome or path. Relegate common steps to a separate procedure that are called from each. The procedures can be nested in that when calling a sub-procedure using a link in a step action, or a
Step link element, there is a link at the bottom of the sub-procedure that returns to the same step or substep. The nesting works to 10 levels deep and is automatic when a procedure has a link to another procedure in the same site. This also means the step response for the calling step can be the overall response for the called procedure. Identify core screens △- From the main path, identify the main screens and how many steps are devoted to each of them. This allows the first step at a new screen to show everything that will be used in subsequent steps, with the latter only needing to show what parts of the screen have changed as a result of performing the step. Use image labels and an accompanying table or list to indicate significant areas or fields, as per Linking to figures.
The process is the focus - Images are subsidiary to their step, and should not overtake them nor the procedure structure visually. This is why no shadows are used on images, otherwise the images would pop out and do a diva on the procedure. The procedure performer needs to remember where they are in the procedure, and even though there is clear numbering and indents to do that, they do not need competition from the images. Similarly, avoid images or styling of text that is unnecessarily distracting. Any efforts to highlight an important point in a step should not outshine the step itself, but still be seen as within it.
Avoid clutter - Like explanations, which should be confined to the blocks before the procedure, or put in learning notes, images should not include elements that distract the performer's focus. In doing a procedure, they are not interested in explanations nor in being entertained. Keep it all simple and focused on one step at a time. Avoid back-references to previous steps, unless they are reminders of information to use at the current step, are a shortcut to avoid explaining some actions or responses in detail again, or an instruction to go to a step to repeat some processing, perhaps for another item.
Account for locales △- All image variants must be the same dimensions and purpose. Since the space occupied by translations of the same text can vary widely, the area allowed in images for any labels and buttons that cannot wrap will need to cater for the most voluminous language scripts. This must be accounted for in planning and will depend on which locales need to be allowed for, even if not generating content for them at the start. This will affect the decisions to be made about when to reduce image width and by how much.
Setup△
There are some things that can be done to make images easier and faster to produce, or better for those using them.
Use light mode - People needing instructions to use a program or equipment need to see details clearly, especially since they will be moving their eyes between the instructions and what they are using them for. They will usually be doing this in a well lit environment and having instructions or the images in them being dark can create a lot of eye strain, especially if there are fine details or a lot of information. This is why the management pages have a light and fairly neutral theme.
Avoid colour gradients - Gradients are very difficult to edit to cut out space because it will be obvious where the cuts were made. Solid colours are the friend here. If there is a choice of theme or other settings that can eliminate colour variation in the areas being reduced, choose and set whatever is needed to eliminate patterns, gradients and background images. These are not details that need to be retained for the purpose of the images. For splash screens and the like, try reducing the outer parts of the picture by cropping, or if there are borders, reducing them using split reduction, described under Reduce image width in the Editing section.
Reduce screen size △- If the program screen can be reduced, doing so will usually cut out some unnecessary empty spaces. What can be reduced by simple screen size adjustments can eliminate a lot of the effort and time required to graphically edit the image. However, some programs or web pages may cut out some details, or even go into a simplistic mobile mode if size is reduced too much, even though there is plenty of space still unused. An image must have all the information necessary for the next step, or even those after it, which may eliminate having more images of the same screen.
Editing△
After hopefully being clear about what to focus upon and having minimised the amount of work to be done, it is time to make some edits.
Mind the scaling - Scaling in the computer is about making everything look larger than it does at native resolution for easier reading. However, different screen capture programs treat it differently. Window's
Snip & Sketch will cut its image from the native pixels, whereasScreenPal will make it have the dimensions as if the scaling was 100%, which for a scaling factor or 125% means that the former will make images 125% larger in pixels. Use screen-capture software than produces the size as if the scaling was 100% Not exact, but like - Designers often spend time considering how users will perceive a design, adjusting spacing between various elements to show what are more closely related. However, while that may be important during actual use, the images in instructions are just meant to indicate sort of what the screens or objects look like and what to take note of. An image just has to look like what is being focussed upon, and the spacings are not so important, though it still has to be a reasonable facsimile. Unfortunately, there are too many times when there is just far too much space, and it just has to go.
Focus on the bands △
- Most obvious are the full-length horizontal and vertical bands of white or colour that can just be handled by reducing their width, typically by selecting a rectangle around one edge of the band, and then moving that block over the gap. Repeatedly doing that can get rid a lot of space very quickly. There are also bands that are not one colour, but can be a row of large buttons with much space above and below their text, and only a plain colour between the buttons. The size of the buttons can all be reduced in one go by treating each band of space in them and between as one in one operation.
Reduce image width - While gap removal may have reduced some space, it may still be better to reduce image dimensions more to mitigate against the image being scaled down for narrower devices, especially for substeps. If there are no more full-band reduction opportunities, split reduction may be an option where the empty spaces are in different places in each band. By zooming in to make it easier to select down to pixel rows and columns, part of each band can be selected to move over its gap. Making all band moves by the same number of pixels will result in the common edge lining up again at the end.
Crop to make a border band - After gap reductions have been done, crop a band of even-width whitespace all around the image to allow for the thin light-grey border added during rendering. Zooming may help to make the widths on different edges the same. However, if the image already has a thick border or strong background all round, cropping can be done to its edge, as the thin added border will not affect the look much. The thin border is for giving definition to background areas that might be lost against the page background. If the image has a thin border, cropping it off will allow the added border to replace it.
Consider insets △
- Sometimes a screen is still large and there is not much that can be cut out, or not an easy way to do it without making the screen look too mangled. Like maps that have an inset to show where it is in relation to a larger map, place a zoomed in part of the screen over a relatively unimportant area, and have an arrow or lines point to where it is on the larger screen. This allows the performer to know where they need to focus next. The step action text can emphasize this to bring focus to it.
Paste in changes - Documenting can often work interactively with designing, as anomalies are found and need correction, which may then need to be back-fitted to the images. Because changing an image's dimensions necessitates creating a new file ID and editing all articles using it to point to the new ID, pasting over the faulty areas with mini-screenshots, and uploading over the same file, saves time by not having to do all the same space removal again, and avoids a lot of minor article editing.
Generic information - Information in screens should be generic or typical but not real, so that personal or proprietary data is not revealed. However, the data presented should be consistent across images so that the changes occurring at each step are clearly shown. Cutting-and-pasting to build up such data, even out of individual letters, or using another means to get the required text in the same font and size with a background of the same colour, can be used to cut-and-paste into images.