Text layout in forms [closed]

Question

I'm in the process of creating some design guidelines for a big form based application. The application has its fair share of "this information is vital to the users and can't be missed". I've seen that one way of making the interface easier to predict is to work on how we use text.

• What is a header?
• Which text should be bold?
• What size should different text elements have?

These are the kinds of question I want to provide some guidelines for.

At the moment, there are some informal standards that has come in place over the years after talking with users. Often bold is used for data and not for headers, since data is more important than headers and labels.

Size is not used much to allow as much data as possible into the interface and grouping is how different kinds of data is told apart. Headers can usually only be told apart from the rest of the application due to their placement. There are no other clue to tell the users that this is a heading.

What I would like to find are studies and a current guideline on how to work with text layout in form driven applications with huge amounts of data? Where the users focus is reading data and then using that data to put in even more data into the form.

Answer 1

Not knowing the overall design I can only take a large guess. The rest of the design is going to dictate the headers. I've found that placing the labels within the fields offers the user an cleaner UI. This gives the user the impression even with a long form that it isn't complicated to complete.

Give additional details and/or a wire frame and we should be able to help you in greater detail.

Answer 2

If I understood the INTENT of your question correctly. I would at minimum apply these basics:

the header above important forms should be at least 2X larger then the text in the form and have either a descriptive word or very short brief. Use a lighter font.

In the form itself on the labels use a bold and darker font.

In the placeholders use a light, italicized, and smaller font.

[I would add a pic but I just started on this site and cannot add pics yet.]

Answer 3

I like nerding out on forms and content construction.

• Do a little Googling on "gestalt psychology" to internalize the various ways an audience perceives relationships between objects.
• A discussion on heuristics for testing the usability of your design: http://www.nngroup.com/articles/ten-usability-heuristics/

Two books that have been foundational to my understanding of layout and content design:

1. The Elements of Typographic Style by Robert Bringhurst
2. Thinking with Type by Ellen Lupton

If you just bought those two books and browsed them for a night, you would have all the tools you needed to build very accessible forms, even if they're long.

There are a few basics here. I'm not referencing specific studies below for the same reason building a technical manual with 20 pages or with 2,000 pages doesn't require (outside of a longer index and ToC) a completely new set of science.

There are many ways in which order, hierarchy and relationship can be visually established. You've pointed out a few of them, but I'll just run through a list quick:

Generally...

1. Size: Something bigger is more important than something smaller.
2. Adjacency: Things close together are related. Things far apart are unrelated.
3. Pattern: Things that are organized are related.
4. Color: Colors in similar families are "related," while colors in different families are "unrelated."
5. Saturation: More-saturated is more noticeable than less-saturated. You notice the key to each of these list items before the description of each.
6. Order: This list is one object because it has a continual sequence.

It's not exhaustive but gives a number of tools to play with. Combining different aspects can have interesting results, so its fun to experiment.

Your specific questions:

• What is a header? A header is a word or short phrase that describes a grouping of content. It is spatially adjacent to that group of content, separated ideally by dead-space from other groups of content, and is visually distinct from the content it describes (size, color, saturation).
• Which text should be bold? Bold text should be used sparingly. Text that must not be missed should be bold.
• What size should different text elements have? Text elements that are equivalent should be the same size, color, saturation, and pattern. -- section and page headers -- section descriptions -- form box labels -- form box content -- column headers -- table cell content -- secondary content (sidebars, tool tips, etc.)

Some specific questions:

• Do your users report having issues understanding what a certain section of information is? Improve the descriptive quality of headers, and either increase white space around them, make them darker, or make them bigger.
• When you say "making the interface easier to predict," do you mean making it easier for the user to know what field or piece of information is required? If the user reports or is observed having problems telling required and optional information apart, make required information stand out. Color/saturation and symbols that make something stand out are expected by the user when a piece of information is required.