July 2017
By Ute Mischke

Image: @ juliatim/123rf.com

Ute Mitschke is an information architect and has been working on the optimization of the creation process, the structuring of information, and the introduction of CMS since 1994. She is an Adobe FrameMaker and Microsoft Office program specialist. She works independently as a consultant, trainer and develops XML-based solutions. Her current focus is on modularization, SVG and meta-information, as well as improvement of processes through add-ons.




Effective screenshots

Technical products often rely on software. It is therefore no wonder that many manuals use screenshots to explain operating steps. However, the quality of these graphics isn’t always great. Here is how you can make significant improvements with just a few strokes.

Almost every technical writer uses screenshots or small graphic representations. They are an easy means to explain simple facts, workflows or to show how components are assigned. The essential feature of these graphics is the use of text that conveys content together with graphic elements. Pixel graphics are often used for this purpose; however, they are not easy to manage in the documentation process and don’t meet the requirements of modern media.

Screenshots are representations of dialog fields or screen interfaces. Despite all technical advancements, they are still formed in the same way as they were 25 years ago. Although their appearance is partly defined by the operating system, the actual information content of these screenshots has changed little. Screenshots are captured with a snipping tool or a keyboard shortcut. They can represent as many pixels as are mapped on the screen.

Defining screenshots

Screenshots are a series of pixels with clearly delimited color areas, symbols and texts. And this is where the challenges begin:

  • The text must be unmistakable and clearly readable. This requires stark sharpness on the pixel level.
  • The graphic should behave responsively in mobile media and automatically adjust to the screen size.
  • It should be possible to interpret the entire contents and it should be possible to read out the text.

In addition, requirements arise concerning the handling of graphics:

  • They are changed frequently and at short notice. Therefore, they need to be easily found, replaced and reviewed.

As text is used as important content in graphics, it must be presented in several languages. Even the graphics with translated content must be easy to find, and their position in the text must be revisable at all times. Several measures can be derived from all these requirements for preparing and creating screenshots and similar images.

Improving pixel quality

If we compare the screen resolution of devices on which documentation is presented, we will find that the resolution (the number of pixels per unit of measurement) has improved significantly over time. Because of this, screenshots taken on a normal computer screen are transformed into small blurs of color on mobile devices. For example: A full HD monitor has a screen diagonal of 27 inches (66 centimeters), 1920 x 1080 pixel, resolution 72 pixel per inch – "ppi" in short or even point density per inch. A smartphone display with a screen size of 4.8 inches (12 centimeters) with 1280 x 720 pixels has a resolution of 306 pixels per inch. Calculated roughly, this means that the same pixel graphic is just a third its size on a smartphone. This brings us to our first target: Improving the presentation and increasing the number of pixels of a screenshot, so that the graphic is sufficiently large for the viewer.

Figure 1: Lack of adaptation in the case of pixel graphics that are too small
Source: Ute Mitschke


Increasing the recording quality

The so-called Cleartype is used on screens controlled by the Windows operating system. The function is supposed to visually improve interface texts. However, pixels forming a letter gain color with Cleartype. But when a letter is composed of many colored pixels, it is difficult for a technical writer to multiply these pixels and improve the contrast and edge sharpness of the letter. If Cleartype is deactivated, then all pixels of the letters are displayed only in grayscale. The settings for Cleartype can be found in System Controls under “Advanced Display Settings.”

Figure 2: Enlarged representation of text with and without Cleartype
Source: Ute Mitschke


Increasing the number of pixels

The challenge lies in not simply replacing one pixel with several pixels. This step would result in the pixels that represent the letters in the text being displayed like stair steps in the figure. Rather, the task is to represent the letters with more pixels and to smooth out the edges at the same time. The roundings should become smoother and the contrast of the letters in front of the monochrome background should be higher.

Various programs are available to increase the number of pixels. The task can even be accomplished with Microsoft Paint. Adobe Photoshop offers different methods to multiply pixels and sharpen contours. A test with Adobe RoboScreenCapture is also worthwhile. This program is installed with every version of RoboHelp or FrameMaker and can be found in the respective program folder.

RoboScreenCapture can record screenshots of programs, video games or films and process them further, similar to the program SnagIt. Its function for scaling an image delivers good results for the representation of alphabets. They can then be refined further with an image processing application.

Transforming color mode

Graphics in the RGB color mode are often not rendered true to color when printed. This is because the printer driver has to independently calculate the composition of cyan, magenta, yellow and black from a combination of red, green and blue. Therefore, all gray tones and black parts of the image are composed of all four-color channels. In particular, in the output of an inkjet printer or in offset printing, this means that too many colors are spread over the smallest space on a single sheet of paper. The black pixels of text, for instance, are printed over in four colors and the edges run. Detailed sharpness is lost, the figure is not readable, and in the worst case, it loses its purpose.

If a technical writer wants to print a manual with screenshots, these need to be converted from RGB to CMYK. Adobe Acrobat, for example, takes over this task. The writer uses the conversion function from the tool section at the pre-print stage. Checkboxes help with the conversion of black sections (Fig. 03, in German only).

Figure 3: With the conversion in Acrobat, the black and gray tones go exclusively into the black channel
Source: Ute Mitschke


Compressing without loss

It is not just the data format in which a graphic is saved that compresses an image. The same can happen when generating a PDF. If an unsuitable Distiller profile is used, quality and sharpness suffer significantly.

If the technical writer has enhanced the image quality by multiplying the pixels and converting to CMYK with black generation, the standard profile of the Distiller can reduce all efforts to nothing. This profile reduces the resolution, compresses the image quality to a medium JPG level, and converts the colors back to RGB. Figure 4 shows what this might look like.

Figure 4: The detail sharpness is clearly affected due to JPEG compression
Source: Ute Mitschke


Or simply change the method

If the technical writer wants to deliver responsive and readable then the text must also be present as text in the graphic.

This sounds like a lot of work. However, the effort proves its value quickly in practice, because it is thus possible to customize and translate texts. Various options are available for the implementation, each with its own advantages. The method applied depends on the media in which the technical documentation is to be published. Moreover, it is necessary to evaluate how important it is to have complete access to the content in all languages and versions.

Structuring screenshots

If software is documented and the labels in the dialog fields are dependent not just on the languages but also on the customers, then the interfaces should be maintained through variables. The images can be recreated in tables for this purpose.

In tables with a sufficiently fine grid, the cells are suitably connected and provided with the necessary background color. In the cells, the technical writer adds the variables that he uses in the descriptive text. This is how the details match.

The texts in the variables can be automatically exchanged, customized and translated with appropriate tools. In addition, the presentations in tables are also suitable for export to HTML5, ePub and in apps, if your representation is controlled through CSS stylesheets. Another advantage of this method: The text can be found with the search function, even reading out functions.

It is possible to control the content, as the graphical implementation is directly in the document. The graphical representation of screenshots with tables can be realized in any word processing, DTP-, or even XML-based documents.

Retracing pixel graphics

The pixel graphics with delimited color areas can be converted into vector graphics with the help of an illustration application like Adobe Illustrator. Just a few strokes are sufficient. However, the texts are only converted to paths and cannot be searched yet. It is recommended that the texts be entered again subsequently, e.g. screenshots from Windows 10 can be reproduced well with the font "Segoe UI". It is identical to the representation in the operating system.

If the images must correspond to the contents of representation only in principle and not in every flourish, then the screenshots can also be completely newly created in Illustrator. It is better if all symbols and other details of the figure are converted into vectors and not placed as pixel graphics. Each pixel graphic would again restrict the scalability of a vector graphic created this way.

Implementing with SVG

SVG is an XML-based description of 2D vector graphics. Separate XML elements are available for graphic elements such as rectangles, lines, ellipses or text. Attributes for position, size, color or even fill level can be defined through these. Text in Unicode can be searched and edited. Translation of the graphic file using a translation memory system is also feasible.

If dialog fields are designed in an XML format, these can be modified or even generated through XSL transformation. XML-based language files, with all interface texts included in all languages for all images, are a prerequisite. A direct assignment between the text in the language file and that in the graphic can be created through corresponding attributes in the text elements.

A further advantage is that the technical writer can also add and evaluate metadata in an SVG file. This is very helpful for the review and process design. In modular documentation, it is possible to highlight topics through metadata variants, and also to provide the metadata in every SVG graphic. This information can be evaluated during the publication process, a report can be created, and thus, the accuracy of the included information can be verified through corresponding add-ons.

If the SVG files have a suitable structure, it is also possible to extend the use of variables from the documents to the SVG graphics. The contents of the variables can then be exchanged, not just in the documents but also in the SVG graphics at the same time with an add-on. The variables can thus be filled with the terminologically correct terms even before the translation, and the correct translation of the entire content can be improved in addition. And if the writer wants to create an interactive document, then SVG graphics offer functions with hotspots or movement, which can be used in the browser.

Investing and saving

Whether based on XML or vectors, screenshots can fulfill the requirements of modern publication formats. Moreover, screenshots can be monitored well and updated if required, in the documentation process. Even translation is possible.

If the technical writer calculates the time required for creating and correcting pixel-based screenshots as compared to a structured solution based on SVG or another XML structure, it is clear that the effort pays off.

Technical writers also gain certainty about the content of their technical documentation. Not least, an XML structure of graphics is easier to manage for all modern media channels and involves a quality of representation without any loss.