News Media : Joanna, Marina and Ruba
For assignment #2, we selected the News/Media genre to analyze based on the following approach:
- Selected 5 websites from the news/media genre and analyzed each separately based on layout, design and usability.
- The same 5 websites were compared against each other using different criteria to define similarities and differences.
- Conducted effectiveness evaluation to define opportunities and room for improvement.
- Performed persona and audience analysis
Analysis of the News/Media Genre:
Layout – Each page on the site is structured in the same way, with a visual hierarchy that starts with six horizontal (left to right) lines of logos that include associated news brands and social media outlets (namely WordPress), a search bar, a master tabbed menu in blue, a large banner ad, and three spotlighted news stories. Underneath the six horizontal lines are three vertical columns (top to bottom) that include ‘Quick Links’ in the first column, video clips and article links in the second column, and ‘Top Trending Topics’ interspersed with advertisements in the third. Underneath the three columns are 12 horizontal (left to right) lines of video clips, key words, advertisement banners and links to information about CBS. The layout is similar to other news sites, mainly because of the master tabbed menu with columns tucked underneath:
Design – Each page of the site is a hodgepodge of topics, graphics and links. CBS’ standard font palate is a blue, white, and black. The content is densely packed on the page, which probably initially overwhelms new site visitors. It is pretty easy to tell what parts of the page are advertisement because of different font and colors used. The website does use white space, but the many different sizes of font and box shapes make it easy to get lost. All in all, this website is more haphazard with its mix of text, graphics and media compared to the other news sites analyzed:
Usability – Each page does not consolidate its content to one screen. Actually, a visitor must scroll down for quite a while before the end is reached. Put simply, it’s a lot of work to review all of the page’s content. The interface is somewhat intuitive, as it highlights the chosen tab in white and shades the other tabs in blue. It uses a common audio icon to distinguish different media types.
Layout – Each page on the site is structured in the same way, with a visual hierarchy that starts with three horizontal (left to right) lines of the Aljazeera logo, the headlining story, and two-row tabbed menu with a search bar. Underneath the three lines are two main columns (top-down, left to right) with editorial links and corresponding video clips and featured bloggers with their picture and a link to their latest post. These two columns eventually morph into three columns, mostly with the same type of content and the addition of a “What’s Hot” and Facebook lists. Unlike CBS NY, it is not clear if this site uses WordPress or other blogging platform:
Design – Each page of the site is a clear organization of video clips, editorial links and a few advertisements using standard font palate of orange, white, black and blue. Although each page contains a lot of content, it’s probably not as overwhelming when compared to other news sites like CBS NY. The page does not display a lot of obvious advertising, unlike CBS NY. The website’s use of two main columns for the bulk of the page is easier to navigate than CBS NY’s three columns, which makes this site more enjoyable to review.
Usability – Each page does not consolidate its content to one screen and requires the visitor to scroll down for quite a while before the end is reached like the CBS NY news site. Because the page is better organized and uses more white space, it’s less work to review the site’s content compared to CBS NY. The interface is intuitive with play signs in the middle of pictures to signify video. However, the site uses orange computer icons next to article links to signify… something. This is not a standard icon and when I clicked it I was brought to the editorial:
Layout – Each page on the site is structured in the same way, with a visual hierarchy that starts with six horizontal (left to right) lines of the WordPress, CNN logo, CNN’s master tab menu, Anderson’s logo and picture, a line of video clips, and an un-tabbed sub menu for Anderson’s topics. Underneath there are two columns (top to bottom, left to right). The first contains the headlining stories and the second is “About this show” and other social media links that include a running Twitter dialog. Like CBS NY and unlike Aljazeera, this site is clearly powered by WordPress:
Design – Each page of the site is a clear organization of video clips, editorial links and *zero* advertisements (or at least that we could tell), unlike the other news website studied in this deliverable. Anderson Cooper 360’s standard font palate of red, white, light blue, black, and dark blue was a little inconsistent in style, color and size. Still, since the page wasn’t as densely packed as CBS NY and Aljazeera, it didn’t make reading the site difficult. The website uses two main columns for the bulk of the page similar to Aljazeera website’s layout in that it is easier to navigate than the CBS NY website with the three columns, which makes this site more enjoyable to review. The running Twitter feed makes the page feel like a community, this is a feature that is missing from CBS NY and Aljazeera.
Usability – Each page does not consolidate its content to one screen and requires the visitor to scroll down for quite a while before the end is reached like CBS NY and Aljazeera. Because the page is organized and uses (much) more white space with large picture graphics, it is easier to review. The interface is intuitive with play signs in the middle of pictures to signify video, much like Aljazeera, but with the bonus of a video adjustment/time bar that includes a volume, pause and expand icons:
Layout – Each page on the site is structured in the same way, with a visual hierarchy that starts with five horizontal (left to right) lines of the blog platform’s untabbed menu (which seems like WordPress), the Huffington Post logo, a search box, master tab menu, a sub-untabbed menu, a link to the latest story, and an enormous headlining story. This is a quite different approach compared to the other news sites reviewed, because the others don’t give their feature story the entire horizontal run of the page. Underneath the headlining story are three columns (top to bottom, left to right), which all seem to contain the same type of verbiage, video clips and advertisements. Although this site clearly is powered by a blog platform, it doesn’t say which one:
Design – Each page of the site is a clear organization of video clips, editorial links and a few advertisements, like Anderson Cooper 360 and Aljazeera, but unlike CBS NY. Huffington’s standard font palate of green, white, light blue, and black was very consistent in style, color and size. This site had a density compared to Aljazeera. The website’s use of three main columns for the bulk of the page identical to CBS NY’s layout. The stories on the homepage didn’t have very good organization as the topics ranged from Madoff to Fashion, without headlining categories.
Usability – The pages do not consolidate content to one screen and require the visitor to scroll down for quite a while before reaching the end as we have observed with all other news sites reviewed in this post. The larger images and more editorial text under the links with lots of white space make the page difficult to review. Also, since the page content isn’t categorized very well, it is hard to select a desired topic by simply scanning. The search bar up top is necessary to quickly find a specific topic.
Layout – Of the 5 websites we are examining today, this is the only website which takes advantage of the margins of the page and uses that space for major advertisement opportunity:
Design- At first glance, the site is designed in a manner that will enhance the “local experience” for visitors. It looks dynamic, and content-intensive. The highlighted button of “listen LIVE” clearly defines that it’s a radio website. The navigation bar on the top is well positioned for users to target intended content, but the information on the homepage is a bit disarrayed, especially the slightly cluttered feature images could easily distract viewers.
Usability- The overall mix of online and offline broadcast is designed to better serve its local community. It is very active in creating social media connections and uses multiple technologies such as Email register, RSS, while the whole website runs on WordPress.
Comparison Across the 5 Websites in the News/Media Genre:
- High-level layout: All 5 media websites follow the same high level structure, where the news are listed in what looks like a rectangular newspaper going down the center of the homepage with the margins left either blank, or in the case of both CBS website, are used for additional advertising space or visual elements.
- Logo Placement: Either top right corner, or top center (as in the case of CNN and the Huffington Post) seem to be the most prominent placements for the logo. Visual tracking research has shown that readers’ first look at the top right corner for print or online material. But in general, the logo is the hero of the entire design and the most noticeable element. In the case of Aljazeera and The Huffington Post, the logo is paired with a slogan or descriptive title.
- Categories: While the categories may vary in the order of genres, all 5 sites share the horizontal banner format which calls out the clickable categories across the top of the page.
- Spot Lights: With the exception of CBS New York and the Huffington Post, all other sites use a rotating spotlight approach to highlight top stories of the day and headlines.
- Search Bar: While the search bar is clearly placed high top of page, its placement varies between left, right or center placement. With the exception of Aljazeera, all other sites’ searches are powered by Google!
- Scope and scale: It is clear that there are 2 distinct groups in this genre. The first group formulates content focused on a strictly business theme (such as CNN, Aljazeera, and The Huffington Post). In this group, the sites are available in multiple languages and there is a clear absence of advertisement and localized roots. The second group is websites that are local, displaying promotional offers 3rd party logos of groups (such as the 2 CBS websites). In addition, the latter doesn’t have multi-language capability and instead does display the local weather widget.
News Media Effectiveness:
In our analysis we saw that even if these news websites share a lot of common elements such as style and tone, there are some differences that make some sites more effective than others from a communication and readability point of view. Some of the key elements that improve effectiveness are:
Menus: In general, news genre sites tend to condense a lot of information together making it very heavy and tiring to read. Main menus at the top of the page are particularly effective in these websites. In this sense, even if the Anderson Cooper´s blog is more visual friendly, it is more difficult for users to find particular information or post as its main menu refers to the CNN site.
Sub menus as “most popular news”, “quick links”, “featured” and so on all give the user the opportunity to find the desired information outside the main menu. This is also improving the accessibility to the information. However, these menus have to be highlighted from the other sections of the websites or linking to relevant news or information to be truly effective.
Colors: The bigger the color contract used in the web page, the more effective and the easier it is for visitors to read content. If we compare Aljazeera website with The New York Times we can see that the different colors and fonts make it easier to read and identify the important information.
Images: Usually, images can express a deeper meaning and persuade more than a text in a heavy environment. In this genre, the use of images could also make it easier to read while at the same time attract more of the user´s attention as is the case with Aljazeera.
Background: For this content-heavy genre, a white or light background produces a sense of cleanness space. An image background as the Anderson Cooper website can be distracting for the user from a visual point of view.
Social & Multimedia Elements: Social Media buttons, icons, videos, comments and multimedia content as podcasts and videos engage their audience, keep them coming back to the site, and extend the relationship outside of the website. Since the goal of the news sites is to keep their readers well informed (and sell advertising), these content produce more page views, more time spent on the site and more engagement on social media platforms.
To sum it up, news websites that are cluttered and heavy in text are not very effective. Using images instead of long texts, different menus and submenus and different colors and fonts to highlight sections improve the reader’s experience.
Persona and Scenario Analysis:
Joe is a middle aged male who lived in the U.S. all of his life. Currently, Joe lives in Renton, WA and has watched or heard lately (and via several media outlets) news about recent developments and uprising in Syria. While Joe follows local and national news closely, he can’t place Syria on a map. Following international news isn’t his thing, especially when it comes to the Middle East. He wakes up on a Saturday morning, prepares his usual cup of coffee and grabs his laptop determined to find out what is going on in Syria.
Joe’s quest to learn about Syria:
The Huffington Post:
Joe decided to start his search for information on Syria at his favorite online news outlet, The Huffington Post. After typing in the URL, the website loaded quickly and Joe’s eye was immediately pulled to the familiar forest-green horizontal menu and the enormous black and bolded headline “WHEN THIS IS GOOD NEWS:”
Joe thought he would have to dig a little for news on Syria, since most Huffington articles are about domestic issues. Still, he decided to try scanning the headlines first just in case there was a Syria feature. Just like he thought, most of the headlines were about the current unemployment situation in the US:
Much to Joe’s surprise, Joe found a headline called “Libya, Sharia, and Us.” Joe knew that Libya was in the Middle East and thought Sharia sounded like Syria… so he thought this article might mention Syria. Unfortunately, this article was a discussion of Libya’s outlook and that Sharia is the moral code and religious law of Islam… not a unique spelling of Syria:
Joe hit the back button. He decided to start digging. He scanned the forest green menu and did not see a “World” section. Joe was surprised at this and was about to type Syria into the white search bar above the menu when he noticed “World” in the sub-menu and decided to click there:
Bingo, right away Joe saw the headline “13 Killed In Crackdown After Syria Promises Peace.” After clicking the link, Joe was brought to the article and numerous links to news about Syria:
Thinking that he would learn the most about Syria from an Arabic news outlet, Joe chose Aljazeera (the online English version). After typing in the URL, the website loaded quickly and Joe’s eye was immediately pulled to the bright orange logo and tabbed sub-menu. Next, his eyes focused on the large picture of a man speaking. Curious if the man in the picture was speaking about Syria, he looked at the headline next to the picture “G20 seeks stronger IMF to battle debt crisis.” This headline was about the Eurozone debt crisis and not Syria:
Joe then scrolled once screen down and scanned the headlines. The word “Syria” wasn’t featured in any of the headlines. He scrolled down another screen and immediately did not see Syria featured in any of the bolded headlines. Joe then looked a little closer and saw Syria mentioned in the underlying, unbolded text. Had he been in a rush, he would have missed it.
CNN Anderson Cooper 360:
Joe is a huge fan of Anderson Cooper so he decides to visit his blog to know his opinion about Syria. Joe opens his blog and looks at the first piece of information that shows up in front of him. He looks at the header and the videos but there isn’t anything about Syria. He clicks the arrow to look at more videos but he doesn´t find anything. Then, he looks at the menu below but the categories are not very descriptive.
He clicks on “Raw Politics” sections hoping to find something but he just finds blog posts about American politics. The titles are not very descriptive either. He looks for the post´s tags but the tags are the same as the menu sections, so Joe is still without a clue of how to find what he wants. He goes back again at the top of the page and he looks at the videos again. Joe is tired by now but realizes now that there is a red menu at the very top.
He is happy because he finally found the submenu “World”. But after clicking he realizes that he is not in Anderson Cooper´s page anymore (he noticed that oddly the colors and the structure were different and the URL changed to http://www.cnn.com/WORLD/
He found a video about Gadhafi (this name is familiar to Joe, but he is not sure if it is related to Syria or to other Middle Eastern country). He clicks but he stops it soon because it is about Libya and not Syria. At this point Joe is frustrated because he didn´t find what he wants (Anderson´s opinion about Syria) and he is tired of seeking this information so he decides to close his browser and go on with his Saturday morning reading local and national news.
Joe always watches the news on CBS Seattle TV channel at night so he thought that CBS Seattle website would be a good source to find more information about Syria.
He takes a quick look of the page and he quickly realizes that the news in the home page is local news. He goes back at the beginning of the page and looks at the main menu. Joe identifies the “News” section in the menu very fast thanks to the different colors of the bar and the contrast between the blue and the white background.
He goes to news and easily goes to the submenu “World”
In the world section, there are several headlines and one of them seems to talk about Middle East. Joe clicks it. However, it wasn´t about Syria but it was about Arabic countries in general.
Joe thinks that he is in another website because the colors of the site have changed so he decides to go back. He now tries the search bar at the top of the page. The first results seem to be advertising from Google. Joe decides to continue looking down and he clicks the first CBS link. He scans this news post which seems to be more about Republicans and the Tea party. Joe clicks the second one but it is a description about the topics of tonight´s show! Joe takes a risk and tries the first ad link that he found before. It brings him to a website about Middle East. After looking at the headlines he finally finds news about Syria.
Joe takes a risk and tries the first ad link that he found before. It brings him to a website about Middle East. After looking at the headlines he find news about Syria.