The construction and design of interactive design prototype

Continue the "Interactive design function" content, then how to organize the page elements, production prototype demo, which performance level is the focus of interaction designer content, prototype production and what can follow?

Ⅰ. What is a prototype?

The concept of the prototype is simple and straightforward is the user's use of the product interface model, the prototype design consists of three parts: ① requirements content of the presentation ② navigation and link ③ data exchange

① Requirements Content Presentation

1 text, multimedia content presentation

The most basic Web page is the carrier of text and multimedia, through the text and the media to present the demand content to the visitor is the most basic part of web design, the designer needs to send the information to the visitor, this is the basic design purpose, before I have written a similar article "Visual design is to express information." In fact, whether it is interactive or visual, should have the ability to organize typesetting, the division of the primary and secondary, understand the target, understand the user group, can talk about the design.

Understanding grids, interactive designers with typesetting skills can save a lot of communication costs:

Unlike traditional visual typesetting, interactive design requires the organization of information within a limited space, with several of the most common techniques:

In the design layout process, the interaction must also understand the front-end implementation method, the basic html,css and some common script effects need to know.

2 Action Call

In addition to basic layout layouts, interaction requires a little effort in the rendering of requirements. Read some psychology, understand the data analysis, familiar with the user's behavior habits, how to show the content in order to cater to users. To treat users, designers should have a slave mentality to guess the master's Glass heart.

First, introduce a method of content guidance, and give this design method as "Call of action". The so-called "Call of action" is to render the interface of the time to consider the user's psychology, can stimulate the user's participation. Some of the more blunt practices such as: text bold increase color, the button becomes larger, ad ads made GIF or flash, add new,hot such as picture tags, or simply advertise with sexy beauty. These practices, while damaging the picture and experience, still admit that these more blunt design methods can indeed attract a portion of the user's attention.

If you do some thinking about these methods in a different way:

These are the use of psychological methods to do the "Call of action" to understand the user, standing in the user's point of view of the problem is an interactive designer must learn one way.

3) Example Boot

If gives the user three trash cans, the classification is recyclable, cannot recycle, the harmful rubbish. No matter how you design your appearance, what color you use, or how many users don't know how to categorize. But if there are some rubbish in the dustbin, the user will naturally choose the classification according to the garbage of the last person. Such a boot approach can also be applied to web design.

See some examples:

② Navigation and Links

In addition to the content of the presentation, the Web page there are a large number of navigation and links, that is, the legendary information architecture. The main goal of information architecture is to use the shortest time, the most convenient form allows users to quickly find what they want, the concept of structural navigation please read the <1 in the "Interactive design function" of the previous article. On the design of structural navigation, here is a rough talk about links, which is the navigation of the associated navigation.

Association navigation is mainly to solve the user "next" what should be done, this is divided into two situations:

1 What the Product Manager wants the user to do

Product managers will be forced to add business models to their Web sites under some indicator pressure, which may have nothing to do with what the user expects. Then this kind of links are collectively referred to as business-type links.

This kind of business link content, the interaction needs to consider is how to integrate these links into the page, the emphasis is not too blunt. The common method is basically graphic mixed row, dynamic playback scrolling, ad ads inserted.

2 What do users want to do

What the user wants to do may not be clear to himself, how to help the user find the content of interest needs to automatically create the associated content through metadata. Elements include: time, type, subject, interest, search or purchase record, etc. This time the link is generated by the program, interactive designers to be able to read the data, give the appropriate link rules.

For example, the most common "guess you Like"

If you can maintain the business orientation and the user's psychological model in a dimension, such as Google,baidu personalized advertising, then the product experience and conversion rate will naturally rise, but to do so, the data analysts, product personnel and interaction designers to work together.

③ data exchange

What we have said before is what we present to the user, but the product-level Web needs to interact with the user, that is, the exchange of data. How to make it easier for the user to participate, the data exchange more smoothly, this is what we usually talk about the ease of use of the product. So how does the prototype phase make the product better?

1 familiar with and use the various standard components of the Web platform

Another demo preview site with a jquery component http://jqueryui.com/demos/

2 Give the right immediate operation feedback

3 The principle of fault tolerance

4 program can be implemented, as far as possible without allowing users to operate

Similar to import similar products, select records, Smart search, etc.

Ⅱ. How to draw a prototype

To draw a prototype, of course, first select the tool, the blogger used the following prototype tools:

Of course, finally still feel axure best use, the use of tools please go to the Product prototype design forum, this article will not repeat.

Ⅲ. Prototypes are processes, not final results.

I thought it was very important, so I made a separate list. I used to be obsessed with the use of tools, and even use PS Chettu to make the prototype very lifelike degree, but the time will feel that such a move is very meaningless, and will not consciously resist the modification of others suggestions. The prototype is just a transition from concept to implementation, a communication medium for different departmental dialogues, and eventually replaced by development requirements documents and front-end drafts, with the emphasis on communication and helping project members understand the need for improvement.

So I always feel that interactive design is a product of the needs of the idea of translation, more than visual understanding of products, more than the product design, is to assume the concept to achieve the communication bridge. Therefore, a wide range of acceptance of the proposed changes, there are selected to improve the prototype constantly, using the prototype to cause the discussion of the project members, each prototype modification is an understanding of progress, so as to play the real meaning of interaction design.

Finally write point summary:

Prototype production is a relatively complex project, there is no shortcut and quick Method, the ability of the difference is basically the accumulation of project experience and business familiarity, of course, personal perception of cognitive ability is also very important. Bloggers are also a rookie in the early interactive, writing such articles are basically their own interactive design of personal understanding, hoping to play a good effect.