# FaceMashup: An End-User Development Tool for Social Network Data +
## 4 Preliminary Design  
In the first iteration, we provided the users with a data flow representation of the SNA: actions and data types were represented through interaction boxes, which we call widgets, that the user positions inside the working area. Pipe connections represented the information passing between widgets for filtering and/or performing actions.  
We grouped widgets in three categories. Data widgets correspond to the entity types that can be retrieved from the Facebook graph, such as a user's profile information, friend lists, photo collections, the wall posts and so on. We represented them in the environment with a blue color. The second group contains manipulation actions, such as filtering by user's selection or matching elements with a desired property value (e.g., the content was created is Madrid). The data manipulation color was green. The third group contained widgets that create new data in the Facebook graph (e.g., adding likes, tags, _etc._). They were colored in yellow.  
The connection mechanism, shown in Figure 1, was similar to Yahoo Pipes. Each widget has one or more input and and output sockets, represented, respectively, as green and red circles. The user specified the data flow among the widgets creating pipes between the boxes: (s)he first clicked on the output port of a widget, and then (s)he clicked on the input socket of the other one. Between the two clicks, the environment provided feedback showing the pipe starting at the output socket and ending in the current pointer position.  
Considering the scenario described in Section 3, [PERSON] should produce a SNA similar to the one in Figure 1. He should first include a widget for retrieving the profile information through a log-in (step 1), which is used for retrieving the friend list (step 2). After that, he should include different widgets for searching the contents created by his friends (step 3): photos, posts, videos _etc._ Then, such results are used in two logical branches. In the first one, [PERSON] specifies that the SNA users should select a photo (4) with an image picker widget, receiving the image list from step 3. In addition, the SNA extracts the selected photo location through a data manipulation widget (the green box connected to the image picker widget). In the second branch (step 5), the SNA extracts the location from all contents retrieved at step 3, matching them with the location of the photo from step 4. Finally (7), the application retrieves the friends ID from the filtered data, and tags them in the photo selected at step 4.  
Once the different widgets are connected, the environment allows the user to run the SNA, inserting the starting input data (e.g., the log-in information) and the other user input needed during the execution (e.g., the image picking).  
In order to get a preliminary feedback, we have shown an interactive mock-up to a group of four users without programming experience. We collected their opinions discussing with them. Their feedback highlighted a set of conceptual difficulties that degraded the usability of the tool. First of all, it was difficult for all users to understand which data was provided by a widget, or the effect of data  
Figure 1: A mock-up of the social network application (SNA) solving the scenario problem with the first FaceMashup design, which used a pipe paradigm for connecting data (blue boxes), filters (green boxes) and actions (yellow boxes).  
manipulation, without executing the SNA. The users switched often between the design and the run step not only for checking the application logic, but also for understanding which data was included e.g., in the profile information. Secondly, they had difficulties in understanding the difference between the input and the output sockets, especially while connecting the data manipulation widgets (the green ones). Finally, the pipes cluttered the graphical representation of the SNA, and they had difficulties in recalling the flow order when the number of widgets increased.