Unnoticed by Design

The Fundamentals of Frictionless Interaction Design

When a kitchen knife is dull, you can’t help but feel the friction of every, single cut. A knife with a sharp blade, on the other hand, is only noticed for the first few cuts. Thereafter, it is simply an extension of your hand. Your focus shifts from the tool to the task — from the knife you are cutting with to the food you are cutting.

Broadly speaking, in the world of design, successful visual design is to attract and maintain attention over time. Its appeal endures longer than its newness — and the longer it’s around, the more people seem to notice it. The opposite is true for interaction design. An interaction is most successful when it demands no more attention than is needed to get the job done. The sooner an interaction satisfies, the sooner it ought to slip out of sight, never to be noticed again.

Earlier this year, Lucidchart began work improving the core “diagramming” experience. This was needed because our users were feeling unnecessary friction — demanding excess attention and thought for the most basic tasks common to programs like Sketch, Illustrator, or Keynote — selecting, moving, resizing, rotating, and editing text.

This design work was challenging because at Lucidchart we have one more additional action that is considered a basic task — one that is unique to diagramming: connecting shapes to other shapes. Fitting five interactions on one small shape, is like cramming five linemen into a mini cooper. Adding a sixth just didn’t seem possible, but the following three fundamentals helped us arrive at satisfying solutions for the entire core experience.

Fundamental № 1 : Account for Conventions

One of the problems our users had with our tool was that they expected to find shape resize handles where we had placed our connection points. They expected all of the handles pictured below to be used for resizing — a convention learned in other products.

In diagramming, both the resize handles and connection points need to be in the same location; they both need to reference the side of a shape. Before the redesign, we had dropped the resize handle in favor of a connection point; in other words, we broke an expected convention.

Instead of pulling their shapes wider or taller, we observed users accidentally pulling out connecting lines, deleting them, then trying to resize their shape from a corner resize handle. We didn’t observe this happening just once, but over and over. From this we created a tongue twister:

A user might overlook friction felt once, but friction felt frequently is unforgivable.

Because we can’t change the laws of physics (two things occupy the same space at the same time) we found a solution that better leveraged time and better accounted for space. On hover (and not selected), a user more likely needed to connect shapes, so we only showed connection handles. Upon selection, when a user needed both handles, we offset the connection point handles from the resize handles.

Instead of dropping one of the actions in the moment they needed both, we moved connection points off the shape border, strengthening the distinction between the two controls. This also provided a distinct and learnable location for connection points, allowing users to use their instinct and expectations that they had learned in other products for resizing, thus reducing the possibility of errors.

Fundamental № 2 : Distinguish Different Actions

In our previous versions of Lucidchart, users could distinguish the “resize shape” action from the “connect shape” action by recognizing two different affordance signals. First, we used different shaped control handles for each action: a square to indicate resizing and a circle for connecting. Second, when the user hovered over one of these handles, the cursor would change: “stretching arrows” for resizing, and an “anchor dot” for connecting lines.

We thought these two signals were strong enough for users to adequately identify them from each other, but in situations where a user was trying to enter a state of flow and build a diagram quickly, some users acted on their expectation and instinct, failing to notice the cursor or the difference in handle shapes between the two controls. A stronger signal was needed to distinguish the two interactions. Surprisingly, by adding more of the right attention/affordance, we reduced the overall attention our tool was demanding from users.

We found that an effective way to increase this distinction without drawing too much attention was by using a fill color. Adding fill on hover created a change in state that was noticeable, and by choosing two contrasting colors (blue for resize controls and red for connection points) the distinction became clearer.

Fundamental № 3 — Facilitate Focus

Another improvement we made to shape interactions was by facilitating focus during shape interactions. One way we did this was by hiding the unused action handles the moment a user tried to resize or connect a shape. There was no need to show unused handles on a shape after a user had clicked on one of these handles; in fact, it’s impossible for them to interact with any of these other handles, so we hid them. As our design work progressed, we realized we could even hide the selected handle itself, completely hiding all the interactive points during a shape action.

This was possible because we hypothesized that users don’t think about click and drag as disparate interactions like we did. For them, it’s more of a blended action — clicking and dragging is one motion. After clicking on a resize or connection handle, users don’t pause long enough to “make sure” they are dragging the right one. Instead their attention instantly shifts to the shape’s form, to see if it’s changing the way they wanted it to.

During resizing, a user is trying to understand the given shape’s relationship to other shapes, which is important for positioning shapes and making a diagram look ordered and organized. By making adjustments to our guide/alignment system, we helped users focus on the results of resizing actions and better understand things like “these shapes are the same size,” or “these shapes are aligned,” or “these shapes are spaced evenly.”

Previously, our guides seemed to reveal every relationship to every shape at once. It was impossible for users to pick out the relationship that mattered to them. For example, when moving groups, snapping guides appeared for every group member, even though a group behaved like a single shape. We even used to show alignment guides for shapes that were off the users page.

We adjusted our guide aesthetics and algorithms, to show only relevant relationships. This helped to facilitate focus and reduce noise and friction for users. A few of these changes included only showing snapping guides for the entire group, only showing guides for shapes currently in view and only indicating even spacing between the two closest shapes.

For us, the mantra that “less is more,” held true. Less distractions from the tool being used allows for more attention to the task at hand.

In many of these areas where we’ve made changes, we haven’t received much feedback at all, but the negative feedback has evaporated. We think this means the changes we’ve made are meeting expectations and are becoming unnoticed — which is a good thing! The fine-tuning and attention to detail has helped us become more sensitive to the rest of the product experience, asking ourselves more frequently the questions :

• What do users expect they can do?
• What does it look like they can do?
• What can they actually do?

Including these questions in our Design Process has also helped us reach outside of ourselves and better meet the needs of our users. You can see all of these changes and more in our new editor Beta. We’re always looking for feedback on our design decisions, so feel free to click on the “Leave Feedback” text at the bottom of the Beta.

(This is a post from the design team at Lucid Software. We make collaborative diagramming and layout tools: Lucidchart and Lucidpress.)