Interface design for business Web applications

Interface design for business Web applications

The design of business Web applications is often overlooked. I see a lot of programs that do not meet the business goals or the needs of users, they have a poor user experience, and caused a loss of commercial profits. More exaggerated, some designers are not involved in the whole process of the development process, but the entire responsibility to the developers.

For engineers who are good at front-end and back-office technology, they lack the design capability to accomplish this difficult task. Dissatisfied consumers, frustrated users, and failed projects naturally appear.

Next, we'll introduce the basics of the business Web application interface design. Generally speaking, people can provide many methods, techniques and guidelines about interface design, and here, our focus will be on business Web applications.

I. Web and Web applications
It's easy to confuse web apps with Web sites, just like a mix of user interface design and web design. In fact, they are very different in nature and other aspects, this article will discuss with you.

A Web site is more like a collection of Web pages, mostly static text, images and video, and so on, with limited interactivity (except contact forms and search features). The main function of the website is to provide information. Although some websites use content management systems to provide dynamic text, they are still information in nature.

CampaignMonitor is a powerful email marketing software, and Jeff Sarimento's website tells readers about his work and life.

Web applications, on the other hand, are dynamic interactive systems that help businesses accomplish important business transactions and evaluate and improve their own productivity. Therefore, the primary role of Web applications is to meet the needs of different users according to clear business rules.

Web applications have higher requirements for users in terms of participation and knowledge storage. Rather than just accidentally using it, these users evaluate it as a platform for accomplishing important day-to-day business. In short, when they do not understand the operating mechanism of a program, they will not casually. This is often the case for websites.

1.1 Different types of Web applications
The business scope of Web applications can be from invoicing for freelancers, to content management, file management, banking and financial systems, and so on.

We can differentiate between open and confidential applications. In an open program, users can easily access other registered users. They can use these programs online, choose to sign up for a free account or a billing account. Confidential applications are not normally allowed to be used outside the company. Outside, they are just an "offline" program (although many systems show some functionality to business partners through services or proprietary interfaces). Such programs are typically run only within the company's internal network, and are available only to employees.

I don't know who created the word weblication, at least at the moment I like it, it describes what a Web application is. But that doesn't mean a Web application is a simple mix of web sites and programs, and it's a lot more complicated than that.

Two. Understand your users first
You may have heard it 1000 times, and you have heard the reason why you have followed it. This is "a successful user interface, be sure to take the user and their task as the core." This is also the key to why many developers are not able to create a good user experience. As Steve Krug says, "Developers like complex things, and they enjoy the process of discovering how things work." ”

In the identification of users, avoid, customers are not users, you are not. Although the customer's management is usually interested in the project and trying to influence your decision, remember that they will not use the program for hours every day (unless the program is specifically designed for them).

2.1 How to identify users?
There are many ways to identify users, such as user interviews, business stakeholder interviews, and shadow user observations (the "shadowing" method of observation). "User Interviews" let you understand the user's knowledge of the program and the computer, and through "user observation" can be more detailed information, such as how users do the task, what they have made mistakes. "Shadow user observation" is called this because the observer needs to be like the shadow of the user, as inseparable, pay attention to their every step of the operation.

If you don't have a real user, either because you don't have permission or if you're designing an open application, you can use personas to help you identify users. "Personas" are representative of real users, who have their habits, goals, motivations, and so on. You can create personas by leveraging the user information you get in your Business Analytics reports. If you're not familiar with this approach, Brand Colbow's comics will help you.

Task analysis helps you determine what tasks users need to accomplish at work, how they do it, how long it takes, and what errors they make. Sometimes the user is using the old program you are going to update. You can just take advantage of this old program to see how users operate. This will make it easy for you to understand their tasks and the challenges they face.

To be sure: no matter who your users are, in general you must consider both novice and expert users. Make "novice" get started as soon as possible, "expert" completes the task efficiently, perhaps means to design the interface for them individually. But in many cases, you have to use a variety of techniques to ensure that different types of users use the same interface properly, such as hiding advanced features.

These studies are usually done by market analysis. But when no one is in charge of the business, you should do it. Once you have the necessary information, you can design it.

Three. Design process
When designing a user interface, you can choose one of many processes to execute, or you may already have a process. But I suggest you choose a more convenient method. You may ask why. This is because for users (and customers), the final user interface is what they see. Essentially, they don't care about your sketches, superb backend technology, and powerful servers, they just want to see the user interface.

So how does this approach work? Mainly through its core principles: iteration. Each iteration includes all the phases that you define in the process. This means that at the end of the first round you will have a product that can be tested: prototypes.

3.1 Sketch
Sketches can be an effective way to develop ideas. We seek solutions by drawing different concept maps. Most sketches are discarded, but it doesn't matter. As Bill Buxton in his book, "Sketch of the hand-painted user experience", "sketches are quick and easy to handle, which is why they are so powerful."

is the sketch the same as the wireframe? It seems that the difference can be overlooked, but I don't think so. Wireframes are not used to get rough ideas, but to extend them. You can read the wonderful discussion on Ixda: sketch before the wireframe.

Once you've drawn the "right" sketch, or at least you think it's right, you can create a more detailed wireframe, or simply create an interactive prototype.

A sketch of Jason Robb.

Interesting readings on sketches and wireframe:
• 35 excellent wireframe material
• Tools for drawing user experience sketches
• 20 steps to help you improve the quality of wireframe

3.2 Prototypes
The next step in the process is to create prototypes to simulate real-world programs. Prototypes can contain one or more interfaces (or all of them), and they simply simulate the behavior of a real program, allowing the user to feel that the program is actually running. But in fact, they did nothing. Prototypes can also perform some functions, such as complex operations, if needed.

The Web page prototype is temporary, and its purpose is ultimately to validate the idea. Because you don't have to spend time writing code, you reduce the cost of making mistakes. You're going to throw it in the end anyway. You can also use specialized prototyping tools, such as axure, and some people even use PowerPoint to make prototypes.

An interactive prototype of an E-commerce Web site made with Axure, E-maujean provided.

Additional readings and tools for prototypes:
• 5 online tools for Web site planning and prototyping
• Prototype Manufacturing Guide: Rosenfeld Media
• 16 Prototypes and wireframe Tools

3.3 Test
If you don't test prototypes, they won't work. In fact, the test is not a difficult job. Jakob Nielsen and Steve Krug support a method called "Easy Usability Testing" ("Discount Usability Testing"), which is inexpensive, convenient, and provides valuable advice for your design decisions. You can also use test results as a basis for another iteration. You should at least test this before a major problem is solved. We know that the time and budget of software projects are very tight, so in order to be more efficient, the sooner the test is more frequent, the better.

Steve Krug's new book, "Make Difficult work easier" ("Rocket Surgery Made Easy") is one of the best things about "easy usability testing," find a read.

The photo content is about the delicious usability test that Dave (New Zealand) offers.

Other Reading materials:
• Why you only need to test 5 users
• Decrypt Usability testing
• The myth of usability testing

Four. Design Guidelines
Many design guidelines are prevalent, but they do not seem to agree. We're going to put aside those strict definitions and take you through them simply.

4.1 Nobody likes to be scared.
The key to a good user interface can be said to be "consistent" and "friendly". The user interface should remain consistent within the program, such as navigation and color matching. This is internal consistency. In addition, packaged programs and systems should be consistent with each other in the user interface. A typical case is Microsoft's Office suite. This is the external consensus.

An effective way to ensure "consistency" is to develop user interface design guidelines for each user interface for each or group of projects. Every detail should be designed to follow it. Not only does the design guidelines keep the interface consistent, it also helps team members understand your decisions better as a documentation.

As a simple example, Sprinklepenny is "consistent" and "friendly" throughout the station.

A consistent user interface is easy to use because users can identify parts of the program based on previous versions of their experience. "Friendly" in a sense is easily confused with "consistent". The "friendly" user interface extracts information from the user's past experience and creates a plausible metaphor. A folder, for example, is a familiar metaphor for a filegroup that replaces the "directory" used in previous command-line interfaces. In short, is to use the user's own language.

Many corporate leaders share a common understanding that a good user interface looks like the Microsoft Office series, especially Outlook. I don't want to say how meaningless it is. Here, I propose a different suggestion: to follow the "user-centric" approach and explain why applications designed for employees, customers, and partners (i.e. their users) are important.

However, because of the different workflow, the situation of most enterprises varies. For example, two companies from the same industry may have different workflows. This will force you to go beyond yourself and start to innovate. This part of the design process is quite attractive, and of course you have to be more confident in the degree of innovation.

Other Reading materials:
• Design and select components for the user interface
• Why it's important to agree

4.2 Users should be efficient
There is no doubt that users should be able to use business applications efficiently. That's why they pay, and what managers expect. The user interface should allow users to work efficiently, accomplishing tasks in the simplest and quickest way. But in fact, this is not always the case. The developer has an idea of thinking and action. They think: The background of the user interface should be as complex as possible. No matter how absurd it may sound, the problem is already there and it can be a headache. This is why it is necessary to have good communication and cooperation with the developers.

Users should be efficient when completing specific tasks. As mentioned earlier, task analysis can help you determine the task and how the user completes it. If a task takes time, it needs to be broken down into smaller tasks so that the user doesn't feel like it's time-consuming. You can also improve efficiency by providing keyboard input and shortcut keys. Imagine how much time the user had to switch back and forth between the mouse and the keyboard. In some cases, you need to design for users who are accustomed to the command line interface, and they strongly want to support keyboard input. Give you a suggestion: When you define a shortcut key, you should use the same shortcut key as your favorite program. For example, Ctrl + s should always be "saved" and so on.

The table in Google Docs provides users with keyboard shortcuts and shortcut menus, and draws on user-familiar desktop programs that enable users to perform their work efficiently.

Personalized customization can improve user efficiency. Users customize the interface, not only will be faster, but more importantly, in the use of more confidence. Personalization can be seen in many ways: selecting the modules in the dashboard, defining shortcut options and Favorites, changing the order of components, and so on.

Be aware of accessibility. Although many people think that "accessibility" is not important in Web applications. But that is not the case. Treat it like the accessibility of a public Web site.

Web applications must also be efficient in processing information. Therefore, the resource-consuming interactions of local rendering and AJAX requests require careful use.

4.3, Help!
The interface should provide effective feedback on what state the system is in. If an error occurs, you should notify the user and try to recover. If the program is running, you need to notify the user of the progress.

We can further say that the user interface should prevent users from making mistakes. This rule is called fault tolerance, and the confirmation dialog box, undo option, intelligent input (forgiving formats) are followed. Fault tolerance allows users to use programs more securely, reduce learning costs, and improve overall satisfaction.

Because Web applications are complex, you also need to provide a comprehensive help system. This work can be done by internal help, supported databases, knowledge bases, or wizards (including video, images, and text).

Other Reading materials:
• Fault tolerance in user interface design
Web Form confirmation: Best Practices and tutorials
• Handle user errors with care: Users back on track

4.4 Customer Satisfaction
Satisfaction is a more subjective term, which refers to the user's pleasure in using the interface. Each of the design guidelines we introduced earlier will affect satisfaction. There are some guidelines that need to be mentioned here.

Simplicity is a basic principle of interface design. The simpler the user interface, the easier it is to operate. But for business applications, making the user interface simple is a challenge because these programs often have many features. The key to the problem is to balance functionality and simplicity. The most effective solution is "constraints." In other words, find the simplest solution.

Buildwith.me has a simple and effective user interface that is not sacrificing beauty.

Aesthetics, although some subjective or even arbitrary evaluation, but also affect the satisfaction of the important factors. Users love the beautiful user interface and can even sacrifice functionality for it. But you also need to be aware that you are not creating artwork. One of the best articles about aesthetics is the Innocence of beauty (in Defense of Eye Candy).

Because the user will use a business application for a long time, no matter how good a program, how consistent and fault-tolerant, evaluation of its success or failure is the determining factor: User satisfaction.

Other Reading materials:
• 7 ways to simplify interface design
• constraints
* Beautiful Innocence
Other relevant materials for user interface design:
• 12 guidelines for excellent user interface design
• 8 features of a successful user interface
• User interface design Guidelines (Wikipedia)
• 10 guidelines for the Master of Interface design
• 20 websites to help you master user interface design

Five. Important elements of Web applications
Although Web applications are different, most of them have many of the same programs. Each application has a different way of using its programs, so let's look at the three most common of them.

5.1 Web Forms
In general, forms are important to Web applications. However, Luke Wroblewski in his web Form design book that "No one wants to fill out a form." Here's a form that includes a registration form for many business Web applications.

Minimize frustration when users fill out forms. Provide internal validation and good feedback system, and use default values whenever possible. Don't forget novice users, through wizards or hidden advanced (or infrequently used) features, to help them accomplish tasks faster.

5.2 Master and Slave panes (master-detail views)
It refers to a program that looks at data in two separate and related panes. One pane displays the list of items, and the other displays the details of the selected item. This program can be implemented on a single page or multiple page switch.

5.3 Dashboard (Dashboards)
Many Web applications have dashboards. Dashboards display important information about actions and decisions. It typically only appears on a single page and is the initial page of an application. Dashboards are important because they allow users to see information and perform tasks without entering a deep interface.

Xero displays the user's most important financial information (such as bank accounts and credit card information) in the dashboard so that users can quickly see their financial situation.

5.4 Extensive use of tables
Because Web applications need to handle a large number of easily categorized data, tables are unavoidable. This is not really a bad thing. In fact, the table is for this. Don't confuse it with a page layout that doesn't have a table. Only valid forms are easy to read. So in most cases, you need to select a meaningful title, control the number of columns and pages in the table, alternately display the row colors, properly align the table columns, and provide sorting and filtering functions.

Tables can be artificially adjusted, which means that you can add more information to them, or even modify their data items.

Pulseapp is an excellent example of how the table effectively handles the current complex data.

5.5 Reports
Most businesses are inseparable from reporting. Because the print report is a common function, you should pay attention to the design of the report. A printed (or output) report is typically a simplified version of an online report that needs to be optimized to accommodate monochrome printing.

FreshBooks has print, PDF output and "Send e-mail" features. It also provides print preview.

Six. Do not forget the user interface design layout
We've gotten used to the discussion of interface design layouts, but sometimes we ignore them! The user interface design layout is helpful for designing the user interface. Layout can often solve common problems, reasonable layout can facilitate the user familiar with the interface, as soon as possible. Therefore, you should consider the layout at the initial stage of the design process, preferably at the sketch stage.

This screenshot is from 12 standard screen layouts, and this article will help you revisit the most common screen layouts.

Other Reading materials:
Web Interface Design: Principles and layouts for rich interaction
This is an excellent book that covers more than 70 web design layouts.
• More than 40 material on user interface design layout

Seven. Case Teaching: Online Banking
Let me give you a real case for a brief introduction to the process of designing the user interface for the small banking network system. My team is involved in improving the system. The main reason for this revision, as their executives say: "Users often complain that many of them are no longer used." ”

After a few hours with the actual user, we found the main problem. Account and credit card information is buried deep in the secondary navigation. It is difficult for users to see consumer information, as well as account and credit card status. Obviously, the application has become the design of the bank employees, only they are familiar with the terminology, a good interpretation of the numbers in the program.

In the urgent time, we have followed the design process described in this article, and achieved some success. As the problem is obvious, in a very short time, we still have a clear understanding of our main tasks and ways of doing things. We created a dashboard that provides clear information on all accounts and credit card status. New navigation makes it easier for users to query information. At the same time, the report also facilitates the user to understand, but also added some new functions.

We've only made some adjustments, but the overall user experience has been greatly improved by improving the process of accomplishing critical tasks.

Eight. Final thinking
The interface design of business Web applications is a daunting task, and it is full of compromises. You must compromise between customer and user needs, between business needs and users, between novice and expert users, and between functionality and simplicity. It requires you to fully understand the user and their tasks, as well as the interface design guidelines and layout. Although difficult, but the job is interesting, you can learn a lot of new things from each project, and use it to the website design.

Original:  designing User interfaces for Business Web applications
Chinese:  shur design