Rulers - usability and aesthetic improvements

Current

01 - Original.png

  • Ruler visual aspect
    • A white background is used to represent the active page area. A grey color signalizes areas outside the page. This was not observed in software like Affinity Designer or Figma, and can be considered a good feature over competitors, helping users locate themselves and the active page.
    • The ruler increments color has almost the same tone as the rest of the other UI elements (like text and icons), causing visual hierarchy issues and drawing more attention than needed.
    • The border of the ruler has a line that separates it from the canvas. This creates a sense of visual complexity, since the ruler's background colors are enough to separate them from the canvas.
    • There's a shadow separating the ruler from the toolbars, creating another depth level in the UI, and adding up to the sense of complexity.
  • Selected object indicator (blue line with circle caps)
    • Circular shapes are not the best to indicate shape boundaries in a straight ruler, because it is hard to understand what the circle indicates. In the observed scenario, the center of the circle is actually the selected shape boundary, and this is hard to interpret.
    • The indicator floats over the ruler increments, creating visual complexity.
  • Lock button
    • The lock button utilizes the same gradient background used in other toggle buttons, creating another level of depth in the ruler, and increasing the apparent complexity of it.

Proposed

03 - Proposed idle.png

02 - Proposed.png

  • Ruler visual aspect
    • Removed shadow
    • Removed ruler border
    • Less opacity for ruler increments and numbers
      • Numbers: 50% opacity
      • Full increments: 20% opacity
      • Intermediate increments: 10% opacity
    • Full increments are now shorter, being only 2px taller than the smaller increments. Because they have numbers over them, this is enough to differentiate them from the smaller ones.
    • White background for page area was kept.
    • Grey background area was toned down (hexa color used in example is #F2F2F2).
    • Added subtle vertical separator between both areas: a line that uses full ruler height and has 20% opacity.
  • Selected object indicator
    • A colored rectangle that occupies the full height of the ruler (hexa color used in the example is #0A8BFF).
    • Background color is 12% opacity
    • Bottom stroke is 100% opacity.
  • Lock button
    • Background gradient was removed. Active / Inactive states are communicated by the icon shape (locked / unlocked)