Designing for digital magazines. !!!Comment via Twitter: !@robboynes !

!

!

!

@Guardianclasses

12 November 2013

Presenter notes have been added on grey slides.

Like this one.

!

What is UX? !User Experience.

Congratulations.

You already practice it.

!

What is a magazine? !“The word 'magazine' describes branded, edited content often

supported by advertising or sponsorship and delivered in print

or other forms. Traditionally, magazines have been printed

periodicals which are most commonly published weekly,

monthly or quarterly.” (PPA)

!

Magazines… have great UX. !Hierarchical content based on grid systems.

Clear signposting of sections.

Linear narrative from news through to features.

Curated content.

Paper - nice to touch and easy to read.

!

Magazines… are user focused. !Shareable.

Robust.

Portable.

Cheap.

Recyclable.

Comfortable.

!

!

What is a magazine now? !‘Brands based purely on trust, delivering fact and opinion

about topics that a significant amount of people are

interested in.’

When the iPad arrived, the majority of publishers really just wanted

what the following slide describes.

!This explains the constant presence of replica magazines in Apple

Newsstand from PixelMags, Zino, etc.

DRAG MAGAZINE FILE HERE

CREATE DIGITAL PRODUCT

The next slide shows the options available to publishers.

It starts from the replica software of pixelmags through to the

native coding of iOS, etc.

Padify

Padify is a new startup which I’m associated with as a creative

lead. They allow responsive agnostic design to multiple platforms

- both as a dovetailed option and as an E2E (end to end) product.

We need users to test it so we can make it better - help us!

Designers wanted. Test the live beta. !Help us by giving feedback!

!www.padify.net !Use the code GUARDIAN for access.

!

!

How I designed for devices. !

(and why I stopped)

!

The page works. !!“The question of [an effective page] is not merely one of

design and format; the question of legibility is of equal

importance. The reader should be able to read the message of

a text easily and comfortably. This depends to a not

inconsiderable extent on the size of the type, the length of

lines and the leading.”

!!Raster Systeme, Josef Muller-Brockman 1981 !!!

On the next slide we can see a current magazine page and how

the grid behind it looks.

Grids control the eye by using hierarchy.

!

The page gives control… !!!

!

…therefore the page remains. !!!

!

But theres a problem. !Getting all the things to fit on the page for different device sizes.

!The solution:

Hide all the things.

!

!

The scroll. !!!

This next slide shows how a designer has created scroll boxes to

attempt to fit all the print matter into a small screen space - at the

expense of the user.

This next slide shows that along with the individual scroll areas,

there are still another 3 global app level scrolls potentially in play

with the user.

!The designer has then created a number of UI identifiers to

command the user into the various hierarchies and actions.

!We start to see the rise of design elements / signposts such as

‘swipe to view’, ‘press here’ and ‘scroll to see more’ appearing in

page designs.

!One user described to me the process as ‘masturbating hamsters’

referring to the constant small scale swiping and scrolling needed

to view content in some magazines.

!Discoverability is an issue here.

This next slide shows the concept of hiding content to satisfy the

use of page space. ‘Hotspotting' was rife during early digital

magazines and still pervades today. On this page there are 12

hotspots and two hidden videos for the reader to locate. In the

print edition no content was hidden.

!Hotspots hide content behind UI buttons which when activated

reveal their content, often at the expense of the user and overall

page clarity.

!This can leave readers being ‘bird like’ as they tap around pages

on a quest for content. Users can also find it quite tiring.

!Discoverability is an issue here.

!

The hotspot. !!!

We end up with a print UX experience, but in many ways the

experience is actually worse due to discoverability.

!DPS UX solves two issues for a print reader:

!- Getting a new issue on demand or internationally is sometimes

hard to do.

!- Back issues take up space at home.

!Response to these issues:

!- From a solution based perspective, issues could be globally

delivered via Amazon next-day delivery. So this is a distribution

issue alone as the content is the same in both digital and print.

!- DPS issues often are over 1 - 1.5 GB each, so back issues cannot

be stored on devices for very long before they reach capacity.

!

The result. !!A complex and anachronistic User Experience.

Trying to recreate magazine UX…but hiding all the things.

As the UX and UI is fixed in DPS style apps, they don’t consider

the end user. As such magazines had to design user guides to

allow users to actually understand how to view content and be

able to navigate around the app.

!This shows a problem with discoverability, but also how designers

began to find solutions to try to make user focused UXs despite

their restricted app environments.

!This is shown in the next slide.

!

So with all this in mind… !!!

I designed a project for The Economist.

And clearly learnt nothing from my previous experiences.

There were a lot of devices in the ecosystem to consider.

!

App - level UX. !Scrub navigation is hard to use.

Filmstrip navigation is hard to use.

No search.

No control over text size or share.

Limited bookmarking.

Issue size is very large.

Linear narrative - tries to reproduce print UX.

!!

!

Editorial. !Non-selectable text.

Non-resizable text.

Non-shareable text.

No full screen images.

Pages need signposting.

!!!

!

Interactivity. !Poor discoverability.

Poor readability.

Makes the user work for their content.

!!!

!

Video. !Has been placed in a separate player.

Limited media controls.

Not obvious what’s within the video.

Makes the user work for their content.

!!!!

!

On mobile. !Identical copy and story flow is used.

Same UX design despite:

(a) smaller screen estate

(b) mobile users have different needs to tablet users

!It’s a poorer experience.

!

The result. !A complex and intensive workflow.

Limited for the user.

Designed for device.

!Solves only the problems of convenience:

(a) space

(b) delivery time

!

!

The next step. !!The problem:

The pages and workflow isn’t scaleable.

!The solution:

Let’s look to the web.

!!!

!

Why? !!!

0

150

300

450

600

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012

Consumer PCs Tablets Mobile

!

The rise of mobile.

Source: Enders Analysis

Global annual unit sales (m)

!

C.O.P.E !Create Once Publish Everywhere.

Device agnostic design.

Responsive.

!“I wouldn’t stop my magazine being distributed in Tesco just

because I dislike hate the people who shop there.”

The next example shows how tabulated navigation was added to

Men’s Fitness. This allowed the user only two UI gestures to get to

any content in the app to speed up navigation.

!The UI and page design was predominately flat and everything

was focused on transparency of content and wayfinding.

!The concept of page swiping became secondary and the contents

page and search menus are replaced by micro index pages for the

various sections.

!This becomes less a magazine but a magazine branded product in

it’s own right.

!The following slides show the user journey from issue / store

front to the article through to sharing and saving the article.

!The UX design here was authored by @RobBoynes.

!

Men’s Fitness !Create Once Publish Everywhere.

Removes Linear Navigation.

Uses Native Apps with HTML templates.

User Focused.

The next example shows how this translates to mobile through

responsive templates.

!This project follows the COPE strategy of ‘create once,

publish everywhere’ in that the mobile automatically renders

content alongside the tablet edition.

!The UX of the phone is specific to mobile and very different to the

mobile and is based on the mobile user:

!- Index pages and tabs are replaced by a long news feed.

- Articles are run end-to-end allowing a user once in an article to

use infinite scroll to view all articles in an uninterrupted scroll.

- Swiping Left to Right takes the user back to the menu

(following standard iOS7 UX).

- Swiping Right to Left allows the user to drill down into article

level share and save options.

Removing the concept of ‘issues’ removes another layer of

‘magazineness’ from the digital model, but allows the user to

access to on demand content at regular intervals.

!This becomes a user focused - rather than publisher/industry

focused - advancement.

!

Making digital magazine products ‘on demand’. !Removing the ‘issue’ and creating the ‘timestamp’.

Designing for iterative not waterfall workflows.

The following example shows how the user journey works on the

magazine brand ‘EVO’.

!The UX design here was authored by @Clearleft

All these solutions have problems however.

!In the next section of slides I discuss some of the problems that

remain and how we might begin to solve them.

!

C.O.P.E has it’s problems. !“Do I want to read a 20,000 word feature on my phone?”

!We are not designing for device…

…but we’re not designing for individual users either.

!

Responsive design has it’s problems too. !Copy flow and design is automatic and can be disruptive.

Generic reading experiences can result - templates rule.

“Good on all devices, not amazing on any single one device.”

Pages turn to infinite scroll…and get very very long.

Responsive pages can be really long on some devices.

If via COPE we deliver all content on all devices, then we end up

with some content that isn’t suited to a device or how a user uses

their device.

!

We are moving away from products and services, towards experiences. !

I often ask people I work with outside of the inner workings of

publishing what magazines mean to them, how they define them

and where they are headed. On day I’ll create a discussion forum

for this - until then I’ll quote these ever patient people in

slideshow talks…enter the understanding Andy Budd from

Clearleft. This is only one question from a fuller Q&A, but here it is.

How do you feel magazines need to innovate?

!“I think most magazine publishers incorrectly feel that they are

only competing against other magazines. So they take their lead

from what the industry is doing, and iterate very slowly.

!However the truth is that the publishing world is not only

competing against each other, but every content provider on the

web. This includes numerous web start-ups that have developed

deep digital capabilities and a dedicated team to back them up.

So rather than pushing out an update every few years, these teams

are working to improve their digital publications every day day-in,

day out.”

!Andy Budd, CEO, Clearleft

!

How do we innovate? !

!!“At Amazon, you must write a business case to stop

an innovation proposal, rather than to start one.”

!!Werner Vogels

CTO, Amazon AWS

!

Remove the page. !If we see the page-based magazine user experience as one of many experiences within a brand ecosystem, then we can

make ‘editorial’ experiences not for devices - but for specific user requirements and environments.

!!

!

Think agile. Think lean. !Replace off-the-shelf software with learning and talent.

Learn about people. Do user testing. Be humbled.

Create quick, minimum viable products. Test them. Improve them.

Don’t dictate - collaborate with the user.

Scale the experience to fit the user.

Here we see how search in magazines has always been a problem

- contents pages usually provided a basic solution to this.

!But web search is slowly declining.

!It poses the question - what if we provided content to users they

actually wanted, based on algorithm, previously viewed content,

shares and other readers habits?

!We can look to Netflix as a comparison.

!

Kill search. !!Search is hard work.

Search requires you to know what you’re looking for.

!!!

!!“We want to help people discover what they love.”

!!Ben Silberman

CEO, Pintrest

!

Why can’t my content just be delivered to me? !!Replace search with relevant content the user actually uses.

Let them browse. Learn from their discoveries.

!!

!

Share becomes central over search. !!Browsing is still necessary though.

!!

Here is how we could determine what content users might want.

It’s not exhaustive - but it’s a start.

!Content is served on your given preferences (1)

!Other content is chosen via:

(a) your like or dislike of the content (1)

(b) if you share all or parts of the content (2)

(c) you reading / not reading the article (3)

(d) your overall user analytics and behaviour (4)

!‘This feedback loop is created for each user and it

becomes integral for monitoring the evolution of each

user experience the brand maintains.’

FOR ROB

MOST POPULAR

MOST SHARED

Here we see the idea of commenting on an article level which is

viewable before the article is selected on the news feed.

FOR ROB

MOST POPULAR

MOST SHARED

!

Ask your users. !!They will tell you what you want to know.

If you aren’t user testing - you’re just guessing.

!!

!Ask questions of your users:

!When would you like your content?

(a) Monthly?

(b) Weekly?

(c) Daily?

(d) On Demand?

!‘User research at the Economist has noted that users like a range

of delivery times - from the monthly ‘issue’ to the on-demand

‘waterfall’ feed. Timestamping is important. Give your user

control over when and how they consume.’

!

We need to talk about video. !!!

!!“Video now accounts for 50 percent of all mobile traffic

and up to 69 percent of traffic on certain networks.” !Bytemobile Mobile Analytics Report

!!“92 percent of mobile video viewers share videos with others.” !Invodo!!“2 billion video views per week are monetised on YouTube, and every auto-shared tweet results in six new YouTube browsing sessions” !ReelSEO

!!Let’s develop editorial video players that allow access to video

elements without the need for scrubbing.

!Let’s allow users to see *inside* the video content and jump to

what’s relevant.

!Let’s improve video players for the user.

Here we see the current inline video in Men’s Fitness which

disrupts copy flow - then look to Buzzfeed and it’s use of breaking

up video into 3-5 second GIFs to illustrate a narrative quickly and

in an easily digestible/shareable manner.

Here we look to SoundCloud and how it allows users to comment

on specific time codes in files - as well as visualising entire audio

files before actually listening to them.

Here we look at how a combination of these UXs could form a

new way of previewing, sharing and viewing video editorially.

!

Devices that don’t deliver content. (but control it) !!

!

Conclusion. !NOBODY is allowed to create a physical ‘turning a page’

app for Leap Motion or Microsoft Kinect.

!But we need to design magazines for a

future of non-touch based User Experiences.

And we need to start doing that now.

Several people asked how to get into digital magazines and

publishing UX. It’s self learning, time…and knowledge.

!So I’d suggest building things, sketching things, talk, discuss.

Find local meetups, speak at open meetings, attend the cheaper

conferences (and ask as many questions as possible), follow

peers on Twitter and immerse yourself in the world of users, UX,

publishing and new technology / startups. Oh, and place users at

the centre of all your designs and decisions.

!Also - maybe read these books.

Good reading:

!“The Ten Principles Behind Great User Experiences”

Matt Watkinson

!“Don’t Make Me Think”

Steve Krug

!“Lean UX - Applying Lean Principles to Improve User Experience”

Jeff Gothelf

!“A Project Guide to UX Design”

Russ Unger

!“100 Things Every Designer Needs To Know About People”

Susan M. Weinschenk, Ph.D

!Email: robboynes@gmail.com

Twitter: @robboynes

Legal notes:

!Image and IP copyrights remain with the original creators.

!Quotes and data are intended to be accurate but have in some

cases been edited a little to fit onto a slide or summary.

!I’ve been known to make mistakes, so please contact me if you

feel anything is amiss: @robboynes