Wednesday, July 22, 2009

Deciding on an iPhone App's Layout Using Paper Prototyping

Coding has been moving along on my current iPhone app. I've got some of the basics working, have a list of TODOs (ie. bugs or features) to move the app forward with the back-end components but I am about to turn a corner. I need to start laying out the UI.

I am designing an app that uses Twitter heavily. I don't want to write yet another Twitter application for the iPhone so there are features I do not need. That said, it will have to be snappy (I've read about issues, and have seen them, regarding scroll speed for twitter updates using tableviews) and have some of the nice features of full Twitter clients to make it attractive to end users.

So I am now presented with how to lay out the app to make it intuitive to use in a limited time. I want the user to be able to quickly send a tweet without have to do a lot of typing. That means I can preload options that the user can choose from. To do that I can use a multitude of options but I am leaning towards UIPickers and Segments but I could do it with TableViews as well. How to choose without jumping in and creating something that users hate or less than optimal?

I've already sketched some ideas so I was heading in this route when I came across Paper Prototyping as a means of UI design. The first article is a good overview of how to use paper prototyping at A List Apart: Articles: Paper Prototyping. The second resource I found which had lots of great ideas on how to use paper prototyping as on Wikipedia:Paper_prototyping.

I enjoyed the A List Apart article for it's chatty style which had some good examples of using this technique. I found the Wikipedia entry had some great ideas on how to handle scrolling items (something I need to tackle) and how to present the paper prototype when handling various UI actions (clicking a link or a drop down box).

Paper prototyping provides the ability to get early feedback from users before code is written about what functionality makes sense (rapid prototyping), usability testing (is the UI usable and easy to navigate), and the apps Information Architecture (can users understand where and how to find info they need). These were some timely articles to come across and I will be working this into my schedule before I start to make decisions about my UI.

1 comment:

Efraim said...

Great write-up!
I would have to add that paper prototyping rapidly is being replaced with Magnetic Prototyping (, because it's faster and some bosses don't understand fumbled pieces of paper ;-)