Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.

This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.

So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

Websites vs. Web Applications

Confusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.

A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational.

CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.

Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.

Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.

Different Types of Web Applications

Business applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.

We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.

I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.

First, Know Your Users

You’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”

When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).

How to Identify Users?

Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.

If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.

Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.

Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.

Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.

Design Process

You can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.

So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.

Sketching

Sketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.

Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.

Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes.

Sketch by Jason Robb.

Interesting reading on sketching and wireframing:

• Tools for Sketching User Experiences
• 20 Steps to Better Wireframing

Prototyping

The next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).

Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint.

An Axure interactive prototype for an e-commerce website, by e-maujean.

Further reading and tools for prototyping:

• 5 Useful Online Tools for Web Design Planning and Prototyping
• A Practitioner’s Guide to Prototyping: A book from Rosenfeld Media
• 16 Design Tools for Prototyping and Wireframing

Testing

Prototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.

One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it.

Snapshot of usability testing for Delicious, by (nz)dave.

Further reading:

• Why You Only Need to Test with 5 Users
• Usability Testing Demystified
• The Myth of Usability Testing

Design Principles

There are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.

No One Likes Surprises

Probably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.

A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions.

Although a simple example, SprinklePenny achieves consistency and familiarity across the application.

Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.

A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.

All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.

Further reading:

• Designing and Selecting Components for UIs
• Why Consistency Is Critical

Users Should Be Able to Be Efficient

Without a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.

Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on.

Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.

Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.

Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.

A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.

Help!

An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.

We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.

Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).

Further reading:

• Forgiveness in UI design
• Handling User Error with Care: Getting Users Back on Track

Can’t Get No Satisfaction

Satisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects  satisfaction. And a few more principles are worth mentioning here.

Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem.

BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.

Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.

In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.

Further reading:

• 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces
• Restraint
• In Defense of Eye Candy

Other resources related to UI design:

• 8 Characteristics of Successful User Interfaces
• Principles of User Interface Design (Wikipedia)
• 10 Principles of the UI Design Masters
• 20 Websites to Help You Master User Interface Design

Essential Components Of Web Applications

Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.

Web Forms

Forms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.

Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.

Master-Detail Views

This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.

Dashboards

Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.

Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.

Heavy Use of Tables

Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.

Tables can also be interactive, meaning they can generate additional info and even modify the data they contain.

PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.

Reports

Most businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers.

FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.

Don’t Forget UI Design Patterns

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.

Further reading:

• Designing Web Interfaces: Principles and Patterns for Rich Interactions
  A fantastic book that covers more that 70 Web design patterns.

Case Study: Online Banking Application

To take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”

After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.

Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.

Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.

Final Thoughts

Designing user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.

While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.

User experience designers are great at making software friendly and usable for new customers. We design clean, clear sign-up forms, smooth on-boarding experiences, and even helpful blank slates once users are inside the app. Once customers have used the software for some time and have integrated it in their workflow, their relationship with the software becomes more complex. UX designers have no stencils for designing “how the customer feels about the software after six months.” This matters because the software-as-a-service (SaaS) model depends on loyalty, on the idea that customers won’t flinch when they see your monthly charge.

Competing On Service

Initially, all markets compete on price. However, competing on price simply isn’t relevant with Web apps, because they are all in the same $0 to $99 per month bracket. Think about it: what sane person would switch project management tools just to shave ten bucks off their monthly costs?

We have reached the point where the service part of SaaS is most relevant, the point where the experience your customers have with your company will determine whether they stick or switch. Say you’ve been paying $50 a month for your time-tracker for the last three years. Have you enjoyed the service? Have you ever been personally thanked for your loyalty? Do you feel that the provider values your $1,800?

Customers Who Don’t Feel Valued Leave

The Rockefeller Corporation studied why customers leave one company for a competitor and found the following:

Look at what’s not here. No mention of price or quality. How you make customers feel is what drives their loyalty, and it’s here where website owners are in trouble. Website owners are disconnected from their customers, save for a conference party or survey each year. If you asked them to introduce you to 10 of their customers, most would struggle, grimace and then get a developer to break out the SQL. Imagine trying to run a bar, convenience store, hair salon — heck, any service — with that level of apathy towards the folks who pay your wages. It shouldn’t be surprising that your customers are willing to jump ship the second a competitor launches a sexy iPhone app. If you’ve never cared about your customers, why would they care about you?

Warren Buffett talks about building a moat around your business to make it untouchable. The strongest moat you can build is one based on strong relationships. Low prices can always be beaten. Stunning design ages quickly and can easily be copied. Impeccable uptime can be matched, and your features copied. However, a good customer relationship is unique, and loyal customers are hard to steal.

Some Things You Can’t Wireframe

Wireframes and mock-ups are excellent for figuring out and discussing screen layout. You can follow all the rules of wireframing to create a compelling user experience, but you can’t wireframe how a customer feels after 15 months of using your software. To deliver a compelling experience, you need to also consider “touchpoints” and “timepoints.”

Touchpoints Make It Holistic

Touchpoint diagrams help you see the various ways in which customers come into contact with your software. The diagram above from a holiday home website shows that the mobile experience is bad for non-iPhone customers, and that email and phone support should be improved. An amazing website is of no use if your call-center staff is rude or your developer is a jerk to customers on Twitter. Great experiences are about getting everything right; it goes well beyond fancy sign-up forms, cute mails and game-ified tutorials. Sure, all those things help, but the customer experience has to be comprehensive. Quality is fractal. Your customers will judge your company based on all of the experiences they have with it, not just those dripping with CSS3 effects. Using a touchpoint matrix such as the one above will help ensure that you’re considering all of the experiences your customers will have.

Timepoints Make It Long Term

Anyone who has relied on metrics for customer acquisition will be familiar with some variant of the funnel above. We start with a lot of visitors, and convert a small few of them into customers. While this scenario is rather contrived and rosy, it does provide a way to measure different parts of your Web app. It does not, however, look at what happens next. If you ignore your paying customers, and they hear from you only through their invoices, then you can expect the relationship to deteriorate over time. Here’s how that goes:

We need it to go more like this:

Improving Your Customer Experience

Achieving this requires that you put a plan in place and put someone in charge of customer communication. There is no universal method that works for all software; it’s an iterative process. Your customers need just enough personal communication to feel valued, while not feeling like they’re being nagged constantly. As a start, I’ve prepared the simple questions below; someone on your team should be able to answer yes to all of them.

Test Your Relationships

• Do you greet new members, introduce yourself and let them know that they can contact you at any time?
• Do you check in with them after they’re settled in to see how they’re doing and to see whether they’re making the most of your app?
• Do you talk to your users about new features before and after implementing them?
• Do you send them the right types of messages at the right time?
• Do you check in with your customers after their first year to thank them for their loyalty?
• Can you easily tell the difference between your most loyal customers and yesterday’s sign-ups?
• Can you tailor your communications to different types of users?
• Can you name 20 of your customers and tell me something about them?

There is no shortage of questions you could add to this, but I find this initial set is enough to distinguish those who genuinely care about their customers.

Cut The Excuses

There are plenty of reasons why one might believe that this change is too hard to make. App owners will argue that their time is better spent adding features and fixing bugs. This is only partially true. Your customers are with you now without those planned features and with those bugs. I’m not arguing that you should ignore these tasks, just that those tasks are not the only important ones. Recall why customers leave: it’s not likely just because your competitor has launched an iPhone app. That’s one straw, but the camel’s back is already overloaded.

What If I Don’t Have Time?

Do you not have time to invest in keeping customers happy? The rule of retention is that you must be willing to spend as much to keep a customer as you did to acquire them. Leaky buckets don’t fill up quickly. Software such as Intercom makes this degree of customer insight and communication far more manageable. (Disclaimer: I believe in this so strongly that I now work full time on Intercom.)

Intercom is the first of a new wave of tools aimed at enabling Web app and website owners to get to know their customers.

Too Much Feedback?

No one can afford to ignore their customers. This doesn’t mean that you must do everything they say; it means you should listen and respond. Too much feedback is a good problem to have. Rather your customers tell you what’s on their mind than silently disengage, forgetting about you until their credit-card bill arrives. By that point, you’re already history.

Delivering Customer Experiences

For one year straight, I spent one day every week speaking with customers of one of our apps. Before I started this, they were simply rows in a database. By the time I was finished, I had had a conversation with over a thousand people. I heard about what we got right, what needed improvement, and why we were losing customers. Very useful stuff.

Users were delighted to hear from us, because it reminded them that we’re more than a set of pages and a monthly debit. We started a customer blog and featured a few customers each week. We also added their logos to our home page. To customers, this is the business equivalent of being taken home to meet the parents. It shows a real personal commitment. These actions persuaded our customers to give honest regular feedback and to let us know when we disappointed them. We’d rather they say it to us than run into the open arms of a competitor.

Wufoo sent all of its customers Christmas cards in its first year. That was a huge hit. It was hardly surprising that by the following year they had too many customers to do it again. As a start-up, you have to play to your strengths. A small customer base offers you a big opportunity to deliver amazing service. Scaling that experience can be tricky. There is software that will help, but, again, solving this is no small challenge.

Start It Today

As a simple next step, why not take your first 10 and most recent 10 users, drop them an email, and ask if they’ll take a phone call. Let them know you’re there and that you’d love to hear their thoughts. You’ll be amazed at what you learn, and I doubt you’ll stop at 20.