Forrester Research commissioned us to do a series of interactive interfaces advertising some of their reports. The third one on the list was Technographics. Our goal was to build an interactive interface that would teach users what Technographics are and how they are measured. I am purposefully not defining what Technographics are at this point so as to have the reader be in the same position as our target audience.
We were then told that this image represented all one needed to know about Technographics. Examinethis image for a moment (you may keep the popup window open as you read).
How clear is Technographics now? Not much clearer, is it? And this posed a problem because according to Forrester, this image was being successfully used for the teaching of Technographics at certain conferences. However, when we asked more about how the concept was taught at these conferences, we discovered that the charts were indeed being passed around, but a Forrester analyst would then walk the audience through how the chart should be read. This made all the difference in the world: it's the difference between what we call guided discovery and self-discovery.
Interfaces geared towards guided discovery need to be designed differently than those geared towards self-discovery. The Technographics chart in question is a good guided discovery interface because the user can learn from it insofar as the analyst explains it to him. After the analyst explains, the user can refer back to the chart if he had any questions. However, the chart is not a good self-discovery interface because users have a difficult time learning from it when there is no one there to explain it. In general, interfaces designed for the web need to be good self discovery tools because people tend to browse the web on their own.
So our task was to translate a good guided discovery interface into a good self-discovery interface. Our first attempt at doing this was to expand the chart's compressed composition. The chart was simply trying to convey too much information in too small a space and this was affecting its effectiveness as a self-discovery tool. However, Forrester had already invested in the look and feel of this chart in their print publications and they did not feel it was appropriate for the look and feel of the print chart to be different from the interactive interface.
Since we couldn't change the look and feel of the chart, our second idea was to add density to the interface by the use of rollovers. However, it turned out that a significant amount of their audience was using browsers that didn't support rollovers. So that idea was out of the question as well.
With these limitations in mind, we realized that the only way this would work would be to have one page per segment (segments are the boxes inside of the chart). In the guided discovery model, the analyst would describe the characteristics of each of the segments. In our model, we would need to add an area that would hold this content. So weadded copy describing the characteristics of each segment under the segments chart.
People navigate content differently. The issue of navigation was to provide a means for those who wanted to read all of the content in order while also allowing people to skip through the interface to the areas they were more interested in. We therefore provided two means of navigation. For those who prefer a linear experience, we provided them with the arrows on the right side of the screen, which cycle through the segments in order, one by one. Then we also linked each of the segment buttons, allowing the other type of users to jump around from segment to segment in any order. Seeinterface.
At this point, we felt the interface was becoming complex, so we decided to add some redundancy to it. Redundancy has the effect of confirming the user's location in the interface. To achieve redundancy,we added the bullet items on the bottom left of the interface.
Beta testing at this point revealed that users didn't always notice that when they changed segments, the copy for each segment changed. In order to draw their attention to the changing copy we addedanimation to the name of the segment.
Further testing also revealed that the three indexes of chart (Attitude, Income, and Motivation) were not evidently clear to the users. Users weren't immediately clear as to which segments fell into which index and what each index represented. Further thought revealed that users just didn't have a clear idea as to how the chart was broken down. To that effect we were forced to add an introduction to the interface where the chart's indexes were isolated and explained.
And here's what wefinally delivered.
We weren't terribly satisfied with this interface. Although we believe it was as good as we could make it, given the graphic design and technology limitations present, we felt the interface was too long and not clear and immediate enough.
Recently, we developed a version of the interface using DHTML. The use of rollovers and layers allowed us to link the objects, their definitions, and their associations in real time, which meant we could limit the interface to one page. It also meant that we could rid the interface of some of the redundancies we had been forced to add to the static version. Given that the interface became so much clearer, we felt it was now acceptable to add a layer of complexity that had been included in the original chart: the percentages of the North American population each segment represented. These have now been added in the lower right corner via a pie chart.
Here's the DHTML version of the interface (required Netscape 4.0 or Explorer 4.0).