Site User experience: An interactive design plan for overall to detail

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

In early 2012, I was responsible for the company "depth matching" products for a comprehensive user experience planning, the overall design of the product to provide a user perspective of the basis. The process received some good feedback from the PD students and the business team. Here to share with you the design derivation process.

New designers in the interactive design, it is easy to directly into the specific interface layer of the design thinking, and the whole process of early derivation is very easy to ignore, in this case will focus on the early derivation of the part.

Methodology based on refinement

Let me first release a design process in the design of the complete flow of thought, the case of the entire design planning process is also based on the stage of the process to expand, the scope of this article is mainly to define the concept of this part of the page.

The above diagram can see that our whole transformation process involves the product from concept to element always, different stages of emphasis and purpose are not the same, and each phase of the transformation nodes are based on the actual real line association to ensure that from the beginning to the end of the need to transform the true.

In this view, the entire design process is a continuous zoom in (amplification focus) of the process, based on the user's source needs to be materialized. When verifying that our design meets our goals, we also need to constantly zoom out and look down from a more holistic perspective.

Next we start to look at the design process.

Global

OK, let's first look at the user's main behavior in foreign trade, what is the basic concept of user needs?

The following figure can be seen, buyers and sellers first to reach the order of intent, and then buyers get the goods, sellers get the payment, so that the entire process of foreign trade, our website service is also based on this model launched.

Let's zoom in.

What does "depth match" mean? We define it as the goal: to facilitate the buyer to reach the order of intent, simply to set the service. This is the first link in the foreign trade behavior of the trader.

What do we do when our user goals and product goals are clear?

Let's continue zoom in.

Based on a number of foreign trade experts to provide some basis, we are in the process of foreign trade in the user behavior to establish a corresponding product user behavior concept model, so that the user throughout the process, the main path, task objectives are very clear, interactive design follow-up launched with the basic skeleton.

Continue Zoom in.

corresponding to the image of the pure user behavior perspective, and then a little refinement, to convert him into a product user behavior flowchart, the abstract information structure. For example, the quote above is just an arrow to indicate the information flow buyer, and the actual site behavior, the quote needs the buyer to take the initiative to see. So the behavior is structured into a standard website behavior term "view". As a whole, we can observe the goals of different users, behavior, the resulting information, and the correlation and flow.

The graph above clearly describes the user behavior logic in the product, but the requirements for design are not specific.

We have to continue zoom in.

We translate these structured information into page architecture relationships based on user stories, as shown below. Note: For some reason, we have hidden part of the name in the picture.

In the diagram above, compared to the previous one, the structured behavior and information were transformed into different pages to carry the load, and the logical relationship remained unchanged, consistent with the preceding. (only because the user's management requirements increase the management part) we can observe that different users have completely different scenarios and operations pages, and the information is interrelated, the entire process can eventually reach the target closed loop.

PS: Based on this diagram, we can observe that the user's page environment should be divided into different roles to expand independently.

Continue zoom in ...

Next, we will summarize all the pages as follows. Note: For some reason, we have hidden the specific page name.

Remove those arrows contact, we look at these pages alone, is not found to be very regular, very structured? The page requirements are very clear (the workload can be evaluated ... haha), as follows

Home

Form

Action Tips

Detail Page

Inbox

List

Edit Page

On this basis, we customize the unified framework according to the form of each page, then layout the information and function based on the page load, the whole interaction design has been basically OK. Of course, there will be more detailed design in the specific pages, we can be based on our design components and design rules to complete, here will not start to repeat the

Summary

Looking back on this process, we will find that our interaction design is a derivation of a constant source zoom in based on requirements, in which each refinement process is based on the clear goal of the previous step. This approach allows us to design every step with a systematic support that does not deviate from the main goal. At the end of the design work, we zoom out the way to reverse validation, to verify that the final design is consistent with the original design objectives. (Want me to demonstrate zoom out of children's shoes, please read this article in reverse ...)

The above is based on personal design method of a rough to thin derivation process case, can be applied in the design of new products, old product optimization, design evaluation process, I hope to bring some help.

Welcome to discuss with me:

E-mail: ruihang.tianrh@alibaba-inc.com

Sina Weibo: Http://weibo.com/tianruihang Welcome attention