Designing for Digital Magazines - Rob Boynes for Guardian Masterclasses


Published on

This talk 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 current models in digital magazine UX and asks what a digital magazine could be and where it needs to innovate to in a changing media landscape.

It also looks at the importance of user centric design, user testing and creating experiences outside of what we consider 'magazines' - and how working with our users (and readers) could produce something unique, innovative and valid as a business model.


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

This talk was developed and changed with feedback from an original talk I performed at UX CAMP BRIGHTON in 2013 called "Why the page is killing innovation in magazine UX".

Designing for Digital Magazines - Rob Boynes for Guardian Masterclasses

  1. 1. ! ! @Guardianclasses 12 November 2013 Designing for digital magazines. ! ! ! Comment via Twitter: ! @robboynes !
  2. 2. Presenter notes have been added on grey slides. Like this one.
  3. 3. ! What is UX? ! User Experience. Congratulations. You already practice it.
  4. 4. ! 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)
  5. 5. ! 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.
  6. 6. ! Magazines… are user focused. ! Shareable. Robust. Portable. Cheap. Recyclable. Comfortable. !
  7. 7. ! 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.’
  8. 8. 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.
  10. 10. 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.
  11. 11. Padify
  12. 12. 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!
  13. 13. Designers wanted. Test the live beta. ! Help us by giving feedback! ! ! Use the code GUARDIAN for access. !
  14. 14. ! How I designed for devices. ! (and why I stopped)
  15. 15. ! 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 ! ! !
  16. 16. On the next slide we can see a current magazine page and how the grid behind it looks.
  17. 17. Grids control the eye by using hierarchy.
  18. 18. ! The page gives control… ! ! !
  19. 19. ! …therefore the page remains. ! ! !
  20. 20. ! But theres a problem. ! Getting all the things to fit on the 
 page for different device sizes. ! The solution: Hide all the things. !
  21. 21. ! The scroll. ! ! !
  22. 22. 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.
  23. 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.
  24. 24. 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.
  25. 25. ! The hotspot. ! ! !
  26. 26. 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.
  27. 27. ! The result. ! ! A complex and anachronistic User Experience. Trying to recreate magazine UX…but hiding all the things.
  28. 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 restricted app environments. ! This is shown in the next slide.
  29. 29. ! So with all this in mind… ! ! !
  30. 30. I designed a project for The Economist. And clearly learnt nothing from my previous experiences.
  31. 31. There were a lot of devices in the ecosystem to consider.
  32. 32. ! 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. ! !
  33. 33. ! Editorial. ! Non-selectable text. Non-resizable text. Non-shareable text. No full screen images. Pages need signposting. ! ! !
  34. 34. ! Interactivity. ! Poor discoverability. Poor readability. Makes the user work for their content. ! ! !
  35. 35. ! 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. ! ! ! !
  36. 36. ! 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.
  37. 37. ! 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 !
  38. 38. ! The next step. ! ! The problem: The pages and workflow isn’t scaleable. ! The solution: Let’s look to the web. ! ! !
  39. 39. ! Why? ! ! !
  40. 40. ! The rise of mobile. Global annual unit sales (m) 600 450 300 150 0 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 Consumer PCs Tablets Source: Enders Analysis Mobile
  41. 41. ! 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.”
  42. 42. 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.
  43. 43. ! Men’s Fitness ! Create Once Publish Everywhere. Removes Linear Navigation. Uses Native Apps with HTML templates. User Focused.
  44. 44. 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.
  45. 45. 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.
  46. 46. ! Making digital magazine products ‘on demand’. ! Removing the ‘issue’ and creating the ‘timestamp’. Designing for iterative not waterfall workflows.
  47. 47. The following example shows how the user journey works on the magazine brand ‘EVO’. ! The UX design here was authored by @Clearleft
  48. 48. 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.
  49. 49. ! 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.
  50. 50. ! 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.
  51. 51. 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.
  52. 52. ! We are moving away from products and services, towards experiences. !
  53. 53. 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.
  54. 54. 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
  55. 55. ! How do we innovate? !
  56. 56. ! ! “At Amazon, you must write a business case to stop an innovation proposal, rather than to start one.” ! ! Werner Vogels CTO, Amazon AWS
  57. 57. ! 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. ! !
  58. 58. ! 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.
  59. 59. 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.
  60. 60. ! Kill search. ! ! Search is hard work. Search requires you to know what you’re looking for. ! ! !
  61. 61. ! ! “We want to help people discover what they love.” ! ! Ben Silberman CEO, Pintrest
  62. 62. ! 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. ! !
  63. 63. ! Share becomes central over search. ! ! Browsing is still necessary though. ! !
  64. 64. Here is how we could determine what content users might want. It’s not exhaustive - but it’s a start.
  65. 65. ! 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.’
  67. 67. Here we see the idea of commenting on an article level which is viewable before the article is selected on the news feed.
  69. 69. ! Ask your users. ! ! They will tell you what you want to know. If you aren’t user testing - you’re just guessing. ! !
  70. 70. ! 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.’
  71. 71. ! We need to talk about video. ! ! !
  72. 72. ! ! “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
  73. 73. ! ! 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.
  74. 74. 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.
  75. 75. 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.
  76. 76. Here we look at how a combination of these UXs could form a new way of previewing, sharing and viewing video editorially.
  77. 77. ! Devices that don’t deliver content. (but control it) ! !
  78. 78. ! 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.
  79. 79. 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.
  80. 80. 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: Twitter: @robboynes
  81. 81. 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