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: [email protected]
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