Uidesign for reference from the Web

User Experience has become an important standard for measuring the quality of application software. In the past, we may be amazed at the gorgeous UI of a Web application. Now, with the strong appearance of HTML5, various presentation layer technologies and development frameworks are released, the boundaries between web applications and form applications are gradually blurred. Although the technology has been completely refreshed, many developers are not professional information architects and may still use traditional and ordinary UI design styles. Rich applications have become a rule, and the effects that were hard to achieve in the past seem so simple today. This article aims to explore the best practices of system UI design by drawing on Web interface design experience.

1. Overview of Guiding Principles

• The system is self-described.A good UI design system should be easy to use. Without reading additional documents, the system UI itself can guide the user to choose the right path.
• Try to hide System ComplexityThe simple style UI is easier to use.
• Prompt for information processedDo not give feedback to technical terms that users cannot understand. This will not only make users dislike, but also expose some sensitive information and give feedback to their own languages.
• Logo Guide DesignThe system must clearly inform users where they are? Where are they looking? How do they get there?
• Provide feedback as soon as possibleThe UI should be able to let the user know the action has not occurred before the action actually occurred, and remind the user of the stage in the process.
• User-friendly designAppropriate font size, gentle background color, and reasonable button position.
• Consistency, standards considerationsConsistent interface style is easy to use, and the application is even more compliant with standardsProgramIt gives users a professional feeling.
• Verification and Error Correction"Prevention", "protection", and "notification" are good practices to help users correct errors.
• Ease user burdenHand over the unremembered user to the application software for processing.
• Considering Users of different types and levelsFrom the user's perspective, give the user what they really want, rather than relying on our subjective speculation.
• Provides context help and documentationAlthough the self-descriptive UI is good, clear help documentation can make it icing on the cake.

Ii. uidesign Process

Step 1: understand the requirements and understand our users

The development and implementation of a system must have clear objectives. The first step in system development is to understand user requirements. The requirement analysis is generally led by PM, mainly by the demand consultant. We can obtain user scenarios through interviews with users, watching users' work, consulting industry experts, or drawing on various types of relevant data. By grouping, filtering, and mining user scenarios, we can obtain user roles and system requirements of different roles.

Understand roles in the system and their relationships. Before designing the UI, we should know what these roles can do, what they want to do, and what they cannot do. We need to understand the main tasks of these roles and study their work habits, levels of knowledge, and what their desired software should look like. It is a good way to talk to key users who represent different roles and write a scenario for each of them to describe their ideal experience. As designers, we must be clear about user habits. In some industries, the interface style that practitioners may want is incomprehensible to ordinary people, but this role is indeed feasible. I am afraid it is difficult to obtain this information from the document if I do not communicate with the user face to face.

The general steps are as follows:

• Step 1: Interview with users, record user descriptions, and get "Interview records ".
• Step 2: Sort out interview records and get "user stories ".
• Step 3: Define the user role to obtain the "role responsibility table ".
• Step 4: Define User Permissions to obtain the "permission list ".
• Step 5: Define the user scenario, describe what the user is doing, how to interact with the system, how to respond to the problem that arises, what the system expects, and get the "user scenario description ".

Supplement: business consultants often serve as demand analysis engineers. However, depending on the project scale, this part of responsibility may also fall on you. Next we will share "5w1h" for your reference.

What do users do? What are users' expectations?

What are the objectives of why users? Why do users have this idea?

In what scenarios does a user use the system in a live application environment?

When will a user use these functions?

Who is using this system? What are their differences? How are their habits different?

How does a user's business flow look like? How does the system help users complete tasks?

Step 2: define features and divide modules

This stage indicates that the requirement has been analyzed and defined. The UI Designer should confirm whether the following items are clear:

• Is the business process clear?
• Is the data flow clear?
• Is the data dictionary (definition of data information) Clear?

If you still have questions about the above issues, you should stop and do the preliminary work well.

The general steps are as follows:

• Step 1: Analyze user scenarios, define use cases, and obtain the "use case list" and "use case diagram ".
• Step 2: Define functional requirements and get the "requirement specification" (only functional requirements ).
• Step 3: Divide modules, clarify the functions of modules, entities involved, inter-module inter-call relationships, data flow, obtain the "function diagram", "Module Design Manual", or "Outline Design" (ui only ).

Step 3: Design global navigation and local navigation

The Design of navigation and logo reflects the designer's ability to organize complex things. Navigation and identification are often inseparable. In many cases, navigation acts as an identification. The logo is like a landmark in the system, helping users understand where they are, where their destination is, and how they perform operations. In large systems, identifiers help users not get lost. Navigation helps you quickly reach your destination.

There are three types of Navigation:

1. Structure navigationThe structure navigation shows the hierarchy of the system, for example, global navigation.
2. Associated navigationAssociate navigation is used to associate a page with a page that has a certain relationship with it. For example, display details of a page.
3. Availability navigationAll function navigation except content belongs to the availability navigation and is a very important identifier of the system function. It is mainly associated with some functional pages, such as changing the password.

There are two types of navigation modes:

1. BounceTo create a child page, you must first jump to the parent or parent page of the Child page, and then jump to the page step by step. There are two reasons to use this mode: first, there are too many layers or pages, users may need to reach the destination along the path of the logo a little bit; second, users need to interact with the system step by step, determine the path.
2. Crab lineThe user jumps horizontally between pages like a crab. This mode is often used to jump between brother pages.

The general steps are as follows:

• Step 1: Analyzes the implementation logic of user functions and draws a "path map ".

Both the "use case diagram" and "system structure diagram" can reflect the functional structure of the system. However, they do not reflect how users use the system. The "path map" shows how users use the system, including the business logic, the call relationships and data flows between functional modules. The "path map" shows the path that the user needs to walk in the system to complete the task, just like a map, reflecting the complexity of different functions.

• Step 2: Break down or merge function modules.

By analyzing the "path graph", we can merge modules to shorten lengthy paths, or add modules to break down activities in more detail to achieve more fine-grained control and authorization. However, all these modifications should be done with key users.

• Step 3: Design the navigation bar.

Locate the navigation barYou can increase the area of the content area on the top of the page. However, if there are too many navigation entries, one row will not be able to fit. On the left side, you can increase the area of the navigation bar and add more buttons than the horizontal bar, but this will reduce the area of the content area. The two have strengths. Select as needed.

Design navigation treeTwo considerations should be taken into account when designing the navigation tree. First, the navigation tree should be suitable for permission control. Second, the layers of the navigation tree should be easy for users to use. Generally, common functions are arranged in front of each other. Considering the depth of the tree, too deep will increase the user's memory burden.

• Step 4: Determine the form and scale of the local navigation.

First, determine the form of local navigation, including adding links to the logo, adding links to the data query result set, and adding "breadcrumb.

Then, determine the scale of the local navigation. Excessive local navigation will make the system path more complex and increase the development workload. Therefore, we should reduce the number of local navigation and strive to make it simple and practical.

• Step 5: Animation design.

An animated navigation has a higher user experience, and the animation effect is required for a navigation that requires delayed loading of data. However, the use cases should be treated differently, not the more beautiful the effect is, the better. Animation only needs to be smooth and provide feedback to individual users. After all, for application systems, business processing is the core value, and it cannot waste valuable resources of the project team to create a "Vase ".

Step 4: Interface Design

The simplest way to design the interface is to refer to the uidesign of similar systems and make adjustments based on actual projects and user needs. The interface design has a great degree of freedom, which also brings some risks. Designers need strong business knowledge. If they do not understand the work of users, they may not be able to understand the real expectations of users. Therefore, research and communication are very important. The Interface Design Engineer makes the following mistakes:

Problem	Description	Solution
Less Field	Such errors are often discovered in later stages of development. Even if a prototype is used to demonstrate to users, it is difficult for ordinary people to find that some data is missing.	When designing the interface, strictly filter the entities and attributes contained in the interface and consider data collection and flow.
False UI	When the program executes a time-consuming operation, it does not give feedback to the user. The user thinks the system is down due to a user error. At this time, some users will not wait patiently for system feedback, the operation is performed in an unpredictable way by the designer.	Use an animation to prompt the user that the system is "busy ".
Messy Style	When multiple designers participate in the interface design, it is easy to have different styles, such as style differences, multiple synonyms, and different processing methods.	Standardized conventions and unified styles. The responsible person is responsible for the overall situation.
There is no return	Some operations are completely unidirectional and cannot be returned once they enter. The UI design does not provide the opposite operation path for users.	Strictly review the "path Chart ".
Ambiguity	The user is confused when multiple identifiers point to the same location on the same interface.	Reduce Unnecessary local navigation.
Unable to implement	The uidesigner does not understand the development technology, misestimates the technical difficulty, and designs an interface that exceeds the cost or exceeds the capability of the development team.	Technical staff participate in the uidesign.
Massive Information	The UI presents too much data to the user, making the user feel that the system is difficult to use, and greatly damages the appearance of the system.	"Hide" rather than "Disable" is given priority; user expected data is displayed; data is displayed hierarchically.
Massive manual input	The UI does not help users collect information, does not perform verification, and does not try to reduce the workload of users using the system, resulting in users taking too much responsibility for data input.	The system can try its best to share user work, reduce the workload of users when using the system, verify user information, and improve errors.
Missing prompt	When a user performs some important operations, the UI does not fulfill the obligation to upgrade, which may cause the user to unconsciously damage data during use.	Confirmation dialog box.
Hypothetical test page	Design the interface from the perspective of using the system. Due to lack of business experience, it is often different from user expectations.	Communication, communication, and communication.
Unordered with no focus	The UI logo is not obvious and does not guide the user. The navigation bar is unordered and the user cannot see the focus of the current interface.	To sort functional requirements, common functions should be better positioned.

Step 5: interface segmentation and integration

• Step 1: Blocks existing pages from the perspective of permission or function reuse.
• Step 2: Groups all blocks by function.
• Step 3: Analyzes the commonalities and differences between blocks in each group, and considers the reusability of the Group Module Based on the differences between the entities contained in each block.
• Step 4: Each functional block is abstracted in groups and serves as a block of the overall UI.
• Step 5: Use the new UI block to reorganize the interfaces.
• Step 6: Re-consider the feasibility from the perspective of included business entities and data transmission in the UI composed of reusable components.
• Step 7:After completing the entire iteration, define the numbers for each functional block interface and complete the description.

Step 6: develop a prototype-> demo-> collect feedback-> improve

A very important step in designing a user-centered system is to collect user feedback. The prototype development is completed, and the system prototype is presented to users in a timely manner. The system prototype can be tested together with users frequently to effectively promote the high availability of the UI.

Three design icons

Graphical metaphor is a technique that uses graphs to imply users. For example, the recycle bin in windows, Windows products of history, as long as we see the "waste bin", we know it is the recycle bin. It can be seen that a good UI usually requires Customized Design of icons, so that it contains a metaphor to guide users to use the system. Graphical metaphor can be applied to the whole UI design, not just the icon design, especially in game software. What impressed me deeply is StarCraft II. Its uidesign undoubtedly increases the overall user experience of the game. However, the use of graphical metaphor is risky. If the UI Designer's personal opinion is different from that of most people, it will be counterproductive. After all, we are still working on application software rather than games, and there will be no powerful artist or design team. When we pursue avant-garde design, users may be confused. Therefore, from the perspective of risk and cost, we do not recommend that you rely too much on graphical metaphor in application software. Maybe our software has no characteristics, but as an application UI, simplicity, ease of use, and efficiency are our design goals. Therefore, here I only consider the design principles of icons.

The core idea of icon design-Abstract Real transactions (things) with beautiful images ). The following are some guiding principles:

• The icon style should be consistent and complement the system UI.
• The icon should provide a clear identifier and select a suitable metaphor. For example, the recycle bin uses a "waste bin" as a metaphor.
• Icons are not cultural-related.
• The icon should be simple and clear, and users should be able to see it clearly.
• Do not challenge users' IQ. Straightforward icons are more popular.
• The metaphor of icons should be conventional and should not be modified in ways that are generally accepted by the public. New designs often confuse users.
• If there are industry standards such as "playing" and "pause", you should stick to the rules.

The icon design may be beyond the technical scope of most of us. This type of work is more suitable for professional artists, rather than uidesigners. If you are not good at Vector Plotting, it may be better to ask a professional artist.

Below I will share my own logo: