Tyler Tate

Cross-Channel Blueprints: A tool for modern IA

Tue, 21 Feb 2012 00:00:00 PST

The practice of information architecture is undergoing a tectonic shift away from creating individual websites and towards designing cross-channel experiences that span both the digital—from desktop to mobile—and the physical—from print to storefront. While the information architect’s skillset is well-suited for this new challenge, our existing tools are not.

Service blueprints aren’t exactly what we need

Imported from the field of service design, G. Lynn Shostack’s service blueprint is often suggested as a tool for cross-channel planning. Yet it’s not a perfect fit:

Too process-oriented. Service blueprints present customer actions sequentially. While desirable for planning specific flows (such as a checkout process), it’s obstructive when trying to outline a comprehensive strategy.
Minimal attention to channels. Service blueprints document the “physical evidence” associated with each action, but fail to account for how a single action might be performed on multiple channels.
Meant for a different purpose. With their lines of interaction, visibility, and internal visibility, service blueprints simply weren’t intended to be used for planning cross-channel information architecture

A service blueprint created by Brandon Schauer.

What do we need, then?

Before brainstorming solutions, we should clarify the problem. Andrea Resmini and Lucas Rosati have discussed five principles for designing successful cross-channel experiences; Peter Morville advocates six; to me, these three seem the most fundamental:

Consistent. Each channel should enable users to perform a given task in a like manner. For instance, a bank customer experienced in paying bills on the web should find the corresponding smartphone bill-paying facility familiar, even on first use.
Optimized. Each channel should play to its strengths. Desktop applications are optimized for large screens; mobile apps for small ones. Optimization is in tension with consistency.
Continuous. Each channel must be aware of all the others. Add a bicycle helmet to your shopping cart on the Web, and it should appear in the cart on your phone.

A starting point

What would a tool that aimed to facilitate consistent, optimized, continuous cross-channel planning look like? In Pervasive Information Architecture, Resmini and Rosati presented their CHU cube which places tasks and channels each on their own axes.

Resmini and Rosati’s CHU cube plots channels, heuristics, and tasks using three dimensions.

Ammendment: After publishing this post, Gianluca Brugnoli of Frog Design pointed out its resemblence to the Touchpoints Matrix he himself developed in 2009. I hadn’t come across this tool before, but the similarity is striking.

The Touchpoints Matrix by Gianluca Brugnoli

Building on the foundation

Juxtaposing tasks and channels is a useful starting point, though the CHUbe’s multidimensional layers make it a bit unwieldy. For our diagram, let’s do the following:

Identify user tasks—these become the X-axis.
List channels—these become the Y-axis.
Prioritize and describe each per-channel task—these are the table cells
Identify shared components—these are listed in a bottom row

I call this a cross-channel blueprint. The exercise can be performed by a lone designer or collaboratively with sticky notes or in front of a whiteboard. It brings about:

A global view of important user tasks
The possible channels through which users might attempt those tasks
A set of task priorities for each channel
A set of channel priorities for each task
An overview of which components need to be shared across channels

What do you think?

This is but a first attempt at a developing a tool suitable for the new era of cross-channel information architecture. As such, it needs practice, iteration, and experimentation. If you’ve been working in this space, please chime in with how the cross-channel blueprint jives with your own experience.

See my article The Rise of Cross-Channel UX Design on UX Matters for related reading. You can also follow me on Twitter.

Three Circles of Collaborative Search

Mon, 23 Jan 2012 00:00:00 PST

Search often appears personal, introspective, and private; an activity of the individual in isolation. In fact, most researchers depict search as a single-user activity. Yet a 2008 survey found that over half of respondents self-reported having co-operated with other people to search the web, while an impressive 97.1% went on to indicate at least one form of collaborative search activity in which they had engaged (Morris, 2008). It’s safe to say that collaboration is pervasive.

Yet collaborative search is a broad term, encompassing explicit cooperation with others during information seeking, enlisting help from one’s social groups, and implicit collaboration with strangers. We must attain a holistic view of collaboration in order to design socially-aware search applications that support collaboration. I believe that holistic view can be found in a three-circle model: the inner circle, intermediate social circles, and the outer circle.

Design Principles for Mobile Search

Fri, 13 Jan 2012 00:00:00 PST

Apple’s iOS Human Interface Guidelines, Google’s Android Design Guidlines, and others such as Luke Wroblewski’s Mobile First book provide valuable guidance for designing general mobile applications. Yet there are a number of design principles unique to crafting mobile search experiences in particular. Namely: prioritizing content over controls, providing answers over results, being sensitive to context, and ensuring cross-channel continuity.

Coping with Sub-pixel Rounding in IE

Thu, 05 Jan 2012 00:00:00 PST

An old, ugly problem still plagues fluid layouts: sub-pixel rounding. You’ve experienced this nasty issue when elements within your percentage-based layout unexpectedly wrap to the next line in Internet Explorer, or aren’t flush with the right-hand edge in Safari and Chrome.

The culprit? How percentages are rounded into pixel values by the browser. As John Resig documented in 2008, browsers have adopted different rounding strategies:

Webkit and Opera always round down, FireFox and Internet Explorer 8 and 9 round some numbers up, others down, and IE6 & IE7 always round up.

Below is the output of this example page in the major browsers. I’ve extended John Resig’s original demonstration by testing 4 columns, each 25% wide, within three differently sized containers: 49px, 50px, and 51px. The number shown below each container is the theoretical pixel width of one of the columns (e.g. 50px * .25 = 12.5).

You’ll notice that in Webkit and Opera, which use the rounding-down strategy, there is space leftover. FireFox, IE8, and IE9, on other hand, vary the widths of the boxes so that, in total, they occupy all of the available space. But here’s the catch: when the floating decimal is .5 or greater, our old friends IE6 and 7 stupidly round up, forcing the final column in our example to wrap to the next line since the four columns become collectively wider than their parent container. Facepalm.

This is certainly not a new problem; it’s been the source of head-to-wall bashing for over a decade. Yet it’s an important problem to understand and address in the modern era of fluid, responsive layouts. While it’s true that the problem will mostly go away when IE6 and 7 support is no longer necessary, many of us need a solution now.

The formula

Unfortunately, there’s no silver bullet.

The only way to prevent layouts from breaking in IE6/7 is to fractionally reduce the percentages so that they add up to just under 100%.

In the past this has meant fiddling down the numbers until the elements stop wrapping, an inexact and error-prone art. There is, however, an exact science to it.

The objective is simply to get IE to round numbers down, not up. In the example above, we want 12.5px, 12.75px, or even 12.99px, to be rounded down to 12px, just like it would be in WebKit. The solution is straightforward in principle: just subtract half a pixel. 12.99px would then become 12.49px, and—since the floating decimal is less than .5—IE would round down to the nearest integer.

But the tricky bit is getting from pixels back to percentages. What percentage do we need to subtract in order to produce a half-pixel reduction in the computed pixel value? The answer: it depends on the pixel width of the parent container. Here’s the formula:

O.5 / containerWidth = correctionLevel

ContainerWidth is the pixel width of the container, while correctionLevel represents the percentage that needs to be subtracted in order for IE to round down to the nearest pixel. Thus for our 50px container above, the correctionLevel is 0.5 / 50 = 0.01, or 1%. That means instead of the four columns each being 25%, they would need to be 24% (25 - 1). With that corretion applied, the columns would each be computed as 12px rather than 12.5px, and our layout will display correctly, as shown below.

But the whole point of using percentages, I hear you saying, is to be pixel-independent. If I have to specify the container’s pixel width, doesn’t that defeat the purpose of using percentages in the first place? It’s painfully inconvenient, to be sure, but the very fact that you’re reading this is evidence enough that we must work around this problem somehow.

Here are two strategies for applying this correction formula.

Do-it-yourself calculations

You can quickly apply the above formula to your existing fluid layouts to fix the sub-pixel rounding issue in IE6 and 7 without adversely affecting other browsers. First, lets assume you have constructed a percentage-based layout that has a set minimum width of 720px. Using this number as our baseline containerWidth, our formula tells us that the correctionLevel is .0694%. Whenever a percentage is used as the value of a width, padding, border, or margin declaration, we’ll use the star hack to add IE6/7-specific declarations which subtract .0694% from the original value. Here’s a simplistic example:

section#sidebar {
  width: 25%;
  *width: 24.93%;
}

CSS frameworks

If you’re using a CSS framework such as LESS.js or SaSS, you can rely on their mathematic operations to save you from having to crunching all the numbers by hand. The LESS/SaSS code below would be compiled to the same output as in the example above.

section#sidebar {
  width: 25%;
  *width: 25%-0.0694%;
}

Updated January 11, 2012. The newly-released version 1.2 of The Semantic Grid System—which uses the power of CSS frameworks to elegantly power fixed, fluid, and responsive layouts—incorporates the above formula. It allows you to specify the minimum width of your layout, from which it then derives the correction level.

@min-width: 960;
@correction: 0.5 / @min-width * 100 * 1%;

It then subtracts the correction level from the IE-specific width and margin declarations of each column in the layout:

width: @computedWidth;
margin: 0 @computedMargin;

*width: @computedWidth-@correction;
*margin: 0 @computedMargin-@correction;

The last word

So there you have it: a predictable formula for correcting the sub-pixel rounding problem in Internet Explorer 6 and 7. It’s just one more reason we can all rejoice when IE6 and 7 go the way of the grave.

Mobile Information Needs

Tue, 06 Dec 2011 00:00:00 PST

Mobile information needs can be assed by two criteria: scope and type. Scope describes the sophistication of the information need, the degree of higher-level thinking it involves, and the time commitment required to satisfy it. The lookup, learn, and investigate elements of scope are derived from Gary Marchionini’s work on exploratory search, while the casual component has been more recently advocated by Max Wilson and others.

The Rise of Cross-Channel UX Design

Mon, 17 Oct 2011 00:00:00 PDT

A few Saturdays ago, I was walking around Greenwich in southeast London when I decided to peruse the local bookshop. Drawn to a display titled “Utopias and Dystopias,” I noticed the book A Brave New World sitting beside George Orwell’s 1984, which I had read and remembered enjoying. Curious about the association between the two, I picked up A Brave New World and glanced over the back cover. I then pulled out my phone and searched Google to see what others were saying about the book and noted that it is often considered one of the top-100 novels of all time. My mind was settled: I wanted to read this book. But rather than walking, book in hand, to the checkout counter, I instead used my phone to navigate to Amazon’s Kindle Store, where I typed in the name of the book and used their 1-click ordering to purchase the book. Leaving the bookshop empty handed, I caught the next bus home. On the way home, I pulled out my tablet device and started reading page 1 of A Brave New World.

Search Analytics by Lou Rosenfeld

Thu, 13 Oct 2011 00:00:00 PDT

The book is a very practical guide on how to exploit query logs to improve your company’s search experience. Lou outlines a collection of simple but potent techniques for analyzing search logs, spotting insightful patterns, and putting those insights to use.

From physical to digital to ubiquitous

Tue, 11 Oct 2011 00:00:00 PDT

The invention of the printing press transformed the physical object that is the book from an artefact of human transcription to that of mass production. By 1500, just 40 years after Gutenberg’s invention, an estimated 150 to 200 million copies had rolled off the press; a century later, the by then pervasive technology led to the rise of a new medium: the newspaper. This was the era of information as physical object.

More recently, mass adoption of the world wide web and the plethora of Internet-connected devices has led to digital information augmenting and, to a certain degree, displacing the physical. News was consumed online rather than on paper, new mediums of self expression arose from the blog to the social networks, and a new pair of shoes could be acquired without ever stepping foot in a store.

We are now on the cusp of yet another technological sea change. The pendulum which swung from physical to digital is swinging back to the real world, but this time, information is formless, contextual, and ubiquitous. In their book Pervasive Information Architecture, Andrea Resmini and Luca Rosati describe this brave new world of ubiquitous computing:

“Information is going everywhere. It is bleeding out of the Internet and out of personal computers, and it is being embedded into the real world. Mobile devices, networked resources, and real-time information systems are making our interactions with information constant and ubiquitous. Information is becoming pervasive.”

The future lies in cross-channel experiences. Interactions in which the technology fades to the background and the personal, physical, and social context of the present mediate the devices and methods with which we interact with information.

You know the Hemingway line, “Write all the story, take out all the good lines, and see if it still works”? Well, I’m posting these simple thoughts here because I just deleted them from a longer piece, but still wanted them to see the light of day.

The Semantic Grid System

Tue, 23 Aug 2011 00:00:00 PDT

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Redesigning Wikipedia's Search

Fri, 19 Aug 2011 00:00:00 PDT

Yesterday was the deadline to submit a redesign of Wikipedia’s search page to the search design contest organized by Greplin. While the contest isn’t officially endorsed by Wikipedia, we found the challenge too much fun to turn down.

The UX of Learning

Tue, 26 Jul 2011 00:00:00 PDT

Think of the last time you ordered a book, booked a flight, or bought a car. How did you choose which book to read, where to go for vacation, or which car was best for you? You may have searched online, read reviews, or asked others for advice to help you make an informed decision. In a word, you learned. Learning is a complex process with distinct stages, each with corresponding tasks and emotions. Understanding how users learn can help us design experiences that support the user throughout the entire process. To design better learning experiences online, start by learning a thing or two about learning itself.

Learning Styles

Thu, 16 Jun 2011 00:00:00 PDT

You and I are different. It’s obvious, but has a profound impact on fulfilling the needs of disparate users. Not only do you and I have different accents, hairstyles, and musical tastes, but even our cognitive processes — the very building blocks of being human — are substantially different. I recently wrote about individual differences in expertise and cognitive style, but there is a third dimension: learning style. Understanding how people learn is fundamental to delivering desirable content, a prerequisite of any good user experience.

A Call for High Quality Demo Data

Fri, 20 May 2011 00:00:00 PDT

There is a huge need for a standard corpus of high-quality, free-to-use demo data. When building search applications, for instance, getting your hands on actual data can be near impossible, forcing you to design for unrealistic situations and compromising the end result. Well-rounded demo data would help ensure you’re working towards the right target.

Cognitive Styles

Thu, 12 May 2011 00:00:00 PDT

We pour over analytics, conduct ethnographic studies, and interview users in order to understand the demographics, goals, and tasks of the people using our product. We create personas, write scenarios, and list use cases. And so we should; understanding who our users are and what they want to achieve is foundational to our job as designers.

But how deep does our understanding of users actually go? Sure, we know their socio-economic bracket, what industry they work in, and the top few tasks they want to achieve on our website. But are there deeper, more innately personal characteristics at work? Can we figure out what really makes them tick?

For over a century, psychologists have been trying to account for the range of individual differences people exhibit when interacting with new information. At the heart of their research lie cognitive styles—the stable attitudes, preferences, and habitual strategies that determine how an individual processes information. Understanding cognitive styles will help us design better experiences for users.

From Lookup to Learning

Thu, 21 Apr 2011 00:00:00 PDT

Novices Orienteer, Experts Teleport

Wed, 20 Apr 2011 00:00:00 PDT

Would you rather take a photo using your phone, a point-and-shoot camera, or a digital SLR? How you answer this question is probably a good indicator of your photographic expertise. If you snap casual shots, your phone or a point-and-shoot camera will probably suffice. If you’re a professional photographer, on the other hand, you probably prefer using an SLR that gives you control over the focus, aperture, and exposure. Expertise significantly impacts how we seek information online. Just as novice and expert photographers prefer different tools, so novices and experts behave differently when searching for information. Understanding these differences will help us design better search interfaces for both groups of users.

Designing a Modern CRM

Tue, 19 Apr 2011 00:00:00 PDT

Why Devs Should Become UXers

Fri, 08 Apr 2011 00:00:00 PDT

Why do you code? It’s probably not just for a pay check (lets face it, there are plenty of boring jobs out there that pay the bills). Maybe you code because you like working with the latest technology, or perhaps you take pleasure in crafting concise, elegant solutions to tough problems. Did I hear you say, “I code to deliver value to users”? Hmm, didn’t think so. But you’re not alone: designers have their own set of motivations devoid of the user, from seeking the praise of others to creating a work of art. It’s imperative that both designers and developers fight against our natural inclinations and treat the user as king. Whatever you’re working on, whether it’s an API for a payment gateway or a new request handler for Solr, you’re building it for the people who will use it. Want to become a better developer? Then start designing the user experience.

From Lookup to Learning

Tue, 05 Apr 2011 00:00:00 PDT

Why Designers Should Care About Search

Wed, 30 Mar 2011 00:00:00 PDT

Search as a Flow Experience

Wed, 09 Feb 2011 00:00:00 PST

When was the last time that you were “in the zone”? Do you remember being so absorbed in an activity that you forgot about the outside world, time seemed to fade away, and you felt invigorated? Maybe you’re an avid tennis player and remember a rigorous game when you seemed on fire. Or perhaps you’re a musician and recall feeling as if the notes were flowing through your fingertips. Psychologist Mihaly Csikszentmihalyi calls this state of optimal experience flow. In his research, he found that musicians, composers, athletes, and even chess players all used the same words to explain their enjoyment. Csikszentmihalyi identified 8 elements that contribute to a flow experience.

Search as a Flow Experience

Tue, 08 Feb 2011 00:00:00 PST

A Review of Foodily’s Recipe Search

Sat, 05 Feb 2011 00:00:00 PST

This past week I discovered a new recipe search engine called Foodily. Both the interaction and the visual design are superb, and Foodily makes use of several novel patterns that I thought would be worth pointing out.

From Pattern to Component

Tue, 01 Feb 2011 00:00:00 PST

From Pattern to Component

Wed, 05 Jan 2011 00:00:00 PST

In 1899 the largest automobile producer in world, Benz & Cie, made a grand total of 572 cars. Few could afford such hand-built luxuries. But in 1908 Henry Ford began to mass-produce the Model T using an assembly line. By distilling the complex process of constructing an automobile into a distinct set of repeatable tasks, Ford reduced the time required to assemble a car down to just 93 minutes. By the 1920s, 10,000 cars were being produced every day, each with a price tag of just $290. Software, too, thrives on the transformation of abstract ideas into concrete, reusable components.

Dealing with Diverse Data

Thu, 02 Dec 2010 00:00:00 PST

Nutshell Launches in NYC

Thu, 18 Nov 2010 00:00:00 PST

It’s been an exciting week for the Nutshell team. We’ve been in New York City officially launching the company in front of about 500 of our peers at the Future of Web Design conference. On Monday, Andy Fowler (our lead developer) and I went on stage at the end of the conference to make the big announcement. We shared some of the key tenets of our development strategy including cross-platform design, building the API first, and prototyping on paper.

Review of Simple and Usable by Giles Colborne

Mon, 27 Sep 2010 00:00:00 PDT

We’ve all been frustrated by a gadget, from trying to install a printer to spending hours setting up a new mobile phone. Page one of Simple and Usable points out that: “The Technology that is supposed to make our lives easier often feels like it’s on the march against us.” What then is the antidote to confusing products, software, and web sites? The answer is — as one might guess from the title of the book — simplicity. Simple and Usable is both an extremely approachable and an incredibly practical guide to simplicity. Author Giles Colborne compelling shares four fundamental strategies for accomplishing simplicity: remove, organize, hide, and displace.

Q&A on Designing the Search Experience

Tue, 31 Aug 2010 00:00:00 PDT

Lucid Imagination recently invited me to present a webinar on designing user interfaces for search. At the end of the webinar, a number of participants sent in several really good questions. Here are 10 of them, accompanied by my answers.

Paper & Ink (Sketching Nutshell)

Thu, 26 Aug 2010 00:00:00 PDT

What does building a brand new CRM for medium-sized businesses look like? Way before pushing our first pixel, we listened to people recount their frustrations with CRMs on the market today. We had long discussions about how we wanted to both empower sales people to do their job more efficiently, and enable the business to control and codify the sales process. We spent long sessions in front of the whiteboard, and days sketching out and talking through these ideas. Now in the final stages of development (eying a launch later this year), we thought it as good a time as any to show you a few of those early sketches.

Designing the Search Experience

Wed, 18 Aug 2010 00:00:00 PDT

The Scent of Search

Mon, 05 Jul 2010 00:00:00 PDT

The implications of Information Foraging Theory on designing user-centred websites have not gone unnoticed. Jakob Nielsen and Jared Spool, among others, have put forth considered recommendations on how to enhance information scent on the web. Most of their guidelines, however, tend to assume that the designer has direct control over the explicit words used in the interface. While this is certainly the case for browse-based websites dependent on site-wide navigation and hyperlinks, it breaks down for search interfaces where both content and navigation are completely dynamic.

The Story for Complexity

Wed, 30 Jun 2010 00:00:00 PDT

Concerning Fidelity in Design

Tue, 29 Jun 2010 00:00:00 PDT

People swear by their design process. Rachel Glaves insists on sketching by hand, Dan Brown urges extensive wireframing, and Ryan Singer goes straight to HTML. Conferences are filled with heated debates as advocates of each staunchly defend their favoured technique. With all of these different methods to choose from, should you be sketching, wireframing, mocking-up, or prototyping? The answer is simply: Yes, you should.

The Scent of Search

Fri, 21 May 2010 00:00:00 PDT

A Closer Look at the Google Redesign

Wed, 05 May 2010 00:00:00 PDT

This morning I got out of bed, ate my cereal, took my shower. Everything was proceeding pretty predictably. But then I did a Google search — usually a pretty mundane task — but this morning, Google looked very different than it did yesterday.

A Bright New Future for CRM

Tue, 27 Apr 2010 00:00:00 PDT

We’ve been putting together a small slide deck explaining what’s wrong with customer relationship management (CRM) as we know it, and how Nutshell is getting it right. Fortunately for us, there’s a whole lot of room for improvement.

ECIR Industry Day 2010

Thu, 01 Apr 2010 00:00:00 PDT

The event consisted of 12 different speakers each presenting for exactly 20 minutes, with about 10 minutes of Q&A after each. I particularly enjoyed the presentations from the major search engines: Yahoo, Google, Bing, and Wolfram Alpha. A topic that seemed to arise in each of those talks was how query reformulation data can provide a feedback loop to make search better. But without further ado, here are my summaries of each talk.

A History of Color

Tue, 02 Mar 2010 00:00:00 PST

Search Suggestions

Mon, 08 Feb 2010 00:00:00 PST

You used to be expected to type for yourself. But today people have come to expect a reasonable amount of help at even this task. Our phones now help us form correctly-spelled words, our browsers fill in long addresses after we’ve typed only a few characters, and search engines recommend searching for “Humphrey Bogart” after we’ve typed just “boga.” But not all as-you-type search suggests are created equal. Careful observation seems to reveal three different approaches: completion, suggestion, and instant results. These approaches range in cognitive burden on the one hand, and utility on the other. We’ll look at several examples of each and consider when they should be used.

Search Suggestions

Thu, 04 Feb 2010 00:00:00 PST

Minimizing Complexity

Wed, 07 Oct 2009 00:00:00 PDT

Clean. Easy to use. User-friendly. Intuitive. This mantra is proclaimed by many but often gets lost in translation. The culprit: complexity. How one deals with complexity can make or break an application. A complex interface can disorient the user in a mild case and completely alienate them in an extreme case. But if you take measures first to reduce actual complexity and then to minimise perceived complexity, the user will be rewarded with a gratifying experience.

The 1KB CSS Grid

Fri, 29 May 2009 00:00:00 PDT

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Creating a Resizable Image Grid

Fri, 22 May 2009 00:00:00 PDT