Transitioning The Week Magazine’s Reading Experience from Print to iPad.
•
15 likes•12,651 views
The Week is the UK’s most popular weekly subscription magazine, with over 180,000 subscribers. It was started back in the mid ‘90s as an antidote to the feeling of “too much information” that readers got from all the unwieldy, dense broadsheets on the market at the time. Since then the World Wide Web appeared, sending many print publications into a downward spiral. The Week is one of the few publications to buck this trend – actually growing in popularity every consecutive year since its launch. Dennis Publishing knew they had a winning formula for The Week magazine, and they wanted to be certain that none of the magic was lost in translation when they created the iPad edition. This is where we came in – kicking off a project with numerous UX research and design iterations. This talk will give you some insights into the challenges we faced and the lessons we learned in the process.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
Transitioning The Week Magazine’s Reading Experience from Print to iPad.
- 5. Reaction 1: I’ve never heard of it. Reaction 2: Urgh, 90s throwback!
- 7. Similar to Readers Digest? 1500000 1125000 750000 375000 ABC circulation Figures 0 2000 2001 2003 2004 2006 2007 2009 2010
- 9. But actually... 200000 150000 100000 50000 ABC circulation Figures 1995-2011 0 Jan-Jul 98 Jan-Jul 00 Jan-Jul 02 Jan-Jul 04 Jan-Jul 06 Jan-Jul 08 Jan-Jul 10
- 11. 180,000 SUBSCRIBERS
- 12. 180,000 SUBSCRIBERS x £90 SUBSCRIPTION
- 13. 180,000 SUBSCRIBERS x £90 SUBSCRIPTION £16, 000, 000 ANNUAL REV?
- 14. Usual story: “Our print publication is dying, lets try to reinvigorate it with a whizzy interactive iPad app” The Week: “We’ve got a winning formula, don’t screw it up”
- 15. 2008 2010 2012
- 16. 2008 2010 2012
- 17. Event → Editorial → Commentary → Future
- 18. Event → Editorial → Commentary → Future
- 20. Comparing by relative physical size
- 21. Comparing by relative pixel size
- 24. Text ↕ 6 pixels
- 25. MailOnline iPad app: Interaction Design is so complex it launches into a 19 page tutorial on first run.
- 37. Our Proposed IA
- 38. Create section pages, containing excerpts of articles.
- 41. Our Proposed IA Main News The List Politics Property World at a glance Food & Drink Contents page: People Travel Briefing Companies in the Best articles news Health & Science City Talking Points - a big table of contents Talking Points City Commentators Sport Shares Letters The Last Word Books Drama & Film Fine Art & Exhibitions Main News Section page: - (Politics, Sports, etc) with article excerpts. - Full screen ads between sections (1:4 ad to article ratio) An Article Article page: - where you actually do the reading. - No in-article ads because they’re annoying
- 42. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word
- 43. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad
- 44. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 46. User Research
- 49. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 50. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 51. Contents Main News Drama & Film Politics Fine Art & World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 52. ... urgh, there are way Contents Main News Drama & Film Politics Fine Art & too many ads! World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 53. ... urgh, there are way Contents Main News Drama & Film Politics Fine Art & too many ads! World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 54. ... urgh, there are way Contents Main News Drama & Film Politics Fine Art & too many ads! World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article
- 55. ... urgh, there are way Contents Main News Drama & Film Politics Fine Art & too many ads! World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article What do you mean, there are section pages?
- 59. The whole point of this magazine is that it provides very concise round-ups and excerpts of the past week’s news.
- 62. Article list here. Contents list here (Politics / Arts / Films / Sports etc)
- 65. ... urgh, there are way Contents Main News Drama & Film Politics Fine Art & too many ads! World at a glance Exhibitions People The List Briefing Property Best articles Food & Drink Health & Science Travel Talking Points City Talking Points Sport City Commentators Letters Shares Books The Last Word Solved. Main News Politics Sports Ad Ad Ad An article An article An article An article An article An article What do you mean, there are section pages?
- 66. *But we did still make some major mistakes with the gestural UI
- 69. So, why is it a successful app?
- 70. If content is food, then the journalists are the chefs, not us.
- 71. Huge Thanks to: Dennis Publishing for allowing us to talk openly about this project Kaldor Group our awesome development partner
- 72. Harry Brignull | 90percentofeverything.com
Editor's Notes
- This talk is basically the story of a 10 week, 2 man project – Paul Lloyd as Visual and Interaction Designer, Myself as UX Lead – and how we designed The Week magazine’s iPad app. \n\nNow, I’ve never actually designed an iPad app before, so there was a big learning process for me, and I thought it would be interesting to share - particularly given the app’s success. \n\n
- After launch, during the free trial period, it was in and out of the the number 1 spot in the UK Newsstand and News categories a few times, and never out of the top 20.\n\nI thought that was just due to the free trial - people love free stuff, right? {click}\n\n
- But the day we went it went from free to paid, we went to top grossing UK app Newsstand app, and for the first couple of days, number 11 grossing ipad app OVERALL in the UK. \n\n\n\n
- It sounds like I’m bragging, and I guess I am, but really I’m just trying to set the scene. \n\nWhat did we do right? What mistakes did we almost make? I think there’s a good story here that you’ll find interesting. \n\n
- So, here is The Week Magazine. The Week is essentially a round-up of the week's news. \n\nThe editors of this magazine read all of the world’s top newspapers every day for a week – so that’s maybe 100 newspapers– and they’ll consolidate them down into a single, lightweight magazine with only the most important excerpts. \n\nIt's main competitor is apparently The Economist. \n\nWhen Andy Budd first told me about this project, My first reaction was basically a blank look as I’d never heard of The Week before. \n\nLooking at the magazine, I thought it looked like a bit like a relic from the 1990s. \n\n
- In fact, here’s a cover from 1999. It’s not that different, apart from the colour change and a slightly different layout. \n
- Before I’d even been briefed, I guessed it was a bit like Readers Digest. \n\nOne of those magazines you see in dentists waiting rooms, whose readership is so old, they are actually dying off. \n\nAnd I kind of assumed that we were being brought in to reinvent it for the iPad with some clever new interactive techniques. \n
- Then I saw the performance figures for The Week my jaw dropped.\n\nIts subscriber count has grown every year since it launched without a single dip. \n
- So we've got 180000 subscribers [click]\n\nAnd if they pay £90 a year, then the revenue is …. theoretically [click]… wow.\n\nIn reality, it could be a few million less because of promotional offers, but who’s counting. It’s clearly very profitable. \n
- So we've got 180000 subscribers [click]\n\nAnd if they pay £90 a year, then the revenue is …. theoretically [click]… wow.\n\nIn reality, it could be a few million less because of promotional offers, but who’s counting. It’s clearly very profitable. \n
- So we've got 180000 subscribers [click]\n\nAnd if they pay £90 a year, then the revenue is …. theoretically [click]… wow.\n\nIn reality, it could be a few million less because of promotional offers, but who’s counting. It’s clearly very profitable. \n
- This is important, because it formed one of our first big insights. Our first design guideline. \n\nI realised we weren't being hired to reinvigorate a ill publication. They didn’t need to reinvent the brand. They didn’t want to experiment with new kinds of journalism or different kinds of content.\n\nThey had a winning formula in print, our brief was to not screw it up in the transition to tablet. \n\nWe just needed to get it onto the iPad in a way that really worked. \n\n
- We started out looking at the double page spreads in the print magazine, and we noticed it actually used some highly standardized layouts and visualisations. Look at these three issues from 2008, 2010 and 2012. The layouts are basically identical, page for page. \n\nThis isn’t lazy design - the layouts become highly intuitive after you’ve read a few issues. \n\n\n
- We started out looking at the double page spreads in the print magazine, and we noticed it actually used some highly standardized layouts and visualisations. Look at these three issues from 2008, 2010 and 2012. The layouts are basically identical, page for page. \n\nThis isn’t lazy design - the layouts become highly intuitive after you’ve read a few issues. \n\n\n
- For example, the main stories spread is ALWAYS laid out in a left-to-right grid with "What happened", "What the editorials said", What the commentators said" and "what next". \n\nSo once you're familiar with this layout, you can consume a hell of a lot of information very quickly, while it still feels light and readable.\n
- \nThe whole magazine does a great job of being a bit a crib sheet for the news - without talking down to you. \n\n\n
- Here’s another example. The world map. \n\n
- The whole magazine does a great job of being a bit a crib sheet for the news - without talking down to you. \n\nHere’s another example. The world map.\n\nThe layout is identical every month. \n\nThis doesn’t get boring because the reason you’re reading this magazine is to consume the entire week’s backlog of news very quickly and the formula simply helps. \n
- And here’s the briefing. Again, same layout every week. Structured with a plain english Q&A, asking the obvious, direct questions. \n\nHow did he gain power? \nIs he more moderate than his father? \nWhy did the West misread him? \nAnd with a pink call-out box usually showing a different angle on the issue. \n
- So having seen all these spreads, we realised how important the layout is to the magazine’s success. \n\nAnd we started thinking "How much of this can you actually fit on an iPad Screen?"\n\n It actually is quite shocking how little you can fit.\n\nWhen you compare the physical sizes, you the iPad is obviously smaller. (like this)\n
- But the thing about the iPad 1 & 2 is that it's not only much smaller but it's also much lower resolution. So if you compare on pixel size alone, the iPad is just tiny. (like this)\n\nSo on a double page spread you can fit maybe 1900 words with a few small pictures. On an iPad screen you can only fit about 480 words, and forget the pictures. \n\nNow I have to admit, this worried me a lot. The strength of the print magazine was its at a glance scannability, and the lightweight feel. Wasn't the iPad going to just kill this?\n\nSo we started thinking about how to fit the content onto the iPad screen. There was a logic to this, but it's a dumb logic. Trying to cram stuff in! It's almost like being ashamed of the iPads weaknesses. Smallest text possible. Best possible likeness. Let's make it as similar to the mag as possible!\n\n
- Sounds silly but it happens. Here's an early version of the NYT. \n\nAbout half of the time you're getting four words a line, which gives you a really staccato reading experience. "BP on Thursday // night restarted its most /// ambitious effort yet to plug the //" The reader really needs a few more words per line but it's not possible when you're try to mimic the print edition with the three columns. \n\nThree columns only work in landscape mode on the iPad 1 and 2. \n
- And look the image captions. \n
- Fetch me my magnifying glass! \n\nIt's not actually possible to make the typeface any smaller the counters would get filled in, so the white bit in the middle of the letter E would be all grey.\n
- Equally odd is the other extreme - to forget about imitating print and to say 'let's take advantage of all the things the iPad can do. Let's add multimedia like its 1999! Let's add social features like its 2011!' \n\nReally both of these are silly stances because they are all about the medium and not the strategic objectives of the publication itself. \n\nThe thing is, when we first tried to talk to our client about their objectives with the app, they ended up getting into heated discussions. The only thing they really agreed on was that it was very important for us not to screw it up. \n
- http://www.informationarchitects.jp/en/wired-on-ipad-just-like-a-paper-tiger/\n
- \n
- We realised it was too early for design. What we needed was a shared vision.\n\nSo instead of trying to design out way out of this problem, we needed another approach. So we started by carrying out a hell of a lot of stakeholder interviews. Over 20 hours of interviews in total. We got lots of consensus on the magazine's character and strengths. Not so much regarding the iPad app's features. \n\nWhen they were done, we ran a big workshop.\n\n
- \nI have to admit that before I worked at Clearleft I always thought that sketching workshops were a bit bullshitty and one of things that gives your client a vague warm glow but ultimately contributes very little to the design process. \n\nTurns out I was just thinking about them in the wrong way. \n
- Although the physical output of a sketching workshop is a load of half-baked interface ideas, the true value is in the shared vision that it creates. \n\n
- The point is, on a project like this, you have a number of very diverse strong-willed, power-wielding stakeholders. \n\nIf they don't reach consensus early on, you are sitting on a time bomb.\n
- At some point this lack of shared vision could derail the project.\n\nSuddenly all of the seemingly rock solid goals can change and if it happens late-on in the project, you could be at risk of having to throw away a load of highly finessed design work.\n\nSo what we did in our first workshop was to lay out the interview insights. "This is where you have agreement… This is where you don't." Then we left that there and moved onto some exercises.\n\n\n
- First we separated them into teams and had them create empathy maps - these are essentially "persona sketches".\n\n\n
- You give a team a blank template, like this, and you ask them to fill it in according to a given user type which we agreed in the session. \n\nFor example, one user type was the young iPad owning new subscriber who discovered the app through the App Store, but had never heard of the magazine before \n\nAnother was a retired GP who has subscribed to the print magazine all his life, not so iPad savvy, but has switched to the app because he gets it bundled with his print subscription. And so on. \n\n
- Then we moved onto sketching. We mixed up the groups and had them each sketch the UI for a unique area of the magazine. One group did the property section, another did world at a glance, and so on. \n\nAfter these exercises, we reflected on the sketches by referring to the empathy maps.\n
- So we'd say things like "How would the existing subscriber - the retired GP - react when faced with this interface. What would he do. Would he get it? Would he like it?"\n\nThis meant everyone got to articulate the cool ideas they'd had for this app - and they got to realise first hand that when you converted these ideas into an interface, problems emerged.\n
- This was really important. Have you heard of the Romeo and Juliet effect?\n\nWhen a barrier is placed between a person and their desires, those desires become intensified.\n\nThis is because the barrier prevents them from experiencing their desires in the flesh – warts and all – and instead causes them to long for their fantasy of the desired object, rather than the object itself. \n\nFantasies are more alluring because we gloss over the bad bits, and generally the desired object takes on a mystical perfection. This is what can happen when your client has a design idea that never gets articulated. It becomes sexier to them as time goes on, while the interface you're building for them becomes less sexy.\n\nThe sketching and reflection activities really helped prevent this from happening. It revealed the warts in the stakeholders nascent ideas.\n\n\n
- Anyway, at the end of this, some very clear shared objectives appeared. \n\nA UX designer would instantly recognise them as variants of Keep-it-Simple and Minimum-Viable-Product and truisms like 'readability trumps gimickery' but the point was that these ideas didn't come from us. \n\nWe didn't plant the ideas, they reached them themselves! They had a sense of ownership. \n
- \n
- First off, we realised we needed section pages, which would contain excerpts of the articles. This is not a new idea - it’s a classic concept that’s been used on the web almost forever. \n\nThese two screen grabs are from BBC News in 1998. \n\nI’m not precious about using classic design patterns. If it’s familiar, then users will find it intuitive and they wont need to stop and think. \n
- In the print magazine, each double-page or single-page spread consists of a section. We thought we’d preserve these sections for consistency’s sake. \n\nSo all we needed to do was cut each spread up into excerpts, like this...\n
- To fit it onto an iPad screen. So we’d end up with a nice section overview page , like this. \n
- Contents page: - a big table of contents\n\nSection page: - (Politics, Sports, etc) with article excerpts. - Full screen ads between sections (1:4 ad to article ratio, just like in print)\n\nArticle page: - where you actually do the reading. - No in-article ads because they’re annoying\n
- So here’s how you’d navigate. You tap on an item in the contents page [CLICK]\nand you’re taken to that section Where you see excerpts of a series of articles. \n\nFrom there you can swipe left and right between each section. Once you see an article excerpt that you like, you tap on it and you’re taken into the article where you can swipe through the pages; and then straight into the next article, uninterrupted. \n\nIf you want to go back up a level, You simply tap the button in the top left. I think this is in the iOS HIG. Doesn’t get more standard than that.\n\nAd density is something we were really strict about. The print magazine consists of 25% full pages, 75% content. In print, Ads never interupt an article and are never placed between articles within a section - mainly because each section fits neatly on a double page spread.\n\nNevertheless, we wanted to achieve the same effect on the iPad. No reading interruptions. So we put the ads between the sections on the second level, and no ads between or within articles on the third level. \n
- So here’s how you’d navigate. You tap on an item in the contents page [CLICK]\nand you’re taken to that section Where you see excerpts of a series of articles. \n\nFrom there you can swipe left and right between each section. Once you see an article excerpt that you like, you tap on it and you’re taken into the article where you can swipe through the pages; and then straight into the next article, uninterrupted. \n\nIf you want to go back up a level, You simply tap the button in the top left. I think this is in the iOS HIG. Doesn’t get more standard than that.\n\nAd density is something we were really strict about. The print magazine consists of 25% full pages, 75% content. In print, Ads never interupt an article and are never placed between articles within a section - mainly because each section fits neatly on a double page spread.\n\nNevertheless, we wanted to achieve the same effect on the iPad. No reading interruptions. So we put the ads between the sections on the second level, and no ads between or within articles on the third level. \n
- Boring really, isn’t it. It’s so standard, it’s just unremarkable. \n\nThere was nothing evident in this IA that might cause users to become disoriented, confused or annoyed.\n\nIt’s been tried and tested a million times before, hasn’t it! \n\n\n\nImage credit: http://www.flickr.com/photos/lineart-rules/6215879656/sizes/l/in/photostream/\n
- \n
- So we built a prototype and we did some usability testing. \n\n
- It tanked. BIGTIME.\n\nAnd suddenly I realised, usability testing is fun when it rips apart someone else’s work. \n\nBut when you’ve spent weeks selling the idea to your client’s CEO, it’s pretty depressing. \n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- So basically users were coming into the issue, tapping through to a section, [CLICK] navigating through the sections, [CLICK] and then being horrified by how many ads there were. [CLICK]\n\nSo in trying to keep the ads out of the articles in the layer below, we created this primary user journey were every other page was an ad. In retrospect it was incredibly stupid. \n\nAlso, users just weren’t getting the idea of these three layers. [CLICK] Quite a few of them would find there way downwards to the articles, [CLICK] but then get stuck down there [CLICK]. They needed prompting to tap that top-left arrow to up a level. Even when they did, they seemed to lack this three layer mental model. \n\nLet’s take a look at one of the spreads\n
- This is the “People” spread” [click]\n\nIt turns out, the magazine consists of numerous very short articles. Some were so short, they didn’t require tap-through - we put them entirely on the spread page. [click]\n\nOther articles were a bit longer, but not that much longer. So we had to use these ridiculously short excerpts. \n\nAnd we just truncated the articles. We didn’t write new, enticing lead-ins. \n\nSo essentially, we created these section pages that were journalistically quite vacuous. They left the readers feeling underwhelmed and uninspired. \n\nAnd this is what you’d get if you tapped through on the snoop dog article, for example...\n
- It’s such a dull transition. \n\nAnd since this page looked so similar to the section page, many users didn’t realise that the were at a different layer of the IA. [CLICK]\n\nThe label BACK up here also was really damaging. It’s just the wrong label. Back means back. What we want here was a label that performs an “up a level” function. \n\n
- It was a real lesson in understanding the nuances of journalism. The whole point of this magazine is that it provides very concise excerpts of the past week’s news. \n\n
- And in creating those section pages we created this weird idea of an excerpt of an excerpt. \n\nConfusing really. A bit like Inception!\n\nWe realised we were massively overcomplicating something that probably had quite a simple solution. \n\n\n
- That evening, on the train home, the penny suddenly dropped. Paul suggested we could use a two-pane layout like Apple Mail. \n
- So the contents list would go here on the left [click]. Just a simple text list of the section names. \n\nAnd on the right [CLICK], you’d get a list of the articles for that section. \n
- Like this. \n\nThis design gave us a visually distinct contents area - this would never get confused with the articles. \n\nIt gave us a simple two layer IA. You were either here, in the contents area, or in an article. \n\nAnd it gave us far better use of space. This is clearly the way to do it when you have numerous short articles in the exact same sections every week. \n
- When you tap through to an article, you get this - a nice visual impact. It was going to cost a little more each week, but we now knew that spend was necessary. \n\nWe got rid of that crappy back button at the top left. Now it’s just “contents” which makes a lot more sense.\n\nOh, and now the ads only appear after the final article of each section. So that ad density problem went away. \n
- And we took this into a second round of usability testing, and it FIXED all of the problems I described earlier. \n\nI’ve never ran a project before with that big a difference between round 1 and round 2 usability testing. \n\nThis was a real relief. \n\nReally I think one of the reasons the app has been successful is not because we ran two rounds of usability testing, but because we had the guts to completely redo the IA. \n
- \n
- So, there were some parts of the interface that didn’t make it into the usability testing. The issue chooser carousel, for example. \n\nThe first prototype of this made by Kaldor - our Dev partner - didn’t feel right. It felt gluey. But that didn’t matter because we all got to play with it, and gave feedback, they tuned it, and within a day or two it felt perfect. \n\nThis is what you call dog fooding - right - you basically do the usability testing on the internal team. It’s not great but it’s good enough for small things like this. \n\nBut there was on part of the magazine that didn’t get usability tested or dogfooded. \n
- The map at a glance interface. This looked great in photoshop, and it’s in the live app, but it’s all wrong. \n\nFirstly, you can’t use your thumb whilst holding the device to hit these buttons. \n\nThe rest of the articles, you can use your thumb to swipe through from page to page. When you get here, you can’t. Suddenly you have to start stabbing at these tiny hit areas. \n\nAnd worst of all, we designed it so that swiping takes you onto the next section. A swipe should simply take you onto the next article within this section, just like the rest of the magazine. For some reason we did it differently here, and it was a mistake. \n\nAll this really just goes to prove that you really should do usability testing. If you don’t, you really HAVE TO do dogfooding. If you don’t do that, you’re not going to do too well in the appstore. \n\nLucky for us, we solved most of the big problems before we launched. \n
- So why is it such a successful app? \n\nI think it’s because it just because it delivers a good simple reading experience. It’s because of the mistakes we avoided. \n\n\n\n
- To use a restaurant metaphor, if the magazine content is the food. The journalists and editors - they’re the chefs. They’re the real heroes here, not us.\n\nThe app’s interface, really it’s just a delivery mechanism. It does need to be well designed, but in a subtle manner. \n\nMost of all, it needs to just stay out of the way and let the content do its thing. \n\nI hope that this talk has demonstrated that achieving that is very tricky indeed.\n \n\n\n\nImage credit: Chef Patron Marcus Wareing (http://www.luminairemagazine.com/2010/marcus-wareing/)\n
- \n
- \n
- \n
- A lot of newspapers and magazines give you free access to their tablet editions if you already have subscription with them - which you would have set up through their OWN website or by post or whatever. \n\nSo that’s NOT through iTunes or the Appstore, that’s through their own entirely separate payment system. \n\nThis can get kind of confusing to users if it’s not presented correctly in the app. \n\nUsers need a way to either say “hey, I’m already a subscriber, I don’t want to see any “buy now” or “subscribe now” buttons when I open the app. I just want to see all of my lovely issues that I’ve already paid for. \n
- As you can see from this assortment of reviews, a lot of apps fail to provide a good UI for this. \n
- Here’s an example with The New Yorker from a few months ago. \n\nPrint mag subscribers are opening up the app and wanting to get their digital editions at no extra charge because they’ve already paid for them. They’re not realising that they need to do something special in the interface. \n\nThere’s just too much going on up here. Arrows pointing everywhere, shit loads of buttons, too many choices.\n\nIn fact what they need to do is tap the top right button. Lots of people weren’t doing this, then buying a subscription or an individual issue, and then getting really angry that they’re paying twice. Of course, if they then contact apple, apple will then say “hey we dont have anything to do with your existing subscription with this magazine” and if they contact the magazine, they can’t cancel the in-app purchase because that’s apple’s domain. So it’s awkward. \n\nEven if you do tap the top right red button, you’re then taken to this page...\n
- Which does seem a bit weird. You have to confirm your account, then register an account? \n\nSo, a user will be thinking why on earth do I have to make two different accounts? \n\nFrom a technical point of view, it’s understandable, they’re trying to associate your print subscription account with your web account, so you can then have a password to log-in. \n\nFrom a UX perspective, this is a horrible first-run experience. We knew we had to do better.\n
- \n
- \n