Non-prototype is not designed

In the surging Internet wave, product iteration speed is getting faster and faster. With the surge in user demand, the demand for designers is constantly increasing. In the interactive design field for the first few years, it has been obvious that the visual content is far easier for users (and even our customers) to accept than the document content, just as one sentence often said in user research projects: "What users say does not mean what they think." Today, based on the prototype design, we will make some brief analysis with you.

1. What is prototype design?

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

The following describes how to organize and simplify the traditional experience design process based on your understanding of UCD and project experience. (The process is the way that every group works. It seems like we look like we are very difficult to be exactly the same, and it often changes and cannot be final .)

In short, traditional prototype design is often positioned at the beginning of a conceptual design or the entire design process. With the project size and time cycle, UED personnel often determine the paper prototype, low-fidelity prototype, high-fidelity prototype, and other quality content as output based on their needs. Specifically, the prototype can be divided into three categories:

● Paper prototype: As the name implies, it is the design prototype drawn on the document paper and whiteboard ,. Easy to modify and draw, not easy to save and display. Therefore, to effectively utilize the paper prototype, we need to pay attention to the carrying capacity of the paper prototype.
● Subsistence allowances: the original model is usually based on the existing interface or system. After a certain number of design documents are processed through a computer, the presentation is clearer and can contain the interaction and feedback of the design, poor appearance and effect. It can be understood as a general term between the output of a paper prototype and a high-fidelity prototype. It can also be used as a requirement design draft.
● High-fidelity prototype: it is a type of ghost weapon used in prototype design. This includes product demo or conceptual design presentation. Visually equivalent to the actual product, and the experience is similar to that of the real product. To achieve the complete effect, Interaction designers are required to have the visual aesthetic ability. Only by moving customers from both visual and experience perspectives can they ultimately win the trust of customers.

When we constantly design the prototype by drawing, will we find that sometimes the prototype does not play its role? Or can we find that we cannot figure out time for prototyping? The prototype is only used to display features and effects, but cannot be used as the best? Next, let's take a further look at how to integrate the prototype design into the experience design process.

　

Ii. Why & how?

We love hands-on, innovation, and comments and thoughts. In practice, the following situations often occur:

Looking back, most of the time we output the subsistence allowances design draft, the transmitted information can be expressed completely through the paper prototype, the time and cost of the paper prototype may be only half or less. Looking at the entire product design process, a navigation, dialog box, window is still feasible. I tried to discuss it with my hands during "requirement discussion, A few clicks may help us sort out the processes, la S, and controls required for interaction design in a short time. In addition, in the drawing process, there is a low threshold (may need another pen) to allow everyone to participate in it, creating a lot of additional information and value. Perhaps better, by drawing a whiteboard, you can clearly transfer the layout and logic of the window, while low-cost communication is achieved in the Real Media, it will more easily impress your product managers and customers. Note the following when creating a paper prototype:

● Try to prepare two pens at the same time so that more people can participate in the design.
● Try to prepare a red pen and summarize all the content at the end of the discussion.
● Remember to take a photo of the whiteboard or keep the drawing before the output.

If you have rich imagination and a certain hand-drawn foundation, you can even record and display the entire design process in hand-drawn forms. Now, similar product promotion can be seen everywhere, for example, the famous BMW car. By the way, I would like to share with you the back of the napkin book on visual thinking.

We can only see one end of the balance above. I call it "agile original model", which encourages everyone to work diligently at the beginning of the design. Boldly hand over the pen to the product manager and other people in the team to help the designer improve and enrich your manuscript so as to inspire and save more time to generate idea. Furthermore, when professional competence and Environment Permit, designers and teams can draw paper prototypes at the beginning of their needs, then, the product manager will give the relevant design draft or subsistence allowances.

At the other end of the balance, we should move towards the "refined prototype" era. Try to perfect the design idea and integrate it into the real scenario. You can click and drag on the software interface or web experience as much as possible. With the output of a high fidelity prototype, users are more likely to be attracted by the entire product rather than a specific pattern or experience. This not only helps to recognize the opportunity of a single solution, but also helps to establish a professional image of the designer from the aspect, improve the customer's recognition, and even boldly propose the process hypothesis: "Prototype-centric design ".

　

3. Manual prototype design

We recommend and analyze several prototype design approaches below.

The paper prototype mentioned above is based on paper and pen. We can quickly and easily draw a window panel and click a dialog box to set and save it, add the corresponding error and points. In addition, in order to solve the defect that is not easy to save, we recommend several software as the output of the paper prototype.

1. balsamiq mockupsDemo address

This is a software that helps you quickly and intuitively draw User Interface prototypes. It includes 75 ready-made controls and allows you to easily design the interface framework in a friendly hand-drawn style. It is easy to get started. It can be edited repeatedly and the layers and control status can be adjusted. It is a rare paper prototype drawing software. However, it can only replace the paper prototype, which is not easy to express the interaction process and effect, and has poor support for Chinese characters.

2. Microsoft Expression blend + sketchflow

Microsoft Expression blend includes a set of new features specifically designed to help users create, communicate, and review prototypes of interactive applications and interactive content more easily and quickly. This set of features is called sketchflow. It is an actual Windows Presentation Foundation (WPF) or Microsoft Silverlight application. You can generate a prototype project, run it, and then browse in the prototype (even if you only have the initial sketch of the prototype ).

Compared with the balsamiq mockups, sketchflow not only can draw a hand-drawn prototype with affinity, but also can achieve the response and effect required for interaction, so that the low-income zhenyuan model gives a high fidelity connotation, it is an unexpected surprise. However, due to the low penetration rate of Ms Silverlight Technology in the short term, the cost for getting started may be high and can be used as a method for long-term attention and research.

In addition, Visio and mind manger are also good choices for organizing product logic and processes on the Subsistence model. Everyone is familiar with the prototype design (mainly applicable to subsistence allowances ).Axure, The latest official version 5.6, visit the official website>

It can quickly jump to and change pages and complete the process demonstration. We recommend that you use it with the product manager. However, as a designer, how can we only output the original subsistence allowances as the discussion material?

When everyone is well versed in the discussion based on the paper prototype, they can rest assured that the guns in their hands can be handed over to enthusiastic product managers for the design of the original subsistence allowances. Under such an ideal situation, we have to spend time thinking about how to implement our "Amazing"-high fidelity prototype. Speaking of high fidelity prototype, we still need strength and exercise very much. At this time, you have to sacrifice the designer's favorite, Adobe's Flash Platform: Flash cs4, flex/flash builder, Flash Player and Adobe AIR.

With regard to flash learning, combined with Action Script 3.0, XML and Adobe's air technology, we can fully and realistically implement any interface effects we want. The learning process will not be described in detail. From the development of Adobe's product line, it is not difficult to see that the ultimate realm of prototype production is that it can be combined with the actual product, so that the designer's output and developers can be directly combined, so that the prototype can be 100% fidelity. For the client prototype, you can use VC to write program code, or use the blend interface in win7 to greatly reduce the embarrassment of "this effect cannot be done.

3. uidesigner

Speaking of high fidelity prototype, it cannot be mentioned that the secret weapon uidesigner developed by CDC is a specialized weapon for CDC and has been shared with you. Uidesigner allows you to easily implement a variety of interactive effects, and can basically control all the attributes contained in the Windows Standard space, but it does not require you to have any programming skills. Interested friends can go to http://cdc.tencent.com /? P = 424.

For Web products, as long as designers can actively improve their hands-on capabilities and quickly implement high-fidelity models of Web products by using HTML, Ajax, and jquery, they also need to continue learning with the development of Internet technology, keep pace with the times.

All in all, we usually do more work and sweat less in wartime (customers are not satisfied, the boss is not satisfied, and everyone else needs to feel cold sweat ......). In the design process, public components can be designed to continuously improve efficiency and explore new and good prototype design methods. Combining the entire design process with the prototype design has the following benefits:

● The most authentic design, and the entire team (development, product manager, user)
● Establish the Professional Influence of designers (speak with strength and persuade others with products)
● No technical pressure, expanding the field of professional knowledge will help to develop to a higher level :-)

I would like to share with you the hope that THX will help you in your daily work.

 

 

From: http://cdc.tencent.com /? P = 2146