Navigating Information
Learnings and reflections from CMU’s Communication Design Studio in Fall 2020
Week 1 — Tue 9/1 Course Overview
Kicking off the semester in the time of quarantine is both challenging and interesting. Especially for a class on communication design, the pandemic limits our ability to communicate the way we are used to but in the meantime challenges us to reflect on what is communication and how we can improve it for people living in this new reality. I am looking forward to taking on the challenges and exciting opportunities in this studio.
Activity 1: Exploring the appearance and mechanism of different toys
We started the first class by virtually exploring the toys our professor Stacie had laid out on her table. Someone would point out a toy that he/she found interesting and Stacie would take it to the front to let us guess how it works and when was it made. In the end, each of us pick our favorite toy. Several things I noticed from this little exploration:
- People tend to get excited about unexpected behaviors. For example, the metal piece behind the blue dragonfly caught some attention as it traveled in circles rather than along a straight path. It also made sparks while moving which was interesting to see on a small toy.
- Unconventional appearance inspires curiosity. Some of the toys have easily recognizable forms such as the pig and the seal. But it was the metal pieces that seem to resemble nothing in the real world that got us discuss a lot about their mechanisms.
- People hold assumptions based on past experiences. We all agreed that the green car would move forward or towards the direction the seats are facing. And we all knew that the wind-up handles need to be turned to operate the toys.
- Sometimes our assumptions are biased. The appearance of the pig made many students believe it was from the previous century. But it is actually made in China in the 2010s and bought in Germany.
Our reactions to the toys made me realize that previous experiences contribute much to our own mental model. This mental model dictates how we perceive information and make sense of the reality. Once something does not behave according to the rules in the model, it catches our attention and can make us excited about learning new things. Communication design should find a balance between working around people’s mental model so that people can understand what is communicated and sparking excitement for further exploration.
Activity 2: Visualizing orientation response
In the second activity, we broke out into small groups and each group had to come up with a method to show how students respond to some of the orientation question.
Our group tried to jot down common themes in the answers and assign the answers based on those themes we identified. Some themes are concrete and clear, while others are more abstract. For example for the “What do you want your job title to be?” question, we categorized answers that mentioned specific names under “Actual Job Titles” and also had a “Humor” category for those that were funny in their approach.
While doing the exercise, it occurred to me how differently people can think about one question. In answering “What do you want to do after earning your Masters degree”, some people focused on the type of things they want to make, some were more concerned with who to work for, and some talked about both professional and personal goals.
We also found that many of the answers would fall into more than one themes. And that was why we decided to use the Venn diagram in one of the visualizations.
Assignment: Investigating news resources
I mainly use mobile apps to check the news and the two apps I use the most are BBC and Smart News.
1. BBC
Coming from an international background and without knowing much about the reputation of the news resources available in the US, I downloaded several news app previously to keep myself up to date with the world but gradually ended up only keeping BBC News. It is my favorite news app because the design makes digesting information a lot easier for me than the other apps. What I like include:
- Focus on imagery. As the old saying goes, a picture is worth a thousand words. The BBC app gives a lot of weight to photographs. I find it helpful in getting a quick first impression about the information.
- Information organized in a clean grid structure. Each news lives in a single card, making it easy to jump from one to the other.
- Informative titles and succinct intros on the main page. I usually only skim through the titles for most news. The text on each card is just enough for me to understand what the story is so I can decide whether to dive into it further.
- Neutral text font and clear hierarchy. The sans serif font BBC uses is easy to view on digital devices and also seems neutral. The difference in weight and size helps people to focus on the title first and then they can decide what interest them to read more about.
2. SmartNews
SmartNews is a fairly new app. It came to the US in 2014 and I found out about it through an online article. What attracted me is that the app uses machine learning algorithm to collect most popular news across different venues and organize them into different channels. The app has a very intuitive interface with the name of the channels displayed prominently on the top.
As someone who is not particularly interested in politics, I find my self easily overwhelmed and bored by reading the headlines in traditional news sources like BBC. SmartNews lets me quickly go to different categories so I can focus on what interest me the most.
One distinguishing feature of SmartNews is that it helps preventing bias. People form opinions based on the information they are exposed to. Sourcing stories from different venues such as CNN and Fox News give users the chance to learn about different views and ideology.
Week 1 — Thu 9/3 Mental Models
Reflecting on the visualization activity
Today in class we reflected on and discussed how we categorized the answers to the orientation questions and what our take away is. In our group, we talked about how personalities were reflected in the answers and that people were more certain about events more proximal in time. Across the teams we found that many visualizations involve layering different information.And we learned that using proper methods to provide secondary information effectively is important in communicating ideas.
Readings
- Crisp _ style
Crisp pointed that the two main functions of typographic content are roles (whether the content is used as the folio or the body) and expressions (people’s response to the content). By definition roles are denotative and expressions are connotative, and together they constitute the voice. Designers have control over the role and expression of roles and expressions. Therefore, designers must consider the impact of their design, i.e. the attitude and position resulted from the typographic content in order to convey message in a responsible way.
We also discussed designer Lorraine Wild’s theory that style goes in a cycle. It starts with good design and later became mass market style before going into the cliche, embarrassment, and “it’s over” stage. Then it will be regarded as fetish and turned into a revival, making it back to be an interesting and good design again. It makes sense to me that society determines what is good design as designers’ mindsets are influenced by their social background. But I hadn’t thought about the evolvement of a style to be a loop and that something considered obsolete could once again became popular.
2. Davis_schemas
Davis also talked about the relationship between design and the society. On one hand design plays an illustrative role as it reflect the values of a society. On the other hand design takes a formative role and contribute to constructing the culture. One theory to explain this dynamic process is social schemas. Schema is the mental model we develop through our social experience and use to make sense of the things. It is important to consider the users’ mental models or what they already know in design. For example when rolling out a system update, some features from the previous version need to be kept so that users don’t feel too overwhelmed by the new features. Designers also need to be mindful of their own stereotypes, a type of schema that’s often resulted from limited information. Davis brings an interesting point that stereotype consists of a group of traits. We may automatically relate the one trait we observe to the other traits. And that is why it can be hard to get rid of.
Mental models of news venues analysis
- Focus: news venues guide readers’ attention through the content layout
To draw a fair comparison between BBC and SmartNews, I viewed both apps on my phone. The two apps take on different approaches to arrange the content layout. When you open the BBC app, the headline news immediately grabs your attention as it takes almost half of the screen real estate. Sometimes it’s the only news you can see if there are ads below it that push the other news out of the screen. As you scroll down, you can view other news listed in cards of the same size with images on the left and titles on the right. There is no particular sorting and categorization of those news stories.
In contrast, SmartNews presents all stories in cards of equal size with no headline news that immediately jumps out. It’s up to the user to decide what news is important and worth reading to them. The also helps users to quickly find their things they carer about by providing navigation tabs on the top to go to particular topics.
I found that the layout BBC uses reinforced my perception about the existing hierarchical structure and affect my general impression on how important each story is. It is clear that the headline news is what matters the most at the moment. But even for the news cards underneath, I naturally think that the ones near the top are more important than the ones towards the bottom, despite the cards are equal in size. Furthermore, because the news stories are from various topics and political news usually comprise the largest portion, it gives me the impression that there are more people care about politics than other topics.
In contrast, the equal distribution of screen space and the colorful topic tabs listed on the top in SmartNews do not make any particular story or topic appear more significant than others. Although the news is still listed from top to bottom and the topics left to right, I tend to associate those orders more with the design approach that has to deal with the limitation of the screens rather than the implied hierarchy of the stories, if there’s any.
Week 2— Thu 9/10 Napkin Sketch
Today each of us did a 3-minute live napkin sketch to show the class what we learned from analyzing the news venues and why we thought it’s important for others to know.
Drawing is not my strongest skill so I was pretty nervous before the class. To prepare, I wrote down the main points and came up with a drawing that would explain each point in detail. But when I timed myself while practicing sketching my points, I quickly realized that the illustration was too much for the time we were given. So I tried to highlight the key points to cover:
- Structure: the structure of the news venues affects how I interact with the app.
- Interact: sometimes I simply scroll down fast to read through the headlines while at other times I read the full story if it’s something I’m interested in.
- Interpret: my interaction with the app determines what news I encounter and how I interpret what’s important in the world.
- Insight: it is important to define what it means to be an informed person. And based on that we can have a design opportunity to improve how the news venues structure the stories so it has a better balance between curated and customized content.
And below is the final sketch I did in class (shout out to Procreate’s playback video feature!). Speaking while sketching to support my verbal narrative is definitely an interesting skill to learn.
It was also interesting to see the different approaches people used. I used a lot of illustrative graphics while several students only used text-based hierarchy diagrams. I found that graphic is helpful in explaining the visual elements and text is good for showing facts and can be used with arrows to demonstrate relationships clearly. I was also inspired by how some people broke down news venues into different components such as actors and content for the analysis. I thought it was a great way to make sure the research was organized and comprehensive.
Another presentation I found interesting is looking at how news resources use different pictures for coronavirus and how that would affect readers’ perception of the virus. It was a very effective way to compare a topic that’s specific and trendy. Since we have lived in this pandemic for several months and it has been a daily topic, I felt that presentation was very relatable and compelling.
Week 3–Tue 9/15 Intervention Ideas
We formed teams based on the focus in our napkin sketch, and brainstormed intervention ideas using Figma today. Our group’s focus is on the influence of medium/delivery on the reading of the news.
We started by discussing that many people especially the younger generations don’t read the news very often. Young adults including ourselves tend to scroll through the news quickly without taking a deep dive into the stories.We talked about how the lack of context in the news might disengage readers. If we don’t see the immediate connection between the subject matter and our daily lives, it’s less likely for us to be interested in reading the news. Another crucial factor is the entry point. Social media has become one of the most popular channels through which young adults receive their news feed. Oftentimes the news sources present the stories on social media platforms in a way that’s more attractive than informative.
Another topic that’s brought up is an individual’s news diet and how it may limit our consumption and perception of information. It’s easy for us to focus on subjects that we are already interested in and overlook the other things, even they may be interconnected and important for us to understand the whole picture. We think there is a design opportunity that lies in inspiring people to learn new things that are not normally on their news diet, helping them see the connections in the larger picture so they can be better informed.
To illustrate our intervention ideas, we came up with the story of Jimmy. Jimmy is a recent college grad from California who plays guitar and likes to keep up with news in the entertainment industry. He is also very interested in learning about the weather because he would receive local warnings about wildfire caused by Santa Ana winds almost every year. When Jimmy wants to find out more about the fire hazard, he would search for scientific explanations for wildfire and climate change. However, he neglects the fact that the issue is also deeply rooted in politics.
To inspire and encourage Jimmy to see the political connection, we talked about several intervention methods:
- Highlighting articles that may not be within Jimmy’s day to day news diet.
- Renaming news subjects from descriptive terms like “politics” and “business” to motivative phrases such as “things to keep you more informed”.
- Include hyperlinks to political articles in articles about the climate.
- Celebrate when Jimmy challenges himself to read other articles that are outside of his comfort zone.
Week 3–Tue 9/17 Evolving Interventions & City as a Metaphor for Digital Spaces
After we presented our intervention ideas in class, we got several interesting feedbacks. We previously focused on how to expand people’s current news diet. However, many people may not be aware of the bubble they live in so it is also important to help them be conscious of their own news diet first. We may think about how to structure the information to let people see the path they habitually follow when reading news feed.
Another question we had was how to make sure the things we suggest to add to a person’s current news diet are actually “healthy” for the person. In other words, how do we avoid “polluting” someone’s news feed? Given that the internet is no lack of misleading and sometimes false content, I can see why there’s a concern about being exposed to more news sources. A potential solution is providing feedback at the entry point, giving readers more information such as political stance and reputation of the news source.
Readings
Lynch_image of the city
The reading didn’t seem to be related to what we have been investigating until our professor Stacie pointed its link to people’s cognition. A city is a physical space with two defining qualities: legibility, the ease by which a system’s parts can be recognized and organized into a pattern, and imageability, the quality of an object to evoke a strong image in an observer. Both of the qualities can be applied to a digital space such as a news venue, where different information is structured and presented on a shared platform.
After seeing the similarities between physical and digital spaces, I realized how city planning is a helpful metaphor for thinking about the design for news sources. It helps me to think about how to provide the structure or entry point to invite people in, and how to structure the design to let people identify the overarching pattern and parts that comprise the news.
We then contextualized the metaphor by discussing the five elements that define a city image and their respective examples in the physical and digital spaces:
- Path: channels along which we move. [physical: walkway; digital:hyperlink/lines of text/white space/grid system/navigation bar]
- Node: point of focus; destination point; something we travel to. [physical: where intersections meet/building/park; digital:topics/paragraph/comment/button]
- Landmarks: point of reference; observers don’t enter it (as opposed to node). [physical: big ugly statue/flag pole/fence/street sign; digital: icon/cursor/rule line/spot colors]
- Districts: identifiable areas. [physical: neighborhood; digital: stuff in between separators/unique sub-groups/slack channels/levels of hierarchy]
- Edges: boundary. [physical: fences/rivers/railroads/streets; digital: edge of page/URLs/button arrows/end of scroll/boundary between photo and text/areas on figma]
Our Intervention — NewsBot.io
A web game that helps you learn how AI algorithms curate your news feed behind the screens.
After many rounds of discussions about what the final intervention should be, we decided to use a web game as our intervention to educate people on the role of AI algorithms in providing information and shaping perspectives.
We chose the form of a game for two reasons. First of all, games are engaging as they allow people to experience the systems themselves. The immersive experience will effectively teach people that the spread of fake news and the progressive homogenization of news diets are directly linked to the systems and the assumptions the algorithms made about us. The other reason is the accessibility of web games. It is easily shareable and may provide young adults more incentives for engagement other than learning. The game will be posted as Facebook ads to make it easily accessible for young adults who rely on the social media platform as their main news source.
Our final intervention is called NewsBot.io. It’s a game that allows the player to take on the role of the news algorithms and control what content makes it to fictional user’s news feed. The game has two rounds. In the first round, the player’s goal is to get the most clicks by taking advantage of the user’s confirmation bias and only feeding news that the user is more likely to click, no matter it’s true or fake. In the second round, the user becomes aware of the news bubble and the player’s task is to diversify the news content to help the user become a better-informed citizen. At the end of the game, the player will receive a message with information about the current state of news algorithms in the real world.
A full review of the design process for NewsBot.io can be found in our publication.
Final Reflection
Through designing the intervention for this project, I learned to be more critical about the information that’s given to me on different news venues, especially social media. I became more aware of the strategies those platforms use to influence people’s experiences and behavior. On the surface, they use visuals to guide people’s attention. On the back-end, the algorithms select what content makes it to our news feeds — and what is hidden. This role of curation gives social media a huge degree of power over our perception of the world. However, the low transparency of these algorithms means we have little understanding of how they work and how they are affecting our news diets.
As the consumer, it is important for us to realize our own news diet that’s resulted from the front- and back-end strategies as well as our confirmation bias. And in order to break out from the filtered bubbles created for us, we need to make intentional efforts to diversify the content we are consuming and the sources the information comes from. A future direction that I may want to pursue is finding out what constitutes a “healthy” news diet. It would help guide me to develop a diet that suits my needs.
