Good Information Architecture (IA) work is about choosing the right representation for the project and intended audience. Creating an illustration to explain an issue to a development team is very different to illustrating that same problem for a marketing manager.
The three schematics below show a standard hierarchical representation of a website and then two isometric views of the same information structure. Obviously the standard site map is easier and faster to create but the isometric views provide much more information.
Standard Hierarchical View
Isometric View #1
Isometric View #2
Primary navigation issues on home page? It’s just the tip of the iceberg
It’s not really difficult to work that one out. But a lot of business’s don’t. If your primary navigation doesn’t work then it is extremely likely that the rest of the information architecture and general user experience is not going to work either.
Isometric view of the FSA iceberg
The schematic below is an attempt to show the core of the problem. I should say that most examples of my user experience designs on this site have been redacted for reasons of confidentiality, but as the information below is in the public domain I did not see any reason to in this case. You can just go and look at the FSA website for yourself. It still seems to be the same which is worrying as I did this work a couple of years back for an agency. But then there are agencies and there are agencies…. Some know what they are doing and some do not.
I created this isometric view of the primary navigation of the FSA site in an attempt to illustrate on one screen what the problem is.
Only some of the core areas of the FSA site are accessible from the FSA home page. Many others are buried deep within the site. While this might be bearable for users who come to the same site section time and again it is bad news for a new user.
This site is useful as a case study of abysmal user experience because the poor design of the website (see screenshot below) is an excellent demonstration of the fact that wireframes / screen designs are merely the flesh on the bones of the information architecture of a site.
I created this isometric view in Adobe Illustrator. Tricky and time consuming to do but worth it depending on your audience’s information needs.
Of all the projects I have worked on this is the one where I would love to go back and finish what I started. On creating this blog post I had a look at the FSA site again for the first time in a couple of years (screen grab below dated 8 February 2013) and it doesn’t seem to have changed much.
A classic case of #ux #fail
This is a classic case of #ux #fail. And #graphic #design #fail come to think about it. You have to wonder if this website, the public face of one of the most important public bodies in the UK, inspires confidence in people who use it and view it? I think we know the answer to that question.
Section of a standard site map pattern I often use. Note click levels (dashed lines). Number of clicks to content may not be a huge deal anymore but on a large site map they are very useful for reminding people of the depth of the site.
Colour coding is purely to allow people to see the different sections of the site easily. Bear in mind that this map may end up being several meters long and so will be viewed at a distance.
Key to standard sitemap. This illustrates the basic structure of each node. I almost always customise this but it is a good starting point for functional site maps which may be quite large.