Navigating Information

MDes/MPS CD Studio Fall 2016: Project 1 Process Documentation

Project Brief/Introduction

Willow and I will be analyzing three news sources (NPR News, Google News, and CBS News). We will then find a way to visualize our findings and analyses in a “mental model” that we’ll present to the class. From there, we will use what we’ve learned to create some kind of guide that explains how to become a better informed citizen.

First Impressions

Home pages for NPR News, Google News, and CBS News

On the first day of analyzing these websites, I can already tell this is going to be a challenge to think objectively because I already have so many perceptions of these different news outlets. I’m sure some of the notions I have will prove accurate through this analysis, but still, it’s difficult to be sure I’m tossing aside anything preconceived and looking at these with relatively fresh eyes.

At first glance, each of these sites seem to have very different purposes. NPR News is clean, simple, and seems curated, not to the individual but to some “type” of individual that is their audience. Google News is the opposite. It’s goal appears to bring “top” or “trending” news to any individual, allowing for users to set preferences. It’s also more of an aggregator of news than an actual media outlet, which fits the visual language of the site. Knowing what little I know about Google and its algorithms, I understand that Google likes to think it knows me. It want to give me what I want to see the second it appears, whereas NPR News is and feels like more of a “slow news” source. Although it is still timely, it’s not as much about breaking news as it is about

Layout, Hierarchy, and Type

Organization of NPR News, Google News, and CBS News

After noting my initial impressions, I sketched out the basic layout of the three websites. Both NPR News and CBS News give prominence to a sort of cover story that makes up most of the page before scrolling. Google News does set apart a top story from the rest, but the difference is minimal. NPR News and Google News both employ a simple one-column scroll through the stories, whereas CBS makes things more complicated with multiple columns (and has a sort of patchwork quality that , sections of interest, and Twitter widgets on the homepage. While CBS News has many more type styles going on, NPR and Google News have fewer styles.

Both NPR News and CBS News make an effort to direct you to other content they produce. NPR has a live radio player in the top right and also shows large radio ads for their radio shows directly under their cover stories. CBS News has live TV and other TV segments in the right column, they also use fill the screen with ads for their TV dramas/other shows.

Navigation

CBS News Top Navigation
NPR News Top Navigation
Google News Top Navigation

Navigation clues us into various topics the sites find important and believe their viewers find important. CBS covers US news, world news, politics, entertainment, health, “MoneyWatch”, “SciTech”, Crime, and Sports. NPR, on the other hand includes some similar topics but also regularly covers Race and Culture. Google has very little top navigation; it simply allows users to switch “editions” of the news and to personalize what they are getting from Google News.

Language and Content

NPR covers topics from politics to health and food news to the election and more. Their breaking news is released in a column called “The Two-Way”. All topics are covered with very neutral, even language. They seem to go through a lot of effort now to show any emotion in their language.

CBS, on the other hand, covers a lot of campaign chatter and breaking news. Headlines are sensational, carrying emotional language. Given the election season currently, a high percentage of the articles are about the the candidates and their comings and goings. CBS has feelings about the news and is not afraid to express outrage, dismay, or excitement.

Google News pulls all of its stories from other news sites. All of the language and imagery are pulled from these other articles. You can filter the news in a number of ways, however. You can look at “top stories” and stories suggested for you. You can also filter by trending topics. All of this information is constantly updating and reshuffling throughout the day, likely based on traffic patterns and what the “people of the Internet” are discussing. But how the algorithms work exactly is really a big, black box. I can only really guess what they are doing and how they are working

Some Key Findings

  1. These websites tell you what they want you to get out of them. For NPR News, that’s well-reported unique stories that will make you a better, more widely informed person. For CBS, that’s what’s “breaking” and what’s happening as it’s happening. For Google News, it’s the top stories, the stories you’ll most be interested in, and ALL the news outlets’ perspectives.
  2. Image choice creates tone. As much as some news outlets want to appear unbiased, photos (which some might think are more unbiased) tend to be charged with emotion. For example, when writing about Hermine, an image of devastation, the storm in process, a weather map, a beach with people on it… All of these have very different tones, even if the article’s language remains rather even.
  3. The navigation speaks to what the organization finds important in the world today, or to what it believes it’s audience finds important. You find a tab titled “Race & Culture” on NPR News, but you find “Money Watch” and “Crime” on CBS News. These remain static from day to day, whereas Google News’ side navigation is constantly changing based on the news and what it knows about you.

Connecting with Willow

Our notes (on the far right) compared with the findings of other groups

Willow and I came together to consolidate our thoughts on the three news outlets. We began by taking notes on the visual and verbal elements we perceived on the sites. After we had covered all we had seen thus far, we tried to find some descriptors that we could use to explain the character of these sites:

  1. NPR News: neutral, curated, reported
  2. CBS News: evocative, BREAKING, organized chaos
  3. Google News: trending topics, customizable, aggregator

Creating a Mental Model

As we were creating our mental model, we decided to focus on three categories: layout, hierarchy, and content/language. We felt we could cover most of the visual elements that we felt were contributing to the character of these news sites as we described earlier.

Our Script

When we were given the task to analyze the news from three different sources, two questions popped into our heads: How does the news affect us? How do we affect the news?

So looking at the examples of CBS News, NPR News, and Google News, we’ve characterized our general impressions of these three websites. CBS News as the “sensational newspaper”, NPR as the “balanced, curated blog”, and Google News as the “algorithmic aggregator and search engine”

There’s a lot we don’t know about why these news outlets present the news in the ways they do, what sorts of information they are using about our patterns and behaviors. But what we can look at is what these news outlets are doing that gives us these impressions.

So where do these visual and verbal impressions come from? We’ve identified three characteristics that contribute: (1) Layout, (2) Hierarchy, and (3) Content/Language.

Layout —

  • CBS (CHAOTIC): Multi-column, patchy, chaotic, shifting grids, eye keeps moving, non-news content mixed in with new content (like a newspaper with columns mixed in with ads)
  • NPR (NEAT): Neat, a lot of space for each news entry, relaxed, eye has a more linear path down the page, You see fewer results “above the fold”, infinite scroll, bloggy
  • Google News (ORDERED): Dense, Long line length, A lot of results, you see more “above the fold” (many pages of news, like search results)

Hierarchy —

  • CBS (HIGH): Many text styles, bold and thick headlines vs smaller subtitles, lots of different sizes of images, especially of faces showing emotions
  • NPR (MEDIUM): A balanced amount of hierarchy, just enough to differentiate what is “most important”, hierarchy enforced by the spacious layout
  • Google News (LOW): Small text, small images. Only the top story is given emphasis, but even so it’s only slight

Content/Language —

  • CBS (“BIASED”): Sensational stories, and sensational language. Stories about crime and kidnapping, shocking tales. Ryan Lochte: “punished” and “drunken” telling us what kind of attitude we should have toward Ryan Lochte, includes an image of him in the pool, not smiling, looking somewhat villainous
  • NPR (“BALANCED”): very matter of fact and neutral language. Stories with a lot of variety from global news to health news, from breaking news to longer researched pieces. Images are more contextual. Ryan Lochte: Neutral language: “Suspended” “His behavior” Basic image of him smiling
  • Google News (“UNBIASED”): Trending stories, multiple sources, constantly changing and updating. Ryan Lochte: linking to NPR’s story, but also everything from TMZ to E! Online to Bloomberg. You feel like it’s unbiased because it aggregates so many sources, but we don’t know what goes into their algorithms or what makes them promote one source over another

For a site like Google News, you feel like it’s unbiased because it aggregates so many sources, but we don’t know what goes into their algorithms or what makes them promote one source over another. What’s the difference between a site like CBS that makes its biases clearer and a site like NPR that promotes a facade of neutrality with their emotionless language and a site like Google News where you can barely see the evidence of human touch?

We can only see what we see. But we don’t know why we’re seeing what we’re seeing. We don’t the mechanisms behind Google’s algorithms. We don’t know why CBS intersperses so much TV content with their news content in such a chaotic way.

We can notice, over time, how these different news sources make us feel about the news and the world. We can begin to hypothesize what the impression these news outlets are creating is doing to our brains. If you only read one news source, how does that alter or shift your view of the world?

How can our view of the world be shaped…

  • By the more chaotic organization of a site like CBS News?
  • By the emotionless neutrality of the headlines on a site like NPR?
  • By the aggregation of trending topics presented like search results on a site like Google News?

If we begin to analyze what these news sources are doing and consider carefully our responses and our thoughts as we consume all of this news, especially from outlet to outlet, we can hopefully become more critical readers of the news and better informed citizens of our communities.

Some feedback on our presentation:

  1. The abstract diagrams convey some of the information but maybe not super clearly and may be too small.
  2. While the intro and conclusion were strong, the fine points supported those things were lost in the middle.
  3. Presentation was well structured and clear, regardless.
  4. The keywords written on the board were a good idea but not executed very well.
  5. We synchronized drawing and talking well, mixing drawing while talking and drawing while the other is talking.

Exploring What It Means to Be Informed

Willow and I began thinking about what it means to be informed and how you get there more conceptually. We started by drawing visualizations on the board (gaining more info as a process of drilling a hole that gets wider and deeper) and crafting a small narrative of a man, Mark, who gains understanding as he allows his perspective to shift:

Meet Mark. He doesn’t know anything about anything. He’s not informed. Does that mean he doesn’t care? Nah, it doesn’t. Mark cares about things. He just doesn’t know all that much about the things he cares about. Mark cares about poverty. He cares when sees the homeless man outside of his office every day. He cares enough to give a dollar or so to this man once in awhile. He feels good when he does this. He feels like he’s helping. One day he takes a different route to work. He sees another homeless person on the other side of his office building. In that moment, his field of vision grew…

Our first idea was to create some kind of interactive website or animated story of Mark as a how-t0.

From this we asked a few questions of ourselves:

  1. Is the point when you realize you are never going to be content the point you are really an informed citizen?
  2. Is there any value to being informed if you don’t take any action?

Creating Specific How-To Steps

To start developing “steps” we took inspiration from knowledge hierarchy. These were the steps we created:

  1. Tradition: your previous knowledge and experience, stuff that is passed down to you
  2. Authority: reputable information sources
  3. Self-Formation: synthesis
  4. Experimentation: breadth of action (which could then be followed up with going deep and getting embedded)

We also thought a bit about the relationship between knowledge/understanding and action/experience to see how the might develop some sort of reinforcing and growing loop. Additionally, we considered space and time — where those factors might fit in to our model.

From this we created our second concept, which would be a game with cards that would take you through these steps and a desk item that would visualize the progress over time. But we decided that we might be able to something like this digitally so…

First Project Pitch Statement

We consolidated our work thus far into a statement that would explain our project:

Ken is an app and pendant (physical object) that helps users accumulate understanding and experience related to a topic of their choice, as well as visualize their progress in multiple ways. Through an near-infinite series of digital cards, the app takes users through four steps in accumulating this understanding:

  1. Worldview. First, users work to understand their own biases and preconceived notions, and any other baggage that they might bring to this chosen issue. The cards help users focus their attention to a number of factors that have shaped their understanding: their families, their communities, their past experiences, etc.
  2. Authority. Next, users begin to look outside themselves for information to consider and collect diverse perspectives. The cards nudge them to think about their chosen issue along both time (present-day and historical contexts) and space (community, nation, and globe).
  3. Synthesis. This level of cards helps users make sense of all the information they are collecting to begin forming and re-forming an understanding of their chose issue.
  4. Action. Given this new and developing understanding, the action cards push users to engage with others on the issue and have real-world experiences that can aid in their understanding.

Users swipe through the cards and choose and complete tasks. As they work on tasks, they will add their learnings and insights to their trove of knowledge. They can also view visualizations of their knowledge through time and space as well as view more detailed analysis. As the app grows, users working on similar issues will be able to share knowledge using near-field communication.

The pendant is chain or ring with many circles on it. Each circle represents a piece of knowledge (just like on the digital visualizations). These circles are enabled with a radio frequency that communicates with your smartphone (Near-Field Communication, NFC). As users sort through information on their device, they can light up different circles (each of which has LEDs inside) to sort through the pieces of knowledge in a more physical and tangible way.

Revised Pitch Statement

We decided that we might be forcing the physical aspect of this (and also might not have enough time to complete it) so…

Ken is an app that helps users accumulate understanding and experience related to a topic of their choice, as well as visualize their progress in multiple ways. Through an near-infinite series of digital cards, the app takes users through four steps in accumulating this understanding:

  1. Worldview. First, users work to understand their own biases and preconceived notions, and any other baggage that they might bring to this chosen issue. The cards help users focus their attention to a number of factors that have shaped their understanding: their families, their communities, their past experiences, etc.
  2. Authority. Next, users begin to look outside themselves for information to consider and collect diverse perspectives. The cards nudge them to think about their chosen issue along both time (present-day and historical contexts) and space (community, nation, and globe).
  3. Synthesis. This level of cards helps users make sense of all the information they are collecting to begin forming and re-forming an understanding of their chose issue.
  4. Action. Given this new and developing understanding, the action cards push users to engage with others on the issue and have real-world experiences that can aid in their understanding.

Users swipe through the cards and choose and complete tasks. As they work on tasks, they will add their learnings and insights to their trove of knowledge. They can also view visualizations of their knowledge through time and space as well as view more detailed analysis. As the app grows, users working on similar issues will be able to share knowledge using near-field communication.

Our wireframes and user flow

Final Project

Ken is a note-taking and tracking app that prompts the broad and deep exploration of a topic of that is of interest to the individual using it. When thinking about what it means to be a more informed citizen, Willow and I thought about a few things: (1) We wondered if it matters how informed you are if you don’t ever take action, and (2) we wondered if, based on some conceptual model as to what it means to be informed on a topic, we might be able to create some sort of non-prescriptive tool that would help people in their personal goals to become more informed. So that’s where Ken comes from. Ken is for self-motivated people who are passionate about a specific topic and really want to become more informed in an individualized yet directed way.

So we started thinking about what problems this group has and what tools they might currently use. Ken is suited for people who have an idea for or passion about a topic they’d like to know more about, but really have no idea where to start or how to understand their progress in becoming more informed. You could just use a notebook and fill it up with gathered information, highlighting and flagging important bits. But you wouldn’t be able to visualize or understand your progress beyond simply filling the notebook and you’d have to completely direct yourself in your discovery of the knowledge. And this is where Ken can help.

When you use Ken for the first time, you’ll be asked to pick a topic that you’d like to be more informed on. Then you’ll be taken to your home screen. Your visualization will be a flat grey circle, because you haven’t yet added any learnings yet.

To find places to start in growing your understanding, you can swipe through different prompts which fit into four categories based on our four steps toward becoming more informed. These steps are based on a sort of conceptual model of “becoming informed” that we developed. The first is understanding your own worldview based on the issue. This means getting to know your preconceived notions, biases, and any other baggage you bring to the issue. These cards help you focus your attention to a number of factors that have shaped your understanding: your family, your community, your past experiences, and more. The second is authority. Here you begin to look outside yourself for information to consider and collect diverse perspectives. These cards nudge you to think about your chosen issue along both time (present-day and historical contexts) and space (community, nation, and globe). Third, synthesis cards helps you make sense of all the information you’re collecting to begin forming and re-forming an understanding of your chosen issue. Fourth, given this new and developing understanding, the action cards push users to engage with others on the issue and have real-world experiences that can aid in their understanding.

Once you find a card you like, you can begin taking notes on that card. If you find something you’d like to add as a learning, you can highlight that text and tap to add it as a learning. A modal will pop up where you can choose a space that this learning relates to (your community, nation, or globe), as well as a time or a year. You can also add custom tags. For example, if you are discussing gender, you may want to add a specific tag for learnings about reproductive rights.

As you collect learnings on your chosen topic, your visualization will grow, representing your progress in becoming more informed on this issue. Now you are able to see this growing understanding in a way you’ve never been able to before.

Here are a few other considerations we’ve explored while working on Ken. (1) We’ve developed some wireframes for a newsfeed of you and all your friends growing your understandings and adding learnings but we haven’t fully explored all of the possibilities in how users might share learnings with each other and help each other become more informed. (2) We also wonder how Ken might be incorporated within a browser, so you might add learnings to Ken directly from an article or webpage.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.