The amount of information we come into contact with every minute on the Internet is absolutely staggering. Both consciously and subconsciously we are constantly absorbing tons of data; whether it be in text form, imagery, video, or audio and regardless of whether it’s been actively seeked or encroaches in from the sides.

Everyone knows that people don’t read web pages, they scan them. Therefore prioritising the information that really matters should be the primary goal when designing. However some designers get lost when trying to either squash too much information in or by loosing sight of what’s really important – why the visitor is there, for the sake of adverts or bombarding them with splash information to try and draw them further into the site.

2 important points before I go further:

• Sometimes it’s not the designers fault. Pushy clients can lead to bad design decisions that are either difficult or impossible to avert.
• Prioritising information does not mean minimalistic design, but applying a level of usability consideration.

Introducing a concept: Information Design Prioritisation

Of course this already exists in different forms. I’m simply labelling it in a way that corresponds well with this particular topic.

Sometimes the content of a site can dictate it’s own design. Wireframes can be developed easily and sensibly from the initial information provided by the client. However some sites hold so much data that needs to be accessed quickly and painlessly by users. This is where the challenges can arise. Throw in advertising and meta-data and simple designs can easily get crowded.

So, IDP (Information Design Prioritisation). Take the elements that are required on a page then decide what takes priority and score the different elements depending on how essential they really are to the user experience. If you’re redesigning a site and using the same information; use Analytics results to see where users are clicking the most and eye-tracking tests to decipher their routes and the hot spots on the page.

Clients have their own agendas as to what takes priority. Naturally it’s normally whatever leads to the money. Sometimes these are adverts, sometimes it’s the product a site is selling. What’s imperative to realise is that, in terms of the design, it’s not the necessarily about what the client wants but what the user wants.

If a blog offers financial advice, the chances are that the visitor is looking for financial advice. So – what takes priority; the informative blog articles or the Google adwords and big banners advertising IFA’s and cheap consultancy services? My bet is that the user wants to read the articles, the site owner wants to earn a few extra bucks through adwords. Often good design ethic and good business ethic can go hand in hand.

Secondary and tertiary priority information

On a shop search results page, the results are by far the most important elements because this is information that the user has requested personally. ‘Featured products‘ or ‘Latest deals‘ are secondary or even tertiary priority information; they may apply but haven’t been directly requested so should be smaller and less obvious than the search results.

Don’t use it? Lose it.

Sometimes it’s required to be strict. Like having a house cleanup – do you really need that old hamster ball or foot massager? Get rid! Assess the relevance and necessity of the site elements on a design, if they’re not required or will rarely be used – either ditch the entire thing or hide it. This can sometimes be a difficult decision to make, especially with pushy clients – but have the guts to say no, use your creative instinct to work out what needed and what’s just getting in the way.

Condensing the visual presence of data

When the primary priority information is built into the design, the various secondary priority information still needs to be easily accessed, but just not as obvious. In the case of blogs – this is normally where the sidebar(s) come into play. Information can be condensed and immediately concealed using some of the following methods:

• Select boxes. A list of links, options or answers might be better held within a <select> as opposed to a static list or radio buttons.
• Drop down menus. Secondary and lower-level menu items can be stored in CSS drop-down menus, where the information is accessed by the user only when it is needed. IDP can also apply here – does certain information really require it’s own page, are 3/4 levels of navigation really necessary?
• Javascript/Ajax effects. jQuery accordian menus, content scollers, big fancy tooltips, content areas that appear on cue etc are all great methods of hiding information until it’s requested. Don’t forget to consider users and browsers without javascript. These types of elements and effects are also useful for SEO – the content’s still there for the search enginer spiders but is tidied away visually for a cleaner user experience.
• Pop-ups, such as lightbox, fancybox and all the other many spin offs are great for displaying large pictures, iframes, video etc without taking the user to another page and saving plenty of page real estate that can be used for other information (or maybe just whitespace!).

Applying the theory

At Flame, we were recently involved in the pitch for a new website design for a popular British holiday parks business. We’d designed their exisiting site a few years ago and it was time for an upgrade. Although we didn’t win the pitch, we learnt a few lessons whilst working on the designs and realised the importance of information design prioritisation. We had to design several pages, but for the purpose of this example I will use my homepage design.

The pitch was really a straightforward redesign, but to tidy the layout up and incorporate more user-centric features. The design brief specified that the design style was to remain similar, and perhaps incorporate elements of their other branding and print media. I stuck to the same width and kept the logo and general colour scheme.

Out with the old

In with the new

How I used IDP to create a more usable layout

On the old site layout, Google Analytics results told us that the location-specific deals on the right were clicked less than 2% of the time. So first step – ditch them. They took far too much real estate for their value, however I did condense them into a ‘latest deals’ scroller in the left sidebar.

I then moved the main navigation from the left to a horizontal, drop down menu at the top of the page. Being in the red banner seperated it from the rest of the content so it’s immediately recognisable and easy to find wherever you are on the site. The incorporation of drop-down functionality also created easier deep linking.

The new real estate allowed me to bring in the ‘Find a Park’ map. This is big, clean and visual and provides an alternate way for users to find parks. Javascript pop-ups or tooltips can provide more information.

The ‘Book your holiday’ block was one of the most important elements by all accounts. On the existing site it’s crammed into the content area and doesn’t stand out. So I brought it up to the top left and built it into a large blue block that can appear on every page with a bright yellow ‘Book Now!’ call-to-action.

Judgement call: the design brief specified a strong use of imagery. Hence the reason behind such a large banner image. For what it’s worth, I feel the image on my design may have taken up too much space in relation to it’s importance.

I also removed other small clutter elements that were crowding the design, for example the ‘Jump straight to a Park’ select box is catered for by the drop-down main menu.

Alas, the design obviously didn’t tickle the client’s fancy, but I still learnt a lot in the process.

Quick Case Studies

Just a quick look at a few examples of sites offering similar data and amounts of it, but offering it through different layouts, primarily clutter vs clean. These thumbnails may not do justice to the cause, so check out the site’s themselves to see what I mean.

Just a pompous catchphrase or a genuine usability consideration?

Even though a lot of the aspects of information design prioritisation seem like common sense (which they are), there’s no shaking the fact that they’re often overlooked. Sometimes greed or misguided commercial targets can affect not only the design, but in turn those targets through creating bad user experiences and pushing visitors away.

I hate using MySpace. It’s cluttered and ugly and on the off chance that I do have to visit a MySpace site, I’ll get whatever information I need and get the hell out of there. And this happens all the time every day across the web – we are bombarded with data that we don’t need, that isn’t relevant; and this can hamper our online experiences.

I feel that a crucial skill that any web designer should posess is the clear ability to develop layouts that can manage large amounts of data without breaking and without making the user struggle, or even have to think!

On that note, check out Steve Krug’s Don’t Make Me Think (after you’ve left a comment of course!).