Designing Composite Applications

Over the weekend I saw a couple of pop machines (Check out this totally awesome map of "pop" vs. "soda" where you can learn where I am not from!) that on the surface were relatively similar in design and layout...

Not It Remember the old machines that had a giant picture of a logo on the face panel and a series of small buttons off to the side where you could make your selection?  That's what this is except instead of one giant logo there is now also a grid of big photo graphics of the offerings that look a lot like buttons. Maybe at one point vendors lamented all the walk-aways that thought the machine was out of order and sacrificed one of the cells in order to house a message that essentially says, "These aren't really buttons!"  Or maybe they knew it was a confusing layout in the first place and planned the "Choose Here" bolt-on from the start. Either way you get an engineered band-aid.

Got It Now when a see a layout of delicious options, the selection button is right there.  Plus, there is no need for a bolt-on message to correct a persons reasonable assumptions.   Buttons should look clickable Non-buttons should not look clickable Bolt-ons are expensive to produce and frustrating to use Bolt-ons can be funny

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

Change in Latitude, Change in Attitude
As I am prone to jabber on about from time to time, one of the characteristics of the resurgent Mercator map projection is the relative difference in size that it represents equally-sized things, depending on latitude.  Quick lowdown: stuff at the equator appears the smallest, while the farther you go north or south from the equator the same-sized stuff appears bigger.  This has led to some questions in our training sessions around a new feature in VFX 4...

The Radius Query
One of the tools available in VFX 4 is a generic drawing tool that can be used to feed a radial spatial query.  You swipe out a distance and VFX throws over the wall a set of geographic coordinates for you to query against for whatever reason (with the provision that it be used for good instead of evil).  You can drag the query rings around, too, to reposition them to somewhere else on the map -good for what about here, what about here, what about here scenarios.  So if you swipe out a query area with a 500 mile radius and then drag it all over the map, we maintain the 500 miles, even though the circle grows and shrinks as you move it about.  It looks kind of funny, but it is a good thing.

Heads Up!

Here, I drew two queries -both of them have a 500 mile radius.  The nature of the Mercator projection makes the radius up near Greenland massive relative to the one near Africa.  C'est la vie.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

The Case

The not very enlightening map. source: Wired Magazine, April 2009

In Wired Magazine's April issue there was a small map in their Rants section (letters to the editor) showing the number of Wired subscribers per state. As a total map geek I was glad to see a map included but pretty quickly bummed out (as bummed as a tiny map in a magazine warrants anyway) to see that it was just the total number of subscribers. California has lots of people in it.  So it stands to reason that it would also house lots of subscribers.  Same with Texas and New York.  Wyoming is our least populous state, so that fact that it also has the fewest number of subscribers is not surprising.  Or interesting.

A fellow geek, who is more motivated than I am, also noticed the relative lameness and wrote to Wired.  And Wired quickly replied with a "more illuminating take on the data."  Nice! States of Confusion I'm a bit of a data geek, so I was excited to see a map in the Rants section (issue 17.04). But the information is presented in such a way as to make it meaningless. The chart's subtitle could be changed from "Wired Subscribers by State" to "US Population by State" without altering the picture a bit. (I should add that, out of all the issues of Wired I've read, this is the first time I've been less than 100 percent satisfied.) Matthew S. Slafka Kent, Washington

The totally awesome second-take. source: Wired Magazine, June 2009

Removing Enumeration Bias
In this follow-up version of the Wired subscribers map, we actually get a sense for how Wired-friendly the various states are.  A ratio of subscribers to population removes the bias of state population size.  So, now we see that Wyoming isn't so dismissive as we thought and Texans aren't necessary the avid Wired readers that we thought.

Thematic mapping has to break the world out into Enumeration Units -the chunks (in this case, states) that are assigned some visual variable (in this case, color).  Thematic mapping is almost always unfair.  We do our best to make the visualization as meaningful as possible, but the amount of stuff inside (folks living in California v. Wyoming) may vary greatly -and hose the message.  By making the wild card of population a denominator for the important stuff (subscribers) Wired made a ratio, mitigating the population bias and resulting in a much more illuminating story.

Communication
Maps and data visualizations in general are just distilled messages.  Just like gestures, speech, or paragraphs of text, visual graphics project a story.  Sometimes a raw count is what you want, sometimes a ratio is more informative.  Craft your visualization in a way that illustrates the truth of your data.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

Get the overview here:
http://enterpriseready.spaces.live.com/blog/cns!EA197300488A9B26!642.entry?wa=wsignin1.0&sa=431266005

When:
2:00 - 3:00 eastern, June 30, 2009

Registration:
https://www2.gotomeeting.com/register/964510731

Cost:
Free

Questions?
Contact Us

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

"I know a lot about cars... I can look at a car's headlights and tell you exactly which way it's coming."

-Mitch Hedberg

Mitch Hedberg was a UX designer's quote factory-dream -insightful, and capable of distilled and accurate feedback (more rare than it would seem).  Plus there is the funny, which isn't nothing.  Let's look at a couple of UX topics that Mitch totally nails here...

User Confidence
A good interface will instill confidence in the user.  This isn't to say that there are sporadic messages telling the user how smart and efficient they are, but rather one that presents controls and features in line with workflows, meaningfully organized, and well designed graphically.  Mitch looked at a car's headlights and felt confident about the whole thing; that is the kind of experience that will bring a user back to a UX and be more likely to discover what else there is.

Inherent Comprehension
Mitch knows a lot about cars because he is familiar with the cover.  He understands what he needs to complete his task (I guess in this case, not getting run over).  If he needs to peel back the covers he can, but since he isn't introduced to an inside-out car with all of its components and controls splayed out at him at once, he knows enough to get by even without a full automotive mastery.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

There are plenty of fun doodads in the works here at IDV.  The new interactive SDK for the recent release of VFX 4.0 is enabling folks to customize and extend the living daylights out of things.  Here is a series of prototype renderings for a planned Floorplan Elevator (still in the conceptual phase).

What is a Floorplan Elevator?
It is an interactive point-of-interest feature that lives within the Silverlight/VFX mapping context at the geographic location of a multi-story facility.  Manipulating the Floorplan Elevator allows a user to select a specific floor in order to fetch blueprints, floorplans, IT infrastructure, employee information, security cameras, or Photosynth renderings.

How Does it Work?
The new navigation system of VFX 4.0 provides a few more degrees of freedom than the typical 2D map, but without the overhead and obstructions of true 3D.  This 2.5th dimension allows for some fun interactions at the map level.

Here,  facilities with Floorplan Elevator support extrude from the surface.  Hovering over one of the locations spawns a tooltip showing some summary information about that facility.

Selecting one of the facilities expands the elevator, from which a schematic of the selected floor spills out.  The schematic potentially includes blueprint renderings of the floor and the locations of cameras and Photosynth hot spots.  Dragging the elevator disk up and down drives the schematic to the correct floor.

Selecting a floor-level camera in its registered position launches a live viewer.

Likewise, Photosynth renderings can be launched from their general position within a facility.

Let me know what you think!  The gears are turning; this is going to be a fun one.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

NOT IT! the Accidental False Legend (and spawned retro fits)

Totally awesome, right?	While on a long drive to meet with a client a little while back, David Hammond, a colleague of mine here at IDV, and I stopped at Burger Kings a couple of times and picked up some coffee.  The "BK Joe" machine had, right there above the nozzles, iconographic representations of boldness in the form of three increasingly caffeine addled eyeballs commensurate with DECAF, REGULAR, and TURBO coffee options.  The tagline on the dispenser read, "CHOOSE YOUR LEVEL OF AWAKE."
Here's that false legend and the resulting retro fitted sign...	But the nozzles were just the standard coffee, decaf, and hot water.  What's the deal? Either this was an expensive corporate-wide dispenser retro fit or it started right out of the gate as a cool looking but totally misleading graphic.  Either way, the result is a false legend. At some point they retro fit the dispenser with a plaque (right there under the nozzles) to tell confused TURBO drinkers that this machine is actually of no use to them.  Pay no attention to the gigantic legend in front of you.
...and then another plaque to really mitigate the misleading eyeball legend.	Here is a second plaque to further override the fake legend. Written instructions as part of the initial view of a user experience is usually evidence of a problem and the overall design ought to be revisited.
The problem is removed, and so are the requisite instructions.	Then I saw this one a few miles up the road; they had given up on the eyeball notion altogether and glued over the problem with a different retro-fit plaque.

GOT IT! The Seat-Shaped Seat Control

Bear effortlessly interacting with a user interface device that controls  4 motors and 5 points of articulation.

Here is a snapshot of my son, Bear, demonstrating my favorite example of natural mapping: a seat control that is shaped like a seat.  Yesterday I was driving along and Bear, out of the blue, says, "This is an awesome car.  The chair is so easy to move up and down." Bear, 7, didn't need much time to figure out the whole seat thing.  There is a weird magical little conversation that happens between the engineer of a feature and the eventual user of that feature that is broadcast by inanimate little doodads.  Some doodads are better conduits than others. Interaction elements that are intuitive, and even fun, most definitely impact the broader experience for the positive.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

http://www.idvsolutions.com/Documentation/SDKs/VFX4SDK/index.htm

Justin Hoffman, IDV Code Behemoth, has recently released an interactive Software Development Toolkit for the latest release of the Silverlight-based Visual Fusion Experience, VFX 4.0.  There are lots of new gizmos that VFX 4.0 has out of the box but maybe the biggest improvement in this version is the level of extension and customization that is now possible.

So go nuts.  You can, for example, figure out how to incorporate...

...draggable map objects in your mashup if you wanted to create a war-room style strategy map, or build scenarios based on shifting coordinates, or...
...use tons of Sparklines to get a visual sense of quarterly performance at your regional distribution centers, or show epidemiological trending of a targeted virus cases at major hospitals, or...
...incorporate a cool new basemap that you created at www.CloudMade.com (seriously, you should check out CloudMade.  It is pretty awesome) or maybe one that your GIS department made, or...
...extrude mapped bar charts to plot the capacity of global ports, or track the production of wellheads in a natural gas field, or track the relative magnitude of recent seismic events, or...
...define a geographic query to return all addresses within the impact zone of an engineering project, or pull employee contact information within the risk plume of an environmental event, or aggregate the consumption power of potential marketing districts.

Let's check out this example of "data driven icons" where, the map doodads are these relatively generic sparklines populated by (random) data.  This example has 6 tabs worth of juicy helpfulness...

Here is the XAML content for the silverlight container page...
...and the C# code that manages the map and data.
Here is the XAML that conjures up the silverlight sparklines on the map...
...and the C# code that enables it.
And finally here is a mountain of documentation that you can take with you on vacation for some light reading by the beach.

http://www.idvsolutions.com/Documentation/SDKs/VFX4SDK/index.htm

Questions/comments?  Feel free to send them along.  Thanks for looking, and happy SDK-ing.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

vf4demo.idvsolutions.com

The next generation of IDV Solutions' Visual Fusion product is out there.  You can kick tires at our demo site where some of the most basic out of the box features are shown.

This is a pretty exciting release and I'll go into more detail in some upcoming posts, but here are some of VFX4.0's broader bullets...

• Wacky 3D (or not quite 3D, pseudo 3D, 2D in 3D space kind of, 2.5 D, or some other couched term).  Anyways, sometimes true 3D can be a pain to use.  "How do I see the whole world at once?"  From a data visualization perspective, there is nothing like a nice flat map that is kind of 3D.  Wacky 3D combines the best of 2D and 3D.  Tilt the map back and rotate it around.  We originally did this for the wow factor and then the use cases came pouring in.  If you go to the demo, turn on the "Bar Charts" and then rotate around.  Oh, and it's not actually called Wacky 3D.  If you have a better name, let me know.  John.Nelson@IDVSolutions.com
• Doodads.  Point features on the map don't have to be just pawns to click or not click.  Now, through configuration and/or the SDK, those points can be extruded bar charts, radial charts, crazy octopus fly-out mini-menu extensions, sparklines, virtual-elevator floorplan navigators, whatever.
• More KML support.  KML is a vast and sprawling standard.  In this version, some of the more obvious support additions are for KMZ, network links, and image overlays.
• Silverlight.  VFX 4.0 is a Silverlight application from the ground up.  This is music to the ears of designers and developers who's can take their XAML markup and managed code straight to the top. It's not a binary black box anymore.
• The "Pilot."  The map navigation scheme got a lot juicier in this version.  Gone is the GIS-y notion of nav tool modes like zoom in/out/pan.  Pseudo physics, the spaceman paradigm, and additional degrees of freedom have made getting around less a matter of tool learning and more a function of natural mapping.  I hope.
• Data Slicing.  We've expanded the types of visual filtering you can perform on your data.  Combined AND querying like in the Census Demo, range sliders, tri-state criteria (like need it, hate it, don't care), and stuff like that put you in more direct control over how you see your data.
• Interactive SDK.  Loads of ways you can extend Visual Fusion; ways that I can't possibly understand.

And here are some luscious screenshots, but you should probably just visit the demo...

Be sure to check out Scott Caulk and Ian Clemens' posts about this new release for what is, probably, much more valuable information!

John Nelson / IDV Solutions / john.nelson@idvsolutions.com

So, true to form, this many-month dearth of blog posting has meant that we have been super busy here at IDV Solutions (ironically, the cooler the work is, the less time/permission I have to chat about it).  Lots of exciting project work is going on around here but especially exciting is the development of the new version of our VFX map product -all built in Silverlight.

To that point, Scott Caulk, our Visual Fusion Product Manager, will unveil the latest and greatest of the new release of Visual Fusion 4 in a webcast on April 22, at 2:00pm (Eastern time).  Scott has declared in print that it "is going to be awesome."  So you can bear witness to that -I don't think he'll let you down.

Register for free here, or just check out the abstract.  In the meantime, try to prepare some brain-buster questions for Scott -he has yet to be stumped!

A virtual Scott Caulk, as seen in a social network business ap.

John Nelson / IDV Solutions / john.nelson@idvsolutions.com