User scenarios beyond the web

User scenarios have been widely adopted by web designers as a useful tool for helping ensure sites provide what visitors need and expect. Less well-known is that they are also a great tool for ensuring offline communications do the same.

Recently I was in Sears. They have created central checkout kiosks at my local store (Cambridge, MA) which is a step forward, because previously, it was impossible to find a cash register and a salesperson at the same time. Now there's a large checkout hub at the exit/entrance to the connecting mall. When I entered the store I came from downstairs – not from the mall. I did not pass a kiosk. I shopped and could not find where to pay. I looked for signs, and found this (pardon the fuzzy, surreptitiously shot image).

The sign points to a wall. There's no pay kiosk on either side of the wall.

This could be blamed on a number of things, but for the sake of this post I'm going to pin it on a lack of user scenarios when the store was planning the pay kiosks. If, when someone in Sears corporate offices was thinking about or planning the kiosks, the context of shoppers making purchases came up, hopefully they would have realized that finding where to pay is just one part of a flow that ends with paying – that paying is a part of a larger scenario.

A few years ago, we worked with the marketing team at Sloan Executive Education. They run programs that are attended by professionals from all over the world. Aware that there was a flow of information, and that it needed to be consistent to ensure that expectations were met, we mapped out scenarios related to how potential participants found out about the programs, registered, made travel plans and arrived at the program. After listing all the recipient types and situations, we could evaluate the communications and see where information needed to be changed, added or made more consistent.

There are hybrid online/offline situations that call for scenarios as well. Hospitals can have complex and inconsistent technical setups that send healthcare workers back and forth between paper and electronic files. Working with a client who provides software to streamline hospital discharge, we needed to design a fax form that would literally connect paper and digital correspondence. Care facilities received faxes from hospitals to let them know there was a potential patient for them. Included in the fax was a unique code that, when entered on a website, would provide the patient details and acceptance information. We used scenarios that captured the full flow of contact – online and offline. Because we looked beyond the web interactions we were able to design a complete system that worked, not just a form or site that only addressed part of the situation.

Higher education: the destination site is not dead

The pace and rate of technological change is dizzying. We are seeing and hearing many organizations become disoriented. In higher education as with any organization, when there are funds there is a tendency to want the latest and coolest. The possibilities available - cheap and fast streaming video, presentation design "skins" that change on the fly, the ability to aggregate and display content from a wide variety of sources - are tempting.

Critical thinking must be present in the higher education site redesign process. Like the dessert table at a great buffet, it is easy to over do it, and forget about providing the nutrients your body (like your site visitors) need.

Bottom line - if you are a site for a department at a college or university, your site visitors need facts. They need to know what the department is. They need to know how they might engage with you and for what. They need to know who is in charge of what and who to contact for what. They need to know how your department or organization may be connected to others or the university as a whole. Prospective and current students and their parents get a huge amount of their information from the internet. They are relying on your institution or department's site for the details they need. There are many, many sites that provide inspiration on every topic imaginable. Chances are, if you have a current or potential student on your site, or even a donor, they have been to those sites and are already inspired. They are on your site to move forward and take action - to go beyond inspiration and act.

Organizations must ask themselves - are they in the media business? If not, how cool and inspiring is your cutting edge site going to be in a few months when the content needs updating? How impressive will it be when news feeds pull in content that isn't what your audience is looking for or have already seen somewhere else?

Higher education sites are destinations. Ideally, they do both - inspire the visitor by reassuring them that they are in the right place for their interests (video could really help here), and help them engage. This takes more facts than flash, more veggies than dessert, smelling salts and a heavy dose of restraint (also known as user research).

Challenging the convention of starting with content

When we were recently designing a new site for ourselves, the effort started with content. We thought that once we had an idea about the content, we'd to do the design. We developed a rough draft of the things we wanted to say, worked with a great writer and came up with a final draft.

Visual designs were based on the content. After a few rounds, we liked the design. The problem was, we were no longer satisfied with the words. What was it about reading the words in the design that made us want to change them? Everything had looked good in Word. If we had been just the web design team and not also the client we would have probably been annoyed: "Don't they know what they want? It's about to launch!" We had fallen into a trap we had seen but not experienced, the inability to visualize something without seeing it complete.

We were reminded that it takes two to tango – content and design go hand in hand to communicate, and should be developed simultaneously (along with behaviors if designing an app) as much as possible to create a cohesive experience. We should have recognized it sooner and prescribed one of our own solutions – using schematic page diagrams (aka wireframes) from the beginning to define content and layout at a high level. Schematics show the types of content without showing actual writing, and the hierarchy of the layout without showing visual design. If we had done them, once the wireframes felt right we could have moved the writing and the visual design along simultaneously, which would have saved a lot of time.

Why we don't design for "Innovation"

We love technology and the things it can help us do. We are excited by the new functionality and resources we see everyday. However, we regularly see and hear from people who wish the technology they already have met their needs better. Thinking back over our most recent research sessions the participants - executives, students and reporters - all want to access information that addresses their needs in a way that's easy to find.

Solving some of these problems is pretty easy, like designing a faceted search, creating a comprehensive structure for information and designing type and imagery that supports the content. Solving others can be tricky politically, like providing the names of appropriate people to contact if needed (creating transparency). A few more solutions can be time consuming, like developing summaries for a database of long documents or enabling personalization. All of these are manageable, however, and provide a significantly improved user experience.

It would be amazing to develop the next big thing, but we see a lot of room for improved user experiences using the tools we and our clients already have. Learning about what matters to people and providing it quickly and manageably never gets old.

Using card sorts with storytelling to get off to a great start

Working with non-profits often means large teams with multiple stakeholders, each with a list of desired features and improvements that may have been in the works for years. The expectation level is high – funding has finally been approved, a target launch date planned and everyone knows just what they want – in fact, a site map has been developed. While each stakeholder is trying to address the perceived needs of their audience, when it all gets put together the results can be unprioritized and sprawling. The team may have been meeting for months and are looking for the designers to pick up the ball and run. However, committee-driven IA can be so democratic that it can miss providing the information that site visitors are looking for in the way they expect to find it. Our favorite path to a successful project with multiple stakeholders is holding card sort/participatory design sessions with storytelling as soon as possible.

Traditional card sort sessions involve gathering data from participants by having them sort terms into groups that make the most sense to them. These sessions are a valuable tool for creating navigation that makes sense to the people who will use the site. A large numbers of participants (>30) is needed to provide the data, and software to sort the responses is helpful. While traditional sorts are not difficult to do, we have found that having sessions with fewer participants (5-12) and mixing approaches provides input that covers several areas beyond defining appropriate navigation categories.

When sessions include prompting participants to tell stories about a specific time they used a site, perform a card sort, and use cards to position content and features on a page the way they'd like to see it the data is deep and rich. The results provide a clear picture of each person's mindset, and how that mindset affects how they think about content, categories and what they value. Patterns emerge that point to pretty clear user group needs. While it doesn't provide deep statistical data, it does provide rich scenarios of use and an understanding of needs and values that is just what we need to get buy in from stakeholders to prioritize the feature list and focus the IA on the top issues and most common situations.

Try again ... this time in English.

One of the most frequent problems we see on websites is jargon-heavy text. There are many reasons why this happens: maybe the writing team is so used to serving an internal audience they don't realize that others can't understand their content; or maybe the website serves an industry that thrives on buzzwords, such as consulting. Sometimes it just happens by accident or because no one has time to really review the text before it gets posted. But no matter the cause, the result is almost always a site that feels insular, unfriendly, and worst of all, crammed with content that doesn't resonate with the audience.

One of the worst offenders on many sites is the legalese on Terms of Use pages. Hardly anyone other than lawyers actually reads these closely; they're just long, impenetrable documents we all have to pretend we've read before we can check off a box and complete a registration form.

But this week, the Consumerist singled out Aviary, a site providing online graphics tools, for their radical and simple approach to their Terms of Use page: they provided an English translation paralleling the legalese. Using concise and friendly language, Aviary spells out everything you'd want to know about their Terms of Use, from who owns the graphics you create on the site, to the different payment plans they offer, to the licensing agreements for site content. Aviary's approach transforms an unreadable page into one that anyone can understand, a goal consistent with their mission to "make creation accessible to artists of all genres."

We hope more companies follow Aviary's lead and make their content clear and easy to read, which is a more successful way to reach their audience than "buzzword compliance."

When moving fast slows you down or, one more reason why prototypes rule

Sometimes, we go right from creating schematic, or wireframe sketches on paper to visual design. There are often several rounds of sketches before they are approved and visual design begins in earnest. On complex applications, this is a mistake. Paper-based wireframes, even several rounds of them, do not give the team a chance to test drive the application. This leads to lots of "oh, yeah" changes when the team sees a working build with "final" graphics in place, even if the visual design and the wireframing have gone through several rounds.

"Everything is changeable on the web - what's the problem?" Creating visual design for complex web applications involves layers, lots and lots of graphic layers per page template. For each button, for example, there are several states. For each state, there are vector (working, editable) layers, and final, "raster" layers for the same button. Four layers, easy, per button. Finding the right layer and changing it to match all the other buttons, even in well-organized files is time consuming and error-prone.

Add all the files from all the rounds of design, the passage of time from final graphics to working staged site, and the problem grows. Changes to complex web applications once the graphics are in place are time-consuming and lead to messy, hard to manage files. Often the change needs to be made right away, and a designer (no one I know ;) might edit a flat .jpg rather than the original layered file. While this seems harmless at the time and gets the problem solved quickly, what happens when the same item or similar item needs the change again - another "oh, yeah"? More time to find, edit, make the same as all the others, for a word change that everyone thought could be changed easily later.

Maintainability and integrity of a UI design suffers when the design is picked apart for the sake of wording and functionality edits once complete. Web application visual design is often about subtle juxtapositions. When features are unexpectedly added or changed, the details of the design can fall apart, reducing the overall impact and effectiveness of the design that was labored over and approved.

What to do? Prototype. We know prototyping helps interaction design and feature definition. We know prototypes (limited functionality, no design) are easy and helpful to test. The news is that it helps visual design, too. When prototypes are vetted, "oh yeah" changes are dramatically fewer, allowing the design to be its best.