Matteo Picozzi http://home.deib.polimi.it/picozzi {[email protected] } % )( ,#&'$%* & +#*!,! % &##&(*!, )+') Doctoral Consortium CHI Italy 2013 Trento (TN) September 16 th , 2013
Jun 26, 2015
Matteo Picozzihttp://home.deib.polimi.it/picozzi
�%���)�(���,�#&'$�%*�&���+#*!��,!����%���&##��&(�*!,����) +')
Doctoral ConsortiumCHI Italy 2013
Trento (TN)September 16th, 2013
��) +'����!%!*!&%�
UI
Web Applications
public APIs
widgetsdata sources
Mashups
��) +'�� �(��*�(!)*!�)�
Vertical
Mashups are
applications for
particular needs
��) +'�� �(��*�(!)*!�)�
Contingent
Mashup might be useful for a short period of time
��) +'�� �(��*�(!)*!�)
Composable
Reuse of building blocks, called components
��) +'�� �(��*�(!)*!�)
Flexible
It’s easy to adapt mashups to new needs changing components or synchronizations
among them
��) +'�� �(��*�(!)*!�)�
Lightweight
Mashups are usually lightweight applications
� ��$�) +')����!%%!%��
Housingmaps
• Mashups were born to meet real user needs• An example is Housingmaps.com, the first map mashup:
- In 2005, Paul Rademacher overlays data from Craiglist on his Google Maps hack- Then Google decided to open up the Google Maps API for developers- And Google Maps become the preferred mapping platform for the web
� ��$�) +')����!%%!%�
The first mashup developers were hackers
who however discovered a world
where also end users can take advantage of mashup solutions for
their needs
�)�()��%����) +')��
It is noteasy to
predict end user needs...
�&%��*�!#��
Numb
er of
users
Number of web applications
Developed
applications
Market opportunity for mashups
�%���)�(���,�#&'$�%*��
Web 2.0
Active co-creation of new ideas, knowledge and
simple applications
Culture of participation
User involvement
in the creation of contents
Collaboration among users through
web applications
End User
Development
��) +')�&''&(*+%!*.��
With the right tools
also end users can develop
their mashups
�!���.�#���
Resource Selection
Mashup Composition
Usage and Maintainance
Dismissal
Mashup idea
Manual development of mashups
�!���.�#���
Resource Selection
Mashup Composition
Usage and Maintainance
Dismissal
Mashup idea
Component Editing
Mashup Sharing and co-
creation
Manual development of mashupsTool-assisted
and Registration
Reusage
New
New
�!� *-�!� *���,�#&'$�%*�'(&��))
• Abstraction from technical details- A platform speaking the user language (functionality and
terminology), possibly through visual mechanisms• Continuous feedback
- Immediate visual feedback → immediate mashup execution• Composition support
- Assisted composition, e.g., by means of recommendations• Domain specific focus
- A platform restricted to a well-defined domain the user is comfortable with
The need for composing an application, starting from resources responding to personal needs, and simply running it, without
worrying about what happens behind the scenes, arises
�
��,�#&'$�%*�'(&��))�
Component editing Mashup composition
Component synchronization Collaboration
��) +'��&$'&)!*!&%��
��,�#&'$�%*�'(&��))��
Component editing Mashup composition
Component synchronization Collaboration
�&$'&%�%*�).%� (&%!/�*!&%�
��,�#&'$�%*�'(&��))��
Mashup composition
Component synchronization Collaboration
Component editing
�&$'&%�%*���!*!%���
��,�#&'$�%*�'(&��))��
Component editing Mashup composition
Component synchronization Collaboration
�&##��&(�*!&%��
�&��#)��,!)+�#�*�$'#�*��$&��#
• UI Template- Set of “empty” visual
elements called visual renderers
- Different kinds of VT
- Must be filled by data
��
List
Map
Chart
�&��#)��,!)+�#�*�$'#�*��$&��#�
ImageTitleSubtitle
UI template itemData
Data representation
Mapping
<visual-mapping> <global type="List"> <vr name="Title" type="Text"> <data source="IMDB" query="/title"/> <data source="MyMovies" query="/@name"/> </vr> <vr name="Subtitle" type="Text"> <data source="IMDB" query="/director"/> <data source="MyMovies" query="/@director"/> </vr> <vr name="Image" type="Image"> <data source="IMDB" query="/poster/image"/> <data source="MyMovies" query="/@photo_url"/> </vr> </global></visual-mapping>
Schema Export for multiple devices
Event Bus
�&��#)��* ���,�%*��(!,�%�$&��#�
Component 1
Component 2
Component 3
Component 4
Component 5
Event 1
Operation 2
Binding
Binding
Publisher: Component 1Event: Event 1
Subscriber: Component 3Operation: Operation 2
�(� !*��*+(���
Other Devices
PEUDOM
UI Mashup Dashboard Component Editor
Composition Assistance Module
Collaboration Module
Platform Repositories
Web Resources
Mobile Device
MobileExecution Environment
Large Screen Device
Large ScreenExecution Environment
…
��#!��*!&%• 3 experiments
- Mashup dashboard- Component editor- Collaboration mechanisms
• Goals- Demonstrate that end users (whether skilled or not) can execute tasks and
develop mashups- Compare the behavior of technology expert users and non-expert users
• Setup of the experiments- Tutorial- Filling of the pre-experiment questionnaire- Observation of the users during the execution of increasing difficulty tasks- Filling of the post-experiment questionnaire
• Analysis of- Efficacy- Performances (time of execution of tasks)- User satisfaction
• Results- No significant difference between expert and non expert users
��
�&%�#+)!&%)
• Mashups are suitable for EUD• Coverage of the entire lifecycle• Lightweight development process• Platform for EUD
- Component editing for multi-device mashups- Mashup dashboard- Collaboration
• Validation of the approach through user studies with encouraging results
�
�+*+(��-&("
• Improvement of the real-time collaborative editing
• Adoption of different kinds of service standards
• Apply already studied recommendation techniques in order to help users select adequate resources
• Increase the flexibility and usability of our environments
• Improve mechanisms for domain specificity
��
�����&(�.&+(��**�%*!&%��