a web-based environment for visual client side mashups
DESCRIPTION
Presentation given at Smart Interactions Track, IBM University Days, 2010TRANSCRIPT
![Page 1: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/1.jpg)
A WEB-BASED
ENVIRONMENT FOR VISUAL
CLIENT SIDE MASHUPSLars Grammel,
CHISEL Group, University of Victoria13-Apr-2010
![Page 2: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/2.jpg)
Motivation2
Provide Flexible and Intuitive Visual
Analytics Tools for End User Analysts
![Page 3: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/3.jpg)
Two Aspects of Creating Visualizations3
Constructing Single Visualizations
Coordination and Layout of
Multiple Visualizations
Literature Survey End User Development
Tool Survey Mashup Environments
Prototype Development
Preliminary Prototype Usability Evaluation
![Page 4: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/4.jpg)
End User Development Principles4
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
![Page 5: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/5.jpg)
Mashup Environments Survey5
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)
![Page 6: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/6.jpg)
Pro
toty
pe D
em
o
6
![Page 7: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/7.jpg)
Implementation of Principles7
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
![Page 8: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/8.jpg)
Usability Study8
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
![Page 9: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/9.jpg)
Reactions9
“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
![Page 10: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/10.jpg)
Task Completion10
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
![Page 11: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/11.jpg)
Usability/Usefulness of Features11
![Page 12: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/12.jpg)
Multiple Windows12
“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.
![Page 13: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/13.jpg)
Drag and Drop13
“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
![Page 14: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/14.jpg)
Highlighting of Items and Sets14
“The use of selections and
highlighting in the different
windows is very helpful to
organize what one is
doing.” P2
![Page 15: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/15.jpg)
Custom Sets15
“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
![Page 16: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/16.jpg)
Usability Improvement Opportunities16
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.
![Page 17: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/17.jpg)
Contributions17
Drop Target Highlighting
Drop Previews
View Coordination using Drag and Drop
Synchronized Selection
Filtered Views
Multiple Named Custom Sets combined with Set
Highlighting
![Page 18: A web-based environment for visual client side mashups](https://reader034.vdocuments.site/reader034/viewer/2022051312/547b1e6cb4af9fa0158b4dd4/html5/thumbnails/18.jpg)
Future Work18
Navigation Coordination
Add More Visualizations
Advanced Visualization Configuration
Synchronous Collaboration
Other Devices: Large Screen Multitouch & Tablets
…