Social media websites such as Twitter, through their unique product experiences, create new vehicles for expression . Twitter has been influential in being part of the political discourse throughout the world, especially events such as the Arab Springs. I came across numerous studies analyzing millions of Tweets to understand the vast ranges of opinions on various topics. All of them present rich data, often numerical and illustrated through graphs, and also unique opinion archetypes as a way to classify different opinions. Twisualize is a project that aims at visualizing data from such research studies on Twitter topics thereby making the dense data more accessible to create a meaningful understanding of Twitter.
I chose a research study, to begin analyzing the different kinds of data types that would have to be accodomated. Further, to understand what sort of an experience it should be, I conducted research to understand the meaningfullness of the data among users. From the users, I was able to understand that
- People were surprised as the data challenged assumptions
- Dense with multiple levels of sub-data
- Difficult to compare data sets across categories
My findings directed my iteration towards visualization formats that would facilicate exploration based on interaction leveraging progressive disclosure presenting high-level data upon loading and further level detail upon interaction . The pattern suited well with my approach considering that most of the data being visualized was a hybrid including percentages, text dense themes and numbers. I began sketching and to get an idea of different explorations
Working on the information architecture, I lay down the various requirements of the data from the research study such as age, introductory text etc. Since the element of discovery was key in my findings, I came up with a 'Surprise Me' option that the user could use instead of scrolling through a long list of topics; it would visualize opinions on a random twitter topic that are taken from research studies
Refining my sketches, I began to research various data visualization formats such as Nested bubbles, network trees, charts to to narrow down on a simple bubble based format which would use size and intensity to dictate importance.
Selecting a circle would expand that theme and present relevant theme information such as sample tweets etc
The data included two levels of detail. First, an overall percentage breakdown of 'Pro' and 'Anti' opinions. Further, it included a sub-breakdown of 'Pro' and 'Anti' themes based on the percentage of the users who tweeted that sentiment.
With an aim of simplifying the understanding , I employed size and color assign to relevance . Research into colors pointed me towards various approaches that leveraged various aspects of color such as brightness or saturation. Being a color-blind user myself, I wanted to make sure the colors were accessible using tools such as ColorOracle
Feedback and findings from my designs allowed me to understand
- Users were confused about what each circle represented
- Users did not find the clicking interaction intuitive
- Users were confused by 'Theme' category represented in the homepage
- Users did not intuitively click and explore various categories
1) Introduction Text to give statisticalcontext to the topic 2) List of all the topics users can choose
1) Introduction Text to give statistical context to the topic and the methodology employed for sorting the data 2) Allows users to choose another topic without leaving the page
1) Initial text overlay to specify what the circles represent & instructions on how to interact with them 2) Saturation & size of circle indicates intensity and relevance
1) Addressing the problems with interaction, I changed the ‘click’ to a hover to maximize and to reveal the theme sentiment and percentage of tweets associated 2) Would generate an example tweet that would fall under the selected theme 3)Upon hovering over a circle, the other unselected ones would minimize giving space for the selected one to expand
1)For categories such as age which have the same age group represented in both pro & anti areas, Hovering over one circle would automatically maximize the same group in the other area as well 2)Deselecting one would automatically minimize both
From peer and user feedback this iteration of designs, I was able to understand that the darker visual design proved to be more successful providing more emphasis on the content and better readability. One of the crucial problems reported was that while users enjoyed the interaction aspect, there was difficulty grasping and remembering all the data from multiple interactions to make sense of the whole visualization.
How to make dense data accessible in one screen?
To tackle this problem, I went back to sketching to explore ideas
Refining sketches to create wireframes, I sought to get feedback on iterations to understand which of the designs facilitated the understanding of the data best
Leveraging the already established color scheme in the interactive mode, I used color and text hierarchy to come up with iterations to show all data in one screen
Between the 2 designs, the card design performed better in helping to compare the age category. However, users still had issues with understanding the pro vs anti categories following
1) How the card content relate vertically as well as horizontally
2) How the top level and sub- level breakdown of percentages compare and add up.
My second round of iteration for the 'Show All Data' mode was more successful as it provided more text information to provide context and used the aspect of size to show how the high level data relates
As a designer, this project has been a very challenging learning experience for me. Empathizing with users to understand how users make sense of dense data has guided me in making different design decisions. As the duration of this project in class was 10 weeks, I had to momentarily pause further work on it. However, this project is far from completion and I'm still learning and exploring different user issues as well as effective user testing mechanisms for such data visualizations. My next steps based on a round of feedback would be
- To rework the introduction to provide a walkthrough for users to show to interact with the interface
- Rework the 'surprise me' option as users expressed confusion
- Provide a legend specifying the meaning behind the intensity colors
- More contextual information within the main page to guide users
- Rework the 'Show All Data' mode to provide a better breakdown of the sub-levels of data