Flash Maps

Posted on: August 28th, 2009 | Category: Flash, Usability


If a business has a number of branches or stores around the country, we’ll often think of using Flash to show the spread of those stores and to link to store details. Now Flash can be good, but it can also irritate website visitors no end, so it’s a good idea to give a quick a run-down of the thinking that goes into using Flash to show store locations – but first let’s get clear what we’re talking about here:

A Flash map is a diagram showing a map of the country or region. It is created in Flash, which is a program for making interactive, animated content on a website. Visitors can click on shapes or labels on the map and the map will transform in some way – either zooming in, or showing some details.

1: Is it making it easier, or more difficult for the user?

This is by far the most important question, because if it takes longer to find what you are looking for using a Flash map than it would using a set of lists, then the Flash must go. If the Flash is allowing users to make less clicks, or it is showing the information more clearly than a list, then the Flash should be used. For Trellidor, we created a map of South Africa, showing the spread of stores. Finding store details using the map takes 1 less click than the drop-down menus (in all cases but Gauteng, Durban and Cape Town).

map

We were looking at zooming in to each province, to give the dots enough space (especially in Gauteng with is really tiny and always has the most stores or brnaches…) but currently Trellidor has enough stores to fill the national map, but not too many that each province is going to look crowded. They’re also not spreading very rapidly, so this map shouldn’t need to be completely reworked for 3 or 4 years.

2: Making an impression

This is pretty much the point of using a Flash Map. A set of drop-down lists is a simple, clear, universal way of searching by filtering data, so why use Flash? Well, becuase it looks cool.

In Trellidor’s case, we got the dots to spread randomly, giving a quick, simple impression of a good coverage of stores. Aside from that, the Flash doesn’t really do anything special (the map could have been created using Java, or a simple image-map). And that’s kind of OK, because it’s a neat little effect on the page – it makes the site that little bit nicer to visit. It doesn’t take ages to spread the dots, and it doesn’t slow down the page (at 36KB it’s the same size as a static image would be).

Zooming and shifting the map around can also make a big difference to the experience of the site, but point 1 above is far more important, because really, when you’re looking for a store phone number, you’re not looking to have a nice time with an interactive Flash map – you’re just looking for the phone number.

3: People are bad at identifying isolated shapes

Maps get tricky when they need to show a lot of data, because people are bad at recognising shapes when they’re taken out of context. It’s not a big difference, but generally people recognise shapes quicker if they are shown in relation to other recognisable shapes. This makes sense if you think about the ammount of times you have seen the outline of South Africa in compared to the times you’ve seen the outline of KwaZulu-Natal. You instantly recognise South Africa, but the KZN shape isn’t instantaneous – and besides, it’s just really weird-looking.

So we don’t really recommend showing continents, countries or provinces as isloated shapes.

4: What about updating the map?

Well, it can be done, but the general rule is that you can’t place a dot on a map through a content management system (CMS). Adding a new store to the Trellidor map gets done through an XML file – but it’s a quick process, and updating existing store details doesn’t affect the map, so overall it is very manageable from an update point of view.

There are way of getting maps to show data a whole lot more dynamically, although they do require a lot of customisation. Google Maps is a good example:

Google Maps lets you place dots on a map, and then embed the map into your website – I’m not sure how they do it, but its pretty cool that you can drag a dot and drop it onto a map on a website. Google Maps can also be customised to show layers of data, and, using the Trellidor example, you could drop a whole lot of dots onto a Google Map, each with their own store details. The data the Trellidor map has to show just doesn’t warrant that amount of work and customisation.

And the data is definitely the key factor when considering using an interactive map: If an interactive map helps users interact with the data quicker and easier, then its definitely the way to go.

Black Square website – LIVE!

Posted on: August 27th, 2009 | Category: New websites


As a website development company, we naturally took a while to get our own website up – mainly thanks to our great clients keeping us busy.

Want to find out how much a website costs? Or when to put time & effort into SEO? Or maybe just take a look at our rather great looking portfolio…

New website for ECS

Posted on: August 17th, 2009 | Category: Content, New websites


We have launched a new website for ECS – Energy and Combustion Services. We really like the border-less design on this site – if you pay attention to these things, you’ll see that the blocks of content float over a background gradient, rather than sitting as a single block. We needed the site to be clean but hi-tech – without sinking into tech-style backgrounds and so on, so this floating design system keeps the site very light and open.

This site is specifically designed to grow – our client wanted to phase their content in, especially on their services. Our copywriter worked with ECS to set up landing pages for each services, with the plan to expand these in the coming months. Our CMS is great for this kind of content management as it allows web editors (whether its us or our client) to add new pages and then add basic content to those pages very easily. It means that we were able to go live with a smaller amount of content which was a lot quicker for our client to prepare initially.

Have a look at the site – it’s nice and simple to find your way around.

ecs-screen

New Trellidor Website

Posted on: August 13th, 2009 | Category: New websites


We’ve just completed a new website for Trellidor.

trellidor-screen

The page above shows Trellidor’s Standard security gate. We developed this page template to handle their basic products, and it works really well – it has a photo gallery, a highlighted features list, brochure download, further copy and links to their store locator. This is all handled through the CMS, so adding new images or ammending product features is really easy.

Store Locator

We’re also really happy with the Trellidor Store Locator page – it combines a simple set of drop-down searches, and a Flash map showing store distribution around South Africa. Again the details of the page are handled through the CMS, so new stores can be added very quickly. The Flash map is driven through an XML file so the map can be updated along with the database without having to return back to the source files. It makes a simple job of a simple job.