Interface Design of Business web applications

The article on smashingmagazine is about the web application design process and principles, which may be helpful to you. Translation is too hasty. Please give me more advice on the error. Click here for the original article.

Interface Design of Business web applications

The Design of commercial Web applications is often ignored. I have seen many programs that do not meet business goals or meet user needs. They have poor user experience and cause loss of business profits. Even more exaggerated, some designers did not participate in the entire program development process, but instead pushed all their responsibilities to the developers.

For engineers who are good at front-end and back-end technologies, they lack the design capability and it is difficult to complete this arduous task. Unsatisfied consumers, frustrated users, and failed projects naturally emerge.

Next, we will introduce the basic knowledge of "Business web application" interface design. In general, people can provide many methods, techniques, and standards for interface design. Here, we will focus on business Web applications.

1. websites and web applications
We can easily mix web applications and websites, just like the user interface design and web page design. In fact, they are very different in nature from other aspects. This article will discuss this with you.

A website is more like a set of web pages, most of which are static text, images, and videos. It only has limited interaction functions (except for the contact form and search functions ).The main function of a website is to provide information.Although some websites use the "content management system" to provide dynamic text, it is still information in nature.

 

 

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

On the other hand, web applications areDynamic Interaction SystemIt helps enterprises complete important business transactions, evaluate and improve their productivity. Therefore, the main role of Web applications is to meet the needs of different users according to specific business rules.

Web applications have higher user engagement and knowledge reserves. These users not only use it by accident, but also evaluate it as a platform to complete important daily business. In short, when they fail to understand the running mechanism of a program, they will not get tired of it. This often happens to 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.

We can differentiateOpen and confidential applications. In open programs, users can easily access other registered users. They can use these steps online and choose to register a free account or a paid account. Confidential applications are generally not allowed to be used outside the company. Outside, they are just "offline" programs (although many systems present some features to business partners through some services or dedicated interfaces ). Such programs can only run in the company's internal network, and can only be used by employees.

I don't know who created it.WeblicationAt least at this stage, I like it very much. It describes what a web application is. However, this does not mean that a Web application is a simple mix of websites and programs. It is much more complex than this.

2. First, you need to know your users
In one sentence, you may have heard about it for one thousand times and the reasons for following it. This is "a successful user interface, which must be centered on users and their tasks ". This is why many developers fail to create a good user experience. As Steve Krug said, "developers like complicated things and enjoy the process of discovering the operational mechanism of things ."

Do not recognize users. Customers are neither users nor users. Although the customer's management is usually interested in the project and tries to influence your decisions, remember, they will not use the program every day for several hours (unless it is specially designed for them ).

2.1 How to identify users?
We can identify users in many ways, such as user interviews, business stakeholder interviews, and the "shadowing" method of observation. "User interview" allows you to understand your knowledge reserves in terms of programs and computers, and get more detailed information through "user observation", such as how users complete tasks, what mistakes have they made. The reason why "shadow user observation" is called this is that the observer needs to be like the user's shadow and keep the shadow intact. Pay attention to each of their operations.

If you have not met a real user, it may be because you do not have the permission or you are designing an open application. You can use "character roles" to help you identify users. "Character roles" are representatives of real users who have their habits, goals, and motivations. You can use the user information obtained in the business analysis report to create a "role ". If you are not familiar with this method, brand colbow comics will help you.

 

 

"Task Analysis" helps you determine what tasks you need to complete, how they are completed, how long they will take, and what mistakes you have made. Sometimes the user is using the old program you want to update. You can use this old program to see how the user operates. In this way, you will easily understand their tasks and challenges.

It is certain that, no matter who you are, you must always considerNovice users and expert users. To get started with "Newbie" as soon as possible, "experts" may need to design their own interfaces to efficiently complete tasks. However, in many cases, you need to use various techniques to ensure that different types of users use the same interface normally, such as hiding advanced functions.

These studies are usually done by market analysis. But when no one is responsible for this business, you should do it. Once necessary information is obtained, you can design it.

3. Design Process
In the design user interface, you can select one of the many processes for execution, or you may already have a process. However, 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 sketch, superb background technology, and powerful servers. They just want to see the user interface.

So how is this method executed? It mainly uses its core rule: iteration. Each iteration includes all stages you define in the process. This means that at the end of the first round, you will have a product that can be tested: prototype.

3.1 sketch
Sketch can effectively expand ideas. We seek solutions by drawing different conceptual diagrams. Most sketches are discarded, but it doesn't matter. As Bill Buxton said in his book "sketch of hand-drawn User Experience": "sketch is not only fast but easy to process, that is why they are so powerful ".

Is the sketch the same as the line chart? It seems that the difference can be ignored, but I don't think so. The line diagram is not used to get rough ideas, but to extend them. You can read the wonderful discussion on ixda: the sketch before the line diagram.

Once you have drawn a "correct" sketch, or at least you think it is correct, you can create a more detailed line chart or directly create an interactive prototype.

 

 

 

 

 

Jason RobbSketch.

Interesting reading about sketch and line chart:
• 35 excellent line chart Materials
• Tools for drawing user experience sketches
• 20 steps help you improve the quality of the line diagram

3.2 prototype
The next step of a streaming is to create a prototype to simulate a real program. The prototype can contain one or more interfaces (or all interfaces). They only simulate the behavior of a real program and make the user feel that the program is running. Actually, they do nothing. If necessary, the prototype can also complete some functions (such as complex operations ).

The web page prototype is temporary, and its purpose is ultimately to verify and think. Because you don't have to spend time writing code, it reduces the cost of making mistakes. In the end, you will also discard it. You can also use specialized prototyping tools, such as axure. Some people may even use PowerPoint to create prototypes.

 

An Interactive Prototype of an e-commerce website created with axure,E-maujean.

Other reading materials and tools related to prototypes:
• 5 online tools for Website planning and prototyping
• Original Production Guide: By Rosenfeld Media
• 16 prototyping and wiremap creation tools

3.3 Test
If you don't have a prototype, they won't work. In fact, testing is not difficult. Jakob Nielsen and Steve Krug support a method called "discount usability testing", which is cost-effective and convenient, it also provides valuable suggestions for your design decisions. You can also use the test results as the basis for another iteration. You should test this before solving major problems. We know that the time and budget for software projects are tight, so to be more efficient,The sooner the test is performed, the better..

Steve Krug's new book "make difficult work easier" ("rocket surgery made easy") is one of the best materials for "simple usability testing". Read it.

 

The photo content is about delicious usability testing,Dave (New Zealand).

Other reading materials:
• Why do you only need to test 5 users?
• Decryption availability test
• Myth of availability Testing

Iv. Design Principles
Many Design Guidelines are currently popular, but they do not seem to reach consensus. We will put aside those strict definitions and simply repeat them.

4.1 nobody liked to be scared
The key to an excellent user interface is "consistent" and "friendly ". The user interface should be consistent within the program, such as navigation and color. This isInternal Consistency. In addition, the package and system should be consistent on the user interface. A typical case is Microsoft's office suite. This isExternal consistency.

An effective way to ensure "consistency" is to develop "User Interface Design Standards" for the user interfaces of each or each group of projects ". The design of each detail should follow it. The design guidelines not only make the interface consistent, but also help the team members better understand your decisions as instructions.

 

In a simple example, sprinklepenny remains "consistent" and "friendly" throughout the site ".

Consistent user interfaces are easy to use, because users can identify various parts of the program based on previous version experience. "FriendlyIn a sense, it is easy to confuse with "consistent. The "friendly" User Interface extracts information from the user's past calendar to form a reasonable metaphor. For example, a folder is a well-known metaphor for a file group. It has replaced the "directory" used in the previous command line interface ". In short, you can use your own language.

Many business leaders share the same idea: Excellent user interfaces should look like Microsoft Office series, especially outlook. I don't want to say how meaningless this is. In this case, I only propose a different suggestion: we should follow the "user-centric" approach and explain why we are employees, customers, and partners (that isTheir users) The designed application is important.

However, most enterprises may have different situations due to different workflows. For example, two enterprises in the same industry may have different work processes. This will force you to surpass yourself and startInnovation. This part of the design process is quite attractive, and of course you must be more creative.

His reading materials:
• Design and select components for the user interface
• Why is consistency important?

4.2 users should be efficient
Without a doubt, users should be able to use business applications efficiently. This is why they pay and what managers expect. The user interface should allow users to work efficiently and complete tasks in the simplest and quickest way. But in fact, this is not always the case. Developers have an idea about ideas and actions. They believe that the background of the user interface should be as complex as possible. No matter how ridiculous it sounds, but the problem has already occurred, it may also make you have a headache. That is why good communication and cooperation with developers are necessary.

UserComplete a specific taskIt should be efficient. As mentioned above, task analysis can help you determine the task and how the user completes it. If a task takes a long time, it needs to be divided into smaller tasks, so that the user will not feel time-consuming. You can also provideKeyboard Input and shortcut keysTo improve efficiency. Imagine how long it takes to switch between the mouse and the keyboard. In some cases, you need to design for users who are used to the command line interface. They strongly hope to support keyboard input. Let's give you a suggestion: when defining a shortcut key, it should be the same as the shortcut key of a Common Program. For example, CTRL + S should always be "saved.

 

The table in Google Docs provides you with keyboard shortcuts and shortcut menus, and draws on the desktop programs you are familiar with to help you complete your work efficiently.

PassCustomizationThis improves user efficiency. When you customize your own interface, you will not only get started faster, but more importantly, you will have more confidence in use. Personalization can be embodied in many aspects: Selecting modules in the dashboard, defining shortcut keys and adding to favorites, changing the component sequence, and so on.

Note:Accessibility. Although many people think that "accessibility" is not important in Web applications. But this is not the case. Treat public websites as they are accessible.

Web applications must also be efficient in processing information. Therefore, the resource-consuming interaction between partial rendering and Ajax requests must be used with caution.

4.3 help!
The interface should provideEffective feedback. In the event of an error, the user should be notified and set up for restoration. 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 calledFault ToleranceThe dialog box, undo option, and forgiving formats follow this rule. "Fault Tolerance" allows users to use programs more securely, reduces learning costs, and improves overall satisfaction.

Because web applications are complex, you also need to provideIntegrated Help System. This can be done by internal help, supported databases, knowledge bases, or wizard (including videos, images, and text.

His reading materials:
• Fault Tolerance in User Interface Design
• Web form validation: best examples and tutorials
• Careful handling of user errors: putting users back on track

4.4 satisfied users
Satisfaction is a subjective term. It refers to the user's pleasure when using the interface. Each design criterion we introduced earlier affects satisfaction. There are also some rules that need to be mentioned here.

Jian JieIs a basic principle of interface design. The simpler the user interface, the easier it is to operate. However, for business applications, it is a challenge to make the user interface concise, because these programs have many features. The key to the problem is to balance the functions and conciseness. The most effective solution is "constraint ". In other words, it is to find the simplest solution.

 

Buildwith. Me has a simple and effective user interface, and it does not sacrifice its appearance.

BeautifulAlthough it is subjective or even casual, it is also an important factor affecting satisfaction. Users love beautiful user interfaces and can even sacrifice functions for them. But you should also note that you are not creating art. One of the best articles about beauty is in defense of eye candy ).

Because a user has been using a business application for a long time, no matter how easy it is to use, how consistent and fault-tolerant it is, the determining factor for evaluating its success is: user satisfaction.

Other reading materials:
• Seven methods to simplify the interface design
• Constraints
• Beautiful and innocent
Other materials for User Interface Design:
• 12 guidelines for excellent User Interface Design
• Eight features of the successful user interface
• User Interface Design Guidelines (Wikipedia)
• 10 Guidelines for becoming an interface design master
• 20 websites help you master User Interface Design

5. Important elements of Web Applications
Although web applications are different, most of them have the same program. Each application uses different methods for its program. Let's take a look at the three most common of them.

5.1 web forms
In general, forms are not very important to Web applications. However, Luke wroblewski said in his book on web form design that "no one is willing to fill out the form ." The form mentioned here includes registration forms for many business Web applications.

Reduce the user's frustration when entering the form. Provides an internal verification and good feedback system, and uses default values whenever possible. Don't forget that new users can use the wizard or hide advanced (or uncommon) functions to help them complete tasks faster.

5.2 master-detail views)
It refers to a program that views data in two independent and relevant panes. One pane displays the project list and the other displays the details of the selected items. This type of program can be implemented when switching between a single page or multiple pages.

5.3 dashboards)
Many Web applications have dashboards. The dashboard displays important information that requires operations and decisions. It appears only on a single page and is the initial page of an application. A dashboard is very important because it allows users to view information and execute tasks without entering the deep interface.

 

Xero displays users' most important financial information (such as bank account and credit card information) in the dashboard, so that users can quickly see their financial status.

5.4 use a large number of tables
Because Web applications need to process a large amount of data that is easy to classify, tables are inevitable. This is not a bad thing. In fact, tables are used for this purpose. Do not confuse it with a page layout without tables. Only valid tables are easy to read. Therefore, in most cases, You need to select a meaningful title, control the number of columns in the table and the number of pages, display the row colors alternately, and properly align the columns in the table, it also provides sorting and filtering functions.

Tables can be adjusted manually, which means you can add more information for them or even modify their data items.

 

Pulseapp is an outstanding example of "effectively processing complex data in a table.

5.5 report
Most enterprises cannot leave reports. Since printing reports is a common function, you must pay attention to the design of reports. A printed (or output) report is usually a simplified version of an online report and needs to be optimized to adapt to monochrome printing.

 

Freshbooks provides print, PDF output, and "Send email" functions. It also provides print preview.

6. Do not forget the User Interface Design Layout
We are used to discussing the UI design layout, but sometimes we ignore them! The user interface design layout is very helpful for designing the user interface. The layout can often solve common problems. A reasonable layout can help you familiarize yourself with the interface and get started as soon as possible. Therefore, you need to consider the layout at the initial stage of the design process. It is best to start at the sketch stage.

 

This is from12 standard screen la sThis article helps you review the most common screen layout.

Other reading materials:
• Web Interface Design: Principles and layout of rich interaction
This is an outstanding book that covers more than 70 web page layout settings.
• More than 40 materials related to the User Interface Design Layout

VII. Case study: Online Banking
Next, I will give a real case to briefly introduce the process of designing the "user interface of the small bank's online banking system. My team is involved in improving the system. The main reason for this revision is in the words of their managers: "users often complain that many of them are no longer using it ."

After several hours with the actual user, we found the main problem. Account and credit card information is buried in the secondary navigation. It is difficult for users to see consumption information and the status of accounts and credit cards. Obviously, this application has become designed for bank employees. Only they are familiar with the terminology and can well interpret the numbers in the program.

In a short time, we followed the design process described in the article and achieved some success. Due to the obvious problem, we still have a clear understanding of our main tasks and actions in a short time. We have created a dashboard that provides clear information about the status of all accounts and credit cards. The new navigation makes it easier for users to query information. At the same time, the report is easy for users to understand and some new features are added.

We only made some adjustments, but the process for users to complete key tasks has greatly improved the overall user experience.

8. Last thought
The Interface Design of Business web applications is an arduous task, and it is filled with various compromises. You must compromise between customer and user needs, between business needs and users, between novice and expert users, and between functions and conciseness. It requires you to fully understand the users and their tasks, as well as the interface design principles and layout. Despite the difficulties, this work is very interesting. You can learn a lot from each project and use it in website design.