UX Brighton 2014 - 'Why the page is preventing innovation in magazine user experience.

This talk was presented at UX CAMP BRIGHTON in 2013 and rewritten for a 15 minute redux talk for UX Brighton in January 2014.

It discusses how the magazine and digital magazines in their current guise are preventing innovation. Less prescriptive, and more of a call to action, the lecture discusses the shortfall in current digital magazine UX, asks what a digital magazine should be and where it needs to innovate to.

NB Notes are on yellow slides, White slides are from the original presentation.

Transcript

1. Why the page is 
 preventing innovation 
 in magazine user experience. ! ! @robboynes ! ! #uxcb13 redux - 14/01/14 Brighton
2. The page is the evolution of the scroll. ! The scroll is the evolution of the page.
3. ! 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
4. ! Magazines are user focused. ! ! • Shareable and Portable • Robust and Comfortable • Recyclable and Cheap ! ! !
5. ! 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 ! ! !
6. On the next slide we can see a current magazine page and how the grid behind it looks.
8. Grids control the eye by using hierarchy.
9. ! The page gives control… ! ! !
10. ! …therefore the page remains. ! ! !
11. 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.
12. DRAG MAGAZINE FILE HERE CREATE DIGITAL PRODUCT
13. Adobe created the DPS framework allowing print focused designers to ‘layout’, in InDesign, pages from their magazines and place them within a fixed UI/UX on tablets - originally this was focused only on iPads but later, to various levels of success, this was extended to android tablets and mobiles. ! DPS requires the designer to design pages to fit every individual screen size and orientation. The following slides show the DPS UI. I have used WIRED as an example as it was the first to use the DPS platform - no other reason. ! There are other such folio softwares that use these 
 behaviours and InDesign workflows including: ! Mag+ Future Folio (to an extent - has it’s own non-InDesign workflow) Woodwing (now part of DPS) Press Run
15. The next slide is the storefront.
17. The next slide is the in-issue scrubber. You use this to scan through content.
19. The next slide is the drop down menu. You use this to view favourites and content.
21. DPS and it’s contemporaries caused some initial design problems. The tablet page was smaller in dimension and the workflow was complex and expensive - yet publishers and editors wanted all the print content to be in the digital editions without omissions. ! This was so they could claim an increase in circulation. At the time ABC (the circulations regulatory body) only considered a digital magazine part of the brand circulation if it had exactly the same content as the print edition.
22. ! Trying to innovate on the page. ! ! The problem: Getting all the things to fit on the page ! The solution: Hide all the things ! !
23. 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.
25. This next slide shows the concept of hiding content to satisfy the use of page space. ‘Hotspotting' was rife during early 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.
28. 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 limited app environments. ! This is shown in the next slide.
30. ! Removing linear navigation. ! Moving beyond ‘page turning’ and looking to the web. ! !
31. 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 Rob Boynes.
37. 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.
41. 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.
42. ! Removing the concept of ‘issues’. ! !
43. The following example shows how the user journey works on the magazine brand ‘EVO’. ! The UX design here was authored by Clearleft.
49. 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.
50. ! But…the page remains ! ! There are still some problems as we move from the fixed page to the responsive infinite scroll. ! Firstly, everything is vertical…and really long. ! !
52. ! Do I want to read your 30,000
 word article on my mobile? ! ! The use of infinite scroll has it’s problems. Sometimes too much scrolled content can feel like… ! !
54. ! So what now ? ! ! !
55. ! 1. 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. • If the page is created in print to make the ‘message’ easy to consume, how do we make the message easy to consume on screens? ! !
56. ! 2. Improve video & audio ! ! • Develop editorial video players that allow access to video elements without the need for scrubbing. • Allow users to see inside the video content and jump to what’s relevant. • Video can be disruptive amongst text - how can we use it better? • Make more of audio - audio is passive, complimentary and emotive. !
57. Here we see the current inline video in Men’s Fitness, then look to Buzzfeed and it’s use of breaking up video into 3-5 second GIFs to illustrate a narrative.
59. Here we look to SoundCloud and how it allows users to comment on specific time codes - as well as visualising entire audio files before actually listening to them.
61. Here we look at how a combination of these UXs could form a new way of previewing, sharing and viewing video editorially.
64. Here we see how search in magazines has always been a problem - contents pages usually provided a basic solution to this. ! ! ! 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.
65. ! 3. Kill search & ‘contents’ ! ! • Search is hard work. • Search requires you to know what you’re looking for. • Replace search with relevant content the user actually uses. • Share becomes central over search. • Feedback loops are created for each individual user. • Content lists become irrelevant when all content is relevant.
66. FOR ROB MOST POPULAR MOST SHARED
67. ! 4. Embrace new models ! ! • Forget print UX. • Embrace user focused products. • Design for the user not the device. • Don’t be afraid to cannibalise products for the greater good.
68. ! Conclusion ! NOBODY is allowed to create a ‘turning pages’ user experience for Leap Motion or Xbox Kinect. ! @robboynes ! !
69. Authored by Rob Boynes November 2013 ! Twitter: @robboynes