Document layouts basically fall into two kinds of activities: designing page layout and designing type.
Designing page layout is determining the best arrangement of words and images on a page or screen to achieve maximum usability.
Designing type is determining the proper font, size, and style of characters as well as determining the format for tables, lists, and paragraphs.
Constraints compare the design process: constraints of user types and experience, of the user’s problem-solving techniques, and of the documenter’s resources. Account for these constraints in any intelligent design of page and screen layout to achieve the design goals.
The Goals of Page and Screen Layout
The goals of layout are to allow the user to overcome the design problem. First, the layout should meet the dynamic needs with a static document. The document should support task orientation by helping the user perform information-related tasks efficiently and productively. Secondly, good page and screen layout should support overall task orientation. Finally, the layout should accommodate the visual needs of the user, the need to learn, and do it through images rather than words.
Create Page Grids
The user analysis creates a kind of model, telling the characteristics of the users in a way that allows you to design documents to help the user perform meaningful, automated work. The model of your page design first emerges as a page grid. Page grids define communication space by drawing invisible “fences” around the areas of a page. A page grid acts like a scaffold onto which you put text and graphics.
To design a page well, you need to know the following about grid lines and the other parts of a page grid:
• Grid lines: Lines drawn where the page and column margins would fall.
• Margins: Areas of actual space between the text and paper’s edge.
• Columns: Spaces between the grid lines marking columns.
• Gutters: Space between columns.
• White space: Space, inside the margins, where no text or pictures may go.
• Baseline: Grid line at the bottom of the text and graphics area that defines the bottom margin.
Define the Page Grid Using Styles
When you have identified a grid for your pages and screens, you’ve identified the basic pattern you will follow throughout your manuals and online help systems. Some pages will look different from the grid pages (e.g., table of contents and indexes). Once you’ve decided on the grid for your pages, you should identify the styles you want to use to set up the pages. Table 11.1 on page 355 of Barker shows many different rules of styles for page and screen components.
Two important things to note about the guidelines are that the screen presentations don’t identify margins in a one-column format because the margins are automatically set by the variable-sized window in which the help screen appears. Also, the font for the body text is a serif font for printed documentation and a non-serif font for screen presentation because serif is more easily read on a screen.
Draw Thumbnail Sketches
Use a thumbnail sketch as part of your planning effort for your publications department or to experiment with different plans for the style manual. Barker suggests picking a page that you think exhibits good page design. Barker then lists an exercise beginning on page 356 to sketch out an example page and compare them.
Barker also lists the following guidelines for sketching the thumbnail:
• Text: Draw straight lines for all body text lines. Use a ruler, or learn to draw sketch-straight lines (where you put your pencil at a starting point and draw short, straight strokes to the ending point).
• Graphics: Draw all the graphics using shadows, abstract sketches, and circles and lines.
• Headings: Headings usually appear in larger fonts than body text, so draw them as shaded rectangles, again using their relative size in the original as your guide.
• Rules, boxes, other features: You may need to draw rectangles around rules to give them the same value on your sketch as they have on the page. Make sure to include all the graphics and text in the headers and footers.
Tips for Drawing Thumbnail Sketches
1. Drawing a thumbnail sketch may take 10-20 minutes. Take your time and make it accurate.
2. Keep the page items in proportion while trying to include everything that is in the original.
3. Keep the values of darkness, density, lightness, and spaciousness the same in your sketch as in the original.
Set Up Pages and Styles in Your Word Processor
Once you have identified your styles, set them up in your word processor or desktop publishing program. You handle the specifications for page in two ways: styles for the text and page setup. Depending on what you use, you could do these together or separately.
Setting styles saves you time for two reasons:
• You can change the styles later, and you don’t have to change each instance of a certain text.
• Setting up styles ensures consistency.
Determine the Layout of Help Documents
The number of fonts that work on screen is different than the number of fonts that work on paper. There are many different elements to consider when selecting layout elements. See Table 11.2 on page 360 for a list of layout elements for page and screen consideration.
Discussion
Designing Communication Spaces
The documenter needs to decide two important things: the degree of modularity pages need, and the degree of structure they need. These two elements are what determines the overall look of the communication space, regardless of the pattern of columns and words you chose.
Degree of Modularity
Modularity means breaking information into chunks of text and graphic units and fitting them onto a one- or two-page spread. Using this format, you would use the one-task-per-page idea, and include at least one image per task.
Modularity and Pages
Ask yourself if the communication space contains all the information the user needs to perform the task and understand the concepts in the task to determining the degree of modularity for a page or screen. Keeping tasks self-contained increase modularity. Follow these steps to ensure modularity:
• Repeat background information where necessary.
• Repeat screens when necessary.
• Include orienting information about the relationship of a task to other tasks.
• Keep all relevant steps on the same page.
• Minimize cross-references.
Modularity and Screens
Note that modularity has less and less to do with online help systems. Because of the physical restraints of a page, you have to put all the necessary information in one space. Use expandable text and rollovers to assist in getting the important information to your users.
Degree of Structure
Structure in page design means that we place the information on the page according to patterns, with certain kinds of information only in certain places. This process reserves certin areas of the page or screen for certain kinds of information. The structured page has areas for headings, certain areas for overviews, and others for screens. Highly structured pages use bulleted lists, tables of commands, and indented margins for steps.
Elements to consider when looking at a structured approach:
• Rules: Various lengths and thicknesses help the user tell the reading area from the heading or scanning area.
• White space: Helps the user focus on elements of the page such as graphics without having to process impinging information.
• Bullets: Help the user identify the kind and organization of information at a glance.
• Chunks: Help the user identify reading information in overviews and elaborations.
How to Look at Pages and Screens
Try to develop an eye for the following elements of page design:
• Page density: Comparing the pages of one manual to another.
• Balance: Compare how one manual balances white space and text space with one another.
• Legibility: Compare the ease of reading of the type font and style among manuals which you think read clearly.
Common Page Designs
Many designs used in software manuals incorporate the concepts of modularity and structure to varying degrees. There are two common formats that are used, the two-column and the one-column.
Two-Column Format
Most of today’s software manuals display a two-column format (example on page 366). This format allows the reader to distinguish readily between guidance information and support information. The two-column format works best with guidance-level documentation: procedures, step-by-step, installation, getting started. The two-column format uses more space per information unit than dense one-column format.
One-Column Format
The one-column formatted page (example on page 368) arranges both graphics and text in the middle of the page. In some ways, the one-column format helps a writer modularize a document because it makes it easy to keep task information together in a linear form. Writers have used the one-column, full-page format for tutorials, which tend to have longer passages of prose, because they think it is easier to cram a lot of information on one page. This, unfortunately, leads to this page not being read because there is too much information on the page and readers skip over it.
The Elements of Page Design
Pages consist of the arrangement of many complex elements. By understanding the following elements, you will understand the building blocks of pages.
The Left Margin
Text and graphics align according to the left margin.
Columns
Columns can be easily created using many different kinds of software. There are two kinds of columns, newspaper and table. Newspaper columns continue text from the bottom of one column to the top of the next column on the same page. Table columns continue text from the bottom of one column to the top of the the same column on the next page. This is the best column format for manuals, particularly when one column contains graphics and the other text.
Headers and Footers
Headers and footers orients users through sections, pages, and topics without taking up a lot of space. Consider users' needs when selecting header and footer styles and content.
Icons and Diagrams
Icons, diagrams, and pictures are some of the visual elements that make paper or online texts easier to use. They help users to easily locate critical information or to navigate different sections. A well-designed page uses ample icons and diagrams that are emphasized with appropriate white space.
Screen Shots
Screen shots provide users with useful visual references. There are three kinds: full screen, partial screen (emphasizing only part of a screen), and menus. Selecting the appropriate size and labels is important for designing a useful screen shot.
Rules
Rules help designers line up columns, emphasize sections of information, and define headers and footers. They vary in width, length, thickness, tone, color, and style depending upon users' needs.
Pagination
There are two kinds of pagination: sequential and modular. Sequential pagination uses the same sequence of numbers from the beginning to the end of the entire manual. This is especially useful when users refer to a series of books, such as a supervisor's guide and a user's guide. Modular pagination involves starting each chapter in the same book with page one. This may be useful for guides that contain distinct contents in different chapters so that individual chapters can be reprinted while maintaining pagination. Whatever pagination is used, designers must ensure that pagination for special sections, such as the header, or special chapters, such as the index, helps orient the user.
Common Screen Design
Windows Screen Format
This format includes a non-scrolling section and a one-column design with links to related topics (or two-column design that places the related topics on the right). Designers can also add links that open pop-up windows to explain functions.
Man(ual) Pages Format
Man pages format is simpler, containing a heading, a title at the top, and a navigation area with a prompt.
The Elements of Screen Design
A Changeable Space
Designing screens can be a challenge because users can change how content is viewed. Because users can resize and scroll through screens, designers should keep several things in mind. Forget line length: only left and indent margins usually need to be configured because users can resize screens. Avoid lots of scrolling: shorten text length to no more than two screens or users may lose their place. Indicate the extent of the topic: if text continues from one screen to another, use a "More" button or pagination to help orient users.
Multiple Window Management
If designers include help windows in their design, they should follow several guidelines. Don't obliterate the users's work: configure the help window to cover only part of the screen so user's can still find the original window. Avoid window clutter: minimize the number of help windows that open or place help windows above the application window so it is easy to refer to. Give the user control over frames: make it obvious to users whether help windows will close automatically with a click or keystroke, or whether windows will close automatically after a set amount of time.
Color
Designers should use appropriate color to highlight important sections, information, or tools.
Graphics
Graphics should be simple for easy on-screen viewing and printing.
Screen Grids
Grids on computer screens different from grids on paper in several ways. Narrower margins are used on computer screens because the monitor helps define the viewing space. Less indentation is needed on screen to save space and because fonts are usually larger on screen. Define the grid for single pages only: binding and two-page layouts aren't a concern with computer screens. Use rules sparingly: topics tend to be better defined, so rules are less necessary.
Line Spacing
In general, single space lines and use large font size in headings.
Designing Type
Designers should understand the tools available (such as software) and the way users recognize words to design the appropriate type for manuals.
Helping People Recognize Words
Besides users' technical proficiency and subject knowledge, it's important to understand that users are visually oriented. This means that the shape of words and the letters they contain can influence readability. Serif fonts have letters with end strokes that almost connect to the letters that follow, while sans serif fonts don't have those connectors. Serif fonts look more like cursive writing while sans serif fonts look more like printed writing. Serifs can encourage eye movement across the page, especially with smaller letter sizes.
Design Advice
Choose a font the user knows well for the body text.
With smaller-sized type, choose font styles with well-defined ascenders and descenders.
Avoid using italics or all caps for long strings of text because letters can be harder to distinguish and understand.
Keep heading short.
Use serif for body text (where comprehension is most important) and sans serif for headings (where larger sizes make comprehension easier).
Building Patterns with Type
Create a consistent pattern using cuing techniques, headings, and rules when designing manuals. This helps users locate important information and navigate through sections more easily.
More Design Advice
If designers want to change fonts, sizes, styles, they should do it in this order: style, size, then font. Change only what is necessary to emphasize the text. Limit the levels of information to two (three at the most) so if you need to make changes, you'll have to do it fewer times. Limit cuing devices to three or four for a cleaner look. Use a consistent design in the manual and related documents. Use software to establish a consistent paragraph style that will carry throughout the document.
The Idea of Body Text
The body text is the dominant feature of the document, and size and style can be varied, but not font. The most common body text fonts are 10- or 12-point serif. Still, it is important to consider the page size (which should correspond to the font size), media (screens may limit the font options or some programs may offer special fonts), and user expectations (such as what may be viewed in other manuals).
Non-Body Text
Body text can be modified in style, font, or size to create headings, warnings, or notes.
Headings
Headings should direct users to important information through special spacing or size. Heading design, however, should be consistent across levels. Headings should generally be larger, sans serif, and bold for emphasis. Alternately, headings can be differentiated using small, medium, and large sizes of the same font.
Hints, Notes, and Cautions
Hints, notes, and cautions are special "aides" that draw the user's eye through color, icons, and spacing. Because they are generally included in the body, they are the same style, size, and font as the body text. However, they can be emphasized by changing the size or style of the heading preceding the information.
User Input, Computer Output
When it is necessary for users to type in text and for that text to be displayed, this text usually appears different from the body text. Courier has been commonly used for input because it looks like typewriter text, which may serve as a prompt to users. For output, Helvetica is a common font because it may look like the body text but is still distinguishable by its smaller size.
Tables and Lists
While the text of tables and lists is generally the same as body text, the heading styles may be changed for emphasis. Other ways to distinguish tables and lists are indentation, column layout, and rules.
See pages 380 to 381 for the Glossary and Checklist.
Submitted by Team 1
Subscribe to:
Post Comments (Atom)
13 comments:
This chapter was helpful for me. I'm not too familiar with design techniques. I am hoping the types will assist me in creating a successful documentation manual. I plan to use the two-column suggestion, so that part was especially helpful to me.
This chapter really ought to be considered as a topic for a course. In fact, there is a Visual Design course in the tech comm curriculum at MSU. The concepts put forth in the chapter are good and useful, although at times, I don't really feel like I agree with everything being said here. For instance, here's a quote from the book and review.
"Forget line length: only left and indent margins usually need to be configured because users can resize screens."
Could it be that the user can resize their screen to a point where the line length becomes too cumbersome to deal with? I believe that this can be an issue. No one wants to deal with lines that stretch across the length of the window. Just seems like bad advice to me.
In general, the concepts and ideas are all good. Again my issue, too much information in one chapter. This just glosses over the issues. To better understand visual design, one should really take a course in it.
This chapter had a lot of practical advice to offer, but I thought the most important point Barker emphasized was to always consider the user. This is reiterated under many of the headings, as well as almost right away at the beginning. I think that it can sometimes be difficult to always keep the user in mind when there are so many other pressures and demands, so I think it is great that this point is repeatedly emphasized. I also appreciated all of the definitions of terms and the discussion of them, as this will assist in designing our documentation projects.
This chapter contained alot of information, but his chapters usually do. It comes at the right time though as we are in the midst of completing our documentation projects. I hadn't thought about a two-column approach, but I may do that now since I am doing a manual.
I'm not a fan of Barker, but this is the 2nd chapter that I have gotten some useful information from.
This chapter reminded me of my grant applications. I write proposals for federal grants and each federal govermnet agency has its own list of application design criteria. Often, if you violate the criteria, you are automatically rejected, no matter the content of your proposal. That being said, page layout is a very important part of technical writing, but we should not forsake the quality content for functional design layout, but rather use the layout to highlight and communicate the content more properly.
I really liked the table on page 360 that highlighted the differences in layout elements between printed pages and screens. This is a wonderfully useful table! If nothing else, it helps me visualize why we do what we do when we design for different media.
Also, I can personally vouch for the usefulness of thumbnail sketches. I have made use of this tool many times, and it has always made the design process run smoother. You don't have to spend a lot of time on it--even a rough visual impression is enough to alert the eye to things that will or won't work in the finished product.
I've always used gut instinct (and a few tech comm standards, lately) for layout, but the techniques in this chapter are specific enough to be really helpful. Drawing a thumbnail sketch of the page layout is something I've never tried before, nor have I thought in terms of gridlines. I believe this information will prove very useful to me in the future.
As I take more and more technical communication courses, I find that document design always comes up at some point in the course-whether it is editing or a focus on proposals (well, it usually does). I feel that is always important to focus on the visual design because sometimes that will catch readers’ eyes before the actual content will. It also will aid in readability (if executed properly) and just is an important aspect of the document to consider. Sometimes it isn’t just the content of the document-it is also the presentation. This chapter simply reminded me of this fact once again. Thanks Barker!
There was a lot of information in this chapter. It is interesting to discover the reasons behind why things do or don't work. If you visit a website, intuitively you know pretty quickly if something just isn't working. The things that we learn in this chapter help us to understand the reasons behind what we "feel." If information is hard to find, or the site is annoying, or the text is difficult to read because of a poor font choice, most of us will look for another site without exerting the effort required to work through bad design.
This is a great treatise on document and screen design. I have a professional interest in information design and how critical it is for impacting the user/reader experience. Design grids, font sizes photo placement, headlines and subheads all impact user experience.
I agree with Lance on his comment about line length. Actually studies reveal that body copy line length should not exceed 65 characters (2 1/2 alphabets). Anything beyond that and it begins to affect readability.
This chapter was a good summary of design techniques. I took Visual Technical Communication and Desktop Publishing, which basically covered everything covered in this chapter (except for maybe a little bit of the screen layout techniques), and since I do a lot of work with both screen and printed text, it is mostly a review for me. Still, Barker does a good job of creating an effective and loaded attempt at handling design techniques in one chapter.
I think Lance brought up a good question. Line length is important to take care of, and some web developers pay attention to it while others do not. As for me, I create div tags for text on the screen in order to avoid ridiculous line length (take a look at my online portfolio, for example < http://krypton.mnsu.edu/~carlsj12 >). Line length should never be ignored in any form, because, with online users, many just simply leave their browsers at full screen, and many others are not even aware of the ability to resize by dragging the browser's corners.
This chapter was a bit overwhelming as I am new to technical communication field and never really have designed a technical document prior to this course.
Nevertheless, this is useful information. I also learned a lot from all the blog responses above. I agree with Dianna about the consideration of the user. This is something that has been the focus of the Barker's text as well as focus of the class. Various degrees of modularity and ways the modularity is displayed on the web versus print was interesting information.
Post a Comment