Last week I looked at the website redesign process from the perspective of a content page and worked upwards, arriving—eventually—at the home page, producing wireframes along the way as the next deliverable for the project. These wireframes enable our customer and the graphic designers to collaborate further and tighten up the vision for the website. After all, a picture paints a thousand words and to date, there have been several thousand words written and explored without even a sniff of a visual design.
It’s easy to get hung up on where everything fits within the site structure but at least equally important to remember (if not more) is the fact that those content pages can be found not just by a site visitor trawling the site’s structure but a mix of external sources as a part of the larger Web.
External sources include:
- Family and friends sharing links with you via email, IM, social media or plain old word-of-mouth.
- Display surfaces – for example when you share a link via Facebook. The content is adapted and displayed to the 3rd party’s design.
- Content creators on other websites or blogs linking to your page as an authoritative piece.
- Content aggregators such as search engines and RSS readers.
What this means is that promises have already been made about your content. Just like those at the end of this article, links to your content are perceived as trusted sources by the person sharing the link. We can manage those expectations in a number of ways:
- Be consistent with page titles and link titles to the same piece of content.
- Make sure the content answers what is this? who is it for? what can I do with it?
- Use visual hierarchy to manage attention.
From the earlier article on developing a content view of the website, you can see how the use of content templates helps us with the first two items by defining a good page title and introduction for each piece of content. Just those two things will be used extensively around the website to provide a high-quality summary link in search results, landing and listing pages to help site visitors decide if it’s relevant content for their circumstance. It should be apparent that this can extended to external search engines, RSS readers and beyond.
The Page View
A page’s content typically has four types of information:
- The Content—the reason the page exists in the first place.
- Related—additional links, information or calls to action that are relevant to the content at hand. Fewer choices tend to lead to an action being taken rather than more. Overwhelmed with choice, many people will make no choice at all (and hit the “Back” button in all likelihood). From the book “The Paradox of Choice: Why More is Less“, 6 choices or less would appear to be the most we should offer site visitors. Certainly greater than 10 tended to result in the “no choice made” outcome. Should it be valid to have so much choice, then I recommend showing a “Top 5″ (or however you choose) followed by a “Show more options” link to reveal the rest.
- Context—this is the framing content that is the website’s identity and the main navigation. This context is vital in establishing trust between the visitor and your website.
- Overhead—Overwhelm the Content with large regions of eye-catching adverts and I’ll begin to wonder what your intentions are.
Clearly the Content should dominate—what percent of your pages are dedicated to it?
Establishing a visual hierarchy
Still talking concepts! It must be creeping in by now that web design is far more than pretty pictures? Knowing what to add around our content and knowing the importance of those elements helps us achieve a visual hierarchy using Gestalt Principles on our website. Gestalt is a psychology term meaning unified whole and refers to theories of visual perception:
- Figure and ground relationship—how the eye distinguishes between an object (figure) and its surroundings (ground). Contrast is an example of this.
- Similarity—when objects look similar, people perceive them as a group or pattern. An object can be emphasised by being dissimilar or anomalous.
- Closure—when a shape is incomplete, a viewer’s perception completes it.
- Proximity—objects that are close to one another are perceived to be more related than things that are spaced farther apart.
- Uniform connectedness—refers to the fact that elements that are connected by uniform visual properties are perceived as being more related than elements that are not connected.
- Good continuation—elements placed a line or curve are more related than elements not on the line. A common method employed to achieve this is the grid layout.
Wireframing
Whether you do this with pen and paper, Photoshop or a wireframing tool like the most excellent Balsamiq, wireframing is the first step towards establishing the visual design everyone so craves for. Applying the Gestalt Principles to our content needs and their importance from a business and user point of view we sketch out, in black and white, the structure for each page type we have identified from the site structure and content templating work. Initially as part of Iteration 1 of the redesign we identified five page types including the home page. Namely author-generated pages (I suspect they’ll be a few flavours of these), landing pages that summarise the content within a particular section of the website, listing pages that deliver content in a way similar to a search results page and a signpost page type which is a lightweight content page pointing visitors to a service page on another website.
For the website redesign I have employed a 960 pixel-wide layout grid to align the page elements to. This gives me 16 columns, each 40px wide, with 20px gutters (gaps) between each as a framework. Visual hierarchy is also established by the considered use of typography for which I will be using a baseline 16 pixel (browsers’ default size) for body text. A number of typographical scales exist and I’ve designed the typography using 18px for heading 3 and lower, 24px for heading 2 and 32px for heading 1. There may be occasion to use a small font size for—ahem—small print and this will weigh in at 14px.
Navigation
As part of the context content, the navigation scheme was an important problem to solve. On the one hand we had deep-rooted official-speak and the other, the general public who just want to find stuff and move on. I hope the site structure has simplified matters—time and user feedback will be the litmus test—but with the focus on content we’ve put a lot of thought into capturing metadata to offer a variety of supplemental navigation methods to help visitors discover content. For industry types—including our own staff—most templates will feature a “super footer”. This is an auto-generated section that reveals the content using the industry terms. It’s a bit jargony and very, very deep in its sub-categorisation of content. This is all well and good—”a maximum of three clicks to find something” is a web myth by the way—because as long as the decision to click is easy to make and easy to reverse, users typically don’t mind “muddling” through a website. What does matter, and this is the major failing of industry terms, is the labelling of that link. Jargon versus plain English. “What does this mean?” can produce an off-putting mental workload with the former type of label.
Another navigation aid is the A to Z of services, a popular page on the current website. This might be a good or bad thing, bad if it suggests your main navigation is too confusing to muddle through and people are “resorting” to the A to Z. Yet another navigation scheme we’ll be employing is tag based. With all this metadata floating around, we can quickly collate auto-generated listing pages showing content that share the same metadata description in a format similar to search results. With good page titles and introductory text I hope this will benefit the discovery of related content across the site structure. The metadata also provides contextual links on a content page in a similar manner with the employment of widgets displaying what else is in the same section of the site structure and most popular related content elsewhere. Last and by no means least, the search box is clearly a must-have means of navigation.
Steve Krug, author of “Don’t Make Me Think” writes very clearly on the topic of navigation and readily compares users habits with that of a bricks and mortar shop. Paraphrasing heavily, a shopper arrives at a store wishing to purchase something in particular. Some will look at the banners above the aisles and set off immediately. If they don’t find the object of their desire where they thought they would, they’ll try another aisle. Eventually they might give up and ask a shop worker. Some people will go straight to an assistant and ask to be shown where to look or go look at the Floor Directory. For efficiency all the biscuits are together in the same aisle but in order to increase sales, the shop manager might put “specials” close to these, for example a nice ground coffee that goes particularly well with a type of biscuit. Can you spot the analogies between this example and the navigation schemes we’re employing? So much of this is convention that you don’t really notice as a website visitor—but someone (the design team) has had to plan and build it nonetheless and that does mean time (and therefore money) has to be dedicated to the activity.
In closing
We’re by no means done with wireframing and designing page layouts. The devil is in the detail as the saying goes and I fully expect additional page types and content elements within them will need designing from a layout point of view. Tweaking of the starting templates will probably be required also. Anyway, thanks for making it this far! Turned out to be another big post in the end.
Further reading
- Content page design best practices,
- Gestalt Principles (series by Andy Rutledge start here),
- Understanding Visual Hierarchy in Web Design,
- How to Use Visual Hierarchy in Web Design,
- Typography Tuesday: Hierarchy,
- My bookmarks on navigation design,
- My bookmarks on Gestalt.
Don’t forget: read the linked article’s comments for additional nuggets of information and insight.
