News design for e-readers and tablets

The SND Tablet Chat invited four tablet app designers to demo their apps, explain their process and answer questions from the audience. You can take the National iPad News Survey or follow the #sndtabletchat conversation on Twitter. The session was moderated by Steve Dorsey, @dorsey.

Each panelist briefly demoed each their apps and explained their app design process.

Dan Zedek, The Boston Globe
The iPad app postdates the  The GlobeReader app that ran on PCs and Macs built on Adobe Air and paid subscriptions. The challenge was to define what the readers needed and translating that to developers. The Big Picture a full-screen picture viewer was taken from the web and then to the iPhone and iPad apps.

The iPad App could not do what their magazine did. The wanted to provide today and tomorrow’s paper using smart templates and an immersive reading experience. It combines web and traditional iPad navigation with hopeful space for banner ads. They needed to make flexible templates for images, features and sports. It mixes feelings of a “clean pleasant reading experience that pushes a little further.” They are excited to work more with with javascript interactive information graphics.

William Couch, USA Today, @couch
The beta USA Today iPad app has zoomable photos, articles and integrated video. It has classic USA Today branding and design but interactive widgets, interactions native to Apple and careful attention to translate print experiences elegantly to mobile devices. The team worked through the best way to present stories, photos and navigation.

The team worked with Mercury Media. They started by deciding what spaces and interactions they wanted that felt good and organic in landscape and portrait layouts. They explored many typefaces, layouts and photo sizes by doing blind tests. Couch’s team explored a  drawer or popover style navigation.

Jared Cocken from the Wonderfactory, @engers
The Wonderfactory brought Time, People and other magazines to the tablet experience.
Their team focused on giving users a sense of place–the bigger picture and then allow them to go deeper. They began pulling in sources from other stories, including social trend posts and helping users organize content the way they want.

Their news app can be organized by different sections such as Technology or Business and organize the content however they want. Users can pull in their own RSS Feeds and save their own topics. Users can explore different content types across a story timeline (articles, videos, braking news, location, etc) for each story. The app builds an immersive experience that allows users to build “stacks of pages” they are reading. Cocken demoed gaming rendering to recreate a story that could not be captured where readers or photographers cannot be.

Mario Garcia Jr., Garcia Interactive, @garciainteract
Teams need to be a greater part of planning for web, phone, print and now the tablet. There is  a “sweet spot” between things to do and things to read. Tablet stories require new planning to present stories in a tablet format. While developing stories, it’s important for the team to remember who they are and what they do best. “Avoid the temptation to do too many things,” and rather find the services that will do the things you need. However, avoid designing something “cool” that hurts the usability and content. There is opportunity for editors to design in the advertising rather than depending on an agency for a smoother flow. Garcia urges designers to pay attention to reviews and feedback. If someone says it’s the “same as the print” is the worst review possible; which hurts recruiting for new and returning users.

Q: What is the role for newspaper designers for app design?
A: Designers play a role for the front end. Day-to-day there is more opportunity for magazines. As the platform evolves, there will be more opportunities for dynamic layouts and the rich, intimate, touch experience. A 5-tool player, that can be part of a team can bring many skills together to build great packages and a better product. “HTML is really not that hard.”

Q: Why build an app when you can just build a style sheet?
A: HTML5 is truly cross-platform but each device has a special key component to use the given hardware the best, for example animation on the iPhone. There is a benefit to writing natively. CSS3 animations can pull off some animations but are better for flourish rather than full animation. You have to weigh what kinds of features and elements you want. is a demo site that reflows page layouts for varying screen sizes.

Q: Jared, talk about the target towards the print, rather than web reader
A: Before any kind of usability study, you have to establish platforms and values to find out what kind of user experience you need and then how to talk to the users. The Wonderfactory recruited across platforms and brands to understand what they were looking for and then tested  prototypes built on Air. Print users were most hesitant and we are in a time of transition. The goal was to transition and help print users feel more comfortable  while tracking what does and doesn’t work inside the app.
Q: What will the measure of success be for these apps and the transition period?

A: It will depend on the revenue model. If you’re depending on advertising dollars, then creating more useful advertising experience will be more important. You can also look at page views, updates, how long people spend in the app, stories or a subscription model. Topics that get more interest, or what services get more traction can only help once you know what your goals are. Great journalism: writing, photography and graphics brings the best of storytelling to readers.

Q: What will you do to add value beyond being an aggregator with a subscription model?
A: It’s a tough balance because paywalls did not make the USA Today app sustainable versus ads and a free app. Immersive, intimate experiences and graphics strictly for the app can give the tablet unique content, but everything is still on the table. The technology is in it’s infancy. Designing in Indesign and transporting it straight over to the iPad is inefficient. HTML5 templates can populate for different device types. The designer only designs once and the technology adapts accordingly.

About Nina Mehta

Interaction, Experience and News designer. Human-Computer Interaction design Master's student at Indiana University in the School of Informatics.

Leave a Reply