Website interaction design: differences between line charts, prototypes, and visual drafts

 

　　

 

[Editor's note] the translator @ Xiao Bang. This article describes the functional differences between Wireframe, Prototype, and Mockup.

Many people (non-designers) who are engaged in information technology confuse these words when delivering the design and think that they all represent the same thing: to express their own creative box-drawn design. If we want to better express our ideas at work, we need to have a better understanding of the three.

Obfuscation brings troubles: they often get confused when they cannot tell the work of a user experience designer. 「 How the fuck can't I click this button ?」 「 I don't know. You can click here !」 Similar issues are common in user experience projects. Mistaken line diagram as a prototype, a bit like a building with unclear blueprints (guiding the construction scheme) and demonstration Hall. You can try to stay in the Demonstration Room For A While (the beauty of the room can be intuitively conveyed), but you cannot lie comfortably on the blueprint-the blueprint is just a piece of paper.

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

The blueprint, that is, the construction scheme, describes in detail how to build a building

Demonstration hall to provide testing and experience opportunities for future residents

The presentation hall and the blueprint all represent the final products, namely, buildings (houses ). The same is true for line charts, prototypes, and visual drafts. These documents are different forms of presentation of the final product.

Believe it or not, the first thing I teach the user experience design team is to tell them to distinguish these three concepts. This is too important.

Next, let's discuss in detail the differences between the three. In the future, you will understand the situations in which words are used.

Line diagram

　　

 

1. What is a line chart?

Wireframe is a design of subsistence allowances:

Content outline (what)

Information Structure (where)

User interaction description (how to operate)

The line diagram is not just a set of meaningless lines and frames; well, it looks like it is, maybe. You can understand the line diagram as the backbone and core of the design drawing, which carries all the important parts of the final product.

The line diagram helps you balance fidelity and speed. You do not need to care about the details when drawing, but you must express the design idea and do not miss any important part. Just like opening up a channel to help you understand the design for projects and team members (development engineers, visual designers, copywriters, and project managers) working together. To be clear, you are designing a city map. Each street can be displayed on a map, but it is simplified. You can see the framework of a city through a map, but you cannot view the beauty of the city.

Draw a line chart, focusing on "fast 」. Spend most of your time communicating with team members and thinking more. Aesthetic visual effects should be simplified as much as possible. Black, white, and gray are classic colors. You can also use blue to represent hyperlinks. If you have spent a lot of time preparing the wiremap (for example, selecting an icon or uploading an image), please change to a simple method (for example, using a placeholder: an image that draws X, add the appropriate description text ). We are used to calling the wiremap a design map of subsistence allowances.

Remember, a good line chart can clearly and clearly express design ideas like a crystal, and seamlessly convey their ideas among members.

2. When to use the line chart

The line diagram is often used for project description. In view of its static design, interaction can only be demonstrated through one interface at a time, so be sure to attach the description. (If necessary, a brief description or a complex technical document is included)

It is also easy to draw, and is often used in informal occasions, such as internal communication within the team. If developers ask how to do one thing, a line chart drawn quickly can be attached to the response. It is difficult for a line chart to act as the material for user testing. It can also collect some feedback if you are more concerned about the user's opinions than the test method.

Although it has been a bit gossip in recent years, the line diagram plays an amazing role in the whole design process and is indispensable in the initial stage of complex projects.

Prototype

　　

 

1. What is prototype?

Prototype is often confused with the wiremap. It is a medium fidelity design that represents the final product and simulates interactive design. Prototype:

Experience content and interaction on the Interface

Like the final product, test main interactions

The prototype should simulate the final product as much as possible, even if it is not the same (it cannot be a gray box design ). Interaction should be carefully modularized, and the experience should be consistent with the final product.

The logic behind the prototype should not depend on the interactive form. This reduces the cost of prototyping and accelerates development.

2. When to use the prototype

The prototype is often used for testing potential users. Prior to the formal involvement in the development phase, the product availability should be considered in the form closest to the final product.

As you think, prototype is generally difficult to become a good document, because it requires "readers" to make effort to understand the interface. But from another perspective, the intuitive and easy-to-understand prototype of the interface makes it the most efficient design document.

Note that compared with other communication media, prototype costs are high and time-consuming. I recommend that you use the prototype in the subsequent development stages. (Well, you may have to write HTML and style sheet code yourself.) It is quite useful for simple projects. (If "reuse" is considered, it will increase the cost of drawing and deviate from the original intention of the prototype. Reuse is not recommended. -- Translator's note)

If properly designed and combined with user testing, the prototype is worth the money.

Visual draft

　　

 

1. What is a visual draft?

Mockup is a high-fidelity static design. Generally, a visual draft is a draft or final draft of the visual design. Excellent visual drafts:

Information presentation framework, static demonstration content and functions

Help team members to view projects visually

It is hard to tell what a visual draft is and what a line chart is. It is irrelevant to the names of some software companies. Region ~

2. When to use visual drafts

Visual drafts are especially useful if you want to gain approval from shareholders and collect user feedback.

Add it to the design document. It is definitely the finishing touch.

Summary

　　

 

Link: http://cuikai-wh.com/blog/2460