Showing posts with label web mapping ui. Show all posts
Showing posts with label web mapping ui. Show all posts

Wednesday, December 5, 2012

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



Thursday, December 29, 2011

OnWebMapping Predictions for 2012



The Web Map continues to get better and better each and every year.  Improvements in data, browser technology, cloud services continue to change the game. In 2011 we saw the rise of the tablet, a solid mobile foundation, wider adoption of HTML5 and greater use in cloud technology. So what is coming in 2012 you might ask? Will there be a huge paradigm shift in the world of web mapping and geospatial technology, or will it just ride on the back of 2011? With the current pace of mapping technology I only expect that any prediction made will be a bit of a crap shoot, but hey, what is the end of the year for but a time to predict. 

So Here it goes.

1. We will see a mass movement from Google Maps to OpenLayers and the OSM tile service

The Google free lunch is over and many are going to have to pay the piper. The question is with what. A lot of these websites that use GMaps are just breaking even as it is and will not have the funds to meet the additional cost. Organizations are looking for other solutions and are finding it with Crowd Sourced data and Open Source software. The data exists, the technology is there and the entire package is ready for you to switch.

2. We will finally ditch the 1995 Store Locator style map and jump into content

A point on the map is so 1995 and organizations are starting to take notice that a good web map can make the difference to the overall user experience and return rate of their users. There are so many cloud based companies that can help you along the way it is a shame to limit your possibilities. Make a new year’s resolution to revisit that stale map and if you need help seek it. Your competitor is not sitting around nor should you!

3. UI improvements will meet the needs of the new consumer 

The new consumer is now Map Savvy and understands how to navigate a map and, dare I say, read one. Organizations are starting to get the geospatial picture and will dump that old GIS’er map and replace it with a consumer friendly map experience. GIS terms will be wiped from the UI and replaced with consumer friendly terms.  The new consumer wants their answer  now and with as little UI complexity as possible. Applications will move away from the all in one generic gis style map and become focused on a particular subject so the consumer can get right down to the answer with little interaction.  I predict that 2012 will bring GIS back to the consumer and they won’t even know it ;)

4. The further adoption of cloud technology will free the "server hugger" to build great product


We will see a wider adoption of cloud technology and less “Build It Yourself” mentality. It is difficult to be an expert in all parts of the technology that it takes to host and build a great web map. With the web mapping bar as high as it is, it is very difficult to focus on all the different technologies and still build a great product. 2012 will see more use of WMS and Cloud based services to not only get access to great data but also power behind the scene GIS technology. This will free the needed resources to focus on your buisness logic and not the nuts and bolts of a web application.

5. HTML5 (Duh)


Ok we have all heard that HTML5 is the greatest thing since slice bread, a statement that I am not 100% sure of but what are our options? With the developer needing to think not only about his/her browser based application and all its flavors (s)he now needs to take into consideration the UI limitations of the tablet and mobile devises. With the support of Flash and Silverlight still on the fence we need to look elsewhere. We will see more and more companies embrace HTML5 in 2012. If you haven’t already started to develop using HTML5 you had better start every day you wait is another day lost.

6. Hard to get data well continue to become more and more accessible

In the past decade one of the biggest hurdles with any GIS/Map development is getting the data. Data can be one of the biggest drains on your meager budget. 2011 started to bring us very focused data companies that are experts on only a few subjects. Their data is top notch and in most cases the best you will find.  As the cost gets shared by more and more people using the services the price continues to fall and will become the way to source great data for your apps. The best part of all of this is that these companies are eliminating the entire maintenance headache that comes with the traditional approach leaving you the time and resources to build killer product.


I predict that 2012 will be a banner year for Crowd and Open Source data and software. Niche data vendors will continue to provide hard to get data sets at a price point that just makes since. The store locator's style map will be buried with the time capsule and the deadly web mapping UI will become a place where the new consumer will feel at home. Let’s not forget HTML5 a cross browser, plug in less, language of the Tablet, Mobile Devise and works wonders on in the big screen browser.

These are mine predictions I would love to hear yours!

Now, go make a map and put it on a web site for all to use, it will make the world a better place!

Happy Mapping!

If you enjoyed the post, please share it:
My Web Mapping Predictions for 2012! A Post - @SkipCody http://bit.ly/tuRAk9 #GEOSPATIAL #MAP #GIS



Sunday, November 6, 2011

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



Saturday, October 29, 2011

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



Thursday, October 27, 2011

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


Thursday, September 22, 2011

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


Tuesday, August 30, 2011

Map Usability Fail Series: #4 Take Advantage of your Base Map Control

I was browsing property portals the other day and while doing so I came across this frustrating usability fail; Where is the Birds Eye Imagery? I ran into a popular brokerage site that decided it would be a good idea to remove the Birds Eye option from the UI of their Bing map. I can see a site doing this if it had no use for this feature but in this case I was looking at properties and as a consumer one item that I have come use to is that of looking at all 4 sides of the property. One of the main reason that property portals use Bing over Google is for the use of the Birds Eye option.
What did I do? I went to another site that I knew had Birds Eye and this portal just lost my consumer eyes. Keeping the end user on your site should be a top priority. Once lost it is difficult to get that user back.

Tip: If your base map control is giving you something that is useful and consumers expect it, use it!

For the map savvy people out there you can use Alt+B to switch to Birds Eye if the option does not exist.

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

If you enjoyed the post, please share it:
Map Usability Fail Series: #4 Take Advantage of your Base Map Control! A Post - @SkipCody http://bit.ly/o7NvHz #WEBMAP #MAP



Monday, August 29, 2011

Trulia Changes Their Branded Pushpins


Trulia recently changed their map pins from the standard brand logo to a green box that displays the list price. I have to ask myself is this the best way to convey data to the consumer? I assume that they kept the green to be in line with their overall brand color but wanted to get more use out of the map.

A possible downside to Trulia is that this alleviates the process of hovering over the property. The process of hovering also gives a picture and some simple information about the house. As a consumer I might hold off at even looking at a property based solely on price, but having that hover and presented with a photo might let my emotion get the better of me and having me click through.

One of Trulia’s strengths is to try new things and get feedback from their user community on how they like it. I will be interested to see how this change is received by the consumers.

If you enjoyed the post, please share it:
Trulia Changes Their Branded Pushpins! A Post By - @SkipCody http://bit.ly/nJ5hTT #MAP #Realestate

Friday, August 26, 2011

Map Usability Fail Series: #3 Creating Custom Map Controls


Another way to lose maximum usability with your map is to create your own map controls such as zoom and map type toggles. It has taken years for the average consumer to feel comfortable with the standard Bing and Google map controls. Users are confronted with these controls every day on various sites and have become very comfortable with their use and understand the functionality that comes along with them.

It is very tempting to create your own. It adds branding to your site and gives a different feel from all of the other maps that are out there. It is even pretty easy to do.

Beware of this temptation; while it is cool, it is not always your best option. The further you deviate from the standard look and feel the more difficult it is for the average consumer to work with your map. Putting the time that you spend creating a zoom bar or aerial buttons can be well spent on other portions or your app.

If you must create your own my advice is to stay as close as you can to what Bing and Google has to offer. Put these controls in the same area that you would find them on a standard map control. This is not a hard and fast rule but one to keep in mind during development.

Usability is key for the consumer to get the most out of your map.

Map Usability Fail Series: #1 Zoom To Rectangle
Map Usability Fail Series: #2 Map Widget Hoarding

If you enjoyed the post, please share it:
Map Usability Fail Series: #3 Creating Custom Map Controls! A Post By - @SkipCody http://bit.ly/n5AfM0 #WEBMAP #MAP


Sunday, August 21, 2011

Map Usability Fail Series: #2 Map Widget Hoarding

One of the most damaging UI mistakes that are made when building a web map application is to have a toolbar that contains every widget known to man front and center. It even gets worse when the 4 commands that would be used 90% of the time are buried within that mess. We call this “Widget Hoarding” and GIS’ers love to do it. For a consumer facing web map keep widgets to a minimum, only displaying the widgets that are used 90% of the time. If you need other widgets that add deeper engagement put them where they can be found by the 10% of the power users that would actually use it but not in such a place to confuse the average consumer.

Rule of Thumb!
If it is used make it easy to find, easy to use, and easy to understand what the widget is meant for. If it is used some of the time then put it in a box somewhere that is accessible.


Map Usability Fail Series: #1 Zoom To Rectangle
Map Usability Fail Series: #3 Creating Custom Map Controls

If you enjoyed the post, please share it:
Map Usability Fail Series: #2 Map Widget Hoarding! A New Post - @SkipCody http://bit.ly/n6egWC #BADUI #MAP