Can we make online discussions better?
By tackling personal consequences and irrelevant noise, we could make more people interested in discussing online and making a real contribution for causes they care about.
This article is about the prototype "AnonyTrue", build as a capstone project for the Interaction Design Specialization at University of California — San Diego . It presents a detailed view on the prototype and describes the design process that led to it.
Despite its undeniable impact on the outcome of elections and promoting of ideas, social networks still fall short on providing a good experience for debating online.
We are all familiar with the annoyances of online forums and comment sections. While many times they can be useful, it's not uncommon to see complete strangers or even friends and relatives offending each other on social networks. Sharing an opinion on a delicate subject has become quite problematic, since it could lead to "unfriendings" and retaliation by current or possible employers.
There is too much noise as well. Many people post just for the sake of it, to get some kind of "ego boost". What most closely resembles an actual debate is when radicals from opposing sides collide — and often they are hired social marketing professionals. This will likely happen in comment sections which people don't care about reading anymore. Constructive debate between opposing views is almost absent. In facebook, for instance, people tend to unfollow those who have different political views from them. This leads to "ideological echo chambers", where people only see and discuss with whom they share similar views.
Our user research confirms this. We found that people who want to talk about their ideas and possibly feel that they could make an actual contribution, frequently have bad experiences and end up scared away from online discussion. There simply isn't a service at the moment which can provide a hassle-free and relevant space for debate.
Presenting AnonyTrue
The outcome of this investigation is a prototype for an online debate platform, called AnonyTrue.
AnonyTrue is an app for debating and voting online. You can publish your posts and comments anonymously, but users must be actual facebook profiles. Comments are moderated by the community, in order to improve the debate quality. These measures aim to minimize the vices of online debate and to encourage the user to speak their minds without intimidation by the usual bullies.
While providing a familiar interface for mobile comments, it differs from other available forum apps in some fundamental ways:
- No personal consequences. Users are true and unique, but can be anonymous. They must provide a facebook account to register, but decide on displaying it or not in their posts and comments. So you are accounted for what you say, but it stays in the platform. And the focus is on the comment, not on who wrote it, because good ideas are what truly matter.
- Quality comes before quantity. Every comment gets reviewed by at least another random user, and it is mandatory to review comments before posting a new one. Users who get bad reviews will appear less often than better-ranked users. People can also make suggestions to improve other people's posts.
- Users get a fair share of views. It makes little difference if you are the first or last to write. Comments are sorted differently every time a user reads the post, and new comments will be mixed with older, relevant comments. Also, posts in favor and against a particular subject get similar screen space.
AnonyTrue requires a relevance engine similar to Google's pagerank. Only, instead of domains and URLs, it would rank users and comments. Since it was build for an interaction design course, the focus was on the user interface rather than the algorithm.
The prototype is a stand-alone application, since it was the required deliverable for the course. However, it could be more suitable as embedded comment section (such as disqus) or as an option for comment sections in social networks.
The prototype can be tried by accessing the following URL on a mobile phone:
And here's a video of the prototype in action.
Design Process
This prototype was the result of a design process based on best practices of interaction design. It serves as a capstone project for the Interaction Design Coursera Specialization, at University of California — San Diego.
The following section summarizes the main steps of this process, highlighting the most important findings and how they affected the final product.
Research: Needfinding
The starting point of the project was to select one out of three available briefings. Each one gave students a mission. The one selected was change: "The challenge is to design an interface that facilitates personal or social behavior change".
The selected subject area was political discussion, and in a broader sense, how can people debate & make decisions online more efficiently. By politics we don't mean elections and candidates, rather than the discussion and decision-making regarding matters which are important to a society.
The first step in the research was the process of needfinding. It was done through an immersion in the routine of target users, observing them "on the job", interviewing them in order to understand how and why they do (or fail to do) certain things and identifying opportunities.
In our case, since we are dealing specifically with online debates, the biggest challenge was that the interactions people do must be spontaneous. It was not possible to simply ask them to choose a post and write something on the spot. Therefore, the chosen strategy was to 1) Observe facebook timelines in order to find examples of successful and unsuccessful political interactions. 2) Select people who frequently commented/wrote such posts and recruit them for interviews. 3) Interview such people and ask them to walk through the steps they took in the particular examples found, and other interesting ones.
Three subjects were interviewed in person, and their audio was recorded. They were asked open-ended and exploratory questions such as "how you use internet for debating", and "what they feel about politics". They were also asked to recall a particular occasion of online political interaction, describe it step by step, and afterwards to debrief the process, detailing what were the motivations/frustrations in the process.
A list of the challenges and opportunities that the subjects mentioned was then compiled and used for ideation. Here are some upon which Anonytrue was based:
- People desire a way to be able to publicly state their political opinions while avoiding personal offenses, or being harshly judged or attacked.
- People seek ways to close the gap between what they share/discuss and the action that can effectively bring this change.
- People with moderate political views feel that the debate is much too “inflated” by radicals from opposing sides. They seek a way for the online debate to allow for a “middle way”.
- People feel that the group of people discussing their political posts end up being too homogenous, because they all belong to the same circle and people with opposing views end up driven away or blocked. They wish there were more contrasting views in the discussion, as long as they can still be constructive.
Ideation
With a list of opportunities, it was time to elaborate concepts which could address some of the user needs.
The first step was to narrow down on the scope, by stating the design goal. For this project, the design goal was:
To try new forms of debate that, by disencouraging bad attitudes and reducing irrelevant noise, could make people more willing to make a real contribution to the causes that matter to them.
Then, two concepts were created. One, called AnonyTrue, allowed for people to comment anonymously on delicate matters, while WriteTogether would let people contribute by improving other people's proposals in an organized way. In order to tangibilize them, two storyboards were created for each concept.
Storyboards are really useful because they let the designer focus on why and users would use the concept, rather than focusing to early on the interface itself.
Quick Prototyping
It is a good practice to create simple and quick prototypes. It gives the designer a first visual concept of the product itself. More importantly, it allows users to get their hands on the concept very early on, which allows the designer to focus on what is more relevant for the user. It avoids unnecessary wasting of time on elaborate and time-consuming prototypes built on what was not shown to work.
For a starting point, websites and services which try to address the same or similar problems were investigated. An "inspiration board" was created, with interesting screenshots of these websites. The idea is to use or reinvent some of their strategies in the design. The websites used were: Disqus, Discourse, Placeavote, Brigade, Votenaweb, Agoravoting/Nvotes, LiquidFeedback, Stackoverflow, Facebook Comments, Wikipedia, Google Docs, GitHub.
Then, paper prototypes were created for both concepts. Although very "raw", these are quick to build and are good enough for a user to understand and have basic interaction with the concepts. They avoid the designer focusing too early on the looks and colors, rather than the functionality.
Iterations: Test. Redesign. Repeat.
Good design should always be user-centric. In this assignment, users were involved early on, and their feedback drove the many changes that the design went through.
The first iteration was user-tests of the paper prototypes. There were two in-person tests with potential users, and one online, with a fellow student from the design course.
A strategy called Heuristics Evaluation was used. It's idea is to list some practical, common-sense principles of good design (the heuristics) and evaluating if the design complies with them. Jakob Nielsen’s 10 heuristics were used in our tests.
In this process, each time a user makes a mistake or gets confused by the design, the issue is written down along with the heuristic which was violated. For the end-users, this was done by the designer afterwards, since the users were not supposed to be familiar with these heuristics. For the test with a colleague, this was done directly by the evaluator, which was a nice opportunity also to apply the technique to other people's designs.
There was a surprising amount of feedback received, with such low effort. Both the designer and the “normal” user provided enough insights for many very necessary improvements.
With the gathered feedback from these user tests, a first wireframe of the product was created. It served as a basis for creating a web prototype, which would be used for the next iteration with users. Also, it gave a better picture for the necessary effort, which allowed for the creation of a Project Plan.
Web Prototype
The web prototype was created using invision. It is a tool which allows designers to create high-fidelity mock-ups without the need for programming knowledge. Basically, you create the visuals for the app screens, and the navigation flow using clicking areas which redirect to other screens.
A high-fidelity mock-up demands good visual design practices. Since the course asked for an app in a mobile form factor, the choice was to use Google's material design guidelines as principles for the design of an android application.
The web prototype went through two additional iterations with users. First, in-person tests were conducted with two end-users. The goal was to see if the design accomplished its goals, by asking users to perform certain tasks and observing where they struggled or made errors. Both sessions were recorded in video.
The main task which was asked was to vote for a post and write a new comment. This included the review of other people's comments before posting your own, which is likely the most unfamiliar of all the elements of the design, but also one of the most critical for it to fulfilling its role.
As expected, the review process emerged as the most problematic design element. One user struggled because he found the screen tiresome and call to actions too small. On the other hand, the same user compared it to Uber, which makes you rate a driver before getting a new ride, and felt it made sense. This means that, besides helping improve the design, these tests served as a validation for the concept.
Overall, the app made a pretty good impression on users. For the next user iteration, only the review process was redesigned, in order to make it less confusing.
Online User Tests
The final iteration was to carry out online tests with four users, using the usertesting.com platform. This service allows for the app to be evaluated by professional testers, which are paid for their time. They were not necessarily quality assurance professionals, but were nevertheless very fluent in using the apps.
They were asked to perform a sequence of tasks, including the process of creating a new comment and reviewing other users'. They did this with both the new version and the original prototype, in a sort of A/B test, although without statistical significance due to the small number of subjects. Also, the order of the prototypes could not be changed, configuring a possible confounding factor.
During the tasks, they were asked to always say aloud what they were doing and thinking. Afterwards, they were asked to answer a few less-specific questions, in order to give their overall impressions. The sessions were recorded in video and made available online.
In the end, this step was more like an easier and more controllable user test. The platform is very useful and fast. All interviews were ready by a few hours after the post.
These user tests also provided a nice validation on the relevance of the problems the app is trying to solve, and the apps potential on addressing them. Here are some actual quotes from online testers:
I think people would love to have a place to freely express their opinions without being worried about bullying from other users. (online subject B)
After seeing people argue about the current election and have a consistent back-and-forth of endless arguing and name-calling, I think so. The ability for people to vote on it, especially if it’s anonymous, can give a better idea of what people say and think, since there’s no repercussions for their beliefs. (onine subject D)
Here’s how the main screen of the prototype evolved along the way:
Final Thoughts
As a result of this design process, good evidence was provided that the problems that the app is trying to solve are important and affect many people. Additionally, continuous improvement through many iterations give confidence that the final prototype is, at the very least, a good starting point for the developing of a relevant service which does not currently exist.
This project took much longer than the 10 weeks that Coursera establishes, and also a couple of weeks more than the original Project Plan. However, each step along the way helped make sure the design was always having customers in mind, and little effort was wasted on things that might need to be discarded later. This this a crucial principle not only of design thinking, but also of innovation methodologies such as Lean Startup.
I would like to see this concept become an actual product someday. If you would too, please let me know, and share your thoughts in this post. :)
My sincere thanks to Ricardo, Juliana, Laura, Carlos and Olivia for the patience while acting as guinea pigs for this product, and for all the great insights!