Annotation display on 4.0M1

annotation40M1.png

Icon Position Variations: have an icon link to the annotated content

  • can be confused just with a decoration and not with an action
    var 3 - linkicon.png
  • kind of crowded and not an action to the entity itself
    var 4 - linkicon.png
  • offers a separation of levels, but competes too much with the other actions
    var 1 - linkicon.png

Separation Variations: use a less prominent icon for linking

  • Move the annotation mark up, near the annotated content
  • The problem is that the annotation mark looks is an icon, all the other icons are actionable, so this may be confusing
    var 1 - separation.png
  • Use the same demarcation for the annotation like in the context where the annotation was created
  • Too much emphasis and contrast on the annotation and here is not it's primary location (this is just a reference)
    var 3 - separation.png
  • Good balance
  • Use border-color instead of icon to mark .normal, .updated and .altered states for an annotation
    var 2 - separation.png

Proposal - Interaction

  • Normal block state
    var 2 - separation.png
  • Hover block state
    step2.png
  • Hover link icon state
    step3.png
  • Usage example
    usecase.png