Design is not just about aesthetics but usability as well. This is particularly relevant when you are designing content online. So when I encountered this example of a slideshow for a cake recipe, I had to share it.

1. There is no ‘print’ option on the page

2. The ingredients are on one page, the recipe instructions take up a further 9 pages. So using the browser’s print option would involve clicking at least 19 times (9 times to get to the next page, 10 times to print each page – more clicks if you add in clicking on menus, etc.)

What do people do with recipes? Not this, if they can help it.

Thinking about how people might use your content should be part of how you design it. Newspapers have evolved over centuries in response to this – and even that doesn’t stay still, as the way that people use newspapers continues to change.

So what should this slideshow include? Well if you have to use a slideshow then at least include a link to a printable or fullscreen version (if they have the laptop or tablet in the kitchen) of the full recipe.

And if you’re going to allow people to ‘share’ it (as this slideshow did), don’t let that mean sharing just one part of the recipe (as, sadly, this slideshow did. I pity the person who received my message saying that I thought they might like step 1 of an incomplete recipe).

Thankfully the slideshow format is not used for any other recipe on The Guardian’s recipes page. Meanwhile, it’s a good lesson in bad design.

PHP Freelancer

Craig Mod has written a lengthy and well-informed piece on A List Apart about the problems of designing for the iPad and other “browser”-based interfaces. He makes some particularly important points about the differences between products which have a spine as the “axis of symmetry” (e.g. books, magazines), and digital products where the axis is hard to place:

“If the axis of symmetry for a book is the spine, where is it on an iPad? On one hand, designers can approach tablets as if they were a single sheet of “paper,” letting the physicality of the object define the central axis of symmetry—straight down the middle.

“On the other hand, the physicality of these devices doesn’t represent the full potential of content space. The screen becomes a small portal to an infinite content plane, or “infinite canvas,” as so well illustrated by Scott McCloud.”

The core of his article is a design template for long form tablet reading, for which Mod breaks tablet reading distances into three main categories: Bed, Knee, and Breakfast

• “Bed (Close to face): Reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
• “Knee (Medium distance from face): Sitting on the couch or perhaps the Eurostar on your way to Paris, the iPad on your knee, catching up on Instapaper.
• “Breakfast (Far from face): The iPad, propped up by the Apple case at a comfortable angle, behind your breakfast coffee and bagel, allowing for handsfree news reading as you wipe cream cheese from the corner of your mouth.”

An image of the template in action is shown above. It’s released under the MIT licence.

Although the article is written with ebooks in mind, the principles can obviously also be applied to magazine and news apps. Worth a read.

PHP Freelancer

As an industry, online publishing has gone through a series of obsessions. From ‘Content is King’ to information architecture (IA), SEO (search engine optimisation) to SMO (social media optimisation).

Most people’s view of online publishing is skewed towards one of these areas. For journalists, it’s likely to be SEO; for designers or developers, it’s probably user experience (UX). As a result, we’re highly influenced by fashion when things aren’t going smoothly, and we tend to ignore potential solutions outside of our area.

Content agency Contentini are blogging about the way they use analytics to look at websites and identify which of the various elements above might be worth focusing on. It’s a useful distillation of problems around sites and equally useful as a prompt for jolting yourself out of falling into the wrong ways to solve them.

The post is worth reading in full, and probably pinning to a wall. But here are the bullet points:

• If you have a high bounce rate and people spend little time on your site, it might be an information architecture problem.
• If people start things but don’t finish them on your site, it’s probably a UX problem.
• If people aren’t sharing your content, it may be a content issue. (Image above. This part of their framework could do with fleshing out)
• If you’re getting less than a third of your traffic from search engines, you need to look at SEO

Solutions in the post itself. Anything you’d add to them?

PHP Freelancer

(Editor’s Note: This is the second in a three-part series on local online news video, summarizing the findings of a thesis study that examined the Minnesota media market and their use of online video. The second focuses on design and usability. Tomorrow’s part three will explore advertising. Love to hear feedback in the comments below.)
__________

In addition to yesterday’s look at what’s working and what’s not in online video content, local news sites have a long way to go in reaching usability standards for video players, including location, presentation, buttons, hosting and more. Many news sites simply don’t have the resources for a redesign, especially at smaller organizations.

Corey Anderson, Web editor at the online-only Minnpost, said as a result of time and budget constraints, Minnpost.com has not been able to organize and showcase its video on the website. Clonts from the Pioneer Press had a similar sentiment, saying that the current focus is to develop a strategy in content and then build a strategically-designed multimedia page.

Usability improvements that should be made:

1. Location: The majority of the sites featured video content on the front page of the site. TV news sites especially did a great job in featuring its video players prominently on the front page. However, only two of the 10 sites featured the video player above the fold of the site. If news organizations are serious about exposing readers to its video content, the location of the player is very important. Furthermore, news organizations that place its player in the right sidebar should consider a re-design, since research shows readers viewing the first dominant image on the left side of the site first. John Daenzer, director of new media at WCCO, said he thinks having a player in the sidebar, above the fold, devalues the lead story at the center of the page.
   

   Presentation:	Number of sites (out of 10)	Specific sites (or exceptions)
   Embedded in articles	5	Star Tribune, Pioneer Press, Minnpost.com, KSTP, FOX 9
   Right column of story (sidebar)	2	KARE 11 and WCCO
   Link/thumbnail in article to video page	2	Star Tribune, The Minnesota Daily
   Independent on its own page	9	All except Minnpost.com
   Pop-out player	2	Star Tribune, WCCO

2. Connecting, embedding: Only half of the 10 sites connected readers between print and video stories that were related. Evidence shows that readers are much more likely to watch videos that are related to a print story. Anderson of Minnpost said that judging by the page views, videos seem to work better on the site when used with a story to enhance the readers’ understanding of the subject matter. The Star Tribune did a good job of connecting readers to its video content through multiple levels, something that other sites might take note on. Star Tribune’s site showcased video individually, embedded, on the front page and video page. This gives the viewer more possibilities to be exposed to the content. Durkin, senior Web producer at FOX 9, said not only is it beneficial for the design of the site and usability of the user to embed the player with related text stories, but it also keeps video content in context.
3. Navigation: It also plays a key role in exposing viewers to video and makes it easy for them to find video content. Sites such as the Pioneer Press and MPR did not include links to video content in its navigation bar, a poor example of providing useful navigation for viewers. This not only makes it more difficult for users to find video content, but likely contributes to fewer video plays.
4. Sharing and Buttons: The local news sites are still working to develop the technological platform that provides users with tools to better use and share the content. Some of the sites are still lacking fundamental buttons that should be included with all players. For example, KARE 11 does not include a volume button on its player. Only five of the ten sites included an embeddable player or link/HTML buttons. These options could increase the exposure of the videos by being embedded within external blogs and being linked from other websites.

Things to be considered in design and usability:

1. Button options: Because there is still very little research on the topic, news sites will have to conduct their own testing to determine which button options are truly helpful to readers. While players like that of Minnpost are simple in design, making it easy for a viewer to use, the readers also lose out on options to control the player’s functions and how they view video. However, a player that has complex options such as that of KARE 11 or WCCO may be overwhelming for the viewer, despite providing many options to control the functions of the player. The goal is to find a balance. WCCO’s Daenzer said the strategy behind the design of its player is easy usability by readers, which is why the player has a “pop-out” option that gives readers the ability to let the video load in an independent window as they browse the site. The news sites should look at the frequency use in each specific button and determine whether users truly find it helpful.
2. Hosting content: Where to host content is a question that is yet to be answered. While sites like MPR are posting their video content onto YouTube, other news organizations such as MN Sun are implementing their own video players and moving away from hosting content externally. Though posting videos onto YouTube may provide more exposure on that site, hosting content externally poses navigation issues from the internal site. For example, users navigating MPR’s website are not effectively directed to MPR’s YouTube channel. Furthermore, it requires readers to go elsewhere to view your content.
3. Mobile video: Similar to live video, mobile video is said to be the next big innovation in Web video. Providing readers with more ways to consume the content has become more important. As smart phones become more affordable, more readers will likely begin viewing content through handheld devices, and news organizations need to be prepared to meet that demand.
4. Categorization: It allows users to better interact and navigate through video content available. Most of the sites categorized content in the video section page, but editors may also consider placing content-specific videos within coverage sections (business, sports, etc.). For example, the business section would only include business-related videos. The concept is an expanded version of the principle of embedding related content. It is more likely to get played.

Tomorrow’s piece will look at how local online news video is incorporating advertising in an effort to monetize the content. I appreciate the feedback thus far. I will not for clarity that this study was done between January 2009 and was completed in May. Some of the sites have made changes since then and there is plenty more to investigate beyond this study, as noted in this thorough response and reflection on the study. There is still very little research out there and I hope that this will spur some discussion on the topic of online news video and whether news organizations should truly be investing their time into producing it. Perhaps the reward in ad revenue will justify an investment. Come back tomorrow for more on advertising.

____________________________________

Sites studied:

• Star Tribune (www.startribune.com) – Daily Metro Newspaper
• Pioneer Press (www.twincities.com) – Daily Metro Newspaper
• Minnpost (www.minnpost.com) – Online-only News Website
• The Minnesota Daily (www.mndaily.com) – College Newspaper, 4-days a week. (Disclosure: I have served as editor at this paper)
• WCCO (www.wcco.com) – Metro TV station
• KSTP (www.kstp.com) – Metro TV station
• KARE 11 (www.kare11.com) – Metro TV station
• FOX 9 (www.myfoxtwincities.com) – Metro TV station
• Minnesota Public Radio (www.mpr.org) – Public Radio station
• Minnesota Sun Newspapers (mnsun.com) – Community Newspapers (Most papers are weeklies).

PHP Freelancer

Most newspaper websites are doing a bad design job in making their stories readable. Too many are using:

• small fonts,
• long off-putting paragraphs,
• no subheadings,
• no in-content boxes or pictures, and
• no in-content links.

To explain more, I’ve written a companion post on online readability (design, not writing – and this post was first published here). And here’s an example each of their news stories so you can see the issue: Daily Mail, Express, FT, Guardian, Independent, Mirror, Sun, Telegraph, Times.

Main readability design mistakes

This table summarises the main ways they are going wrong.

Tiny fonts

They are all using font sizes that are too small for comfortable reading on copy-heavy pages. Only the Guardian, Independent, Mirror and Telegraph offer obvious controls for resizing text.

But most of the sites use 12 or 13px fonts for body copy. I think this is too small to be the default – 16px is a much more readable size. Only the Guardian comes anywhere near this.

No sub-headings

Astonishingly, not a single major newspaper site uses sub headings in its news stories, (apart from the Sun occasionally) despite this having been a generally accepted web readability recommendation since 1997 when it comes to helping people read webpages.

Long paragraphs

Nearly half use long paragraphs, serving up great slabs of unappealing copy. This makes the pages hard to scan and read – again, despite using shorter paragraphs online being a standard online guideline.

Bad readability

These three are vying for last place when it comes to readability. I can’t believe anyone could comfortably read these pages for long:

• Express – A small font, expressed in absolute pixels, so Internet Explorer users can’t even make it bigger. And the Express full-justifies its copy, making it harder to read as the gaps between words are different on each line. A complete pig’s ear.
• Independent – A small font combined with multi-sentence paragraphs. A readability nightmare, even if there is a text-resize control.
• Daily Mail – The Mail does a good job of breaking up its pages with pictures. But its font size is too small, and there are no subheadings in the copy to help the user understand what the story is about or give the eye a rest.

Fairly poor readability

• Mirror – There’s a font size control (although this is a poor second to having a big enough font in the first place). And although it’s only 12px, the Mirror is at least using Verdana which is easier to read than Arial at small sizes. This, plus its use of short paragraphs, rescued it from the ‘bad’ list.
• Telegraph – Default font size is too small (smaller than that of the Times and FT), although there is a control to make it bigger. It uses short paragraphs, but for me it’s all still too hard to read.
• Times – A slightly bigger font than the Telegraph, but no text size control, and paragraphs are too long. Someone introduce the CMS people to the return key …
• FT – The font is starting to get big enough. But while it’s paragraphs tend to be only one or two sentences, the sentences themselves tend to be long. You’d still have to really want to read a story to plough to the end of it.
• Guardian – Its font size is almost big enough for my liking, and I nearly put it in the ‘getting there’ list. But its paragraphs are too long, and there are no in-content devices (boxes etc) to break up the copy.

Getting there

• Sun – A nice big font, short paragraphs, copy broken up with images, and occasional sub-headings. Probably the best of them – some more sub-headings would really help though, and I’m not convinced by the Georgia font or the occasional use of italics.

Newspaper website readability: table notes

Verdana and Arial are the same height at a given size, but Verdana is wider. At small font sizes, Verdana will be easier to read as it will look bigger. At bigger font sizes, it appears to stretched.

The Sun is using Georgia, so its font sizes can’t be directly compared to the others – at a given size, Georgia looks smaller than Arial and Verdana.

The Sun is also using SIFR to replace standard web fonts with a custom one in its headlines.

The Guardian is the only site to use in-copy links. These are a good idea to help people read a page, as they draw the eye and encourage people to keep reading. However, the Guardian has an annoying habit of linking keywords to its own pages when you might think they are external links.

The Independent treats its own stories (standfirst, long paragraphs) differently to agency-sourced ones (no standfirst, short paragraphs). The table shows information for its own stories.

Headings explained

These findings are all for the news pages. Other sections may be treated differently.

• Headline size -Default font size (in pixels) for the main headline.
• Font size -Default font size in pixels for the body copy. The Express is set to an absolute size of 12px. The rest are in EMs, and I’ve assumed a 16px starting font.
• Body font -The first font listed in the CSS.
• Standfirst – Is there any summary or introduction to the news stories (EG a bold first paragraphs, or a more traditional standfirst)?
• Sub headings – Whether the copy is broken up with sub-headings.
• Short paragraphs -Are paragraphs kept short – 1 or 2 sentences, maximum. Or are there huge sections of copy that have probably been lifted verbatim from print?
• In-content boxes -Is there any attempt to break up the web copy with boxes (Eg ones with ‘More …’ stories).
• In-copy links – Are links routinely used in the copy?
• Obvious text size control – Is there an obvious way to control the text size (I know you can use the browser to do this, and you probably know it too – but my mum doesn’t. And I bet most people don’t).

Thanks to the excellent Firebug with deciphering the style sheets.

PHP Freelancer

Written by Wilbert Baan

The last year has seen social networks like Facebook and LinkedIn updating the design of the homepage to turn it more into a notification page: the homepage as a place where you can see what your friends are doing. Your virtual center of the network.

These updates let you know what your friends are up to, but they also let you know what your friends like or share. The social networks often work as recommendation networks as well.

New technology, new business

Google added relevancy and order to hyperlinks and is very useful for the active searcher: someone who’s looking for something. Social networks add relevancy to hyperlinks you’re not searching for. The networks provide you with new information and new articles recommended by virtual friends.

Both are in a business that was traditionally the business of a news provider. Google gives you insight and background information. Social Networks keep you up-to-date and recommend information.

Does this design shift also affect the future design of news websites?

The average news website probably publishes around a hundred articles every 24 hours. We can’t and don’t want to read all the articles a news website publishes. We need filtering mechanisms.

News websites add hierarchy to the news by presenting the most important things first. But this is a mass hierarchy. It’s not personal. The sorting is based on what the news website thinks will interest most people. And this works very well for the most important news.

The news website is a large pile of stories. Is this still in the best interest for a reader? His or her most valuable asset is time. Sure there is some news you need to know about, but you get to know about the important facts through your social networks as well.

And if you know the facts you can learn more by hitting the search button. The news website is still a database with a single entry, the frontpage. This makes it vulnerable in a distributed environment.

Distributed environment

The future of information presentation (at least for the long tail of information) will probably be user-centered. Mobile devices are extremely user-centered. Successful access points like interfaces and devices provide readers with the most relevant information.

Time is our most valuable asset and the reduction of noise is a serious proposition for any new service. News itself is relevant, there is no question about this, but how do you deliver your content in a distributed environment?

Type of environments

There are different environments.

1. Get your content on other platforms through syndication or API’s. The problem is monetization, although you could distribute the news and link back to your website with hyperlinks in the text that link to more in-depth coverage.

2. Your content on your platform with a personalized presentation based on your own network or an external (social) network.

3. The current form of presentation where your content is on your platform presented in your hierarchy.

What can you do as a news website to be more relevant? Should news websites learn from the design of social networks and move to a more user centered approach? The New York Times is already doing this with Times People and with EN.nl (the project I work on) we created a personal selection based on your reading habbits.

Your Thoughts

What design elements that originated in social networks do you think could very well be applied to the basics or every major news homepage? Or what are the arguments not to implement this kind of functionality?

- Share articles with your friends
- See on what articles your friends commented
- See what your friends are reading
- See what news is happening close to your friends
- See news topics your friends subscribed to
- Discuss an article only with your friends

PHP Freelancer