Walk Score Does It Right

We have come accustom to fast, responsive applications and have very little patience for a slow, sluggish user experience. The longer it takes for a page to respond the greater the chance of losing your end user to the "I give up!" back button.

Performance is one of items that web map developers battle every day. The overall speed, interactivity and how responsive your web map application is can drastically affect the end user experience and overall adoption rate of your application.

The other day I was on the Walk Score® site and started playing with the Travel Time widget. I was blown away by its speed and interactivity of this feature. I have seen some examples of drive time polygon generation on the web where you select a location, enter a minute interval and click on the generate button. 3 to 30 seconds later you have a drive time polygon displayed on the screen. The Walk Score® team said that they could do better, and they did. In fact they hit it out of the park!

I am not sure what they did but I would love to hear your ideas on the technology behind this feature.

What I like

• The placement of the widget does not obscure the map and is easy to discover
• Hovering over the widget expands the input and includes only a few options
• When working with the widget it responds instantly eliminating the need for the dreaded refresh button
• Walk Score® uses a single color, transparent visualization technique that allows the end user to quickly determine the travel time without detracting from the rest of the experience

One item that bothered me at first was using generalized circles to display the travel time. I would have preferred a more precise polygon as the result. The reason why it bothered me is because I am a GIS guy but this application is not for the GIS guy, it is for a consumer who could care less about GIS and cares more for ease of use and how well the application performs. The generalized circles make the result easy to read and understand and could have been implemented that way to gain ultimate performance.

I give Walk Score® a 10 out of 10 for this functionality. They did everything correct and I can’t wait to see that they do in the future.

If you enjoyed the post, please share it:
Walk Score Does It Right - @SkipCody http://bit.ly/UeGc5q #GEOSPATIAL #GIS

Follow @SkipCody

The City of North Vancouver Web Mapping Done Right!

My last post was about what is wrong with the a lot of consumer city web map applications. Today I was looking through some more examples and I stumbled across the City of North Vancouver CityMAP’s page and boy was surprised to see what they are doing.

The first thing that caught my eye is minimizing the use of the term GIS. I hate it when that term is thrown into the face of a consumer who could really care less about GIS. The city is using the term CityMAP and the consumer will thank you.

The city also decided that one map application was not enough so they split it out in to one general mapping application and a few specific mapping applications. I applaud this decision, adding too much to a single map application clutters the functionality and makes it more difficult to use. I always say “The more you add the less they use and the less you add the more they use”. The specific applications focus on a single use case making the user experience very simple, straight forward and simply makes since.

The general application called CityMAP’s removed the GIS from the consumer and control just about everything from a single input box asking the user what they want to do? this is very Google esk giving the consumer a style that they are already comfortable working with. This style has allowed the city to remove that complex toolbox that so many web applications include. The end user is only presented with tools when they need them. Taking the tools off the main user interface and hiding them until they are needed is a great approach in a consumer user experience. I call this hiding the "GIS" and doing so  makes for a comfortable and easy to navigate user experience.

What I like:

• There is no layer list for the user to interact with. Layers are controlled by what work flow the consumer is in and not some complex list that needs to be toggled on and off. Layer lists are a thing of the past
• There is no toolbox – Tools are presented to the consumer depending on what work flow they are in. Adding a toolbox when not needed just adds confusion and clutter to the user experience
• The base data is presented well using zoom levels to turn on more information as you zoom into the map
• The interface is clean and uncluttered
• There is a tutorial presented as a choice to the end user as they come into the map.  
• The aerial’s and map zoom/pan controls are located and look like that of a Bing or Google map leveraging experience that the consumer has already gained by working with these common map controls.
• The use of multiple mapping applications for more specific functionally thus removing that functionally from the general consumer map

What I don't like:

• The use of flash. I feel that there was a lot of work done and I would hate to not see it on a tablet devise

I can see that the city has spent a lot of time on their user experience and it shows. This will pay off with greater page views and less front counter traffic allowing the city to focus on what really counts. The GIS department has done a fantastic job.

I give this user experience a 9 out of 10

Happy Mapping !

If you enjoyed the post, please share it:
The City of North Vancouver Web Mapping Done Right! A Post - @SkipCody http://bit.ly/v7RDk1 #GEOSPATIAL #MAP #GIS

Follow @SkipCody

Map Usability Fail Series: #5 Take the GIS out of Your Map!

Take the GIS out of Your Web Map!

The biggest tip that I can give you is to TAKE THE GIS out of your map! This is one FAT usability fail and the most common! Consumers could not care less about GIS period! They don't want to hear it, see it or have anything to do with it. So many cities and government organizations come back from a GIS conference and put up a standard, out of the box, web map that is built for the GIS guy. Step back and ask yourself how many people in my city actually know what GIS is or how to work with it. "Psst GIS'er you went to school and spent a lot of time in labs to figure this stuff out and now you want the average every day consumer access and use your map. Not a chance."

I would like to applaud the cities that go to the extra step in adding a map interface for consumer use. It is a step toward transparency and provides access to data 24/7. If you are going to put up a map, strive to make it easy for your grandma to use and not the guy sitting next to you in the GIS department. The map above is such a great example of what I am talking about.

What I like

• The fact that the city put up a map is great. I love maps and expect them at every city website that I go to.
• I like the use of standard zoom and pan controls that look like Bing and Google, two mapping applications that the general consumer has experience with.
• I can use this map, but I am a GIS Professional and have spent many years working with this type of interface. So for me easy but for the average consumer it is very challenging.

What I don't like

• First of all to access this map I need to click on a link that says GIS Map. A consumer has no clue what GIS nor do the care.
• A box of layers that is confusing and daunting to a consumer. One look and they will throw up their arms and go back to Facebook.
• Numerous GIS widgets on small buttons with icon images that mean absolutely nothing to a non GIS professional.
• The functionality is too generic and not focused into any specific use that the average consumer is interested in.

What they could do better

• First of all do not put the word GIS on the map link. Use something like Community Maps or City Maps
• Don't display every layer. Make your map specific to the one or two work flows that your consumers will be doing on the site such as property look up and use only the layers specific to those work flows
• Make buttons with easy to discover icons that the user will be able to understand. Make the buttons large
• Wrap work flows in to single step. i.e. Enter a APN press search and the maps zooms highlights the property and displays information that the consumer can use in a single process.

I do love maps and think any web map is better then none. The goal of any publicly available map is to have is used by the public. To get the most out of your investment you must make it easy for everyone to use and not just to impress the GIS folks.

I give this map a 2 out of 10 for usability for the consumer audience
I give this map a 7 out of 10 for usability for the GISer's

Map Usability Fail Series: #1 Zoom To Rectangle
Map Usability Fail Series: #2 Map Widget Hoarding
Map Usability Fail Series: #3 Creating Custom Map Controls
Map Usability Fail Series: #4 Take Advantage of your Base Map Control!

If you enjoyed the post, please share it:
Map Usability Fail Series: #5 Take GIS out of Your Web Map! A Post - @SkipCody http://bit.ly/uYSdIm #WEBMAP #MAP #GIS

Follow @SkipCody

Map Visualization and the use of a Timeline. A Great Example

Here is a great map that uses quite a few visualization techniques that convey a lot of information in an easy to consume and comfortable interface. The goal of this map is to show earthquakes, their location, their intensity and when they occurred.

First of all lets take a look at the map. The creator is using a familiar google maps interface and use the standard controls as are out of the box. A point to be made here is that millions of people are already familiar with these controls and allows a user to get right in and start working instead of learning a new system of controls. This site decided to use a single color icon to show where earthquakes have occurred which makes it easy for the brain to quickly understand what it is looking at. To display earthquake currency the creators have applied an opacity so that older earthquakes get fainter as the time goes on which is a great visualization technique because any user seeing the different opacity's can immediately infer that it is measuring age. The icons that are being used also are using size to display intensity, again something very easy for the user to quickly understand.

Moving away from the map the author of this site is using a timeline as another way to access the information about the earthquake's. The timeline can be controlled by the user to view past dates extending the use of the map and giving the end user the ability to browse different time periods. Incidents have been grouped  by hour and clicking on an incident interacts with the map by resetting the view and showing a balloon for further information. One other item to note that under the timeline the author uses hash marks and color to mark intensity.

What I like:

• Common map controls using a industry standard map
• Multiple visualization techniques to tell the story
• Symbolization that makes since so that the reader can quickly tell what they are reading. In fact they do such a good job there is no need for a legend
• No need for a legend that if not necessary will just add noise to the read
• The use of the timeline to allow the user another means of navigation
• Single focus, this map is telling a single story that makes if very usable and not a bunch of stuff that can confuse or distract the end user

What can be done better:

• I would not change this map, I think they have done a brilliant job

What makes this map great is its ease of use. A average consumer can get into this map and quickly become an expert in its use. The story is simple and easy to understand.

I give this map a 9 out of 10

Happy Mapping ...

If you enjoyed the post, please share it:
Map Visualization and the use of a Timeline a Great Example! A Post By - @SkipCody http://bit.ly/scIoo3 #MAP #VISUALIZATON #GIS

Follow @SkipCody

New Belgium Brewing Company Libate Me!

New Belgium Brewing Company has taken the Store Locator's to a new level and has added a great interface to let their fans find the beer that they are looking for. Store locator's were all the rage in 2008 and provide a very simple solution to a simple problem, Where can I get one?
The New Brewing Company has taken data that they already have and maintain, and present it in a way that helps market their brand, drive traffic to their site, and provides a simple solution for their fans.

The interface is very comfortable and simple. Just add your location and markers appear on the map. They have added a buffer tool selection which is pretty standard though affective, and an easy way to check what type you are looking for.

What I like:

• The use of marker symbols to note if the beer is on draft or by retail packaging
• I love the twitter stream to the left. This makes the user be a part of something bigger then just a six pack, makes them feel part of the New Belgium Herd
• I like the use of the standard map controls. Nothing fancy just familiar!
• When clicking on a beer in the popup it brings you to a page and provides details about that beer. Cool!

What I don't like:

• Locator facts are confusing and clutter the screen. Might be better as a new link.
• Clicking on another location should close the previous balloon. (Small usability issue)
• The legend is below the scroll line and out of sight. It took me a bit to find it.

What could be better:

• It would be simple enough to add driving directions to the address on the popup balloon
• Move the legend up so that it is visible without scrolling

Overall I give this site a 8 out of 10. It is very comfortable and consumer friendly. It serves its purpose and makes you feel apart of a large crowd of New Belgium lovers. I am a Fat Tire fan and am always looking for a place to sit and have a cold one.

If you enjoyed the post, please share it:
New Belgium Brewing Company Libate Me! A Post By - @SkipCody http://bit.ly/n3MnI4 #GOOGLEMAP #MAP #FATTIRE

Follow @SkipCody

Map Visualization Fail Series: #1 Using Hash Lines Confuses the Story

This map recently came across in a tweet and tells the story of the 12 month Housing Price Index change by state. I  had a difficult time wrapping my brain around it. Although this map tells a story it was difficult to read and I found it a great example of what not to do when creating visualizations for a consumer audience.

This map does have some good points to it, the first being that it is telling a story and without a story the map is useless. The second point is the use of minimal data breaks. It is difficult for the brain to consume much more than five so keeping it to five or less is a good rule of thumb. The third point is a easy to understand legend which also makes the map more usable. The problem I have is with the use of hash line fills and the choice of color to differentiate the breaks. These combinations made me rely on the legend over and over again to determine what I was looking at. This back and forth added noise to the story and added an unneeded challenge to pull out the information.

How could this map have been better? To start use colors that make since; green = good red = bad or blue = cool and red = hot. Everyone understands these colors and the brain can quickly determine what state a feature is in just by these two colors. Next use intensity of color to show the depth of bad or good. Use dark green for the values that are showing the best and graduate to a lighter green as the data goes neutral. It really is that simple. Do away with hash lines, they are confusing and make the reader jump to the legend to remind the brain what it is looking at. While some of your readers will tolerate this most will not and the message will be lost.

Keeping the map simple without a lot of distraction will allow the story to jump out at the reader and get your message across.

If you enjoyed the post, please share it:
Map Visualization Fail Series: #1 Using Hash Lines Confuses the Story! A Post By - @SkipCody http://bit.ly/ncIkqP #GIS #MAP

Follow @SkipCody