Communicate Design Tradeoffs Visually

A version of this post originally appeared in Google bathrooms worldwide as a Google Testing on the Toilet episode. You can download a printer-friendly version to display in your office.

By Tim Lyakhovetskiy


A goal of any written design or project proposal is to present and evaluate alternatives. However, documents that include multiple solutions can be difficult to read when the qualities of each solution are not clearly expressed.

A common approach to simplifying proposals is to use “pros and cons” for each alternative, but this leads to biased writing since the pros and cons may be weighed differently depending on the reader’s priorities.

In this example, can you quickly tell how this option would measure up against others?

Option 1 - Optimize Shoelace Untangling Wizard in ShoeApp UI


Pros

  • Shoelace Untangling Wizard UI will use 10% less CPU

  • Less than one quarter to implement

  • Users will see 100ms less UI lag

Cons

  • Security risk (shoelace colors exposed) until ShoeAppBackend team fixes lacing API

  • ShoeAppBackend will be blocked for 3 months

  • User documentation for Shoelace Untangling Wizard UI has to change

This format requires the reader to remember many details in order to evaluate which option they prefer. Instead, express tradeoffs using impact on qualities. There are many common quality attributes including Performance, Security, Maintainability, Usability, Testability, Scalability, and Cost.

Use colors and symbols in a table ( negative, somewhat negative, positive) to make it easy for readers to parse your ideas. The symbols are needed for accessibility, e.g. color-blindness and screen readers.

Option 1 - Optimize Shoelace Untangling Wizard in ShoeApp UI

Usability

➕ Users will see 100ms less UI lag

User documentation for Shoelace Untangling Wizard UI has to change

Security

➖ Security risk (shoelace colors exposed) until ShoeAppBackend fixes lacing API

Partner impact

➖ ShoeAppBackend will be blocked for 3 months

Performance

➕ Shoelace Untangling Wizard UI will use 10% less CPU

Schedule/Cost

➕ Less than one quarter to implement

Notice that the content uses approximately the same space but communicates more visually. The benefit is even greater when there are many alternatives/attributes, as it’s possible to evaluate the whole option at a glance.