Non hierarchical navigation

By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

Just occasionally you come across a website that just doesn’t fit the normal pattern of things. Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought I would share with you my response.

There are lots of reasons why a normal information architecture might not work for your site. However, probably the most common is that your site has simply outgrown the constraints of a hierarchical tree and that your users are getting lost deep in the information architecture. Often the answer is simply to do some radical pruning to remove much of the deadwood, however occasionally a different approach needs to be found.

So what are the alternatives available to you?

Search

The most obvious approach is to use search as your primary navigational method. Indeed search is the primary mechanism we use to navigate the entire web and so we know that it has the scalability required. However, although potentially the best solution it is often poorly implemented. I have written about how best to implement search before and so I am not going to repeat myself here. Nevertheless, there are additional things to take into account when search is used as the primary navigation for an extremely large site.

Firstly, position is important. A search box is a relatively small screen element and so can easily be lost within a design. When search is the main way that a user will find their way around your site you need to make this obvious. Move the search into a more central screen position like Google or Amazon does.

Secondly, on a large site advanced search is important. The problem is that users struggle to build complex search queries. They find concepts such as using quotation marks or Boolean joins difficult to grasp. As web designers we need to search for new ways to help the user build these complex searches. As it happens the answer might be right under our noses.

Screenshot of find and replace functionality in Dreamweaver

Dreamweaver comes with an interesting tool that helps users build complex search and replace commands without having to know about regular expressions. Although a similar approach has been used on websites in the past, the arrival of AJAX and DOM Scripting now means this kind of functionality can be implemented in a much more intuitive and responsive way.

Related Links

Although not a replacement for traditional navigation, related links can work as an effective accompaniment to search. Related links allow you to establish a loose relationship between documents which is much more flexible than the static hierarchy of an information architecture. They can provide a context to a document which search alone does not offer. However related links are not without their problems. When publishing new pages it is a relatively simple process to link those pages back to previously published pages in order to provide context and additional information. However older documents are often neglected and when a new page is published these older pages aren’t updated with a link to the new page. In other words old pages atrophy. The problem is caused because the system is reliant on editors remembering that there are older pages which need updating. Ideally some automated system should identify related pages, but we will come on to that later.

Breadcrumbs

Normally breadcrumbs are associated with a traditional information architecture where they show your current location in the hierachy. However, that is not the only use of breadcrumbs. A less used approach is that breadcrumbs show the path the user has taken through the site. The reason this approach is less used is because in theory the browser back button provides the same functionality. However, the majority of users are unaware that the back button allows them to skip back multiple stages. Historical breadcrumbs clearly show the user which pages they have previously visited and allows them to quickly jump back to anyone of those pages.

There is also an opportunity here to once again learn from desktop applications. Windows Vista has added an interesting new feature within its file explorer that might be adapted for our historical breadcrumbs. Basically the file explorer’s breadcrumbs allow you to view the children of any folder in the hierarchy:

Screenshot of the new file explorer system in Vista

This approach could be used with our breadcrumbs to show any links within a document allowing the user to quickly jump to related pages. The primary reason a user utilises breadcrumbs or the back button is to select another link so this approach could prove invaluable.

Tagging

Next to search tagging is the most common way of organising non hierarchical information. Indeed this post has been tagged as shown at the bottom of the page and you can view a tag cloud for the entire site. Sites like delicious also allow for the bundling of groups of tags to create a basic information architecture for the site.

However, tagging does have some fundamental issues which need to be resolved. The greatest of these is who does the tagging? The most popular answer to this question is that the user does it. Indeed Russ Weakly of the Australian Museum put together a very compelling presentation at Webstock for a user driven information architecture based on tagging. There are also a growing number of tools that facilitate user tagging of a website. Of course the problem with this approach is that it requires the user to be motivated enough to do the job. When tagging my bookmarks on delicious I am motivated to do so in order to allow me quick access to them in the future. However, the same motivation does not exist to tag a page on a standard website like this one.

The alternative to user tagging is that the owner of an individual page tags it. The owner is certainly much more motivated to tag the document but that doesn’t mean they are the best qualified to do so. The problem is that an owner’s mental model can be radically different to that of a user and so their choice of tag can be inappropriate to those navigating the site. Web page owners tend to rely heavily on jargon and view the world from an institutional point of view. Of course the other problem of editorial based tagging is this can present a massive problem if there is a substantial backlog of web pages that need tagging.

Active Navigation

Much of the problems that arise with both tagging and related links comes from the need for human intervention and in particular the degree of intervention needed to tag or link older documents. One solution might be to automate some of the process.

Back in 2000 I was fortunate enough to work with a ground breaking company called Active Navigation. These guys were working with similar algorithms to those found in a search engine like Google but applying them in a very different way. Like Google they were using linguistic routines to analysis a page and identify the keywords which best described the content. However instead of using the results to build a simple search engine they were also using it to build a navigational structure of related links and tags. This would ensure related links were always up to date and avoid much of the human intervention required for tagging. Instead of having to tag and manage individual documents they can simply edit and manage the tag cloud to ensure only the most relevant keywords are featured.

Because the system fundamentally uses the same approach as a search engine algorithm it is more than capable of also providing search functionality. By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

Podcast 51: Better Google Listings

We all want better listings for our sites on Google, but search engine optimisation often appears to be a dark art and a morally murky area. In this show, we explore the issue and provide some practical advice.

Play

Download this show.

To subscribe directly within itunes click here

Google accounts for over 49% of all searches and has one of the most complex and closely guarded search algorithms. It is not surprising therefore that your website ranking on Google can be a subject of much pain and frustration.

Ranking criteria

The exact nature of how Google ranks websites is largely unknown. However, it is generally accepted that the following items are a major contributing factor:

  • The age of your domain name
  • The amount of content available to the search engines
  • The amount of websites linking to your website and their popularity
  • The information architecture of your website
  • The quality of a page build
  • The relevancy to the end user

Page Ranking

A broad-brush indication of your rating is Google’s Page Rank. This numerical value provides some idea of your success in search rankings. There are numerous ways of viewing your page ranking but probably the simplest is to install the Google Toolbar.

Page Indexing

Another important factor in ranking your site is the accessibility of your content to Google. Google can only list your pages if it can access them. You can easily find out how much of your site is indexed by typing the following into Google:

Site:yourDomain.com

This won’t return every page as it will consider some pages duplicates. To see all pages click on the link at the bottom of the results.

Inbound Links

Of course probably the most significant factor in your page ranking, is still inbound links. The quantity and quality of links are crucial in how well your site is rated. You can view how many sites link to you by entering the following into Google:

Link:yourDomain.com

What does Google look at?

So when Google visits your site, what exactly is it looking for? Well, Google pays particular attention to the following elements on your pages:

  • The page title
  • The body content
  • Your meta tags
  • Headings
  • The naming and destination of links

Of course Google cannot index everything. It struggles with some content and cannot access others at all. Below is a list of the more troublesome elements. Although these elements can be used on a site you should not rely on a search engine being able to fully index them:

  • Images
  • PDF documents
  • Flash
  • Multimedia content

SEO Good Practice

Understanding how Google works is one thing, improving your listing is quite another. Below are is a list of good practices I have picked up while researching the show. These should go a long way to helping you improve your sites placement. However, ultimately search engine is a specialist area and you may wish to consider outsourcing this work if you are able.

  • Identify a list of keywords to focus on. Keep it short and specific. Trying to ranking highly on lots of broad phrases will prove impossible.
  • Endeavour to include keywords in your page URLs. Look at the address for this page. Notice that it repeats the title of the article. Does your site do this or does it have incomprehensible URLs?
  • Use Heading Tags and keeping the H1 tag for the page title rather than the title of the site.
  • Make sure that every page has real content rather than lists of links. I recommend at least 50 words per page.
  • Wherever possible using keywords in your links (both in the body of the page and within navigation).
  • Use breadcrumbs through the site.
  • Try to keep keyword density at around the 5% mark.
  • Separate your content from your design by using CSS based layout.
  • Make sure any Javascript you use is unobtrusive and degrades nicely.
  • Ensure that meta data (keywords and descriptions) is unique to each page and not generic across the whole site.
  • Remember that content only accessible after submitting a form is invisible to Google.
  • Wherever possible, link to other content within your own site using consistent link descriptions.
  • Ensure all images have an alt attribute (alt tag).
  • Make sure your site has a sitemap.
  • Look at your competition and analysis what SEO steps they are taking.

Conclusion

Improving your ranking on Google can be a slow and frustrating experience. It is not unusual for a website to take 4 months to be fully listed and even longer if it is a new domain. Even more frustrating is the fact that Google keeps much of its algorithm a closely guarded secret, which means that much of what we know about improving rankings is educated guesswork. Despite that, we cannot ignore Google. They are a dominant force in the marketplace and search engine listings are a vital component of any online marketing strategy.

Also in this show…

Also in this week’s show we review CSS – The Missing Manual, take a look at a standalone version of IE 7 and check out a new automated testing suit. In the news we also see @media go global and have a look at the latest Web standards advice from A List Apart.

Dump your information architecture

Do you run a website made up of thousands of pages? If so, then you may want to consider listening to an excellent presentation by Russ Weakley. He proposes an interesting new approach to the information architecture of large sites.

I have written before about the unique challenges of coming up with navigational approaches for large sites. It is a subject particularly close to my heart as many of the sites I work on have huge numbers of pages. Sites of this size do not sit comfortably under traditional navigational models with information architectures that become very deep and convoluted.

The approach suggested by Russ in his presentation at Webstock is a radical departure and I can imagine a lot of hesitancy within larger organisations, however despite that, I still find it a fascinating concept.

Russ is proposing that website owners stop imposing navigational approaches on users of a site. Rather than creating an information architecture for a site, website owners should "let go control" and allow users to create their own paths to the information they require.

This is achieved through tagging. Instead of pages being grouped together in sections within a site’s architecture, each page is essentially standalone. Visitors navigate to a page using tags inserted by the author of a page and via the search mechanism. By not imposing an artificial site architecture onto the site you avoid problems like cross linking between sections and navigational problems associated with deep sites.

It is a very hard concept to explain and so I suggest that if you are running a large site you take the time to download Russ’ presentation.

Listen to Russ’ presentation

The approach is not without its problems but it is something to seriously consider if the information architecture of your site is causing you problems.

I have to confess that although I find the concept very exciting I cannot see many websites adopting it. The concept of isolated pages not organised into a predefined architecture will simply seem too alien to many website owners. However, in a world where users "information forge" by dipping in and out of sites via search engines, it makes perfect sense to organise website pages in a non-hierarchal way.

I do see real potential in this approach, which is why I am intending to implement a similar approach on the upcoming relaunch of the boagworld website.

Podcast 38: Navigational Approaches

Paul and Marcus take a detailed look at the different types of navigation that can be used on a website.

Play

In this 38th episode of boagworld.com Paul and Marcus take a detailed look at the different types of navigation that can be used on a website. From the humble body link to the most complex site map, this episode tackles how to get the most from your sites navigation.

Download this show.

Help us out. Complete our podcast survey

Website navigation is a huge subject and really far too much to fit into a single podcast. However, despite the obviously foolishness of the endeavour we did our best to cover as much ground as possible.

We looked at the following types of navigation:

Main navigation

Because this is by far the most talked about form of navigation we didn’t dwell on this area for too long except to share a few words of advice learnt through bitter experience:

  • Allow room for expansion
  • Use JavaScript with extreme caution
  • Keep it simple
  • Avoid using graphics for navigation where possible
  • Don’t try and be clever!
  • Consider the depth of your information architecture
  • Keep titles short, descriptive and intuitive
  • Don’t have too many links on any one page

Breadcrumbs

We spent more time on this form of navigation, reflecting on the results of some recent research into how people perceive breadcrumbs. In particular we discussed the position of breadcrumbs and how you explained the concept to end users.

Related Links

We discussed the benefits of adding related links into the interface of your site and how to organise them into useful categories. We also discussed how to link to external websites.

Site maps

We explain why site maps are important before expanding on the points covered in my previous post on creating a good sitemap.

Body links

Finally we discuss the much ignored body link as previously covered in my post “the humble hypertext link“.

Also in this show…

This week Paul and Marcus also cover navigational terminology (siblings, parents, children) and discuss the upcoming @media conference. Finally Paul shares an excellent new Firefox extension he has discovered that allows you to better view the source of HTML pages you are viewing.

Podcast 36: Developing your site structure

In this week’s show, Paul gets depressed about the state of online accessibility, we debate the virtues of user testing design and discuss the basics of creating a good structure for your site.

Download this show.

Check out Paul’s book recommendations

Developing your site structure

Organising the content of your site into a logical, user friendly structure is fundamental to its success. In this week’s show Paul and Marcus look at how to go about this process and some of the pitfalls you should avoid.

There is nothing particularly high tech about creating a good information architecture. The best place to start is by making a list of all of the content your site needs to cover. Print out each item on a separate piece of paper and start organising them together into logical groupings. It really is as simple as that.

Of course, even better than you organising the content into logical sections, is getting your users to do it for you. That is where card sorting comes in. In the podcast we discuss card sorting in more depth but most of what is cover can be found in the boagworld article on card sorting.

The conversation moves on to discuss the common mistakes made by those creating a site structure. Most of the points discussed are covered by Louis Rosenfeld’s excellent article: "Seven Pitfalls to Avoid in Information Architecture" so we recommend you take the time to read it.

Question time: Can you user test design?

In last week’s show Andy Budd and Paul took slightly different positions over whether it is possible to user test design work. In this week’s show Paul explains how he believes user testing can be beneficial to the design process, allowing for the resolution of design differences and enabling the testing of emotional responses to design.

Techno-buster: Different server side languages

The vast majority of the clever functionality we see on websites today is created through the use of "sever side languages". These programming languages allow a variety of functionality from content management systems to ecommerce sites. However with so many different languages out there it can all seem incredibly confusing. In this podcast Paul and Marcus explains how the average website owner shouldn’t have to make decisions about programming languages, but rather this is the responsibility of the developer. Different languages have different pros and cons, however in most cases it is down to personal preference. However, make sure that your website server supports your chosen language before development begins.

The state of web accessibility

Following Joe Clark’s hard sitting article about the WCAG 2.0 on the List Apart website, there has been much debate about the state of web accessibility. Paul and Marcus share some of their concerns and comment on the Web Standards Project response to Joe’s article.

Podcast 35: An interview with Andy Budd

This week on boagworld.com Paul chats with Andy Budd, author of CSS mastery, founder of clear:left and “international” speaker. Paul and Andy discuss the state of web design, working with clients and a bit about Andy’s background and expertise.

Play

Download this show.

Despite what I may like to think, myself and Marcus don’t know everything which is why we felt it was about time we started to get some other web professionals on the show.

In the first of what will hopefully be a regular series of interviews with different web designers, I speak to Andy Budd. Andy is a prominent figure in the web design community and is well known for his book on advanced css as well as his personal blog. However, Andy is also a founding member of clear:left the web development agency which arranged last years grass roots web 2.0 conference; d.construct.

Myself and Andy discuss:

  • How Andy got involved in web design
  • Why he is passionate about it
  • The general state of industry today
  • clear:left and how it came about
  • Andy’s book on Advanced CSS
  • How web designers should keep up with our constantly evolving industry
  • What web managers should be focusing on over this year.

Coming soon

Our next interview will hopefully be with Aral Balkan who is an expert in flash applications. With any luck he will be able to put me in my place regarding this overly criticized technology!

In the meantime be sure to download next week’s show where we look at the basics of creating a solid information architecture.

Tag your pages

You can’t swing a cat at the moment on the web without hitting some form of tagging. From delicious to flickr, tagging is all the rage, but what about tagging the pages on your website?

A company called Wanabo have released a free hosted system that allows your users to tag the pages on your site. It is a system that I am currently trialling here and you can see how it works by scrolling to the yellow box at the bottom of this article.

The benefits

Web page tagging does offer some interesting benefits. Allowing users to categories pages in affect creates a more organic navigational approach that is much more user centric than the traditional information architecture. It also has the possibility of making the site "stickier" with fewer dead ends. Each page would have associated tags that relate to other pages on the site so continually drawing the user on. User tagging also gives the web site owner a unique perspective into how visitors view the content and even an indication of areas that require improvement. There is also the benefit of linking tags across multiple systems. This would allow, for example, you to automatically associate images from your flickr account with specific pages on your site based on the tags used.

The reality

Although I can see the potential in paged based tagging I can also see some serious problems. Probably my biggest concern is the fact that different people have different mental models and so will associate radically different tags to a page. This will lead to situations where obviously related pages may not be linked because one person tagged a page with the keyword "dinner" while another tagged a different page with the keyword "lunch". This situation is further confused with plurals and misspellings.

Of course this makes the massive assumption that users will be bothered to tag a page in the first place. I guess this largely depends on the level of "commitment" they feel towards the site in question. For example, I would expect the number of users to tag pages on boagworld, to be higher than those who will tag their local council website, because users feel more committed to the boagworld community. Wanabo does provide a solution to this problem by allowing you to turn on "auto tagging". This uses the keywords entered into search engines to tag the page. However, this will still suffer from the same "mental model" problem I mentioned earlier.

One solution is to disable the user tagging and tag the entire site manually. The obvious problem with this is that it is a huge undertaking and undermines many of benefits derived from a user based navigational system.

In conclusion, I am not convinced that Wanabo have solved all of the problems yet. They don’t appear to have fully dealt with some of the drawbacks of user tagging and also suffer from some basic customisation issues.

Why add tagging to boagworld?

So why am I trying it out on boagworld.com? In short, to see what happens. By running it on a live site I hope to get a better idea of just how useful it is and what issues exist. In principle I find the idea of user tagging of pages very exciting but believe the area needs further examination and work before a truly innovative solution emerges.

Your thoughts

Has anybody come across any other websites that offer a similar service? I would be interested to hear what people think about the idea and what they would want from a service like this?

Web Design Podcast (6) – The future of the web

So what does the future of the internet have in store? How will this affect your website? This week Paul and Marcus look at emerging technologies and how you can use them on your own site. All without technobabble!

Play

To download the latest podcast click here.

Below is a brief outline of the things covered in this week’s podcast as well as links to some of the sites mentioned:

Avoiding the technobabble

What we try to do is explain the complexity of web design in a way that is accessible to those who are responsible for their organisations website but do not necessarily have the hands on skills to build a site.

The boagworld.com blog and podcast aims to avoid in-depth technical discussion. After all, there are many people out there already doing that. What we try to do is explain the complexity of web design in a way that is accessible to those who are responsible for their organisations website but do not necessarily have the hands on skills to build a site.

With that in mind, this week on the boagworld.com podcast we look at how the web is changing and what impact this will have on your site.

Web 2.0.

The web is currently undergoing a dramatic transformation and many people have referred to this change as the birth of the 2nd generation web, otherwise known as web 2.0. So what changes are occurring and how do they affect your site:

The growth of broadband

Recently years has seen a dramatic growth in broadband with 50% of UK home users now connecting to the internet in this way. But, how does this affect your site?

Multimedia

It gives you the freedom to add more multimedia content such as video, audio, and product demonstrations.

Casual surfing

Broadband users tend to use the web more casually and are not so task orientated. Your website needs to take into account this shift in behaviour by using hooks to keep them coming back until they respond to your call to action.

Broadband services

Less consideration has to be given to the depth of your information architecture, as broadband users do not have to wait as long for additional pages to load. Things can be more clicks away if that helps your architecture be more logical.
Broadband users are more comfortable with services like Skype (internet telephony), podcasting and even IPTV. Consider how these services might fit on your site. Could you provide a "call us" button for Skype users or perhaps a podcast would compliment your site offering.

However, remember, it is more than likely a significant proportion of your users still use dial up so be careful how you implement broadband related changes.

RSS and XML

You will need to listen to the podcast for the details on this one. However, among other things XML provides the following opportunities to website owners:

  • The ability to put your content or products on a partner’s site so exposing them to a wider user base
  • Allowing better communication with users, while avoiding the pitfalls of email such as SPAM filters and poorly displayed HTML emails.

At the very least you should be considering adding an RSS feed for the news on your site.

User lead services

There is currently a new wave of social services such as digg.com, flickr.com and delicious that gives power to the users. Instead of relying on search engines to find content, these services allow users to recommend content to other users. This will affect the marketing strategy of your site:

  • You will need to place less time ensuring good search engine ranking and put more emphasis on the quality of your site
  • Because these services are user driven, old tricks used to "trick" automated search engines will no longer work.
  • Content will really become king and there will be a greater need than ever to ensure it is engaging.
  • Viral marketing techniques may become a more attractive option.

Web standards

I have talked enough about web standards elsewhere in this site so I wont say much here expect to point out that web standards (the separation of content from design) opens up a wide range of possibilities when it comes to branding. The same site could have multiple brands (looks and feels) depending on who is viewing the site and how they found it. Your site no longer needs to have a single look and feel, rather it can change to suit the person viewing or the device they are viewing on.

AJAX

AJAX is the coming together of a number of technologies which have been around for a while. They offer a new range of functionality that can really enhance the usability of your site. I recommend you take a look at the examples below and think about how that kind of functionality could benefit your site:

Google suggest (try typing in a search term)
Google maps (you can add this directly to your own site!)
Personalised Google (try dragging the boxes of content around once logged in)
Other great examples of AJAX at work

But remember not everybody’s browser can handle this kind of code so its important you can still use the site without it. Also, be careful that you do not just use it because it looks cool. Make sure it is useful to your visitors.

News: Headscape is recruiting

If you have a good understanding of XML/XSL/XSLT, web standards, JavaScript, ASP/PHP and SQL server then get in touch. We are happy to consider new graduates, however some form of commercial experience would be required.

You will be required to work alongside our lead developer and so will need to be able to commute to the Southampton area.

Send your CV to [email protected]

For more information on Headscape, visit our very out of date website :)

For more web design related news why not subscribe to my digg.com RSS feed or if you are a digg member add me as a friend at: http://www.digg.com/users/boagworld

Sticking up for the humble site map

I was working on a site map yesterday and realised how little thought I give them. They tend to be an after thought in the design process. Vowing to repent of this half-assed attitude, I set out to learn all I could about this under appreciated site tool.

Why site maps are cool

Perhaps it is a sad reflection on the state of my life but I have come to consider the humble site map quite cool. I used to add them to a site mainly because they were required if the site was to be Priority 2 compliant. However, I was to discover they have many hidden benefits:

  • Site maps are a lifeline if users are lost or frustrated with a site. Users often turn to them as a last resort. This means they are a great opportunity to save a visitor who would otherwise be lost to your competition.
  • Site maps can often be more successful than a homepage at directing a user to the content they require.
  • Search engines love them because they give quick access to the most important sections of the site.
  • Users who require a speech browser find them incredibly useful too as they can skip directly to the content they require without navigating through the sites hierarchy.

How to build a great site map

So, what did I learn about how to make a decent site map? Well there are a few simple tips you can follow to guarantee success:

Don’t be shy

Do not hide your site map away. According to testing carried out by Jakob Nielsen 85% of users were unaware that sites they visited regularly had a site map. Avoid this by not hiding your site map down in your footer and by clearly naming it "site map"

Keep it clean

Make sure your site map is clean and simple. Do not over design it or make it a navigational challenge in its own right

Don’t try and be clever

Do not use JavaScript to make your map expand and contract like windows explorer. This undermines the whole idea of a site map which is that you can see an overview of the whole site in one go.

Show where they have been

Use link colours to show users which pages in the site map they have already visited.

Show where they are

If you can use server side coding to show the user where they were in the sites information architecture before they entered the site map. This is the same principle as using a "you are here" marker on a map.

Don’t go overboard

If you have, a large site do not show every page on the whole site. A site map should not be more than a couple of screens in depth. More than this overwhelms the user.

What have I missed?

So there you have it, my guide to the perfect site map. If you have any additional ideas of how the humble site map can be improved please let me know.

New National Trust site: Accessibility failure?

Yesterday I wrote about the imminent arrival of the new National Trust website and my involvement in the last version. Well today, the new site has gone live and I am left feeling somewhat disappointed by the result.

Perhaps I am suffering from a case of sour grapes because I did not design the new version. Perhaps after 18 months of waiting and countless delays in the launch date I had set my expectations too high. Perhaps I was just being naive believing the publicity that promised improved usability and accessibility.

In my last post, I outlined four hopes I had for the new site. These were:

  • A desire to see the navigational shortcomings of the old site dealt with
  • A site that conveyed the awesome architecture and countryside the Trust manage.
  • A site built with the latest in web technology (web standards)
  • Improved accessibility

So let us look at each of these in turn.

Navigation

The problems of the old sites navigation were apparent to anybody. There were reasons why it was done in that way but at the end of the day, they are no excuse. My hope was that the new site would provide a clear navigational approach that would aid users to find their way around what is an enormous site.

Although the navigation is now definitely more flexible I am not actually convinced, it is any clear or easier to use.

It took me some considerable time to work out how the navigation worked at all. From the homepage, it would appear that the top-level sections are listed across the very top of the page. However, after navigating around the site for some time I discovered this was not the case. The top-level navigation is actually represented by the three boxes in the centre of the screen (which btw, appears below the fold at 800×600). The links at the top of the page are shortcuts to content buried deeper in the sites information architecture. Perhaps it is just me but I was totally thrown by the idea of only three top-level sections that appear as images below the fold of most users’ screens.

Once you move beyond the homepage things do not become much clearer. One click beyond the homepage and you arrive at landing pages for each of the main sections. These display the sub navigation at the bottom of the page. Click on one of these options and the sub navigation now leaps to the left hand side of the page. In its defence, this side navigation works very well. It is clear, consistent and highlights the section you are currently in.

Although in many ways, the navigation is a vast improvement on what came before it seems to have lost consistency along the way.

Site look and feel

In my last post, I said how I hoped they would make good use of the huge photographic library the Trust has to portray the amazing architecture and countryside the Trust manage. Now, look and feel is a personal thing, but I do not feel they have captured any sense of the Trusts holdings. The site seems to be more about navigation and interface than message. The homepage does the best job at portraying more and perhaps that is enough.

Web standards

Another less surprising disappointment was the fact content has not been separated from design. Why does this matter I hear you ask? Well without repeating everything that I have written on the subject in the past, probably the biggest drawback is with printing. The demographic the Trust is trying to reach generally find reading on screen a painful process. They tend to like to print content and read it offline. However, because this site uses table based design the printed version often looks messy and in a few occasions cuts off content on the right hand side of the screen.

I guess it is not the end of the world that the site is not built using web standards but they have missed many benefits by letting this opportunity pass them by.

Accessibility

This area is the one that really horrified me! The new site promised improved accessibility, but if anything, it has taken a step back. At the very least, I was hoping the site would pass an accessibility test by an automated check like Bobby, but it fails even that. The previous site produced back in 2000 allowed the user to resize text in the browser, and change the contrast and font size using a style sheet swapper. Five years on and not only does the new site fail even the most basic accessibility test but it also drops the only accessibility feature that existed on the previous version! I am in shock that the site could so badly fail its users many of whom have visual and physical disabilities associated with old age. Yes, it is possible to resize some of the text but much of the navigation now uses imagery that cannot be resized.

Bitter and twisted

Perhaps I am being melodramatic. Perhaps you are better off ignoring my sad rant that betrays my feels of rejection at not being involved in this rebuild. I would be interested to know what other people have to say about the site. Am I completely loosing the plot?

New National Trust site about to go live

Back in 2000, I had the privilege of being the lead developer on the 2nd generation of the National Trust web site. With the third generation of the site about to launch, I am excited to see them move on.

Working on the National Trust web site was one of the most enjoyable sites I have ever done. When the Trust came to us they had little more than a "home made" site put together by some enthusiastic amateurs and a few technical staff at the Trust. We had the privilege of redesigning it from the ground up; information architecture, design, content, the lot.

Our approach

What was particularly enjoyable was there huge archive of photography. They had over 100,000 photos of some of the more amazing architecture and countryside in England and Wales. It did not take us long to realise that these images should rule the design and so everything else was built around that.

Project challenges

Accessibility

Of course, the project was not without its challenges. Firstly, the Trust wanted to ensure the site was accessible by their more elderly members who in many cases had failing vision. At the time, there was still much confusion about accessibility and how to ensure your site was accessible. Very different messages were coming from organisations such as the W3C, the RNIB and the British government. In the end we decided to adopt a similar approach to the "zoom the web" approach which seems to be the way things are moving at the moment. We simply switched to a different stylesheet to increase contrast and font size. Although the site was not WAI compliant, it did demonstrate some initial thinking in the area.

Navigation

The second problem area was navigation and in this, the constraints were much more frustrating. I will not bore you with the details but it is worth explaining that because of internal politics at the time we were only able to add a very basic header to the site that provided primary site navigation by a dropdown! In hindsight, this was my primary failing on the site. I feel I should have really fought for a more user-friendly form of navigation as dropdowns prove especially difficult to older users. However, I was not as knowledgeable as perhaps I am now and the whole industry has become older and wiser.

No content management system

The final problem with the site was totally out of my control. This was that the Trust wanted the entire site built as flat HTML. This was driven by technical constraints at their end and both the Trust and I were very aware of the maintenance problems going forward.

National Trust moves on

About 18 months ago, they finally decided to face the situation and move the entire site across to a content management system. As part of this rebuild, they also wanted to address some of the design issues and so a new look and feel was produced. Unfortunately, due to an internal reorganisation within the Trust and our lack of experience in the particular content management system they had selected, they chose not to employ Headscape to do the new look and feel. I have to say in many ways I feel this was the right decision. The Trust was a very different organisation to the one we first got involved in and I understood their desire to introduce new blood. In many ways, I felt I had done my part moving the organisations website to the centre of their marketing strategy rather than an added extra that received little funding and no serious consideration.

Waiting with baited breath

I have been waiting with baited breath to see the new National Trust site. For some reason they seem to have faced delay after delay in its launch. I do not know the details for this slippage but I would like to think they come from a desire to get the new site perfect before going live.

My hopes for the new National Trust site

So, what are my hopes for the site. Well, firstly I hope they fix the navigational problems the site suffers from. Secondly, I imagine the new site will dramatically improve from an accessibility perspective using the latest techniques and conforming to W3C standards. Thirdly, I hope they will move across to a web standards based build and all the associated benefits that has. Finally, my desire is to see a user interface that really shows off the beauty of the properties they own. The National Trust own some of the most amazing places in the world and I pray that their site captures that awesome architecture and wonderful countryside.

Card sorting

I am currently involved in some usability consultancy for an intranet that is going through a major redesign. One of the tools we will use to decide on the sites new information architecture is card sorting.

At its core card sorting is probably one of the simplest, and yet most powerful ways of improving a site’s information architecture. It is valuable because it gives an insight into the users mental approach demonstrating how they sort and structure information within their own heads.

How to do card sorting

Simply label 20-30 index cards with headings from the various sections, subsections and pages of your website. Depending on the complexity of the site, you might also wish to include a brief description. It is also useful to number the cards so that you can more easily analyse the results of your test later.

Untitled cards

It is also possible to start with no predefined headings but rather allow the user to specify their own section titles. Although this approach initially sounds good because it introduces no bias from the tester, the reality is that it can often be incredibly challenging to the user and so progress is often slow. Often it is better to have existing titles but encourage the user to comment on or change titles if they perceive it as appropriate.

Obviously, 20-30 cards will probably involve some considerable editing on your part but more cards than this can overwhelm the user you are testing. If it is necessary to cover more ground than this, it is possible to have some organisation already in place so that users are responding to an existing information architecture rather than starting from scratch.

Testing normally involves approximately 15 users and requires them to sort the stack of cards into piles that make sense to them. Often you also ask users to name these piles and this label is written on a post-it note that is then attached to the pile.

Card sorting approaches

Beyond this basic approach there are numerous ways you can structure a session however basically this breaks down into two approaches; quantitative or qualitative.

Quantitative

The quantitative approach uses card sorting as a data collection tool and is largely orientated around producing measurable statistics against which to judge. For example, it might establish that 83% of people placed the “contact us” section under “about us”.

Qualitative

Although the quantitative approach is perfectly valid, it is easy to prejudice the results and does not particularly help to understand the users’ reasons for the ordering. Personally, I believe more is to be learnt from the qualitative approach. Qualitative testing is a much more interactive and less observational allowing you as the tester to question the user and dig into some of the specifics of how they organise the deck. The aim is to encourage the user to articulate their thoughts and frustrations so you can understand their underlining approach.

What are your thoughts?

It is pretty obvious from this entry that I see a lot of potential in card sorting, but what is your opinion? Have you tried card sorting? Was it valuable? What works for you and what doesn’t? Do you take a quantitative or qualitative approach? I would love to hear your thought!

National Trails web site launched

Today sees the launch of the Countryside Agency’s flagship website about the network of National Trails. This site is the culmination of month’s worth of work by the team at Headscape and I thought I would share with you a few of the highlights and lowlights of the project.

The brief

It was a challenging brief. Take twelve separate trail web sites and unify them under a common brand while still maintaining some sense of individuality. In addition to this, we had to conform to basic levels of accessibility, integrate a content management system that allowed individual trail officers to manage their own sites and come up with a user-friendly way of accessing a large database of accommodation and services.

Problems of interface

For me personally the number one problem to solve was the inconsistent user experience across these multiple trail sites. Users were faced with inconsistent positioning of navigation, different information architectures and conflicting terminology. The only sensible solution was to standardise the interface across all sites. Not only would this solve the user experience problems it would avoid the overwhelming challenge of having to come up with designs for twelve different sites!

Of course, there were two downsides to this approach:

  • This did not solve the briefs demand for a sense of individually on each site
  • It made it harder for the user to instantly tell which trail they were on

The solution was to give each site its own unique colour scheme. By doing this, you could associate very different feels with each site while also giving the user clear visual clues when they moved between different trails.

Web standards, the cornerstone of this project

Once I had decided upon on the approach it became obvious that a web standards approach would rapidly accelerate the development cycle. By separating content from design, I could create one basic layout and use cascading style sheets to change the colour palette of each site.

Web standards brought other benefits too. By separating design from content, we could easily address the need to conform to single ‘A’ compliancy in regards to accessibility. What is more we could easily supply an alternative printable style that ensured the site only printed certain page elements. I felt this was particularly important, as much of the information on the site would actually be useful to visitors while physically visiting the trail.

Finally, web standards allow us the ability to continually tweak and refine the design through the life cycle of the project and indeed after launch. This enables us to be much more responsive to feedback and work out any user interface bugs that might be spotted along the way.

The lowlights

I have to confess that normally I get to the end of the project like this hating the site because I have just worked with it too long. However, in the case of this site I do not feel that way. Of course that is not to say there aren’t a few things that still annoy me about it.

One of the biggest problems we have yet to overcome (although we are looking into some options) is the WYSIWYG editor we are using in the content management system. We seem unable to find an appropriate editor that produces clean code, which does not invalidate the occasional page. What is more there does not seem to be an editor on the market that forces the user into ensuring any content they add is accessible.

Another annoyance for me is that I have been forced to use some table layout on the homepage. This does not in anyway cause problems it is just a matter of principle on my part.

A crowning glory

Despite the odd annoyance listed above and a few hundred little bits and pieces, I am actually incredibly pleased with how this site has turned out. It truly is a crowning glory for Headscape and easily the best piece of work we have done to date (in my opinion). The size and complexity of the site as much as anything else makes it an incredible achievement. I have particular respect for Charlie Allen the project manager on the site who has dealt with 12 individual clients, and been responsible for the population of over 75000 web pages worth of content.

Another feature I particularly like are the flash maps created by Chris Sanderson one of our team of designers. He has come up with a brilliant way of giving people access to a large database of accommodation and services while also giving them a sense of the route the trail takes. This is an excellent example of how flash should be used rather than for nasty animated introduction with no skip button! Of course, in order to maintain accessibility we also had to provide a way of accessing the same information without flash.

Not that this is the end of our work with the National Trails site. There is always more to be done. The site will need tweaking and maintaining. There is site promotion to consider as well as new functionality to consider. Just because a site goes live does not mean it is ever truly finished.

The clients verdict

I couldn’t finish this entry without including a quote from an email I have just received from the client at National Trails:

I just wanted to give you my personal thanks for all your hard work on this site. I think its fabulous. I’m so proud of it and of the fact that we made the right choice of contractors to do the work!

Speeding up the web development process

I am currently working with our lead developer at Headscape to streamline the process of building and deploying content managed web sites. Part of this process revolves around seperating out the different aspects of a sites development to make it easier for multiple people to work on the site at the same time and to standardise some elements which had previously been bespoke to individual projects.

Current working process

Normally a web project runs something like this:

  • Establish initial design concepts
  • Work on the Information architecture
  • Create the site templates (XHTML) and style (CSS) for the site based on the designs and information architecture
  • Populate the site with content
  • Make the site live

Obviously this is hugely over simplified but you get the idea. However the problem with this approach is two fold:

  • It is a fairly linear process which involves each phase being dependant on the previous steps being completed
  • The site templates (XHTML) and style (CSS) have to be made bespoke each time to fit the project

A new working process

The process we are moving to helps to solve both of these problem areas. By seperating not only the presentation from the content but also the content from the structure you can start to standardise even more of the process. Let me explain:

Standardising the structure

As all the content is held in the content management system there is no need for the site templates (XHTML) to be bespoke for every project. These site templates no longer contain content but rather only define the structure of the site. After all the majority of sites contain the same basic structural content such as navigation bars, content areas and the like. By consistantly naming these areas you can then just use style sheets to change the way this structure is presented.

This approach means that instead of having to build the site templates and styles from scratch each time, you can have a basic predefined template which are then tweak accordingly. Obviously some changes will need to be made. The style in particular would have to be altered quite considerably for each project, nevertheless basic features such as column layouts could be predefined. The site templates would require only minor tweaking on a per project basis to take into account issues such as some clients wanting their news templates categorised by subject while others would want it organised by date.

Working independantly

This approach would also allow a lot more stages of the project to happen independantly. For example the person populating the content can do so even before the design is finalised because they can still navigate the unstyled site and see the content they have entered. The added bonus of this is that the designer can play around with different designs directly on the final structure and content. This means he can see exactly how his designs will work with real content instead of endless blocks of dummy text.

The result

The result of all of this is that an average content managed web site could be produced considerably faster and using less internal resources to do it.

Further reading

If you are interested in knowing more about seperating out the different layers of web design I highly recommend this article on the subject.