Interactive examples

Two interactive energy maps, one main difference: usability

I recently came across two interactive energy maps, one by the Environmental Defense Fund (EDF) tracking dirty heating oil in New York City, and the other by Renewable Energy Policy Network for the 21st Century (REN21) displaying a wide range of renewable energy information around the world. Both display countless data points on a map mashup, but after playing with both it is evident that distinct decisions regarding the UI and interaction design resulted in two drastically different user experiences.

EDF’s map was created by MSNBC’s Vu Nguyen. You can read more about the technical components of the map over at his blog, BiofusionDesign. Although the data points are overwhelming when zoomed out, users can easily scale and pan the map to a more digestible view. The interface reacts instantly to each interaction, which is always appreciated. The package is well designed, and the color scheme is easy on the eyes.

NYC residents can customize their experience by entering in their address to see if their building is burning dirty oil. This is an excellent component and I’m sure a worthwhile one as well to get users engaged in the issue. Furthermore, a call to action is also provided, allowing users to contact their management company and Mayor Bloomberg about the information they learned on the map.

The goal of REN21′s Renewables Interactive Map is to visually display “a wealth of information on renewable energy, including support policies, expansion targets, current shares, installed capacity, current production, future scenarios, and policy pledges.” You can read more about the map in their recent news release.

Unlike the dirty oil map, REN21′s interactive map is daunting to say the least. While the audience is probably more sophisticated than those using the previous map, the usability is still quite limited. The zoom function is clunky, and the color palette is a little overwhelming. I understand that the colors correspond to the sections of their main site, but the extensive amount of yellow actually takes my attention away from the white map, which is where I should be focusing.

They organized their content into a collapsible list of 11 categories, with a number of the headers cut off due to the small width. Furthermore, the right column of roughly 160 pixels is wasted unless users click on a country profile, which then displays the same information as the roll over box. I would suggest utilizing that extra space to expand the vertical navigation section on the left to devote approximately 300 pixels to the navigation and 630px to the map.

The interaction colors on the map are also confusing to the user. When you click on an item from the navigation list, a teal check mark appears. Thus, I assume that my selection will be teal. However, the map changes between gray, purple and teal, and I am unaware of the significance of each. The pop up box is also a little sporadic as to when and where it appears, and I assume this is because there is a small lag in response time.

Below is a video they created to demonstrate the functionality of the map. I personally believe a narrator talking over the screen capture would have been extremely useful rather than dictating via text boxes.

Tutorial Video_Renewables interactive map
by Renewable21

I personally know how much time and programming goes into these interactives, so I do want to applaud them for their efforts thus far. The map is still in beta, so I look forward to seeing how it will change and evolve over time. I would be interested to know if they did any usability testing with this beta version, as it appears they were more concerned with the information they were parsing rather than the design and usability of the package.

So, what are your thoughts on the maps? Do you agree or disagree with my assessment of the REN21 map?

Other posts that might interest you:

• Fortune visualizes Best Companies to Work For in 2011 findings
• Multimedia must see: Cisco Systems’ “You are the boss”
• The Washington Post effectively visualizes casualties of the Civil War

© 2012 Innovative Interactivity (II).
Download II's Security Policy (PDF)