Interaction design - simple

2011-09-08  来源:本站原创  分类:Internet  人气:106 

Interaction design is popular in recent years of a term. There are many data on the market today to introduce what is interaction design, interactive design, how to do. From the scene, tasks, users, operations and other analysis. However, the actual situation due to the restrictions, are often not very deep. So I combined with practical work experience to share with you, the specific time is how to do the design considerations. If you want to say what is a good interaction design, personal humble opinion is simple. This following is a simple 2 word around to start.

In this article, including a simple cognitive and operation of two parts:
1 mainly refers to the human cognitive process of thinking, this article mainly describes how users make decisions;
2 operating instructions in this article and click on the user's browsing behavior.
Interaction design - simple

First is under cognition, we often can see the "big clearance before fitting, the last three days." These promotional terms, is to create scarcity with digital business, the user's attention, we say it: how to guide the user's number.

Create an atmosphere of scarcity and the urgent

To make people want to do one thing, just the opportunity to do this to make it difficult to obtain.
1 time (usually presented with a countdown, to create a user, "then do not buy, and only regret" the hint, or recommend to friends, with a "hurry to buy, soon to be over.")
(2) Quantity (limit 200, remaining 20)

Interaction design - simple

Interaction design - simple

Summary 1. The original price, price marked out, and then remove the original price. Because only one user does not know how cheap the price;
2 shows the original price, resulting in contrast, help decision-making. The price is not really that many users will not be considered.

Create social identity, to stimulate the user to follow suit <br /> social identity refers to a group of influential, simply, is that individuals in groups of herd mentality, people tend to think more about others than themselves in which case, others behavior is always reasonable and correct. I personally would like to make and the actions of others, to get the group identity, this effect is the "social identity."

Interaction design - simple

Digital remind users of non-point <br /> not immediately believe that many people have the urge to point out number. Here the number of reminder, I think the previous slightly different.

Interaction design - simple

1 play a guiding role of the basic tips;
2 where the operation will make users addicted to develop user habits, increase user stickiness;
3 for platform-level products, pulling each other to form a one-stop experience.

1 digital can not be fraud, especially e-commerce sites, for some price, time, number of digits to be true and accurate;
(2) a prominent position in these figures show, so users have an intuitive judgments and quick operation;
3 for the "micro" to remind, to design eye-catching interface, can not disturb the user.

Then let us talk about the operation is simple:

Interaction design - simple

Here I first trotted out a common scenario:

1 button up so far, the user will not see;
2 large buttons can point vivid point, want to have a click.

This is often encountered daily work to do, where we can go to extract it under?

1 invited user (comments, purchase, registration) - functional requirements;
2 larger, should be close to obvious - the design requirements.

First look at an example:

Interaction design - simple

Interaction design - simple

This is a screenshot from Digg, Digg is a social news recommendation site, the recommendation is the core of the site operator, so the button should be large, to be obvious, but can not hide the button, it seems to be nonsense. However, this need leads to a concept - real-time visibility tool, which is clear to the user operating the entrance, showing the form of various buttons, text links, icons and so on. Next, we briefly analyze whether it is simple enough under:

1 from a cognitive perspective, where the main visual part. By the color and size, brightness and pitch changes play a layered, primary and secondary prominent, easy to read.
2 from the operational level, it is actually a click, almost the most simple. So through the 3-state button (the default, suspension, click) change the animation effect (change from Digg to Dugg) and other details to improve the product experience and reputation.

Here we look at some of the mainstream of the SNS design is how to feed it?


Interaction design - simple


Interaction design - simple

Sina microblogging

Interaction design - simple

Tencent microblogging

Interaction design - simple

Which contains a picture, publishers, content, time stamp, Operator and other basic elements. There need to consider the relationship between the various elements, visually prioritizing, and thus easy to read, especially in the case of large feed, uncluttered, clean and tidy. Is not very simple, here we see a counter-example, what happens abuse button. Arrangement confusion level is not clear, concrete is not a burden.

Interaction design - simple

Now let us look at how Gmail is doing.

Interaction design - simple

Prominent markers is very important to the message classification functionality, so his default show, brightness adjusting it by not visually prominent, reducing visual clutter. Clicked with the highlight a clear focus, in short, the most important things put out by default, through processing, reducing visual clutter.

Finally, we summary, the real-time visibility tool points to note:
1 involves the user to perform critical operations, should remain always visible;
(2) reduce the visual interference, focused 3 remain visible operation to minimize Next we look the other tools - that is now hovering tool is simply hover over the trigger Operator.

Interaction design - simple

Interaction design - simple

It is obvious hover operations, by weakening the background, highlighting the changes in the focus region, to prompt the user. This interactive approach is suitable for pictures, lists and other large areas of style, and the need to provide read operations do not want to affect the results of the scene layout.

Interaction design - simple

Interaction design - simple

With the function of more complex, more and more pages carrying information, how to balance a variety of guidance, operation, feedback is the basic measure of a point interaction.

Interaction design - simple

This is a photo editing examples, we will display and edit the general separation, through the operation of the entrance into the edit page, save the feedback. With advances in technology, used to take the jump page can now solve the partially refresh.

Next we look at an example:

Interaction design - simple

Benefits: instant editing without jumps, the operation more convenient, which means there are more meta-data, resulting in better search and browsing experience.

Hover is now tool - easy to find sex

Hover that is now - need to consider easy to find, because you hide it. So for the interactive prompt the obvious need to design, here, move to the head on the relief effect, and is highlighted in blue down arrow, click the arrow after the triangular transformation. All the changes are detailed, and sometimes I think too much of it will do. And colleagues also recently discussed the work we do to do product design, there is an assumption: that the face of the mass users, their Internet experience little, do not understand where to click, what is the meaning of this function. Therefore, as designers need to do to guide the operation on the feedback to do enough to encourage users to try and explore. In short, interaction design product packaging to do is to tell a story, design scene, attract users, through the intimate guide to retain customers.

Interaction design - simple


1 users usually know there will be more information click on the image 2 in the main path to trigger the operation of the content is a good hover method

Summary 1 operation is not important, the need to highlight the content of readability, you can say after the operation hidden in the mouse hovers over 2 obvious need to ensure that when the operation does not change the page layout of the 3 editing area marked 4 mouse state to edit mode (I type)
5 space to put the right circumstances can edit the entry

  • Interaction design - simple 2011-09-08

    Interaction design is popular in recent years of a term. There are many data on the market today to introduce what is interaction design, interactive design, how to do. From the scene, tasks, users, operations and other analysis. However, the actual

  • Interaction Design Practical Guide Series 2008-05-14

    Interaction Design Practical Guide Series (0) - we see the interaction design Interaction Design Practical Guide Series (1) - Operator specific Interaction Design Practical Guide Series (2) - accessible Interaction Design Practical Guide Series (3) -

  • Mobile phones user interaction design principles 2010-09-14

    User interaction design principles, this afternoon, met to discuss the design of local reading, which discussed the menu options which should be released, I felt very difficult, a kind of feeling can not be broken, their self-confidence influence, wh

  • 5 Steps of Interaction Design 2010-12-10

    Select Network Po excerpt order 5 Steps to Interaction Design The first step task analysis Interface listed all the tasks to be completed. The second step page flow Tasks identified by the page flow, an information architecture. The third

  • UE.UI.UCD.Interaction Design.UED.UX.HCI.Usability,IA 2013-10-03

    最近,总是缠绵在UE.UI.UCD.Interaction Design.UED.UX.HCI.Usability,IA等等名词间,我一边搜集,一边整理,现在放在一次统一解释,以便比较,以正视听.很多地方未必准确,欢迎提出修改意见. Accessibility--可访问性/无障碍访问 Accessibility在此处指网页的可访问性.W3C的网页可访问性定义如下: "网页可访问性是残障人士可以无障碍的使用该网页.更具体的说,网页可用性是残障人士可以感知.理解.操纵网页,并与之互动,还能对网页做贡

  • 什么是交互设计(Interaction Design)? 2013-11-02

    By De Dream", Windy(,2004年9月 本文来自: 一个交互实例 vivi(薇薇,26岁,一位优雅迷人的OL)打开钱包,从卡夹层里拿出那张有着金黄葵花的银行卡,又了到发工资的时候,不知道今天到帐了没有,还约好了明天和死党一起Shopping呢!刚才路过银行想查一下余额,但是排队的人太多了,不过还有电话银行嘛,

  • 有关交互能力与交互设计-(Mobile Interaction Design) 推荐 2015-02-11

    11月初,收到了博文视点的一本外版翻译图书的目录<移动设备交互设计>(Mobile Interactive Design),希望给写一篇推荐.看到书名之后,有点意外,同时又充满了兴趣,没想到这样一本有关移动设备交互设计的经典图书,这么快能够在国内得以翻译出版.而且也很幸运,虽然我的工作没有全职投放在移动设备的设计之中,但是与此相关的信息总能保持联紧. 与原版图书<Mobile Interactive Design>初次接触应该源于是2006年.当时因为Flash Lite项目的缘故

  • Interaction Design Practical Guide Series (4) - simple and clear, natural to understand (change) 2010-05-13

    We live in complicated social information, especially in the Internet era, people began to access the network began more and more information, then, how to obtain / Chuandi effective and accurate information will be very important. Interactive web pa

  • Interaction Design: First design of the availability and PET [turn] 2011-02-25

    Web site home page is a vexing thing and sometimes it looks very simple : Home is the integration of web content, a product manager just to get something from the site where it , Will be able to stack a look fly home. It is precisely because , It is

  • UI interaction design on a number of issues to consider 2010-10-27

    UI design is the development of the project is to let programmers a headache thing, especially people who lack the same time developing the case of UI designers prone to many problems. Therefore, before the start of the project standardized and unifi

  • Some theoretical knowledge to learn it: human-computer interaction interface design of the three work processes 2008-11-04

    In human and machine interaction (Human Machine Interaction), there is a level, that is what we call the interface (interface). From a psychological sense to points, the interface can be divided into sensory (visual, tactile, auditory, etc.) and emot

  • Pony Ma about product design and development of internal seminars 2009-05-26

    Background: pony is chief experience officer, chief product manager. At the summit of the Products will be pony up their own experience with the normal exchange of U.S. experience smaller. The sharing of R & D Management, Design Center Materials orga

  • User Experience Design tips [z] 2008-11-28

    2009 has ended, the "user experience" has become the boss to the leadership of the civilian population and me down to the mention of mantra. What experience is what? Experience is good, but the keystone? The following are foreign Frank Spillers

  • Visio is more useful than the Web prototype design tool Axure RP Pro 5 2010-04-07

    Visio is more useful than the Web prototype design tool Axure RP Pro 5 Internet industry product manager for an important work, is the prototype design (Prototype Design). The prototype design the most basic work is combined with comments, a lot of n

  • User Experience Design? - What is not a 2010-04-12

    Transfer from: I stepped into the line from that, I need to constantly explain to people who care about me I'm doing. "What do you do it?" I am a long breath and said: "I do user experience design." I had

  • Interactive Design Internet Products 2010-04-14

    Current interaction design products in the applications of the Internet "interactive design can improve product availability." In the domestic Internet industry, building on the basis of this understanding, the interaction design has been univer

  • web2.0 graphic design style guide 2010-05-07 3D6 web2.0 graphic design style guide to common property Simple design simple design What is blocking you design? Perhaps too many useless elements? Carrying out a design, I often find myself u

  • System design principles 2010-09-12

    During system design, not only to consider the software's functional requirements, but also consider non-functional requirements such as software performance (Performance), scalability (Scalability), the system stability (Reliability), deployment (De

  • A jQuery drop down menu, the code is simple, suitable for beginners to read. 2010-10-12

    JQuery recently discovered a simple drop-down menu, the code rarely, it is suitable for beginners to learn the basis of increase. This is the jQuery code: <script type="text/javascript"> $ (Document). Ready (function () { $ ("Ul.subna

  • User Experience Design Web Forum 2011-05-27

    User experience (User Experience, referred to as the UE) is the process of using the product the user set up a purely subjective feeling. Web-based product design, UE is a relatively new concept. Dr. Donald Norman of the "user experience" is, he