Web Design analysis: Interactive design Those things (i)

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

　　

This is an internal sharing, the new department of students want me to talk about my past engaged in the interactive design, as a face entry-level level ppt, and you have a simple chat. On Weibo, also urged to make a simple summary of the experience of interactive design. A similar article, which seems to have been written three years ago ...

What is interactive design

To talk about interaction design, you need to understand these concepts first.

　　

The web design era, probably from 2004 began to heat up, until I graduated in 2006, Full street has been a computer training institutions, I remember that at that time, the North Jade Bird Hundred Days training in my daily work must cross the intersection.

Web design time to focus on the special effects, the white is the technology behind the special effects, you do not see the Web page is so dazzling ah, here Bling bling sparkling, floating box jump. Then there are a variety of web design templates, make a lot of complex similar to the right of this typical government website.

　　

Art times:

In the era of web design, a large number of "art" emerged. Obviously people have a higher pursuit, light is bling bling dazzling animation effect has been tired, the Web page is also need to decorate and beautify. Although the website Design Forum (www.68design.net) was very hot at that time, but the title of Web Designer is still wishful thinking. Most of the time, is still the boss and customers in the mouth of the "art".

Art times attention is: visual effects. And, the original web design of the bosses who have become a senior visual connoisseur. Art times "Art" very painful-simply rely on visual effects to evaluate the work is good or bad, too subjective, too casual. As a result, they usually do n versions, repeatedly modified until the art crashes or the boss crashes.

　　

History has entered a great UI age.

Probably in 2005, I worshipped the internet celebrity from the little Rokey who excelled at mice to become the icon of talent (back to 2005, I was reading this article: Inspiration from Life-Microsoft Asia Engineering Institute mobile Device Group UI designer Zhang Wei). I also learned a few things about the UI and began to obsess about the wonderful world of PS pixel level.

Ui=user Interface. User is included in the interface design considerations are important elements. But for the exquisite, texture of the pursuit of unlimited, still will make people lose, forget from the user's perspective to look at a UI works. As a result, you will often see a software interface that is very delicate, but difficult to use.

The part that the user sees is impeccable. But in practice, it's not a good feeling to use. The feeling part can be explained from several angles:

Do they know what this is? Do they feel confused?

Are they aware of what they can do with this thing?

Do you know how to do that?

Do they know how to start when they are interested in trying?

When they start, do you know how to proceed next?

Can you quickly figure out how to exit when you don't want to use it?

When they quit, next time to use, do you need to learn how to operate?

Do they feel pleasure or boredom at every step?

Of course, we advocate the efficiency of software operation, but if users feel pleasure, may not feel the efficiency is too low, in fact, efficiency is a relative statement. Ultimately, this is the user experience.

　　

Ued era--the user experience wins

We are not short of technology, we do not lack of a shocking vision, which, although the past is our diligent pursuit of things, now is not surprising. But we lack the user to use, we lack the user to continue to pay attention, we lack the user experience. The user experience has been having an impact in the past, but not enough attention.

2007, began to pay attention to www.ucdchina.com. Ued is a set of methodology, UCD is the guiding ideology--user-centered design. No longer the bcd-boss-centered design. The boss has the final say, unless the boss can represent the target client. This is a bit like the course of marketing development, from production-led to market-oriented.

　　

Here are the pictures I used in the user experience design?—— what is not. After the WEB2.0, the user's participation degree is more and more high, the user from the passive recipient becomes the editor-in-chief, the editor-in-chief, the photographer, the writer ... They are the protagonist, the use of the problems encountered, of course, can not rely on the site of customer service calls or help tutorials to fix, they need self-help, so, reduce the use of the threshold, eliminate the use of barriers to attract them to re-use, is the direction of each site.

　　

The following is a map of the user experience design answer dialogue (half-baked and pure layman). Broadly speaking, any department of a Web site is serving the user experience, starting with the layout of the strategic layer, and the user experience has begun. And the narrow sense of user experience design, that is, the ued department to do, most of it is around the structure, framework and surface layer.

　　

The organizational structure of the UED department is basically as follows, to solve the user's usability (interaction, copywriting), and to use (visual, interactive) problems. and user research is to help us to see user characteristics, insight and mining user needs, the front-end is a great implementation.

The importance of copywriting to the user experience is often overlooked, so copywriting is a scarce resource in the UED team. As far as I know, only Alipay's ued team has this configuration, and most of the other teams are headed by the product manager. #p # subtitle #e#

　　

So what is interaction design?

We are not short of technology, we do not lack of a shocking vision, which, although the past is our diligent pursuit of things, now is not surprising. But we lack the user to use, we lack the user to continue to pay attention, we lack the user experience. The user experience has been having an impact in the past, but not enough attention.

I suddenly hit you, you will certainly have a certain reaction. First of all, your performance will be surprised or angry, and your surprise or anger will be affected by the severity and manner of my attack.

I have a certain expectation of your reaction, and when you do, there is no expectation that you will suddenly laugh-this is the interaction between people.

People and things are the same, I press the key to open the TV, I expect the TV will open, and the TV as expected to happen. If I press the key of the TV, suddenly the TV is mute, this is not expected interaction behavior.

　　

Two. Why do I need interactive design?

　　

People and things are the same, I press the key to open the TV, I expect the TV will open, and the TV as expected to happen. If I press the key of the TV, suddenly the TV is mute, this is not expected interaction behavior.

People can be trained to change their feedback on behavior, for example, mothers teach babies to other people's gift return to "thank you" and smile, do not follow strange uncle to go. If you send a child a gift, but he is cursed, you will think this boy is so uneducated.

Machines and systems have no vitality, and they need to be given feedback mechanisms for various behaviors. The user's expectations are given to it, giving it a reasonable feedback behavior.

Unfortunately, in our lives, there are so many products that are not cultured.

　　

Unfortunately, in our lives, there are so many products that are not cultured.

On the left side of the picture is a cup. I let the classmate of the scene guess this cup cost price, the answer concentrates at 10 yuan. But unfortunately, I spent 600 yuan on the cup. The reason is in bad interaction.

The handle of the cup is only two fingers stuffed, when poured into the hot tea, I took this cup, the upper hand is smooth and incomparable glass, while the fingers were hot cup wall, the result of the Cup tilt, the hot tea into the notebook computer keyboard-Repair keyboard cost 580 yuan.

In view of this, the designer of the design of the cup can consider to make the handle glass, increase the selling point.

　　

In view of this, the designer of the design of the cup can consider to make the handle glass, increase the selling point.

The picture above is the door inside the company. Basically go to a bathroom to pass through from this door, so basically each employee goes in and out of this door every day less than 6 times.

The students at the scene claimed to be nervous every time-why? You can not see the opposite there is no one, afraid to push the door hit others. I was worried about being hit. So, the way this door, the pupil will not because of tension amplification it? Also, this door push can also be pulled, the above "pull" the word is in fact a fake.

Every day repeated fan, seat close to this door students feel hot in summer, winter feel cold. Serious not low-carbon environmental protection.

The reason is also bad interaction design.

To improve this door, you can set transparent windows. Alternatively, open sliding doors are used instead.

　　

Above is an elevator incident. You know, the elevator is a place that is most fastidious about the unification. You should often use different elevators in different buildings. If a elevator with this button, B elevator with that button, basically you have to adapt. However, this adjustment is not sustainable, because you go to the C elevator, you still have to study again. Therefore, the elevator key design, basically have industry standards.

However, Huaxing Road entrepreneurial building is maverick. Most elevators will open and close the keys to the top of the number key. and entrepreneurial building is to put the alarm button here, door closed to the bottom of the number keys.

I went to Alibaba in 2008 (at that time the company was in the startup building) and I found my colleagues here very unfriendly. Several times late one step, the elevator door will close, I stride forward, while running side shout wait. Inside the person with a smile, by the door of the mm hand a button, the elevator door mercilessly closed.

The people here are so unfriendly-I have always been so evil in my arms. Until one time I was on the elevator, the elevator door is about to close, there are several late colleagues gallop over, I apart, directly to press the door key-Ding, incredibly sounded the bell, a voice asked: What? I looked intently, originally thought is the door key place, is an alarm button! That's it!

Above the bottom right I wrote a history, history. It's a joke. If someone secretly love a long time to TA gallop over, I hope the elevator wait a moment, the result of this bad design, let this secret love people have tangled, Miss good marriage. The combination of two people could have produced a genius that could change history, and the result was missed.

Last November I went to the venture building and found the story of the elevator continue-after all, the cost of replacing the elevator is too high! And in the alarm button under the security guard posted a eye-catching instant stickers, which wrote a few characters: this is the alarm! Haha, it seems that security is unbearable "false alarm." But useless, this hint does not effectively prevent the error occurs-the user first is by virtue of habit, followed by cognitive and learning. #p # subtitle #e#

The reason is bad interaction design.

　　

The picture above is the door and the switch of the hotel which went to Qiandaohu outting this year. The opening of the hotel door seems to be teaching us to do the body coordination exercise, need two hands and follow the instructions to open. The safety of the door is to prevent people from breaking into the house, not to prevent people in the room out. I don't know what the effect of this excessive design is. In a word, the mother no longer dares to leave the child in the room oneself does not carry the room card to go out. Because a child under 8 years old, basically does not open this door.

The lower right corner is a twisted light in most hotels. You don't know what state is open and what state is off. Of course, because of the hotel system, the lighting is controlled by a number of key buttons, can not be resolved with a unified interactive. But this is a system problem, not a user issue.

There are more of the uneducated on the web.

One day I saw an e-mail. I glance, I will see a few keywords: free, you can get, 10 yuan, immediately receive.

(I, like most users, will not read verbatim what to introduce, basically are in the grasp of keywords, to improve efficiency, please streamline the Web copy, emphasis on copywriting).

　　

However, when I click to pick up immediately, give me a blocking page directly: I am not qualified. (The importance of copywriting!)

I do not know is not the result of landing, then the design should consider a variety of risks to give a comprehensive solution.

From the data, you may see the conversion rate of activity is very low, perhaps the activity side will think that the crowd is wrong, the page is not attractive enough, or 10 yuan strength is not enough, and so on. But if you seriously look for a problem, you may find that bad interaction has a serious impact.

　　

Of course, I still do not understand, such as Uigarden such a profit model of the single need for users to register why the Web site in the registration page and users.

You are not linked to the Gmail server is your fault, do not say that the user's email is invalid, okay?

　　

Again, I don't know what the actual data is, but Macaulay has a lot of quality problems and not a service problem.

is also caused by poor interaction design.

　　

After I filled in the receipt address, the above figure is let me specify the delivery method. Macaulay gave two options, I did not hesitate to choose the Post Office Method-because EMS is too expensive. Who knows this post office is really the post office-5 days later, I received a package receipt from the front desk, let me go to the Post Office with ID card to collect the package. To know, express delivery door-to-door era, how can I go to the post office to collect parcels? Call the net, Miss Customer said, because my delivery address does not support express, so I can only choose the Post Office.

I just know what's going on. The original wheat network in order to solve the user's choice of distribution method is not available (Taobao also often exist this problem), pretending to be smart using the postcode to match the way of distribution. I filled in the ZIP code they do not support the system to express, so the next page does not give me this option.

The ZIP code is a field that users think is not important today, they will write casually without confirmation. In addition, the network to avoid this problem, it can also let customers understand what distribution methods are not available and tell the reason rather than simply hide.

So what do we need interactive design to do?

The customer understands which distribution methods are not available and tells the reason rather than simply hiding it.

1. Finding and solving these problems

Some of these interactive questions are not found at all. Some people find out they don't know how to solve it, um.

Interaction designers need to find and have a way to solve them.

2. Balance-Introducing user perspectives and methods.

Or the old Picture:

　　

3. Control cost and reduce risk

　　

Interactive system approach that allows the interaction of the output to be quickly iterative rendering, and Low-cost. No need to develop, no vision, you can abstract ideas like the prototype, convenient and Low-cost methods of work to facilitate the project team to explore a variety of possibilities.

In a round of reviews and discussions, let the decision-makers and participants focus gradually on the project phase. Final output of a final version of the prototype. #p # subtitle #e#

4. The surgery industry has specialized

Of course, product managers and visual designers may be able to do more or no interaction designers. In fact, most entrepreneurial companies do not have interactive designers. But this does not mean that the interaction design is missing, it is possible that the Product manager or visual assume this phase of work. However, product managers in the balance between business and user point, often more on the boss or KPI's point of view, and visual designers more perceptual than rational, more entangled in a variety of visual details, will unconsciously in the project before the introduction of too many visual elements, so that the project team in the discussion to deviate from the core direction.

For the most part, they specialize in different directions.

　　

Three. What is interactive design

　　

I personally think that the interaction designer's work revolves around the above four things. Getting started, it's easy to focus on the 2nd: Fast iterative rendering, so they ask directly: what tools do you use? Can you give us a training tool?

In fact, the tool is really not the point, if the idea, found that white paper and pens are the best tool. So the advanced interaction designers will understand this later and they will return to the demand source: What is this? What are we going to solve?

For example, if a demand side says: Help me design a vase. Little a designer went straight to the vase. Little B asked a few more: How big a vase? What material? When do you want it? How much is the budget? Little C asks: What do you want the vase for? Flowers or upholstery? Little a must have made a vase, but it may not be what the customer wants. The small B also made the vase, the customer also pays, has already passed. But small c is likely to surprise customers. The customer wants a vase on the surface, but in fact it is looking for a solution. He is likely to solve the problem may be feng shui problem, it is possible to beautify the family, there may be a bouquet of flowers ... If you do not understand this, you may only give him a vase, not the other more suitable for him but he can not describe, not even aware of.

In practice, I have encountered a need to do a warm-up page before a new channel is about to be released. This warm-up page is released a few days ahead of the formal page. The original idea was to introduce the new channel on this page and the exciting activities of the new channel when it was time to let the target customer know that a new channel was going online.

Ask: Is your goal to get these people to know about this or to let them know about it and return a visit after the channel is released? Demand is the latter. Then a simple introduction page can only achieve the former goal. This group of people know this matter, but in a week will forget this matter, this group of people will not be the official channel after the call to visit the people, then why do they preheat? To achieve the latter goal, we need to put a hook, such as in the warm-up period to allow users to grab points, free to send points, discount coupons, etc., and qualifying points or coupons are only valid on the day of the official release.

The data can see some demand, but the data is an interesting weapon. Weapons can visually visualize the behavior of the user, but you still don't know what kind of customer behavior is behind the data. For example, the data shows that the main users of a shopping site may be concentrated in the age of 25 to 29 years. This is a fact. Then our products may think that is to meet the needs of such customers. But it is possible that we are designing too heavily on this stage of the user base, making it more difficult for other users to use our products.

In addition, the interaction should always be balanced in addition to business and users, technology, is ROI, that is, input-output ratio.

There are several ways to solve a problem and meet a need. Some belong to the excessive design. Some belong to the nowhere-it takes a long time to solve the problem. So the interaction needs to have 42 to dial the consciousness of the daughter, in the exploration stage, not miss an inspiration, do some more exploration to find the best solution. In the later, when the Gordian knot, when the broken.

The work of interactive designers

　　

In the entire project process, the interaction has varying degrees of participation in four phases, and these phases are not strictly serial, but are iterative in parallel.

　　

1. Demand phase

Participate in discussions, understand and tap requirements. Conduct user requirements analysis (also with BI department and with research, visit users, do user research, etc., task analysis, provide site map, Web page flow, etc., assist product Manager to refine requirements from BRD (business requirements document) to PRD (product requirement documentation) .

　　

2. Prototype phase

Synchronize the PRD process, output the product prototypes needed in each phase, also known as wireframe (Wireframe). Explore various solutions to meet your needs (including task flow and single page interaction), organize reviews and seminars, and after review and discussion, output a validated version of the wireframe and the interactive documentation.

This phase, if necessary, will also be used in conjunction with research for usability testing to identify problems in advance. #p # subtitle #e#

　　

3. Vision-Front-End and development phase

Evolve into ued internal project manager, responsible for ued overall time schedule, explain requirements, answer questions, acceptance vision and front-end, development results. According to their feedback, improve the interaction design and coordinate with the product manager.

　　

4. Optimization phase

Observe core data changes, conduct usability testing and user research to optimize the next version.

　　

First come here, the next share of the common tools and methods of interaction. Continue to focus on OH ~

　　

Reprint please specify the place, pay attention to me, please click: Http://weibo.com/heidixie

Original link: http://heidixie.blog.sohu.com/186686158.html