Motion graphics has become an increasingly popular way to present data in a compelling visual form. In a series of videos guest contributor Sihlangu Tshuma outlines his workflow process for managing a motion graphics video project, the results of which are shown at the end. All 13 videos are also available in this playlist.
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.
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
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.
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:
Solutions in the post itself. Anything you’d add to them?
(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.
Most newspaper websites are doing a bad design job in making their stories readable. Too many are using:
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.
This table summarises the main ways they are going wrong.
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. Continue reading
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. Continue reading
Online Journalism Blog 