On the experience accumulation of interactive design

In the work of the interaction designer, the basic tools, common sense, process ..., which can be easily learned, the final output, can also find a mature model, and only the middle of experience, only from the accumulation, there is no crash method.

This sharing is a little example of some of the experiences you've gained in your growth and communication, coupled with a bit of interaction, hoping to provide some help to friends who are interested in interactive design.
Outline：

1. Getting Started

1.1. Tools

1.2. Principles/Common sense

2. Competent

2.1. Experience

2.2. The starting point of experience accumulation--imitating and thinking

3. Advanced

3.1. A certain degree of violation of logic

3.2. Expand Related Skills

1.1. Tools:-Everything can be used to draw wireframe, Express interactive http://www.aliyun.com/zixun/aggregation/11450.html "> Design blueprint Tools, even with very non-mainstream ppt, or directly with the front-end language to write, with the most, the most suitable for course is axure, the specific use of the tutorial does not speak, you can refer to:

Application of Axure in prototype design

[2010w13] Morning reading: Axure

In the use of axure, individuals think it is important to get started on two points:

Grid-The layout of the grid system, and properly aligned, you can facilitate the next UI colleagues to design, you need to note:

(a) The conceptual design phase of the programme has not yet been defined, do not pursue alignment and aesthetics, able to smooth the interaction design, more than anything else, if the software interface to automatically want to align, and time is not sufficient, rather than the first draft on paper, also do not want to align and affect the design ideas; After the experience matures, of course, it says, Can be in the guarantee of clear interaction on the basis of the interface between the beautiful (interactive draft and visual version of the spacing between the ratio, it is likely very different, the worst case may be due to the spacing problem, resulting in the need to overturn interactive manuscript);

B to draw a wireframe, you can draw a lot of neat and beautiful, but the specific design must be done by a more professional UI colleagues.

Grayscale--In the same interface, with different depths of gray, representing the weights and correlations of different regions

1.2. Principles/Common sense

This is not the start of the tutorial, the basics of some tutorials, such as "Web Usability Design" Don t make me feel, can learn some of the most basic knowledge.

2.1. Experience

I think that, like any subject or skill, there are also objects of work (processes, controls, control groups) and goals (requirements) in the interaction design, as well as the experience of interactive design for the content that is contained in these two aspects, which are subtly differentiated and controlled respectively.

To achieve the same goal, such as the most basic, we need a portal, click on it, trigger new content or function.
There are many ways: buttons, the length of different text chain, drop-down menu, tab, Radio Group ...
It also contains different colors, underline styles ...
They correspond to different use scenarios, and the effects are subtly differentiated.

In the face of target needs, it can be abstracted, when the content does not affect the form (or most of the time, we try to achieve the same effect: in the face of different content, we use this form can be compatible), you can put aside the specific content of the requirements, but to consider it to achieve what kind of interactive form.

such as an example:

Original requirements: To have two head graph carousel, one is Activity bulletin, one is product recommendation, but I worry about two will move, become very strange ... But all want to put ...
Abstract requirements: There are two modules, the contents of the module is the plural entrance, picture mode, to avoid mutual interference;
Analysis：
1. The contents of two automatic rotations appear in the first screen area, which will obviously interfere with each other.
2. The purpose of automatic carousel is to obtain more display;
2.1. The practice of not automatically carousel and still be able to show some of the information

So this is the effect on the line, the lower right is a relatively rare extension of the entrance design, not the current state of the picture, the title can be displayed.

Interactive draft:

If the experience of the interaction designer, only in the specific task of accumulating concrete experience, this process is undoubtedly too long and less effort, master the general Law of Abstract unity, and grasp the nuances, this way, can make the accumulation of experience and design work more effective.

2.2. The starting point of experience accumulation--imitating and thinking

One way to quickly store this kind of experience is to do it yourself, copying ready-made sites into interactive drafts.

It may not be easy to understand the interactive draft of the finished product directly, but when you do it, you can think about it:
Why the modules are placed like this,
Why use such a process,
Why is this hierarchy,
Crumbs vs navigation Bar,
Strong button vs Weak button vs function chain
......
Incidentally learned how to play axure

If you feel that there is a mistake ... Don't doubt yourself, it may be that he is wrong;

A previous example of usability testing is a bit like this:

There was a need to assess the usability and usability of some of the new features in this product plan, and to test the fluency of the task, mimicking a large number of existing features, even using axure to simulate uploading images from the hard disk.

In this task, the more impressive harvest is that, with the axure frame tool, you can simulate the "back to the top" or the bottom of the navigation bar with the browser position is relatively fixed module.

3.1. Trade-offs of multiple programmes

For the same purpose, there are many different scenarios, each of which may be stronger in this respect and weaker in the other; in practice, their effects are usually not very distinct.
This is another experience of interactive design: How to design imperfect works.

But also easy to use and smooth, but also shielding interference items, but also convenient for users to switch at any time, but also enrich and concise ... This kind of design is impossible, and for the purpose of product and operation, the demand that we usually face is precisely this complex requirement for the user's seemingly illogical but practical operating process, and is often accompanied by a short duration called fast iteration.

At this time, the details of the different plans to distinguish between what the pros and cons, skilled in the heart, can facilitate us to quickly decide one or another program, rather than into a long tangle. (PM must tangle is another matter ...)

Like this ticket query example, the use of different methods, the effect is also a tendency (or, because of the need to focus on different directions, and the use of different designs):

Most of the entrance to the ticket query, is the case, one-way/round-trip use of two radio, put on the front, select one-way to disable the round-trip, or hide the return time input box.
The logic is this: the user first decide whether they are one-way or round-trip, and then choose the landing site and time ... This is clearly the product logic, in fact, most users are not a return, but must come back. The user can turn from buying one way to wanting to buy a round-trip at any time, and then return the attention to the top of the page, and the distance becomes a burden.
Can not help but return, but also worried that the user was this box interference, affecting the task to go down.

So Taobao version is like this, the return time is not disabled, but the visual relative weakening; The return time input box when the focus is reached, the top radio automatically switches to and fro.
At the same time, to return to one-way state ... You can still only manually switch through radio.

The function of this control group, abstractly speaking, is the entrance of the second choice, corresponding to different content display: Two radio/drop-down list/tab, can play the role of two. The Drop-down list has too many mouse actions for more options, and the tab has a parallel and no intersection, so it doesn't apply.

A special two choice is whether or not you need to return, so you can use the check box:

At this point, the user is the lowest cost of switching between round-trip or not.

This is not to say that the use of radio is incorrect, but only in the case of products, the use of check boxes is better, if you consider the case of expansion:

Or you should use radio.

3.2. Expand Related Skills

Vision: Grid, with color, spacing ...

Front End: Code logic, achievable

Product: Function Design

Research: Usability Testing

BI: Data Mining ...

Also do not start to say, these content, interactive design work will have considerable help, but also do not need to master, basic understanding can.

Personal experience and understanding verbose finish ... Welcome to the joint discussion.

Source: http://uedc.163.com/8472.html