5.8.2: Formatting

Formatting

The readability, visual appeal and overall appearance of a page are all important. The less professional and more haphazard a document, article, or web page seems to be, the greater the likelihood that readers will call into question the ability and authority of the writer. Documents on the web should also in some way recognize the nature of the Internet itself. As Marshall McLuhan observed, "The Media is the Message." Given the ever increasing body of knowledge that one can access on the Web, readers should be able to scan Web documents, so as to quickly pull out the information that is most interesting or vital to them, thereby allowing them to avoid or ignore material that is not.

Readability

Brevity is best. Enough said.

Many documents are organized in a structure in which the most vital information comes first, followed by ever increasing detail as the argument progresses. This is referred to as a "pyramid structure". However, this format may also be inverted, in which specific details come first, and then the larger perspective follows. When considering the layout of any document on the Web, a writer should consider this.

Many readers of documents enjoy bulleted lists.

They have benefits. Bulleted lists are:

• Easy and quick to read
• Concise
• Key Points
• People like dots

However, bulleted lists can also have drawbacks:

• Many readers won't enjoy the content of your list if such points are too long and drawn out, particularly if you go on and on about nothing of importance and basically defeat the point of having a list in the first place ...
• If there are too many items on any list, readers may become overwhelmed
• Repetition
• Lists can become tiresome
• A list may not be the right format for your message

Hierarchies of Thought

When constructing a Web document, you should consider the hierarchies of thought which you will be constructing. Ideas should be grouped in some sort of hierarchy, and not randomly (unless of course that is your expressed intent). Headings and subheading should be clear and easily understandable to your readers so that they can easily understand how the various ideas relate to each other in terms of order and importance. Having page that serves as a menu, table of contents or an index (such as the one at the top of this page) is generally a good idea. Headings and subheadings should be ranked in terms of size and placement on the page in a way that also allows the reader to skim and scan for the information they require.

In regards to linkages, the amount and placement of links should be functional. Too many links can make a document appear cluttered, or it may be that in an attempt to copy or highlight a chunk of text, the reader inadvertently activates a link which they did not intend to. This is annoying in the extreme. Also, links should direct users to sites which you will find useful, not simply just those that you like personally. The definitions of obscure terms can be linked, such as in Wikipedia, however, excesses of this can be distracting and break up the overall flow of the text.

Visual Appeal

• It should be noted here, that as of yet, this page is lacking visual appeal, and we are aware of this... it is a work in progress. Thank you.

Font Usage

Fonts should be selected such that they are readable and that they suit your message.

Fonts which are exceedingly complex or detailed should usually be avoided, as should fonts that most users don't have in their library.

Although most browsers allow users to alter the size, bigger is often better...

Color Usage

The goal in the use of color is to express artistic style, intent and contrast.

For more information on color usage and design, check out the information at this link: Color Theory

Avoiding Clutter

Clutter should be avoided at all times. If a page is to jumbled or busy, readers may disregard it entirely.

Pointless and flashing animation (such as those seen in many Web advertisements) is particularly distracting.

Less is more.

Conventions Unique to the Web (Abbreviations, Leet, Smilies)

Every medium has developed conventions that make it easier for the reader to find things. Most web conventions have been borrowed from the print media. Once a new icon or format has been introduced on the web, if it works it quickly becomes an accepted convention. For example, the shopping cart icon is a recently developed convention that has become so familiar that designers no longer need to label it “shopping cart” ^[1].

Web conventions include placement and visual presentation of navigation bars, navigation buttons, search bars, and logos. The main benefit of web conventions is that they help users find things quickly as they move from one site to another. This is because all sites use the same conventions just as all newspapers use headlines, picture captions, etc. ^[2].

Unfortunately, designers often try to avoid using conventions because they think they should be (or want to be) more creative. But since conventions work and help users navigate the web easily, you should probably use them unless the value of not using them clearly outweighs the cost. That is, either (1) what you replace the convention with is so clear and self-explanatory that it is as good as the convention, or (2) your innovation is so valuable that it is worth making the user learn it ^[3]. It is also important to place conventions where they are customarily placed. To do otherwise would confuse and frustrate the user, the opposite of what a good designer wants to do ^[4].

References

1. Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability. 2nd ed. Berkely: New Riders Publishing, 2006. Print. p. 34
2. Krug, p. 34-35
3. Krug 36
4. Krug 60-61