Visualize personal disclosures in a timeline interface: Evaluation of a mobile user interface for Data Track in the A4Cloud project

June 21, 2017

I had the opportunity to contribute to a long ongoing EU-funded project at Karlstad University during my bachelor’s thesis, called A4Cloud ( The project concerned a privacy enhancing technology (i.e. a system providing users with information on how their data is stored, exchanged, processed).

My thesis work included programming of a timeline interface in a web environment of the A4Cloud called Data Track. After developing the timeline interface, I ran usability tests to find initial flaws as these tests would be considered pilot tests for the projects. I programmed the Data Track timeline interface for desktop and mobile but chose to focus on evaluating the interface on mobile. The study showed that the participants had some difficulties finding elements and perceiving them as interactive. Moreover, the participants showed interest in wanting to have a transparency enhancing technology, such as the Data Track, in their everyday life.

Considering it was over two years ago I was part of the A4Cloud work, bear with me as I try to remember the most important information. You can find the thesis here. However, stupid as I was or still am, the thesis is in Swedish. Fortunately, if you’re interested in knowing more about A4Cloud, you can find my involvement in one of the project’s deliverables here.



With every registration, sharing, or request of an online service you will most likely end up disclosing data. As more and more things are connected to the internet people are at a risk of unknowingly sharing personal data. Sharing of personal information is a sensitive subject and can hurt people’s assets, dignity, personal integrity and other social aspects.

A4Cloud, a project at Karlstad University, had developed an interface called Data Track. The concept of the Data Track was to display personal disclosures to different services; e.g. a user sharing (knowingly or unknowingly) their credit card number to Facebook upon payment. My involvement in the project was to further explore and later on run a pilot study a timeline interface concept in the already existing web environment. The purpose of the study was to explore the pros and cons of the timeline interface; explore whether or not the users understand the purpose and how to use the system, and lastly; if users can distinguish disclosures with the help of icons and texts in the interface.


The timeline interface

The Data Track is a tool – in this thesis work for the browser but earlier versions in the PRIME and PRIMELIFE projects were not developed for the browser – that presents the user with a visualization of their data shared with different service providers. The idea behind the timeline interface for the Data Track was to create a chronological way for users to see their data disclosures.


The timeline interface: chronologically sorted disclosures. 


Conceptualizing and developing

Before starting the programming part of the user interface development, I created wireframes and mock-ups that were discussed in a workshop within the A4Cloud project.

Early wireflow showing the timeline interface and its modal.

The timeline was made to display one disclosure box at a time; meaning that, e.g., the user could potentially see Facebook as the service provider twice in a row if disclosures were made within a reasonable time. Considering that the boxes were small, it was at first discussed that the data types (or attributes) would be represented by icons with textual information to be displayed when a user clicked on an icon. When clicking a “see more” button the user would be able to see an extensive explanation of the disclosure that they had made. 

The wireframes and mock-ups used a toggle switch input that concerned a “local view” and “remote view”. The local view would present data types that would be locally stored within the relationship between the user and the service provider whereas the latter would display the data types stored at the service provider. However, these views did not end up in the first version of the Data Track because om time limitations of my thesis work. To my knowledge, these features were not implemented later on either. Another reason for not implementing the views was because the initial thought was to visualize data that was explicitly shared (user gave their consent) and implicitly shared (user did not intend to share or the data was derived from explicitly shared data). This was a more important aspect to explore rather than creating the views.

After initial mock-ups and wireframes it was decided to dump the idea of using hamburger menu icons and other similar “show more features/functionality” icons to open a modal box. Instead, it was decided to replace those icons with a cloud icon. The modal box would display search functionality to easier find data types if the disclosure would hold a lot of data types. The modal box would display data in different colors; blue color indicating that data was implicitly shared whereas green color indicating that data was extensively shared. Furthermore, to display more data types in a single disclosure box, a “show more” button at the bottom of the box would extend the box’s height in order to show more data types.

See the pictures below to see the disclosure box and modal.

The disclosure box of the timeline interface


The timeline interface: the modal box displaying explicitly and implicitly shared data.



As the interface used icons, and the Data Track as a whole were planned to move over to a usage of icons to represent data types, research needed to be done concerning what people thought icons represented in a personal disclosure perspective. By that remark, I programmed a website that held a questionnaire with 20 icons for users to enter what they thought the icon meant. In that way, further research could be done with more icons from the Font Awesome library using the platform I created. And icons studies were conducted in by bachelor students (in their thesis work) the upcoming year in Informatics/Information systems; one of which I tutored for the better part of that semester (The usability and understanding of icons Usability test of the icon library Font Awesome). 

The website I created for respondents to fill out concerning Font Awesome icons in the aspect of personal data.

Through an extensive set of usability tests, accompanied by questionnaire and interview, data was gathered. One could argue that the method I was using was a cognitive walkthrough because of the task orientation and timing of questions. However, participants could move as they liked in the interface gathering data in a more holistic approach. Moreover, not many questions were asked during the sequential test either. The participant had eight (very short) task to complete; as the interface does not specifically allow for much navigation to other pages, the tasks concerned internal things on the page such as “please find a disclosure where a name has been shared”. The participants told the test moderator (i.e. me) when they thought they had completed the task.

After the tasks had been completed the participants were given a questionnaire with nine questions to answer about the interface and the concept as a whole.

A thing I started to use when conducting my research was to create, sort of, a contingency table mapping out how tasks, questionnaire questions, and interview questions were connected to the actual research questions. I also used this for mapping out the tasks relevancy for examining the various part of the interface. Often when conducting research it is easy to forget why you ask specific questions and what relevance the questions had in relations to the research purpose. By creating these types of tables it gives a good overview and keeps you on track to create good questions and covering all aspects of the research purpose. The reason being that they do not just display the independent variable but also covers the questions of those factors. 

A contingency table of the tasks relation to the various parts of timeline interface.



The participants of the study seemingly understood the concept of the Data Track and the timeline interface. Specifically the fundamental meaning of the concept – i.e. the chronological representation of disclosures made with different service providers. Data was gathered regarding the icons, inside and outside of the timeline interface, which indicated that users had a much easier time to reflect on the icons within the timeline scenario rather than just seeing the icons prior to the test (on the icon form website) and after the test (during the interview questions). Consequently, participants stressed that they were interested in seeing a system/website as the Data Track in their everyday life because of difficulties keeping track of all their data sharing.

There were several of findings that concerned the interface itself. One of the key observations from the usability tests was that participants had a difficult time finding the appropriate elements for the tasks. For instance, the cloud icon was not perceived as an icon to trigger the modal box at first; this was most likely because of the lack of skeuomorphic detail to the cloud. Moreover, the filter looked like a part of the menu because of its placement in the interface. Lastly, there was only a text explaining the difference in explicitly and implicitly shared data, this was not enough for some of the participants to understand the difference.

Recommendations were made within the thesis as well. One of which were to implement various ways for the users to find out whether or not a data type was implicitly shared. The picture below presents a mobile scenario where the user touches one of the data types and a tooltip window appears to tell additional information about the data type. In this scenario “analytically derived/produced: stressed”.

In HCI spirit showing a recommendation in the thesis


The work within A4Cloud opened up other doors at Karlstad University to work in upcoming EU-funded projects, such as the CREDENTIAL project.