The iterative methodology that was used to solve this problem, has been detailed below. It consisted of five steps: Define, Empathize, Ideate, Prototype and Evaluation. Driven by constant feedback at every stage of this process, the aforementioned steps ensured that the project stayed in-line with the human-centric design approach.
The process began by understanding the problem associated with the chosen use case of depicting network-based data in a user friendly and intuitive way. The network-based data was related to the academic collaborations amongst faculty and members of University College London Interaction Centre (UCLIC). Currently this data is shown in a tabular form with pagination and filters. There is a plenty of scope to make this information more meaningful for the user. Check out the data table at the following link:UCLIC Publications.
Now that the problem had been defined. The next step was to empathize with the users and define clear goals for the project. After a few discussions with classmates (also potential users), I was able to define three domain tasks that the final visualization would serve:
- Which members of UCLIC have had the most collaborations?
- What are the most recent research topics that a UCLIC member has collaborated on with different co-authors?
- Identifying the details about connections of a given UCLIC member with a particular co-author.
In the Ideation phase, I had to go through relevant academic literature- such as journals, blogs and books, to gather various possible options used to display network based data. I created a collection (using MIRO) of the most commonly used types of graphs that are employed to illustrate such a dataset. A snapshot from the MIRO board, depicted below:
Due to all the aforementioned issues, the same data was visualized via a Chord diagram, another way to represent relationships between objects.
The chord diagram was plotted using Highcharts.js and it was made interactive in Figma. Color was used as an identity channel. The length of the arc would vary as per the number of collaborations associated with a name. The occlusion issue was fixed as there was no overlap of node labels (names in this case) with other node labels or with connecting edges (chords in this case). The initial stage, when there is no user interaction with graph (fig below on the left), would show chords with dimmed down colors.
Once the user hovers over a name, all chords originating from/ or ending in that name, would become active and show up in bright colors (fig below on the right). A tooltip would be displayed, showing: member name, number of collaborations and most recent researches/ studies of that member, along with an expand icon, that would open up a modal window on top of the visualization, depicting all studies undertaken by that member.
Early feedback sessions with a couple of users, suggested that they did find the new visualization more engaging, informative and intuitive. Although, since no design is flawless, to measure the performance of the newly suggested data visualization, an extensive plan of evaluation has also been devised.
A lab based study can be performed wherein users would be given a set of pre-defined tasks and their task performance would be assessed to realise the efficiency of the networks based data visualization. It can also be combined with Think Aloud approach to capture users’ thoughts at specific points during their tasks. These methods can give sufficient information required to evaluate this data visualization and make any iterative changes to it, if required.