Thursday, December 4, 2008

9 Information Design Tips to Make You a Better Web Designer

It's probably the least glamourous part of web design, but information design is by no means the least important. Locating and consuming information is the quintessential web task, far surpassing buying, playing and communicating, all of which include a good portion of information design themselves. How users find and then avail themselves of all that information is affected by how it is structured and presented. Thus every web designer should be equipped to make qualified and informed decisions on just how to do this.

1 - Be methodical

Information design is a problem that gets more and more complex the bigger the website. However even a small website will benefit from a methodical, step by step process to figure out how to order and organise the site's content. Here are some simple steps you may wish to take:

    • Understand the Site's Content, Processes and Purpose
      It's pretty hard to organise a bunch of stuff if you don't know what that stuff actually is. So your first task is to skim through the site's content, processes and goals. A site's content means copy, images, video and other assets you've been given or briefed on that needs to go into the site. A site's processes are the tasks and workflows that users will need to complete to interact with a site. And the site's goals refers to both the client's goals and the user's.

      So for a simple restaurant example you might find that you have text for pages 1 through 20, you know that users will be attempting to complete some task such as making a reservation. You might also see that a user's goals on the site are to find out what the restaurant serves, where it is located and whether there are tables, and then hopefully make a reservation. Finally the client's goals might be to serve the user, but also to push them towards a set of specials they run.
    • Prioritize and Look for User Paths
      Once you've got a firm grasp of what's going into the site, you can begin to prioritize information and figure out how users will traverse the site. What paths will they take to accomplish their goals? What pages are the most important? Which should be seen right up front and which are just supporting information?

      Even with a simple example like our restaurant site, there are many ways of setting out the information. For example you might push specials straight away on the homepage, or you could tie them into the reservation process, or you might work them into the menus. Similarly you may find that given a client's goals, you will have a different priority on page content. Maybe the client tells you that no-one is ever able to find this restaurant, so you need to make a How to Get Here page and give it a high priority.
    • Organise the Information
      With an understanding of what is going into the site, and a clear grasp of how the different elements relate to each other, how users will want to work through them, and how important different sections are, you can now organise the information for the site. This organising involves not just categorizing pages - for example figuring out that 'about the company' fits under an 'about' tab - but even questioning and rearranging the content you've been given. Sometimes you may find that it's better to combine multiple pages, break up one long section, turn some text into a simpler diagramatical representation, or any number of other rearrangements.

      Develop a sitemap or plan of how the information will site in a heirarchical way. Although sitemaps are usually just a set of boxes indicating pages, you can work in all sorts of extra information explaining how the site is going to be set up, including things like quick links from the homepage, how different sections might tie in together, and paths a user might take through a sitemap.

2 - Think out of the Box

Sites with a reasonable amount of complexity can be rearranged and reorganized many different ways. One site that I've worked on organising and reorganising countless times is FlashDen. I've lost count of the number of times I've looked at that menu and rearranged it. In some instances we just move pages into different sets and groups so that they seem more logical, and in others we've introduced more out-of-the-box thinking.

For example some months ago the menu was becoming overly complex so we removed a whole heap of the more "fluffy" menu items and created a blog that now houses competitions, newsletters, subsite links and other pages that were cluttering up the menu.

Recently we've found we have many of what I call "stragglers" - that is pages without a home in the menu. From an information design point of view, stragglers are terrible - even I can't remember how to get to some of them! The solution this time is to build a wiki system, pipe top level content into the menu behind the scenes, and then use the wiki to house deeper levels of information with its own search, tagging and categorization facilities.

The point of my experiences with FlashDen is that organising information doesn't even necessarily have to be about putting it into menus and submenus. You may find that some information shouldn't be on a site, or that it requires a subsite, or that you need to do something else altogether. With FlashDen I have the advantage that it's been almost 3 years now that I've been looking at the content and still to this day I find new arrangements and solutions.

To be an effective information designer and to find the most optimal solutions often requires thinking out of the box. Of course saying "think outside of the box" is much easier to say than to do! Sometimes we are constrained in a box we can't even see. Some time ago I heard of an experiment where a bunch of jumping bugs were placed in a glass box and over time learnt to jump only so high. When the glass lid was removed the bugs continued jumping the same, restricted height not even realising they could if they wished get out.

So how do you overcome a box you can't see? Simple! With the help of others who aren't restricted by the same issues you have. For complex information designs I will often ask other people for organisational ideas giving them only the raw problem and not my own permutations. Getting say a programmer's ideas or a user's views will often surprise you as their perspectives are completely different from your own and unhindered by the same set ways of thinking.

When you do organise large sets of information, an obvious question that always arises is how deep or how wide should your navigation be. Depth refers to how many layers of categories and subcategories there are, while width is about how many of each level there are. The trick is to find the balance. If there are too many items on a single level - especially the top level - then you risk confusing the user. On the other hand if a user has to click many levels in, you risk losing them.

A good rule of thumb is to keep the number of options on a given level to 4 - 8. If you have 8 top level items, each with 8 subcategories, and each with 8 sub-subcategories, you'll have enough space for a 512 page site. Of course rarely do things automatically balance out so well. So again you have to be careful that you don't have a heavy side and a light side. For example, on a site with a couple hundred pages, if you put contact up on the top level somewhere, chances are it's not going to have 8 subcategories with 8 sub-subcategories. It's more likely that contact is going to be a pretty simple section - even for a complex site.

On the flip side if you don't put something like contact at the top level, you may get a more balanced depth of information, however you risk not having an important user task completed because it'll be hard to figure out how to find the contact information. A simple solution to this particular problem might be to add 'quick links' where you give a user a few options on the homepage to jump deeper into the structure without navigating the usual way.

4 - Design for Scanning, Skimming and Jumping

I don't know about you, but it is seriously rare that I will ever fully read a webpage. Whether it's to read instructions, terms and conditions, or just regular copy, most of the time I skim, scan and jump. Assuming I'm not the only one who does this, it makes sense to design pages to faciliate this way of consuming information.

Don't wrap key information in bundles of text - highlight it. Don't give users paragraphs on end - break them up with headings, subheadings, bullet points, diagrams, whatever it takes! Think about how a user will use your site and design it to facilitate their use.

A good example of designing for user consumption is on our sister site NETTUTS, a site that as most of you know, publishes tutorials about web development topics. Now on NETTUTS we noticed early on that most people, on first viewing a tutorial skip right through to the end, where they try to find a link to a demo and / or source code so they can decide if the tutorial is worth reading in the first place. Once we realised this, it was a simple matter to add special Demo and Source buttons and place them consistently at the top of the tutorials. This simple adjustment to match our design up to user consumption patterns has gotten us a lot of happy feedback.

5 - Design text that wants to be read

I'm not sure if I'm just getting older, or if spending all my time in front of a screen is just making me picky, but lately it really bugs me when I'm presented with text that doesn't compel me to read it. The aim of a site design is usually to transmit information and most of that is written text, so focusing on displaying it well should be a priority.

Using too-small font sizes, low contrast between text and background colour, or badly using light text on a dark background, are all design sins that we've all been guilty of (me on many on an occasion!) But beyond these, there are other ways that your design can make the visitor actually read. Aim to design such that your layout focuses visitors on the copy and leads them in with titles, subheadings, demarcations, pullquotes, and other techniques for pulling the eye.

6 - Guide the User both across pages and through pages

Earlier I mentioned User Paths - that is set ways that users will tend to traverse a website. Many of these will come about simply by the way people behave, but with planning, you can choose how a user will be guided both through a single page and across multiple pages. Once you know specific paths you can work in visual guides and links to help them move along that path.

For example on FlashDen, when a new user arrives, it is our aim to get them to register, find files, deposit money and then buy those files. So we first give them a summary of the four step process on the homepage, then at each stop there are pointers to direct the user onto the next step. In our next redesign I'm hoping to make this path even more obvious as it's essential to the site working as it should. Note that the path I'm describing is not 4 pages, but 4 tasks. For example finding files might involve the user looking at dozens of pages, but it's one discrete task. User paths don't need to be through set pages, they can just as easily encompass set tasks!

7 - Don't overcomplicate things

It should go without saying that simple is better for users than complicated. Nonetheless it's all too easy to overcomplicate designs. I know that I often make things seem more complicated so that I have more visual elements on a page to work with (bad Collis, bad Collis!) Another overcomplication sin is using unnecessary words on buttons and calls to action. Steven Krug in his excellent book Don't Make Me Think gives the example of a hypothetical employment site with a button that reads:

  • Jobs
  • Employment Opportunities
  • Jobs-o-rama

One of these is clear, one is reasonably obvious, and one is - well who knows.

8 - Visualize Information

As designers, we more than most, know the value of a good visual. And there are plenty of opportunities to diagram or visualize some data, concepts or information. This very article as you will remember begins with a very basic diagram of how interface design, information design and aesthetic design relate. These visuals not only break up text, but they are also more memorable and give you an opportunity to bring a page to life.

DoshDosh have an interesting article on information visualization, diagrams and what the author calls infographics that is worth checking out even if it's only to see the brilliant graphic examples.

9 - Analyse your Information Design

Information design is one of those things that is hard to get right on the first attempt. So once you've built a site you should be analysing it to see how people use and digest the information, how they behave and where you can improve your design.

A neat tool in this regard is Google Analytics. For example where I mentioned User Paths earlier, Analytics lets you track paths through pages using the Goals feature. You set up a sequence of pages and Analytics will report the %'s of visitors who make it through (and by extension click away) at each point.

Another Analytics feature you can use is search term tracking which lets you see what users are searching for on your own site's search field. Knowing what people are looking for tells you what information needs to be more readily available!

Tuesday, December 2, 2008

The 3 Components of Good Web Design

Good design isn't just about good looks, and nowhere is this truer than in web design. In fact it makes sense to think of web design as being made up of three major non-technical components: aesthetic design, information design and interface design. If you want to be a great web designer it's essential that you have a firm grasp of all three.

Aesthetic Design
Aesthetic design is all about getting the look right. If you are good at this it means you will be able to design sites that not only look good but are appropriately designed. Different designs convey different messages to an end user, so it's essential that a design matches the site's message.

The other day I was walking through a supermarket and saw a juice brand that had the visual design of a laundry detergent. There was just something about the way the box was done that I momentarily wondered why there was detergent in the fruit juice aisle. In the same way giving a website an inappropriate package for its content and message - even if it's a really good looking package, is a bad end result. This is why it's very important as a web designer that you don't simply follow fads and trends blindly. You must always be thinking not just how you can make a site design look good, but also look appropriate.

Out of the three components of web design, aesthetic design is surely the one that people most identify as being design. One thing I find interesting about aesthetic design is that it is deceptively difficult. I remember once designing a poster and showing it to a friend who commented "oh it's just a few lines and some text, you must have done this in about ten minutes" - ah the joys of being a designer!

Information Design
Information design is about preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information. In larger sites, just finding information becomes challenging, but in sites both large and small, processing it is always a design problem.

A quick example of information design is in how you organise and format text on a page. Because people tend to skim through content on a screen, it's much better to organise it with headings and subheadings, diagrams and visual hooks, and general variation for the eye. Techniques like these make the information on a page much easier to digest. But information design isn't limited to what's on a single page, itis also about what structures you use to house the site's parts, how you lay out the menus and submenus and how you cross link different sections.

You may be interested to know that in larger and more complex projects and sites, there is in fact an entire profession dedicated to modelling and structuring information called Information Architecture. The most famous Information Architect that I know of is Jesse James Garrett who incidentally coined the term AJAX. He's pretty neat and you can read about him at Wikipedia.

Collis' Awesome Diagram
Since we're talking about information design, it seems like a good opportunity to turn 6 paragraphs of waffley text into a diagram, so I present to you my awesome diagram of the components of web design! Bask in its red and grey awesomeness!

Interface Design
Interface design is the arrangement and makeup of how a user can interact with a site. The word interface means a point or surface where two things touch. So a web user interface is where a person and a website touch - so menus, components, forms, and all the other ways you can interact with a website.

Good interface design is about making the experience of using a website easy, effective and intuitive. It's actually much easier to demonstrate bad interface design because that's when you really notice it. A simple example of interface design is the use of icons. Have you ever looked at an icon and thought "what is that meant to represent?!" - well that would be bad interface design. Using icons to label and signify different types of content or actions is just one part of interface design.

Incidentally another example of interfaces that you will likely encounter as a web designer is Application Programming Interfaces or APIs. An API is the set of functions and protocols by which you (or your program more precisely) can interact with whatever the API is for. So for example Google Maps provides an API which you can use to create applications or sites that work with Google Maps.

What about ...
Now you may be thinking, that's all very well and good Collis but where does CSS fit into this? Or what about Flash? Well as I say, these are the three non-technical aspects of web design. On the flip side there are all those technologies and skills like HTML/CSS, Flash, Javascript and so on. But I tend to think they are more a part of web development than web design. In the same way that it's important to separate HTML and CSS to keep information and presentation separate, you could argue that how you make a design come into reality is separate from the design itself. In simpler terms, is knowing a specific CSS hack anything to do with design?

Don't get me wrong, you need to know how to build things in order to design them appropriately. However when it comes to saying what makes up web design, my answer remains Interface Design, Information Design and Aesthetic Design.

What's your take? Have I missed some essential part of web design? Or do you think that web development is an essential part of web design itself?

Later this week you'll be able to read more in-depth articles of tips and tricks for each of these three components of web design - interface design, aesthetic design and information design. In fact the first one is going to go up in a few short hours.