So, got an email from an account handler regarding a piece of web design I’m working on. One component of the page has a proposed dynamically animated graphic. This widget would pull back data from an API and display available collection locations on a total-per-country basis and look a little like this:
The expectation is that the user would drill in at a country level to find where collection points are, starting at a per a country basis, highlighted below. Alternately, the user, if satisfied that the map fulfils their research requirements, can begin the conversion journey via the CTA.
This functionality would appear at a tablet and desktop level, but was represented by an annotation that the map would be static for mobile users. A Piece of feedback I received from the account team was:
The client has also asked for us to produce another design for the map if this isn’t going to work on mobile, what are we going to use instead?
Nothing. That’s the long and short of it for me. My response and why there is little value in it for mobile users is detailed below. But first, a quick intro into semiotics
What are semiotics?
In terms of design it relates to how we derive meaning from images. If a big yellow and black sign at a chemical plant has a skull on it you infer that there might be a dangerous area ahead. This isn’t necessarily a conscious process on our part. It relates to how we interpret our environment, or in this context, images as language and quite frankly, it’s a fascinating area of research as variables such as locality, age can all play a part in how we interpret things and seeing how that overlaps across the borders of those demographics. This article looks to be a good place for further reading on semiotics
Response to the client
On this one, go back to the client and say our thoughts would be it’s just going to be a static map image which we either keep there or we remove it. We do not replace with another animated widget. I’m on mobile, as a user, I’m less likely to care about presentational fluff. I just want to get to the button to see where i can do stuff and see it easily.
Because of the cramped and linear presentational nature of mobile a benefit of keeping the static image would be it provides a nicer clearer transition into the section. To that end, notice that I reordered the image and copy order at mobile level to help create that transition. An image of the map provides a instant vital level of semiotic context for the user i.e. we are indicating coverage of the whole world, not just coverage of Europe, or just Britain.
If we code the relevant functionality to just ignore mobile devices, not animating it will also just be one little thing that makes everything just that tiny little bit smoother for the device because:
- it’s a just little less to do in terms of data to pull back if it’s coming off the api which is always a good consideration for users who could be browsing on a mobile network, may be on 3G blah blah.
- Probably some minimal general on-page performance increase if the cpu isn’t wasting time animating something for which provides no real user benefit.
TL;DR Fast users are happy users. Happy users convert.
Adding in another alternative animated widget we could do…. but… I struggle to think of a compelling widget that provides greater context, quickly, for the user. It’s not like the money ticker widget, which serves an important purpose in getting the primary conversion relevant information in front of the user. The animated map widget, which does provide a trust signal as a secondary level of information, is still really more a presentational element for desktop and tablet users where we have the presentational space and users tend to dwell.
This is because, as mentioned earlier, the static map and copy already provides the worldwide context. Now I as a user just want to drill into that information. 300 locations in X country is still a needle in a haystack effectively in terms of letting me know that I can get my cash to, say, little Timmy who is currently being held hostage in Thailand by pirates.
So… I’d test it. Because it’s be interesting to know what works best (but I’d be testing the transfer calculator first). Failing that I’d just keep it, (obviously I guess? otherwise I wouldn’t have put it there in the first place?). The benefits, to me, also make a compelling argument to keep it. But otherwise my suggestion is to bin it and go straight to copy.