Chapter 11 Barker: Laying Out Pages and Screens
By Mary Dobbins
Guidelines for Designing Pages and Screens
1. Review the user analysis. Use typesize, fonts, etc. and design according to user types and experience, and users’ problem-solving techniques. Page and screen layout should support task orientation and lead users to the right kinds of information. Screens and icons should help the user make the connection between pages of the program.
2. Create the page grids. The grid is the framework onto which you put the text and graphics and contains: grid lines, margins, columns, gutters, white space, and baseline.
3. Define the page grid using styles. The grid provides the roadmap for your pages; then you have to identify the styles. Ideally, you should include all components listed in Table 11.1, Page 355.
4. Draw thumbnail sketches. Use sketches as part of your planning. Find an existing page that you like and then use it to follow the exercise on Page 356.
Tips: 1) Make sketches accurate, 2) Keep page items in proportion, 3) Keep shading and spaciousness close to the original.
5. Set up pages and styles in your word processor. This can be time-consuming but is important to ensure consistency in your document.
6. Determine the layout of help documents. Layout of pages and screens can differ which creates limitations. Table 11.2 on Page 360 compares data elements between pages and screens.
Designing Communication Spaces
Two important things need to be decided:
1. Degree of Modularity – breaking information into chunks of text and graphics. The modular format follows the one-task-per-page idea. Some helpful tips include:
- Repeat background information when necessary
- Repeat screens when necessary
- Include information about a related task
- Keep relevant steps together
- Minimize cross-references
2. Degree of Structure – placing information on the page according to patterns. Chunking is a technique that helps the user find information on the page. Structure includes:
- Rules – using different lengths and thicknesses to identify headings
- White space – helps to focus on graphics and creates balance
- Bullets – identifies organization of information easily
- Chunks – identifies related information
How to Look at Pages and Screens
Compare manuals for page density, balance (white vs. text space), and legibility (font and style). Common page designs include two-column format (graphics column and a text column) and a one-column format (graphics and text in the middle of the page). The two-column format works best for guidance-level documentation such as procedures or step-by-step instructions while the one-column format works best for procedures and reference manuals.
Contributing greatly to usability, the elements of page design include: the left margin, columns, headers and footers, icons and diagrams, screenshots, rules (border or artwork), and pagination.
Some tips when designing a screen include: forget line length since users can change the screen border and shape, avoid lots of scrolling because it’s disorienting, indicate another screen by using a “More” button or “1 of 3” indicator.
Multiple Windows Management
Be careful not to cover an entire screen when calling up an additional screen. Avoid using too many windows (window clutter). Make sure screens can be closed by the user.
Other helpful hints include using color to cue important elements, keep graphics simple, use screen grids (as described above), and in general, single spacing is best.
Helping People Recognize Words
People prefer visuals. Manuals that use visuals consistently test higher in usability. Be mindful of using words that could be confused with a look-a-like (disk vs. desk). Using a serif font works well for scanning because it helps the eye move quickly across the page. San serif works for large font size. Simplicity is best. More design advice:
- Choose a recognizable font
- Use a font that clearly shows the tails of the letters
- Choose a recognizable style
- Avoid long passages in italics or all caps
- Keep headings short
- Use serif for body text, sans serif for headings
Distinguish style of text for “hints, notes, or cautions” so that they are set apart of regular body text. Also, distinguish input or output messages (e.g., error messages) – courier new is often used.
Tables and Lists
Emphasize the headings so they are easy to recognize. The substance of the table or list should use the same style and font as the body text.
8 comments:
This chapter was very very helpful for me. I am working on revising a web page at work, and this chapter gave me some helpful tips.
I like the tip about less scrolling, and using "page 1,2,3" or "next page."
I also agree with how helpful consistent images can be. I think there can sometimes be a fine line between not enough images, and too many. Keeping a balance is important.
I didn't know that "manuals that use visuals consistently test higher in usability." This is a concept I will employ in my documentation project. I have few visuals, but I am going to go back and make sure I have a good balance between visuals and text.
The information about white space was important for me to read through because, for some reason, it is a concept I have a hard time understanding. The information in this chapter has helped me understand why white space is important (to help give the reader something to focus on and break up the pages into sections) and I will be trying to notice and use it more.
I think there is a real art to setting up and laying out your document, whether online or written, but it seems one that is often overlooked. I can see why that happens. You spend an inordinate amount of time gathering your information, setting it out in a logical, comprehensive manner, and by the time you reach the phase for laying out the design, you're probably past deadline, tired of looking and the project, and this would be the easiest place to take shortcuts, just to get the job done. I think the visual communication is just as important as the message itself. I am much more apt to read something if it is laid out in a visually appealing manner.
I try to employ some of the techniques in this chapter in all of my communication, even electronic. My favorite is using bulleted lists and chunking. However, I have seen documents that use too much white space which is almost as bad as using none at all. And I agree that serif fonts are easier to read. We tested that at the office (to settle an argument). We took two identical PowerPoint presentations – on one we changed the font to san serif and on the other a serif font. We shot both presentations up on a screen simultaneously and it was incredible the difference using a serif font made.
This was a helpful chapter, and I think it will benefit my documentation project. I think Barker's comments that "manuals that use visuals test higher in usabilility" was very interesting. I am finding that more of our manuals at work are starting to include color photos, operators seem to respond better to these documents.
When Barker referred to MS Publisher I checked my computer out and discovered I have this and never knew it. This chapter points out ideas and suggestions for page layouts and the embellishments that can make the difference between a credible web page and an amateurish one. I liked the idea of creating page grids which is something I will implement for future work at my job. It was interesting to understand the difference between designing the page layout and designing the type of layout. I considered both to be the same but am re-thinking this. I had never heard the term 'dithering' and wonder how common this term is in the field of design as no one I talked with had heard of it either. Always good to learn a new word!
Luckily at my job we have a person who is dedicated to making templates for us so that we can just bring it up with an item number for perfect consistency every time. We still have to make guides ourselves if something gets cut off the finished product, but the template lady is a godsend to us because it saves us so much time. We often also tell our customers if something looks too busy or is illegible. This will make people change their minds on a find style or color. It is up to us to figure out what looks best and simple is often best, even with invitations.
I have to agree with what Robin has said. I think the important thing this chapter points out is the impact of visuals in manuals. I seem to notice that more and more training manuals include visual documentation in order to better convey the message. Maybe on different level, visuals tend to better illustrate something and therefore give the user more assurance that they are doing something correctly. Even when it comes to instructions on how to put something together, visual illustration comes in handy. I do think it's important that the images remain consistent on how they show something otherwise I think they can counteract the purpose.
I don't remember this being mentioned in the chapter, but a bit of advice on the side: A dark background with light text is considered by many to be easier to read than black text on a white background. Possibly because a white background gives the impression that you're reading something off of a light bulb. Also, every time someone on myspace posts all of their text on top of a photograph, a baby cries. (/rant)
Post a Comment