User Experience Reference: Web product prototype design to web interface

This article details the entire process of Web design , from the Web product prototype design, paper, black and white manuscript to the real site interface. Each step provides us with an example of detailed design and user experience thinking process. As a web designer it is worth to reference and learn from the experience.

Feasibility Assessment

Main executives: UI, UE, Demand Department, program department
Communication staff: Sales Department

When the product Manager determines the basic ideas, it will first communicate with us, and explain the product's ideas, audiences and some of their own ideas. Then we'll get a structure diagram and we'll explore the feasibility of implementation. We will also prepare the relevant information to communicate with them, mainly from the data reporting, functional and feasibility of three aspects, in the discussion will point to some of the functional or structural problems, and propose improvements, this step must be carefully, the UI, UE in-depth discussion and as far as possible to take into account the details of each implementation, after the framework to play well, It's easy to make a good product. But if there are pitfalls in the feasibility assessment, the rest of the work will also encounter many problems.

We mainly assess the following three aspects:

• Data Report
  Data collection was carried out through 99Click, NetRatings, counter three sets of systems, and the corresponding problems were pointed out in the analysis report.
• Functionality of
  On the user's point of view, the structure and function of the scheme are evaluated, and the operational problems are proposed and solved.
• Feasibility
  Each product is sensitive at the beginning, but can not ensure that each function can be implemented according to the original idea, and the specific needs and related technical personnel to discuss, after the collision formed the final product ideas.

Two product prototypes

Main executives: UI, UE, demand Department
Communication personnel: Program Department, Sales department

In the product prototype, mainly refers to black and white drafts or lines, in addition to the basic color in black and white form, the final product prototype will be no difference with the actual product. This link will develop the product page width, the form of advertising, navigation basic style, the content of the region of the form of expression, etc. ...

After the feasibility evaluation stage, the product manager's ideas and their own basic consensus, the next will be the prototype design, I will be divided into three steps to achieve:

1) paper Draft

In general, the structure diagram is described in Word document, I choose Pen and paper way, mainly or relatively convenient, easy to modify, there are any sudden thinking only need to rub, you can directly on the basis of the adjustment, because the previous discussion without physical reference, in this link you will find more interesting questions.

2) Line draft, black and white draft

When the paper is determined, the UI or UE uses the drawing tool to paint black and white (I mainly use Photoshop to do this step, and according to personal habits, we have different ways, such as Taobao ued team and Baidu UE more of the form of the line version). Perhaps the reason for the UI, I am accustomed to the use of black and white draft, user-friendly interface design, the structure will also be accurate to the pixel, such as: navigation height of 40px. The headline uses 20px blackbody, the picture specification: 104x85px, the page's each area leaves white for 5px ... Wait, this is the only way to find out more details of the problem, of course, to the interface design and you will also taste more sweetness.

3) prototype

After completing the two steps above, the basic function, structure and specification of the product have been roughly shaped. At this point you can call the program Department, sales department and the demand department product manager, on the whiteboard on the black and white drafts to do the final discussion. After two times, three times adjustment, finally set a complete product prototype.

In addition, it is worth mentioning that before the product prototype is not sure, do not rush to do interface design, because the previous discussion is mainly through the whiteboard, word or paper. Before the prototype is not sure, there are many potential problem performance is not very straightforward, such as: "Narrow, narrow, finished, news list can only put eight words", "ads not put up", "data can not come out, there is no this interface ...". If you enter the interface design in advance, a problem, it means that again need to find product managers, technical department, sales to communicate again, this step is very cumbersome, it will make people very depressed.

Three Product interface design

Main executives: UI, UE, demand Department
Need communication personnel: UID, SEO

At present, the prototype of the product has been based on the formation, although there is no gorgeous coat, but the concave-convex has been looming. The next step is to enter the interface design phase. The designers will again experience the various conveniences that black and white drafts bring to him.

1) UI
My habit is, mainly for the homepage of the style design, and out of 3-4 sets of interfaces, the final selection of about 2 sets submitted to the demand department, but also will point out that their most satisfied with a set, and demand Department for two, three after the collision, finally come out with the final.

2) UE
The UE begins to optimize the operation of the prototype, assemble the user and organize brainstorming, collect the relevant opinions, and then organize the improvement of the interaction and user experience by UE, and feed back to the UI and the demand department. For example: "This text needs to underline", "button on the style, instead of the desire to click ..."

3) UID
The UID begins to prepare the documentation for the production aspect. and put forward the implementation of the views. When the effect diagram is finalized, the code is started (Css+div, AJAX, Java).

4) SEO
SEO based on the prototype proposed search engine optimization advice for the production phase code optimization to prepare.

This phase must ensure that with the needs of the Department of Communication in place, when the final product interface finalized, the proposal to organize a discussion, this time the user face is a real product, the feelings will be different from before. To the product effect, this discussion will have a lot to gain.

Design specification and function realization of four interface

Main executives: UI, UE, program, SEO
Required communication personnel: UE, Sales

1) Design Code
In view of the dynamic implementation, the light effect chart is very difficult to give performance directly, then need to cooperate with the use of documentation and design specifications to assist. For example, button and text chain before and after the style, text spacing .... The following figure:

2 Code and program development
By the UID of the page Code development (CSS+DIV), and need to strictly refer to the relevant specifications of SEO, for some Ajax dynamic effect also requires program staff to help complete, when the static HTML is completed by the technical staff of the program nesting, and realize the expected function.
This phase by the UI, UE tracking, to ensure that HTML and design to the maximum of the same premise, the implementation of the functions tested, and the interactive design improvement documents, submitted to the technical staff.

Five Products online

Key executives: Demand Department
Communication personnel: UI, UE, procedures, sales

This phase is mainly the content of the addition, mainly by the relevant channel editor completed, for the soft ad bit also needs and sales coordination. After the completion of the content added, by the demand department, UI, UE verification, in the guarantee and content, function integrity, the overall on-line.

Six analysis report and optimization plan

Principal executives: UE
Required communication personnel: UE, UID, procedures, demand department, sales

After the product on-line, the UE carries on the data and the opinion collection, in two weeks after the related improvement document, coordinates each department to optimize the work.