User Study Case 1: Map + Bubble

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.

Design suggestions

On smaller screens, scroll horizontally.

Suggestion #1

Size: 380px × 400px
Transformations made
  • Resize with the user-specifed size.
  • Rescale the size channel(s) to adjust density.

Suggestion #2

Size: 380px × 400px
Transformations made
  • Resize with the user-specifed size.
  • Add zoom to the map for enhanced discoverability. (This is not included)
  • Rescale the size channel(s) to adjust density.

Suggestion #3

Size: 380px × 400px
Transformations made
  • Convert to a bar chart to minimize overplotting.
  • Resize with the user-specifed size.
  • Rescale the size channel(s) to adjust density.
  • Reposition mark labels due to the changed chart type.
  • Add axis labels due to the changed chart type.

Suggestion #4

Size: 380px × 400px
Transformations made
  • Aggregate into a higher level for density.
  • Resize with the user-specifed size.
  • Rescale the size channel(s) to adjust density.

Suggestion #5

Size: 380px × 800px
Transformations made
  • Convert to multiples to minimize overplotting while keeping the mark type.
  • Resize with the user-specifed size.
  • Rescale the size channel(s) to adjust density.
  • Reposition a legend(s) due to the layout change.
  • Externalize an annotation as a title to avoid overlaps.

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.

Design suggestions

On smaller screens, scroll horizontally

Suggestion 1

Size: 800px × 500px
Transformations made
  • Resize with the user-specifed size.

Suggestion 2

Size: 800px × 500px
Transformations made
  • Aggregate into a higher level for density.
  • Resize with the user-specifed size.

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.

Design suggestions

On smaller screens, scroll horizontally

Suggestion 1

Size: 200px × 200px
Transformations 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.

Suggestion 2

Size: 200px × 200px
Transformations made
  • Aggregate into a higher level for density.
  • 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.

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.

Design suggestions

On smaller screens, scroll horizontally

Suggestion 1

Size: 800px × 500px
Transformations made
  • Resize with the user-specifed size.

Suggestion 2

Size: 800px × 500px
Transformations made
  • Aggregate into a higher level for density.
  • Resize with the user-specifed size.