Dustin Larimer

Monday, March 9, 2009

“Flow” is a big deal in the UX world.  Everyone wants to create it, but what kind of flow, exactly?  I believe there are two distinct types aimed at achieving the same effect, only on much different levels.

Sooner or later we all have the privilege of witnessing a comrade throw down rock solid rationale to support a design decision or refute a client request with a fundamental qualifier: “I planned it this way because I want it to flow.”  When the words hit my ears my mind immediately performs a Pro Tools style punch-in edit with “I did it this way because I’m married to this draft, and I have way too much heart invested in this thing to fool around on her now.  In fact, anything else would just be an inadequate, diluted version of my baby and if I can’t have her then no one will.”  Let’s ignore the fact that he is showing the first signs of taking the project hostage.  The point I want to focus on now is his rationale - flow.

Flow is a big deal in the UX world, and one that all involved have a stake in.  Creatives are crazy about getting their flow on.  On a pure word usage (and misusage) basis, “flow” is right up there with other industry favorites like “context” and “2.0”  Flow is much more complex and therefore much easier to misuse.  We all want to create flow, but what kind of flow, exactly?  I believe there are two distinct types aimed at achieving the same effect, only on much different levels: micro-flow and macro-flow.

Micro-flow vs. Macro-flow

Micro-flow is simply positive user momentum through the details of a task.  It is the result of properly leveraging the core variables of graphic design - contrast, balance, repetition, etc -  to facilitate an intuitive, uninterrupted experience.  Text size and color, gradients, animation, accents and icons, borders, line height and white space all work together to make or break the success of a user experience.

Macro-flow, on the other hand, exists above the details.  Though fairly dependent on the success of micro-flow, macro-flow is positive user momentum throughout the entire undertaken process.  Jim Ramsey, lead designer behind the Movable Type publishing platform, wrote a great article for A List Apart’s 250th issue last December dealing with this very issue.  In the article, he cites research conducted and published by Mihaly Csikszentmihalyi in a book titled “Flow: The Psychology of Optimal Experiences.”  To summarize the ideas proposed by Jim, consider the following excerpt:

Flow, as a mental state, was first proposed by psychology professor Mihaly Csikszentmihalyi and is characterized by a distorted sense of time, a lack of self-consciousness, and complete engagement in the task at hand.  How do we create sites that inspire that feeling? Well, it starts with a site that solves a challenging problem and is complex enough to require a certain amount of learning by the user. The goal should not necessarily be to create a simple site. The goal should be to create a site that feels painless to use no matter how complex it really is. Jim Ramsey, A List Apart Contributor

While I recommend reading the article yourself, allow me to relate what I have taken from his writing. The following four guidelines laid out in Jim’s article are adapted directly from Csikszentmihalyi’s book, and paint a clear picture of how to create that feeling of flow in the user experience. Rather than rehash these ideas into a bunch of romanticized idealist bologna, I’m going to adapt them directly towards creating the ideal product page for a Fortune 100 financial institution, as prescribed by Mr. Csikszentmihalyi.

Set Clear Goals

The first step in designing for flow is to set clear goals for your users. It’s important to create both an overarching goal as well as smaller, incremental goals. Goals help users understand where they’re going and each step they’ll take to get there. Jim Ramsey, A List Apart Contributor

Product pages should be the most interactive, technologically intensive and engaging screens a user ever sees on the public pages of any bank’s site. Take a look at one of Adobe’s product pages, and count the coolness with me:

1. Big interactive demo that shows how this product achieved booyah for another customer. (plus a link to hear the whole story)
2. Dynamic overlays that break down confusing product edition distinctions with “compare editions” and “help me choose” tools. These tools help reinforce the brand by making the value personable. Pictures of happy people don’t do this because we’ve trained web users to expect that.
3. A left column section answers questions that are barriers to purchasing: “What’s included?” - “Why should I buy?” - “Why should I upgrade?” - “What are my options?” – Again, linking to helpful tools mentioned in #2.

“Yeah, but Adobe sells software to the 20-35yr old artsy fartsy demographic, and we sell financial products that have to appeal to anyone and everyone.” Anyone who is in the market of making a sale, closing a deal, or gaining a new member faces the exact same consumer obstacles: “What’s in it for me?” – “Why should I buy?” – “Why should I switch?” – “What are my options?” Adobe does a wonderful job of tackling these questions head on with quick, concise answers rather than sneaking around the issue with craftily placed keywords. The goal isn’t to neutralize questioning, the goal is to acknowledge a question and answer it as quickly and completely as possible in a tone that excites the visitor’s reason for shopping in the first place.

Give Instant Feedback

Once users understand what they can achieve via the site, they’ll want to start making progress towards realizing their goals. It’s the job of the site to provide the necessary guidance so that the user feels they are actively achieving them. Jim Ramsey, A List Apart Contributor

I would love to see an investment product page with a calculator that shows me what an initial investment of $3000 really means in 7 years. Don’t just show me what it has done in the past. That’s only half the picture. What’s really in it for me? Let me take it for a test drive. Give me something to get excited about. The last generation was ok with “trust me trust me” statistics, but my generation needs illustrated potential.

Adobe’s “Which Edition is Right for Me?” tool is a perfect example of this. It’s a quick questionnaire that filters through the different programs offered in each edition and gives a few options that will let me get the job done. I see the progress in real-time and the filters are written in plain English. “What do you want to do? Animate 2D or 3D objects? Design vector graphics for print? Import and organize images?” Financial Assessment tools are incredibly helpful in making recommendations like this, but they belong on the actual product pages – where new users need it the most – not buried away in an obscure members-only “resources” section. What a great chance to draw in members - a free quick analysis that demonstrates what a few of our products would do for you over a given period of time.

Maximize Efficiency

Once a user becomes comfortable with a site, they’ll want to start using it more efficiently. When they’re experiencing flow, users want to work more quickly and want the site to feel more responsive. Jim Ramsey, A List Apart Contributor

Nothing kills enthusiasm faster than going into a task anticipating that limitations X, Y and Z are going to be right where they were the last time you rolled through. Fortunately, however, we are able to develop simple routines that help us finish the task faster than the time before. Now imagine X and Z don’t exist. I wouldn’t say there would be greater enthusiasm to take on the task, but there certainly wouldn’t be less enthusiasm, and a neutral impact keeps the playing field level so other features can score the points. We need to treat these snags and disruptions like absolute deal breakers. Financial institutions are great at building huge sites with many different objectives, and our frequent/power users need the flexibility and freedom to find their own rhythms and solutions.

Here is a great observation by Andrew Hunt, coauthor of The Pragmatic Programmers, taken from chapter 3 of 37signals’ book “Getting Real.”

Emergence is one of the founding principles of agility, and is the closest one to pure magic. Emergent properties aren’t designed or built in, they simply happen as a dynamic result of the rest of the system. “Emergence” comes from middle 17th century Latin in the sense of an “unforeseen occurrence.” You can’t plan for it or schedule it, but you can cultivate an environment where you can let it happen and benefit from it.

A classic example of emergence lies in the flocking behavior of birds. A computer simulation can use as few as three simple rules (along the lines of “don’t run into each other”) and suddenly you get very complex behavior as the flock wends and wafts its way gracefully through the sky, reforming around obstacles, and so on. None of this advanced behavior (such as reforming the same shape around an obstacle) is specified by the rules; it emerges from the dynamics of the system.

Simple rules, as with the bird’s simulation, lead to complex behavior. Complex rules, as with the tax law in most countries, lead to stupid behavior. Andrew Hunt, The Pragmatic Programmers

What a brilliant observation. Let’s give our users basic, fundamental financial tools and let them show us (or each other) how to use them.

Allow for Discovery

Once a user has begun to work with maximum efficiency, there’s a chance that they’ll feel less engaged and grow bored with their experience on the site. In order to avoid this, you should make content and features available for discovery. Jim Ramsey, A List Apart Contributor

While an efficient experience is absolutely vital, it cannot sustain itself. Absolute efficiency leads to absolute boredom. Community-driven content has posed a route around this brick wall. News content sites like CNN and BBC use community- and stat-driven content like “Most Popular” and “Most Emailed” to give users a stream of content that is always fresh and worth checking out.

I have experienced this recently effect with Mint.com. First of all, I absolutely love this site. Mint does some incredible stuff and it’s totally free. It imports all of your financial data, parses it into categories, observes and compares historical and current trends over given periods of time, and charts your financial activity on the fly. I highly recommend checking it out. You will be amazed at the transparency it offers and the speed at which it does so.

Then, you will disengage. The site will continue doing what it was designed to do: import your data, crunch the numbers, send you alerts and reports, and so on and so forth. But the site doesn’t show me anything I don’t already expect to see. It’s not offering new, interesting perspectives of my activity. It’s not adding new features or gadgets or complexity (not that I’m advocating gadget-overload, because I’m vehemently against it). It’s just not blowing my mind anymore, and as a result I’m not logging in too much these days. What was at once an inspiring UX achievement (and an hourly addiction) is now just another link in the bookmark bar. Oh, what a narrow, slippery slope.

Let your users bring their imaginations into the equation. Let them set goals and actually preview those goals becoming reality, then get out of their way. Give them everything they need and nothing they don’t. Flow is so much more than getting the warm fuzzies from the way a page is arranged. It’s not an explanation for modal windows and soft animation, and it doesn’t happen in an IA. Flow is the entire experience. It’s a state of mind. Flow is the result of every aesthetic, technical and logistical decision that you make in the planning, design and implementation of your project, and it should be preserved and practiced as the fundamental principle of the UX discipline.