Web-Based

Activity Sculpture

Creator

LMU Munich

____________

Presented by

Walter Rempening Diaz

Master Thesis

Data Visualization

" The use of computer-supported, interactive, visual representations of abstract data to amplify cognition. " 

Card et al's. definition [1]:

1

Quantified Self

[2]

2

Activity Sculptures

[3]

[4]

3

Web Configurators

[5]

4

Goal

Through co-creation production techniques and best practices, develop a software tool that includes the user in the process of achieving a visualization that is aesthetically and functionally meaningful. 

 

5

Content Overview

Prototype Design

Implementation

User Study

Conclusion

Q&A

6

Prototype Design

II

Activity Sculpture Design Requirements

  • Aesthetically appealing 

  • Visualize personal data

  • Motivate users to self reflection 

  • Highly configurable

  • 3D Printable

7

Sculpture Prototypes

8

Sculpture Classification

Sculpture Name Metaphor Semiotic Representation Variable Mapping Capacity Estimated Implementation Complexity Customization Capacity
3D Graph Line Chart Indexical/Avatar Iconic 4 Medium high Medium high
Activity Landscape Terrain Iconic min. 2 High High
Activity Flora Leaf Iconic 4 High Low
Activity Vase Vase/ Cylinder Symbolic Unlimited Medium Medium

9

Configurator Design

  1. Configuration Options
  2. Constraints
  3. Configuration Process

10

UI Prototypes

11

1.

UI Prototypes

12

2.

3.

Fitness Trackers

(From left to right)

  • Nike+ Fuel Band SE 
  • Misfit Shine 
  • Jawbone UP 3 
  • Fitbit Flex 
  • Withings Pulse Ox 

13

Implementation

III

Requirements

  • Withings API integration
  • Real time 3D rendering 
  • Public server with stable
    working version 

14

Technologies

MEAN Stack

15

Final Activity Sculptures

Normal

Wireframe

Interpolated

Interpolated + Wireframe

16

Final Configurator UI

17

User Study

IV

Study Design

Thinking Aloud 
Usability Test 

    User Screencast and
    Audio Recordings

Forum Posts

    Withings Subreddit, 
    Quantified Self Forum

18

Questionnaire

    36 Questions

Web Analytics 
   Traffic, Session Recordings, 
    Click Heatmap

Quantified Self Munich Meetup

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Results - Forum Posts

 

  • 219 Views
  • 55 recorded sessions
  • International visitors
  • Users can not login because of a bug in the authentication system
  • Consent window discouraged visitors

19

Results - Questionaire

  • 9 Participants, 6 male & 3 female
  • Almost no previous experience with web configurators and fitness trackers
  • Customisable products are more attractive and tend to be more expensive
  • User neutrally attached to the sculpture
  • Sculpture was aesthetically appealing
  • Normal visualisation style was preferred
  • Configurator was easy to use and to learn 
  • UI aesthetically appealing
  • UI control labels and functionality was understandable 
  • Would like to have more sculpture design options

20

Results - Thinking Aloud

  • Experimented with variable mapping
  • Intuitively navigated the sculpture in 3D space
  • Interpolated mode was not understood
  • Toggle button showed to be difficult to use
  • Often questioned the sculpture's usefulness 
  • Signs of self reflection

21

Conclusion

V

Future Works

  • Change welcome page
  • Support more fitness trackers
  • Add more sculpture designs
  • Make UI responsive
  • Test with advanced users

21

Thank You!
Questions?

_____________________________________

References

  1. S. K. Card, J. D. Mackinlay, and B. Shneiderman, editors. Readings in Information Visual- ization: Using Vision to Think. Morgan Kaufmann Publishers Inc., San Francisco, CA , USA , 1999.
  2. Quantified Self: Gary Wolf (L) and Kevin Kelly (R) at QS 2012 thesocietypages.org https://c2.staticflickr.com/6/5066/5792700016_60dda0e05a_b.jpg
  3. R. A. Khot, L. Hjorth, and F. Mueller. Understanding physical activity through 3d printed material artifacts. In Proceedings of the 32nd annual ACM conference on Human factors in computing systems, pages 3835–3844. ACM, 2014. 
  4. I. Popian. Mental fabrications, 2015. last accessed 25-05-2015, http://www. 3dtrophyfactory.com/en/start-creating/tr_texttotem_large. 
  5. M. Maria. Mr maria shop all sweetness and light, 2015. last accessed 22-05-2015, http: //mrmaria.com/customizable/.  

  6. http://everythingbrilliant.co.uk/wp-content/uploads/2015/01/On-Air.jpg

  7. A. Vande Moere and S. Patel. The physical visualization of information: Designing data sculptures in an educational context. Visual Information Communications International (VINCI’09), 2009. 

3D Graph

Activity Landscape

Activity Flora

Activity Vase

Architecture

Vande Moere et al.'s Taxonomy

Representational Fidelity

    Embodiment of Form

    Metaphorical Distance

Narrative Formulation

    Affordance

ISO 9241-110:2006 

Ergonomics of human-system interaction

  1. Suitability for the task
  2. Self-descriptiveness
  3. Controllability
  4. Conformity with user expectations
  5. Error tolerance
Made with Slides.com