Aesthetics and Clarity

Aesthetics helps reduce the "ick" in a diagram, reducing the impedance that a user experiences when viewing a diagram. Examples of icks are:

  1. Visual clutter.
  2. A node's dimensions being significantly different compared to other nodes.
  3. Oversaturated colour.
  4. Colours that are excessively solid for a less relevant concept.

Clarity is how well a user understands the information that a diagram is presenting. Examples of adding clarity are:

  1. (Understandable) visual cues such as emojis in place of text.
  2. Reducing detail to what is most relevant.

Consider the last diagram from Interaction Merging:


source

The following things that could make the diagram more digestable:

  1. Aesthetic: Reduce the visual length of the presented URL.

    1. For a github repository, separating the username/repo into a separate group can be informative.
    2. Showing the initial and last characters of the URL, while hiding the middle using ellipses may make it more aesthetic at a glance, though it may hinder if a user wants to see the full URL.

  2. Clarity: Add an emoji indicating that 012345678901-ap-southeast-2-releases is an S3 bucket.

Compare the above with the following:


source

Notes:

  1. The URL is shortened into the path after the username/repo This requires the FileDownload item to know that the first 2 segments is a group namespace.
  2. The 🪣 bucket emoji clarified that the 012345678901-ap-southeast-2-releases node represents an S3 bucket.