How do I write a comprehensive and readable interactive documentation?

Interactive documentation is an essential part of the output of an interactive designer, and it is related to the maximum extent to which a design can be achieved. Interactive new, most will worry how to write interactive documents, today to talk about this topic.

Interactive document, to WHO to see

An interactive document can be viewed as the "product" of an interactive designer's output, and its "users" are downstream colleagues-visual designers, test engineers, and development engineers. They will output visual design drafts, write test cases, and use code to implement product design plans based on the wireframe, interactive details, and so on in the document, and to complete the acceptance test on this basis.

　Interactive documents, what to write

When you first write an interactive document, many people have doubts about what to write. My view is that the development of colleagues in writing code to consider the interface display logic, user action related content, almost all in the interactive document, the more comprehensive the better.

If there are missing content, development may come to you for discussion, may be too lazy to spend time to communicate directly in accordance with their own understanding to achieve. Finally, the acceptance test is not working well, and you can't rely on development. So try to write the interactive document in a comprehensive way, and do not consume the value of your trust from the development colleague.

So what do you need to write in an interactive document?

1, page flow (between the interface)

The page flowchart can express the overall structure of the product and help colleagues understand the relationship between the interfaces. When composing an interactive document, you can also use tasks and subtasks as modules to detail how the interface jumps and when it jumps.

2, Content layout (inside the interface)

Loading state, loading completed content status, loading complete empty state without content, failure status (such as network exception/permission not open), different roles of users see the same content, different status of the copy icon changes

How content is loaded, when it is loaded, when it is displayed, when it is refreshed

Other...

3, interactive operation and feedback (in the interface)

According to the interaction between the user and the interface, provide the corresponding feedback, may be the content of the hint, may also be within or between the interface of the jump.

Just getting started interactive new, like to focus on the interface between the jump, and omitted the interface within the content layout and interactive operation. My trick here is to look at the overall interface as a whole, then review each element of the interface, and think about whether the elements change and how they change in different scenarios.

Take the login interface for example and see how to write Interactive details

The following figure, a simple login interface, we try to look at the whole latter part of the way, and see what the interaction of the interface means to consider.

1, the login interface of the jump process

Under what circumstances, from which interface can enter the login interface

Which interface to enter after successful login

Where to go after canceling the login

Interface transition mode, such as from the bottom up into the interface, from the top down to leave the interface

2, Account input box

field format requirements, field length, field category (Man, letter, number, cell phone number)

Whether there is a default prompt copy, if the last login to display the last account

Whether the cursor is placed in this input box, whether the keyboard is displayed, and what kind of view the keyboard uses

When to check whether the user filled out correctly, fill in the correct prompts, fill in the wrong prompts, feedback prompts when to show, when to disappear

Whether the content in the input box supports a key purge

3. Password input Box

Field formatting requirements

When to detect if the format matches

Which view of the keyboard is displayed after the cursor is placed

Whether the content in the input box supports a key purge

Whether to support password visibility, how to toggle visible state

4. Login button

Whether the button is unavailable, when it is available, and when it is unavailable

Click on the button to indicate the way you are logging in

Login success How to prompt, jump into which interface

What kinds of login failure scenarios (such as account unregistered, network anomalies, etc.), different failure of how to prompt

How many logon failures are prompted to change

5. Registration button

Click to enter which interface

What is the transition mode of the interface?

6. Close the button

Click to enter which interface

What is the transition mode of the interface?

The above is just a start, to open up ideas for everyone. Although it's just a few input boxes, the details are more complex than most interfaces. You can find a good app to study how it designs these details, and if there are any points I haven't mentioned, research through the next design to be more comprehensive.

Of course, the interactive detail description, only the presentation of the program, each small point has several design options. The best way to test the ability of an interactive designer is to weigh the options that you choose to experience better. You can compare several excellent products to see how they differ in detail design, analyze the reasons, think about whether there is a better solution, learning endless.

How to improve the browsing experience of interactive documents

The goal of the interaction designer is to enhance the product experience, and the document we output should have a good browsing experience. To achieve this goal, I am also constantly optimizing the way documents are written and formatted. Let's talk about several ways I've tried.

Mode 1: A sheet of paper represents all the wireframe, with arrows + simple text description

There are a lot of this style on the Internet, initially feel that such a figure is very stylish, thinking that this is their output of all interactive documents, so according to this pattern output. When you have done more, it will be found that most of these graphs only express the normal state of an interface, and there is no detailed interactive description to reflect the interface of the content layout and interactive operation feedback.

Mode 2: A page of an interface, each interface to build an interactive description folder, functional modules to write interactive instructions (web products)

Tools: Axure

Web products are characterized by a complex hierarchy, with each interface larger and richer in content. Usually organize the page level, and then draw the prototype of each interface, after several rounds of discussion after the interface layout and content is basically determined, and then write their own interactive instructions for each interface.

Considering the content modules and function points of each interface, I did not label the interactive instructions directly on the interface, but divided the interface into several functional modules, and created a new page for each functional module to write interactive instructions.

The following figure, respectively, is the Axure document directory (left), the interactive description of a functional module (right)

Mode 3: One page displays all interface and interactive instructions for a large function point (App product)

Tools: Axure

App compared to the content of the Web interface is much simpler, many people output the app's interactive document is a page to display a number of interfaces, up and down the full. Most designers are large screen computers, so designed to be more consistent and smooth.

But most of the development with a MacBook, no external large screen display, a screen can not see a few interfaces. Although I will follow the horizontal main flow vertical secondary or branching flow of the rules, but they are not familiar with these laws, drag and drop up and down several times it is easy to make dizzy, may not be able to find a moment just saw the interface.

The following illustration shows the right side of the interface with the corresponding interactive instructions (typically, the interaction prototype should be predominantly black and white, but because our app is in the iterative optimization phase, the visual style has been identified, and some States need to distinguish between the right and wrong colors, so there will be some color.) )

This approach has been optimized to split the large function points and organize them in the way they were designed for web products in the past. Developers still feel good about this, so there's a way to ppt/keynote the presentation later.

Mode 4: One page introduces a subtask, a maximum of 4 interfaces per page, Output PDF format (App product)

Tools: Axure painting prototype, Keynote write interactive description

Why is this the way it is? From development colleagues see the product boss Introduction requirements of the slide, think a picture with a table of the way is very clear, strongly recommend this way to write interactive documents.

I think it's really desirable to use a slideshow to print PDFs, easy to navigate. However, one page is too fragmented, the interface between the content of the different state of key is very strong, put together to introduce more intuitive.

So I thought of the interactive document that Yoyo previously shared on the official Tencent CDC blog: How to make a practical and beautiful design document. I've tried to write a document in InDesign that he recommended, but not so accustomed to the tool that it's inefficient, and after trying to write a product's interactive document, it's no longer used. But Yoyo's recommendation to split the big story into a small story to write an interactive description of the way I remember.

In this way, try this new collocation, Axure painting prototype, Keynote write interactive description.

The keynote thumbnail previews the following figure to create a directory structure of tasks/subtasks for each functional module, which describes each subtask in turn. Each page introduces up to four interfaces, and the bottom of the page is used as a fixed area to write interactive instructions.

Testing, developing colleague feedback This is good, on the one hand because the structure of each page of the document is the same size, and the experience of sliding browsing is better; On the other hand, they write code in the same way as a small module a scene goes down in turn, and it's easier to focus on the interactive description of

Although some colleagues of affirmation, but this way there is room for optimization. Because of the use of two tools, a prototype to write a document, if the Axure prototype has changed, need to replicate to keynote, both to update the obvious impact of efficiency. So I'm still thinking about switching to a tool to get the two things done, like using sketch. In addition, document templates can also improve optimization.

As mentioned earlier, interactive documentation, like interactive designer output products, not only according to the changes in the scene constantly adjust, but also listen to the views of users, continuous optimization of the upgrade experience.

Welcome attention to Sister's micro-letter public number: