Improvement #2 — Constraint creation

Currently, there are three ways to create constraints in the Layout Editor:

Dragging from the anchor of a component to the anchor of a target component Dragging from the anchor of a component to the center of a target component(s) Using the “+” buttons of the constraints widget on the property panel

Through usability studies, we identified several pain points in these workflows and made some improvements to them.

For interaction option #1, previously when dragging, we used the flashing green dots as an indication of whether or not you can constrain to that anchor. We decided to remove the green dots since they created visual clutter. We have gotten feedback that because the dots were flashing, it was difficult to tell, for instance, filled (constrained) and non-filled (non-constrained) anchors. Thus, we instead adopted a system that relied on user intent. Instead of flashing green dots, when dragging, we simply hide anchors that you can not constraint to, and when you drag to target components, we also give them a blue overlap if they contain constrainable anchors:

Displaying Possible Target Constraint Anchors (Old)

Displaying Possible Target Constraint Anchors (New)

In fact, the blue overlay is especially useful when there are overlapping anchors; it helps identify the target component you are trying to constrain to:

Constraining to overlapping anchors (Old)

Constraining to overlapping anchors (New)

For interaction option #2, we added ghost anchors when hovering over the options in the context menu to give a visual sense of which target component anchors the options are referring to:

Drag to component center to create constraints (Old)

Drag to component center to create constraints (New)

It is especially useful when they are overlapping components:

Drag to multiple components center to create constraints (Old)

Drag to multiple components center to create constraints (New)

Lastly for interaction option #3, we heard from app developers that they don’t use the constraint widget due to lack of trust, since there is little visual/system feedback of what happens after they interact with the widget. To address this, we want the newly added constraint section (Improvement #1) also to be a way to increase learnability of using the widget to create constraints. We see it as a way to provide immediate feedback of which constraint was added after you interact with the widget:

Using the constraint widget to create constraints (New)

Improvement #3 — Constraints deletion

Previously, to delete a constraint in the Layout Editor, you clicked on the anchor of that constraint, and it would be removed.

Click anchor to delete constraints (Old)

While such constraint deletion is quick and easy, what we learned from developers is that they found it to be error prone. In a complex layout where you may have smaller components, many developers accidentally delete constraints when they are trying to select components, especially if the screen is zoomed out.

Hence, with the new ability to select constraints, we have also updated and improved the way you can delete constraints:

Select the constraint(s), then use the Delete key Alternatively, we added a keyboard modifier for the old delete model: hold Ctrl/Cmd and hover over the anchor, and the constraints will turn red to indicate it will be deleted on click

Select constraints and use delete key (New)

Hold “Ctrl/Cmd” and click on anchor to delete (New)

Improvement #4 — Visual refresh

In the spirit of Project Marble, we also gave the Layout Editor a visual refresh to have a more consistent color palette:

Design mode components style and colors (New)

Design surface visual refresh

We especially focused on cleaning up Blueprint mode, since we heard from developers that they found this outlined-only view to be very useful when it comes to making layout edits without the distraction of UI content.We updated the color saturation to be more cohesive, got rid of high contrast white lines, and added text support for components that were empty before.