Usually I like to do one tip at a time, but certain situations call for more of an all-inclusive approach.  Chief among them: video.

One of the objectives in our political candidate website usability study was to investigate the extent to which video had an impact on engagement and perceptions about how video fit into the overall experience. Political candidates this election cycle are making aggressive use of video, so it was a valid inquiry when evaluating their websites, and we’ve been aware for awhile that certain firms heavily push video with their website engagements, with little data to support the efficacy or ROI on such a considerable expenditure.

While there were quite a few interesting moments and outcomes of our investigation, the one that stands out most is our conversation with a 30-something undecided voter with a mixed voting history who lives on the East Coast. Our participant, we’ll call him Mr. X, was intrigued by a 5:07 minute clip from a Rick Santorum interview with Glenn Beck on FoxNews.

Mr. X watched the video in its entirety.

Not only that, but Mr. X’s engagement was so high that he moved from sitting up at a desk to laying back in a recliner.  And even further into the clip, he pulled out a blanket and made a pillow with it as he settled into a more comfortable position.

You can see the progression of his engagement below:

At the end of the video, he declared “Oh, yeah!”

He continued, “I was actually starting to get comfortable to watch more [videos] to be honest with you. I, um, you know [the video] was really informative, I loved [Santorum's] body language, the confidence. These are all things that are making me want to learn more about the candidate. So, I think this has been the most powerful marketing tool that he’s got going so far.”

We’re asked quite a lot about whether or not companies need video on their website.  My standard answer is that it depends: what’s the video’s purpose (not just to claim you’ve got a video?), who is going to watch it, and what are their expectations in terms of content?  Then I follow with a discussion of potential points of failure gathered from our usability studies and our own experience developing videos for our customers.

Audience

Based on what we’ve observed in usability studies, there are two kinds of people in your audience:  people who would never consider watching video and those who might, in the right time and place, possibly consider it. As a rule, people don’t go to websites to watch video unless it’s a site whose sole purpose is video, e.g. Hulu, YouTube, Netflix.

There is good news though:  for the small percent of users who watch, video has the power to dramatically increase engagement. And because of that, user experiences with video are an important consideration in the overall experience.

In our studies, only about 25% of participants claim to ever watch video.  In three years, we have not seen this number go up; it’s remained relatively constant.  The most critical factors appear to be 1) whether or not the person has speakers attached to their computer (many office computers do not); and 2) whether the video is personal or professional in nature and how that relates to the venue in which it’ll be viewed (watching personal videos at work is more taboo than surfing personal websites).

Content

Your video’s length and content are the two biggest factors in its success. We used to recommend videos last no more than 1.5 – 2.0 minutes, or no more than 175-225 words, whichever came first. But in recent studies we’ve noticed those videos that perform best clock in at around 1 minute.  The only exception to this rule is for video clips from actual television program broadcasts.  Then you can play as much of the clip as is available and relevant, so long as you advise users about the clip’s length.

Retail marketing websites

• Product demonstration-type videos improve conversion rates (some sources say they double conversion rates).  People like seeing other people using a product, especially when they’re trying to determine fit, size and quality.  Two companies who do this well are Zappos.com and BizChair.com.
• Avoid “marketing videos” (AKA commercials) that are provided by manufacturers.
• “Behind the scenes” peeks that offer a special perspective on the people behind a process, especially if it’s a creative process. For example, furniture maker Thomas Moser features a behind the scenes look how their furniture is made.  While the video is a bit long, as a buyer it’s nice to have a face to put with my new, finely crafted rocker.  I better appreciate the artisan and their work product – and I’m more likely to pay a premium.

Software-as-a-service marketing websites

• A short product demonstration noting key features. In studies, potential buyers often comment that they first compare multiple products and then provide a report to their manager or group before making a purchasing decision.  Several study participants in the past have stated that short videos with an overview of key product features eliminated the task of sorting through a company’s website, making it easier for them to compare feature sets.  Strangely, these videos have fallen out of favor lately, but Zoho CRM has a decent example.

• Testimonials from actual clients and how they use your software in their organization.  My all-time favorites are the testimonial videos from 37Signals, which unfortunately aren’t easily found on their website anymore. Testimonials are powerful, because they demonstrate that 1) someone is actually using the product and 2) the narrative theme often resonates with potential customers in a “ya, I have that problem too!”   I love these testimonials in particular because they promote their customers’ businesses at the same they promote 37Signals’ products.  I love win-win situations like that.

Our Recommendations

1. Keep it short.  Videos that perform best clock in at around 1 minute.
2. Disclose the length of the video adjacent to the title.  For a short video, the disclosure can act as an additional enticement.
3. Decide what type of content will best engage your audience.  Is it a testimonial, a peak behind the scenes, or a product demonstration?  Choose one.
4. Tell a story with a narrative theme. Every video should have an introduction, body, and closing.
• Get right down to business when the video starts playing – “Hi, I’m Angela and today I’m going to go over the key features of Brainiac.” Avoid long musical introductions with stylized title slides.  Get to the point quickly.
• Present content in a structured, linear format.  Even if the video is unscripted, the content should be thoughtful and concise.  Don’t ramble.
• Close with a one-sentence recap and a thank you.
5. Remember that video is a complement to, not a substitute for, content. Be sure the content in the video can be found in other areas of the website
6. Above all, don’t autoplay.  In one of our recent studies, users were deeply annoyed when one website’s video autoplayed. And not one of the users watched the video, even if they watched video on other websites.  Several made comments along the lines of  ”I hate it when they do that.”

Recently I was sitting at a table at a restaurant, when a man pushing a walker approached the empty table next to mine.  He was much too young to normally need such an aid, but his leg was heavily bandaged as if he’d recently had surgery.

It was in the midst of the lunch rush on a Friday, and he struggled to maneuver the walker in the small space. In an instant, the struggle got the best of him and he came crashing to the ground.

Just as instantly, everyone around bounded out of their seats to help. Incredibly, a man behind him caught the falling man’s head before it hit the floor.  My lunch companion and another man righted his chair, helped him to his feet, and got him seated and settled. The whole episode happened in the blink of an eye.  Everything was said and done withing 15 seconds.  And all these actions happened so quickly, that they could not have been conscious behaviors but rather unconscious reactions.

Later, my companion and I marveled at the speed at which everyone responded, which led to a conversation about how Secret Service agents are re-trained to move toward the danger instead of away from it. As humans, our instincts are to move away from danger, but with training, this fear – this intuitive human response – can become an unconscious, learned response.

All of this ties quite nicely into our studies in human factors.

In every study I’ve ever observed or conducted, I’ve witnessed folks engage in unconscious behavior.  I once saw a remote participant pull out a pillow and fully recline his body to watch a video – what engagement! Similarly, I regularly see folks unconsciously make major accommodations for usability problems: writing notes or key data on paper for later use, engaging in a series of rote clicks to get to the desired screen (and they can’t tell me what they clicked on to get there unless they go through the process again), or a myriad of other unconscious learned behaviours to achieve the desired outcome.

Because these learned behaviors have become unconscious, they often go unreported in surveys and focus groups, but they have a huge impact in terms of ROI: some of it positive like increased engagement, and some bad like writing down information needed for entry on later screens.  It’s only through observing people using an application that we can identify these learned behaviors.

When we design experiences, we want to capitalize on the unconscious, learned behaviors we identified in user testing. What we’re saying when we want an application to be intuitive is that we want to avoid putting the user through the trouble of going against their instincts (like the secret service running toward bullets.) Just because a behavior can be learned doesn’t mean it’s desirable.

Are your users operating unconsciously? Or have they developed learned behaviors to combat unnatural experiences?

Have you seen examples of this disconnect out there?  Do share!

Our Recommendation

Build awareness of how users  interact with your software applications by:

1. Uncovering learned behaviors - through usability testing, regular contextual inquiry sessions, and other user observation methods.
2. Capitalizing those intuitive situations – with thoughtful user experience design patterns and by integrating a bit of psychology into user interface design.  Stephen Anderson’s Mental Notes are a great start.

My prized "Jump, Little Children" poster by the Hatch Show Print Company in Nashville, TN

In the experience “layer” of my poster, one sees exciting colors, leading in the typography, the imperfections in its paint. And, you can visually interact with the piece with your eyes–or you can physically interact with the piece. You can hold it, frame it, store it away. Everything the poster is, is technically its experience layer.

In contrast to this, what you DON’T see: the letterpress, the woodblock type in the shop, the process that happened as the poster was created. You don’t see the paper as pulp before it was dried into a sheet of paper. You don’t see the paint being manufactured. None of that would be considered part of the viewer’s experience, at least not directly.

You can tell where I’m going with this: liken this poster to the web, and you can start to pick apart what is the experience–or presentation–layer and what is backend. People interact with your website. They see graphics, color, and things to click on. They click on something, and maybe there’s a transition, or some data is pulled up. They interact with this data, and move their way through a process, accomplishing their tasks (hopefully!) along the way. All of these things that a user sees and interacts with–those are your experience layer, and those are the pieces for which visual and interactive designers, information architects, content strategists, and prototypers are responsible.

The experience layer, whether you realize you’re talking about it or not, is the most obvious candidate when people discuss design or redesign. Business owners aren’t usually talking about rearchitecting all their databases–they’re talking about improving the way a user interacts with your website.  They’re talking about making tasks easier to accomplish and, for the most part, that is accomplished by tweaking and working with the experience layer.

— Frank Lloyd Wright

Recently, we were leaving, or should I say trying to leave, our local Ikea when we were confronted by this paradox: how do we get out of the parking lot where the only exit is to the left, but we are forced to turn right.  No matter what, we’d break the rules.

In our strategic evaluations, we often find similar points of confusion when customers are trying to navigate business processes. We’ve seen them in software registration systems, electronic job boards, mortgage applications – the list goes on and on.

Customers can’t complete task A without completing task B, but you can’t complete task B without data from task C, which depends on completing task A. They’re left in an endless loop, with no hope of resolving their situation without gaming the system (always a problem) and/or outside intervention from customer support – which dramatically increases the cost of doing business.

Eliminating points of confusion improves operational efficiency, profitability, and customer satisfaction.

So how do you eliminate points of confusion? Well, nothing beats a good plan when designing the system. Often circular logic is created by features that are added after the initial requirements and process design when they would be more easily identified. Therefore, we recommend that every new feature added to a process go through the complete development process. Make sure to keep the process flows up-to-date so that problems with new features are readily apparent.

Second, confusing interfaces are things that customers love to complain about because it makes them feel smart. Monitor your customer support calls and emails to see what users are complaining about. And you can also get their feedback in monthly contextual inquiry sessions with actual users.

Our Recommendation

Eliminating points of confusion is a two fold function:

1. Heading off problems before they start with a system of checks/balances for business logic, as well as a general awareness about points of confusion.  Good requirements gathering, process flow definitions, effective QA practices and key staff blessed with an aptitude toward logic, thoroughness, and reason are the best tools.
2. Identifying existing problem areas.  There are a variety of methods for identifying problem areas, including monitoring customer support calls,  monthly contextual inquiry sessions with actual users, and regular strategic evaluations focused on key areas of concern.

Related UX Tips

• Identify Opportunities to Reduce Friction
• Keep Icon Metaphors Obvious & Direct

Today, we’re publicly rolling out a project we’ve been working on for a more than a year.  It’s called Brainiac, and it’s a framework of reusable modules including a content management system, eCommerce capability, CRM & reporting functionality, and a learning management system – all built using the latest technologies.  Like everything Normal Modes does, Brainiac is built for usability & the user experience.

Why did we develop Brainiac?

In the fall of 2010, we had several different clients approach us about the challenges they faced delivering continuing education training online.  The effects of the recession were still painfully impacting their businesses, and they reported their industries were shifting to online course delivery.  Our clients reported a variety of technical challenges that kept them from effectively meeting the needs of students. We’ll cover the specific challenges in a later post about the LCMS module (it’s a complicated issue), but one of the biggest challenges was a question of scope.

In order to market and deliver continuing education online, companies must have:

• a marketing website that tells about the company as well as courses offered. Each course must have a landing page that can be used for AdWords;
• the functionality to sell products like books and supplemental learning aids (charts, flashcards, etc), as well as the ability to fulfill those orders either with on-demand PDF and/or order management software;
• the ability for students to have their own portal to login, buy and take courses, track orders for books, and download course certificates to send to their HR department.  Many of these students aren’t regular computer users and aren’t comfortable with completing courses online, but are forced to because of budget constraints;
• a robust administrative portal that acts as the interface to a variety of business and marketing functions.

Of course, along with all this functionality is a whole bunch of server and database work.

So, the challenge of creating a usable learning content management system (LCMS) is formidable, not least because a good LCMS like these companies need is really comprised of four parts – content management system (CMS), eCommerce, CRM & reporting, and learning management system (LMS) – all of which must be built to work together as a team to successfully deliver continuing education online.

Using our user-centered design methodology, we created Brainiac as a set of modules that work together to create marketing websites and web applications.

At Normal Modes we advocate the minimum viable product (MVP) approach to software development that allows us to roll out projects in successive phases, building each layer of functionality upon the next while focusing on the user experience throughout the project lifecycle.  In our view, the earlier we can get new features in the hands of actual users, the better the overall product will be.

Because of this project methodology, we don’t like monolithic software. We like to design software that does exactly what is required without a lot of bloat. As a wise man once said, “there are no bugs in the code you don’t write.” Hence, Brainiac developed as a lightweight framework with several optional modules that are only installed when needed.  This allows us to reuse components of Brainiac for a wide variety of software applications. Ultimately they can work together to be a full LCMS, but they can also simply work as a content management system for customers who need a marketing website, as a custom eCommerce system for our customers whose needs exceed the capabilities of entry-level eCommerce platforms like Shopify, or as a custom web application.

Brainiac’s key modules are:

• Brainiac Content Management System (CMS) - The foundation for a product like Brainiac is really the CMS. Practically every agency or development team has one, with some far better than others. The content management system is the core functionality that allows folks to update a website without the hassle and expense of contacting us. We’re already rolling out marketing websites built with Brainiac CMS, and we can’t wait to share them with you.
• Brainiac eCommerce - All of our early research indicated that continuing education providers had, or wanted to have, the ability to sell products online.  Many courses have optional textbooks or supplemental materials these CE providers have carefully curated over the years, and quite often these providers are the sole source of materials. Nevertheless, selling products online presented additional administrative burdens.  Most eCommerce solutions aren’t integrated with course registration processes, which limits cross-selling or upselling opportunities. Moreover, their use is often so convoluted that organizations are forced to outsource the entire fulfillment process, resulting in low conversion rates and poor profit margins. Brainiac eCommerce addresses all these concerns, providing flexible and robust eCommerce capabilities, all hosted on PCI compliant servers.
• Brainiac CRM & Reporting - Our LCMS customers also needed a method to track their students and courses. Most had an existing CRM system that was expensive to maintain and difficult to use, and where access was limited to a few users within the company. When we designed Brainiac, we developed a basic CRM that could be used either alone or integrated with an existing CRM – the most popular being Salesforce.com, Microsoft Dynamics CRM, and Sugar CRM.  And by building the CRM functionality, we could easily add WOW features like reporting, which varies according to the goals and needs of the website.
• Brainiac Learning Content Management System (LCMS) - The LCMS/LMS is the most complete implementation of the Brainiac framework using all of the core modules as well as the customized LCMS module.  The LCMS module allows companies to place educational courses online in a variety of formats and for students to subsequently view the materials, take tests, and download a course certificate.

Of course, lots of software packages have one or more of these capabilities. But the problem is that they’re usually designed to be configured at run time by someone with limited technical skill. That means that the system is always running a lot of code to support its configurability, even when it’s configuration is fixed and it’s running in a production environment. The approach we took with Brainiac was to make it configurable at development time when the technical experts are building the system. By componentizing the functionality into reusable modules, we’re able to build up a system like Legos, and it only ever runs the code it needs. This means that a Brainiac system will run faster on lesser hardware than a typical CMS platform.

What can Brainiac do for you?

We already have clients using the core modules of the Brainiac Framework like Brainiac CMS, Brainiac eCommerce and custom Brainiac solutions, which is super exciting for us.  And we’re looking for several more companies to participate in a beta for our Brainiac LCMS module, in particular a company with a single training course sold in volume, a second with a set of group of courses that forms a single certificate program, and a third with a larger catalog.

If you or someone you know could use Brainiac, please get in touch.

Related Links

• Brainiac Framework - including CMS, eCommerce & custom solutions
• Brainiac Learning Content Management System

Of all the tools we use in web development, CSS is the most susceptible to entropy: the idea defined by the second law of thermodynamics that the amount of information required to completely define the system is increasing. In other words, the quality and complexity of your CSS will only get worse over time.  

Programmers make use of object-oriented concepts like modularity, abstraction, and inheritance to reign in entropy in application logic, but such concepts aren’t natively supported by the CSS language and language enhancements like Sass aren’t yet widely accepted by CSS authors.

Why should we avoid CSS entropy?

CSS entropy leads to code bloat, and code bloat is a hurdle to building CSS that is scalable across many pages, many developers, and many users. Obviously, bloated CSS means that you need to download larger CSS files to the user’s browser, meaning greater server and bandwidth requirements, slower page rendering times, and lower page speed ratings from Google. It also increases the number of CSS classes that your developers need to understand in order to code up a page.

Code bloat vs. CSS entropy

Although code bloat is the most readily identifiable symptom of CSS entropy, I want to distinguish between the two concepts. Code bloat encompasses all those extra lines of CSS that separate the current, complete representation of the CSS for your website, from the ideal, minimal CSS required to completely represent your website. In other words, if the ideal, minimal amount of CSS required to represent your website completely is 16Kb, and your current CSS files are 64Kb, then you’ve got 48Kb of bloat.

Code bloat is a static concept, whereas entropy includes an element of time. It is the nature of CSS that it becomes more and more bloated over time. It’s important to make this distinction because we need to be adopting practices in our CSS that reign in CSS’s propensity to bloat as well as the bloat itself.

So how do we do minimize CSS Entropy?

1. Avoid using ID tags in CSS selectors. ID tags are not reusable by definition. So every time you use them in your CSS, you are creating an opportunity for entropy. Sure, you can make a good argument that the wrapper div is unique on a page; and that the drop-down navigation is unique as well. But then you get into grey areas, where more often than not, you’ll be wrong in your assumption of uniqueness.
2. Define your basic CSS classes before you start laying out pages. Too many CSS classes are created as one-offs to style a single page. You already know you’re going to need an array of button styles, form elements, and a couple of different table styles at the start of the project, so design them up front. This way any customizations you need to make down the road can build upon the existing classes, instead of being built from scratch. Moreover, a strong set of basic CSS classes encourages reuse and discourages customization. The best example of this approach that I’ve found is the MailChimp Style Guide.
3. Make your CSS more object-oriented by breaking up your CSS mega classes into small, reusable components. We’ve all seen mega classes like .users-table or .registration-form that define every structural and aesthetic attribute of the HTML element. The thing is, if there’s a users table, there’s also often a products table or a posts table. By separating the structure of the component from the aesthetics (or context) of the component, you can create CSS classes that have a lot more potential for reuse.
4. Use CSS language extensions, like Sass, smartly. Sass is great for creating modular and DRY CSS, but it also contains within it the power to generate enormous bloat. Mixins, by nature, create redundant lines of code that must be downloaded to the browser. The @extends directive is preferred because it creates a shared class definitions. And while I love the logical organization allowed by nested class definitions, I’ve found they encourage mega class definitions, rather than small reusable components. (Nesting also increases the number of comparisons the browser must make to match the CSS class to the HTML element, thus slowing rendering time.)

Our Recommendation:

Actively resist CSS’s tendency to degrade by adopting CSS policies that discourage entropy by encouraging class reuse.

If you liked this post, then you’ll love our Scalable CSS Frameworks webinar.

March 8, 2012 at 12pm CT. If your development team is struggling to make your current CSS work, or Google is penalizing your site for slow downloads, you can’t afford to miss this webinar. Learn more

Friction is anything that gets in the way of getting tasks done. And one of the best ways we make an experience better is by looking for opportunities to reduce friction.

For example, this is the automated attendant at a parking garage near our offices. There’s so much friction to completing the task of inserting a ticket and paying by credit card that the parking company has supplemented the interface with a note – complete with numbered bulletpoints and  strategic highlighting – to explain how to operate the machine.

In this example, much of the confusion is created by the machine’s three different card slots. (Two on the right, one on the left.)  Imagine how much simpler it would be if there were only one ticket and credit card entry slot?  Why do you suppose there are three?

Note, too, that the handwritten instructions create additional points of friction.  While the word yellow is highlighted in yellow, the word green is also highlighted in yellow. And the word white is highlighted in pink.

Points of friction aren’t always so obvious.

Every application has points of friction, though some have more than others. Oftentimes we’re not aware of the friction points until we see the users of our application in action.

One way to identify points of friction is with a usability technique called contextual inquiry, in which users are observed completing tasks in their natural setting and asked probing questions during the process.

So, in parking meter example above, the observer would actually stand by the parking meter and watch people use it, asking questions as needed along the way. During the observation, the observer should take detailed notes, which include:

• the sequence of tasks (pulls ticket out of ashtray -> inserts into box 2 -> stops to read sign -> pulls credit card out of wallet -> notices flashing light -> restarts process -> etc…);
• points of confusion, along with any user articulated expectations for how interface should work;
• failed attempts vs. the total number of attempts to complete the process in order to estimate how many attempts are required to figure out the process; and
• any other observations that would reduce confusion or increase the usability of the application.

Our Recommendation  

To improve the user experience, look for opportunities to reduce friction.  Every team member should make it a habit to spend at least 2 hours each month watching real people using their applications, a process known as contextual inquiry.

If you liked this recommendation, then you’ll love our Ultimate UX Bootcamp

March 15-16, 2012 in Houston.  Featuring boots-on-the-ground data about specific UX & usability practices you can put to use right away. Learn more

Related UX Tips

• Provide Sufficient Form Field Lengths
• Keep Icon Metaphors Obvious & Direct
• Provide a Text Link to “Home” in Primary Navigation

From time to time, we hear about teams who are asked to deliver metrics that demonstrate the value of UX. Unfortunately, the basic metrics of the web like click-through-rates and subscriptions aren’t applicable to most software development. Oftentimes the request comes on the heels of a successful, but expensive, initial UX initiative when the team goes back to management for funding for future phases.

Defining one “correct” formula to calculate ROI can be a bit tough since the components of ROI change with every company/project.  

For example, the metrics of success for an oil trading platform are measured in absolute dollars ($), while the metrics of success on a usability for electronic healthcare record project might be measured in terms of $ and lives.  Our engagement with the Department of Veterans Affairs in Houston, for example, was designed to save $5-10 million/year AND 50-100 veteran lives.

For some companies, the key metric might be revenue for the company through new customers, with cost savings associated with additional operational efficiencies.  Sometimes this can be extended to non-dollar factors like lives saved, disasters averted (oil spills), and people influenced (e.g. politicians),  among others.

That said, ROI is always calculated in terms of increase or decrease of a key variable.

These increases and decreases usually fall into one of six categories:

• Increased sales - either incremental revenue from add-ons or through an easier sales process, which is typically called “conversion rate” though that often gets mixed up with “website conversions”.  The metrics for this are typically found in the sales and finance department.  Coupled with the estimated costs of usability testing and UX development, you’ll be able to work out over what timeframe it will take for the UX work to pay for itself.

• Increased productivity - Most often found when there are large pools of employees completing certain repetitive tasks. Metrics are found in operations, HR, and finance (for overhead items like office space, equipment, etc.)  For example, if you optimize the UX on a series of screens so that what was once a 5 minute task is now a 2.5 minute task, then you’ve increased a person’s productivity by 100%.  That’s huge.  HUGE.  If the company has 100 phone agents who have an average salary of $40,000 + benefits (~$8,000) (+ an unknown amount for overhead), you could either release or retask those agents on other activities with a savings of $2,4000,000/year. (half of 100 agents x $48,000)

• Increased customer satisfaction and loyalty - This is extremely difficult to measure, and should be used as a primary cost justification only in extreme cases.  That said, one method of measuring customer loyalty is in terms of customer retention.  (Important especially in organizations that know when their customers are most likely to defect to a competitor or a more mature product offering.)  The calculation takes into account the cost of new customer acquisition and amortizes the cost over the average customer retention period. Increasing average customer retention is a cost savings for the company, and can cost justify UX & usability work related to customer loyalty.  The metrics of success will come from sales and marketing.

• Decreased training and support costs - If customers generate calls or support tickets or other uncompensated overhead costs to the business, then those costs should be measured.  The easiest way to do this is how airlines handle the it.  When a passenger, for example, calls an agent to check flight status, the airline knows how long that call will last, and based on the average cost/minute for phone agents (including salary, benefits, and overhead like the phone line, office space, electricity, etc), the airline can assign a $ value to the cost of the call.  Because airlines handle large volumes of calls every day, if there is an increase of 2500 check flight status calls/day at a cost of $2.00/call (theoretical cost!), then we could expect that would increase uncompensated support costs by $5,000/day.  If the airline wanted to do a $50,000 eye tracking usability study to get that number down to 1225 calls/day (assuming a clean 50% improvement), then that usability study would pay for itself in 20 days.

• Be wary in cases where training and support are part of the company’s core business model – otherwise it doesn’t make sense to decrease these costs, (i.e., if the company’s revenues are earned from consulting)

• Decreased development time and costs - Measured in terms of development resources and time to market. For example, if moving to a system with design patterns and object oriented CSS will decrease the need for an additional UX hire and 5 developer hires (a reasonable ratio), then that’s a cost savings of all of those non-hires salaries + benefits + overhead (computers, software, office space, desk, etc).  Similarly, if a strong UX framework decreases the development time from 6-months to 3-months for a project that will increase revenues by $100k per month, then bringing the project to market 3 months early adds $300k to this year’s revenues.

• Decreased maintenance costs - Again, this is a function of the number of developers needed to complete project work.  Bad UX is often a reflection of poor design and complexity in the underlying code. A hallmark of good UX is the elimination of unnecessary or marginal features. This reduces the complexity of the code base, making it more robust and less buggy. As a wise man once said, “there are no bugs in the code you don’t write.”

Always estimate ROI in terms of annual dollars.

Of course, all of these increases/savings must be compared to the costs associated with UX, usability, and development endeavors.  I recommend that all metrics be stated in the terms of increases/decreases over the course of a year – annualized costs – because that’s a term the folks in budgeting will understand, and a dollar amount that provides the most realistic impact.  (Not too much, not too little.)  So, if your project is designed to increase revenue by 20% on a million dollar revenue stream, then the dollar amount should be reported as “$200k annually.”

DO NOT wait to estimate ROI on an ex post facto basis.

I always recommend the estimated ROI for UX & usability projects be accounted for at in the project proposal or requirements phase, in order to avoid the ex post facto “prove the value of this project” situation many teams find themselves in at the end of the project.  When ROI isn’t calculated in the project vetting phase, it’s really easy to disagree about the metrics of success – what was the business objective?  cost savings or revenue generation? – and thus dismiss the value of the work.  Also you get in a situation where perhaps multiple factors for revenue and saving costs are at play, and then you’ve got a real mess to sort out in terms of reporting a “value.”

Ideally, every single potential project should be assigned an ROI value – either in savings or revenue – and projects would be racked and stacked according to that metric and complimentary fits,  e.g. If I’m already making a change in feature X, then I can combine that work with features Y & Z to be more efficient.

Calculating ROI on UX & usability projects helps get projects funded.

Finally, in organizations where usability is a political issue, the ability to assign a dollar value to UX & usability projects helps win over even the most skeptical critics.  Most often these critics see UX as an intangible, frivolous “design” activity.  When we approach these critics with a robust project plan to improve things – along with a hefty price tag - it’s easy to  say no to something that’s intangible and frivolous.  But if we approach them with a project plan that states the project costs and benefits in terms they understand, then we’re improving things for everyone – the critics, the users, and ourselves.

If you liked this post, then you’ll love our Ultimate UX Bootcamp

March 15-16, 2012 in Houston. (It’s a great time of year to visit!) Featuring boots-on-the-ground advice about what specific UX & usability practices companies can quickly and cost-effectively implement. Learn more