Web Interaction Design: The difference between wireframes, prototypes, and visual drafts

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

"Editor's note," The translator @ Xiao Bang classmate. This paper introduces the rigorous functional difference between the Wireframe, the prototype (Prototype) and the visual manuscript (mockup).

For many information technology friends (non-designers) in the delivery of design, they confuse these words, think they all represent the same thing: express their ideas of the wireframe hand-painted design. So if you want to express your ideas better at work, we need to have a better understanding of these three people.

Confusing concepts leads to trouble: They confuse the user Experience designer's work and often feel confused. "What the fuck is wrong with this button?" I don't know how to press this place! Problems like this are common in user experience projects. Mistaking a wireframe as a prototype is a bit like building a blueprint (guiding how to construct a project) and a presentation hall. You can try to stay in the showroom for a while (it's the beauty of the room), but you can't lie comfortably on the blueprint-the blueprint is just a piece of paper.

In architecture, the presentation Hall and blueprint serve different communication objects:

Blueprint, the construction plan, detailing how to build a building

Demo Hall, providing a chance for future residents to test and experience

The common point of the presentation Hall and blueprint is that they all represent the final product, the building (the house). This is also true of wireframe, prototypes, and visual drafts, which are different ways of presenting the final product.

Believe it or not, the first thing I teach the user experience design team is to tell them to distinguish between the three concepts. Because it's so important.

Next, let's discuss the differences in detail, and then you'll know what words to use in any situation.

Wireframe

1. What is a wireframe?

Wireframe (Wireframe) is a low-fidelity design diagram when explicitly expressed:

Content outline (something)

Information structure (where)

Description of user interaction behavior (how to operate)

A wireframe is not just a set of meaningless lines and boxes; Well, it seems to be, uh, embarrassing. You can interpret the wireframe as the backbone and core of the design diagram, which carries all the important parts of the final product.

Wireframes can help you balance fidelity with speed. The drawing does not care about the minutiae, but must express the design idea, cannot omit any important part. Just like the team members (development engineers, 10243.html "> Visual designers, copywriting authors, and project managers) who work with the project and collaborate together, a channel for understanding the design is opened. To be clear, you are designing a city map that shows every street on a map, but simplifies the drawing. Look at the map to see the city's frame, but not the beauty of the city.

Draw wireframe, with the emphasis on "quick". Most of the time please communicate with team members and think more. Aesthetic visual effects should be simplified as much as possible. Black and white Gray is the classic color, you can also use the blue to represent the hyperlink. If you spend a lot of time preparing a wireframe (for example, selecting an icon, uploading a picture), change it in a simple way (for example, by using a placeholder: a picture of x, plus the appropriate descriptive text). We are used to refer to the wireframe as a low-fidelity design.

Remember that a good wireframe can express design ideas clearly, like crystals, and communicate their ideas seamlessly among members.

2. When to use wireframe

Wireframes are often used for project descriptions. Given its static design, interaction can only be demonstrated through a single interface at a time, so be sure to attach a description. (as long as necessary, short description or attached to the complex technical documents, are)

Also because it is fast and simple to draw, it is often used in informal situations, such as communication within the team. If you're developing a question about how to do it, you might want to include a quick wireframe. Wireframe is difficult to act as a user-tested material; it can also collect feedback if you are more concerned with the user's opinion than the test method.

Although in recent years has been the gossip, but the wireframe in the entire design process to play the astonishing effect, is essential in the complex project initial stage.

Prototype

1. What is a prototype

Prototypes (Prototype), often confused with wireframes, are medium-fidelity design diagrams that represent the final product and simulate interactive design. Prototype when allowing the user:

Experience content and interaction from the interface

Like the final product, test the primary interaction

The prototype should simulate the final product as much as possible, even if it is not exactly the same (it must not be a gray wireframe design). Interaction should be carefully modular, as far as possible in the experience and the final product consistency.

The logic behind the prototype does not depend on the interactive form. Reduce the cost of making prototypes and speed up development.

2. When to use the prototype

Prototypes are often used for potential user testing. Consider product availability in the form closest to the final product before formally intervening in the development phase.

As you can imagine, a prototype is generally difficult to become a good document, because it allows the reader to take some effort to understand the interface. But from another point of view, as an interface, the prototype is intuitive and understandable, making it the most efficient design document.

Please note that the prototype is expensive and time-consuming compared to other medium of communication. I recommend that the prototype be drawn and reused in the next development phase. (Well, you might have to write HTML and stylesheet Code yourself) that's pretty handy for a simple project. (Once "reuse" is considered, it will increase the cost of plotting and deviate from the original intention.) Reuse is not recommended. --Translator Note)

If properly designed, combined with user testing, the prototype is a matter of value.

Visual manuscript

1, what is visual manuscript

Visual draft (MOCKUP) is a high fidelity static design diagram. Generally speaking, visual manuscript is a draft or final draft of visual design. Excellent visual presentation when:

Express Information Framework, static demo content and functionality

Help team members review items visually

People are confused about what is visual manuscript, what is wireframe, and the name of some software company is not unrelated. Poof ~

2. When to use visual manuscript

Visual drafts work especially well if you want to get approval from shareholders, and collecting user feedback is pretty good.

Adding it to the design document is definitely the finishing touches.

Summary

Original link: http://cuikai-wh.com/blog/2460