Information Architecture

Users can more easily find information and perform tasks quickly and efficiently if a website has a well-ordered information architecture. Think of a web presence as a tool which should improve, optimize and/or enhance the user’s knowledge, experience, and workflow rather than complicate or confuse it. The following are rules of thumb when aiming to improve site organization. A strong information architecture should offer:

Appropriately-sized content

As regards content, MORE is not always better and may hinder your organization’s goals. As Halvorson explains, if your content does not fulfill your user’s needs or directly support your organization’s goals, it’s worthless.

Clear wayfinding

Create clear wayfinding, using breadcrumbs and other components for deep or complex navigation structures. It should be clear where the user is on a site, and easy to understand how to move to any other page. The home page should be accessible from any page.

Useful search features

For complex sites such as libraries, search is crucial. For many users, search is their primary way of navigating a website. Aim to assist users with search auto-completion and accelerators (e.g., “one-click” buttons) where appropriate.

Clear processes and outcomes

For multi-step processes, summarize the process and outline the number of steps beforehand. Then, keep users informed of their progress during the process.

Clear chunking

Since users more frequently scan than read deeply, aim to organize the Website’s information architecture and page structures into meaningful chunks of sense that are easily discernible and scannable. Where extensive information is provided, users should be able to sort or filter it.

 Information Chunking

Clear site organization

Don’t try to please everyone. Create a balanced information architecture that is meaningful for the largest number of people from your primary, secondary, and perhaps tertiary audiences. Build in additional wayfinding and redundancy for assisting the outliers, if possible.

Stable navigation

Primary navigation should be stable, offering an easy affordance by remaining in the same position throughout the site. Unexpected and inappropriate changes to navigational elements are jarring to users.

User-centered design

Organize the Web presence according the needs of the users, not the structure of your organization. This will reduce your bounce rate, discouraging users from leaving your Web presence for greener (and less confusing), pastures.

  What is User Experience Design?

Simplified design

Remember Steve Krug's famous dictum: ‘Don’t make your users think!’ Where possible, decrease the cognitive load on users by offering images and text that are easy to process. Favor intuitive, conventional language over clever phrasing or jargon that users will have to decipher.

Limited choices

Where possible, limit the number of choices you offer users at one time. A good rule of thumb in a pinch is to limit options to approximately seven. A much better rule of thumb is to discover through usability testing exactly how many links you’ll be able to use without cognitively overloading your users. Bottom line: The navigation scheme of the website or application should not trouble the user.

Clear critical path

Include clear calls to action which indicate what your users can and should accomplish on your website. For a banking website, a primary service such as “Open an Account!” should be a large, recognizable button, not a simple hyperlink buried inside a paragraph.

Clear affordances

Clearly call your users to perform an action by offering clear affordances. Make clear to users which images are buttons, which images/text can be clicked on, filled in. Then make it very clear what will happen when they take that action.

Information scent

Create a strong information scent — a signal to users that they're in the right environment to discover the content they need. Make sure that links and actions correspond closely to users’ expectations.

Ubiquitous and meaningful help

Links to help should should be available on every page. The user should be able to access their preferred method of receiving help (chat, email, phone, etc.). The website should also provide context-sensitive help, such as tooltips, which should provide meaningful information about the object they annotate. Regarding form use, the website should also indicate clearly where users have made an error and exactly how to resolve it. The website should indicate when tasks have been completed and direct users to the next logical action. Policies and instructions should be easily found with or near the tools they describe, where possible.

Textual Content

The following are rules of thumb for developing and editing textual content.

Be brief

Avoid needless and meandering introductions. For example, language which “welcomes the user to your webpage”, is never necessary. Be sure to eliminate unnecessary words. (Like the words "be sure to" in the previous sentence.) A popular rule of thumb is to continually reduce your drafts by half until you've achieved optimal brevity.

Make meaningful human-readable links

Provide meaningful hyperlinks, which improve readability and scannability, accessibility for the visually impaired, and produce stronger results from search engines. For example:

Bad Example
For more information about our Policy on Cheating, click here: http://www.library.mtu.edu/user-resources/policies/cheating.html/#cheating.

Better But Still Bad Example
For more information about our Policy on Cheating, click here.

Good Example
For more information, view our Policy on Student Cheating.

Create meaningful lists

Lists are an important way of organizing information. Avoid duplicating strings of opening words in lists and headings. When a sentence looks too similar to those which surround it, it increases the user's scanning time. Favor bulleted lists over narrative text. When an opening element must be repeated, make it a heading, where possible. For example:

Bad Example
List of handbooks on architecture
List of chapbooks on architecture
List of photo collages on architecture

Good Example
Architecture:
- Handbooks
- Chapbooks
- Photo Collages

Use action verbs

Use action-oriented verbs for hyperlinks where appropriate (e.g., choose “Close my account” over “Account closure”). Using action-oriented verbs hails the reader directly, asking him or her to take direct action, and implying the result of that action. Clicking ‘Account closure’ might take the user to a page which describes policies surrounding account closure. The function of a button labeled “Close my account!” is unambiguous.

Bad Example
The deadline for the submission of your request will be promptly by noon, tomorrow.

Good Example
Submit your request by noon, tomorrow.

Use the active voice

Use the active voice, especially with instructions. The passive voice is most often appropriate for page and section headings. Replace long noun phrases (“the submission of the information”) with accurate, descriptive verbs.

Bad Example
Now Imagine you were to happen upon a page having been laden with myriad links, all of which read ‘click here’. Such a deployment of links would not lend itself to efficient scanning.

Good Example
The creation of a page dense with links, all of which read ‘click here,’ would not lend itself to efficient scanning.

Good Example
Links which read ‘click here’ do not help users scan efficiently.

Favor numerals over their text equivalents

In print, we often write out numerals for ten and under, reserving numerals for greater than ten. Wherever possible on the web, use numerals rather than words. Numerals are far easier to process cognitively. The good version below also establishes parallelism, where the “bad” example violates it. Note that where a sentence starts with a number, you must use the word form (“One important area of research...”). Where possible, however, don’t start sentences with numbers.

Bad Example
The library reserves 12 group study rooms (up to six occupants) and ten large group study rooms (up to 12 occupants) for student use.

Good Example
The library reserves 12 group study rooms (2-6 occupants) and 10 large group study rooms (2-12 occupants) for student use.

Visual Content

Carefully select images for meaningful effect. Pay close attention to the visual dimensions of the structure of the page itself — whether image or text. Consider the following rules of thumb when designing for visual content:

Create a clear hierarchy

Make the organization of the content/page obvious by creating a visual and typographic hierarchy, including: white and negative space (e.g., indentation), color, size, font-face, bold, italics, and anything else that can increase contrast. A well organized page hierarchy guides users toward what is most important, and what to pay attention to first.

Use lots of white space

Use plenty of white space. White space helps organizes a page visually and has a calming effect on the reader by helping to guide their eye on the page, indicating to pay attention to.

Constrain your use of fonts

Some general rules of thumb for font usage, according to usability experts at the Nielsen/Norman Group: Using more than approximately 2 fonts per page can produce a ransom-note effect.

Choose images carefully

When using an image as a banner, or in any other supportive role on the page, select an iconic image which tells the story of the contents of the page. The blog A List Apart uses illustration brilliantly to summarize the message of their featured articles. Clip art-type graphics set an unprofessional tone and should be avoided.

Match image resolution to users' needs

Stretched, too-small, pixelated or generally poorly-sized images reflect poorly on the ethos of the site and the content author.

Resources

The following resources are useful works on various aspects of writing for the web.

The Non-Designer’s Design Book (Robin Williams)

A simplified and very accessible explanation of Gestalt Psychology principles as applied to design. She explains clearly four of the most important design principles to master—contrast, repetition, alignment, and proximity.

Don’t Make me Think: A Common Sense Approach to Web Usability (Steve Krug)

Brief and very accessible text outlining the core principles of usability for the web. This book is an excellent primer on usability and writing for the web.

Content Strategy for the Web (Kristina Halvorson)

Seminal introductory text on content management from an industry leader. Witty and accessible tone, while chock-full of useful information.