Interactive design method

For a long time, I had the idea of ​​summarizing the experiences of interaction design in recent years. Returning to China to personally experience the many peers, mainly interactive designers and visual designers for interactive design puzzles, as well as other industries for interactive design misunderstandings and abuse. Later, I opened in a small area A lecture on interactive design; now it is organized into text, hoping to learn from peers and make progress together.

This article is a summary of my experience with interactive design in the United States over the years. At that time, we followed the design principle of User-Centered-Design (UCD), and each project was done according to all UCD steps. The following is a summary of the interaction design method is derived from the UCD process, that is, the same applies to any non-UCD design process.

Interactive design process

If you talk about interactive design, you think of drawing wireframes or prototypes, and you're only a fifth. Interaction design is a process, from start to finish with a systematic process. Prototype is just one of the links.

When I receive a design project, how to get started? What should be done? How to ensure the deliverables as much as possible to meet the established functionality and ease of use at the user experience level?

The first step is task analysis, listing all tasks to be done by the interface. The second step according to the task to determine the page flow, the establishment of information architecture. Next is to create a unified page layout, including partitions and so on. Then based on the page layout prototype design, can be a low-fidelity and high-fidelity prototype. Finally write a design description.

The following to design a dynamic album interface, for example, and gradually explain all aspects.

Task analysis

The first step task analysis. What I will do here is an analysis of all the tasks of this new interface that will be designed, that is, all the operations the user can do on the interface. This analysis is based on the functional requirements, the demand side generally provides a list of function points.

Task analysis is the most common task list, in addition to the task flow and task scenarios. The following list of tasks as an example.

List all the main tasks, as well as sub-tasks for each of the main tasks. Then sub-sub-tasks into various steps. Form the list below.

Main task 1

Subtask 1

step 1

Step 2

Subtask 2

step 1

Step 2

Main task 2

...

Taking dynamic photo album as an example, the task analysis list is as follows:

Browse albums

1) Browse the album list

2) Choose an album

3) Browse photos

2. Create a new album

1) Add photos

a) Select an existing album

b) Select a photo

c) the order

d) Add subtitle text

e) Select the animation effect

2) Add a template

a) Browse the template

b) Choose a template

3) Add music

a) Browse the music list

I. Listen to music

II. Select music

b) Add new music

I. Open the local file

II. Select music

4) Preview (abbreviated) ...

5) Name (omitted) ...

6) save (slightly) ...

3. modify the album (omitted) ...

The task list includes all function points and integrates the logic of each function point. If necessary, the frequency of use of the task and other factors that affect the design of an analysis, not explained here.

2. page process

After the task analysis is completed, enter the first step of the design, namely design page flow. Page flow is the beginning of the design, but also an important part. It determines the entire interface information architecture and operational logic.

Page flow is the natural transformation of the task analysis of the previous step. In general, one of the main tasks is a page, other subtasks can also be turned into pages.

Take dynamic album as an example, the page flow is as follows:

The page is almost copied from the mission analysis. So the last step is done, this step is very easy, and the more relaxed later.

Note that this flowchart should include all the new pages that will be designed, a lot of them, not many of them. It not only determines the page content, the number of pages, but also the relationship between the pages. If later in the design of a specific page prototype, found that the flow chart more or less pages, or page relationship has changed, that your kung fu is less than home (this is more difficult, I generally not demanding our designers). According to the prototype to create or modify the page flow chart, not in the design, but writing design notes.

3. page layout

The third step page layout is the beginning of the specific page design, in the previous step to know what pages need to be designed, the page is divided here, the content of the organization. The most important point is to determine the page partition.

Taking dynamic album as an example, the page layout is as follows:

The overall layout, the common layout, for all pages.

Specific page layout, in the case of conflict with the overall layout, a more detailed layout.

Page layout to give fragmented content to logic, in the form of partitions to the page area corresponding to the functional area identified to reduce the random design time. This is the design of rigor or not. Putting similar operations together is predictable to the user, and the user can determine which operation is in which area, reducing the difficulties and doubts caused by the blind search.

4. Prototype design

This step is well known, that is, the design of specific pages. This step design shows all the interface elements. There can be low-fidelity and high-fidelity prototypes. Low-fidelity is the wireframe, high fidelity and more are close to the final renderings.

The following is a low-fidelity prototype photo album.

Design instructions

The final step is to do a detailed description of all the pages, including all the elements on the page to explain, such as the default state, jump pages, font size, size and so on. I will not explain here. This is the documentation for the developer and the testers' testers.

summary

Interaction design is a process, it is not just drawing a wireframe. The two most critical aspects of interaction design are page flow and page layout, with the former establishing a clear architecture and tight logic that consolidates fragmented information and identifies distinct primary and secondary relationships. All of this is for our ultimate goal - to make our interface in line with the user's expectations, without any surprises to them. Everything in the user's expectations.

Source: http: //www.baiduux.com/blog/2010/08/03/interaction_design/