LATEST AWESOMNESS

Usability Quest: Pullies

During development, we often run into usability problems. Sometimes the solutions come easily, but other times we spend a lot of time brainstorming and making mistakes in order to solve them. The more challenges our team face, the happier we are when we manage to find a solution. We are always very excited when we find an elegant solution – it’s like solving a puzzle: you try harder and harder and when you finally get it you feel high and rewarded for your efforts!

I’ll tell you a story about one of our great successes:

For weeks and weeks, we had an issue with the Direct Selection tool. When there were no handles on the nodes (or when the handles were so tiny it was impossible to work with them), it was extremely difficult to tell what the user wanted to select – the node or the handle? When the user hovered over the node, the sensitivity area of the node overlapped with the sensitivity area of the handle. How could we explain to Animatron which action the user wants: to drag and drop the node or to pull out the handle? The movement of the mouse is the same in both cases…

This problem is by no means unique to Animatron, so to begin with, we looked for inspiration in other software tools. Their solutions didn’t seem intuitive to us; we wanted to come up with something better - straightforward and visual. Next, we experimented with several ideas of own own: giving higher priority to the handles and then, conversely, the nodes. Keyboard shortcuts, magnification options, increasing the size of the handles … one by one, we dismissed each idea.

Finally, one of our developers came up with a truly easy and elegant solution to the problem: he created “pullies” in the tool. In a situation where no handles or tiny handles appear, red extensions also appear to give the user a straw tool to pull out handles or manipulate tiny handles that can be hard to select. Problem solved!

image