Analysis of visual content design based on prototype design

In the surging tide of the internet, product iterations faster and faster. With the surge of users ' demand, it has brought about the improvement of the designer's ability. In the field of interactive design for several years, it is clear that visualization is far more readily acceptable to users (and even to our customers) than documents, as is often said in user research projects: "What users say doesn't mean they think." Today, with the "prototype design" as the basis, and we started a few brief analysis.

First, what is the prototype design?

First, let's look at the "prototype design" in the experience design process.

The following is a process that combines personal understanding of UCD and project experience, grooming and simplifying the traditional experience design. (Process is the work of each group, as if our looks, it is difficult to exactly the same, and often change, can not cover the final conclusion.) ）

In short, traditional prototyping is often a process that is positioned at the beginning of a conceptual design or an entire design process. With the project size, time cycle, and so on, ued will often be based on the needs of paper prototypes, low Fidelity prototype, high-fidelity prototype and other quality of the content as output. In particular, the prototype can be divided into 3 categories:

Paper prototype: As the name suggests, is the painting in the document paper, Whiteboard design prototype, schematic. Easy to modify and draw, not easy to save and display. Therefore, in the effective use of paper prototypes, we need to pay attention to the bearing of paper prototypes.
Low-fidelity prototype: usually based on the existing interface or system, through the computer to carry out a certain processing of the design manuscript, more clearly, can include the design of interaction and feedback, aesthetics, effect and so poor. Can be understood as between the paper prototype and the high Fidelity prototype of the general designation, often also as the requirements of the design manuscript output.
High Fidelity Prototype: The ultimate weapon that belongs to the prototype design. Including product demo demo or concept design display. Visually is equivalent to the actual product, and the experience is also close to the real product. In order to achieve the full effect, the interaction designer is required to the visual aesthetic ability to a large extent. Only from the vision, experience two aspects at the same time impress customers, in the end can win the trust of customers.

When we are constantly netizens to design prototypes, will it be found that sometimes prototypes do not work? Or will it be found that there is no time to make a prototype? The prototype is only used to show the characteristics and effects, not to make the best use of it? Next, let's take a closer look at how to combine prototyping design with the experience design process.

　

Second, Why & how?

We love to be hands-on, innovative, and also like to comment and think. In practice, it is often the following:

Looking back, we most often output the low-fidelity design Draft, the message is to be completely through the paper prototype on the diagram to express, and the paper prototype can take only half or less time and cost. Looking at the whole product design process, a navigation, dialog box, window, also still feasible. Try to talk about it in a "need discussion", with a few strokes that might help us comb through the "processes, layouts, controls," and so on for the interaction design in a very short time. And in the drawing process, the lower threshold (which may require another pen) will allow everyone to participate, creating a lot of additional information and value. And perhaps even better, by drawing the whiteboard process, you can more clearly convey the layout and logic of the window, and by the real medium is low-cost communication, it will be easier to impress your product managers and customers. When you create a paper prototype, there are only a few things to note:

Try to prepare 2 pens at the same time to get more people involved in the design
Try to prepare a red pen, at the end of the discussion, to comb and summarize all the content
Remember to take pictures of the whiteboard, or keep the drawing paper before the output.

If you have a bold imagination and a certain hand-drawn foundation, you can even record and display the entire design process through hand-drawn forms, and now similar product promotions are also available, such as the famous BMW sedan. By the way, I recommend a book on visual thinking, the back of the napkin, to share with you.

Above we see only one end of the scale, I call it "agile prototype", is to encourage everyone in the initial design, the same time to move. Give the pen to the product manager and other team members to help the designer refine and enrich your manuscript so that you can inspire and save more time to produce idea. Further, even in the case of professional competence and environment permitting, it is entirely possible to draw a paper prototype with the team at the start of the requirement, and the product manager will then give the relevant design or low fidelity prototype.

At the other end of the scale, it is time to move towards the "fine prototype" era. As far as possible the design of creative perfect and integrated into the real scene, whether it is a software interface or Web experience, can be real click and drag. With the output of high-fidelity prototypes, users are more likely to be attracted to the entire product rather than to a pattern or experience feature. This will not only help the recognition of a single program, but also from the side to establish a professional image of the designer, to enhance customer recognition, and even bold to put forward the assumption of the process: "Prototype-centric design."

　

Third, do prototype design

The following recommendations and simple analysis of several prototype design approach.

In front of the paper prototype, the most basic is the need for paper and pens, we can quickly and easily depict a window panel, from which to click a dialog box to set up and save, in addition to the corresponding error and the process. In addition, in order to solve the difficult to save the defects, in addition to their own pen, and then recommend several software as a paper prototype output.

1. Balsamiq mockups Demo Address

This is a software that helps you to draw the user interface prototype quickly and intuitively. This includes 75 out-of-the-box controls, and it's easy to finish the design of the interface frame with an affinity hand-drawn style. It is very easy to get started, and can be repeatedly edited and support the adjustment of layer and control state, is a rare paper prototyping software. But really can only replace the paper prototype, not easy to show the interaction process and effect, the Chinese support is also poor.

2. Microsoft Expression Blend + sketchflow

The Microsoft Expression Blend includes a new set of features designed specifically to make it easier for users to create, communicate, and review interactive applications and interactive content prototypes more easily and quickly. This set of features is called Sketchflow. It is the actual Windows presentation Foundation (WPF) or Microsoft Silverlight application. You can build a prototype project, run it, and then browse through the prototype (even if you have only the initial sketch of the prototype).

Sketchflow and Balsamiq mockups compared, not only can draw a hand-drawn prototype with affinity, but also to achieve interaction needs of the response and effect, so that the real prototype to give high fidelity to the content, is to give people unexpected surprises. However, due to the low prevalence of Ms Silverlight technology in the short term, it may be possible for everyone to get started with a higher cost, which can be a long-term concern and research method.

At the same time, Visio and mind Manger is also a good choice in order to facilitate the grooming of product logic and processes in the low Fidelity model. For the prototype design (mainly for the low Fidelity prototype), we are very familiar with the Axure, the latest official version 5.6, visit official website >>

Can quickly achieve the page jump and change, complete the process of demonstration. And we recommend that you work with the product manager. However, as a designer, how can we be satisfied with the output of the low-fidelity prototype as a discussion material?

When everyone knows how to base a discussion on paper prototypes, can be assured that the hands of the gun to the enthusiastic product manager to carry out the design of the real prototype, in such an ideal situation, we have to spend the mind on how to achieve our "great absolute"-high-fidelity prototype. When it comes to high-fidelity prototypes, it really needs strength and exercise. At this point, you have to sacrifice designer favorites, Adobe Flash Platform:flash cs4,flex/flash builder,flash player and Adobe AIR.

Learning about Flash, combined with Action Script 3.0, XML and Adobe Air Technology, can be a complete, realistic implementation of any of the interface effects we want, learning process no longer repeat. From the Adobe product line development is not difficult to see, the ultimate prototype production can be combined with the actual product, so that the designer's output and developers can directly combine, so that the prototype to 100% Fidelity. For the prototype of the client, the VC can be used to write the program code, or in the Win7 under the blend interface, it can greatly reduce the "this effect do not" embarrassment.

3.UIDesigner

When it comes to high-fidelity prototypes, the CDC-produced prototype secret weapon Uidesigner, which is the CDC weapon, has now been shared. Uidesigner allows you to easily achieve a rich variety of interactive effects, basically can control all the attributes contained in Windows Standard space, but this does not require you to have any programming ability basis. Interested friends can go to http://cdc.tencent.com/?p=424 to understand.

And for web products, as long as the designer can actively improve hands-on ability, through the use of HTML and even Ajax, jquery, etc. can quickly realize the Web product High-fidelity model, but also with the development of Internet technology continue to learn, with the times.

In a word, usually more hands, less sweat in wartime (customer dissatisfaction, the boss is not satisfied, in exchange for anyone to be covered in cold sweat ...). ）。 In the process of design, we can continuously improve the efficiency of the design of common components, and explore new and good prototype design methods. Combining the whole design process with the prototype design can be summed up with the following advantages:

The most authentic design communication, and affect the entire team (development, product managers, users)
Establish the professional influence of the designer (speak with the strength, convince others with the product)
Skill is not pressed, broaden the field of expertise to contribute to a higher level of development:-)

With everyone, I hope to help you in peacetime work, THX.