23-Sep-17

ONLINE JOURNALISM
WEEK 5

Content
1. News website design: Trends and examples
2. Usability
2.1. Definition
2.2. Usability – 4 basic principles
3. Interactivity
3.1. Definition
3.2. Interactive features on news websites

1
 23-Sep-17

News website design: Trends and examples

1.1. Responsive Web Design

1.2. Grid-Based Layouts
1.3. Emphasis on video and photography
1.4. Color Schemes
1.5. Header and Sidebar Banners
1.6. Top Navigation
1.7. Tabbed Content Areas

1.1. Responsive Web Design

Definition:Responsive web design
 allows the website to adjust, or respond to how,
where and the way it is being viewed
 focuses on providing an optimal user experience
on a website
 is achieved by building a website that can re-size,
re-display and restructure navigational elements
and layouts across multiple devices.

2
 23-Sep-17

1.1. Responsive Web Design

Why Responsive Web Design?

 mobile-first approach to website design

1.1. Responsive Web Design

 Tablets, mobile devices and desktop computers:
variety in screen sizes  Webs can no longer be
designed with a fixed number of pixels.
 Responsive design allows for one website to be
used for mobile devices, tablets and desktop
computers, resulting in lower costs and better
continuity of user experience.

3
 23-Sep-17

1.1. Responsive Web Design

Examples: BBC News – early 2015

The new design adapts to different types of devices

1.1. Responsive Web Design

Examples: BBC News – early 2015
"We now see 65% of our visitors to the website are on
mobile or tablet devices. The old site that we had,
which is now four-plus years old, was really designed
with PCs in mind. Moving to a fully responsive solution
which works across mobile, tablets and desktops is the
way to go. It means that we can have one solution that
is a web solution for all of our users“.
(Robin Pembrooke, BBC's head of product for the News
and Weather sites).

4
 23-Sep-17

1.1. Responsive Web Design

Examples: CNN – January 2015

1.1. Responsive Web Design

Examples: CNN – January 2015

“Our mobile site and apps now account for half of our
traffic. To that end, our new mobile site is better
organized and has more of the top news, videos and
compelling stories CNN is known for.”

5
 23-Sep-17

1.2. Grid-Based Layouts

1.2. Grid-Based Layouts

 Reasons: create sharp look, one of the most

effective ways to manage and organize a large amount

of content.

6
23-Sep-17

7
 23-Sep-17

1.3. Emphasis on video and photography

 A large portion of the home page is filled with videos
and images.

1.3. Emphasis on video and photography

 Article pages feature auto-playing videos.

8
 23-Sep-17

1.4. Color Schemes

 Dark text on a white background  readability
enhanced
 Darker colors for headers or for body of the page outside
the content.
 Blue and red in addition to a dark gray or black for text
 Blue extremely common for headlines, article titles and
links
 Red often used sparingly as an accent color
 Mix in more colors in other places, e.g. navigation

9
 23-Sep-17

1.4. Color Schemes

1.4. Color Schemes

10
 23-Sep-17

1.5. Header and Sidebar Banners

 Some websites use banner ads on all pages, others

exclude banners on the home page but display them

above the header on other pages.

11
23-Sep-17

12
 23-Sep-17

1.6. Top Navigation

 Primary navigation menu: below header, above content

and bottom of page. Many news sites use a two-level

navigation menu.

1.6. Top Navigation

Hidden top menu

13
 23-Sep-17

1.6. Top Navigation

Hidden top menu

1.6. Top Navigation

Bottom menu

14
 23-Sep-17

1.7. Tabbed Content Areas

 Tabbed content areas: usually for popular articles, recent
articles, most commented articles, etc. Commonly used in
the sidebar.
 Allowing more control by users over what content and
links they see
 Save space in the design by making more content
accessible in a specific area

1.7. Tabbed Content Areas

Examples: BBC

15
 23-Sep-17

1.7. Tabbed Content Areas

Examples: BBC

1.7. Tabbed Content Areas

Examples: The New York Times

16
 23-Sep-17

2. Usability
 Definition:
Web usability is about designing and structuring
your website so that site visitors complete your
goals for them quickly and efficiently.

2.2. Usability – 4 basic principles

2.2.1. Your website has to be easy to navigate
Users have gradually become accustomed to particular
layouts and phrases on the Internet, e.g.:
 Logo is in the top-left corner and links back to the
homepage
 The term ‘About us’ is used for organization information
 Navigation is in the same place on each page and
directly adjacent to the content
 Anything flashing or placed above the top logo is often
an advertisement
 conventions like these can enhance website's usability

17
 23-Sep-17

2.2. Usability – 4 basic principles

2.2.2. Pages must download quickly
 3 rules for response times (Jakob Nielsen, 2007):
“The rules are; if it is faster than one tenth of a
second, you don’t feel like you are waiting at all. If
it is more than one tenth of a second, you can tell
you are waiting, but up to one second, it still feels
like smooth navigation. Between one and ten
seconds is the limit for your attention.”
 Tolerable waiting time for a response is around 2
seconds. (Nah, 2004)
 Waiting times should be under 1 second as far
as possible.

2.2. Usability – 4 basic principles

2.2.3. Information should be easy to retrieve
People rarely read Web pages word by word; instead, they
scan the page, picking out individual words and sentences.
 Web pages have to employ scannable text, using:
 highlighted keywords (hypertext links serve as one form
of highlighting; typeface variations and color are others)
 meaningful sub-headings (not "clever" ones)
 bulleted lists
 one idea per paragraph (users will skip over any
additional ideas if they are not caught by the first few
words in the paragraph)
 the inverted pyramid style, starting with the conclusion
 half the word count (or less) than conventional writing

18
 23-Sep-17

2.2. Usability – 4 basic principles

2.2.4. Restrictions mustn’t be placed on users
Don't prevent your site visitors from navigating through
the Internet in the way that they want to. E.g.:
 Every time a link is opened in a new window/tab, the
back button is disabled.
Approximately 60% of web users employ the back button
as their primary means of navigation  don’t force links
to open in new windows.

3. Interactivity
Definition:
An interactive website is an Internet page that
uses various types of software to create an
interactive experience that allows the person
viewing the webpage to be actively engaged with
the site.
Q: Can you think of any examples of interactivity
on news websites?

19
 23-Sep-17

3.2. Interactive features on news websites

Report from Engaging News Project (155 newspaper and
television news websites in the US):
 Over 95% of news sites allow site visitors to “share,”
“like,” or “recommend” news content on social media.
 News sites let users “share” content via Facebook more
than “like” or “recommend” the content.
 Over 90% of news sites have a comment section.
 Comment section codes of conduct appear on 33% of
top television news and 74% of top newspaper sites.
 Interactive polls appear more frequently on newspaper
sites than on television news sites.

3.2. Interactive features on news websites

Report from Engaging News Project (155 newspaper and
television news websites in the US)
 News sites rarely warn visitors that online poll results
are not scientific.
 Over two-thirds of news sites include links to related
and recommended content.
 Over 70% of news sites have links to their most popular
content. Of these sites, approximately three-fourths
require scrolling before links to the most popular content
are visible on the homepage.
 Approximately 30% of local television news stations and
top newspapers advertise a mobile app on their
homepage, but not on the main page of their mobile site.

20
 23-Sep-17

3.2. Interactive features on news websites

Examples of interactive features:
 Social media buttons: “share,” “like,” or “recommend”
buttons

 Comment section

21
 23-Sep-17

3.2. Interactive features on news websites

Examples of interactive features:
 Online polls/ surveys

22
 23-Sep-17

3.2. Interactive features on news websites

Examples of interactive features:
 Links to the most popular content

3.2. Interactive features on news websites

Examples of interactive features:
 Mobile versions/ apps

23
 23-Sep-17

3.2. Interactive features on news websites

Examples of interactive features:
 Site search engine

 Automatic subscribe/unsubscribe to a mailing list (e.g.

for newsletter)

3.2. Interactive features on news websites

Examples of interactive features:
 Weather forecast

24
 23-Sep-17

3.2. Interactive features on news websites

Examples of interactive features:
 Membership

3.2. Interactive features on news websites

Examples of interactive features:
 User-generated content/ User contributions

25
 23-Sep-17

3.2. Interactive features on news websites

 User-generated content/ User contributions

3.2. Interactive features on news websites

 Games

26
 23-Sep-17

3.2. Interactive features on news websites

 Jobs

3.2. Interactive features on news websites

 Jobs

27
 23-Sep-17

3.2. Interactive features on news websites

 Finance

3.2. Interactive features on news websites

 Finance

28
 23-Sep-17

3.2. Interactive features on news websites

 Shopping

3.2. Interactive features on news websites

 Advertising

29
 23-Sep-17

3.2. Interactive features on news websites

 Contact/ Feedback

3.2. Interactive features on news websites

 Dating

30
 23-Sep-17

3.2. Interactive features on news websites

 Competitions

3.2. Interactive features on news websites

 Virtual reality

31
 23-Sep-17

ASSIGNMENT GUIDELINES
In groups, analyze the news website assigned to each group.

Use the given checklist to analyze the news websites in

terms of design, usability and interactivity.

Give suggestions for improvement.

32