Robot Loves Kitten

I’ve been noticing what I’d consider UI mistakes in a few iPad apps of late. This is probably natural, given how new everyone is to the medium (yes, I think tablets are more than just a platform). But no time like the present for learning lessons, no?

Clear Magazine & Adobe

First up, Clear magazine. This app was done in conjunction with Adobe and shares features with the Wired magazine app. Adobe clearly seems to be building a magazine framework, which is great, but I have some questions.

First, why two tables of contents? In the app menu, there is a drop-down list-style index on the left, and a horizontal article preview explorer on the left, which contains much more info (title, excerpt, and preview thumbnail). The UX to have only one.

The first TOC is a simple list

The second table of contents is more appropriate at conveying the app's UX, IMO

Within articles, a bigger problem arises. Often, the enhanced media content breaks the navigation. To get to the following article, you swipe left-right to navigate between articles. But once you’ve clicked to enter zoomable mode, the swipe navigation is broken as is clicking to reveal the top nav bar. There’s no clear way to exit the article. Closing and reopening the app is no help either, since the app remembers your place.

Entering this article breaks the UI you used to get here

Getting out is a game?

Google’s catalog app

Inside Google’s new catalog app, we have a more subtle problem of context. When viewing a spread of products, you see clickable tag icons across the page. What happens when you click on one is slightly unexpected, IMO.

A catalog page with clickable product tags

Product detail view slides in as a pane

When clicking on a product — in the above case, I wasn’t even sure which product the tag was for — a full-screen pane slides in, obscuring the current page. I would have expected a smaller preview dialog with brief product details that I could easily toggle on/off using that same tag icon. This would have been a much smoother way to explore the page. The paned view might be appropriate if I’m looking for complete product information or if I’m ready to purchase, but I still find it a bit odd.

I have to blame Twitter, of course. :) The Twitter iPad app brilliantly pioneered sliding content panes, but in a much more straightforward way. Twitter panes follow a natural “drill-down” information architecture, and more importantly, they don’t completely obscure the way back out.

I think panes make sense for straightforward IA cases, or to show different facets of an app — a shopping cart, for example. Though I would not mix both. The iPad works best with natural UIs, and you have to keep those simple.