Thoughts on shaping via @rjs
2 min read

Thoughts on shaping via @rjs

This past week, Ryan Singer shared some thoughts around shaping and some new concepts related to positive and negative space.

Ryan's thoughts have been resonating with me as we navigate shaping some ideas and features in our work.

Sprawling vs. Coherence

Positive vs. Negative Shape

Clarification and Summary

The idea from the first thread:

Much of shaping is about designing those containing walls

Is the same as the idea of “negative” shape. The negative shape is the containing constraints.

I move up a level and flip to the opposite space to clarify my requirements

Requirements are another idea for negative shape (but not to be confused with "specs").

An Example

In some other comments and replies, Ryan uses the idea of abstracting a delete button.

Outside of the other buttons on the page, this individual button has its own context and function: the context of needing to perform a destructive action. When the button truly stands alone, its function is not dependent on the bigger context that button is a part of. At its basic level, the button is a trigger for a function of “destructive action.”

The “forks in the road” come when decisions need to be made about what form “trigger a destructive action” should take. Should it be a button? Should it be a link? Should it be an icon? Should it be red?

When Ryan talks about “going up a level” and “going back down a level”, he’s talking about the various contexts of:

  1. the button or link or icon (the trigger)
  2. the trigger within a group of buttons
  3. the group of buttons within the page

Because a red button is just a form of “destructive action”, we need to go up a level (the group of buttons) to find our constraints on what form that destructive action should take. In this example, the trigger is next to other buttons. So, one option is to create a red button.

However, if there are already a lot of buttons on the page or a lot of red things within the page, a red button may not pass the “fitness” test. In other words, a red button won’t help the user understand the button’s intended function.

This fork in the road means we go up one more level from just button and color. We need to define more constraints based on the bigger context. By looking at the surrounding context (the negative space pushing against our “destructive action”) we can limit the options available. We still don’t have the form, but now we have a narrower group of options to choose from.

Final Thoughts

Ryan uses a variety of ideas to navigate this process. They aren't all identical or  interchangeable, but in general they fall into two categories:

Positive Shape -> Form -> What it is -> Supply Side
Negative Shape -> Function -> What it does -> Demand Side

It's clear (from Ryan and my own experience) that if you spend more time in the negative space, you will have greater clarity on which directions to move.