Design and development of a Web-system OA Interface

As early as the Chinese IT industry is in the ascendant, the computer application system mainly functions to achieve the main, almost no interface design concept. Today, with the continuous popularization of computers and networks, the increasing degree of social informatization, the constant maturity of users and the market, people have not only satisfied with the "enough", but more emphasis on "easy to use", and therefore, whether it is the personal software of the general end user or the large-scale system of enterprise application, The interface design has become a very important aspect in the system construction.

However, (at least in China) because the IT industry lags behind, the market is not mature, and so on, in most enterprises, interface design in the software system development has not been a place to match the importance of, and in the enterprise operation and Coordination has not formed a mature model and solution, how to do interface design and development, Is still a question that we are constantly studying and discussing.

I write this article, the main content is that I participate in a quality inspection industry for the Web system interface design and development process, including some of the ideas and ideas; I hope we can discuss this problem with you for your reference.

In addition, I undertook the system development and interface design work, so, although this is a discussion interface design article, I will try to limit the article in the interface design scope, but also may contain some development and system design content, please distinguish clearly, welcome correction.


1. Work Flow

The following diagram is the main process involved in interface design throughout the development process.



Starting with the initial needs analysis, I joined the project and participated in the entire development process from the beginning.
In the demand analysis phase, participated in the customer visits and research;
In the outline design stage, participated in the partial system design analysis work;
In the detailed design phase, completed the entire system interface design and demo production, and submit user feedback;
During the code development phase, it participates in the design and development of the system presentation layer.

2. Demand Analysis

In the phase of requirement analysis, we mainly focus on the interaction of interface and some research on users.

Mainly includes the following content
• Audience user groups survey
• System use environmental survey
• Audience User Usage survey
• User survey of previous versions of software usage

This stage, due to cost reasons, I did not directly visit the customer to investigate. The work is mainly to put forward some specific problems, by the needs of research personnel, questionnaires or oral questions and answers to customer research. In addition, the company's experienced customer service staff and market personnel, is also a very important source of demand.

The customer base of the system mainly for the national provinces and cities subordinate quality inspection units, the final audience age from young to older people have. For ordinary State organs personnel, generally not familiar with computer systems and networks, computer environment in general, or even worse, rarely configured an excellent environment. In this environment, users generally do not use the computer use tendency, mostly more suitable for manual operation. For the former generation of the system, the most important advice is the use of difficult, inconvenient.

There are other specific survey feedback, such as the user basically do not use the right mouse button, older users are difficult to see the dense small text and so on.


3. Interface design Principles

In the outline design phase, according to the research results of the demand phase, I have collated the basic principles of the system interface design. Because in the code development phase, a lot of time the specific production of the interface is written directly by the developer, so it is necessary to determine certain principles and norms to ensure the unity of the system interface.


General principles of Application

• Simple and straightforward principle: the user's operation should be presented to the user in the most direct and most intuitive manner possible. On the Operation interface, the direct click above the right button operation, the text represents above the icon, as far as possible in line with the user's recognition of similar systems.

• Easy to use principle: the first principle that conforms to user's habit for convenient use. Others also include the principle of minimum number of operands to achieve the target function, the principle of minimum mouse distance movement, etc.

User-oriented principle: In order to facilitate the user to familiarize with the system as soon as possible, simplify the operation, should provide the wizard nature of the operation process.

• Real-time Help principle: Users need help who can respond to problems at any time.

• Provides advanced customization capabilities: Set custom features for advanced users who are familiar with computers and software systems, and can customize custom settings that are consistent with their customary practices and all aspects of the system. Including general operation, interface layout, interface style and other customizations.

• Interface Color Requirements: The computer screen light-emitting imaging and general visual imaging are very different, should pay attention to this difference to make appropriate color collocation. For long-time use of the system, users should be used for a longer period of time to avoid too much visual fatigue is appropriate. For example, light color is the main color, grey system is the main color and so on. Avoid excessive color, fancy gorgeous, seriously hinder the user visual interaction.

• Interface Layout requirements: System-style layout uniform, as far as possible to classify different functional areas in a fixed position, user-friendly navigation, layout should not be too dense, to avoid fatigue.

b/s Framework applicable principles

• Minimal page: Due to the web's network features, minimize the amount of single page load, reduce the size and number of picture files, speed up loading speed, user experience.

• Screen adaptation: The Web interface needs to accommodate different user screen sizes.

• Browser compatibility: Needs to adapt to different browser browsing effect, although the current can not consider different browser differences, but still need to consider the difference between the browser version of the client different effects.

• Minimum vertical scrolling: Minimize vertical scrolling, as little as two screens.

• Prohibit horizontal scrolling: As much as it will result in a very bad customer experience, the browser should be prevented from scrolling horizontally.

• Avoid hiding (right-click) Actions: Browser Right-click Actions do not conform to user experience habits, as far as possible to avoid.


Application principle of this system

Thin client requirements: Because the customer application environment configuration is mostly low, in addition to the server can be configured more flexible, should ensure that thin client, make users easy to use. For example, try not to use complex JS scripts and HTC components, do not use IE integration xml/xslt on the client, and so on.

• Horizontal expansion requirements for large data volumes: There is a list of large data volumes in this system, which requires large interactive interface support, to avoid horizontal scrolling, as far as possible to obtain large screen horizontal space.

• Desktop Panel Navigation simplifies operation: In order to achieve convenient and simple user operation, we should ensure that the majority of users can be achieved through the navigation of the Homepage desktop panel.

• User-Adaptive definition: Provides a lot of customizable features, especially to the desktop panel to provide powerful customization capabilities, so that users can define the most common features to the desktop panel, each login can be used directly, simplifying user action.

• User-defined operation record definition: For some functions such as query, search and so on, to provide automatic memory and customer customization function, the system can automatically remember the user before the operation, or user can customize the operation record, convenient for later use.

• Horizontal expansion requirements for large data volumes: There is a list of large data volumes in this system, which requires large interactive interface support, to avoid horizontal scrolling, as far as possible to obtain large screen horizontal space.


4. System Analysis

In the outline design process, the interface designer needs to browse the requirement Analysis report, understand the user's work flow, and the whole system function, and then according to these original requirements function, summarize and analyze, and according to the user interaction design needs, comments, participate in system design.

It includes the classification and generalization of the original function, the new function of the system interaction, the definition of the priority of the realization of the user's function and so on.

For example, the user-defined shortcut panel function, commonly used automatic recording function, etc., need to be presented early in the outline design, in order to facilitate the planning of the system.

In addition, it is necessary to have a clearer understanding of the common functions throughout the system, and to summarize the common forms of interaction in the entire system interface, such as listing, querying, searching, filling out forms, project decomposition, project selection, approval, reporting, etc. with a clear understanding of the entire system requirements, Can better grasp the unity of the entire interface design. This, of course, has a lot to do with the experience of the interface designer.

4. Main interface Design

Designing the main interface and determining the basic style of the system is one of the tasks in the outline design. The main implementation of the main interface is navigation, it is to achieve the purpose, as far as possible so that users can only through the first page board to complete all common tasks.



The main interface contains the following sections

User Information area displays current user information



User Navigation Area user page navigation, collection function can bookmark the current function page to the shortcut function panel



User navigation feature tree user page navigation, collection function can bookmark the current function page to the shortcut function panel



Feature tree hide to expand page space horizontally



Desktop Panel user Help navigation users can automatically load related use Help or navigation depending on user type when they log on.



The main task notification area informs the user of the backlog in the business process of the system, and informs the user about the Office system.



User Shortcut panel in order to easily and quickly access the system functions, to avoid each access to the tree menu of the more difficult operation, the user can be in the navigation bar of the favorite button, the current page is collected into the Panel, the panel appears on all business pages, users can always access their own defined feature page. The navigation appears as a panel on the home page and in the form of a drop-down menu on other pages.



User-defined functional area users can define related query search and other functions to the home panel, such as: the latest completion of the report, report search, inspection process, etc.

5. Typical interface

The following are some of the more typical interface models in the system.










In the design process of the whole system interface, we need to pay attention to the unification of the whole system, the design style should be consistent, the interaction elements in the interface, from the color, the style to the layout way, the specific location must have the continuity , so that users can get used to the whole system operation as soon as possible.

6. Typical interaction mode

Interface interactions, depending on the functionality, have different ways of interacting. Abstraction should be extracted as much as possible, minimizing the type of interaction patterns, or as similar as possible to the interactive approach, so that users can quickly familiarize themselves with the system.

The following is a list of the more typical interaction patterns in 3 systems for your reference.

Single selection


Multiple selection



Item decomposition (GIF animation 4 frames)




7.Demo Development

Demo is one of the important achievements in the detailed design stage, after the detailed analysis and design of the system, the main role is to provide the cooperative customers with the basic functions, system composition and ease of use testing.

The demo of this system mainly includes the design and production of interface, and the development of some client-side presentation layer scripts. In order to be reused in the actual business development in the future, the production of demo is strictly follow the system development specification in the page specification, CSS style definition and JS script writing, and it is strictly executed in the later code writing work.

The entire demo of this system includes about 50 pages, which takes 3 weeks.

In the subsequent development process, still have to strictly control the entire development process, to ensure the unity of the entire system interface, and maintain the design of the updated system interface at any time.


8. Conclusion

Too long ... It is very difficult to review a lot of things before. A lot of details, including a lot of design, technical things, have been memory is not clear, the article also seems a bit disorganized.

Therefore, if you have any questions, or have comments or corrections, please ask or write to communicate with me.