Designing the interaction

Let’s go back to the resizing circle example I gave earlier. We can break down what most people would expect on how to resize the circle in the following steps:

  1. Click on the shape to display it’s control points.
  2. To resize the shape, drag any control points.

These are the basic rules from the user’s perspective. For us, that is all we want the user to know. Anything beyond that is too complicated to the user. However, on our side, we have a lot of details to think through. Lets zoom-in to point 2 together:

To resize the circle, drag any control points.

How does this work exactly?

Decision #1 — Resize in realtime or not?

Do you resize the circle while you drag or do we resize the circle after you finished dragging (Continue to show the original size of the circle before you mouse up)?

For GoAnimate, we considered 2 things: a) Since we are not a graphical design tool, we see little value of showing the original size of the object. b) resizing in real time feels more responsive. So, this is what we went for in the end.

We now have our updated rules:

  1. Click on the shape to display it’s control points.
  2. To resize the shape, drag any control points.
  3. Shape is resized in real time.

Decision #2 — Should the object be resized proportionally?

In most applications, user can hold the Shift key while they resize to retain proportion of the object. Otherwise, the object can be resized freely and can be distorted. This kind of interaction has became a convention.

Example of free resizing

If we go with that, the rule becomes:

  1. Click on the shape to display it’s control points.
  2. To resize the shape, drag any control points.
  3. Shape is resized in real time.
  4. To retain proportion, hold Shift while you drag.

Most of the time we will err on the side to follow conventions. However in our case, since GoAnimate provides a library of pre-made contents to our users (such as Characters), those contents looks pretty bad when they are distorted. There is also no strong use case to support the claim that a distorted content will be useful in helping our users to tell stories. So, we broke the convention on holding Shift to scale proportionally, instead we did the opposite: By default, all objects resizes proportionally, hold Shift to resize freely.

Here is the updated rules:

  1. Click on the shape to display it’s control points.
  2. To resize the shape, drag any control points.
  3. Shape is resized in real time.
  4. The shape resizes proportionally unless you holds Shift while you drag.

We have considered that holding Shift to distort an object may be hard to discover. However, we are okay with it because our primary goal is to help user resize proportionally. This is one of the choices we got to make in order to make the interaction customize to our primary use case.

Decision #3 — How does the drag interaction works?

Our goal here is to figure out what kind of interactions feels the most comfortable and natural to the user. Here is what I immediately came up:

Since the control point exists in the corners, drag in 45 degrees to resize.

To make it easier to drag, lets make the drag-able area be 20px, meaning as long as your cursor is within that area, we count that as a dragging action. Now we have something like this:

Needless to say, this is going to cause some serious usability problem because the limited draggable zone is going to cause a hard time to most motor functioned. Users will probably be expected to do something like this when they want to enlarge the circle:

This makes more sense. Can we do better?

Let’s try the following:

To resize the circle, drag any corner outwards enlarges it, dragging it inwards shrinks it.

All we need to do now is to define where is in and where is out. It should behave something like this:

The idea is that whenever user drags the corner, we are going to draw an invisible line perpendicular with the corner. If the cursor is then moved “outside” of this line, the shape enlarges, when it is moved “inside”, the shape shrinks.

If we add all these up, our final rules becomes:

  1. Click on the shape to display it’s control points.
  2. To resize the shape, drag any control points.
  3. An invisible line is drawn perpendicular to the control points, if the cursor is in the outer area of the line, enlarge the shape. If it is in the inner area, shrink the shape.
  4. Shape is resized in real time.
  5. The shape resizes proportionally unless you holds Shift while you drag.
Final resize interaction

As you can see, resizing a shape might just be simply “Dragging the corners” to the user, but behind the scene, there are 5 rules working closely together to make this happen. Which brings us to our next principle:

Principle # 2 — Absorb complexity

Remember 2 things, a) people didn’t come here to use your product, they came here to get something done. Learning how your tool works was not part of that goal, and b) user cannot read the rules of the you designed. The only way they can understand the rule is to take an action, see what happens through the feedback, and adjust their mental model accordingly.

In the case study I provided, you can see that although there are a lot of logic going on behind the scene, all the users needs to know to resize an object is boiled down to 2 rules:

  1. Click on the shape to display it’s control points.
  2. Drag any control points to resize.

As designers, it is our job to absorb the complexity of our product and enable users to do the things they need to do without having to think about how to do them. The more we can absorb, the more the users can focus on their goal.

Conclusion

Well this has been a long article to talk about the basics of microinteraction. Making something intuitive takes hard work, but in the end, it is the little things that separates an okay product and a great product.

If you are interested in learning more about microineraction, I strongly recommend you check out the book by Dan Saffer, the title — unsurprisingly — is Microinterations. Even if you don’t see yourself designing mircointeractions anytime soon, this books will give you a fresh view on how to approach design problems and I guarantee you will learn something from it.

Until next time, may your microinteractions be intuitive.

P.S. Feel free to leave comments, click the ❤ button below or share this article if you find it useful 🙂



Source link https://blog..io/a---to-microinteraction-9360dffcb2cb?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here