Skip page content

Archive for the ‘Info Visualization’ Category

Right for Your Audience? Write for Your Audience…

Getting started in designing or redesigning your website should begin by answering this question: who am I trying to reach with the website? By putting the customer first and serving their needs, you can connect with them. The copy on the site should show them how your product or service will solve their problem.

To design your site right, you should begin by thinking about the goals of your potential audiences. Why will people be coming to your website? What problem will they be trying to solve? What search terms will they use to find you? What information are they seeking?

Your potential audience is often composed of people in various roles. They may be potential customers, current customers, investors, job seekers, or even your own company’s staff. Take into consideration all of these roles when designing the site and writing copy, but prioritize the list to handle any conflicts.

The highest priority target audience for a e-commerce or lead-generating website is most likely potential customers. Remember, your website is essentially an online welcome mat and could quite possibly be the first point of contact that you have with your potential customer.

The primary space on the Home page of a website should be devoted to helping customers find the products and services they need. Make sure that the website copy uses terms that your potential customers would search for to find your website, rather than internal company names for your products. Of course, internal product names can and should be included as well, but make sure things are spelled out in plain wording using targeted search terms. You want your potential customers to find you using a search engine, right?

Here are some things you can do to learn more about your website audience:
  • Interview customers
  • Develop website personas
  • Conduct a usability study on your website – watch how users interact
  • Do keyword research for your industry – try out Google Insights, a free tool based on real world search history
Many companies feel that they already know their prospective customer, from a demographic point of view. Yet we find that every company can also apply these simple techniques to learn even more, and ultimately hone both their online message and the methods to reach people.

A Change is Gonna Come

New AdWords InterfaceI consider myself to be all about change (even before Barack Obama) and feel like if I don’t shake things up in my life every few months then things will get boring. So, you would think when I found out about the new AdWords interface that I would be one of the first on board, but I’m not. I can’t figure out exactly why I’ve resisted using the new interface, but I know part of the reason is because I’m so used to the old interface when I’m not working in the Desktop Editor. This week I finally buckled down and faced this change head on and decided to start using the new interface with a couple of my accounts, after all we are all going to be forced to use this new interface soon.

The new interface looks like the Desktop Editor in terms of navigation. There is a navigational tree along the left that allows you to quickly jump from ad group to ad group and campaign to campaign. In my opinion this is a big improvement over the old interface because the most time consuming thing was moving throughout a large account and waiting for pages to load. Anther big change in the new interface is the addition of graphs that look a lot like Google Analytics graphs. This should make it easier to identify trends in your AdWords accounts where with the old interface you had to either generate reports look at the change history or look at Analytics data to identify long term trends. I imagine these graphs could be very useful for monitoring accounts, but I haven’t found anything interesting yet. Another change that I like is that you can actually edit keywords, previously if you wanted to change a keyword’s matching or spelling you were forced to delete the term and add the changed term back to the account.

So you might think, wow there’s a bunch of new useful features, I should switch to the new interface right away, but not so fast. One of my biggest gripes is how much information is crammed into the new interface window. I have a fairly large monitor (1680×1050 resolution) and I noticed that I needed to have my Firefox window taking up most of the screen in order to see all the information within the new interface. So, I decided to set my screen resolution 1024×768 (which is what a lot of internet users have) and my hunch was correct that it is terrible to navigate throughout the new interface unless you like scrolling left and right as well as up and down. Another big issue I have is just moving around the new interface is choppy and overall pretty sloppy. The new interface is beta like most Google roll outs, but from what I hear they are switching to this new interface in the next few months, so I hope these issues are fixed before the launch. Maybe it’s because I’m using Firefox and on a Mac but even so I don’t think this is ready for prime-time. Overall it has some good new features, but I am not sold yet. Has anyone else used the new interface? I’m interested to know what other people think.

Web Archiving (introducing, Zoetrope!) and Web Analytics

Wouldn’t life be easier for web analysts if we could easily look at our data with full knowledge of the context in which it was gathered, including what was happening on competitor websites? Google’s Site Overlay Report is one example aimed at providing a “data + context” tool. But this report’s simplicity (not to mention technical limitations with many site codings!) make it pale in comparison to a cool new system that allows interacting with archived websites.

MIT’s Technology Review today came out with news on a new system and interface for tracking and analysis of temporal changes to websites. It’s called Zoetrope, was designed by researchers at Adobe and the University of Washington, and could really up the bar for analytics intelligence!

Features:

  • a query language
  • indexing that allows quick processing
  • visualizations

What you can do:

  • temporally scroll entire sites, or just portions of site (multiple at once, if desired)
  • view news stories on a time line
  • generate visualizations of temporal data on multiple sites at once
  • export data to present elsewhere (Google docs and Motion Charts are plugged as a suggestion

It’s easy to see how useful this could be. One of the biggest causes of analytics “murkiness” is the fact that in saturated markets, where innovation is rapid and constant, it can take hours to investigate why numbers might be down, usually by researching the actions of competitors, consumers, etc. By allowing quick, easy comparative monitoring across sites, Zoetrope could revolutionize business intelligence mining. We could scroll through and visualize competitors’ price data, for instance, in order to investigate why purchases on an e-commerce site might be unusually low (or high). At the same time, a relevant news source for the industry could be scrolled through or the topics visualized over time, providing a comprehensive view of the market.

The only drawback? We have to wait just a bit longer, while additional features are being designed, before Zoetrope can be released.

Color in Web Design

Color perception is a tricky business – the way a color makes a person feel, the colors we choose to wear and identify with, is about as subjective a topic as you can yet. But studies in perceptual psychology have also shown certain colors to have certain effects across subjects, albeit with sometimes contradictory results. Use of color on websites becomes an interesting area of investigation. How does one strike a balance between the colors the designer prefers, and the associations that color might bring up for users? What facts can we be sure of when it comes to the effects colors produce?

Not too long ago Mike wrote a post discussing a report from the Journal of Usability Studies, originally published here. The take-away is that a study on color combinations on websites showed that both classical and expressive aspects of aesthetics (meaning both formal guidelines, and more subjective ‘feelings’ produced by colors) both affect users. Particular color combinations were shown to be more effective than others – specifically, “the split-complementary color schemes that utilized a cool primary color (blue) for the top or global part of the page and then used either another cool color (medium blue) or a warm color (orange) for the secondary page components provided the color balance that users found most aesthetically pleasing”, in comparison to double warm colors.

This information is incredibly useful to designers, and raises the question of what further conclusions might be drawn. But searching the web for what others have to say about color in web design brings up the expected contradictions and unsupported facts – for instance, did you know that
“white is associated with youth and freshness,”, or that “orange is associated with fun and youth?” What’s funny is that the first site cites the second for information.

So no definitive source exists. While I typically prefer data to back up guidelines, my desire for further guidelines led me to turn to what some of the seminal thinkers on form and color had to say about what colors mean. Wassily Kandinsky, the early abstract modern artist, developed his own theory of color early in the last century, one that has been much referenced by researchers following him in art theory as well as other fields. Why? Even if modern art isn’t your thing, its hard to deny Kandinsky’s talent (skill?) using color to produce effects on a viewer. The experience of viewing a Kandinsky up close, is, (imo), difficult to reproduce.

So what does he have to say? Blue, found to be effective in main navigation on sites, is associated with depth and restfulness; yellow is its opposite, the most aggressive, insistent, and disturbing color. The mid-point of these two “active colors” is green, a color that feels stationary as a result, and is thus even more restful than blue. Black and white, neither of which are “active colors” themselves, represent silence, but one (white) with possibility, while the other (black) brings up connotations of death or impossibility. These two opposites also combine to form an even more motionless, silent color, grey. Red is an intense warm color, but lacks the quality of reaching out to the viewer that makes us perceive yellow as so aggressive. Orange lies between the two in seeming closeness to the viewer. Brown is passive, and violet’s connotations depend on the amount of red/blue creating it.

What I like about Kandinsky’s ideas is that they are a basic guideline that describe the less tangible qualities (degree of seeming “motion”, for example) over focusing on more debatable connotations.

Creative Brain Documentation

MIMA Summit

This week, the MIMA Summit–that’s the Minnesota Interactive Marketing Association–invites bloggers to respond on additional topics of interest to internet marketing companies large and small. Such as Topic #2: Speaker Leah Buley asks, “What’s the process for creative brainstorming at your company? Who gets involved with creative exploration, and how do they do it?”

“Creative brainstorming”. When it comes to a typical day at Pure Visibility, what doesn’t fall under this heading?

Creative brainstorming as it happens here could be applied on the individual, small group, or entire group level. All three happen on a regular basis.

The individual level looks most like a person staring at a computer, surfing the web with an expression that is maybe more thoughtful than usual. Nothing too exciting there. Depending on the person, he or she might be 1) taking occasional long longs out the window, 2) eating chocolate, 3) drinking a caffeinated beverage, 4) listening to music, 5) leaving the computer to take a walk around the block.

(Note: If you work here and do not feel your brainstorming process has been adequately described, please respond.)

We are a very collaborative company, so there is plenty of collective brainstorming at quarterly strategy meetings. Additional problems and potential opportunities alike are addressed during productization meetings, daily stand-ups, monthly strategy meetings, and weekly meetings.

Some of these behaviors are motivated by Mastering The Rockefeller Habits, a book which helps companies define themselves and achieve success through consistency and goal-setting. Check out this post on the main points of Mastering the Rockefeller Habits.

But we have other company-wide “secrets to creative brainstorming” as well…

Brainstorming Secret #1: The color-scheme that dominates not only this blog’s skin but also our office environment. In addition to the blue, orange, and green, we also have walls painted yellow and purple. Do they work in inspiring creativity? We are still A/B testing that.

Brainstorming Secret #2: A wii system. What could be more creative than video games?

Brainstorming Secret #3: A crystal ball in one of our conference rooms. Co-founder Linda Girard, who is “futuristically talented” according to another great book, “Strengthsfinder”, may even provide an online video tutorial on this very blog one day, instructing others on how to use this prop.

Brainstorming Secret #4: Whiteboards. This one is not a secret as most offices have them. It is also unclear whether the object itself actually inspires creative thought, or just accompanies it. But at least one person here has an attachment to the whiteboard, and so I will mention it.

The Triumph of Numbers

At Pure Visibility, we love numbers of all sizes. We love putting them together and making sense of them and telling stories about numbers.

Recently, I had the pleasure of reading The Triumph of NumbersThe Triumph of Numbers by I.B. Cohen by I.B. Cohen. His book describes how numbers began to be used for making government policies, understanding nature, and understanding people.

Most of the book deals with the 17th, 18th, and 19th centuries. In this time period, European governments began to increasingly rely on statistics about their citizens to make decisions. At the same time, science underwent a revolution. With the introduction of numbers, scientific theories could make predictions and could be disproven through experimentation.

Cohen writes about how numbers come to describe not just natural phenomena in physics and biology, but also the actions of groups of people. Further, probability could be used to predict human activities.

A big part of our work here at Pure Visibility is looking at numbers to draw insights about what people are doing on websites. As such, this book didn’t so much change my mind about anything as provide a broader perspective on an important topic.

Information Visualization: Defining Audience

What can we learn from “An Inconvenient Truth” about how to tell a
complicated story with a chart or graph? Well, that it’s often a very difficult task.

A recent post addressed some basic guidelines common to information visualization design and evaluations. I’d now like to bring up a question related to both these tasks – what effect does type of audience have on these guidelines? Often, information visualization books, such as Card’s excellent Using Vision to Think, which covers numerous aspects of data viz, do not give much treatment to questions of the designated perceiver. On a general level, it may seem obvious – a visualization targeting clients should be simpler to process than one designed for analysts who have more time to spend visually exploring the data. But this doesn’t do justice to some of the finer target audience-based distinctions, which can lead to debates over guidelines and best practices if unmentioned.

In checking around for online discussions around this, while there are plenty of blogs devoted to info viz, I found that most (like information aesthetics, or meryl’s) seem to focus primarily on supplying a survey of novel and interesting visualizations, without going too far into evaluating them empirically, or considering the design process.

One online resource that did touch on this aspect of design is The Adobe Design Center Think Tank’s article on
the controversial visualization of the temp/carbon monoxide relationship in Al Gore’s movie “An Inconvenient Truth”:

Relationship between temp/carbon monoxide over 1000 yrs.

The controversy was around labeling of the y-axis, and that a perceiver can’t tell whether warmer temperatures precede or follow the rises in levels of carbon dioxide. According the graph’s designers Duarte Design (who helped create all the graphs in the movie, but failed to comment on this particular design), “In general, you want to keep the visuals minimal and eliminate background noise to emphasize your point.” The Adobe article goes on to point out that “dumbing down” or simplifying the graphics can make your audience unlikely to agree with the pattern you’re trying to enforce through the graph, citing Edward Tufte’s famous observation that less is often just less when it comes to visualizing information, as it sacrifices nuance and thus credibility. Isn’t science “complicated”?, people tend to think, and its difficult to convince them otherwise.

Adobe ends the article with a reference to how combined narrative / visulalizations are becoming “the most common way of presenting information for businesses, academics, and the military.” To be effective, dramatic results must be carefully introduced; the realization must be gradual to make the visualization seem accurate and believable.

To me, this begins to touch on some features that can distinguish visualizations designed for those familiar with a topic but not immersed in the data, such as clients coming to a company with an analysis need, versus those geared toward the analysts themselves.

Its a somewhat debatable issue, in my opinion. I’ve met people (including a company I designed a viz for) that ultimately decided if they were to put a visualization in front of clients, it had to be simplistic. Myself (perhaps as an analyst?) am not satisfied with overly-simplistic graphs in any context; its the data that interests me.

I thought it would be a fun exercise to try and categorize real distinguishing features of viz’s for each audience type, and some that are shared:

Client Audience

  • prettier – (custom color schemes?)
  • make use of convention as a default
  • metaphors/branding interwoven in design
  • delivered in narrative context

Analyst Audience

  • multiple views
  • access to info on data mapping
  • interactivity
  • access to much granularity

Shared Characteristics

  • maximize automatic processing
  • use easily distinguishable colors – (beward of red/green color blindness, which is relatively common)
  • minimize use of text by default

Visualization Considerations

Information visualization has become a big part of web analytics, with Google Analytics leading the pack when it comes to visualizing user interactions with a site, and a few new tools for social media analysis touting visualization capabilities as reasons to invest. With newer technologies making it easier than ever to create visualizations, as well as allowing more visually-engaging options than ever before as 3D becomes easier to process, a post on some of the basic guidelines that can be used when judging the effectiveness of a visualization seemed worthwhile.

Let’s start with an example. Below are two visualizations of a wave form from Stuart Card’s Using Vision to Think”:

Clearly, the bottom graphic is more effective. But why?

One of the fundamental requirements in information visualization concerns use of basic human perceptive abilities. Ideally, a visualization allows for fast interpretation by making use of automatic processing, the kind that allows forms to pop-out without any conscious attempt. Is how well a graph does this subjective to judge? To some degree, perhaps, but just as usability standards exist, so do general guidelines for designing graphs.

Now, for an example closer to SEM, here’s the map portion of the Map Overlay report in Google Analytics:

I am actually not a huge fan of this graph, though most GA graphs are fairly intuitive. Ideally, a visualization should convey distinction well without cognitive overload, even between similar values. Otherwise, we could just use tables for everything. In the map, by using a gradient, the colors on the left side of the scale appear more or less the same. When I see most of the map appearing the same color, one hardly discernible from the background, my first assumption is that these countries aren’t bringing any traffic, or are bringing maybe 1-5 people (based on the scale in the lower left). In actuality, several are bringing web traffic in the hundreds. The graph gives the impression of a pattern, as it should, but the error in the judgment it encourages is worth considering. As a fan of visualizations, rather than tables, I’d rather the surprise came from the former, but with this graph I need the table to get a real sense of the data.

Here’s another map example, Mark Newman (of UM)’s well-known graph of US Election Results in the 2006 Congressional Election:

I like how the borders are de-prioritized in favor of giving the viewer a better sense of the distribution of democrats and republicans, but the state outlines allow one to still note what state.

An easy evaluation measure is to consider whether the mapping of the data to the visualizing structure is expressive, meaning it represents all and only the data in the source table. The classic example of a violation is a bar graph being used to graph two non-ordinal variables (like countries versus food exports).

A final major consideration usually concerns “focus + context”, a term used often in HCI and interface design, referring to providing both the big picture and the detailed view. Zoom is a classic distortion example that demonstrates focus + context when done right. The best visualizations are those like the zoom capabilities of Google Maps, where details don’t come at the expense of the bigger picture:

The Structure of the Web

The web remains the largest text corpora to date, although in recent years corporate archives are beginning to catch up. But the web is more than just a massive text database. The above picture is one I enjoy geeking out over. It shows the structure of the web. Here’s a description of its parts:

SCC: This is the Strongest Connected Component, a group of pages connected by links where, from any page, you can get to any other page via a series of links and then back to the original page via another series of links. This is believed to be the largest component, though this can not be proven at present.

In Component: Those pages from which you can get to the SCC, but cannot get back to from the SCC. Think someone who links their personal page to all their friends pages, but gets no links in return.

Out Component: Those pages that you can get to from the SCC, but once there, cannot get back to the SCC.

Tube: A page in the In Component that links directly to a page in the Out component without going through the SCC.

Tendril: This is a difficult thing to explain. My best attempt is as a subset of pages that are all strongly connected, that may be linked to from either the In, Out, or SCC, but once you are there, there are no links out of the Tendril (like a company internal page or set of pages).

Subscribe to our blog

Never miss another post. Enter your email address and subscribe: