First to learn how to make the high Dan Interactive output!

How to make a high grade interactive output with global control and detail focus is an interactive designer's ability to refine. Today, Ali's students have many years of experience to write out, the content of a lot, all dry goods, to collect.

Interaction designers often play a pivotal role in the process of project experience design, while the interaction designer is always an eloquent and logical expression in the project review. In addition to language expression, the interactive output document is the most powerful language for designers to express their attitude and thinking, and it is also the best way for the team to evaluate resources and project precipitation.

　　Value and type of interactive output

　　1. Principles

The interactive output is the carrier of the designer's professional thinking result. Host your ideas and programs so that they can be effectively communicated to partners and used to work together in a team. Visualize your design perspective, reduce communication costs, and ease project traceability. The principle of the interactive output is in content and form, easy to understand, and conducive to synergy.

1 Easy to understand: it is one of the most important values of interactive documents to effectively and clearly convey your thinking and solution ideas through your design output document. The output documentation of the interactive designer, the construction and grooming of the document content, and the form of the document presentation ensure that each member of the team is able to quickly understand your judgment and design solution for a particular requirement, and can empathize with its meaning.

In some large and medium sized projects, the team members ' understanding of the concept and objectives of the project is biased and different. Therefore, the interaction designer not only needs to complete the project design plan, but also needs to analyze, the project goal dismantling and so on the thought process integration into own design plan output. Designing output documents requires the ability to lead team members to think and think about the project, and to ensure that the design is implemented effectively, which puts higher demands on the interaction output.

2 for Synergy: When you are involved in a project with a large number of roles, or encounter the need to change frequently, the interaction design output needs to be between designers, or upstream and downstream in the content of the filling and form of the control to ensure a certain degree of synergy and basic cognition, can quickly participate in cooperation, maintain a unified style of output expression. (Figure 1)

Figure 1: Interaction designer upstream and downstream cooperation role

　　2. Basic type of output

Once you step into the interaction, there will be a lot of interactive output of the professional noun jumped out, such as: wireframe, prototype, high-fidelity, and so on. Many new people are often confused by these nouns. I think we can start with a simple understanding: wireframes and Prototypes are two different ways of expression used at different design stages. And the more close to the final product of the output of the real effect we call high fidelity, on the contrary, we call it the minimum.

Then we'll go into the details of the wireframes and prototypes of their respective features and uses.

1) wireframe (Wireframe)

A fast, static, and clear means of expression for a product by a designer or a demand side. Used for discussion and communication in the prophase of the project, provide a general concept and discussion direction to the project members or customers, so as to quickly understand and put forward their suggestions in time.

Wireframe needs to meet the following 3 goals:

Can define the approximate structure and layout of the page

A position where you can clearly express the content information

Can contain the principal interaction elements of the interface

Wireframe generally does not require too much detail and gorgeous, the content of the authenticity will not be too high requirements, but must be able to express your design thinking and solutions. Mainly with black Gray line frame and simple block surface and placeholder to form the entire wireframe. (Figure 2)

Figure 2: Low-fidelity line diagram

The most convenient way to make a wireframe output is hand-drawn. The simple interface layout and key annotations on a single piece of paper are widely used in agile project processes. Usually in the agile team, with rapid iterative wireframes and a large number of communication and discussion in the team, output project key interface scenarios, visual and front-end development can begin the next phase of work, interactive designers continue to improve the details of the program and the status of complement. Multiple roles are in hand, which is unique to agile design in relation to traditional waterfall-style cooperation.

Of course, there are many tools to draw wireframe, commonly used Balsamiq mockups,axure,ppt,sketch and so on. Each tool has its own characteristics, and each has its own pros and cons. Do not deliberately tangle in form and tool methods, can use the habit and meet their own design plan expression can.

2) prototype (Prototype)

The prototype is closer to the final form of the product than the wireframe, which serves as a usability test for the user and a design output for the project. Early prototype testing in the project can detect problems and vulnerabilities in a timely manner, and save the cost of subsequent development inputs. Prototypes are interactive and are as close to the final product interface as the high-fidelity design drafts. It is also the common interactive output that we often mention in this article.

　　Two, high Dan Interactive output

The interactive output is a form of the designer's summary of the product or demand. The designers put forward the demand side of the project needs and existing data to collate, analysis, after divergent creative thinking innovation and rigorous logic argumentation, get the gradually mature interactive product. This speculative process runs through every aspect of the workflow of interactive design.

Some particularly good product managers can also draw a seemingly orthodox interactive manuscript, seeing that it will go directly to the visual stage. This is also some of the visual students turn to interaction, often encountered problems, the interactive manuscript does not know how to express, hastily ended, the Product manager evaluation and I draw no bad. It depends on how the interaction designer speaks with its own interactive output. The pursuit of the designer will be their own detailed thinking and professional prototype to make the same as the visual manuscript as beautifully pleasing, and even the use of tools to explain the richer dynamic effect, the output of their own to higher Dan. Some people ask, is it an interactive manuscript?

1688UED the scope of output content of interactive designers is not just a complete interactive solution, also up to the designer for the project before, during and after three stages of thinking and innovation of the track and record (Figure 3 below), and according to the importance of the project (A +, A, B, C level) To determine the content scope of the project interaction phase that requires output. (Figure 4 below)

Figure 3: Interactive output content

Figure 4:a, B, C-level interactive output

Content requires a designer for the output of the level of control and logic requirements, can reflect and roughly restore his professional and depth. What is the difference between a common interactive output and a professional interactive output? We'll do a detailed analysis with the following key elements:

　　1. Progressive document logic in layers

The document logic is the directory of your article if you look at the interactive output as the output of the article in your project. How to get people from the reading directory can be the beginning of your design derivation process and project has a preliminary understanding and trust, how to organize the content of the output is the key.

Build the interactive output directory, you can determine the organization based on the type of project, the initial determination of the structure and number of pages. 4 commonly used organizational styles for your reference: (Figure 5)

1 according to the modified version of the organization: The application of key single page items, such as the home page, industry channels and so on.

2 according to the product Hierarchy Relationship organization: Applicable to the overall platform class projects, such as my Ali.

3 According to the operation process organization, applicable to business process projects, the following single payment, members open and other projects.

4 According to the participants organization: suitable for multiple interaction designers to complete the project, such as the project build.

Figure 5: Output Document structure Organization mode

　　2. Meta-thinking

When the project takes over, the design plan starts between, the designer to this project original demand analysis, the target user request understanding and so on thought divergence process we call the design meta thought. Can also be summed up as a design plan must be understood before the three questions:

1 Why do you want to do this? Target

2 What is the user base for this requirement? User

3 What scenario will be used to this function? Scene

This part is in fact always in the designer's mind, but some students feel no need to show or not to express. The 1688UED team summed up the thinking process and law of post work, and abstracted and structured it, supplemented by relevant methods and principles, formed a set of think-flow methodology of "Five guides home". (Figure 6)

Figure 6: Five guide home steps schematic description

The derivation process of the supporting five-guide home is a lot of design analysis and data combing. We will use the competition analysis, eye Movement test, questionnaire research data analysis methods, so that we in the design process more in-depth exploration of the user's pain point and demand, so that we can better solve the problem for users in the process, clearly designed in which the key to exerting force. We put this part of our thinking process into our interactive output document, and let our thinking process turn from a mysterious black box into a rational, transparent white box, helping others to trust our designs and push them to conclusions and establish good partnerships.

　　3. Information Architecture Planning diagram

In the design of most E-commerce site home, industry channels or site building types of projects, often used information architecture planning diagram Design Thinking expression method, that is, graphically describe the product clear information structure. (Figure 7) Every reorganization of the information architecture is a good opportunity for an interaction designer to exercise. The more complex the information architecture, the higher the requirement of the interaction designer's business understanding, target user scenario setting, and the global view of the product.

Figure 7: Information architecture legend

With a deep understanding of the global information architecture of the project, we will, based on the priority level of the information, the user's critical path, business logic information to design our page information of the architecture diagram (Figure 8) contains the following 2 key points: 1 interface of the main body layout and framework, such as search box position, main navigation frame, product pit position, Page Block division, and so on. 2 User Vision Flow planning. For example, a channel page, the key message of the page to convey, the user's understanding of the process of information.

Figure 8:1688 first page design information architecture plan legend

The description of the information architecture diagram allows you to control the overall product rhythm before focusing on detail and local design, and to analyze the global information and the accuracy of the user's delivery. It is like a soldier at war, the general front of the military strategy map, not only to help designers use more sensitive eyes to observe user scenarios and business scenarios, so as to make more accurate design strategy and layout plan, but also to move up and down the team members to make rapid decision-making and coordination.

　　4. Task Flow chart and page flowchart

A flowchart is a graphical representation of the steps and processes that have a particular logical relationship so that others can quickly understand them. Task flowcharts and page flowcharts are the form of two different uses of the presentation process and the steps.

Task Flowchart: A flowchart that often completes all tasks in a project from start to finish in a user role. This includes the expression of processes and relationships between user roles, user and product interfaces, front-end and back-end data in the task flow. The task flow chart will make your mind clearer, allowing you to detail in the design process. (Figure 9)

Figure 9: Example of a search task flowchart

Page Flowchart:

The project or product involved in the page, as well as the page upstream and downstream of the relationship between the jump and organization expression methods. Through the outline of the project page flowchart, can more clearly express the user in the product use function in the process of interoperability between the page, so that the designer for the product overall fluency and uniformity have better control. (Figure 10)

Figure 10: Page Flowchart Example

You can choose the task flow chart and the use of the page flowchart according to the different requirements of the type of project you are responsible for. Sometimes a clear flow chart can help your team members quickly understand the project, as well as help you find the user pain points and some details of the innovation in the design process.