Information Navigation

An attempt to teach people to digest news with ‘a pinch of salt’.

Source: Google images

The quick sketch, September 1

Like it or not, every single one of us is exposed to news. TV, social media, newspapers, bulletin boards, people….there are many many ways for news to be told and heard. This leads to high chances of inconsistency across, and within these mediums. Also, there are other factors to blame — sponsorship, business interest, personal views, political pressure, public pressure, etc. Wait! This means whatever we hear is not the truth. That really depends on what we think is the trusth. It is almost impossible to isolate personal bias from the truth. When such is the case, how does one know what really is the ‘truth?’ There isn’t a way! However, it surely is possible to be better informed by comparing information sources and learning to distill and consume content.

Over the next few weeks, we will do just that. We will look at three very different news websites(PBS Newshour, Yahoo! news and The Wall Street Journal) and make an assessment of the long and short of how they communicate news.



  • Felt like the website was yelling at me.
  • Large image with big bold text.
  • Scrolling down, more large images with big bold text(seems like important news-headlines), and then starts a list of other news.
  • Lack of negative space between images. Looks confusing. Seems colorful because of images.
  • Sans-serif font. Informal.
  • Large colorful images, attract attention, feels like TV.
  • Text in the images-informal.
  • Page structure is mixed.
  • Images most important, that’s what grabs attention.


  • “I’m not sure what this is”
  • I noticed the images upfront. They did not feel like news but I was also drawn to the headlines on them which made them feel like news.
  • On scrolling, seems like a list of articles.
  • Black and white, safe approach. Images bring the color.
  • Sans-serif makes it seem informal. Use of bold headlines and regular sub headings seem formal.
  • Images support the text decently well.
  • Images and text are given almost equal importance and one supports the other.
  • I’m not sure. It a confused style. Maybe semi-formal.
  • Images and text seem equally important.


  • “News! This is news”
  • The masthead style made it pretty clear this was news immediately.
  • Headlines and body text. Just what I imaged news to look like, with some images.
  • Black text on white. Page closer to a newspaper.
  • Serif font, formal, we mean business attitude.
  • Small images, don’t vie for the reader’s attention. Image size proportional to hierarchy of importance of the news.
  • Very newspaper like. Images only where necessary.
  • Formal.
  • Language very fact-like.
  • Page structure like a newspaper. Works well for the mental model of news.
  • Text based news is the highlight.
  • News is the focus.

The deep dive, September 5

After a quick understanding, it is time to make a deeper analysis of the websites. Some factors to be considered are:
- Why have things been done in the way they have?
- What are the ethics and responsibility of the designer?
- Goals and interests of the company and the reader.
- Contribution of content and form.


As soon as the PBS webpage opened up, I moved my head back a little. What I saw was one large image with a bold headline. I felt like it was trying to make a statement and was trying very hard at it. Is this the most important piece of news for the hour? Day? Maybe week? It was about the presidential candidates going to Ohio to participate in their respective labour day campaigns. Seems like ordinary news, considering the elections are round the corner. Is it worth pushing news about a US-Russia deal to stem bloodshed in Syria to the second spot? However, I think I understand why news about the forthcoming elections, especially this one, is a priority over anything else — its high ‘spice’ factor. This is what reader’s want to read about(or at least PBS thinks so). I also noticed that the image is of Donald Trump only, even though the headline and the article speaks equally of both Hillary Clinton and him. Are they trying to push something? I would love to follow PBS over the next couple of months to see if this continues.

With nothing more of interest above the fold, I started scrolling. About four more similar images with bold headlines. I make the conclusion that these are the headlines for the day. Looking at the complete webpage tells me that it is a three column layout with the headline images taking up the first two. In the third column is a latest news feed. Makes me wonder what is more important — older but important news or the latest news(considering a news article from among the latest news is the most read article according to the website)? This column(latest news) is hard to be accepted as news becasue of its position, and the fact that the first piece in the column is an ad.

The page changes personality all of a sudden after the headline images. It turns to what looks like a list of news articles with an image supporting each. The articles show a glimpse of what the whole read is about, which works well to generate interest in the user and even for someone looking to scan through. The list of articles is a mix from topics, but what makes it interesting is how the list has been ‘curated’. It is called Editor’s picks. I would imagine for it to have been a list of the next most important news but it does not seem that way. It is important, but in the editor’s view. This shows that we can easily be shown only what the news channels want to show us. Never thought of it this way. I notice the saturated gray background at the bottom of the third column which has links to the respective news pieces from PBS. I wonder if they are trying to direct the reader to their TV news.

Moving my focus to design details, I loathe the headline images thrown at the reader, one after another, with no concept of white space whatsoever. The highly dense beginning to the page does not make me want to scroll down. The change in visual representation of news below the headline images make me feel like I am on another website. A modern, semi geometric san-serif font is used throughout the website for headlines as well as the content. Some may argue the use of sans-serif for content, but modern sans-serif fonts have been designed keeping readability in mind. I only wish the text was not so big, and so bold for the headlines so as to break my scanning flow.

In one sentence, PBS Newshour reminds me of a news channel on TV — An anchor is talking about something, the headlines at the bottom refer to something else, the constantly moving ticker vying for attention and the exchange rates or stock market prices. 
A hotchpotch!



I could not really form a first impression of the Yahoo! news webpage. And now, even after two days of looking at the website, I am still not able to decide what I think about it. I was first drawn to the brightly coloured ad on top of the page and quickly moved (we have taught ourselves to ignore ads) the group of images that are a part of the news. A large image with three smaller images next to it do not say news to me. However, the headline and the subheading makes it seem like news. The last column seems like what some people have said, something like a blurb, but is actually news exclusives.

Scrolling down, the page becomes a long list of articles characterized by an image and a heading and some introductory text. There seems to be no particular order or hierarchy, no category or classification. What makes it worse is that sponsored ads are hidden in between news articles and visually treated similar to the articles. Also, it features links to related articles on other online sources. Differentiating between what is news and what is not becomes a task.

On comparing the news content with other news websites, it is evident that most of it ‘unique’. The topics and articles differ from other websites. Are they even giving us latest and important news then? On inspection, most of the news on Yahoo! seems to revolve around what is trending. It looks more like gossip than news; reminds me of a tabloid. Helvetica, a tried and tested sans-serif font is used throughout the page. One word for the page — Confusing!


This is news! This is news as I know it. The centre-aligned bold masthead clearly says news. The clean division into columns, the use of scattered images, white background with the only colour coming from images and the use of text reminds me of a newspaper.

The first three of the four columns occupy news articles. The fourth column is reserved for information about the markets, opinions/polls, ads and videos. There is a clear demarcation between this kind of secondary content and the primary news. The format of representation of the news is very different from other webpages. The content is emphasized rather than the image; image does not even feature in most cases. The headline and introduction pack enough information for someone wanting to scan through the page and still understand what is happening. There seems to be all the news someone might want to read. The page feels genuine and evokes trust. It feels like an unbiased view of the world.

The only color in the page comes from the images. Use of a serif font throughout the webpage gives it a highly formal and serious, ‘we mean business’ look. Even the categories under the masthead are very straightforward. The choice of words is formal and unbiased. In one word: News.

Types with Faces, September 6

I have loved Typography ever since I was introduced to it during my undergrad. I still remember running from my Product design class to the Advanced typography class that was actually meant for Communication design students and I had opted to sit in as an extra class. It was, and still is my dream to design a typeface. Someday….

We (a team of 2 with Merich) were given a sheet of paper with three different typefaces and asked to write adjectives for them.

Sheet 1, adjectives for typefaces

This was fun! We had a good time trying to squeeze emotions out of typefaces. Its intriguing how typefaces can look aged, democratic, honest, confident, and even approachable. We went a step ahead and wondered how these typefaces would have looked if they were humans. What would they be wearing? Its amazing how one turned out to be a gentleman in a suit and another an alien!

Sheet 2 was a little more challenging as the typefaces were very similar to each other. But that did not mean we had any less fun.

Sheet 2, adjectives for typefaces

On looking closely, we realized how similar looking fonts can mean very different things. There is lot more that comes into play such as weight of the font. This time, we decided to assign professions to the fonts. Garamond was a lawyer, Dante a dancer and Times a politician :D

This led to the discussion on connotation and denotation and how it is important for designers to keep them in mind.

Presentation — behind the scenes and the day, September 13

We were told that we will be giving a presentation (in our team of two) of our analysis. Sketching, while presenting, was a mandate. The central theme is — How to help citizens become better informed consumers of news?

What happened next is a brainstorm of ideas for the presentation, spanning over a few days.

Brainstorm session

We started off writing the defining features of each of the news websites, whihc led us to the conclusion that:

  • On PBS, you SEE news
  • On Yahoo!, you TALK news
  • On The Wall Street Journal, you READ news

We felt we had a strong theme going and started discussing ideas for the presentation.

Brainstorm session

This is when we thought, why don’t we present the news, just the way news is presented! That led us me being a news show anchor and Rossa, a corrospondent at the site.

The presentation

What went right, What could have been better, September 15

After all the groups had finished presenting, the class discussed the things some of the teams did right but mostly, what we all did wrong and how we could have done it better.

A list of what could have been done better.

Re-packaging the presentation

What is now left, is to take all of the analysis we have done over the last month and package it in a way that creates awareness about news for a consumer. We started off from our idea of SEE, TALK and READ news but very soon realized that even though they were interesting observations, they meant nothing to a consumer of news. We went back to defining the true insight from our analysis and it is:

What you see, is not what you get.
Brainstorm session

We strongly felt that our analysis of the three news websites were just placeholders for the larger message — What is you is not what you get. We also realised that every news source is different. We then created concepts around these messages.

Brainstorming session

We seem to be moving towards ideas for something like an interactive ad campaign. We have 3 concepts.

  • Keeping in mind our ‘what you see is not what you get’, we thought of a physical installation where the user looks at something, maybe a controversial image that draws his attention, is attracted to it and flips it over to know more, and then finds something he was not expecting.
  • ‘Every news source is different’ led us to to a questionnaire titled “Which news are you?”, which relates the user to a news source, based on some imputs of characteristics. We wanted to send across the message — ‘Every individual is different. So is news’.
  • ‘What you see is not what you get’ led us to ‘Beware! Don’t stay in the dark’ an installation that displays our message only when a user switches on the light.

Better informed citizens, how? September 20

The big question was — How do we communicate our analysis of the news websites to citizens so as to better inform and leave them with feasible steps to take while consuming news. We realised our previous concepts had the ‘Why’ aspect of the message — Why should you read news carefully, but not how — How should you read news carefully? We worked on dialing up the ‘How’ factor and the idea of leaving them with actionable point, through the concepts.

Conceptualizing, the Why, What and How

We were also trying to establish steps that a reader can take while reading news and came up with:

  1. What kind of content?
    (News story, Someone’s opinion, A reaction, Sponsored content, Ads, etc.)
  2. What is the source?
    (Data, documents, eye-witness stories, etc.)
  3. What is the evidence?
    (Research, quotes, photos/videos, etc.)
Conceptualization, steps

Towards the end of the class, we were wondering how we can apply these steps to an effective communication material.

We discussed multiple ideas around how we could:
Tell people to read news critically and
Give them some actionable points to keep in mind for the next time they read news.

Brainstorm for ideas

Idea 1

Working on the aspect of actionable points, we thought of an interactive display that gives people examples from news websites based on their selection of news source, kind of content and evidence. The idea was to teach people to be able to find what is missing in news content.

Idea 2

in line with our message of ‘What you see is not what you get’, we thought we could show people two images (one nice and one bad) of the same person so that they understand how its all about the perspective. The same could be done with headlines for the same story written very differently.

Idea 3

Now that we had the content, we wanted to do something that creates maximum impact. Our third idea was based around murder mystery riddles. We wanted to pick a murder mystery riddle and convert it to look like a news article. When people read and read again, and answer the riddle, we wanted to ask them — if you read a riddle so seriously, why not news? This idea also aligns with ‘What you see is not what you get’.

Brainstorm session

We decided to go ahead with the third idea and work with murder mystery riddles. The riddle we have picked is:

Tom is 83 years old and lives alone in a flat. Because of his age , he is not able to move comfortably and hence most of the things are delivered to his house. On Friday while delivering the mail , postman feels something suspicious in the flat and try to look inside through the key hole and he saw a blood filled body of the old man.
FBI arrived at the scene. On the outside of flat , they found two bottles of warm milk , tuesday’s newspaper, some unopened mails and some gifts. FBI immediatly knew who the murderer was.

Who was the murderer ?

As for the medium of, we have two concepts in mind:

  • A poster that we can put up across the campus with a $500 reward for answering the riddle and ask them to SMS their answers. Once they send the SMS, we get back to them with a link that poses the question — if you take a riddle so seriously, why not news? The page will also have steps to follow while reading news.
  • The second is an ‘honest’ ad campaign for a news agency. The riddle that we package like a news story could be the first news article on their website. When people access it, they see the question and can see the answer on click. This next page will also pose the question — if you take a riddle so seriously, why not news? The page will also have steps to follow while reading news.
One clap, two clap, three clap, forty?

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