WeWatch on the iPhone, part 2

May 3, 2011 17:02 · 623 words · 3 minute read design development iphone WeWatch

The thing about user testing is that you’ve got to be prepared for your pet ideas to be shot down in flames. And so it was with the initial designs for the WeWatch iPhone app that I’m building. Conceptually, the app is very simple - but it’s bringing home the fact that for interaction, making something simple can be HARD. That’s partly the reason why I’m trying to capture this as I go along - I’m sure that if I’m not careful I’m going to forget the detail of why things turned out the way they did.

Originally, I’d thought about using a stack of sideways-scrolling timelines to represent the various programmes that are on offer. Partly that was because I figured that timelines run horizontally, so the app should be at least have a nod towards horizontalness; and partly as an attempt to do something a little bit different to the “usual” table-based iPhone apps.

The problem was that this didn’t make any sense. Firstly, the timeline itself ran vertically, and the horizontal element were the individual programmes on each channel. That broke the x axis metaphor immediately. Secondly, the sideways scrolling was a problem. With iOS scroll views there are two options - you can have free scrolling, which means you can stop the movement at any point along the axis; or you can have paged scrolling where the view “snaps” to a set of regularly-spaced positions.

The first felt wrong, because it was natural to quickly flick the scrolling element all the way to the end rather than slowly scroll along reading as you went. And the second was problematic because the fact that there might be more programmes hidden away to the right wasn’t at all obvious at first glance. When demoing the app, I found myself repeatedly telling people “you can scroll left to find more programmes” - and if you have to give people instructions like that, you’ve made the interaction too complex.

So it was back to the drawing board, and back to a more traditional vertical list view. This is where the design is currently, with Andrew’s polished pixels: it’s a very much more traditional set of interactions, but it’s MUCH more obvious and intuitive. And intuitive is far, far better than innovative if innovative is also complex.

Technically, it’s a standard UITableView with subclassed cells embedded within a UINavigationController, while the ‘watch’ button on the detail page is a UITabBar placed over the view. Very “standard”, but far easier to interact with - touching the cell causes the detail view to slide in. Touching something is the simplest possible interaction, while scrolling requires far more thought - do I need to scroll slowly, or flick? How do I know that this element is scrollable in the first place? They’re all simple enough questions when they’re asked consciously - but that’s the point, you don’t consciously ask question when you’re using a mobile app.

Progress-wise, the app is asynchronously retrieving data from the WeWatch API on a separate thread, and there is OAuth login to Twitter so the app knows who the user is. The next stage, aside from tweaking the detail of the interface to deal with things like long titles, is to implement the “I’m going to watch this” functionality. I’m not completely sure how this should work at this stage, so it’ll be back to a whiteboard and some paper prototypes to try things out before more coding happens.

In the meantime, if you’re interesting in being a guinea pig, let me know - particularly if you’re using an original iPhone or an iPhone 3. And you can use the WeWatch webapp at the site, which is up and running and fully-functional.