Development of the Interface

Over the past month, we’ve taken the project from initial concepts of how we thought people might use it, through a couple of user tests, and throug

Over the past month, we’ve taken the project from initial concepts of how we thought people might use it, through a couple of user tests, and through a few design iterations from the feedback we’ve gained. So, in this post, I wanted to talk a bit about our design journey using AppFurnace, as we continue to make adjustments to our prototype - just before we launch into another round of tests with some more users this weekend.

Early on, we thought about using a landscape format, to play on the cinema metaphor a bit, and started to design interfaces that would help users appreciate the wealth of cinema history that was in their local vicinity - by providing additional map interfaces to each point of interest screen, alongside the text and images returned from the Know Your Place database. Here are a few of our sketches:

Cinemapping Sketches on a Whiteboard

Cinemapping Sketches on a Whiteboard

Cinemapping Sketches in a Notebook

From these drafts, we created a prototype quite rapidly (including the bare-bones functionality) and tested amongst the project team on our iPhones. It’s often surprising what you discover after initially transferring designs into prototypes, which is why iteration is so important, and we quickly realised that some of the buttons - which worked so well in the Preview Tool - were just too small to be usable on the iPhone.

So after some more work on making pretty much everything larger (and still trying to fit it all within the iPhone screen), and creating a rough tab-system that was meant to elude to a record-card system, we tested the first prototype at the currently disused Whiteladies Picture House, with several residents from our studio:

The feedback was mixed, but the main thrust was that the interface was too complicated to see what was going on, and it was clear we’d tried to put too much into a small space, so we started round two by cutting out a lot of the buttons and focussing navigation on a main menu, which users would go back and forth to, giving the app a much deeper navigation tree, but with a more focussed goal at the end of each path.

We also moved away from having tabs, and instead started using graphics as buttons, in an attempt to make the experience less “app-like” altogether, and also provide a bit more space on each screen, which allowed us to make interface elements larger, and give those elements more space. Our testing also uncovered that some of the features had been missed, for example, few people thought that the images could be zoomed in on, so we hope that adding small suggestions about behaviour of buttons - like a small magnifying glass icon on photos, and a stack of photos for hotspots with more than one image - will help sign-post potential paths to users.

We’re about to test this new interface with some more users who haven’t seen the prototype before, and we’re sure to get some negative comments in the mix, but with every round of testing so far, we’ve gained valuable insight into an outside perspective, that’s helped us make the prototype more usable, logical, and hopefully enjoyable too.