This talk was presented at UX CAMP BRIGHTON in 2013. 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.

1. !
!
UX Camp Brighton November 2013
Why the page is
preventing innovation
in magazine UX
!
!
authored by @robboynes

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
Robust
Portable
Cheap
Recyclable
Comfortable
!
!
!

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. The next slide is the page itself.
You can scroll down for more if the page is designed larger than
the screen size. Page swipes are controlled left to right.
!
It’s to be noted that this could be at odds with iOS7:
!
Swipe Left to Right is BACK in UIWeb
Swipe Right to Left is FORWARD in UIWeb
Swipe Up from long scroll activates the device menu.

23. 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.

24. !
Trying to innovate the page
!
!
The problem:
Getting all the things to fit on the page
!
The solution:
Hide things
!
!
!

25. This next slide shows how a print designer has created scroll
boxes to attempt to fit in all the print matter into a small screen
space - at the expense of the user.

27. 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.

29. 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.

32. 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.

33. !
The result
!
!
An overly complex and anachronistic User Experience
!

34. 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.

36. Several publishers began to question the workflow that DPS
dictated. Dennis Publishing was one of these publishers and have
now removed DPS from their portfolio.
!
Some of these publishers decided they needed a scaleable
solution and looked to HTML and Native.

37. !
The next step
!
!
The problem:
The page isn’t scaleable
!
The solution:
Let’s look to the web
!
!
!

38. !
Remove the
linear navigation
!
!
!

39. 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.

45. 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.

49. 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.

50. !
Remove the
concept of ‘issues’
!
!
!

51. The following example shows how the user journey works on the
magazine brand ‘EVO’.
!
The UX design here was authored by Clearleft.

57. 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.

58. !
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.
!
!

59. 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.
!
For example:
!
“Do I want to read your 20,000 word feature on my mobile”
!
The answer is usually ‘No’.

61. !
!
!
Which makes anything disturbing that copy flow a problem.
!
Inline video is disruptive to reading and are also a poor way
of viewing video.
!
!

62. Here we can see unrelated inline video breaking up copy flow.

64. !
Removing 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.
!
!

65. !
Video
!
!
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.

66. 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.

68. 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.

70. Here we look at how a combination of these UXs could form a
new way of previewing, sharing and viewing video editorially.

73. 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 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.

74. !
Search
!
!
Search is hard work.
Search requires you to know what you’re looking for.
!

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

77. FOR ROB
MOST POPULAR
MOST SHARED

78. Here we see the idea of commenting on an article level which is
viewable before the article is selected.

79. FOR ROB
MOST POPULAR
MOST SHARED

80. Share becomes central over search.
!
Browsing is still integral however:
!
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.

81. !
!
!
!
!
!
!
!
!
!
Let’s create great experiences for users…
!
Beyond the page
BUT relevant to the content and how it’s consumed.
!
!

82. !
Conclusion
!
NOBODY create a ‘turning pages’ app for Leap Motion or Kinect.
But let’s collaborate.
!
!

83. Authored by Rob Boynes November 2013
!
Twitter: @robboynes