How should a square behave?

Nathan Tablang

When I was trying to work out how to show interaction design in my portfolio, I asked a question: could I demonstrate it just by moving a square?

The goal was to make it feel heavy using movement alone. You’ll choose how it behaves, try it, then test your rule with a different gesture. Does it still feel heavy?

A short tug

Imagine if you grabbed a heavy square, gave it a quick tug to the right, and let go. It trails behind your hand as you pull. What should happen when you release it?

What would you have it do?Stop when I let go.Keep moving for a little while.

Choose a behavior to put it into the square.

The next gesture

There’s another way to test that idea of weight. Suppose you’ve been pulling right for a while. The square is moving quite quickly. Without releasing it, you move your hand back to the left.

The square is still going right. Your hand is now somewhere to its left. How should they get back together?

What happens when you reverse direction?Bring the square straight back to my hand.Let it slow down before it follows me back.

Choose a rule, then try reversing the gesture.

From a square to a task

At this point in the conversation, I asked how any of this applied to actual work—to buttons and things people use.

The first example was a publish button that took a while to finish. But I’d just been told about acknowledging a click and showing a loading state. I could repeat that advice without having to work anything out.

A task on a Kanban board was a better problem. Imagine the square is a task card, and A and B are the board’s “To do” and “In progress” columns. Dragging it between them changes the task’s status.

When should its status change?As soon as most of the square crosses into B.When I release it in B.

Your choice changes when the example records a move.

What did it feel like?

There’s a limit to what I can settle by explaining my decisions. I can call a square heavy and tell you why it should feel that way. You might try it and say it feels broken.

That’s why I’d want someone else to try these rules without hearing my explanation first. I’d ask them to describe the square, or to move the task and change their mind halfway through. I’d watch for the moment they expected one thing and got another.

If you changed one of your choices while reading, it’s worth returning to the gesture that changed your mind. Was the original rule unclear? Did it contradict an earlier behavior? Or did a different situation make you want a different kind of control?

Those are the decisions I was trying to make visible in my portfolio. The square lets you try those decisions yourself, including the ones you would make differently.