Ultra-meticulous product design flow skills science and technology

Editor's note: Today's good text is excerpted from the user experience design and Process documentation Guide This section gives you a product of the birth process, from concept sketches, wireframe to prototype manuscript, the author has a real dry and skill sharing, especially for the advantages and disadvantages of various documents and the preparation of principles are very clear, Product designers can come in and go up and down.

In this article, Chris Bank, from the uxpin--user experience Design application, will provide you with a detailed description of the sketches, prototypes, and design specifications that need to be built during the initial prototyping phase of the product. See our user experience design and process documentation guide for more tips on improving the user experience at the product design stage. Experts and professional firms in this field include Aarron Walter, Ian McAllister, Vurb, MailChimp and Apple.

From simple zippers to mobile apps like Dropbox for iOS, each product undergoes a "paper" (or screen) phase before it is produced. This design phase is an essential stage for all products-whether it is a qualified product or a product that is not up to standard.

The definition of product design is simple, but in today's society, to make a perfect product needs endless thinking: whether the product can help users? Is it simple and easy to use? Can you bring a sense of familiarity to your users after first use? In view of this, product designers shoulder a major responsibility, their products need to make users feel simple and useful. The so-called product is actually a medium to convey unforgettable experience.

Although the process may appear to be trivial, as if a pile of paper and a messy screen is stacked, you know in the end there will be ways to find a way out of clutter. In this article, we will explain various document preparation methods so that we can integrate ideas into design. Below I will introduce concept sketch painting and wireframe drawing, low fidelity and High-fidelity prototype, as well as product design specifications.

Repeated sketch and wireframe drawing

Sketches are probably the most common type of document in the user experience design process. As discussed in detail in the user experience design and process documentation guide, the general process for this work is to draw the model, then perform usability testing (both internal and test-oriented testers), and then repeatedly replace iterations.

But the most important thing is to keep the user's features in mind. When drawing sketches, you should refer to the user characteristics set during the analysis phase, with the user as the focus at all times. Next, let's take a look at the rough-hit sketch and wireframe drawing.

1. Rough Create sketch Drawing

Pencils, pens, markers, crayons, paper applications, even classic Microsoft brushes, and so on, but anything that leaves traces on a plane can be sketched.

Laura Busche (smashing magazine design writer) has pointed out that hand-drawn sketches have the unique advantages of stretching memory, helping to focus attention and improving flexibility. Hand-painted is also the quickest way to visualize the concept of vision, so it should be used as your preferred option.

Product design company Zurb attaches great importance to the use of paper sketch to render the product's function and flow. They prefer to use markers because they can limit the degree of detail and make the sketch more focused on the overall concept. For them, paper painting is faster, more focused and more flexible, but scalability and interactivity are not strong because you can't use templates and you can't relate different sketches to each other.

2. Line Diagram drawing

Digital wireframe drawing software is all about, but only a few of them are worth a careful experience, such as Uxpin, Balsamiq, Axure and Proto.io. If you choose to use paper, you can divide the paper into different parts to draw the wireframe, and then add gridlines and frames where you want. Wireframe drawing should be the skeleton of a product. For advice and practice on this, see the Guide to wireframe drawing.

Anthony Tseng,ux Movement's editor-in-chief believes that if your current goal is to better reflect the actual form and function of the product in order to convince the person concerned, you can improve the fidelity of the design. High-fidelity wireframes are more time-consuming and less desirable for fast harvest feedback, but are easier to articulate and allow people and users to clarify which content is a form and which are buttons.

Detailed model

Depending on your process, the detailed model can be either a high-fidelity wireframe or an upgraded version of the conceptual model.

Some companies will completely skip the line diagram to draw this stage, directly create the concept model of low fidelity, and then gradually increase the fidelity finally reach the detailed model level. Some companies will choose a step-by-step approach using wireframe as the skeleton of the model. Sometimes you might hear someone mixing the two words "wireframe" and "model", but in fact the two are completely different two document types. The function of a wireframe is to show the structure, and then evolve into a model as an application or a prototype of the site by injecting material and detail into it.

According to Uxpin CEO Marcin Treder, a model with a higher degree of detail is usually the first draft of a design or even the actual visual design. A carefully crafted model can be achieved to the point where it is close to reality, thus stimulating attention to the visual side of the project. The wireframe may contain shapes, lines, and possibly some details (if it is a high-fidelity image), but the detailed model focuses on displaying specific fonts, color schemes, and the final appearance of the whole.

Nick Pettit, Treehouse's designer, has repeatedly stressed that detailed models can be used as a means of designing communication, but not directly into the development phase. He explains: Given the advent of responsive design and flexible methods, it is no longer appropriate to spend a few hours making detailed models as product specifications and then dropping them off to developers. In addition, the low fidelity of the wireframe is more convenient for iterative updating, because it is simple to implement, and the production of prototypes can be more easily linked to different functions.

The principle of prototype making

If the wireframe is focused on the structure, then the prototype is more focused on the experience. Wireframes or models can be connected using Invision or Uxpin applications to create prototypes that can actually be clicked.

As shown in the figure above, there are various dimensions of fidelity and workflow. HubSpot's former user experience director, Josh Porter, prefers a simple workflow that transitions from sketch drawing directly to the prototype creation phase (skipping the wireframe). For him, the sketch takes less time, but it is able to answer "what objects are presented on the page, what these objects can perform," and so on, and more effort is needed to build the prototype. This does not mean that wireframes and models are not used, and instead, the description can shift time from developing static resources to interacting resources.

The real strength of prototyping is that it allows the team to shift the center of thinking from the delivery of work to practicality. As described in the "minimizing available products Guide," Many successful companies even publish prototypes as first generation products directly.

Low-Fidelity prototype

When it comes to rapid prototyping and the streamlining of user experiences, people often refer to the minimum-subsistence prototype. Low-fidelity prototypes value the refinement of interactions rather than the details of visual or technical execution, thus helping to avoid limited vision. Low-fidelity prototypes can be made using many online applications (Balsamiq, Invision, or Uxpin), and can be used in the old way: HTML programming.

Andrew Chen, a famous entrepreneur, believes that a low fidelity prototype is one of the best ways to achieve a customer-driven design. Using the online application creation of the low-fidelity prototype although may not look good, but compared to a programmed or high-fidelity prototype, it can help you to rapid iterative update, to ensure that the product you are offering is the product you want (regardless of iteration). In this respect, he summed up the 4 benefits of the minimum-fidelity prototype, as follows:

Better feedback and more real

For beautifully crafted prototypes, people may focus more on visual effects than on value propositions. They may find it difficult to penetrate into your ideas, because they are discouraged by gorgeous results.

Suitable for A/b test

The diversity of the UI, which can be tried and optimized for varying details, drives A/b test to flourish. As a result, the 10-20 bold changes in the UI are more thorough than the 2-3 perfect to pixel level changes.

The cost of making mistakes is even lower.

Low-fidelity prototype involves less resources, the team will not be too serious change, so using the minimum real prototype as the core of the work is relatively easier.

Focus on the process rather than the page

The appearance of the page is not the key, what really matters is the front and back links of the page. The low fidelity prototype is like a sandbox environment where you can draw and contact a large number of small pages, experience interactions, and try other ideas that make you feel natural and comfortable.

If you choose a real-world prototype, based on past experience, it is recommended that you focus on the function of 20%, but the actual use time is 80%.

Define, design, redefine

As we've shown earlier, the definition of product design stems from a number of technical techniques that can help you turn your ideas into experiences. Whether you choose a minimum or high fidelity, the fundamental goal of sketching, wireframe, and prototyping is to deliver excellent product ideas, not simple products.