Important Dialogue

You hear what I'm saying twinkle toes?

There are many exclusive conversations going on in the world. Making sense of these conversations can be intriguing however may not be the most productive and satisfying process when you have a specific goal or specific information you would like to retrieve. Many interfaces often speak this 'I'm-a-computer-do-it-my-way" language, without introducing a visual language and workflow that maintains a holistic and ergonomic view of people's goals, strengths, and weaknesses. And the way you build interfaces that engage and speak people rather than speaking computer, isn't putting make-up and jingle bells on yesterday's interface through wiz-bang graphics or merely adding features. Interfaces should maintain clear intentions with a non-exclusive language that stays true to their audience.   

Put these methods into practice:

  • know how to dialogue with people, as people and not computer users (Donald Norman also has recently been advocating this. Word usage is important)
  • stay abreast of capital (money-making!) design decisions that speak people
  • embrace the cross-pollination of ideas. Since people are everywhere, take advantage of learning from new fields you don't frequent. 

In a design nut shell, this is about creating interfaces people love to use. When you see something you love using, seek to understand the fundamental reasons why that is so you can implement these in the future. Often you'll find its the culmination of many design decisions creating a consistent language people understand and love. 

Let's put this into practice by looking at a how potentially foreign information space complimented a workflow for people that is more natural and less exclusive. Hopefully, as we dissect a few notable design decisions, you'll be more comfortable with identifying and repurposing some fundamental principles. Adobe Lightroom 3 Beta is a professional photo editing program I downloaded recently. I noticed the Adobe team touted an improved "Import Dialogue box." Since, generally, all import dialogues seemed to be created equal, I was interested in how they handled this process. 

Old Import Dialogue interface:

Click on the images below to take a look at the redesign and my annotations on it, and then I'll describe how certain annotations support fundamentals of improved information design that can be appropriately applied on future interfaces.

Lightroom 3 Beta Import Dialogue - minimal, basic view: Lightroom 3 Beta Import Dialogue - maximized, advanced view:

Without being exhaustive, let's look at some culminating design decisions associated with general design principles. To clarify, right now we are training an informed design language that will aid us in creating future interfaces with less fluff and more decisions truthful to the content and workflow.

Content promotes context.  The content medium for information / data in this application is photography, and this part of the photography workflow is specific to importing, therefore, a structure is laid intuitively that matches this context.  Concept supported by: flow of the header elements, dimming background, dark / desaturated palette that compliments the overall goal of focusing on altering the pixels of your photography.

Attention balance.  Build a meaningful hierarchal language that emphasizes the content where decisions are made. Hierarchy of text styles or graphics match hierarchy of function or ramifications. Concept supported by: header text specifying the decision is brightest, purposeful icons, inverted preset tab, vignettes and blurring, highlighted mouseovers.

Intention balance. Some interfaces may only need to support casual or advanced use, but this process specific to importing photos now supports both, making it the most beneficial upgrade feature. Interfaces should support peoples' intentions and maintain context while seamlessly transitioning between them.  Concept supported by: expand / contract dialogue arrow, minimal information preview of selected photos, minimized and advanced views.

How is this interface now less exclusive? As people dialogue with this portion of the software, they have fewer hoops to jump through to accomplish the same goals and the new process preserves the context of the content and workflow. Naturally, there are many design fundamentals to build a language around. It can take some work making sense of everyone's tidbits, top-ten lists, quotable quotes, and pattern libraries, but with a little intentional thought we can get more proficient, personally and collectively, at a common language that moves design forward in a methodical, tangible nature.

Start small. Identify design decisions out there grouped in these three fundamentals to get you started and post examples for the Juice community love if you feel so led. It will sharpen you toward purposeful reasoning on the drawing board and during concept presentation time.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

0 comments | Add a comment

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment






Designing Great Dashboards - Part 3

Several weeks ago we published Part 1: Foundation of our Guide to Creating Dashboards People Love to Use, and a couple of weeks after that we released Part 2: Structure. Today, we're making Part 3: Information Design available for download. In this part, we provide practical tips for putting information on the page in a way that communicates effectively to your audience.

If you've already registered, you will be receiving this volume automatically via email. However, if you've been waiting for "a better deal", you're in luck. Right now, you can download all three parts for FREE! That's right, free. As in $0. And we're waiving the shipping and handling charges as well. Just click here to register and get your copy today!

(For those of you who are paying attention, we didn't actually charge for the first two parts either. They've always been free, but sometimes folks need to feel like they're getting a good deal. If you really want to give and get free stuff, check out freecycle.org - through it's "reuse" charter, it helps our environment by keeping good stuff out of the landfill.)

Thanks again for reading!

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

2 comments


October 15, 2009
Scott said:

Really useful content. Thanks a lot.


November 22, 2009
Rahul said:

Thanks for sharing the content. Really useful.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Designing Great Dashboards - The Book

It's been a busy summer for us here at Juice with more and more companies asking us to help them take their data and create dashboard applications that help them get more done. While working on these accounts, we've seen an ever increasing interest and awareness in proper dashboarding techniques.

We believe that the best software is the software that people like love to use. Typically they “love it” because it helps them get their job done quicker and/or better. This can be for any of a number of reasons, but it’s great to see that buyers are becoming less satisfied with junky information applications.

So, we've decided to share the wealth. We've decided to compile many of the design tips we've harvested from our client projects over the years. These learnings are collected into a 3 part paper entitled A Guide to Creating Dashboards People Love to Use (catchy, isn't it?). We've written this to help people who want to create information applications that break out of the horrible constraints of the industry-standards we've all seen and have been disappointed with.

We've made this paper available to folks who we've done business with or who have registered with us in the past, but we didn't want our readers to be left out. If you didn't receive an invitation to download the paper (maybe because you're one of those lurkers out there -shame on you ;-) now's your chance to be part of the "in crowd". If you're interested, register to download your own copy of Part 1: Foundation. For those who register, we'll be mailing Parts 2 (Structure) and 3 (Information Design) over the next few weeks.

We think you'll find it really useful and hope you'll let us know how it helps you communicate your information more effectively.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

5 comments


September 12, 2009
Bud Wood said:

I suppose that it's "nit-picking", but it seems better to follow grammatical rules. Specifically, my replacement for your 1st sentence in your 4th paragraph is, "We've made this paper available to folks with whom we've done business or who have registered with us in the past".

At any rate, you do communicate and my compliments in general for the technically astute information which you provide.


September 16, 2009
fred said:

Just found your very interesting dashboard design document. On page 8, you are quoting "Antoine de Saint-Exupery", but misspell his name as "Antoine de Saint-Exuper"


December 18, 2009
Felipe said:

Great article. Thanks a lot for sharing this. Nice tips on structure, design principles, charts, fonts, colors, and, of course, basic concepts.


January 7, 2010
Emmad said:

I have not read your article yet, however, the words "sharing the wealth" was an eye catcher for me.

Thank you for the positive spirit of wanting to share.

You see, the smart and fortunate should indeed lend a hand for others.

Regards,
Emmad


February 2, 2010
Nagesh said:

Your three part document provides good tips for dashboard design. Useful for companies which cannot afford to consult professional designers. Thank you for sharing.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Think Like a Designer

I'm a big fan of the work they're doing over at Duarte Design. Great, practical, motivating presentation design practices. Rarely do I come away from their site un-inspired about something.

Recently, Nancy Duarte participated in an interview with Jimmy Guterman of the MIT Sloan Management Review, which resulted in the article "How to Become a Better Manager By Thinking Like a Designer" (sign up is required). The quote that summarizes the article is:

“Often managers… rely heavily on data and information to tell the story and miss the opportunity to create context and meaning…leaving lots of room for interpretation, which can spawn multiple cycles and limit advancement.”

It's the same with information presentation. A focus on design at the beginning expands the ability to deliver context and meaning. But before you discount design as a concept for well, you know, "those artsy types", keep in mind, as Nancy puts it:

"Design is... crafting communications to answer audience needs in the most effective way."

What this means is that the more you focus on design, the more you'll "speak" to your audience - which means you'll be more effective with your data presentation. It's about the audience, not you.

Here are some dashboard design principles that we use (with a few enhancements from Nancy's interview) to make sure we become better information presenters by thinking like designers:

  • Unity/Harmony - a sense that everything in the application belongs together, resulting in a "whole" that is greater than the sum of the parts. All the elements complement, augment, and enhance, as opposed to distract and detract from each other.

    Takeaway: Identify the problem you're solving and make sure every element you place moves you closer to answering that question.

  • Proximity/Hierarchy - Things that are near each other are related. Hierarchy demonstrates relationships between items where appropriate. Proximity and Hierarchy both provide tremendous contextual cues leading to better understanding.

    Takeaway: Place related things near each other and separate unrelated things. Remember, dogs and cats don't play well together.

  • Clear Space - White space in information display is very important and too often overlooked. Maximizing dashboard real estate means creating places for the eye to "rest" so that the non-white space is more effective.

    Takeaway: Use white space in conjunction with proximity to help your viewers follow the story the information is telling.

  • Balance - Dominant focal points either give the viewer a sense of comfort (balanced) or spur them to action (unbalanced). Nancy points out "that does not mean all things must be in balance all the time. It is often effective to jar people and thereby effect a change in behavior or thought. Be aware, though, that once something has been thrown out of balance, it is the nature of the universe to find a new state of equilibrium."

    Takeaway: Make sure the primary focal points in your information presentation tell the viewer either "it's ok, move on" or "you need to do something."

  • Contrast - Contrast creates interest to focus attention or highlight differences. Again quoting from the article "The value of contrast lies neither in the black nor the white, but in the tension between them."

    Takeaway: Use Contrast to shift Balance so the viewer focusses and acts more quickly.

  • Proportion - More important elements deserve more real estate. It's tempting to want to present an unbiased view of the data. However, as Amanda Cox of the NYT graphics department stated at the OEDC "Seminar on Innovative Approaches to Turn Statistics into Knowledge" "data isn't like your kids, you don't have to pretend to love them equally."

    Takeaway: Increase the size and emphasis of the values and decrease the size of labels and you'll find dramatically better impact and speed of understanding.

  • Simplicity - Stay focused on the specific fact on which you're trying to shine light. This sometimes means showing less data and a simpler display. I think Garr Reynolds sums it up best: "Don't confuse 'simplicity', which is hard to achieve, with 'simplistic', which is easy and usually lacking value."

    Takeaway: Help your viewers focus on what's really important by pointing them to the kernels and not the chaff.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

2 comments


July 17, 2009
Nancy Duarte said:

Thanks for the shout-out Ken! We admire your work too.
Nancy


July 31, 2009
Viajero said:

Great article and great work. I found an article that may be of interest too http://www.ideo.com/news/item/article/design-thinking1/

rgds

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Breaking Free of the One-Page Dashboard Rule

Conventional wisdom says that an executive dashboard must fit on a single page or screen. The argument hinges on a pair of assertions about this constraint: it provides necessary discipline to focus on only the most critical information; and it enables the audience to see results "at a glance."

The "discipline" argument is made forcefully by Avinash Kaushik (among others).

"if your dashboard does not fit on one page, you have a report, not a dashboard...This rule is important because it encourages rigorous thought to be applied in selecting the golden dashboard metric."

I buy wholeheartedly into the value of constraints. However, defining a useful constraint as a "rule" assumes there is only one viable means to achieve the desired ends. Confining visual real estate is but one way to focus your thinking. There are others: How about limiting yourself to five key measures? How about demanding that a dashboard can be understood in 3 minutes by a new user? How about only presenting exceptions?

The argument that a one-page dashboard necessarily provides an view of your business "at a glance" is more self-deceiving. Well-known information-ista Stephen Few uses this rationale in his definition of a dashboard:

A visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance. PDF

I check my speedometer "at a glance". I "glance" at a Heads-up Display (HUD) on a video game showing how much energy my character has remaining. These displays communicate but a single number that is already hovering on the corner of my consciousness. If we follow this advice literally, we'd show:

Acme Widgets Dashboard

Assuming one page gives you quick, easy comprehension is like assuming all red cars are fast. That's simply not true. It must be duly noted, however, that all red cars are cool.

Stretch Trabant image courtesy jetow@flickr.com

More often, people follow the one-page dashboard rule off a cliff like these folks.

dashboard

There are real problems with this definition:

Dashboard definition

  • In reality, the one-page rule leads to jamming information into the available space.
  • When everything must fit on a page, there isn't room to describe the connections between information or fashion a story from the data.
  • A good dashboard raises more questions than it can answer. Sticking to a static piece of paper limits any ability to find or present explanations.

Don't get me wrong: A one-page dashboard is often an effective way to create "a visual display of the most important information needed to achieve one or more objectives." But with streaming video, interactive visualizations, podcasts, Kindles, smart phones, video projectors...is it really necessary to limit ourselves to 8.5" x 11" piece of paper. Or might we open ourselves up to some more creative solutions to sharing the numbers; a short movie, a few slides, a short text narrative, or 140 characters.

I'd like to use this definition instead and will be back soon with some ideas on how to make your dashboards clear and concise.

Dashboard definition

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License. All source code is released under a BSD License unless otherwise specified.

10 comments | Show all comments only the last 5 are shown


May 11, 2009
Jose said:

I suggest that "dashboards" as defined by Few is only one of many views necessary to tell a story: it answers the 1) "What" - as in "Status, Trend/Change or Contribution ". we also need 2) support evidence "Who, When and Where" (Details) and Analysis 3) "Why and How".

In general, even with just a few metrics, I find that explaining just "what" is challenging enough in one page. Think of the financial page of a newspaper: it demands a combination of graphs, tabular info and narrative text. So when creating an information display, I try to organize different views according to their purpose - and make them display/print in one page.

The opportunity that computers give us over paper is the ability to link all different views with common filters - so that the user is able to iterate formulating and answering questions in the display (cycling through Schneiderman's information seeking mantra as many times as needed).


June 23, 2009
Chris Curran said:

Good points Zach, especially the one you make in the comments regarding understanding audience for a dashboard. In my experience, senior business leaders don't have the time or attention span for a desktop-based UI dashboard. So paper and/or blackberry/mobile must be considered, at least for the "overview first" level of information.

More on my blog at http://www.ciodashboard.com/


July 8, 2009
Stephen Few said:

Zach,

Your definition differs from mine because we seem to be talking about different things entirely. I define a dashboard as an information display that is used to "monitor" what's going on. You are referring to a display that is used for data analysis or telling a story (two very different forms of data presentation which can't be displayed in the same manner).

A display that's used for regularly monitoring what's going on in an effort to maintain situation awareness requires a much different design than one that's used for data analysis or storytelling. When you're monitoring information for situation awareness, you must see the pieces on a single screen or page to make all the necessary connections and comparisons that are needed to build the big picture in your head of what's going on.

If we want to cut through the confusion that exists regarding proper information display, we must be careful to define our terms carefully and declare our purposes clearly. Multiple pages or screens often work well for telling a story, which much be delivered one piece at a time in the proper sequence. Multiple screens can also work well for analysis as your focus changes from the pursuit of one question to another. Multiple screens do not work well when you need to make comparisons and connections, however, because if the things that must be connected aren't in front of your eyes at the same time, you're forced to rely on working memory, which is extremely limited. In other words, the restriction to a single screen in this case is not arbitrary, but based on scientific evidence of what's actually required to do the job.


July 17, 2009
jeffrey weir said:

I see there's a good thread that covers some of this at http://www.perceptualedge.com/discussion.htm under New Topic Proposals/Nomenclature for visualization, dashboards, analytic tools, etc.


July 18, 2009
Zach said:

Stephen,
I can appreciate the distinction between a monitoring tool and an analysis tool. However, I don't think that fully explains our difference of perspective. Even in the case of a monitoring application, a bunch of factors need to be simultaneously optimized to ensure it communicates effectively (e.g. readability, layout and structure, connections and comparison, information design). The one-page constraint elevates the importance of comparison above other factors that have significant impact on the overall success of the dashboard. The constraint has real impacts:
* Tiny fonts and graphics to squeeze in all the information
* Inability to lay out the information to reflect the structure of the business (i.e. show connections)
* Inability to position graphics in ways that support comparison
* All the relevant information has to be shown at once, rather than gradually revealing detail as the user expresses interest.

It is as if you told me that the goal of a new car model is to achieve 40 miles per gallon of gas. It is a fine goal, but it entails sacrifices to comfort, fun, and innovation. You'll never end up with an electric car.

Your name

Email (optional, will not be shared)

Type the word "juice" (required to confuse the spammers)

Your comment


Add a comment





Earlier writing