A WEB-BASED
              ENVIRONMENT FOR VISUAL
              CLIENT SIDE MASHUPS
              Lars Grammel,
13-Apr-2010...
Motivation
2




    Provide Flexible and Intuitive Visual
      Analytics Tools for End User Analysts
Two Aspects of Creating Visualizations
3




                 Constructing Single Visualizations



                 Coo...
End User Development Principles
4


       Immersion into Task (Flow)
         Invisible tools
         Direct interact...
Mashup Environments Survey
5




       Assessed 6 Mashup Environments
       Barriers to View Coordination &
        Co...
6
    Prototype Demo
Implementation of Principles
7


       Immersion into Task (Flow)
         Invisible tools [no programming, drag and dr...
Usability Study
8


    Does our interaction approach work in practice? What
      usability issues are hampering the inte...
Reactions
9




    “Visually pleasing to the eye. Very intuitive in that for the most
        part it made sense what eac...
Task Completion
10


          Spatio-Temporal Tasks                         Concept Tasks on Biomedical Data

     P2    ...
Usability/Usefulness of Features
11
Multiple Windows
12



     “I liked being able to view the
          timeline and the map at the
          same time when...
Drag and Drop
13




     “When dragging it was very
       helpful to see where you can
       drag the item to (by light...
Highlighting of Items and Sets
14




     “The use of selections and
        highlighting in the different
        window...
Custom Sets
15




     “I liked the fact that I could easily
          look for a specific earthquake
          set.” P4
...
Usability Improvement Opportunities
16


        Synchronized Selections
        Filtered Views
        Access to Actio...
Contributions
17


        Drop Target Highlighting
        Drop Previews
        View Coordination using Drag and Drop...
Future Work
18


        Navigation Coordination
        Add More Visualizations
        Advanced Visualization Configu...
Thank you!
19




Lars Grammel
CHISEL Group
University of Victoria
Lars.Grammel@gmail.com
Upcoming SlideShare
Loading in …5
×

A web-based environment for visual client side mashups

957 views
929 views

Published on

Presentation given at Smart Interactions Track, IBM University Days, 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
957
On SlideShare
0
From Embeds
0
Number of Embeds
359
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

A web-based environment for visual client side mashups

  1. 1. A WEB-BASED ENVIRONMENT FOR VISUAL CLIENT SIDE MASHUPS Lars Grammel, 13-Apr-2010 CHISEL Group, University of Victoria
  2. 2. Motivation 2 Provide Flexible and Intuitive Visual Analytics Tools for End User Analysts
  3. 3. Two Aspects of Creating Visualizations 3  Constructing Single Visualizations  Coordination and Layout of Multiple Visualizations Literature Survey End User Development Tool Survey Mashup Environments Prototype Development Preliminary Prototype Usability Evaluation
  4. 4. End User Development Principles 4  Immersion into Task (Flow)  Invisible tools  Direct interaction with domain concepts  Immediate feedback  Previews  Incremental and iterative development  Learning  Gentle slope of complexity  Easy recovery from mistakes  Entice users into learning  Collaboration  Different levels of expertise
  5. 5. Mashup Environments Survey 5  Assessed 6 Mashup Environments  Barriers to View Coordination & Configuration:  Programming (visual dataflow, widget event wiring, DSLs) instead of direct manipulation  No direct manipulation layout of multiple views (except IBM Lotus Mashups)
  6. 6. 6 Prototype Demo
  7. 7. Implementation of Principles 7  Immersion into Task (Flow)  Invisible tools [no programming, drag and drop interaction]  Direct interaction with domain concepts [sets, items, dnd]  Immediate feedback [highlighting, previews, tooltips]  Previews [drop previews]  Incremental and iterative development [flexible workflow]  Learning [low entry barrier]  Gentle slope of complexity  Easy recovery from mistakes [undo / redo]  Entice users into learning [tooltips]  Collaboration [workspace sharing]  Different levels of expertise
  8. 8. Usability Study 8 Does our interaction approach work in practice? What usability issues are hampering the interactions? Laboratory User Study with 8 Participants (& 1 Pilot)  Video Tutorial  Spatio-temporal analysis (2 Tasks)  Earthquakes & Tsunami Warnings  Concept analysis (4 tasks)  Biomedical Ontology Data  Evaluation Questionnaire  Ratings, Open Questions
  9. 9. Reactions 9 “Visually pleasing to the eye. Very intuitive in that for the most part it made sense what each window did in terms of function. The possibilities of what one can produce with this easy interface seem enormous.” P7 “[I liked that] everything is connected and interactive.” P9 “It is hard to understand what some of the function does.” P3
  10. 10. Task Completion 10 Spatio-Temporal Tasks Concept Tasks on Biomedical Data P2 f-ps f-ps f-s f-s a n-a P3 f-ps f-ps f-s f-s f-ps n-a P4 f-s f-ps f-s f-s n-a n-a P5 f-s f-s f-s f-s f-ps n-a P6 f-ps f-ps f-s f-s f-ps a P7 f-s f-ps f-s f-ps f-ps f-s P8 f-ps f-ps f-s f-s f-ps n-a P9 f-ps f-s f-s f-s f-s f-s 1 2 1 2 3 4 f-s: finished, succeeded f-ps: finished, partially succeeded a: attempted n-a: not attempted
  11. 11. Usability/Usefulness of Features 11
  12. 12. Multiple Windows 12 “I liked being able to view the timeline and the map at the same time when exploring earthquake data.” P5 “Resizing windows was annoying especially since there is a lot of space on the screen that I felt was not used because the default window size is small.” P5 63% of the participants resized and moved windows frequently.
  13. 13. Drag and Drop 13 “When dragging it was very helpful to see where you can drag the item to (by lighting up the possible windows).” P2 “The drag and drop […] had what you needed right there. At first glance everything seemed easier, but as you get deeper into the tasks I got confused on how things actually worked.” P7
  14. 14. Highlighting of Items and Sets 14 “The use of selections and highlighting in the different windows is very helpful to organize what one is doing.” P2
  15. 15. Custom Sets 15 “I liked the fact that I could easily look for a specific earthquake set.” P4 “I could not use a lasso function to quickly highlight multiple items in any view.” P5
  16. 16. Usability Improvement Opportunities 16  Synchronized Selections  Filtered Views  Access to Actions  “The hardest part of using the tool was that you had to wait for the mouse over to happen before you could do something.” P4  88% of the participants tried using right-click.  Graph View  50% of the participants clicked on the node menu indicator.  88% of the participants inadvertently selected nodes.  100% of the participants had trouble with the graph layout.
  17. 17. Contributions 17  Drop Target Highlighting  Drop Previews  View Coordination using Drag and Drop  Synchronized Selection  Filtered Views  Multiple Named Custom Sets combined with Set Highlighting
  18. 18. Future Work 18  Navigation Coordination  Add More Visualizations  Advanced Visualization Configuration  Synchronous Collaboration  Other Devices: Large Screen Multitouch & Tablets  …
  19. 19. Thank you! 19 Lars Grammel CHISEL Group University of Victoria Lars.Grammel@gmail.com

×