Matteo Picozzihttp://home.deib.polimi.it/picozzi

{picozzi@elet.polimi.it}

�%���)�(���,�#&'$�%*�&���+#*!��,!����%���&##��&(�*!,����) +')

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

��

�����&(�.&+(��**�%*!&%��