Interface Design and development for a web system 1

Author: linnchord

As early as the beginning of the Chinese IT industry, computer application systems mainly focus on function implementation, and there is almost no interface design concept. Today, with the continuous popularization of computers and networks, the degree of social informatization is becoming increasingly deeper, and users and markets are becoming increasingly mature ", it emphasizes "Easy to use" and "Easy to use". Therefore, whether it is the personal software of ordinary end users or the large-scale system of enterprise applications, interface design has become an important aspect in system construction.

However, (at least in China) the development of the IT industry lags behind and the market is not mature enough, among the vast majority of enterprises, the interface design has not yet gained a place in the software system development that matches the importance, and there is no mature mode and solution in the enterprise operation and coordination, how to design and develop interfaces is still a problem that everyone is constantly exploring.

I wrote this article mainly about the process of designing and developing web system interfaces for the quality control industry, including some ideas and ideas, I hope that I can discuss this issue with you. I hope it can be used as a reference for you.

In addition, the author undertakes System Development and interface design at the same time. Therefore, although this is an article about interface design, the author tries to restrict the article to the scope of interface design, however, it may also contain some development and system design content. Please make it clear and correct.

1. Workflow

Is the main process related to the interface design throughout the development process.

From the initial requirement analysis, I joined the project and participated in the entire development process from the beginning to the end.

In the demand analysis stage, we participated in customer access and research;
Participated in part of system design and analysis in the outline design phase;
In the detailed design phase, the entire system interface design and demo creation are completed, and user feedback is submitted;
In the code development stage, we participated in the design and development of the system presentation layer.

2. Demand Analysis

In the demand analysis stage, we mainly conduct a number of surveys on User Interface interaction issues.

It mainly includes the following content:

· Survey of audience user groups
· System use environment survey
· Survey of user habits
· User survey on the usage of old versions of software

At this stage, I did not directly access the customer for investigation due to the cost. The main task is to raise some specific questions. The demand research personnel will conduct surveys on customers through questionnaires or oral Q &. In addition, our experienced customer service personnel and market personnel are also one of the most important sources of demand.

The customer base of this system is mainly quality control units under the national provinces and cities, and the final audience is from young to older. General State organs are generally not familiar with computer systems and networks, and the computer environment is average or even poor, with few well-configured environments. In this environment, users generally have no tendency to use computers, most of which are more suitable for manual operations. The most important comment on the use of the previous generation of the system is that it is difficult and inconvenient to use.

There are other specific survey feedback, such as users who do not use the right mouse button, it is difficult for older users to see Dense Small text, and so on.

3. Interface Design Principles

In the outline design stage, based on the survey results in the demand stage, I sorted out the basic principles of the system interface design. In the code development stage, developers write code directly to create a specific interface. Therefore, certain principles and specifications must be determined to ensure the unification of the system interface.

General principles of application

· Simple and clear principle: user operations should be presented to users in the most direct and understandable way. For the operation interface, directly click the operation above the right-click operation, the text is higher than the icon, as far as possible to meet the user's recognition habits for similar systems.

· Convenient use principle: conforms to the first principle of user habits for convenient use. Others also include the principle of least operand to achieve the target function, and the principle of moving the Shortest Path of the mouse.

· User-oriented principle: to help users get familiar with the system and simplify operations as soon as possible, wizard-oriented operation procedures should be provided as much as possible.

· Real-time help principle: users must be able to respond to problems at any time.

· Advanced customization: Provides advanced customization functions for advanced users familiar with computers and software systems, you can customize the predefined general operations and all aspects of the system. Including general operations, interface formatting, interface styles, and other user-defined features.

· Interface color requirements: The luminous imaging of computer screens is very different from that of general visual imaging. You should pay attention to this difference to make appropriate color combinations. For systems that need to be used for a long period of time, it is recommended that users do not feel too tired after a long period of use. For example, the light color is the main color, the gray color is the main color, and so on. Do not use too many colors or fancy colors, which seriously impede users' visual interaction.

· Interface plane layout requirements: The system style layout is uniform, and different functional areas should be divided as much as possible at a fixed position to facilitate users' navigation. The layout should not be too dense to avoid fatigue.

Principles of B/S architecture

· Minimal page: Due to the web features, you can minimize the volume of single page loads, reduce the size and quantity of image files, accelerate loading, and facilitate user experience.

· Screen adaptation: the Web interface needs to adapt to different user screen sizes.

· Browser compatibility: it is necessary to adapt to the browsing effects of different browsers. Although the differences between different browsers are not considered at present, the client effects caused by the differences in IE browser versions still need to be considered.

· Minimal vertical scrolling: Minimize vertical scrolling and minimize the number of screens.

· Prohibit horizontal scrolling: the browser horizontal scrolling is prohibited as much as possible because it will lead to a very bad customer experience.

· Avoid hiding (right-click) Operations: the Right-click operations on the browser do not conform to user experience habits, and avoid them as much as possible.

System Application Principles

· Thin client requirements: because most of the customer's application environment configurations are relatively low, in addition to the flexible configuration of the server alone, the thin client should be ensured to make it easy for users to use. For example, try not to use complicated JS scripts and HTC components, or use IE to integrate XML/XSLT on the client.

· Horizontal expansion requirements for large data tables: A list of large data volumes exists in the system and requires large interactive interface support. To avoid horizontal scrolling, obtain as much horizontal screen space as possible.

· Simplified desktop panel navigation: To facilitate simple user operations, you must ensure that most of the operations can be performed through the home desktop panel navigation.

· Custom customization: provides many customizable functions, especially powerful customization functions for desktop panels. This allows users to define the most common functions on the desktop panel, you can use it directly each time you log on, simplifying user operations.

· Definition of common user operation records: provides automatic system memory and custom functions for certain functions that require operation definition, such as query and search. The system can automatically remember the first 1 ~ Three operations, or you can customize operation records for future use.

· Horizontal expansion requirements for large data tables: A list of large data volumes exists in the system and requires large interactive interface support. To avoid horizontal scrolling, obtain as much horizontal screen space as possible.

4. System Analysis

In the outline design process, the interface designer needs to browse the requirement analysis report, understand the user's workflow, and the entire system function, and then summarize and analyze the functions based on these original requirements, in response to the needs of the user interaction design, we provide suggestions and participate in the system design.

This includes classifying and summarizing original functions, proposing new functions required for system interaction, and defining the priority of User Function implementation.

For example, the User-Defined shortcut panel function and the automatic recording of common operations need to be proposed as early as possible during the outline design to facilitate system planning.

In addition, you need to have a clear understanding of common functions in the entire system, and summarize the common forms of interaction in the interface interaction of the entire system, for example, the system includes list, query, search, fill in forms, project breakdown, project selection, approval, report, etc. Only a clear understanding of the requirements of the entire system, in order to better grasp the uniformity of the entire interface design. Of course, this also has a lot to do with the experience of the interface designer.

There are also five sections in the later part, including

· Main Interface Design
· Typical Interface
· Typical Interaction Mode
· Demo Development
· CONCLUSION