An IA design method for ensuring a smooth task-page diagram method

On the "Design for the task" and "design for the structure", has been repeatedly elaborated before, if you have no impression, you can first look at: "Design principles vs." and "for product structure design, for the user task design."

"Design, you should pay attention to let the task smooth, but also need to make the structure clear." ”

If you agree with this point, then the question is: what should I do?

Here's a design approach, a design approach that takes into account the information architecture (IA) for process and structure. is the end of 2010, I and seven common analysis summed up. In the workshop of "The first Chinese interactive design experience day of 2010" in Guangzhou, we have introduced this method on site:

Typically, we analyze the main user tasks at the beginning of the design process and then work through the flowchart. And then what... To start drawing an information architecture diagram (IA diagram), how do I draw the IA diagram? The designer imagines painting in a vacuum, relying on experience and insight. The IA tree icon shows how the main page is organized, and then each page is carefully designed. What about the flow chart before? It doesn't seem to be working.

Flowchart is to ensure that the final product can be smooth task, if you can in the design process of IA to use the flow chart, "for the task fluent" can be guaranteed.

Here is a description of the effective integration of flowcharts into the IA design process Design Method-Page diagram method:

The first step: Draw the flowchart

Combine an example to look: This is a website product that is based on QQ Show Mall. A name: Match show. User A uploads a picture of the real person and displays it in the site. User B saw this picture, according to this with a set of QQ show image, matching. Paired with a good pair of works will also be displayed on the site.

We first draw a flowchart, first summed up such a number of user tasks: to explain the completion of the real person photos; complete the work; The flowchart for the three tasks is as follows:

Why does the flowchart not work in the IA design process?

The final product is a collection of pages, IA is the organization of these pages, the IA diagram each node is a page. Flow chart Research object is not a page, but a behavior, so, in the design of IA do not know how to use the flowchart.

Sometimes when the whole ia is finished, designers can remember to draw a flowchart that might turn out the flowchart and check the design to see if the project will make the task go smoothly. Design process is not designed for the process, after the verification to have good results, I am afraid to rely on good luck.

Do you have any swelling?

Because the flow chart research object is the behavior rather than the page, therefore, in the final based on the page product design solution is difficult to apply, then, we find a way to transform the flow chart research object into the page to become the Bai ~

Step two: Convert the flowchart to a page sketch

The conversion, as long as the rough thought of each page roughly design is good, such as: This is a list page; This is a landing page ...

These are simpler than the page prototype diagram is for the back build IA, so the exception is simple, you can even just give each page a name is enough, at this time do not have to think too much about the specific design of each page. Give these ultra simple pictures a name: A sketch of the page.

These are the main pages of the product that you want to include, organize them and make them orderly, which is

Step Three: Design information architecture

Several issues to be explained in the third step:

• Some pages are repetitive, just keep one;

• Retain the links between the page jumps, buttons, they are the task of smooth protection;

The design of IA is more focused on the logic of the content and the easy learning habits.

Through these three steps of the design method, the product structure is built up. The page diagram has a general design for each page, now complete IA, then you can go to the detailed design of each page.

Summarize

The page diagram method is a design method of information architecture. This method translates the flowchart into a jump relationship between the page and the page through a page diagram, and then organizes the pages to form an information architecture (IA).

The final product contains the page is from the first step of a process, and in the second step, the third step has been retained between the pages of the jump, which ensures that the "design for the process."

The third step is a specialized design IA, the organization of these pages is based on the task process a string of, similar to "Choose the picture" and "write description" must be in a pile of children. The design of IA will also be more basis. "Design for structure" can also do better.

Page diagram method Three steps, each step is in the design, the process how to design? How does the information architecture organize? Different designers give different results.

Design method is only to provide designers with a more way thinking, framework, and can not replace the mind of the designer.

If you try to apply this method, you may find that in some cases, this method does not seem to have any value, for example, to design a graphics tool class products, by experience can be judged clearly only a main interface, a variety of processes are centered around the main interface, the second translation of the page diagram will be relatively close, And the third step is nothing to do, and even without this method, has been able to determine a total of only one main interface.

For special products, there should be more targeted design methods, I should later be summed up some. This approach should be more generic and universal than the design methods that will be born in the future.

Article Source: Smelly fish Interactive Design reprint Please indicate the source link.