Search This site

28 January, 2015

Mobile news design - Vertical video and vertical presentation for news

The new Twitter video feature is causing many broadcasters to groan over the vertical videos that amateurs will post to the Twittersphere from breaking news events.

Twitter's app update forces a vertical format when recording video and crops them to a square format.

Broadcast video is a horizontal experience and having users post vertical and square video always presents formatting problems for producers in the studio.

But for mobile users holding larger smartphones, vertical is the natural position.

I have been testing out the new (near-realtime) video reporting feature in the updated Twitter app and debating the merits of the new tool with colleagues at the BBC and RTE Ireland.

They are concerned with the rise of vertical video hurting the quality of breaking news video filed by amateurs.

Here are some examples of my test video field reports filed using the new Twitter app.

A Vertical design pattern for story teasers 
In the new Discover section of the SnapChat app media brands are presenting news updates in a vertical presentation.

What does that look like and is it it a bad thing or a good thing?

If you look closer at the media offerings, some are trying vertical video (Nat Geo and Vice) on their story cards.
That often looks really bad, mainly due to the nature of human eyesight. (Our eyes are spaced horizontally and horizontal orientation is the way we best process moving pictures.)

Thankfully the video segments are presented in horizontal format once you tap past the story card teaser.

Let's look again at those CNN story cards shown in the video animation above.

The card design is vertical, but the video is most typically not.

This may seem like a random design choice. I assure you it is not. This is a consistent design pattern and it is being applied brilliantly.

There is art direction, design, purpose and style. That does not happen by accident.

Aimee Schier, the executive Creative director at CNN Digital confirms this with me in a Tweet exchange with me.

The most effective mobile story cards in the Discover section borrow heavily from design concepts commonly seen in magazine page layout.

Many card designs feature animation. And humor. They are a joy and a creative sandbox that news designers are going to love working in. 

I am curious what kind of SDK or design guidance the SnapChat team provided their media partners with before the launch. 

Another pattern I see is that static vertical images can be used to great effect. 

Again, this borrows heavily from print design approaches that have worked for decades in posters, editorial and advertising design.

My takeaway is that when video (moving pictures) are used in a card design, great care has to be taken.

The best cards designs that incorporate video footage often present video in a square (or cropped into a custom-shaped framing graphic) that purposefully avoids running vertical video full bleed.

Let's look at examples of story cards from some of the other media houses that are making their debut on the new platform.

The media brands in the Discover pane of SnapChat are allowed to promote six stories each day. 

This Bleacher Report card features a still photo with an animated shoe. 

The video of the game winning shot is presented horizontally.

Same for the Superbowl ad video teaser.

Vice News cards feature vertically-cropped video with an overlay graphic that contains the headline and a navigation graphic (the white dots) to their six items.

People cards feature zooming still photos and animated headline graphic overlays.

 Some Cosmopolitan cards feature animation layers for their still photos to make them feel more like video.

The UK's Daily Mail cards feature still images that borrow from their tabloid style