Designing ‘Behavior’ of elements makes them interactive in nature!!

These days we see a lot of websites with interactive elements like floating buttons, segment tabs and navigations. But I wonder how designers illustrate interactions for a particular component! How do they decide on working of elements! How do they design element’s response and its different states?

In order to crack it out I adduce a very simple logic of creating element’s interactions.

Everything is now responsive. Wait a minute! I am not talking about multi-platforms. I am talking about a particular response which an element speaks out when touched or contacted.

I call the term BEHAVIOR. I design behaviors of elements or components rather than keep on drafting just guff states and interfaces for components keeping in mind, they will move when clicked.

Designing behaviors help elements and components to be interactive. Every element changes expression according to the behavior it is designed with.

Behavior is made of two factors:

Expressions: Emotions/responses which an element has in different circumstances

Transitions: Connect different expressions, defining its behavior

I explain here what I mean.

Let’s take a simple example of a button. It has a normal expression. When user hovers, it transits into another expression displaying a dark shadow behind it, giving a sense of elevation. It gives power to the user that he can interact with the elements laid on a computer screen.

Take a look at the picture below.

Here we have four expressions which are connected by transitions. This makes a perfect behavior of the button.

Hope you like the concept ‘Behavior of components’. Please feel free to share and comment!!