UX Cambridge: Harry Brignull, From Print to Digital: designing The Week Magazine’s iPad app

Harry Brignull is a UX Consultant for Brighton consultancy Clearleft. He also maintains the DarkPatterns.org site, blogs at 90 Percent of Everything, and tweets as @harrybr.

  • Had a ealisation about our industry: We are all big, fat liars. We have an unwritten agreement about how design happens in our studios — we pretend its neat, never falters, proceeds towards a destination. Agency websites feature ridiculously good-looking wireframes; studio quality photos of our workshops. We pretend it happens in a tidy, linear fashion.
  • In reality it is a massive landscape of possibilities where we have no map, so we have to explore — and that involves red herrings, dead ends, fruitless avenues, and insights that are obvious in retrospect. Early stage design is messy and involves mistakes. We need to start being honest about this so our clients understand what this is all about.
  • The Week Magazine is a summary of the world’s top news that week; subscriber count has always been growing since they launched.
  • Our first big insight, then, was that we are not being brought in to reinvigorate a dying publication; they had a winning formula, we have to not screw it up.
  • Looked at their layouts across the years — it has never changed. Main story always laid out in a grid – event, editorial, commentary, future. We realised it’s not lazy, it’s clever — once you’re familiar with the layout, you can consume the articles faster.
  • How much of this can you fit on an iPad screen? Tiny proportion when compared by pixels on an iPad 2. Strength of the print edition is that it is lightweight and scannable — the content isn’t going to fit onto the iPad screen.
  • Trying to mimic a print version using a multi-column layout gives users a staccato reading experience, with 4-6 words per line.
  • The MailOnline iPad app was so complex it launches into a 19 page tutorial on first run.
  • The client had heated discussions about their goals for their app — only agreed that we had to not screw it up.
  • Did hours of interviews, then a stakeholder workshop — had low opinion of them before, but true valuable output is in shared vision it creates. Did empathy maps/persona sketches, then UI sketches; reviewed sketches with reference back to the empathy maps.
  • Useful, but not for the reason you’d expect. The Romeo & Juliet effect is when a barrier is placed between a person and their desires, the object becomes more alluring — it happens to clients when they have a design idea that never gets implemented, and can lead to radical new change requests partway through. The workshop avoided this, as it meant all those ideas had been explored and rejected already.
  • List of ideas derived from the workshop were all standard things/truisms — but as they came from the stakeholders, they had a sense of ownership.
  • Information Architecture: We need section pages with excerpts of articles; Contents, Section page, Article page.
  • Advertising team wanted ads to appear in relevant sections, we wanted to avoid ads altogether. Pitched idea of full-screen ads appearing between section pages.
  • Made an iOS native app, took it into usability testing. Made the classic architects mistake — designing for fictitious user behaviour that only exists in our heads. Users were casually flicking back and forth between sections (causing the ads to appear much more often), not getting the idea of the three-tier IA, and some that would get down into an article would then get stuck.
  • The feeling of not understanding how your users can be so dumb is actually denial that your design decisions have been so wrong.
  • Problem: Articles pages were too similar to section page, we were not giving enough emphasis to the transition between the two levels.
  • Realised we could use two-pane layout like Apple Mail, with sections on left and the article on right — now we have 2, very distinct, IA layers.
  • Second round of usability testing; all problems solved.
  • We still make some mistakes with gestural UI. The map-based interface used a different UI for moving through articles, which contrasted with the rest of the app and was disconcerting to users. You have to evaluate your interface in context — the whole is greater than the sum of its parts.
  • What made the project successful was how everyone reacted after the first round of user testing. We were lucky to have a client that understood good design process involves mistakes and wrong turns. No mistakes means you’re not exploring or trying anything new.
  • We all stand to benefit by being a lot more honest about how we do design, so next time you’re writing or presenting — don’t be scared, just tell it how it happened.

Harry’s own write-up of his presentation can be read here:

http://www.90percentofeverything.com/2012/04/20/from-print-to-ipad-designing-a-reading-experience/

One thought on “UX Cambridge: Harry Brignull, From Print to Digital: designing The Week Magazine’s iPad app

  1. Thank you for your whole labor on this blog. Betty really likes setting aside time for internet research and it is simple to grasp why. Almost all know all relating to the dynamic method you create precious items by means of your blog and therefore inspire response from website visitors about this concept then our own princess is truly being taught a great deal. Enjoy the remaining portion of the year. You’re the one carrying out a really good job.Hi there, just became aware of your blog through Google, and found that it is really informative. I鈥檓 going to watch out for brussels. I鈥檒l appreciate if you continue this in future. A lot of people will be benefited from your writing. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>