The article points out that some limit the scope of term. Scott Berkun, author of The Myths of Innovation (see my review), reserves “innovation” for civilisation-changing developments, like electricity and the telephone. This avoids the dillution of the term, which has already become the buzzword du jour.

In a broader perspective, some consider any change to be an innovation. Etymologically, this is acceptable: the Latin root “innovare” simply means to renew or change.

To distguish between these two extremes, some definitions view innovation on dichotomous scale. For instance, Michael Porter talks about “continuous” and “discontinuous” technological changes;  Tushman and Anderson distinguish between “incremental” and “breakthough” innovation; Abernathy and Clark refer to “conservative” vs. “radical” innovations; and Clayton Christensen shows the difference between “sustaining” and “disruptive” innovations. While this helps differentiate types of innovation efforts, viewing innovation along one dimension doesn’t tell the whole story.

To clarify the situation, I’m proposing a 2-dimensional picture of innovation:

• The y-axis indicates the degree of technological progress an innovation brings with it. Moving from low to high along this line indicates improving existing capabilities, services and products.
• The x-axis shows the impact an innovation has on the market, also from low to high. This usually entails new business models or reaching underserved target groups.

This gives rise to four distinct zones of innovation:

• Incremental innovations involve modest changes to existing products and services. These are enhancements that keep a business competive, such as new product features and service improvements.
• Breakthrough innovation refers to large technological advances that propel an existing product or service ahead of competitors. This is often the result of research and development labs (R&D), who are striving for the next patentable formular, device and techology.
• Disruptive innovation is a term coined by Clayton Christensen. In his best-selling book The Innovator’s Dilemma he shows that disruptive innovations “result is worse product performance, at least in the near-term. [They] bring to a market a very different value proposition than had been available previously” (p. xviii).
• Game-changing innovation transform markets and even society. These innovation have a radical impact on how humans act, think and feel in some way.

My proposed view of innovation isn’t original. It’s directly influenced by a model developed Wheelright and Clark (1992). This model is mentioned as a way to prioritize and plan for innovation in the book The Innovator’s DNA. Still, I believe my approach improves their model and sheds new light on some important differences in our discussions and efforts around innovation.

Chief among these is the confusion between “breakthrough” and “disrputive” innovation. Scott Anthony et al. point to this common misconception the book The Innovator’s Guide to Growth (see my review). They write:

The word disruption itself is loaded with alternative meanings and connotations, many of which run counter to the precise pattern Christensen identified is his original stream of research. As the concept has seeped into the mainstream, this language “disconnect” has led to confusion, misunderstanding, and the occaisional misallocation of resources… The error people make most frequently is assuming that a great leap forward in performance is synonymous with disruption.

Breakthrough innovations promise significant improvements in performance compared with existing products. Examples include the Airbus 380, Nokia’s flagship Lumia 900 phone and Microsoft Office 2007. To contrast, disruptive innovations address underserved market needs and segments with products that are more convenient to access, easier to use, and cheaper to buy. Examples include budget airlines, plain vanilla $25 mobile phones, and “good enough” web-based word processing software.

The value of viewing different levels of innovation along two dimensions, as in the graph above, is that you can plot different trajectories of innovation that keep breakthroughs separate from disruptions, as needed.

What’s more, the above zones of innovation can better guide innovation efforts. I believe a good innovation program should balance attention to each zone. Each has a different purpose and requires a different strategy:

• Incremental innovations help keep a company in the game and provide short-term revenue.
• Breakthrough innovations can catapult a product or service well ahead of competitors.
• Disruptions usually entail a change in a business model, making them harder to implement. One strategy is to create a separate brand or company that operates at a lower level than its parent — perhaps more like a startup. (See my review of Xiameter, a sub-brand of Dow Corning launched to address the low end of the market.)
• Game changers transform markets. They instroduce new product categories, for instance, which can ensure long-term success for a business.

Of course the lines between each zone are blurry. And you can argue about the labels themselves. But it’s the logic behind the above graph that’s key here. I’ve found it helpful in explaining innovation to clients and hope you find it helpful too. I hope you’ll adopt my labels.

Please let me know what you think.

1. First, they illustrate various aspects of user behavior—actions, thoughts, and feelings, among other aspects of their experience.
2. Alignment diagrams also reflect a company’s offerings and business process in some way.
3. Finally, the areas where the two halves meet gives rise to touchpoints between customers and an organization.

This last part — the point of interaction — is particularly useful for describing cross channel experiences.

Designers having been mapping out the touchpoints in for cross channel experience in different ways over the past years. In his article “Connecting the Dots of User Experience” Gianluca Brugnoli showcases a simple, but very effective cross-channel diagram, called a touchpoint matrix (Figure 1):

Figure 1: Touchpoint matrix by Gianluca Brugnoli (See: “Connecting the Dots of User Experience“)

“The system is the experience” is a key notion behind his argument. We must think in systems when designing cross-channel experiences. Brugnoli concludes:

Helping to reveal the structure and the many invisible connections within an interactive system, the proposed model is not only an effective tool to analyze and design the user experience, but also can help us think about the user experience in a different way.

Brugnoli’s example follows some of the alignment principles I’ve outline previously, but not all. Absent are more details about the customer experience (thoughts, feelings, etc.) as well as business activities to support the experience. Still, it’s quite a handy tool.

In another example, Tyler Tate proposes a similar matrix in his post “Cross-Channel Blueprints: A tool for modern IA“, shown in the next image (Figure 2).

Figure 2: Cross-Channel Blueprint from Tyler Tate

Like the Touchpoint Matrix, above, this blueprint is focused on the channels themselves. Here, however, we see “Shared Assets” — an important addition that points to business-side activities needed to support the experience. So it’s closer to the alignment principles than Brugnoli’s approach.

In my experience, both of the above examples can fit into a customer journey map or experience map in their entirety without causing confusing or perceived complexity. That is, stakeholders and team members find it quite intuitive and useful to see a cross channel matrix as part of an alignment diagram.

Therefore, I’m advocating the incorporation of channel-based distinctions and information, such as a Touchpoint Matrix, directly in alignment diagrams. By doing this, you get not only channel-specific information, but you can also see how this aligns with both customer goals and business goals. In this light, alignment diagrams are a suitable tool for cross channel mapping and design.

———-

Learn more about alignment diagrams:

• Participate in my workshop at the IA Konferenz in Essen Germany, May 10 (1/2 day workshop, in German).

Read about alignment diagrams:

• “Alignment Diagrams: Strategic UX Deliverables” (presentation at Euro IA, Paris, 2010)
• “Alignment Diagrams: Focusing the business on shared value” (Boxes and Arrows, 2011)
• “Locating Value with Alignment Diagrams” (Parsons Journal of Information Mapping, 2011)
• “Principles of Alignment Diagrams” (Blog post on Experiencing Information, 2011)

IATV Radio: Show 011 – Four Shots

I’d like to follow up here with a few of the topics we covered in this post.

1. NAVIGATION

Jan asked me directly about changes in web navigation — or in navigation in general — that I’ve noticed since the arrival of the iPhone, in particular. For sure, Designing Web Navigation is not the most up-to-date book anymore. It’s 5 years old by now: an eternity in web years. Still, many of the principles of web design I laid out in the book apply.

But since 2007 I’ve been try to identify new navigation  patterns and capture them on my blog. Here ere are some relevant posts:

• Docking Navigation Bars – Web Navigation Trend
• Scroll-Activated Dynamic Menus – Web Navigation Trend
• Static Footer Bars – Web Navigation Trend
• Forrester (Re)Emphasizes Need For Good Web Navigation
• Liquid Information Navigation – A New Paradigm?

More importantly, I’ve been investigating and teaching faceted navigation quite intensively. See my extensive list of posts on faceted navigation.

There are many more important changes I’ve had on my radar as well, but I haven’t written about the yet.

2. ALIGNMENT DIAGRAMS

I’ve been presenting, teaching and writing about alignment diagrams for the last two years. See my presentation from the Euro IA conference on Alignment Diagrams as well as a full-length article authored by Paul Kahn and myself called “Locating Value with Alignment Diagrams.” Most recently I published an article on Boxes and Arrows simply called “Alignment Diagrams.”

As Jan pointed out, I’ll be giving a workshop on alignment diagrams at the IA Konferenz in Essen, Germany on May 10. You can sign up for the half-day workshop on the conference website.

In the interview, we talked about how alignment diagrams help UX specialist do what I call “swim upstream.” By this I mean two things.

1. First, we need to “swim upstream” in project timelines. Alignment diagrams really need to be done well before a project even starts.
2. Second, alignment diagrams speak to a broader set of stakeholders. To be most effective, you should try to target them to the highest ranking audience you can.

A related topic I didn’t mention in the interview is that of the “air sandwich.” This is a term Nilofer Merchant uses in her book The New How (O’Reilly, 2009). It describes the disconnect between the top and bottom layers of an organization. Alignment Diagrams can help here, too. Read my post on the “air sandwich” and alignment diagrams for more on that.

3. INNOVATION

If first got interested in innovation in reading the works of Everett Rogers’s and his diffusion of innovation theory. Since then, I’ve been reading, writing and presenting on various innovation topics. Here is a list of posts on this blog tagged with “innovation.”

Jan asked — and rightfully so — “why do we even need innovation? Why not just design and create great products that work?” It reminded me of a quote from Scott Berkun. I wasn’t able to cite the quote precisely in the interview, but I paraphrased it fairly accurately.

Here’s the full quote from Scott in an interview for UIE:

I think innovation is overrated. Customers don’t care about how innovative you are. They just want to be happy and satisfied. And that’s about good design.

The best advice I can give is to focus on people and their problems. Few great innovators worried about anything else. The fact that they found a new idea had more to do with their passion for solving someone’s problem than anything else. Innovation is a huge distraction these days. That’s one of the myths I hope people will understand how to dispel from reading the book or attending my seminars.

Strong words from someone who has spent years researching innovation. And I couldn’t agree more.

Thanks again, Jan, for having me on IA TV Radio.  

• Buy The Information Diet on Amazon.
• See the website for the book.
• Follow Clay Johnson on Twitter: @cjoh

Information Metaphors

Metaphors are than just rhetorical flourishes that make poetry sound prettier. On the contrary: linguists George Lakoff and Mark Johnson show us in their book Metaphors We Live By that metaphors we view the world through the lenses of metaphor. Metaphors underlie our basic conceptual understanding. They contend that:

…metaphor is pervasive in everyday life, not just in language but in thought and action. Our ordinary conceptual system, in terms of which we both think and act, is fundamentally metaphorical in nature.

When talking about how humans interact with information, a comparison with food and eating has been used in many cases.

The most notable example is Marcia Bates’ notion of “berrypicking” in information seeking. In her landmark article, “The Design of Browsing and Berrypicking Techniques for the online Search Interface” (Online Review, 1989), she likens finding information to picking berries in the woods. The metaphor is clear:

The berries are scattered on the bushes; they do not come in bunches. One must pick them one at a time.

Her conclusion is that search systems need to be flexible to accommodate berry picking behavior, characterized by evolving information needs and changing seeking strategies.

Similar to the berrypicking model, Peter Pirolli and Stuart Card’s theory of information foraging analyzes patterns in human information seeking. Their information metaphor is also clear:

We use the term “foraging” both to conjure up the metaphor of organisms browsing for sustenance and to indicate a connection to the more technical optimal foraging theory found in biology and anthropology. Animals adapt their behavior and their structure through evolution to survive and reproduce to their circumstance. Essentially animals adapt, among other reasons, to increase their rate of energy intake. To do this they evolve different methods: a wolf hunts (“forages”) for prey, but a spider builds a web and allows the prey to come to it.

Extending the metaphor, we can then speak of “information ecologies” and refer to seekers as “informavores.” The comparisons go on and on.

Based on information foraging theory, Jared Spool and his colleagues have popularized the notion of the scent of information. “Scent” refers to how well links and navigation match a visitor’s information need and how well they predict the content on the destination page. The metaphor is again provocative: information gives off a “scent” that “information foragers” follow to reach their intended destination.

All of these examples use metaphors to help us understand “information,” a conceptually fuzzy concept to begin with. The comparisons with food and eating make human information behavior more tangible.

A Diet of Information

In The Information Diet (O’Reilly, 2012), author Clay Johnson further extends the metaphorical relationship between information and food. Unlike the examples listed above, which primarily look at information seeking, Johnson focuses on how humans use information and the impact that has — both on individuals and on society.

In a nutshell, our current information diets are rather unhealthy, and they are getting worse. Johnson outlines his premise in the introduction:

What if a person’s native or learned abilities to process information sensibly could be warped by feeding junk into the mental machine? As we say in technology: garbage in, garbage out. We know we’re products of the food we eat. Why wouldn’t we also be products of the information we consume?

Johnson then compares obesity to poor information habits. The main cause in the rise of obesity in America is that fattening foods are cheaper and more abundant. Similarly, our information diets are making us info-obese: cheap, poorly-formed information is all around us.

Making the situation worse are things such as “content farms.” Massive content-producing facilities hire writers to churn out volumes of junk information at alarming rates. Sites like churnalism.com seek to uncover factually incorrect and blindly copied information.

But the modern information diet remains unhealthy, which has real social consequences. It distorts our sense of the world around us. Again, the author makes further comparisons, this time between production of food and the production of information:

The parallels between how our media has changed and how agriculture changed are obvious if you look closely: what happened to farmers is happening to journalists. What happened to our diets is happening to our news. And like with our food, there’s not much we can do about it: the draw of living with abundant supply is too strong, and too beneficial to fight. Instead, we’ve got to understand how to cope in a world with different rules.

So the problem isn’t one of information overload or rapidly spreading information technology. In fact, Johnson outright states that there is no such thing as information overload. Instead, we have to view the issue as one of information health. And just like addressing obesity, we need a different attitude toward an overabundance of cheap information. It’s our orientation to information that’s key.

Get With The Program

Johnson calls on all of us to have more responsibility with our information diets. He urges us to become “infovegans.” Thankfully, he gives concrete advice on what to do:

1. Audit your info consumption. Take active inventory of the types of information you consume and you basic information behaviors.
2. Consume locally. Sticking closer to the facts is a healthy part of an information diet. This can refer to physically closer information (like in your city), but also to information that you’ve become an expert on.
3. Reduce ads. Unsubscribe to newsletters you don’t read, and use services like Instapaper and Readability to remove unwanted ads from your content.
4. Seek diversity. Filtering out information that goes against your beliefs can lead to fanaticism in the worse case. Instead, challenge your opinions by seeking out a diversity of information, including content that poses contrary arguments.
5. Balance different types of information. Relying on populist entertainment-based information on TV is unhealthy. Instead, consume a variety of information — professional, cultural, local, and raw information — from a variety of sources.
6. Fine tune and revise info diet. Changing your information diet takes a conscious effort and dedicated training to achieve. Just like a weight-loss diet, you’ll have to fine tune your habits and consumption behavior.

The stakes are high. It’s not just about reducing personal stress or information anxiety. As Johnson points out:

The genocides in Rwanda were fed by hate speech on the radio. Hitler’s embrace of the new media of film empowered Nazism. Humanity’s darkest moments are the ones in which masses of people had the worst information diets…Rather, than focusing on issues, we’ve tribalized into a million little rights and wrongs. In Washington, our completely polarized electorate is distracted from serious, solvable problems because those problems aren’t salient or interesting enough for them to pay attention. What make for good politics doesn’t make for good democracy.

For sure, the flow of information and democracy have always been historically linked. John Adams recognized this connection 250 years ago and made the plea:

Let every sluice of knowledge be opened and set a-flowing.

Of course, at the time Adams probably didn’t foresee the problems of having too much poorly-written information. His was one of lack of access. Still, our attitude and relationship with information is central to both our personal and social well-being, as well as to having a healthy democracy.

Conclusion

The Information Diet is a fascinating book with engaging discussions and examples. Johnson’s writing is clear and lucid. The arguments are so well laid out they feel familiar and almost obvious on first read. It’s also supported with lots of relevant research and is thoroughly investigated. I recommend it for anyone who regularly consumes information — which means just about everybody!

In the end, remember: you are what you aggregate. 

In an article co-authored with Paul Kahn, we explain it this:

We propose the term “alignment diagrams” to describe the class of maps and diagrams that visualize touchpoints in a business process. Such diagrams are implicitly part of the current design practice. Thus our definition of alignment diagrams is less a proposition for a new visual technique than recognition of how various techniques can be seen in a new and constructive way. Alignment diagrams are constructed to reveal touchpoints and thereby contribute to the design and business process…It is the system of visual alignment that distinguishes this type of diagram.

Specific techniques for research and diagramming are important, of course, but it’s really the principles of alignment diagrams that are essential. Once you grasp these, you’ll find there range of potential ways to go about diagraming, including mental models, customer journey maps, service blueprints and more. You may even introduce variations on these standard forms or come up with your own.

The following is a list of core principles are at the heart of the alignment technique.

Alignment diagrams focus on human behavior as part of a larger ecosystem. They are NOT about product research (e.g., not about mapping out the workflow with a specific software program). As much possible, look at what your customers do in their normal lives or normal work environments.

Your customers “hire” your products or services to get a job done. An alignment diagram should focus on these jobs in the context in which they happen. Specifically, use customers’ goals and desired outcomes as a centripetal force for telling the alignment story. Show their pain points and barriers to overcome as well to enhance the narrative.

Paint a holistic picture with the diagram and then, together with your team, try to solve problems for customers. This will lead to opportunities for innovation and growth.

Alignment diagrams describe multiple facets of information on the customer and on the business sides of the equation. This is what the “alignment” part of the technique is really all about.

There are some common types of information to include on the customer side: actions, thoughts, feelings, goals, pain points and moments of truth are some of the leading things to include. There may be others depending on your situation.

On the business side, common elements include processes, actions and artifacts, as well as departments or roles involved. Channels of communication are typically relevant as well. In this respect, alignment diagrams help diagnose and plan cross-channel experiences.

Alignment diagrams expose touchpoints between the customer and business. The multiple layers of information shown in an alignment diagram (see Priniplce of Multiplicity) must come together to show where customers have contact with a product, service or brand in some way.

After determining and aligning the multiple facets of information, analyze the touchpoints. Start with simple SWOT analysis: how well does your business serve customers in each phase and for each touchpoint? Or give yourself simple school grades to see where you’re good and where you’re poor.

Beyond that, use the alignment diagram to prototype the customer experience. Walk through the touchpoints in order and examine the real-world artifacts customers would encounter. In this way you can use the alignment diagram to gain empathy for customers and put yourself in their shoes.

Alignment diagram show a composite view of behavior and processes in a graphical overview. It is the act of visualizing the alignment of various types of information and the touchpoints that makes value creation on both sides evident. A 10-page report with the same information won’t have the same effect. Stakeholders need to be able to take in the entirety of the interaction described in the diagram at once.

A single visualization also provides a compact and focused artifact to bring into a workshop. The diagram should be engaging, and a visual representation of customer and business activity helps.

Alignment diagrams should need little or no explanation. Anyone should be able to walk up to an alignment diagram and orient themselves quickly.

Note that visualization, while helpful, does not guarantee the simplicity needed for self evidence. You will have to work hard to reduce the information to only the salient points.

Alignment diagrams tell a narrative. If your user research data is rich, it will be challenging to tell a concise story. You’ll be tempted to include everything you found. Resist this urge and stick to the main plot. Self evidence is more important than an overload of details.

Alignment diagrams seek to address real-world problems and therefore must be relevant to a given business or organization. As a creator of an alignment diagram, this means you must thoroughly investigate and understand the goals, challenges and future plans your business partners have. The resulting diagram should fit seamlessly into their thinking.

In particular, strive to shed light on problems that are not transparent or difficult to see. For instance, a business may be looking to strategically expand into new markets. Let’s say a B2B provider wants to start selling directly to B2C markets, something it previously hasn’t done. An alignment diagram can help document the types of interactions the business would have with this new segment, and it would highlight the additional capabilities they would need to develop.

Alignment diagrams are firmly grounded in first-hand investigation and evidence. They are not made up or brainstormed in isolation.

Even if a company already knows a lot about its customer behavior, primary research must be part of your alignment diagram effort. Almost with certainty, you will find things previously unknown. More importantly, you will validate, deepen and strengthen the information included in the diagram with first-hand research.

If you want to learn more, I’ll be giving a full-day workshop on alignment diagrams on March 15, 2012 in London. This is part of UX Fest, a 4-day series of workshops run by William Hudson and myself. The workshops offered are:

• Tuesday 13 March, Agile User Experience & UCD (William Hudson)
• Wednesday 14 March, Agile Requirements (William Hudson)
• Thursday 15 March, Alignment Diagrams (James Kalbach)
• Friday 16 March, Faceted Navigation (James Kalbach)

#1. …On Communicating Strategy for Design

19 June 2011

I’m really happy this came at the top of the list because it was by far the hardest and longest one to write. Lot’s research and re-reading went into this it. But it was fun to do, and it’s proven to be very helpful in my day job, too.

Here are the elements I found to be most significant in communicating a design strategy:

• An explicit design strategy statement of 35 words or less. This should encapsulate the objectives, as well as scope and advantage to the degree possible.
• An activity system map to show which unique set of activities you’ll undertake and their relationship with one another. This is a more detailed explanation of scope.
• A strategy canvas (or two) to show design’s advantage and unique value–both to the organization and to customers.

The subjective response to this post was good too. Here’s what one commenter had to say:

“This is an outstanding article, James. As a design strategist (or someone who does design strategy as a part of a much larger set of tasks) I took keen interest in all the information you have curated here. I cannot remember the last time I spent an hour digesting something on the Web. Really good and important read. I have sent it to my circle of smart friends. Thanks for putting this together.” (Steven Keith)

Thanks, Steven! Sometimes hard work pays off…

#2. Business Model Canvas: A Type Of Alignment Diagram

11 July 2011

The genesis of this article came from a simple realization that Alexander Osterwalder conceives of the Business Model Canvas in a similar way to how I view alignment diagrams.

To review, alignment diagrams are a class of documents that visually align aspects of customers’ interactions with a product or service. They have two halves: one part shows key elements of the customer experience; the other half illustrates business activities and how they fit into customer activity.

#3. QuestionStorming – Framing The Problem

2 November 2011

Unlike #1 in the list, I fired this post off fairly quickly. It’s still quite valuable though.

I came across this technique in The Innovator’ DNA, which I was reading just at the same time we were planning an innovation workshop at USEEDS° for a client. The timing was perfect. In order to prepare myself for using the technique, I did a little research on it and was able to share what I found in a blog post.

I’m actually surprised this was only #3: judging from visibility this post got on Twitter, it felt like this would be the winner. I’m still seeing people mention this post on Twitter…

#4. Fighting The “Air Sandwich”: Aligning For Success

18 Sept 2011

I was really happy to have come across the notion of an “air sandwich” in Nilofer Merchant’s book The New How. She clearly explained and articulated what I’d observed in the companies I’ve worked for. She writes:

An Air Sandwich is, in effect, a strategy that has a clear vision and future direction on the top layer, day-to-day action on the bottom, and virtually nothing in the middle–no meaty key decisions that connect the two layers, no rich chewy center filling to align the new direction with the new actions within the company.

In the post, I don’t think I highlighted well enough how alignment diagrams can be used to address air sandwiches. It’s kinda hidden at the bottom of the text. Maybe I’ll circle back on that in another post.

#5. The Myth of Fixed-Width Layouts–Revisited

3 October 2011

This post shot up very quickly, probably because Jan Jursa (@IATV) picked it up on Twitter.

Fixed-width layouts have been a pet peeve of mine for years–ever since I wrote one of my first published pieces: “The Myth of 800×600.” Over a decade ago, working on a project for Audi, I came to the firm belief that designing a web page for a single size is a flawed practice. The web is a digital medium, and pages should be fluid and flexible. Back then–in 2001–we even built in a type of low-level responsive web design into the the Audi website. We weren’t targeting mobile devices at the time (heck, we were still looking at WAP back then), but the website did end up with 3 different optimized sizes–small, medium and large.

Anyway, I’m glad to response web design finally taking off and will be a supporter of that movement moving forward.

Honorable mention: Faceted Navigation: Grouping – An UnTapped Potential?

6 Dec 2010

OK, you noticed–this post wasn’t  from 2011. But it was close. And it also got a lot views, so I decided to include it in this recap anyway. It was also one of my favorite posts, so it gets an honorable mention.

The thing I find interesting about grouping is that there are no commercial examples that I know of it, although the Flamenco faceted search UI makes use of it. I suspect that’s because there’s little or no real business value in it. In fact, it may add complexity that could actually hurt the overall user experience of a faceted navigation system. But that’s precisely the challenge that’s fascinating to me. I’d like to see a commercial use of grouping that brings value to users and to the business.

Here’s a quote from the post:

With grouping–as with the scatter/gather interface–users can see a presentation of results in a more structured way. The theory is, structuring a results list by clustering items around a topic better reveals “aboutness” of subsets of items, and this in turn potentially increases the chance of relevance. This isn’t only true in academic settings: studies show that grouping results can be of significant benefit in broader contexts on the web.

Read the whole post for more. Or come to my workshop on Faceted Navigation on March 16 in London. I’ll be talking about grouping and many other techniques in faceted navigation.

Happy new year!

While these calculations may be performance intensive, indication of magnitude provides valuable navigational cues to users. Seemingly trivial, this tiny bit of information can affect a user’s decision to select a filter or not. This post reviews approaches to showing magnitude in faceted navigation.

Indication of magnitude can be classed into two primary types:

• Absolute magnitude shows the exact number of items. The most common approach indicates magnitude with a number in parantheses, usually after the filter label but sometime also before it.
• Relative magnitude shows the general size of the set in relation to other filter values. This is usually done with bars of some kind, either horizontal or vertical.

A hybrid of absolute and relative is also possible, as seen in the Relation Browser, an academic project for faceted filtering at the University of North Carolina (Image 1):

Image 1: The Relation Browser from UNC shows both absolute and relative magnitude (click to enlarge)

This example shows faceted filters for a collection of science and engineering data. The absolute number appears to the left of the value label. The relative magnitude appears as a blue, horizontal bar.

Notice that to save space, the designers put the value label over the bar. This avoids a real estate problem for showing longer filter labels: had the labels appeared to the left of the bars, for instance, some would most likely have to be truncated.

But wait, there’s more…

The Relation Browser take the display of magnitude one step further: rolling over an available filter forecasts the size of the resulting set of items by overlaying the new magnitude on top of the existing bars.

In the next screenshot (Image 2), the mouse is hovered over the value “Graduate” in the facet “Education level,”  (as indicated by the red outline). The blue bars now show the set of items you’d get after selecting that value. The white bars indicate the original magnitude (as seen in blue above) for all of the other filters.

Image 2: The Relation Browser forecasts magnitude by overlaying blue bars (target set size) on white bars (current magnitude).

This interaction is dynamic and instant, so you get a feel for the relationship of existing magnitude and new magnitude quickly. In the above screen shot, you’d know that by clicking on “Education level: Graduate” you will not get any documents in PDF, text or PowerPoint formats. This might affect your decision to select that filter at all, thus potentially saving you a step.

The display of magnitude is admittedly  a very detailed aspect of faceted navigation. But the example of the Relation Browser goes to show there is room for exploration and innovation in faceted navigation. How, for instance, might this be integrated into ecommerce without overwhelming users and in a way that is immediately understandable? What might be the benefit of this approach in a business context?

—-

Upcoming Workshop: Faceted Navigation (part of UX Fest, London, 2012)

If you’d like to learn more about faceted navigation, visit my day-long workshop on faceted navigation in March 2012 in London. We’ll cover faceted navigation from end to end. Below links to details about the event and about UX Fest, the series of four workshops William Hudson and I are running together:

• Tuesday 13 March, Agile User Experience & UCD (William Hudson)
• Wednesday 14 March, Agile Requirements (William Hudson)
• Thursday 15 March, Alignment Diagrams (James Kalbach)
• Friday 16 March, Faceted Navigation (James Kalbach)

.

He writes:

Marketers need to drop the funnel metaphor to describe consumer touch points and instead study the evolving and increasingly digital consumer decision journey (CDJ). The CDJ illustrates how consumers add and subtract brands from a group under consideration during an extended evaluation phase. And purchase is no longer the end of the relationship. Now consumers often enter into an ongoing relationship with the brand during which they enjoy, advocate for and bond with it.

That feels very intuitive–even obvious–to anyone who has been working in design in the online space. But it’s important that managers and marketers are looking at the entire customer experience. If using a CDJ diagram helps, then that’s a good thing.

Decision making is a key dimension to look at in a company’s relationship with customers, for sure. Still, I’d not classify the CDJ technique as outlined by Edelman as an alignment diagram. This is primarily because it only captures one dimension of the customer experience. There’s also no mapping back to internal process within the business, and so no real alignment.

The article shows in a case study how one company used a CDJ map to instill change in the organization:

As a result of this reconceived CDJ, Global Light rethought its go-to-market approach, expanded the role of the corporate digital marketing team, and changed the nature of its customer relationships.

This is an important, non-trivial outcome of customer journey mapping in general. It builds agreement and a fosters a culture of customer-centricity internally. These effects are sometimes overlooked in such efforts, with project sponsors looking for an immediate, monetary return. It’s hard, however–if not impossible–to put a value on shared vision and culture of service in a company. A recent study on innovation by Booz & Co. shows that organizational culture is the single most-important factor the predicts how successfully a company innovates. They found that:

Spending more on R&D won’t drive results. The most crucial factors are strategic alignment and a culture that supports innovation.

I’ve had success with customer journey mapping and similar techniques in building a common vision of the ideal experience. I encourage you to try experience mapping out. It may just transfer your view of the customer from the inside out to the outside in.

For more, see my list of resources for customer journey mapping on the web.

Discovering problems actually requires just as much creativity as discovering solutions. There are many ways to look at any problem, and realizing a problem is often the first step toward a creative solution. To paraphrase John Dewey, the inventor of the Dewey Decimal System, a properly defined problem is partially solved. (p. 128)

The start of innovation, then, shouldn’t begin with the search of the perfect solution, rather with the search for the right problem.

With this in mind, I was happy to come across an innovation technique called QuestionStorming in the recent book The Innovator’s DNA.

QuestionStorming can be traced back before that book. Jon Roland wrote about what he calls “Questorming” back in 1985. His method is available online. He writes:

Its aim is not so much to get a group to come up with “solutions” to a “problem” as to come up with well-stated and well-selected questions or problem formulations. In one sense it addresses the process leading up to what is done in more conventional brainstorming: formulating the problem to be solved by the group.

This directly recalls Berkun. More importantly, QuestionStorming offers a concrete approach to getting to the right problem.

The technique is fairly simple and can be described in 5 steps:

1. Have a group of people start asking questions and write them down one-by-one. It’s important to not start a new question until the previous one has been recorded.
2. As in brainstorming, refrain from judging, censoring, or discussing the questions as you collect them. The goal is to go for volume.
3. The authors of The Innovator’s DNA suggest a goal of 50 questions. After that mark is reached, you can end the QuestionStorming.
4. Group the questions by type. Common types are

• What is? – These questions focus on facts and as-is situation
• What caused? – These questions get at the root of a problem
• Why? Why Not? – This type reflects the rationale behind a given problem space.
• What if? – These are the questions that point to a different future and lead to real innovation.

5. Prioritize the questions and pick the most relevant ones to discuss and develop further.

The above quote is something I wrote back in March of 2001. At the time, the standard resolution to design to was 800×600, but things were changing to 1024×768. There were debates at the time as to whether web pages can be optimized for larger screens. My article, entitled “The Myth of 800×600,” essentially attacked fixed-width screen design in general. (Perhaps a better title might have been “The Myth of Fixed-Width Design.”)

I concluded that article with a prediction:

“With an increase of alternative browsing devises on the horizon, such as WebTV, public access kiosks, video gaming systems, e-Books, small handheld devices, and other nonstandard applications, the continuum of viewable browsing sizes will only expand. Never before has the demand for flexibility been greater.”

A decade later that contention seems to more true than it was back then. This post reviews the relevance of responsive web design in current practice.

At the time I was working with Razorfish on the relaunch of the Audi.com and Audi.de websites. I summarized a case study of that project in an article on Boxes and Arrows. (See: “Challenging the Status Quo: Audi Redesigned,” originally given as a presentation at the IA Summit 2002 in Baltimore.).

One of the themes covered in the case study is an innovative approach to screen resolution. We called it “jumping boxes” at the time, referring to a layout that had three different states: small, medium and large. This was achieved by making components “jump” down on the page as the resolution got smaller (and vice-versa).

I wrote in the case study summary:

“Razorfish, Germany wanted to address the fact that users surf with different browser window sizes. We believed developing pages for one fixed size is fundamentally inappropriate for web design and ignores the basic flexibility of the medium. … [Therefore], the Audi sites have ‘smart’ pages that detect browser size and serve up the right layout automatically. Entire content areas of a page appear in different locations depending on the user’s resolution. These content boxes appear to ‘jump’ around in the layout, hence the phrase ‘jumping boxes.’”

In the end, the jumping boxes approach didn’t bring much to the site or to our client. It was more a philosophy of web design than anything practical. And the website has since been relaunched several times without the flexible layout.

These days folks are talking about responsive web design, spearheaded by Ethan Marcotte in articles and books on the subject. He writes in A List Apart:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.” 

The layout for the Boston Globe website is a good example of responsive web design. Below are three screenshots from the site at different sizes:

Figure 1: BostonGlobe.com at its maximum width of about 1280 pixels (click to enlarge)

Figure 2: BostonGlobe.com at about 800 pixels wide

Figure 3: BostonGlobe.com at about 220 pixels wide

These screenshots are of the same page, taken only minutes apart. There is no horizontal scrollbar needed at any size. And the layout works at all of these resolutions.

This is far more sophisticated than what we were attempting in 2001 with the Audi website. We didn’t even come close. But we were falling the same aesthetic–one that breaks away from the what I call “the four corners syndrome.” Typically, web designers determine a fixed a size and begin filling in the corners with stuff. This is reminiscent of print design, really.

Now, with a veritable continuum of sizes to accommodate, picking just one doesn’t go very far. Responsive web design seeks to address that. It’s quite possible–from a design perspective and from an implementation perspective–to create a single website that scales as needed and takes advantage of a truly flexible medium to work on nearly any browser size. I, for one, welcome the further development and adoption of responsive web design. At a minimum, we should strive to have a single size be our default starting point for web design.