Naming the Edges tool in Series

Naming is hard. It’s hard in engineering and it’s hard in product. As a solo software developer wearing both hats, that combination can be enough to get the better of you.

This post is about designing and building Series, a fast and flexible photo layout app designed for photographers. Download Series on the App Store.

There’s a joke in computer science:

There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors.

This release had all three. I won’t bore you with the details of cache invalidation and calculating offsets for rectangles. Let’s talk naming.

Edges all around us

The big new feature in this release lets users add a line around their photos, while insetting in the overall frame. It’s a common effect, and can add a nice bit of contrast and pop.

A photo with black line around it, centered in a blue box.

Simple and effective. But what to call it? I sent the first version to friend, designer, and photographer Dan Rubin.

This is how most decisions get made.

Done! That was easy. Too easy.

I’m a big fan of research. I’m not always great at it, but I believe that listening to and incorporating what users need is key to making great products. I sent the feature out to the Series Beta group, with a question:

“Does the word “edge” make sense?”

Responses were mixed. Everyone said that they “got it” but no one loved it. Those that come from a design background were especially bothered. So I asked more people, and the response was the same. Over and over I heard that Edge was fine but why not Border? Stroke? Inset? Those were the terms that they saw in other apps.

I was curious–was there a better option here? To put the elements in context there were three things I needed names for. From the inside out:

1. The black line around the photo
2. The blue area
3. The shape defined by the outer black line

In the Series UI before adding Edges:

1. Doesn’t exist!
2. Margin (the space), and Color (the fill)
3. Frame

The UI where we’ll add this new feature.

The app also has a layout style called Border. It’s getting confusing already.

Research time!

For comparison, let’s look at a few domains for inspiration and comparison: the picture framing industry, desktop apps, CSS, and mobile apps.

The picture framing industry

The world of picture framing has a massive amount of vocabulary. Surely we can borrow words from there? They might not be the most familiar but at least it’s a tried and true system right?

1. The black line is created by using two mats, one cut with a slightly larger window than the other. This is called the reveal, or a “double mat.”
2. Mat
3. Frame: the inside, not the outer dimension of the physical frame.

Oh dear. That wasn’t great.

Desktop Apps

I looked at Photoshop, Illustrator, Sketch, Figma, and Lightroom Classic’s Print Module.

1. Photoshop and Illustrator: Stroke. Sketch: Borders, Figma: Stroke. Lightroom: Stroke Border.
2. Lightroom: Margin.
3. Photoshop: Canvas. Illustrator and Sketch: Artboard. Figma: Frame. Lightroom: Page?

Clearly Stroke wins here, but the rest is hard to map.

CSS

CSS—the programming language used to layout web pages—has a nice simple layout model.

1. border on the photo element
2. background-color of an element with padding
3. Document?

Ok kind of?

Mobile Apps

Finally, let’s look at a few mobile photo apps: Darkroom, VSCO, Snapseed, Whitagram, InstaSize, and White Border. I chose these for a range of quality photo editing apps and simpler Instagram utilities.

1. Darkroom: “Inset Width” if you choose Even. Snapseed: “Frame Width” (but not really because it’s an inset frame that overlaps the photo)
2. Darkroom: “Inset Width” if you choose a ratio. VSCO: unnamed unit of the Borders tool. Whitagram: Frame Size. White Border: unnamed unit elsewhere referred to as “Border Size.” InstaSize: unnamed slider in the Format tool.
3. Darkroom: unnamed ratio, Snapseed: unnamed unit of the Crop tool. VSCO: unnamed, always square. Whitagram: Frame, always square. White Border: unnamed square or match photo ratio, InstaSize: Crop.

Darkroom also refers to the whole thing as “Inset on Frame” during export.

Survey says

Summing up, here’s what I learned:

1. Desktop/design apps use the term Stroke to mean a line around a box. CSS uses Border for basically the same thing.
2. No mobile apps really have an equivalent feature: Darkroom and Snapseed can give you a uniform line around a photo, but not while also putting it inside another box.
3. Mobile apps have confused things further: White Border and VSCO use Border for what Darkroom calls Inset. Border here has nothing to do with Border in CSS, and much more to do with a Mat in picture framing.
4. The term Frame holds up pretty well, with some precedent in all but CSS.
5. Mobile apps often punt on naming. Partly this is smart, making translation simpler, and giving users fewer things to decode and understand. Series has a more words-based UI for better or worse.
6. Sometimes the area is itself a noun (border, frame, mat), and sometimes the area is defined by space between itself and another object (inset, margin).

Making a call

If you’ve made it this far you’re probably as confused as I was. To reach a decision, I went back to what people actually said. I noticed that everyone’s first reaction was basically “edges is cool!” without commenting on the name until asked. So, with a bit more confidence we’re back where we started:

1. Border is a layout where each photo is inset in its Frame. It’s the common term for “I want space around the photo.” Margin could be better as Inset but that’s for another day.
2. Frame holds up well as both a container and a surface.
3. Edge is a new term without baggage, but one that people seem to understand quickly. I found that using Border was actually confusing since this feature is a line rather than an inset. Stroke is an option but doesn’t feel right; it references drawing more than presentation.

The new UI with Edges (right)

I’m thankful for everyone pushing back and I’m glad I did the research: it makes me more confident than ever that Edges is unique and there’s an opportunity to accentuate that difference with a name.

As a product manager, the hardest calls to make are those that lack clear data. This was one of those. Part gut, part least-bad option makes for great decision making!

Plus, I’m just not sure calling it the Stroke Tool is a great idea.

Series is fast and flexible photo layout designed for photographers and optimized for Instagram.

• Download Series on the App Store
• Series on Instagram — see what the community is making
• Series on Twitter — follow for updates