Affordance Design

A portable label printer and connected smartphone app sit on a work cart while a technician applies labels to a cable.

New Product Development

This project is part of a larger portable printer and mobile app epic.

(1 week)

Situation

A series of label printers all used labels that came on a roll of tape. When designing the labels in an editor, it was unclear if the content would print ACROSS the width of the tape or ALONG the length of the tape. Although there was an affordance in the UI (a small string of text in the corner), users were often surprised when their labels would exit the printer at an unexpected size.

A poorly designed interface of an old printer can leave the user unsure if the printed label will be small and across the label tape, or very large and along a length of the label tape.

Task

Redesign the affordance so that users will clearly understand how their content is oriented on the label tape.

Action

Rather than replacing the existing affordance, I added a new illustration of the tape itself into the editor. I designed this visual language to describe the orientation of any shape, size, or type of label supply.

Both fixed-length labels and variable-length labels are shown with the example text "The quick brown fox jumped over". Solid lines indicate the fixed edges of the label supply tape. Dashed lines indicate the cut ends of the label supply tape. Gray margins indicate the liner or otherwise unprintable areas of the label supply tape. A shaped edge indicates the continuous end of the label supply tape.

Result

Complaints about content rotation were eliminated. This new type of affordance was adopted across all platforms, including printer firmware, mobile apps, and desktop software.