Flip: An interaction design project for helping people to break echo chamber
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Flip: An interaction design project for helping
people to break echo chamber
BY
Rong Zhao
A Thesis Submitted in Partial Fulfillment of the Requirements for the Degree of Master
of Fine Arts in Visual Communication Design
School of Design
College of Art and Design
Rochester Institute of Technology
Rochester, NY
August 10, 2021
Committee Approval Adam Smith August 10th 2021 Chief Advisor Associate Professor Director of Visual Communication Design program School of Design, College of Art and Design Mike Strobert August 10th 2021 Associate Advisor Senior Lecturer School of Design, College of Art and Design
Abstract Social media constantly instills you with the things you like and the things you are willing to believe in, even disinformation, creating an echo chamber in which users will never have other opinions. People are controlled by algorithms so that social media platforms ensure we only get a single side of every story. The personalization of social media minimizes people's view of the world and causes the division of society. My thesis explores the interaction methods to encourage people to be exposed to multiple perspectives about things by reading the same story from different sources. To solve the problem, I designed Flip which includes website, software, and mobile APP to provide users with a better experience on different devices. By using Flip, users can read two related articles at same time, which can help users to compare the related opinions. Flip brings users a better reading experience through novel interaction and smooth animations. The purpose of Flip is to help users broaden their horizons and have a comprehensive understanding of events. This project shows how Flip helps users achieve this goal. Keywords UI/UX design, Interaction Design, News Feeds
Problem and Solution In the era of big data, people think that what they see is everything and the truth. But the truth is very different. The algorithms restrict people's vision to a personal social bubble, and people passively accept information fed by social media, which creates an echo chamber(Seneca 2020 ). Why should we care about this? I did some secondary research to understand the consequences if people only look at the content they are interested in. We will be controlled by algorithms, social media platforms ensure we only get a single side of every story. The personalization of social media minimizes people’s view of the world, and also strengthens polarization and the divisions in our society. The research shows that the "related articles" function based on algorithm recommendations on social platforms can reduce misperceptions of science-related information(Scheufele and Krause 2019). The results of this research have greatly inspired my subsequent solutions and designs. My goal is to encourage people to be exposed to multiple perspectives. Before we start to make our own judgments about something, it’s better to fully understand it first, which will have a positive effect on the outcome. To solve this problem, I designed Flip, a News Feeds that help users to break the echo chamber. Flip includes a website, software and an App which meet users’ different reading scenarios. Flip will not force users to read news written by certain media. Flip helps users collect and integrate articles published by various news media, organize articles that tell the same story, and present them with card UI design. By this way, it can ensure that users can have a more comprehensive understanding of each story by viewing the reports of different media when opening any media reports. Instead of just looking at the story they want to see and believe.Each card of the article will be automatically flipped, presenting reports from different media about the same story, which make sure users can understand things from multiple angles and also compare the story's differences. When users click one card and start to read articles, articles from other sources will appear in parallel on the interface, which is convenient for users to compare and read. They no longer need to finish reading an article and then open a new article to compare by themselves. Flip is intelligent enough to help users better handle complex information and make it easier for you to compare. Users can freely and quickly switch articles on the same page to compare. With the assistance of AI(Artificial Intelligence), when the user slides the article on the left, the article on the right will automatically slide to the text fragment corresponding to the left, and the related text fragments will be highlighted and connected. Users can click on the article tags to view related or different opinions from different media. When the article on the left has two text fragments which have related articles, the user can change the screen layout on the right to split it into two parts. In order to enable users to read news comparatively on mobile phones, through design, I convert the left and right parallel layers into two overlapping layers, so that users can also compare reading on the mobile phone, switch to view related paragraphs and switch articles at will. No matter from the technical aspect or the visual aspect, Flip improves the reading efficiency for users and enhances the user experience. Design Process and Details At the very beginning of the project, I started with social media, started research and found problems. In the research process, the problem of people forming social bubbles invisibly made me care, because it happened to almost everyone who uses social media. Through further research, I have become more and more aware of the negative impact of social media echo chambers on people and society(Appendix A, page 14). A survey pointed out that algorithm-based "relevant article recommendations" on social media are helpful to reduce the misperception of scientific information(Appendix A, page 15). Inspired by the results of this survey, I designed an innovative
interactive method to "force" people to accept all relevant articles. People’s basis towards social media leads them to usually choose to read reports written by the media they want to believe, and choose to ignore or disbelieve reports written by other media. Flip is a News Feeds, it can organize all the articles written by the media about one thing together, to help users understand the comprehensive story and compare different points of view. After doing some research on other competing products, I chose the Card UI design pattern. Each card will be flipped regularly to show different media reports on the same thing( Appendix A, page 4). In addition, through research, I found that other News Feeds display recommendations of related articles at the end of the article or next to it. The problem with this is that users can’t remember the content of the first article when they read the second article, and they have to switch back to look. To solve this problem, I designed two columns on one page to present two articles( Appendix A, page 6). My design idea for the article page is to enhance the contrast between left and right through high-contrast colors. I use white and dark blue for the background. For the highlight text fragments and the connection line, I use the red and green( Appendix A, page 20). These color combinations can maximize the contrast visually. To switch between different stories, I designed the article tags attached with the connection line, which allows users to intuitively feel the connection between paragraphs( Appendix A, page 26).The red highlighted text fragment connects with the text fragment on the right side. When other text fragments with related paragraphs appear on the page, they will be marked with blue highlights. The user can divide the columns on the right into two parts through the Layout button. In the design process, I also encountered some challenges. For example, how to make users read comparatively on mobile devices? To solve that problem, I designed a new interaction way to view the related articles. When users scrolling drown, they would see a highlighted paragraph indicating it could be tab to view the second layer. Users can swipe to see all tags and switch between articles. After viewing, it’s easy to close the lower layer by tabbing the highlighted text fragment again. Although the interaction methods on mobile phones are somewhat different, the essential goal is the same, allowing users to compare and read on the same page. Animation plays a big role in interaction. In this case, After the user clicks on the highlight paragraph, the first layer will split and slide up and down, revealing the bottom layer. The motion provides a prompt to the user that helps users understand the interactive behavior of clicking on the highlighted paragraph to expand the corresponding text fragment. This is very helpful on intuitive navigation and usability(Yalanska 2021). When the user is reading the article, the article on the right will automatically scroll to the corresponding text fragment, letting the user know that the system is helping him connect with relevant views. The details of the animated interface can inform the user of the process he is involved in(Yalanska 2021). In order to verify the usability of the design, I invited 5 participants to do the test and interviewed them about their experience. 75% of tests succeed, and some participants said that they liked the function of automatically connecting related opinions in the article, which allowed them to quickly understand the core content of the article. It was also mentioned that the combination of tags and connection line of the switching article makes this interactive behavior easy to understand. Conclusion The overall goal of this research is to help people break the echo chamber and get in touch with more different perspectives. Compared with many other News Feeds applications, Flip has great potential in helping users obtain and compare diverse perspectives. It uses innovative methods to solve the problem. Through design, Flip uses the flipped cards animation to show the same story from different sources. Users can read two articles on the same page at the same time, and Flip will help users to visually connect related points of view in a highlighted way, and help users compare opinions more intuitively. Flip has a website, software and an APP, which satisfies people's different reading scenarios. On the App, Flip uses the limited space in innovative interactive forms to ensure the user's reading experience. In short, For this design problem, Flip is a feasible solution.
Appendix A: Expanded Thesis Defense Presentation
1
2
3
4
5
Two Columns
67
8
9
Two Layers
Check Articles
10What problems does Flip solve?
Collect Articles
Flip Cards
I
11Parallel
Highlighted
I
Locate Automatically
1213
14
15
16
17
18
19
20
21
22
23
24
25
26
Providing a prompt to the user
The process is progressing
27Conclusion
The overall goal of this research is to help people break the echo chamber and get in touch with
more different perspectives. Compared with many other News Feeds applications, Flip has great
potential in helping users obtain and compare diverse perspectives. It uses innovative methods to
solve the problem. Through design, Flip uses the flipped cards animation to show the same story
from different sources. Users can read two articles on the same page at the same time, and Flip will
help users to visually associate related points of view in a highlighted way, and help users compare
opinions more intuitively. Flip has a website and an APP, which satisfies people's different reading
scenarios. On the App side, Flip uses the limited space in innovative interactive forms to ensure the
user's reading experience. In short, For this design problem, Flip is a feasible solution.
The article text in this presentation is only used as educational example materials. All articles and images are owned and copyrighted by their original owners. Author: Leah Rosenbaum, Forbes Staff
Original Article: https://www.forbes.com/sites/leahrosenbaum/2021/04/16/covid-19-weekly-roundup-what-happened-with-the-johnson--johnson-vaccine/?sh=73b43fb1594e
28Appendix B: Bibliography and References
Asare, Brian. “Social Distancing (atoms).” Unsplash, October 19, 2020. https://unsplash.com/photos/z7lTC8cFKKs.
Baumeister, Mika. “A vial of Johnson & Johnson vaccination.” Unsplash, June 14, 2021.
https://unsplash.com/photos/2_BqQvSYz1I.
CDC. “Photo by CDC on Unsplash.” Unsplash, January 6, 2020. https://unsplash.com/photos/jgvTYz6UT_g.
CDC. “Photo by CDC on Unsplash.” Unsplash, January 6, 2020. https://unsplash.com/photos/62x2bhPdPk8.
Davis, Ricky. “Concrete Jungle.” tubik studio, November 28, 2017. https://unsplash.com/photos/01tsitdx3RI.
Fiedler, Paul. “Frankfurt's skyline.” Unsplash, February 27, 2021. https://unsplash.com/photos/1bPtwZoPync.
Gellidon, JC. “Photo by Gellidon JC on Unsplash.” Unsplash, January 4, 2018. https://unsplash.com/photos/OjD56CVZBNY.
Mowinkel, Brandon. “America.” Unsplash, February 21, 2017. https://unsplash.com/photos/H2b1a5WNSW0.
McEvoy, Jemima. “Fauci Predicts J&J Vaccine Will Be Back This Week—But With New ‘Warning’ Or ‘Restriction’.” Forbes,
April 18, 2021.
https://www.forbes.com/sites/jemimamcevoy/2021/04/18/fauci-predicts-jj-vaccine-will-be-back-this-week-but-with-ne
w-warning-or-restriction/?sh=3e5d6e452507.
Nural, Hakan. “covid-19 vaccine stock photo.” Unsplash, December 18, 2020. https://unsplash.com/photos/YCVUR2JgfHA.
Nural, Hakan. “covid-19 vaccine stock photo.” Unsplash, December 17, 2020. https://unsplash.com/photos/wnSEwHMhxho.
NASA. “Ocean clouds seen from space.” Unsplash, November 5, 2015. https://unsplash.com/photos/yZygONrUBe8.
Napo, Mat. “Photo by Napo Mat on Unsplash.” Unsplash, March 13, 2021. https://unsplash.com/photos/At-LUvX6Eto.
Napo, Mat. “Photo by Napo Mat on Unsplash.” Unsplash, March 13, 2021. https://unsplash.com/photos/1moqJf2GVpo.
Napo, Mat. “Photo by Napo Mat on Unsplash.” Unsplash, March 13, 2021. https://unsplash.com/photos/pIJ34ZrZEEw.
O'hayon, Julia. “2017 Apple products unboxed.” Unsplash, April 11, 2017. https://unsplash.com/photos/Bs-zngH79Ds.
Rosenbaum, Leah. “Covid-19 Weekly Roundup: What Happened With The Johnson & Johnson Vaccine?” Forbes, April 16,
2021.https://www.forbes.com/sites/leahrosenbaum/2021/04/16/covid-19-weekly-roundup-what-happened-with-the-joh
nson--johnson-vaccine/?sh=713cb1d0594e.
Seneca, Christopher. “How to Break Out of Your Social Media Echo Chamber.” Wired, September 17, 2020.
https://www.wired.com/story/facebook-twitter-echo-chamber-confirmation-bias/.
Scheufele, Dietram A, and Krause, Nicole M. “Science audiences, misinformation, and fake news.” NCBI, January 14,
2019. https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6475373/.
Sukoff, Joshua. “The United States Capitol Building.” Unsplash, November 26, 2020.
https://unsplash.com/photos/SYHi8oX0JC8.
Sikkema, Kelly. “Two kids standing side by side wearing masks.” Unsplash, October 12, 2020.
https://unsplash.com/photos/RYABMCLP7aM.
Space X. “Satellite over the coast.” Unsplash, April 9, 2016. https://unsplash.com/photos/VBNb52J8Trk.
Yalanska, Marina. “Animated Interactions. Motion on Purpose.” Accessed August 1, 2021.
https://blog.tubikstudio.com/animated-interactions-motion-on-purpose/.Appendix C: Website https://www.rongzhaodesign.com/flipped-world
You can also read
