User experience and interactive design

I was often asked: "What do you do?" ”
"Interaction designer. ”
"What does interaction design do?" ”
I was embarrassed to explain a bunch: "! @#￥% ... "
The other side is more puzzled: "That ... is not the visual design of the Web page?" ”
.........
Online search of a picture, found that not only I, many interaction designers are confused. Lack of a sense of professional existence.

One of the characteristics of

Interactive design--"virtual"

Interactive design seems to be a difficult to explain, a little "empty, hollow, Xuan" things. With the rapid development of Internet, there are few ways to learn from the interaction design. Interactive design This industry seems to rely on the experience of the predecessors, their own inspiration, understanding, the wild development of rivers and lakes. It is a martial arts in Kung Fu.

Interactive design characteristics of the second-tangle, there are wood!

JJG, in the User Experience Essentials, sets the interaction design at the fabric layer.

On the one hand, the interactive design is precisely in the abstract strategy to the concrete implementation of the transition phase of the page. From the product development process, the interaction design receives the demand from the product manager, analyzes the requirements and eventually delivers the website high-fidelity prototype. The "abstract" ideas and ideas are exactly the same as the interface language to express. Meet the business needs of the company.

On the other hand, the birth of an interactive designer is partly to improve product usability. In fact, to meet the product users-user requirements.

It's just a meal. Rely on the company, the goal is the user's "Infernal Affairs." To constantly balance the company's "business" interests (not lost jobs), and user experience benefits (professional ethics) between the contradictions. Specifically, in the interactive design thinking process, consider the user logic + the company's special needs of two parts of the content.

Can not tangle ...

What are the contents of the

interactive design?

Did anyone ask me if the interactive design was difficult?

I said, "not difficult, you think, the user's actions on the two: click, drag." ”：）

In fact, the interaction design I understand is divided into two main pieces: Information architecture and operational details. The outputs (deliverables) of the interaction design should also contain this static and dynamic two pieces.

Here's how to talk about my own interactive design methods and thinking processes from the interactive design of different stages of output:

1. Meet demand

This stage is mainly to receive the product manager and other requirements, such as FRD documents. Discuss with product manager about requirements and focus.

2. Requirements analysis--> translation into interface language

As the saying goes, think First,design next. The first thing to be done is to carefully analyze and discuss the logic, content, and purpose of the requirements, rather than immediately start the work. The focus of this phase is to comb the user logic + special needs, preferably can be summed up as a few points.

Could not help citing the Smelly fish blog A gray often pertinent case:

A requirements document. It describes the information that the page needs to host.

First step. Summary information

you have chosen to return the way to do cards, the general explanation of the way to do this card. • Next you should download the application form-the whole process of the return mail card is this ... a series of notices.

Step two. Sort

1. You have chosen to return the way of the card, the general explanation of the way to do this.

2. Next you should download the application form

3. The whole process of return mail card is this ...

4. A series of considerations.

Step three. Translate to interface language

For a single page (not the whole station, no operational logic) of the product, the requirements analysis, delivery block diagram, back vision and the development of static pages enough.

3. Structural framework

Actual products are often more complex, in the demand analysis of the product structure to comb, to express the level of the site structure. Make a similar sitemap (site maps). In addition to the company can provide the content layer comb clear, for the whole station navigation also lay the foundation.

4. Flowchart (Flow Sponsor): The process by which a user or system performs a task. The importance of the flowchart is to analyze whether the interaction logic is reasonable from the user's usage logic.

In fact, the flowchart is divided into a single user flowchart and a multi-user flowchart. It is not only a tool to improve usability, but also a good instrument for information architecture. Specific details can be seen: the use of task roles to do information architecture

Take the example of a shopping site: Users mainly include buyers, people who buy gifts, people who come in through EDM (email marketing), and return buyers.

Draw the "shopper" flowchart first

and draw a flowchart of the other characters.
Continue to draw the business process of "people who buy gifts." If the Web site adds a "buy gift" requirement, add a "My wish list" to record, display the items I want to buy, or make them public and assign them to friends.

You will find that different user roles can reuse the same page. For example: Shopping cart, search results list page, shipping address, confirmation page, and so on.

Draw a flowchart of all user roles and look at the whole

By combing different user's behavior path, can comb the complex problem better. You can not only start to focus on users to the purpose and requirements of the site, but also to avoid missing pages and key operations on the page.

the so-called avoid missing page is to see whether the whole station is missing some pages, home page, class set list, List page, Detail page, and the results page after the operation. Personally feel that the project at this stage is the most reliable estimate.

These performance pages

each page to display the key operations on the page can also be used as a reference for the next visual design.

The more related arrows, the more information the page hosts. There are also important operations (such as the red box above) that should be visually highlighted (such as button color eye-catching, high brightness, etc.). The level of each element in the page is actually different. Like what:

"Accept" to guide users more prominently. This will also lead to the special needs of some business strategies.

Also, the logic of the operation of the tight button to close.

Save the baby, either settle or close. Although there is a close button in the upper right corner, it should be placed in a visually close position due to the tight two operation.

5. Wireframe (wireframes): More like the final product presented in the hair embryo. In short, it is to throw away the color, font style, pictures and other prototype design. This stage contains detailed operational details.

Wireframe this stage, in addition to the previous phase of the flowchart required to include the elements of good, the most important to consider how to arrange the information on the page, the positive details of the operation, status description.

Some of the referential principles of the interaction experience: Before the operation, the results are predictable. Operation, the operation has feedback, can be stopped. Operation can be undone.

Description of interaction details and jump pages in deliverables

Detailed description of the details of the interaction, including focus state, change feedback conditions, and so on.

6. Checking Check

This stage is the analysis of the usability of the wireframe again. The first time, the designer can take the existing usability principle to refer to, whether there is a problem.

There are some explanations in Don t make me, plus some common troubleshooting points that I personally summarize:

This is a god horse website? (Site name, logo, appropriate description) where am I? (article or page title) main column God horse? (Navigation, classification ...) Where do I navigate? (Navigation against white, crumbs) can you go back? (Home and return or undo) need to search? (The search box satisfies the query-type user, not the needs of the browsing user) two important states are there? (First incoming novice guide, see here+ error status hint) the same function and copy of the unified, consistent expression.

Looking back, the deliverables in these phases cover the content of the interaction Design: information architecture and operational details. Of course, the specific thinking process is not so clear-cut. may take care of both, such as both detail and architecture in the flowchart.

The interaction design actually lets the machine "imitate" the person and the person communicates the dialogue. Interaction and vision ultimately need to express information clearly.

Designers should have their own set of design methods, design analysis ideas and habits. It's just a little white designer. A summary of some of the past thinking, to facilitate the future review. Not necessarily right, find suitable for their own and the environment is the focus, the above are personal views, if there are similarities, I copy you. If you feel bad, throw the bricks. Ask children to share criticism.

However, in all ways, Don ' t fall in the love and your design, ultimately, to do with the "loving, humane" products. Pekanbaru

Source: http://www.zhangyq.com/interaction-design-methods-and-processes/