Tone Tagged Commenting

Team Harmony Hacktivists: Alex McElravy, Emily Brozeski, Tessa Datte

 

Hacking4Humanity is a hybrid tech and policy hackathon focused on countering online hate. This year, areas of focus included disproportionate impact on marginalized communities and creating online social cohesion. Our presentation won Runner’s Up of the Common Good Award!

Our team, the Harmony Hactivists (Emily Brozeski, Alex McElravy, and Tessa Datte), designed a comment feature that focused on expressing empathy by enabling a person to add a tone tag to convey their intent within each comment. 

Tone tags are short abbreviations appended to the end of an online message that express the delivery of the message in a digital space where it is hard to explain cadence or inflection.  

We aimed to tackle this question: how might we promote social cohesion through understanding others without disrupting the current patterns of use in social media?

As UX designers, we want our designs to be informed by people. To do this effectively, we conducted research gathering secondary reviews, experiential feedback, and an ethical perspective. First, We found that online hate involves a participating audience prompting us to explore our human-computer interaction in how we convey social approval, affirmation, and sociability to our online peers. Second, most people acknowledged the importance of speaking up yet many admitted they struggled to report or speak up themselves; reporting that they feel powerless in online echo chambers. And third, we took into account that speech is emotionally driven and can cause intentional or unintentional harm. Ethically, this is important to consider how a variety of speech impacts users.

From our research, we were able to dig deeper into the problem of online hate which is reflective of our real-world environment. We defined the problem as:

 

Social media users need a reminder that comments are opinions with varying delivery because people who comment with misunderstandings can perpetuate harmful and uneducated debates.

 

In our understanding of this scope of the problem, we recognized the opportunity to allow the user to express empathy through the introduction of a tool that supports and empowers the understanding of individual communities. Our hope was that a tool that expresses intent could help defuse hateful speech or at the very least provide background knowledge on a person’s stance in an interaction. 

Our prototype allowed the user to write their comment and select a tone tag from a pop-up that helped convey the delivery of their message to other commenters. Once sent, it included an abbreviated tone tag next to other interaction elements of the comment section. When the abbreviation icon is clicked, a drop-down of the size of a comment displays the meaning of each tone tag that the sender of the message chose to attach. The drop-down also included a short blurb that challenged the user to consider their role in online interaction and the use of comments. 

Photo of three students in Duquesne University's Gumberg Library from a video / Text on image: A tone tag indicates the attitude or delivery of a comment. Select a tone tag to describe the intent of your comment. / /gen can be used when commenting an authentic statement or asking a genuine question. / /pos can be used when commenting in a positive way or indicating positive connotation. / /s can be used when commenting the opposite of what your words literally mean. / /nm can be used to affirm a person's emotional stance in an interaction. / /rh can be used to express dramatics or make a point rather than seek an answer. / /srs can be used when communicating earnest consideration. Photo of three students in Duquesne University's Gumberg Library from a video / Text on image: so cute! love it!/gen / Isn't Gumberg the best!?/rh / Love the colorful markers! They are too cute./pos / /pos means positive! reminder: online comments are opinions used to create social interaction & reinforcement. As part of the participating audience please consider your role in this. / 5th floor is where it's at!/li

Our design attempted to be inclusive of our communities and the roles our social platforms require us to take on. For commenters, mitigating dialogues that trigger negative responses takes an active step to counter online hate. For observers, providing this empathy to better understand a person’s viewpoint allows them to still participate and create in this shared space despite differing perspectives. For communities, tone tags empower people to participate in environments that may have been polarizing without the shared understanding of the inflection of a message. And finally, for outside stakeholders, tone tags are an opportunity for large business partners to give weight to the importance of existing hate speech that surrounds us. 

We understand our initial iteration has significant considerations that in its current state are left unexplored. With more time we would tackle this by conducting user feedback on the wording of how each tag was explained as well as the wording of the dropdown reminder. In doing so, we hope to account for some of the unintended consequences that arise from emotionally driven statements.

Hate speech and its impact stifles speech within a community, influencing user participation and exposure. Our goal was to bring awareness to the fact that our online experiences are reflective of real-life interactions. Our tone-tagged comments aimed to create empathetic understanding between commenters in order to foster unity and authentic curiosity in digital spaces.

 

Figma Prototype: https://www.figma.com/proto/yxCCjKzjnywcvbuPfrei28/Hackathon-2024?node-id=123-5469&starting-point-node-id=72%3A2665&scaling=scale-down&mode=design&t=FnPDuHDJ2QmujTbZ-1 

Presentation: https://www.canva.com/design/DAF8y3kZo0M/Nh-kDjxQwxcRgsstJ2m1uw/edit?utm_content=DAF8y3kZo0M&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton