The Official Fluid Blog

Two and one-half years ago Fluid began a design project for Charles Schwab to craft a whole new web experience and look-and-feel for their customer account management portal. The design project coincided with a significant effort on Schwab’s part to update, enhance, and extend the entire back-end system responsible for account data, security, transactions, and content management, so the new site had to accomplish a few key goals:

• Create an experience that inspires trust, confidence, and credibility in all customers.
• Provide quick and easy access to consolidated account data and all transactional functions.
• Offer improved and new functionality without displacing or deprecating existing functionality customers had come to expect and rely upon.
• Modernize the site’s design to leverage new interaction patterns to provide access to deeper content without overwhelming or alienating customers.
• Consolidate the site’s research data and information into a more logically organized structure to improve findability and usability.
• Integrate the many marketing and awareness campaigns into a single, rule-guided system for presentation within the account management center.
• Extend the brand guidelines from the print, broadcast, and online marketing to the customer account center while crafting a reliable, efficient, and focused customer experience.

Schwab’s previous site (which is still available during this transition period) has been serving their customers for more than six years. During that time browser technology and customer expectations have changed, the site (like all web sites) grew organically to accommodate changing business needs, and the customer experience become fragmented and occasionally unfocused. Fluid was charged with helping Schwab craft a new, unified vision for the customer experience and then defining a design system that would essentially be everything to everyone, because in the world of finance the margin of error is zero. Mistakes in the customer experience cause customers to doubt the reliability of a system, and when that system is responsible for their money customers have no tolerance for mistakes.

The design process lasted ten months, starting with six weeks of stakeholder interviews and customer research. We crafted wireframes for hundreds of distinct pages and screens for six months, and during this time we went into the usability labs with click-through prototypes for eight rounds of testing with actual customers. Any feature or function that did not test well would be re-designed and tested again – only when an interaction was successful in two consecutive rounds of testing would it be removed from the task list and marked as “validated.” At the same time we were crafting and testing prototypes, we were also working closely with the internal brand group to establish a look-and-feel for the entire customer account management center, and in the last three rounds of testing we presented prototypes that incorporated the updated visual design, because the way a web site looks can actually have an effect on usability.

When all of the core and essential functionality and the new look-and-feel had been tested and validated, we moved into a refinement phase to extend the design to the remainder of the account management center. The project culminated in the delivery of a pair of extensive style guides that defined the design system and patterns for the interaction, information, and visual design.

Now, more than one and one-half years since the end of the design phase, the new Schwab Customer Account Center is being rolled out to all customers.  How well has the design been implemented, and how well does it hold up? I’m happy to say that it has been implemented very well – the design and experience are true to the vision and to what was tested so successfully with so many real customers.  Compare for yourself:

The previous Schwab Customer Account Center:

The new and improved Schwab Customer Account Center:

The new design increases content density, the organizational structure is actually flatter and makes it easier to find information, functionality has been made more efficient, and the entire experience from account data to transactions to market research is now consistent and on-brand.

Congratulations to everyone at Charles Schwab who had a vision for excellent customer experience and service, who demanded exacting standards, and who maintained focus while seeing this project come to fruition! Fluid is proud to have been a partner in this effort and in your continued success.

Jared Spool recently wrote that pretending and roleplay in usability testing is not as effective as recruiting people with an actual need or real interest in a product or activity.

We routinely ask participants in prototype testing to pretend they need to complete an action by creating a believable scenario for them (e.g., you just bought a new MP3 player and want to download some new music for it.) Jared Spool’s research has found that people who are not really interested in an activity behave differently on a web site than people who are genuinely interested in that activity.
What we need to be aware of (and what Jared Spool nearly alludes to) is that the bigger the difference between what people want to do and what we ask them to pretend to do, the greater the possibility that they will not behave accordingly. So, asking a Wall Street executive to pretend to be interested in The Jonas Brothers will probably be less accurate than asking female highschool students to pretend to be interested.

Jared also finds that asking people to pretend to shop for something they do not want or need is less accurate then asking them to shop for something they do want or need. At Fluid we sometimes find ourselves in this situation in prototype testing where not all of the participants actually need the products being sold on the site being testing, but there are a few things we can do to improve the accuracy and relevancy of our testing observations:

1. Recruit from real customers who already visit and shop on the site, because they are already interested in the content, products, and features,
2. Recruit for the appropriate demographics and interests in participants to improve the probability that even if they are not actual customers they will be still be interested in the content, products, and features of the site,
3. Recruit for specific needs (e.g., recruit people for customizing wedding invitations right at the time they are planning a wedding and need invitations.) Obviously this is more difficult, but it should produce more accurate observations.

One of the limitations we have with prototyping testing is that we cannot adapt the task to the participant after they arrive. Prototypes typically have a pre-defined set of tasks and available options, which means we need to be careful and recruit the appropriate participants who will match the prototype tasks rather than adapt the task to the participant.

If we were testing a fully functional and available web site, we would have more opportunity to adapt the tasks to the participant (e.g., ask someone to shop for a backpack rather than shop for a dress), but we still need to recruit participants who would be interested in the available range of products. If the only products a web site sells are shoes, then we cannot recruit for just any shopping need; we should try to recruit people who need and like to shop for shoes.

When we are preparing for prototype testing, we ask all of our clients to provide actual customer lists for participant recruitment so that we know our participants are at least interested in the content, features, and products of the sites and prototypes being tested. If we cannot recruit for a specific need, we are at least able to recruit for characteristics that make that need more likely to be present in participants.

I will be presenting at the Web Experience Forum in Boston on October 14 and discussing the future of online customer experience in a session titled “Can I Get That in Pink and Eggplant?”  Here’s the blurb for the session:

“As more and more retail purchases occur on the Web, the ability to portray products as if they were in the buyers’ hands will become one of the key drivers of an excellent Web experience. Color change, product configuration, magnification, rotation, and personalization are already mainstream features expected by and familiar to consumers. What will online customers want next, and what do they not even realize we can offer? What is the next level of Web experience we need to attain to drive growth in Web transactions? This presentation will look at how emerging technologies and innovative design will transform the Web experience in the coming years.”

I don’t want to give everything away before the session (and I don’t think the folks at the Web Experience Forum would appreciate it), but here are some hints about what we see in the next two to five years:

• Video is the next JPEG,
• Sites will be smarter and more aware of who we are and what we like,
• Mass customization of products, whether or not we realize it,
• Sites will relinquish total control of the experience and become deconstructed,
• Mobile devices will be links and keys in much larger experiences,
• Social, social, social!

Check back the week of October 20 for start of six installments summarizing each of these future directions in online customer experience.

Estimating the value of design, particularly customer experience design, and the potential impact on conversion rates and revenue has always been difficult. It often requires making comparisons to past quarters or past years or simultaneously running different versions of the same site (e.g., traditional A|B testing), and it can be complicated by marketing campaigns and changes to advertising techniques and budgets than can alter the flow of traffic to a site.

The clever folks over at Teehan + Lax, a user experience consultancy based in Toronto, Canada, decided to gamble with $50,000 dollars of their own money to test a theory: companies that invest in customer experience design will have better revenue, greater customer satisfaction, and therefore perform better in the stock market. They selected 10 companies that are known for the use of experience design on their sites and held their stocks for 365 days, then they looked at the value of their UEX portfolio relative to the broader market indices. Their portfolio did very well:

“In the 365 days we owned our stocks the value of the portfolio increased 39.37%. This outperformed the major indexes (NASDAQ 18.09%, S+P 9.47%, NASDAQ 100 26.81%, NYSE 14.67%).”

Designing for the customer experience is not just for the good of the customer, it is also for the good of the company. Designing great customer experiences definitely has measurable value.

http://www.uxmag.com/strategy/327/investing-in-ux

As web sites and web applications become increasingly complex, they are also becoming decreasingly static. Web sites no longer present themselves as passive, static blocks of text and images. They move on their own and in response to user actions in order to:

• Capture attention (e.g., animated banner ads)
• Provide feedback after user actions (e.g., mouseover and on-click states)
• Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)

Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read.

The animated GIF for banner ads that annoyed us for years before declining are being replaced by slicker Flash ads with embedded audio and video, elaborate animation, and even interactivity. Additionally, web sites and applications are using more motion and multimedia to add value to content and attract attention. In some cases the result is a sensory cacophony that overwhelms visitors and reduces the quality of the user experience.

Is animation bad? Should motion and multimedia be avoided? No, but we do need to consider when, where, and why we choose to use it. Animating a logo or image or infographic simply because we can is gratuitous. There should be value and improvement to the user experience, and the animation should support and enhance the content and goals of the site. Here are some basic principles for effective motion graphics and animation:

1. Remember: motion attracts attention. Using too much animation and motion on a single page results in competition for attention and often frustrates visitors. If you choose to use motion to draw attention, give the visitor control and the ability to stop the motion if it distracts them from their goal.
2. Animated graphics are only better than static graphics when they make it easier to understand complex information by being more visually explicit.
3. The content and format of a graphic should closely correspond to the content and format of the concepts and information to be conveyed (also known as the Congruence Principle.) For example, it is more difficult to understand the variations in the stock market looking at tabular numeric data than by looking at diagrams of value over time. Animation adds the ability to include changes in time and space in a more visually explicit way.
4. To be effective, animations need to be correctly understood by the viewer (also known as the Apprehension Principle.) Animations are often too complex or move too fast to be accurately processed and understood by visitors. Make the animation interactive, and give visitors the ability to pause, rewind, restart, and even control the speed or flow of the animation so that they can better focus their attention and thinking on the important and more complex portions.
5. Avoid clutter and unnecessary complexity. Provide enough information and visual cues to help the visitor understand, but do not include extraneous information or design elements that may confuse or distract.
6. Be organized and focused before starting to create the animation or motion graphics. Write a script, create storyboards, and have a plan to convey the information in a concise and focused way, otherwise you may wander away from the goal and include unnecessary information and/or steps.
7. Use the animation to tell a story. A coherent narrative helps visitors better understand the information in a meaningful context.
8. Support animations and motion graphics with corresponding text. Do not assume that the animations are sufficiently explicit to understand without supporting information. If you are using audio to support the animation, give the visitor the ability to control playback and volume.
9. Consider using visual metaphors to help visitors better understand complex information and concepts and to reduce ambiguity.
10. Avoid design myopia. You already understand the information and concepts, therefore your animation and motion graphics design will make sense to you. Show the animation to other people, test it with your target audience, and evaluate whether or not they understand it correctly. What seems obvious to you may be less so to others.

“That which we will call a…” Hey, just what are we going to call it?

Nomenclature, terminology, labels. What we call things and the names we use are very important, and deciding upon the “perfect label” can often be more difficult than we anticipate. As information designers and architects we are tasked with not only organizing information, but also often with naming it.

Sometimes the exercise is quite straightforward: developing a product catalog for an online toy store may be more an exercise in deciding whether building blocks are categorized as “puzzles” or ” learning toys” than in naming them “building blocks.” In either case, the label for the toy seems obvious. After all, we would not change the name from “building blocks” to “plastic construction units.”

But sometimes the nomenclature exercise is not as easy or straightforward. Sometimes we struggle with what to call something, especially when we are trying to decide upon a site’s navigation and interaction terminology, headers, subheaders, text links, and buttons. For example, should we call a section “Online Learning Center”, “Training Services”, or “Guides and Documentation”? Although each of these options conveys a similar type of content, each creates slightly different expectations about what information will be presented, the format of the information, and the extent and form of the interactions possible.

The labels and terms we use are very important, because they assist, guide, and inform visitors to our site (or users of our applications) and help them work efficiently and accurately. Poor nomenclature:

• is ambiguous, incomplete, or even erroneous.
• causes confusion.
• causes frustration.
• increases abandonment.
• decreases credibility and trust.

Good nomenclature should go unnoticed, because site visitors do not have to stop and think, “What does this mean?”, “Where will this take me?”, or “What is going to happen?”, because it is immediately obvious and meaningful to them. There are a few practices we can put in place to help us develop better labels and more useful (and usable!) nomenclature:

1. Use active language (e.g., “See the Ford Model T Specifications”) and avoid passive language (e.g., “More about the Ford Model T may be found here.”)
2. Use familiar terms that are meaningful to the target audience, and try to avoid internal, (company or product specific) terminology (e.g., “Mental Health” rather than “Psychopathology” on a community health web site.)
3. Use directive language that sets accurate expectations for the reader about what will happen and what will be presented when they follow the link or press the button (e.g., “Download the Update” communicates that the download will begin right away, whereas “Get the Update Here” is somewhat vague and may either start the download or take the visitor to another page.)
4. Be concise. Long labels are more likely to introduce ambiguity, and there is almost always limited screen real estate to work with. Tooltips that show up on mouseover are a nice way to include additional, explanatory information if necessary. Also, eliminate any unnecessary words, for example, use “Read the full article” instead of “Click here to read the full article.” There is no need to write “Click here to…” as long as the link looks like a link to the visitor. If it does not look like a link, then make it look like one – do not fix it by adding “Click here.”
5. Be consistent. The terminology, tone and voice, and grammatical structure should be parallel across the navigation system. If you are using active verbs in the navigation, then all of the navigation options should include them (e.g., “Search for Music”, “Listen to Music”, “Share Music”, and “Buy Music.”)

As information architects and information designers we spend a good deal of our time studying the organization of information. We dissect it, study it, and analyze it to discover the underlying structure. We create taxonomies, classifications, and categorizations to map out the relationships. We look for connections among disparate pieces and distinctions between similar pieces. We diagram it, visualize it, and try to give every piece a meaningful and unique name. We create navigation systems and site maps and architectures to capture and represent everything we have learned. We design page layouts, schematics, and wireframes to give everything a place to be seen. We try to put it all back together so that others can find the information more easily.

And often we fail.

Everything is findable, understandable, and logically organized. All of the pieces are there, the labels are meaningful, ambiguity is absent, and the prototype succeeded in testing, but site visitors and customers do not come. We have included everything they asked for, we have made it accessible, and we even made the connections among pieces for them, but they leave before they even get to benefit from our efforts. Our carefully crafted architecture and specially selected nomenclature languish, even though all of our test participants commented about how easy and efficient it was to complete the representative tasks we gave them.

We deconstructed the information to better understand it, but during the reconstruction process we left something out: the user experience. No matter how findable, accessible, or well-named the information is, if it is not wrapped in a desirable user experience, it will languish.

The whole is greater than the sum of the parts.

User experience is more than information design, visual design, and interaction design. We often use terms such as compelling, immersive, persuasive, and entertaining to describe a user experience, but where in our taxonomies, architectures, and wireframes do we represent these qualities? What color, shape, sound, or logo embodies them? What interface component facilitates them? Capturing and defining user experience is outside of any single design effort.

User experience is an emergent property. It arises from a wonderful convergence of good design (information, visual, and interaction), useful and usable information, and the intrinsic desires, needs, or motivations of our visitors and customers. To encourage a successful user experience (can we really ever say we create it?), we have to make the visitor or customer want what we offer, to make them feel they need it, and to help them enjoy themselves when they seek and use it.

How do we make information desirable? Not just by making it available, but by making it real. Show people how it connects with their lives, how it is useful and valuable, and how it can help them. When we reconstruct the information and make connections among the pieces, we also need to make connections between the value of the information and their lives and daily experience. We cannot stop at findability and usability. We must strive for desirability, for in the end, is it not our desires that are often the most motivating?

A common mistake when creating personas is equating one persona with one style of online behavior. Although this simplifies the creation and presentation of personas, it is not an accurate reflection of actual site visitors, their motivations, and their behaviors. Do you have the same goals and behave the same way all the time?

People behave differently under different circumstances and have different needs and goals at different times. Although it may be convenient to think of John Q. Persona as “the guy who abandons his shopping cart ten times before committing to the purchase,” this is not necessarily the way he behaves all the time.

Nearly all web site visitors will change their online behavior based on their current goals. Sometimes we have extra time to surf, and sometimes we are in rush and need to get in and get out efficiently. Sometimes we need to search extensively (e.g., I want a good suspense novel), and sometimes we already know what we are looking for and where (e.g., I want the latest Anne Rice book.) But rarely do we do the same thing every time.

Personas should be representative of actual site visitors, and that means that they will have a range of goals and behaviors. Some behaviors may be more common than others, but they will exhibit a variety of behaviors over time. Yes, John Q. Persona may be more likely to abandon shopping carts than other personas, but perhaps he only does that when comparison shopping for himself. His behavior may be different when he shops for gifts for others, or maybe his behavior changes when he browses from home versus browsing from his office during lunch.

To get the most out of personas, we should separate the personalities (i.e., the personas) from the actual behaviors. Create personas to learn about who site visitors are demographically, what motivates them, how they react to options or designs, and what content or experiences are important to them. Create experience flows to describe the most common behaviors that are observed or desired for the site (e.g., gift shopping vs. product research.) Then play mix-and-match with the personas and the experience flows: which experience flows are most likely for each persona, then rank order them. For example, John Q. Persona may exhibit more cart abandonment behavior than any other persona, but he may also be interested in comparison shopping, product research, and interactive merchandising displays.

Personas are meant to be realistic representations of actual site visitors, so it is important to remember that real visitors behave differently at different times and under different circumstances, therefore personas should also exhibit tendencies, preferences, and ranges of behavior.

A recent blog post on MSDN discussing the usability process behind the new Microsoft Office 12 “ribbon” used to present function icons in the interface described how they learned from observation that users could scan the icons more quickly when the icons are not all the same size. But not everyone thinks (based on their intuition) that different sized icons are a good idea.

I (Jensen Harris, the blog author) was reading a blog entry of someone who was kind of critical and dismissive about what we’re doing and our designs. One of his criticisms was “how bad the usability of the Ribbon would be because it’s got icons scattered all over of various sizes.” What we’ve learned is actually the opposite. People can scan disparate patterns more easily than homogenous patterns. When we use more toolbar-like layouts–a bunch of equally-spaced, equally-sized buttons, people scan them less quickly than when each chunk has a memorable layout. So we actually try explicitly to vary the layouts between chunks–it helps people find the thing they’re looking for more quickly.

This is a great example of how we are re-discovering some basic perceptual principles that have been studied psychologists for nearly 100 years: humans (and all insects and animals, for that matter) are designed to perceive change. We notice more quickly when things are different or when they change, and we get perceptually “bored” when things are all the same and never (or rarely) change. We know from software design experience that rows and rows or columns and columns of the same icon in file management UIs offer no scanning advantage, but if just one of those icons differs it seems to literally jump off the page at us. We notice the difference.

It is possible for historical reasons that function icons in toolbars are the same size because is it easier to design and build a toolbar where everything fits together like uniform bricks. It’s more difficult to create a toolbar where all of the pieces are different sizes and must be properly arranged in order to “look right.” Perhaps we have a perceived need for a grid-based system because it is simpler, not because it is better.

Yes, icons do vary in color and content based on the function, so there are differences among the icons already, but a standard icon size introduces a regularity that makes it more difficult to see those differences. Reading researchers have known for a long time that we read LONGER TEXT PASSAGES WRITTEN IN ALL CAPS MORE SLOWLY THAN WE READ PASSAGES WRITTEN WITH BOTH UPPER AND LOWER CASE LETTERS, because the ascenders and descenders provide us with word patterns based on the differences among the letters that we recognize more quickly. All caps letters are uniform rectangles, but a mixture of upper and lower case letters are a sequence of different sizes and shapes. We notice the differences.

Change and difference can occur in more than size, shape, and color; it can also occur over time. Our attention is drawn by things that move. Yes, we can see things when they are stationary, but when something moves it attracts us, it makes us want to look at it. Predatory animals are particularly sensitive to movement, but when the prey remain motionless it is much harder for the hunter to perceive it. Camouflage only works well when you are sitting still. Many animals are equipped with the coloring and instinct to blend in: fawns lay motionless in the dry grasses and stick insects cling motionless to branches. If they move, they become dinner.

We can use these perceptual principles to our advantage: facilitate scanning by using color, shape, and size cues to create memorable patterns, and draw attention with the use of differences, change, and motion. Although it may be easier to build UIs based on a grid pattern, the reality of our perceptual systems (and of the organic world) is that patterns are based on differences not similarities.

Overall, drag-n-drop is a popular interaction method, most people get it, and it is often requested. However, there is a distinction for many people between desktop environments and web sites or web applications. The “click for action” paradigm on web sites is very strong, and drag-n-drop is not yet as common on the web. We often find that we have to explicitly tell people that they may drag-n-drop items, but once they know it is available, they get it and use it properly.

The one problem with drag-n-drop (on the desktop and on the web) is that there is no uniform way to visually indicate drag-ability and inform people that the functionality is available. Buttons look clickable and underlining links is a well-known convention, but nothing really looks drag-able. People often must try to see if something is drag-able, hence the need to inform people explicitly.

Drag-n-drop in file management dialogs in a desktop environment is a good example of a learned behavior: the filenames do not really look draggable, but we have learned to drag them around and drop them where we want them. Similarly, we have learned that we can drag-n-drop appointments in our calendars as well as re-arrange our email.

The whole idea of dragging an electronic document (or image or other virutal object) composed of electromagnetic bits and putting it in a “place” relies on the metaphor of space: physical things can be found in places and can be re-arranged. We can re-arrange files in a cabinet, books on shelf, pictures in a scrapbook, or bricks in a new patio. While tangible objects have the affordance of being grasp-able, electronic objects may not.

On the web we have to create designs and provide guidance to help people draw the analogy between physical and virtual dragging and use drag-n-drop in situations where the concept of space applies to the virtual object. We need to help people transfer the skills they have learned in one situation (e.g., desktop applications or making a scrapbook) to another, new situation (e.g., placing merchandise in an online shopping cart by dragging rather than clicking.) Luckily, most of the virtual objects we drag-n-drop around do have the property of location (or space), so the drag-n-drop paradigm typically works well.

Are there instances where a virtual object lacks the analogous property of space and would therefore be confusing to drag-n-drop? Are there situations when dragging and dropping a virtual object would make little sense as an interaction method or would be more complicated than other interaction methods? For example, although it may be possible to select dates for a flight or hotel reservation using drag-n-drop calendars, it may not be as efficient or usable to abandon the drop-down lists or clickable calendars.

Drag-n-drop is an effective, easily learned, and relatively common interaction method, and as web technologies improve and grow we will have many more opporunities to incorporate drag-n-drop in our interaction designs for web sites and web applications.