User Study Case 1: Map + Bubble (Final outcome only)

It may take several seconds to load the content.

Note: a mock dataset is used for anonymization.

Desktop version

Size: 1,000 px × 1,000 px

Smartphone version

The visualization designs are not responsively scaled to preserve the absolute sizes.

User's outcome

Size: 380px × 400px
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #1
Edits made
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Rescale the size channel(s) to adjust density.
  • Reposition text annotations (mainly using direct manipulation).
  • Adjust the width of the title annotation ("As of January ...").
  • Reposition the annotation.
  • Change the background map aesthetics (stroke width).
Notes

Edits made by the recommender.
Manual edits made by the user.

Tablet version

The visualization designs are not responsively scaled to preserve the absolute sizes.

User's outcome

Size: 800px × 500px
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #1
Edits made
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Rescale the size channel(s) to adjust density.
Notes

Edits made by the recommender.
Manual edits made by the user.

Thumbnail version

The visualization designs are not responsively scaled to preserve the absolute sizes.

User's outcome

Size: 200px × 300px
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #1
Edits made
  • Resize with the user-specifed size.
  • Remove the reference(s) for a tiny view.
  • Remove the annotation(s) for a tiny view.
  • Rescale the size channel(s) to adjust density.
  • Restore the title annotation.
Notes

Edits made by the recommender.
Manual edits made by the user.

Print version

The visualization designs are not responsively scaled to preserve the absolute sizes.

User's outcome

Size: 800px × 500px
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #1
Edits made
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Rescale the size channel(s) to adjust density.
Notes

Edits made by the recommender.
Manual edits made by the user.