FaceMashup: Enabling End User Developmenton Social Networks Data

Daniele Massa and Lucio Davide Spano1

University of Cagliari, Department of Mathematics and Computer ScienceVia Ospedale 72, 09124, Cagliari, Italy

danielemas87@gmail.com, davide.spano@unica.it

Abstract. Every day, each user produces and shares different contentson social networks. While developers can access such data through APIs,end users have less control on such information, since their access ismediated by the social application features. In order to fill this gap, weintroduce FaceMashup, an EUD environment supporting the manipulationof the social network graph. Data types are represented through widgetscontaining the UI elements used in the social network application, whichcan be connected with each other through the drag and drop. We report ona user-test on the FaceMashup prototype, which shows a good acceptanceof the environment by end-users.

Keywords: End User Development, Social Networks

1 Introduction

The availability of APIs for accessing social network (SN) data is a gold-minefor developers, since they are useful for creating a personalised applicationexperience. Social Networks APIs such as the Facebook Graph API [3] applystrict privacy rules, and social network users must explicitly grant the access ontheir information. In contrast, even if users are the owners of this material, theycannot combine sources, filter results or perform specific actions if not explicitlyprovided by the interface. Even for third party developers it is difficult to providesupport for unusual tasks, which have a smaller potential audience. Neverthelesssuch small groups consider the functionalities they need as useful. In this paper,we propose to fill this gap applying End User Development (EUD) techniquesfor enabling end-users to inspect and control their social network data, creatingapplications able to both retrieve and manipulate their contents. We describe thedesign and the implementation of FaceMashup, an environment allowing users tomix contents created friends and to perform actions on them.

2 Related Work

We have been inspired by different existing solutions for representing data anddefining the application logic in other EUD applications in literature. We represent

the social network through the UI elements used by the Facebook web application.In this way, the user recognizes the information by its appearance, associatingintuitively the data semantics. Such technique has been applied successfullyin [4], where the authors proposed a tool for creating mashups from existing webapplications. Hartman et al. [5] follow a similar approach, requiring some pro-gramming knowledge for creating the data composition code. With respect to theapplication logic, FaceMashup requests the users to directly manipulate the datarepresentation in order to infer the actions that the environment must performon them (e.g. using a field as input for a search, or filtering some photos by dateetc.). Such paradigm is derived from the programming by example [2] technique,which has been employed in different EUD tools. For instance, CoScripter [6]allows users to automatize searches and data extraction on web pages recordingthe user’s actions. The tool automatically creates scripts, whose descriptions innatural language contain the procedure steps. Users can review, modify, load andsave them through a dedicated panel in the web browser. Lin et al. [7] created adifferent interface for the same scripting engine, based on spreadsheets, whichallows users to combine data coming from different websites.

3 End User Development Support

FaceMashup represents the Facebook Graph API data with the same elementsused in the social network application interface (see figure 1), including them indedicated widgets. Starting from these building blocks, the user can drag interfaceelements between different widgets for retrieving, combining and filtering datacoming from the Facebook graph. In addition, she can perform actions on theselected entries, through a set of action widgets. We followed four design principlesfor creating the environment:

P1 No separation between the design and the runtime of a SNA. The user definesthe SNA data and logic while executing the it. The goal is to require a lowerabstraction effort for the end user, since she focus on a specific example [2].

P2 A data type is represented through the interface elements of the social networkapplication UI, for exploiting the recognition mechanism and helping theuser in understanding the semantics of a data type (e.g. a user profile isrepresented through the profile picture, the name etc.). The data is the UIelement from the end user’s point of view.

P3 The user exploits familiar interactions for defining the input of a routineelement or for exploiting its output. She should consider them as UI objectsthat can be manipulated inside the environment like e.g. file icons.

P4 The environment should support the user guiding her actions while creatingthe application logic, in order to 1) avoid conceptual errors (e.g. data typemismatch) and 2) explore the possibilities offered by the environment forstimulating the learning process.In FaceMashup, each widget represents a block for building the entire SNA.

A widget retrieves data from the Facebook graph, or it modifies its state. Inaddition, a widget can be used for requesting simple direct inputs (e.g. a text

Fig. 1. A sample Social Network Application developed with FaceMashup.

or a number) to the user. Therefore, we group the FaceMashup widgets intothree categories: Content, Action or Input. Content widgets are user-friendlyrepresentation of Facebook Graph data types. In FaceMashup, it is possible toinsert the following content widgets: 1) Login, 2) Photo 3) Post, 4) Video 5)Friend List, 6) Profile Information, 7) Like list. According to P2, we maintaineda UI similar to the Facebook one. Figure 1 shows different content widgets, witha blue background (login, photo, friend list and posts), and their similarity inappearance with respect to the correspondent information in Facebook.

The second type of widget we included in FaceMashup is the Input, whichcollects data inserted directly by the user of the SNA (e.g. text, date, number,URL, place etc.).

The last type of widget included in FaceMashup is the Action. Such widgetstake as input a set of objects and modify their state or add new content onthe Facebook graph. We included in the environment the following set of actionwidgets: 1) Tagger, which takes as input a set of contents (e.g. posts, photosvideos etc.) and a set of user profiles, tagging all the profiles in all the specifiedcontents 2) Share which allows to share a content on the Facebook wall, 3) Likewhich allows to like a set of contents, passed as input to the widget. Figure 1shows an example of tagger widget in the bottom row.

If we do not consider the input and the login, all widgets show contents orperform action according to some input data. The end-user defines which widgetprovides such input data while creating the SNA. In this way, she is able tocreate and control the flow of the routine she wants to automatize. Accordingto P3 and P4, the data transport between two widgets is supported through adrag and drop metaphor: a UI element, which represents a data type or a datafield, can be selected in a source widget and it can be dropped inside another one.

Fig. 2. Example of user feedback while dragging a field from a widget into another.

Such interaction specifies that the data corresponding to the selected element isthe input of the widget where it was dropped. When the user adds a new widgetin the environment, it shows a help message for supporting the user in figuringout which kind of information it needs. In order to show which elements can bedragged from a widget, FaceMashup visualizes an immediate feedback to theend-user each time she clicks UI element. Such feedback contains informationabout the selected field, like its type and value, and also the number of draggedelements. Indeed, it is possible for the user to move more than one data object ata time, for instance dragging the entire content of a photo or friend list widget,by selecting the container box. Figure 2 shows an example of such draggingfeedback in the left part, where the user is informed that she is dragging onedata object, corresponding to the profile name. Finally, the tool guides the userfor choosing one among all the available options for releasing the data she iscurrently dragging. It matches the selected data type with the input needed byall the widgets in the environment. For all widgets that may exploit the suchdata, FaceMashup shows an icon suggesting to drop the content, as shown infigure 2, right part. In this way, we prevent end-users errors, since we do notallow her to release the data elements into widgets that do not accept them.Once data is dropped inside a widget, it immediately updates its visualizationfor showing the retrieved content.

The connection defines implicitly a partial temporal ordering among thewidgets, which can be automatically computed by the underling environmentsupport. FaceMashup represents explicitly such ordering positioning the widgetsinside the environment. It represents a sequential relationship between a widget Aand B positioning B below A in the vertical axis. Instead, if the user may providethe information needed by both widgets at the same time (theoretically) or inany order (more practically), the widgets are represented in the same positionin the vertical axis, aligned horizontally. This creates a grid of widgets, whererows represent sequential steps and columns parallel operations. For instance,the application in figure 1 allows the user to select a photo and tag all friendsthat published at least a photo or a post in the same place where the photo wasshot. The SNA sequence requires her to login (first row), then to select the photoand retrieve the list of friends (second row), then it shows all photos and postscreated by her friends in the same place (third row) and, finally, to tag them(fourth row) 1.

The end-user is able to recall which widget provides input to another onethrough hints in its presentation. If a widget receives data from a source, in theupper part there is a green icon with a small number indicating the cardinalityof the input set. If the user clicks the icon, the environment highlights the

1 A demo video is available at https://www.youtube.com/watch?v=4LhUislgFD8

corresponding source widget. In addition, the user can de-connect the two widgetssimply dragging out the green icon.

Besides setting the widget input source, in FaceMashup end-users can controlthe contents retrieved by a widget applying some filters, in order to select the setof items according to an end-user defined criterion. In order to filter the contents,the user can follow two approaches. The first one is a manual selection of thecontents from the set. The second option is to define a filter through the bottompart of a content or action widget. A filter defines a simple comparison betweena data attribute against an end-user provided value with a comparison operator.The operator set changes according to the type of the comparison attribute.The value can be specified dragging data from another widget, as happens for aconnection.

4 Evaluation

We carried out a usability test in order to evaluate the prototype and thetechniques for controlling both the data and the control flow. Twelve peopleparticipated to the user test, aged between 36 and 20 years old (x = 25, s =3.96). None of them had programming skills, 8 used applications for organizingautomatically personal data, and all users were familiar with Facebook.

After completing a demographic questionnaire and reading a one-page intro-duction to the tool, each user completed the following three tasks: T1) Create anapplication for retrieving all the photos of a user, T2) Create an application forretrieving all the photos created by all the friends of a user in a specific day,T3)Create an application allowing the user to select a photo and tag all friends thatpublished at least a photo or a post in the same place where the photo was shot.

Finally, the users completed a post-test questionnaire in two parts: a standardSUS [1] and other five questions for evaluating the EUD specific features. Figure 3summarizes the results of the first part of the questionnaire. All questions receivedhigh mean ratings and all users completed T1 and T2 successfully. Only oneuser was not able to complete T3. The mean SUS [1] score was good (x = 77.6,s = 16.1). We registered a high variability for question 10 of the SUS questionnaire,which means that the next version of the prototype should focus more on thelearning phase, providing support and help for users that are exploring theenvironment for learning. The additional five questions (Q1 - Q5 in figure 3)show a good rating of FaceMashup on the following aspects: Q1) satisfaction,Q2) usefulness, Q3) overall experience, Q4) aesthetics and Q5) completeness.

In summary, the users found the tool useful and they were able to completethe programming task, even the most difficult one. The interface was able tosupport them appropriately in creating applications with social network data.However, the evaluation highlighted also the need for a more effective help, inorder to better convey the application concept to end-users. In addition, theenvironment should include more feedback and suggestions for the availableactions, especially for the widget connections.

Fig. 3. Evaluation questionnaire results in a 1-7 scale. We inverted the rating forquestions in [1] with a negative connotation.

5 Conclusions and Future Work

In this paper, we described the design and the implementation of FaceMashup,a tool that empowers social network users, supporting them in creating theirown procedures for inspecting and controlling their data. The tool represents theFacebook graph data through a set of widgets containing the interface elementsexploited in the social network application. The preliminary user test highlightedboth a good acceptance of the tool and a high completion rate even for complextasks. More work is needed for providing a better user guidance during the widgetconnection, especially for identifying and selecting the UI parts that can beexploited for connecting widgets.

Acknoledgments Lucio Davide Spano gratefully acknowledges Sardinia RegionalGovernment for the Financial support (P.O.R. Sardegna F.S.E., European Social Fund2007-2013 - Axis IV, Obj l.3, LoA 1.3.1)

References

1. Brooke, J.: SUS: A ”quick and dirty” usability scale. In: Jordan, P., Thomas, B.,Weerdmeester, B. (eds.) Usability Evaluation in Industry, pp. 189–194. Taylor &Francis, London (1996)

2. Faaborg, A., Lieberman, H.: A goal-oriented web browser. In: Proceedings of CHI2006. pp. 751–760. ACM, New York, NY, USA (2006)

3. Facebook: Facebook Graph API, https://developers.facebook.com/docs/

graph-api, accessed: 2010-09-304. Ghiani, G., Paterno, F., Spano, L.D.: Creating mashups by direct manipulation of

existing web applications. In: Costabile, M., Dittrich, Y., Fischer, G., Piccinno, A.(eds.) End-User Development, Lecture Notes in Computer Science, vol. 6654, pp.42–52. Springer Berlin Heidelberg (2011)

5. Hartmann, B., Wu, L., Collins, K., Klemmer, S.R.: Programming by a sample:Rapidly creating web applications with d.mix. In: Proceedings of UIST 2007. pp.241–250. ACM, New York, NY, USA (2007)

6. Leshed, G., Haber, E.M., Matthews, T., Lau, T.: Coscripter: Automating & sharinghow-to knowledge in the enterprise. In: Proceedings of the SIGCHI Conference onHuman Factors in Computing Systems. pp. 1719–1728. CHI ’08, ACM, New York,NY, USA (2008)

7. Lin, J., Wong, J., Nichols, J., Cypher, A., Lau, T.A.: End-user programming ofmashups with vegemite. In: Proceedings of IUI 2009. pp. 97–106. ACM, New York,NY, USA (2009)