Interaction Design for programmers

 

When I saw this article, I went back to my own learning web page. At that time, I only knew programming and design. Most of the forums discuss how to use Frame to implement page partitioning, how to make rounded corners, and how to write a large javascript code or make a flash to make the page look more dizzy. Later, css1.0 and 2.0 emerged one after another. html 4.0 4.1 and today's html 5 have gradually eliminated the presentation style labels. Visual Communication ideas began to gradually enter the eyes of programmers and product managers. From the web page to the current APP, after the brutal growth stage, only products with the same functionality as visual communication can laugh at the end.

In 2007, Apple brought a fresh feel to the industry, and countless apps showed almost infinite new concepts. However, not every novel idea can be called design. Designers need to be strictly trained to turn their ideas into the final design. In the entire conversion process, countless ideas cannot be elaborated. Designers observe life more often, observe nature, and have inspiration at any time. However, a strictly trained designer can process the ordinary life details and integrate them into the design, finally, a qualified or even excellent product is created.

The author of this article is Pasquale d' Silva, an interactive designer and product designer of Elepath. In this article, he explains some qualities of excellent design from the perspective of interaction, or, how can excellent products communicate with users.

I have to say that there are too many programmers or artists (note that they are artists and real designers won't do this) mistake technology as art and beauty as design, the really important interaction part is ignored. You can see that a large number of products are almost static, and many operations are very strange. For example, if you want to add an entry to the list, it appears suddenly; if you want to delete it, it disappears directly. Have you ever considered the user's feelings, the product's feelings, and the logic of this kind of thing, too.

Of course, there are still some products that interact, but sadly, those interactions are completely used as another form of beautification, And the genius knows what those people are thinking.

The truly revolutionary significance of interaction is that it brings the magical attribute of time into static products. Through the definition of action, speed, display, and so on, product operations can reflect the sense of reality, this allows users to naturally understand the meaning of each action. However, this is not something that anyone in high school can understand.

Some simple examples

The purpose of these examples is to introduce the essence of animation to readers and tell them the significance of timeline and space for animation. The significance of animation for interaction is self-evident.

Example: Buffer Effect

The following three demos show how to control the effects of an animation by controlling the key frame in the most traditional animation.

In these three 25-frame animations, the designer only needs to define the first frame, the last frame, and the key frame (13th frames). The other 22 frames are automatically filled by the computer. However, the computer is not as intelligent as you think. It can only linearly fill blank frames. It takes a lot of time for good animators and motion designers to learn how to control computers to work according to their own effects. Interested readers can do some experiments on their own. The focus of this article is to elaborate on the concept, so they do not have to worry too much about the technical aspects.

Some more complex examples: the realism that interactive animation can create

The purpose of these examples is to tell designers about some of the old functions that can be replaced by interaction and the functions that can not be achieved previously.

Example 1 insert an element

The following are three demos about adding/deleting elements to/from the list to demonstrate the effects of different interactive animations.

Demo 1 does not perform any processing. It is both raw and rough and cannot give people any natural feeling.
In Demo 2, some key frames are added to make the added actions much smoother. Such an animation can give you some hints.
The last demo is the most natural fit. Just as we usually insert a book into the bookshelf, we need to free up space before inserting/removing it.

For example, the design of the last demo is clear, because it is similar to the action in life, and the user knows the meaning of the action without any other prompts. Such interactions were of little use on non-touch screens, but they are of great significance to apps today.

Example 2 expand/pop-up menu

There are also three demos that show different effects of different expansions.

The first is the most typical show style, but it does not have experience consistency. This action does not exist in reality, so there is no way for users to easily understand its meaning.
Then observe the second one. Does this style give you more information?
The last style highlights the key content and can be used to represent the emphasis.
Remember, do not try to put multiple styles in one product/function, which may lead to unknown users.

In Example 2, the design of the last two demos can replace the old-fashioned navigation bar. Users can easily remember their own actions to know where they are.

Of course, all examples are not made of gold and need to be used as needed. The purpose here is to make everyone understand the role of clean but logical animations in improving product experience.

If you want to learn more about the effects of animation on a specific product, you can try Thinglist. This is a product I developed for Elepath with Kyle Bragger. Is a demonstration of how the APP loads content.

Design Principles of the Action Interface

You know, I can't name very specific products here, but some products are indeed extreme. One is that the interface is extremely beautiful but there is no interaction, the other is to take Interactive Animation as decoration and completely lose the essence of interaction. So I listed the following principles to define real interactions:

I. Clean Animation
2. consistent pace and natural transition

Some people do not think that they can add time elements to the interface. Don't you know that interaction can provide more useful information to users, or do you think this is too complicated for you?

At first, this document was used to train internal staff. Later, we thought it would be more useful to discuss it publicly and I would like to exchange ideas with more colleagues. If you are interested, you can go to Twitter@Pasql. Or join us in Branch.

Some materials worth reading or reading (the original article has four links, but two of them are invalid, so only the following two links are used ):

The Animator's own Val Kit by Richard Williams

Prologue-Designing Fictional Interfaces for Iron Man 2

VIA: medium.com