Information architecture and page hierarchy can make or break you. Your interface should be designed with your end goals in mind.
Website visitors arrive with many levels of literacy, attention spans and ‘will’ to figure out how to use your website. If they are not able to find what they are looking for quickly, you’ve lost them. Start by defining the goals of your page, and what journey you want users to take:
- Identify the “who” (stakeholders and target audience).
Who is reading the content you are presenting? What do they need to know in 1 sentence. - Identify the “why” (your goals).
Why do they need to know this information, giving them a line of context is helpful. - Identify the “how” (functional website requirements).
How are they going to accomplish what they came to your site to do. (eg. ‘Welcome to site ‘X’ you are hear to learn about ‘Y.’ You should learn about ‘Y’ so that you can accomplish ‘Z.’ Here are the steps you need to take to accomplish ‘Z.’)
By setting clear expectations for your users from the start, they will not get lost or confused in their process through your website.
The following is a short list of page elements and a few best practices too make your website’s pages easier to read and digest.
1. Effective Headings & Subheadings
Pages are typically divided into sections and sub-sections.
Each section is usually started with a heading.
Use headings in a hierarchical way.
The hierarchy of headings is limited to five starting with H2 – the most important – and finishing with H6 – the least important.
You should use them in the following way:
- The page heading – the title of the page – is always formatted as an H2. It is the only heading on the page that should use this setting.
- Use H3 for sub-headings
- Use H4 for sub-headings within a subsection that is started with an H3
- Use H5 and H6 for subheadings within sections
- Align all headings and subheadings to the left as a general rule, unless the design of your website is mobile first and all your headings are centered….either way…
- Be consistent.
- Use sentence case for all heading and sub-headings. Sentence case is the standard approach to using upper and lower case letters, mainly in titles and headings. It is the most legible for all levels of readers and gives them a visual queue that something is a heading (since each word has a capital letter).
2. Succinct Paragraphs
Paragraphs are single blocks of text which flow from left to right, often running to more than one line, and have a single blank line above and below.
Lower literacy readers need chunking, so if it going to take you more than 2 normal length sentences to make your point, consider editing.
- All paragraphs should be aligned to the left (the default alignment). Avoid aligning paragraphs to the center or right unless you have designed a site that has intro sections of text that are centered. If you do, only have 1 sentence centered, as a rule it is more difficult to read since English readers are used to reading left to right.
- Keep your text short and to the point.
- Use bulleted lists with plenty of space between items—this helps slower readers absorb your information more effectively.
3. Text formatting
Within text, there are a number of options available to emphasize text:
- Use italics sparingly. It is ok to use for publication titles of course, but large amounts of italicized text is very hard to read online.
- Use bold sparingly. For clear emphasis of an idea or sub-heading, it is great, but large amounts again are very hard to read. Plus, you can’t emphasis everything!
- Use color very sparingly. Excessive use of a different color, for example red, makes it very quickly lose effect and again is just hard to read. If you must highlight an important point in a different color, limit it to as few words as possible and do not make it a habit.
- Use all capitals sparingly. Excessive use of capitals can get very annoying very quickly and should be reserved for special cases. Words in all capitals are very difficult to read online and often feels as though you are shouting at someone.
Note: ALL CAPS are a great use case for buttons, main navigation items, and other situations where a single word is used.
- Do not underline. As a rule, you should NEVER underline because most browsers make links appear underlined. If you underline text that is not a link, it will only confuse your site visitors.
Here are some tips for visual consistency.
4. Tables
If you are not a designer, or have not had a designer create a styleguide for you, as a rule, the settings for any table should be as follows: Cell padding = 5; Cell spacing = 0.
Text within cells should be vertically aligned to the top of the cell. This makes it the easiest for people to read the contents of your table by keeping the text from running into itself or floating at random heights within your table (depending on the length of your text).