Desktop version
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.
Design suggestions
On smaller screens, scroll horizontally
Suggestion #1
Size: 380px × 750px
Transformations made
- Resize with the user-specifed size.
Suggestion #2
Size: 380px × 750px
Transformations made
- Transpose to fit the changed aspect ratio.
- Resize with the user-specifed size.
- Change the arrangement of text lines for transposed view.
Suggestion #3
Size: 380px × 750px
Transformations made
- Transpose to fit the changed aspect ratio.
- Resize with the user-specifed size.
- Change the stack alignment for transposed view.
- Change the arrangement of text lines for transposed view.
Suggestion #4
Size: 380px × 750px
Transformations made
- Transpose to fit the changed aspect ratio.
- Resize with the user-specifed size.
- Aggregate data to adjust density.
- Change the arrangement of text lines for transposed view.
Suggestion #5
Size: 380px × 750px
Transformations made
- Resize with the user-specifed size.
- Aggregate data to adjust density.
Suggestion #6
Size: 440px × 1,010px
Transformations made
- Add a context view for discoverability.
- Resize with the user-specifed size.
Note: The bursh interaction is deactivated in this web page for technical reason.
Suggestion #7
Size: 380px × 750px
Transformations made
- Transpose to fit the changed aspect ratio.
- Resize with the user-specifed size.
- Aggregate data to adjust density.
- Change the stack alignment for transposed view.
- Change the arrangement of text lines for transposed view.
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.
Design suggestions
On smaller screens, scroll horizontally. The participant activated "more drastic changes" to see Suggestions #2--4.
Suggestion #1
Size: 800px × 710px
Transformations made
- Resize with the user-specifed size.
Suggestion #2
Size: 925px × 900px
Transformations made
- Convert to multiples to adjust density.
- Resize with the user-specifed size.
- Simplify axis labels for the split layout.
Suggestion #3
Size: 800px × 710px
Transformations made
- Resize with the user-specifed size.
- Aggregate data to adjust density.
Suggestion #4
Size: 800px × 710px
Transformations made
- Add a context view for discoverability.
- 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: 3 (just okay) becaue E4 wanted a more "art-sy" thumbnail.
Suggestion taken: #4
Edits made
- Remove the title(s) for a tiny view.
- Resize with the user-specifed size.
This includes resizing and proportionately repositioning text elements. - Aggregate data to adjust density.
- Remove the reference(s) for a tiny view.
- Remove the annotation(s) for a tiny view.
- Remove the tooltips for a tiny view.
- Transpose the axis.
- Remove the axis labels to avoid overlapping.
- Change the title for better alignment.
Notes
Edits made by the recommender.
Manual edits made by the user.
Design suggestions
On smaller screens, scroll horizontally
Suggestion #1
Size: 200px × 320px
Transformations made
- Remove the title(s) for a tiny view.
- Resize with the user-specifed size.
- Remove the reference(s) for a tiny view.
- Remove the annotation(s) for a tiny view.
- Remove the tooltips for a tiny view.
Suggestion #2
Size: 200px × 320px
Transformations made
- Filter out less important data points for a tiny view.
- Remove the title(s) for a tiny view.
- Resize with the user-specifed size.
- Remove the reference(s) for a tiny view.
- Remove the annotation(s) for a tiny view.
- Remove the tooltips for a tiny view.
Suggestion #3
Size: 200px × 320px
Transformations made
- Filter out less important data points for a tiny view.
- Remove the title(s) for a tiny view.
- Resize with the user-specifed size.
- Aggregate for the samller screen space.
- Remove the reference(s) for a tiny view.
- Remove the annotation(s) for a tiny view.
- Remove the tooltips for a tiny view.
Suggestion #4
Size: 200px × 320px
Transformations made
- Remove the title(s) for a tiny view.
- Resize with the user-specifed size.
- Aggregate data to adjust density.
- Remove the reference(s) for a tiny view.
- Remove the annotation(s) for a tiny view.
- Remove the tooltips for a tiny view.