Mind Mapping Websites

I’ve been working on a different mind map blog for a while but thought I’d post this one first as it’s quick and relatively simple.

There was an initiative at work recently to introduce multi language support for a particular website. Part of the preparation here involved finding some way of documenting the website structure and the text within. A number of people tried to go about this in different ways and encountered different problems until I decided to do it with mind maps, and I’ll share this technique below. It’s not rocket science, granted, but I found mind maps to be a natural foil for something like this.

One of the other more obvious methods I witnessed involved taking screenshots for each page which compiled a hefty screen pack. A fair attempt as it makes sense to keep the reference as close as possible to what you’ll be looking at, but when I started asking questions about response & error messages and conditionally visible elements within web pages it quickly became clear that a single screenshot (or even two, three, four five, etc.) would become a fairly cumbersome method of doing this, not only to compile in the first instance, but also to maintain going forward.

As a tester I wanted a flexible way of documenting this information that would allow me to easily illustrate coverage for each page that was easily understood, and more importantly would be comparatively painless to update going forward – enter mind maps. I looked for common elements in the web pages and came up with the following legend:

Granted, our web pages are not that complicated and this structure would naturally have to be re-thought and adapted for more complex sites. In the context for which it was created though, it was a fairly decent fit.
Rather than just leave you with this legend and mosey off into the sunset, I thought it would be prudent to give an example.

Enter my ‘Geeza Fiver’ 1-page website.

A fictitious site that takes a flat £5 donation from your credit card and gives it to one of three well deserving (but non-existent) Scottish charities. (Note – for those of you not familiar with Scottish slang ‘Geeza’ is a short way of saying ‘Give Us A’ or ‘Give Me A’ – one of many odd Scottish colloquialisms is to refer to yourself in the plural (but I digress) and ‘Fiver’ simply means ‘Five Pounds’)

Now, I know you’re all reaching for your credit card at this very moment, but before you donate your hard earned cash, here’s how I would have broken this page down using mind maps:

You can also supplement this with your own notes to remind yourself how to prompt particular error messages. I tend to use purple italic text as it’s quickly distinguisable from the rest of the map but for the sake of clarity I’ve left such comments out of the above example. Here are a few pros and cons (I’m sure there are more):

Pros
– Simple format. Not overly complicated
– Easily maintainable going forward
– Doesn’t take up oodles of disk space
– Use of colour quickly allows the eye to distinguish response/error text from page text

Cons
– If you’re looking at this before you’ve seen the actual screen, it may not mean as much. It could be used in conjunction with screenshots however for new starters unfamiliar with the product.

As I’m sure you’ve seen over the blogosphere, mind maps can be used for any number of things, but this was one area I found them particularly useful.