User Study Case 4: Stacked bar chart (Final outcome only)

Note: a mock dataset is used for anonymization.

Desktop version

Size: 1,035 px × 800 px

Smartphone version

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

User's outcome

Size: 380px × 750px;
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #3
Edits made
  • Transpose to fit the changed aspect ratio.
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Change the stack alignment for transposed view.
  • Change the arrangement of text lines for transposed view.
  • Add and style an annoataion to axis ("Total number of stores").
  • Increase the gap between the chart and legend for spacing for the new annotation.
  • Change the title text for better alignment.
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: 925px × 900px
User satisfaction rating: 5 (very satisfied)
Suggestion taken: #2
Edits made
  • Convert to multiples to adjust density.
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Simplify axis labels for the split layout.
  • Change the multiples header style.
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 × 200px;
User satisfaction rating: 4 (satisfied)
Suggestion taken: #1
Edits made
  • Remove the title(s) for a tiny view.
  • Resize with the user-specifed size.
    This includes resizing and proportionately repositioning text elements.
  • Remove the reference(s) for a tiny view.
  • Remove the annotation(s) for a tiny view.
  • Remove the axis grid(s) for a tiny view.
  • Remove the title.
  • Remove the vertical axis grid and labels.
  • Remove horizotnal axis labels (in the middle).
Notes

Edits made by the recommender.
Edits made by the recommender (Alteration).
Manual edits made by the user.