PAUL BERG
Paul Berg
◇
Product Designer
In mobile development, constraints are used to set the size and position of views on an app screen and define how they adapt to different screen sizes. This is similar in concept to making a responsive website. We launched the first version of Dropsource with a basic layout editor so users could create custom layouts for their app using constraints.
The original layout inspector was launched with the minimum constraint options required to layout a screen: width, height, top, and left constraints. This was enough for users to create basic layouts but was limiting. For example, it wasn’t possible to pin a view to the bottom right of the screen. As more users started reaching these limitations, this topic kept resurfacing on our support forum.
At face value, the answer seems simple, just add more constraint options. However, doing so introduced an additional problem. Constraints have rules that if not followed can put them in an invalid state, causing app screens to render incorrectly. To support more constraint options we also had to address the problem of invalid states and come up with a graceful way for users to deal with them.
To kick things off I created a problem brief to align the team's understanding of the problem and prepare them for a brainstorming session.
I focused the session on what I saw as our biggest risk, how to handle invalid states. At the end of the session we concluded that forcing users to get into and then resolve invalid states would create a lot of unnecessary work and introduce too much complexity. To avoid this, we set out to design a way to enforce a valid state as users were building their layouts.
I began ideating on interactions that both enforced a valid state for constraints while also maintaining the flexibility users needed to design their layouts. I shared these concepts with the team for feedback and an initial feasibility assessment. After some back and forth, the team and I landed on two possible directions, both with pros and cons.
Concept one: Prevent users from entering an invalid state in the first place by turning off constraints as users turned on conflicting constraints.
Concept two: Display an error message prompting users to fix invalid states before proceeding. If they navigate away from the layout inspector before fixing the invalid state, their changes would not be saved and their layout would be reverted to the last valid state.
I took these concepts to one of our front-end engineers and asked him to help me create a prototype. While he was working on the prototype I scheduled 5 moderated user test for the following week. These tests ended up invalidating both concepts, proving both interactions confused users by forcing changes they did not initiate and failed to explain why those changes occurred.
After reflecting on these results, we came up with the concept of making users pick from valid constraint combinations rather than giving them the ability to turn on/off all 6 constraints individually. After running another round of moderated user tests the results validated the new concept, allowing users to build their layouts while preventing invalid states.
The team was happy with the results so we prepared the designs for development. We hit a few hick-ups but were able to work through them and launch a successful feature for our users.
After releasing this feature we watched our support forum to see how users responded to the new design and if they ran into any issues. Within short order, we started receiving thanks from our users for the redesign, useful feedback on how to improve the design, as well as a few bug reports (which we fixed right away).
"This is a really useful update. Previously it was very hard to center elements horizontally and vertically within another view but this new constraint system makes it easy to achieve that now."
Sandy H, Computer Science PHD
"I've been waiting for this, thank you!"
JJ O, Unknown
"Thanks Dropsource team. This is a step in the right direction."
Tim N, Web Developer
In addition to written feedback, we also started seeing our users create more sophisticated layouts, which I took as the true sign of success.
