Analysing digital magazine design: Wired
Handheld portable devices have revolutionised a number of old-world media industries, most notably music and publishing. With all this convenient technology at our fingertips and wallets, is its potential currently being fulfilled?
Original article: Analysing digital magazine design: Wired
I was going to take a 6 hour long train ride and wanted something relevant to my industry and interests to read. I had a strange brainwave while I was waiting at the train station reading a Wired.com article via Flipboard on my phone: why do I not have a digital subscription to Wired magazine? Perhaps a strange thought to occur, but I rationalised it as that they often write great articles about my interests (professional and otherwise), have great design (really, the editorial illustrations are quite awesome and I quite like the creative direction of the whole mag), plus it gives me opportunity to support professional people doing what they do best.
It was my first time with a digital magazine on the iPad — well, not my actual first-first time (I’ve read lots of books and comics on the iPad, plus independently produced PDF-based magazines), but the first time in which I experienced the digital publishing platform and medium available through iTunes and have now observed how the experience was designed and delivered.
I must say (and this isn’t entirely aimed at Wired, but it kind of is as this is the first and only one that I’ve looked at on the iPad) the digital magazine experience was OK, but there’s still so much more than can be improved for a great user experience. This is my account of what I thought was good, what I thought was average, and what I thought really needed addressing and improving.
I’ve spent about 4 years professionally involved with print publication design, from newspapers, magazines and street press, to even producing my own zines and representing a variety of these pro and amateur publications online. While the bulk of my professional work now focuses primarily on digital interactive design I still have a real love for publication design (especially for magazines) and a passion for helping it find a good home on 21st century devices, minds and hearts.
What is a magazine?
I figured I may try to express what I feel constitutes as a magazine; it’s often a collection of articles of varying lengths and subjects, but mostly related to a particular industry or other subject. In the case of Wired, it is a technology and digital culture publication.
Magazines are often very visual publications with photographs, illustrations and type choices which can even differ between the articles themselves. Even within articles there can be a lot more supporting information such as infoboxes, pull quotes, captions, etc. to help encourage a reader to engage with the article, plus provide visual stimulus and variety. With this kind of density and variety of content, the challenge in creating an immersive and pleasurable experience is notable, but equally so the potential to create a deeper and more rewarding experience than what existing magazines (digital or print) deliver is right at our fingertips. We certainly aren’t limited by technology now!
Visual design
The beauty I found in the digital edition of Wired was that it was the tangible print experience without too much the restriction of the web medium. For instance, the majority of online publication companies have websites to deliver their articles, which are mostly standardised: long and wide vertical columns of text with some pull-quotes and images here and there. The freedom of the print medium allows a designer free reign over the layout, whereas the standards-rife technology-restricted web medium (c’mon, CSS columns aren’t adequately supported yet) restricts it somewhat. Whether this is good or bad is dependent on what you’re trying to achieve, but in the case of the digital magazine I found it was great to finally have that full immersive experience without too much the overhead of web standards restricting the layouts (although I do cry on behalf of those who use accessibility tools to absorb their media).
I did find that some of the more-print focused design decisions did impede on the digital experience. Often with long form articles writers, designers and editors will break up the article in smaller “chunks” using various elements like sub-titles, pull quotes, images and other subsidiary visual or textual information that adds more interest and understanding to the primary article. Digital publications obviously tend to allow more depth with this (written below in the section titled “Rich Media”) except that if you’re still following an book interaction metaphor (swiping pages signifying page turns) or have restricted each designed “page” to fit within the device’s screen, then you have the possibility of significantly interrupting the flow of the main article being read — not too important, but it can cause some readers to have to go back and re-read, or potentially drop off from completing an article. Notably, these extra elements can be productive and mark a rest in the reading of an article, but depending on how immersed in the article you are, seeing a page which has only a few paragraphs of the larger article you’re engrossed in reading can feel a bit jarring to the experience. It’s kind of like a larger, digital version of widows and orphans except it can occur mid-article — let’s call them islands!
One of the most oldest and traditional forms of flow interruption is in the ubiquitous page turn, and for this Wired digital publication the page turn is actually a vertical scroll movement, which on every screen is marked with an icon of an arrow reminding the user that they can scroll down to read more (going between articles within the publication is navigable by horizontal swipe gestures, which is more reminiscent of a standard book turning layout). I found it redundant to continually show this “more content” arrow on every article’s individual screen and noted that while it only took up a small amount of screen real estate, I thought a more mindful way to design each article’s screen was to hint at more content to follow by using the content itself (which is employed on most of the smaller or visually detailed articles). It’s worth mentioning that with comic book design a good writer/artist would plan that each spread, in terms of artistic composition and story pacing, would factor in page turns as a beat/pacing rest point or as a point in which to change something. When you have responsive devices though, that can be significantly harder to write/design for! But not entirely impossible.
Rich media
I do have a minor traditionalist view which rejects Internet-hosted rich media within what could assumedly be a static medium — a standalone publication (that I would prefer be equally experienced offline as online) — but the reality is that the cloud (blah… “Internet”) allows us to have that dynamism of real-time data and online media integrated into our digital lives. Still, had I been offline and been reading an article that then relied on a video to further my understanding and experience, I think I would have wept a silent tear if I couldn’t continue to enjoy the article.
My iPad doesn’t have 3G, but we conveniently had a 4G portable WiFi hotspot with us, so my experience with the Internet-hosted rich media wasn’t impeded. I could view the live news and social network feeds they had embedded within (which is great for giving you at-the-moment info about what’s happening or interesting now), plus there were some videos linked in articles that I could watch which continued or deepened the experience of the article. There were no examples of audio, but I very much figured that it would work the same.
Obviously embedding rich media would significantly raise the file size of the publication, plus it could complicate the implemented technology and extend development time, especially if you’re collecting analytics on media interaction.
Interactivity
As I had mentioned a little earlier, the book/magazine metaphor is used: move between articles by swiping left and right, with the vertical scroll to read more of the currently viewed article. There’s a magazine “timeline” slider that appears when you tap the screen and there’s also a table of contents which allows you to go to a specific article (I like the minor touch that there are small icons which represent the embedded rich media within each article). You can star/bookmark specific articles, share to social networks and even see a “birds eye” view of the magazine. There’s even a back button which does what’s on the label.
Oddly though, there’s no search feature (at least that I could find) so I’d imagine that could be a bit annoying, especially if you’re an academic researcher or media commentator wanting to extend the discussion. Notably too there’s no way to select text within the articles either, again making it harder for people to comment or cite. Admittedly, you can’t do this with print media too, but since its digital (and I wouldn’t think that copy-pasting text from a mag like this would be too harmful for their business) one would have thought that it’d be a handy feature to have.
One really cool thing about the digital Wired mag is that it supports both portrait and landscape orientations; the design shapes thoughtfully so it’s no worries if you prefer to read in either oriented fashion.
Throughout the publication there are basic buttons implemented within the articles’ content, however there’s no consistency on whether the button has state activation or not (active, focused, etc.) so often if you press a button there’s no way to know if it had worked (or if it is even a button) unless an operation occurred — perhaps this is a factor of print-focused art/creative directors now operating in a digital interactive space. Many times I had pressed the down arrows that they have displayed on every long form article to indicate there’s more content, and often they weren’t buttons. At the end of the long form article there’d be a “top” button which would act like a button and take you back to the top.
There’s other embedded interactive elements too. One I thought was most successful were images with small title captions at various points that you could press and they’d light up and show extra information, great for infographics. Another one is within the infoboxes in some long form articles, to extend the small amount of space allocated there’d be scrollable areas. These were OK, but in the example pictured, if you kept swiping (because you may not have been aware that you reached the end of the scrollable area) you’d end up swiping to the next article, which is a bit annoying. There are photo gallery slideshows as well although there’s some inconsistent iconology logic present. There are arrows which represent more article content which indicates the article continues below, but next to it is an arrow indicating there are more photos to view. One may assume that you can slide left and right to view more images, but in fact this is a button — sliding left and right will take you to the previous or next article.
Another interesting point to ponder when communicating via icons, especially ones that indicate directional information (in this case Wired are communicating that there’s more information), is within the design language and communication methods employed. Some users can be confused and assume you’re communicating what direction they need to perform their gesture, especially if you’ve trained them up to that point to rely on gestures, or trained them to interact with certain forms of representation — i.e. this icon in a circle could represent a button; an icon in a square or no outside shape represents gesture or that there’s more info — it can be confusing for even those who are technically savvy. This is why design language and communication plays a pivotal role in informing how a user should interpret a symbol or instance of interactivity.
In terms of what I feel could be improved, I would say the visual icon/button communication, plus better user experience regarding the button feedback and actions. For long articles where each screen is a “page”, it’d be nice to have consistent buttons that I could tap to go forward and back between pages as opposed to just swiping vertically (sometimes I’m lazy and I feel swiping is actually more labour intensive than pressing a button).
Advertising
I must say, I was really disappointed when I saw ads within the magazine. I understand ads form a significant part of revenue for publications and sustaining their presence, but I would be more understanding and forgiving had I acquired the magazine for free — my arbitrary logic being that if I pay for something, it should at least give me some respite from ads invading my personal space.
I’d consider it a potentially big opportunity to expand the digital magazine’s readership (and advertising audience) by offering the magazine for free with ads, and offering paid subscription holders the ability to read the magazines for the content. Providing ads can even act as an incentive to get people to pay a subscription if the paid subscription version is ad-free.
I’m aware that advertising can be a positive force (I’ve found Twitter’s feed ads highly informative and useful for the most part, especially more-so than any other company has been able to achieve *cough* Google *cough* Facebook *cough*). I figure that in order to heighten an advertiser’s relevancy to its audience, catered articles integrated within the content would be more valuable (reviews, interviews, instructional how-tos, etc. — and I don’t mean advertorials nor sycophantic articles) but I also realise that it can be more labour intensive to construct, but I find that kind of content more valuable and likely to pique my interests than a plain old ad slapped in willy-nilly. In fact, I think a lot of us have been trained to ignore ads and I can plainly tell you that I do not remember any of the advertisers nor products that are featured in this magazine.
I do feel that is a valid point to consider, that when a consumer is paying for your product that before the transaction occurs they are informed of what they are purchasing. I do wonder that if I had been informed that advertisements would be present within the magazine, that it probably would have affected my purchasing decision (and maybe that mentality to not inform had been their reasoning to reduce variables that may dissuade a potential purchaser). I do find advertising disruptive and unwanted (only for paid services), so to a certain degree I could have just relied on the online website version (or the Flipboard version) as I had been doing it before (Flipboard has advertising, but it’s also free to use). I guess it’s something to think about for later.
Summary
In conclusion, I found a lot of good things to appreciate about this issue and its presentation, however I think that some of the thinking behind the visual, interactive design and advertising decisions affect the user experience. I really feel the existing medium is ripe for improvement; for the moment I feel it is just an average experience with no “wow” factor that may inspire me to recommend it to others to take part in. Perhaps I’m a bit picky and choosy regarding what I feel makes a worthy experience, but for the most part at least the content in the magazine was great even if the presentation has some rough and dog-eared issues present.
Images taken from the Wired July 2014 digital magazine publication are used under the conditions of Fair Use and are employed to illustrate the article’s content for non-profit research and education purposes. If you wish to buy the magazine issue or subscription, visit Wired.com for more info.
