User Study Case 2: Line multiples

Note: a mock dataset is used for anonymization.

Desktop version

Note: The original visualization included 30+ line mulitples.

Size: 1,000 px × 440 px

Smartphone version

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

User's outcome

Size: 380px × 730px
User satisfaction ratig: 4 (satisfied)
Suggestion taken: #3
Edits made
  • Reduce the multiples columns (5 to 3)  to adjust density.
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Increase the chart height.
  • Modify the chart scale (to avoid the overlap between the label and line mark in the first multiple).
Notes

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

Design suggestions

On smaller screens, scroll horizontally

Suggestion #1

Size: 380px × 980px
Transformations made
  • Reduce the multiples columns (5 to 2)  to adjust density.
  • Resize with the user-specifed size.
Suggestion #2
Size: 380px × 2,010px
Transformations made
  • Reduce the multiples columns (5 to 1)  to adjust density.
  • Resize with the user-specifed size.
Suggestion #3
Size: 380px × 600px
Transformations made
  • Reduce the multiples columns (5 to 3)  to adjust density.
  • Resize with the user-specifed size.
Suggestion #4
Size: 380px × 830px
Transformations made
  • Convert to a heatmap with changing the layout to adjust density.
  • Convert to a heatmap to adjust density.
  • Resize with the user-specifed size.
  • Unwrap text lines for readability.
Suggestion #5
Size: 380px × 330px
Transformations made
  • Convert to a heatmap with changing the layout to adjust density.
  • Convert to a heatmap to adjust density.
  • Resize with the user-specifed size.
  • Unwrap text lines for readability.

Tablet version

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

User's outcome

Size: 800px × 600px
User satisfaction rating: 4 (satisfied)
Suggestion taken: Not taken.
Edits made
  • Resize the chart.
  • Change the number of columns (5 to 4).
Notes

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

Design suggestions

This version was originally created as a "Phone-Landscape" version and then repurposed to a "Tablet" version, so the design suggestions were same as those above for the phone version.

Thumbnail version

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

User's outcome

Size: 210px × 270px;
User satisfaction rating: 4 (satisfied)
Suggestion taken: #2
Edits made
  • Change line multiples to overlaied lines for the decreased scroll length.
  • Resize with the user-specifed size. This includes resizing and proportionately repositioning text elements.
  • Remove labels for density.
  • Change the line mark stroke opacity (to highlight the county of interest).
Notes

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

Design suggestions

On smaller screens, scroll horizontally

Suggestion #1

Size: 200px × 2,030px
Transformations made
  • Reduce the multiples columns to adjust density.
  • Resize with the user-specifed size.
Suggestion #2
Size: 200px × 270px
Transformations made
  • Change line multiples to overlaied lines for the decreased scroll length.
  • Resize with the user-specifed size.
  • Remove labels for density.
Suggestion #3
Size: 200px × 830px
Transformations made
  • Convert to a heatmap with changing the layout to adjust density.
  • Convert to a heatmap to adjust density.
  • Resize with the user-specifed size.
  • Unwrap text lines for readability.
Suggestion #4
Size: 200px × 270px
Transformations made
  • Aggregate multiples for a tiny view.
  • Resize with the user-specifed size.
  • Remove labels for density.
Suggestion #5
Size: 200px × 370px
Transformations made
  • Convert to a heatmap with changing the layout to adjust density.
  • Convert to a heatmap to adjust density.
  • Resize with the user-specifed size.
  • Unwrap text lines for readability.