Loading ...

For today’s college students, who grew up with clicking and zooming as integral a part of reading as page-turning, digital textbooks are a natural step forward. Amazon reported over a year ago that digital books were outselling printed books. The textbook market, which initially lagged behind the general market, is now catching up. Although online textbook platforms like WileyPlus and CourseSmart have been around for awhile (and some of which have companion mobile and tablet apps), their UI experiences vary widely and many of them are about as aesthetically attractive as their print counterparts—which is to say, not attractive at all. Let's face it: Textbooks have a homely history.



Atlas of Anatomy, Second Edition, by Gilroy et al. The broader real estate of the computer screen opened up new ways to display content, such as the progress wheel for assessment. Students can track how they're doing, leave notes and still see where they are in the book on the left-hand side.

But not for long. The Inkling app for the iPad and iPhone makes textbooks as pretty as the iBook Winnie the Pooh—or as pretty as any elegantly designed app like Paper or even Cut the Rope—and just as feature-rich. Launched in the summer of 2010 by Harvard-trained engineer and former Apple employee Matt MacInnis, the San Francisco-based startup has jumped into this fast-growing field, bringing clean design and typography and a fresh approach to reading. Forming relationships with top educational publishers like McGraw-Hill and Pearson, Inkling created an innovative, interactive app that presents even the driest of higher-ed content in a way that is engaging, fluid, collaborative and personal for each reader. In May 2012, they launched an HTML5/CSS-based platform for web browsers at Inkling.com, opening up their books to a wider audience. The iOS and browser apps are free with registration and users can view free sample chapters for every book they offer. We asked creative director Peter Cho to walk us through some of the unique challenges with reinventing (rather than digitally mimicking) what Gutenberg started.

In Inkling, the traditional page structure has been replaced by a more organic, linear flow. The reader scrolls downward to new content, with gentle hops between sections dubbed “cards.” This is a fundamental difference from page-turning in a printed book, page-swiping in an iBook or Kindle book or page number-clicking in other online e-textbook systems. Reaching the end of a page in a printed or digital book always invites the temptation to stop, get distracted and lose the train of thought. The smooth flow of content in an Inkling book has the subtle effect of helping a reader continue on while internalizing a chapter or section as a whole. “We spent a lot of time early on evaluating different options for left-right and up-down scrolling,” notes Cho. “I agree that reaching the end of a traditional page invites the reader to pause. Sometimes this can be a good thing, especially when the content has been crafted so that the page break coincides with a moment of reflection in the content. Other times it detracts from the experience as a reader is forced to hold on to the content from the previous page as they approach the next one. Unless each two-page spread in a print book or ‘screen spread’ in a digital book has been designed consciously, those page breaks are incidental and a result of the ‘container.’


The Professional Chef
(left), Ninth Edition, by The Culinary Institute of America. Features like shared notes must be useful across content categories. In cookbooks, for instance, Shared Notes are a great way to see how others have modified and tweaked recipes, creating a community in the book. Frommer’s Costa Rica Day by Day (right), First Edition, by Eliot Greenspan. Static images like maps become interactive and engaging when transformed into Inkling blueprints like Guided Tours, with relevant pieces of content embedded inside. You can even zoom in on the volcano photo within the poptip.


“We felt strongly in initially designing the platform that the environment shouldn't artificially dictate the structure of the reading experience. Instead, the structure should result from the content itself. In Inkling, you are reading ‘cards’ of varying lengths based on natural content breaks. Cards are stacked into chapters, chapters into units and units into books. The outline view for a chapter gives a quick summary of the cards, including second-level headings and image and video thumbnails. When you’re reading a card on the iPad app, you also have a visual progress bar on the left we call the ‘spine’ that shows the length of cards in that chapter so that you can see at a glance how far you are in the current card and how far along you are in the chapter overall.”

The clarity of the Inkling interface is enhanced by an effective use of Chronicle Text, a sturdy serif from Hoefler & Frere-Jones based on nineteenth-century Scottish book faces, and Whitney, a sans also from H&FJ purposely styled for extended reading. Along with readability, technical issues for both an app and a browser required a careful consideration of typefaces. “We embed the font families in the Inkling app itself on iOS, which involves memory constraints, so we have to be conservative in the number of faces, styles and variants. We’re also licensing the fonts for use on the web, so we face other technical issues there too. We consulted with Jonathan Hoefler on type options and are happy with our choices so far.”

Printed textbooks have a visual voice that has grown over time. Science textbooks have traditionally looked a certain way and art history books another. Even within the sciences, math and physics books have a different visual flavor than, for example, biology books. But in general, within Inkling, there is one textual voice—the message and the visuals vary. This common design across the Inkling UI makes Netter’s Clinical Anatomy just as inviting as Meggs’ History of Graphic Design. “We walk a balancing act between presenting a consistent overall Inkling reading experience and a ‘branded’ experience within each book. I’m not sure how this nets out in terms of the reader’s experience overall, but my suspicion is that readers and reading habits are malleable and the reading environment tends to recede into the background after a while. We try to make the environment as quiet and as regular as possible, to keep from interrupting a user and surprising them in a negative way.”



Campbell Biology (top) lets students take a closer look at 48 three-dimensional molecules, 35 hot spot images that zoom through different layers and over 250 interactive diagrams. Students prepping for an exam have multiple study tools like quizzes and concept checks built into every chapter. Cross-platform access means students can track how they’re doing from their laptop, PC or iPhone. The Professional Chef (center), Ninth Edition, by The Culinary Institute of America is available for iPad, iPhone, iPod touch, PC and Mac, designed to feel native on each device, with adaptable and dynamic content. Meggs’ History of Graphic Design (bottom), Fifth Edition, by Philip B. Meggs includes 44 slideshows, built-in flashcards, Guided Tours of different examples, high-resolution images great for zooming in on, and interactive quizzes. Cross-platform access means students can use in whenever, wherever.


Incorporating some of the original book’s style was also important in order to provide wayfinding and a communal experience between the print and the digital users. “We’ve found even within the constraints of the Inkling platform, there are still creative ways to convey specialized content. In terms of the visual flavor, we generally respect the established style of the print book, including color palettes, typographic treatments and iconography, so that two students in a class, one using the Inkling version and the other the print edition, still feel like they’re reading the same book. We preserve page numbers too, so that the Inkling user can quickly jump to the same page as the print user.”

The reader has control over the text sizes and a range of tools to personalize their experience. As they go through, they can quiz themselves. “Readers can highlight, take notes and add bookmarks. We turn many illustrations into interactive exhibits like Guided Tours or Test Yourself. In each of those exhibit types, the text labels are removed and the user can step through the information at their own pace. In a Test Yourself, for instance, the labels on an anatomy illustration are replaced with buttons, so a student can test their recall of a diagram. Their quiz results are saved, as well as the searches they make while reading. We have plans for users to make their experiences with the content even more customized, so stay tuned!”

The Inkling style or something similar (continuous vertical scrolling; personal notes and bookmarks; social commenting) works equally well for other readable content beyond textbooks and they have launched an interactive e-book publishing platform called Habitat. So far, though, plans to produce an app for the public similar to the iBooks Author is on hold. “We’ve talked about using the Inkling platform for different types of content and publishing needs, so this may be something we look into down the line. For now, we’re working on getting more developers and publishers using our Inkling Habitat environment to create books for Inkling. We launched an early adopter program earlier this year and have been supporting a number of partners creating their content on Inkling. We’ve worked with brands like Frommer’s, where we translated the look and feel of their Day by Day travel guide series to Inkling—it still feels like the same series, even though the platform is quite different.”

 
Frommer’s California Day by Day, First Edition, by Mark Hiss and Garth Mueller. Designing complex content to reflow for the very small screen of the iPhone was a whole new challenge. Of particular importance to Inkling is feature-parity across devices, so that, for instance, you can use the weather widget on your phone as well as on your iPad or laptop.
 
 
With two degrees from MIT, including a masters of science from the Media Lab, a breeding ground for, among other things, forward-thinking typography and design, as well as an MFA from UCLA's Design Media Arts program, Cho was clearly the right hire early on. “Our founder Matt and I got in touch through a pretty random connection, so I feel very fortunate. It was a great fit for me, given my background working on digital reading experiences at the MIT Media Lab and on interactive museum exhibits for a variety of clients. I’ve also been able to draw on my most recent work experience, which was working on user interfaces for consumer electronics clients at MOTO, a design and engineering consultancy.
 

”For print designers and design students eager to try their hand at e-books and other creative solutions for digital reading, Cho recommends the basics. “A good understanding of typography, color and hierarchy are all design skills that translate well from print to digital. And having some skills in programming (that is, coding sites in HTML, CSS and Javascript) is important as well in bridging the gap.” ca
Angelynn Grant is a Boston-based graphic designer, writer and educator. She has taught at Rhode Island School of Design, the Art Institute of Boston, Simmons College and MIT. You can e-mail her at designsharp@angelynngrant.com. In addition, Grant is the host of a jazz program on MIT radio, WMBR.
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In