Smart Educational Map Tool

I came across Gemma (Geospatial engine for mass mapping applications) by CASA at UCL.  Its a smart service well suited to educational use, it has three great functions available in order of priority:

1. Easy to Build Mashups:  Enables the user to pull in useful thematic maps (from map tube) or other layers (from OpenStreetMap) and to create markers on top of them.  For example, you could map population density, show where tesco stores are and then tag interesting examples where tesco stores don't seem connected with high population.
2. Greyscale Base Map:  One of my continual gripes about Google Earth/maps is that it isn't easy to avoid the visually busy satellite data/road base level data.  Gemma enables a greyscale map that allows location still to be seen but doesn't crowd out the view enabling the map producer to show more layers with clarity.
3. Easily import in Mobile created data:  Its linked to an iPhone app so a student can collect data and easily feed it in.  I haven't checked out how this works but the idea is very promising.

The team deserves a big cheer IMHO.  I do have some grumbles:

• Pull down options not search:  If its possible, I'd like to see the search option for OpenStreetMap replaced with a pull down menu as the default option, with a search available if you really want it.  Its a pain to have to guess what will pull up the right data, view the map, then go and delete the layer because it wasn't what you thought it was.
• Layout:  I think the use of space could be more compact.  A lot of screen real estate is taken up by the header and the layers appearing at the bottom of the screen will also take up considerable space if you produce a number of them.  I found this old screenshot of Google Earth v4 (I think? - see below) which showed that their original design similarly lost screen real estate.  In the next version they abandoned the thick bottom panel after user comments.  

• Simple Markers Needed:  The markers available are all complex visually with color grades and multiple colors.  This is OK for a few markers on a simple map but if you add in lots of markers then the screen will soon get busy visually.

However, overall its a great resource.  I notice that the project blog stopped in November almost a year ago, its a shame if there's no follow on funding to take it further and get it out of beta.

I usually promote Google Earth as the best tool for education, the three big pros of this project are something it would be great to see in GE in the future.

Crowdsourced Map Experiment

As reader's of this blog know, I am supervising a PhD student, Craig Allison (@theRedSorcerer).  He's investigating whether point collation techniques or heat maps can be understood by users or not. (previous post about the project)

 

examples of point collation and heat maps

We'd like to see which one is better from a usabilty point of view and we'll publish the results. With this in mind Craig has created a 10 minute test and questionnaire that would help us answer this question, it can be found at

 https://www.isurvey.soton.ac.uk/condition_start.php?id=145 

Please have a go and pass onto others.

GoogleIO Map Design Talk Response

Below you'll see a session on map design (called 'master class in map styling') featured at Google IO this year discussing Google Maps.



I think they make some excellent points and explain how to put their ideas into practise code via js code examples in Google maps.  In the introductory section they discuss the map design process as being one where you;

• Think about what data to remove
• Refine the data that's left (e.g. adding selective emphasis)
• Test the map for multiple zooms

which I think is very sensible.  I've blogged about the value of removing data myself.

These are the points they make in the rest of the talk that I particularly liked;

• Lowest Zoom first design the lowest zoom first then edit other levels afterwards by stripping out data as you zoom out higher.
• Roads as Landmarks its handy to leave roads in for orientation (at 27:00).  
• Width Editing The ability to edit the width of elements is a new API feature and they show how it can be used effectively at 27:25.

However, I differ with their opinions on a couple of points:

• Ocean = White  At 25:54 they change the color of the ocean and harbour water from blue to white saying this has less visual impact.  A desaturated blue is better IMHO because it blends into the background better than white and people naturally associate blue with water.
• Parks = Gray  Similarly at 26:01 they change the color of parks from green to gray.  Again, people naturally associate green with a park and a desaturated green would fade into the background sufficiently while being easily interpreted IMHO.

Data Density and Keys What I think they could have usefully added to their talk beyond the 3 major points they use above is discussion about coping with data density, i.e. the difference between a map mashup showing a few points and a map with hundreds of points.  At 28:46 they show a map mashup with some circles representing who likes cats or dogs at certain locations in San Francisco and at 29:00 they go on to dismiss the idea of using animal icons such as the ones in the image below (showing eagles and wolves from this post discussing icons) as being 'cheesy'.

They are quite right that A cat/dog icon could be naff but map icons have an inherent advantage over simple circles: you can work out what they mean without looking at a key.  You need extra information to work out that their red circle symbol = number of dog lovers.

That's not to say that simple icons like circles shouldn't be used, in fact they're very useful when there are hundreds of data points to plot (see above showing the location of Boris bike stations, further detail here), lots of icons on a map leads to the 'flock of sheep' problem (see below, the same Boris bike example)

So its worth using simplified icons when you need to show many data points even though they need a key to provide interpretation.  

Animated Maps: The Way Forward?

I didn't make it to Google IO this year but have got a lot out of watching the Google maps talk videos.  One announcement they made was a new type of map element; 'symbols'. These enable developers to animate Google maps more.  Ed Parsons has bigged up the possibilities and I agree with him that animated maps have great potential and that there should be more use of animated maps.  At the moment they are nowhere near as common as simple map mashups.  I've been researching map animations recently so today I'll share some thoughts.

The potential of animation in Maps:   Any graphic or text needs to perform a number of functions:

1. Catch the eye of the user
2. Lead the eye around the graphic intuitively 
3. Communicate effectively
4. Produce a memorable and/or emotional response if possible

We can argue about how good this list is but I think its generally true (I've paraphrased it  from a book on graphic design 'White Space is not your Enemy').  

Movement always catches the eye (think blinking cursor) so map animations always do well at [1].  They can also be extremely effective at communicating effectively [3], the gap minder animation below is geographical information although strictly it isn't a map.  IMHO its very effective at communicating the story of how most countries have developed considerably in the 20th century and its also easy to pick out individual countries from the animation.

I also like this animation of the spread of post offices in the US (although its probably better watched at a higher resolution than I have here)

Downsides to Animation in Maps. However, there are a number of problems with animations.  

- Going, Going, Gone:  Unlike a static graphic, the information is only visible for a fixed amount of time so the user has to see the information, make sense of it and remember it before the animation moves on.  With a well designed graphic, such as Edward Tufte's diagram showing the development of storm clouds, all the information is available for review and elements are constantly visible.

one of the nice aspects of the post office map above is that it keeps the dots on screen after they've appeared which mitigates this problem somewhat.

- Pat Head, Rub Belly:  The kids game of trying to pat your head and rub your belly at the same time illustrates another problem known as split attention - we find it difficult to do or follow multiple things happening at once.  An example is the map based animation at 55 seconds in this clip showing rainfall and taxi location at once.

Solutions:  There are a few solutions to these problems:

- Simplify Icons/other symbology:  Animated maps need to be simplified as much as possible, an easy examples include making icons plain shapes such as rather than a more meaningful bike shaped icon.  The background map on which the data is being animated can also be simplified e.g. removing colored roads.  The post office map above is a good example of both of these things.

- Play Slowly:  In complex parts, slow down the speed the animation is playing at.  This needs to be done with clear signalling otherwise they could miss that it was happening. 

- Annotate:  If something interesting is happening on a screen full of changing data (the split attention problem) a labelled arrow drawing the user's eye to the correct location on screen can be very helpful.

Conclusion:  Map animations can be very powerful but they need to be implemented carefully with a user centered focus.  See this post for more detail and Mark Harrower's discussion

Apple Maps and 3D

So since I last posted here there has been a lot of to and fro about 3D in mobile maps.  I won't get into discussing the Google vs Apple rivalry as this has been well discussed elsewhere .  What I'm interested in is what is the long term value of 3D on maps.  Consider this video



it shows two 3D features I want to discuss here, 3D full color and 3D grey blocks.   I've discussed these issues before but its worth revisiting considering the new Apple example.   The full color IMHO is just showy, I can't see people pulling up this kind of imagery on their mobile devices whilst on the move, its just too visually complex.  I think everyone is going to play with it when they first see it on a device and then revert to something more visually simple when completing navigation tasks.

The more interesting feature is the 3D gray blocks.  Of course these aren't an Apple breakthrough, they've been on Google maps for a while:



Gray blocks for buildings (either of the Google or Apple variety) are visually simpler than full colored buildings and so may form an extra layer of information which users can use to navigate with.  I think the simple Apple gesture needed to make 3D snap on or off is good, this may make it something users can turn on when they are on the move and think it could help them navigate.

However, I think the buildings examples used in the demo had distinctive shapes so the grey blocks view looks very effective.  The feature may be much less use in a more normal city scape where building shapes are squarer and much more uniform.  So for navigating around a city, I'm yet to be convinced 3D gray blocks are a game changer.  And of course, out of the city, the feature really loses its value as buildings big enough to act as landmarks are much rarer.

More interesting is when navigation moves indoors, then shape of rooms and corridors becomes much more important for navigation IMHO.

GOV.UK and Maps

Posts have been thin on the ground recently because I've been busy teaching a new course at the Uni.  However, its all over bar the exam marking now so I'm hoping to be more active here.

A friend has been involved in putting together GOV.UK - a site that provides the public with information from the British Government and acts as a clearing house to councils and other public bodies.  I really like the site, one of the key characteristics is that the designers have clearly focussed on user's needs.  I've had a quick whizz around looking for ways maps are, or could be, implemented in the site and a few thoughts spring to mind:

One Map, Many Points:   In the neighborhood section of the map you can enter your postcode and find services around you.  The site delivers you a list of possible local services, in the example below, we're looking at computer training courses:

As you can see, you get an individual map for each location.  It would be much better to provide one map with all the suggested services as markers with a linked list to the left of the screen (much as Google Maps and other services already deliver search results) with your entered post code shown as well.  This would enable the user to see which service is closer or if its close to their work commute route.

A nice add on to this would be travel time estimation circles centered on the entered postcode as found on TFL's 'Why not Walk It' maps.

Map Wiki: I also noticed that the site doesn't link users to useful map wiki or VGI (Volunteered Geographic Information) web sites such as FixMyStreet.  This enables the public to easily alert councils in the UK to problems with public spaces such as fly tipping or potholes because they interface with a map which is much easier than filling in a form.  I suspect that the remit for gov.uk limits their ability to have done this since they link out to councils sites for this sort of service and councils may or may not have chosen to use a site like FixMyStreet.  

Map as Spine:  The way GOV.UK is organized is centered around search and text based categories.  There's nothing wrong with this structure, I'm sure its what most people want to use.  However, I wonder if a map based structuring would add value as an extra way of organizing the data?  Instead of entering the site wondering how to answer a specific question, maybe people would like to mine the information to make broader decisions such as where in London would I like to move to?  A series of maps based on each area could be very useful showing people how well an area is serviced by the public sector and data from within the site could be used to populate the map.

Color Blindness and Color Blends

I came across these color blends in a post on the web today (to save blushes, I'm not linking) from a mapping developer.  Here's what they look like to the majority of us

and here's how 6% of the male population see it (via the excellent color oracle freeware)

clearly the bottom two blends will be very difficult for color blind users to interpret.

Color blindness is a lot more complex than I've explained here but generally blends from yellow to blue are much better than reds to greens.  More info on color blindness in maps here.

If you're interested in the more general uses of color in maps, the Haklay text book has a good couple of chapters.