"See What I Mean?"
If you’re interested in some of the thinking that went into things like Target’s ClearRX program, or Karen Schriver’s redesign of the 1040 form, then you’ll want to make it out to Refresh Dallas tonight.
Wait. Scratch that.
If you build or design Web/desktop apps or Web sites for a living, or perhaps you customize business intelligence packages, or maybe you’re a technical writer or an IA or… Whatever your situation, tonight’s refresh meeting is for you! Co-worker Travis Isaacs and I are going to be speaking on information design. Specifically, we’ll be sharing some of our approaches to making ‘better’ screens (and forms). And, we’ll be running it a bit like a workshop, with some hands on activities…
Here’s the description:
“See What I Mean?”
We all work with information. In our web sites. Our web apps. Print communications. Graphs, and charts. But how exactly do you present information in a way that simplifies the complex, communicates powerfully, and actually delights people?
Join us, as Travis Isaacs and Stephen P. Anderson share their information design secrets. From travel plans to search results to quarterly earnings statements—they’ll present a handful of information design and data visualization case studies, identifying those principles we can apply to just about any project.
Learn how to identify and group related information, create a visual hierarchy, draw focus to the most important content, use images appropriately, see familiar data in a fresh new way, and much more!
As always, dinner will be provided, this time courtesy of Viewzi. I hope you can make it out! More details can be found at the Refresh Dallas Web site
Comments closed for this post.
Are Image Reflections A Cliché?
Or, when is a cliché, not cliché?
I’m working on project where we will be displaying images. And I’m probably going to recommend adding a reflection to the images:
Yes, the played-out, trite design aesthetic: the reflection. Made popular by Apple and (in their wake) every other ‘Web 2.0’ styled site . So popular in fact that there are a variety of different scripts written to make it effortless to add a reflection.
So, being aware that this is not a unique visual signature, and that it seems to have peaked as far as visual trends go, why am I recommending we add reflections to our images? Because it’s natural.
Shadows, reflections, translucent surfaces— we interact with these in the real world, and there are very real cognitive (and emotional) associations with these visual elements. Aside from attractiveness, a reflection is associated with clean surfaces and high style. Long before Apple, most luxury product shots for the last 30 years have included reflections. Reflections communicate class. Also, to have a reflection (of the variety we see today) implies that the object is standing up. If these images were laying down, on a table surface for example, we’d invoke a shadow— another cliché, right?. But they’re standing up, which means reflection (if the surface is at all reflective). Again, these interfaces mimic natural design patterns, and carry with them the same real world functional qualities. I might argue that the concept of affordance, while typically associated with more directly actionable things (like buttons), would also apply to this ‘styling’ decision, given my views on how aesthetics— for information or style— contribute to function.
In this sense, I don’t see the use of a reflection as a trend, but rather a small part of a steady, longer-term progression in interface design. Albeit one that could stand to be refined and served up in a variety of ways— different reflections for different surfaces, for example.
But, consider this: Can a visual element become so trite that the ‘Ugh, here we go again’ response overrides our natural, biological response? Can we reach a point where it is ‘classier’ to not invoke a reflection or glossy surface? I start to think perhaps so, that we can, through overuse, create a learned response that overrides our natural response.
And then I waffle on that position.
Spending just a few minutes on a photography site such as Strobist makes me reconsider this position. Skilled photographers use lighting to accomplish a particular effect, or communicate a particular tone. Watch the end of this video on lighting (about 6 minutes in), and consider our natural response to the different lighting setups. Harsh lighting suggests cheap (by learned association) or naturally suggests harsh weather conditions. Dramatic lighting can be a bit… ominous. Diffused lighting creates a smoother, softer effect. And so on. In a century of photography, our natural responses to lighting conditions haven’t changed. Don’t misunderstand me. Personal preferences for or against these treatments have come and gone. But the effect of these lighting treatments has not changed. And as an interaction designer, I am concerned about the effect of visual treatments, not the artistic merits. Aesthetics—whether through emotion or cognition— play a functional role in how easily something works for someone.
Still, a bit torn on this, I looked up the term cliché. While mostly used of phrases, a cliché is just about anything “that has become overly familiar or commonplace.” I think the intent of something being cliché is that it was original at one time. The first time someone used an expression it was quite charming, and it went downhill from there. But can we ever label something that is naturally occurring as cliché? Is the sun rising and setting cliché? Can the effect of a squat, boxy shape making us feel safe become cliché?
Or consider the reverse: Would we ever say making alert messages red or yellow has become passé? Or that we’re sick green meaning ‘go’ or ‘move forward’—let’s change all our green street lights to brown?
Using a trendy typeface, that might qualify as cliché. But how something is lit, meanings we associate with colors, imbued meaning in shadows and reflections— higher order cognitive patterns govern our response to the deign elements, and for that, they can’t be cliché.
Or can they?
Comments closed for this post.
The Super Bowl and Information Design?
Like a few other people I know, I watched the Super Bowl yesterday two weeks ago. Unlike a few other people (okay, everyone), what intrigued me most was not the game (nor the commercials, this year), but the game’s ‘ScoreBar’. Yes, this:
A little background:
So that you know where I’m coming from: I am not a red-blooded, meat-eating, football-watching American. I do tune in once a year for the Super Bowl, but more for the commercials and the halftime show. And because I feel it’s my duty as a citizen of this fine country. Lest I be lynched, my attitude (and aptitude) has changed over time, as I’m starting to appreciate football—just a little. In fact, this year, I was the first one to call my dad to discuss the New England Giants upstart (he was surprised by my call, to say the least). So football, not my thing. One of the things I do get excited by is good information design. And I was fascinated by the latest incarnation of the ScoreBar (anyone know what this is really called?).
What’s the big deal? the ScoreBar contains all the vitals we need to stay in the know. So what? Here’s what I saw:
Efficient delivery of information
For starters, did you notice the persistence of the information. In years past, we’ve frequently seen information appear (and disappear) at random times. So, someone passing through the room might have no idea what the latest score is. Or, if the game is not in play, who’s got the ball, how much time is remaining on the clock, and so on. Typically, there’s only so much real estate you should allocate for this information, and with team logos and such, it’s easy to see why this information has been served up in a revolving fashion. Not so with this year’s Super Bowl. Everything you need to know (stats wise) is always displayed, in a compact fashion that doesn’t distract from the game.
One clean bar. All the information you need.
Clear information hierarchy
One of things that drives me nuts is when there is no thought put into a navigation schema or things are thrown up with no reason. Not so here. There is a clear time-based sequential hierarchy:
The ‘hierarchy’:
- the NFL on Fox logo is seasonal
- the teams playing each other (and the score) are for the duration of this game
- time remaining in this quarter lets you know where we’re at within this game
- these are followed by different kinds of real-time information, most often being the current down/yards to go but also including time-sensitive information such as time outs remaining, touchdown, or flag
- ...and there is the Super Bowl 42 identification
Two quick comments:
First, the Super Bowl identification should technically follow the NFL Fox logo, but that would result in a visually unbalance presentation, which gets into visual considerations. Positioning this on the far right balances things out aesthetically, and allows the vital information to be centered on the screen.
Second, this design favors the utilitarian communication of information over unnecessary graphics or visually interesting layouts. Contrast this clean, ordered layout with versions from previous years (or other countries):
Subtle visual indicators:
You know at all times who has the ball. The indicator? A simple bar above the team with the ball:
Though not as iconic as the familiar football icon, this is just as effective at conveying this information. And more efficient.
Context aware:
In the UX world, we put far too much of a premium on consistent (read: immutable) interfaces. In contrast, I’m intrigued by things like adaptive, conversational interfaces or rhetorical navigation, things that change in the moment. Those thoughts apply in this situation, to the presence of the ScoreBar— it’s only there during normal game play, when it’s needed.
During instant replays or quick interviews, it disappears.
There’s a clear pattern to when it is present and when it is not. Again, contrast that with previous years when you might have to wait on some random interval to see the information that should be displayed at all times.
Context dependent information
Real time information is incredibly context dependent: seconds left before play, down/yards, number of time outs, flag, and so on.
The interesting thing to note here is that this kind of real-time information is relevant for a moment, and then updated with new information. You don’t need to see multiple pieces of real-time information at the same time. This follows the time-based hierarchy I described above.
Color is used to communicate
And if all that wasn’t enough, notice the nice change in background color to signify critical events:
Obvious (or understood) information is removed
With information design, what’s not there is as important as what is there. Too many projects suffer from multiple stakeholders who all believe their bit of the world needs to be represented, in the manner they would like. Notice here that someone (effectively) convinced the teams marketing departments to not only drop the team logo, but also abbreviate the team names. This removes the gratuitous (logos) and removes the obvious — complete spelling of the team names. From a ‘user’ perspective, it can be reasonably assumed that most folks will know the names of the two teams playing each other.
Visual design is aesthetically pleasing
The ScoreBar is not unattractive. There’s some subtle gloss on the bar. Some light 3-D effects. But subtle visual treatments. I mention this only because there is a perception that good information design comes at the expense of being visual interesting—that information design is boring. Perhaps, perhaps not. Whether or not an unnecessary, gratuitous use of graphics can, at the expense of communicating information, actually create an overall greater experience— I’ll save topic for another day. I just wanted to comment on the fact that bar is nicely designed, graphically.
So what?
The truth is, really effective design should leave people wondering what the big deal is. Here’s the irony, clients expect things that cost lots of money and take lots of time to seem like they did. To look complex or shiny. But the really great designs, the ones that break through and solve the real problems, will often be the most underwhelming. If there are lots of fancy bells and whistles and animations, be very concerned. That’s probably novelty. Not good design. Look at the iPod, basic box, right? However, the simplest designs are often the most difficult to design. How many sites get the basic things wrong? I love this quote from John Maeda.
To make what appears to be less can sometimes be more work
To truly appreciate the elegance of this bar (and why I spent far too long writing this post), you’d have to contrast it with the last 40+ years, where we’ve had everything from random displays of information to gratuitous visual noise that began to look like an all day news broadcast, complete with scrolling marquis and unnecessary logos.
I think someone got it right this year.
Comments closed for this post.