Designing an immersive iPad reading experience

I’ve recently been designing an iPad app and thought it would be interesting to relate the principles that came to govern the user experience design:

We quickly noticed that the type of experience characterized by hierarchical menus and tapping through trees of information felt mentally laborious and aesthetically tedious. Looking at apps like Flipboard we found the flow of swiping from one feature to the next to be mentally undemanding and important for not breaking you out of the browsing and reading immersion. So a core principal of the experience became about building effortless flow from one item to the next. We approached this through making the swipe gesture the primary interaction: one item swipes to the next, lists are a swipe-through experience, and even supplementary information is a swipe-in from off-screen. Each moment that you’re not tapping and decision-making feels like an easy, onward flow.

The obvious thing would be to have a page-turn animation for when you move between content or a web-like live build of content on the screen. However, we steered clear of both because the live build was far less polished than an iPad app seemed to deserve and the page-turning seemed overdone and uninspired in a lot of magazines transitioning from offline to iPad. Instead we saw an opportunity to add delight through movement. Building on Apple’s toolbox of transitions and animations, we wanted elements to glide into and out of position in synchronicity. With the ultra-simplified content layout (no web-style headers, footers, menus) there were typically two or three major content sets on the page that could flow onto the page with a lightly orchestrated rhythm, or visual ballet.

We went through a number of prototypes to understand what this experience should look like, a few of which were before the iPad launched. As always, these started out as pencil-and-paper sketches, but as the importance of transitions, animations and flow became apparent we need a tool to bring flat layouts to life. Surprisingly, the tool that helped most for prototyping was Keynote. As a quick way to put a visual flow concept together it was surprisingly effective – using the built in flows and transitions an animated experience concept could be flesh out in just a couple of hours.

Inevitably the app may not quite reach the ideal of the concept, but so far it’s looking to live up to a lot of what I’ve outlined here, despite the brutal limitations of the iPad’s memory and processing power.

Advertisement

About gordonpbaty

I've lived, worked and played with digital products for over 10 years, and I still can't get enough of them. My passion lies in making great user experiences and delightful products. The last few years I've been doing that in the context of innovation and design thinking, which I'm now all opinionated about.
This entry was posted in general and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s