Using Sketchflow to prototype MonoTouch application

I wanted to see how tricky it would be to use Sketchflow to prototype a iPhone application. I think it’s worthy of a proper tutorial but for now I’ll give a quick pass since 1/2 the battle is just knowing it’s possible.

The first thing I needed was a template for an iPhone, I found one I liked at http://anoriginalidea.wordpress.com/category/sketchflow/. I made this into a User Control and then into a Screen Component (all via single right-clicks). With a couple of grids you can create the basic table view controller layout. Running with the seemingly accepted mono touch community theme of football RSS feeds I created the layout you see below. What you can see is the iPhone control as the background, a simple textbox for the view title, a databound list box pretending to be a table view controller and a stack panel of buttons playing the role of tab controller.

imageimageimage

One of the important aspects of using SketchFlow is to create the navigation and state changes to allow your customers to see what is likely to happen. In my example (forgive the names) I’ve created Screen 1 (the table navigation view) which links to Screen 2 (the detail view). Looking at the screenshots does usually help but with the additional SketchFlow map you can see that there are blue navigation flows between the two. You can also see that I’m reusing two assets on both screens, namely the iPhone and tab components.

So I’ve created a design in SketchFlow, now what? How do I get feedback on this, how do I pass this onto to designers and developers? One way is to use the Export to Word option that creates a nice document for people to get their red pens out and dual over.

image

But this is all very stale, the real advantage is to create an interactive player that you can send out to your customers (WPF) or host on a web site (Silverlight). This allows for annotations & graphical feedback together with a simple way to navigate between the screens and states.

image 

However, with the use of a few behaviours you can get the buttons and UI to execute the transitions by pressing them, far more intuitive and with little effort. I can’t really show that here, trust me the buttons highlight and and click through…

image

If there is enough interest I’ll write a tutorial and publish the source, but hopefully there is enough here to pique someone’s interest in using SketchFlow with MonoTouch. Now if MonoTouch represented the UI as XAML…

Advertisements
This entry was posted in MonoTouch. Bookmark the permalink.

One Response to Using Sketchflow to prototype MonoTouch application

  1. Shane says:

    We did a similar thing to prototype a new UI for a custom-built hand-held device for one of my clients. We took a photo of the device, overlaid transparent buttons where the physical buttons were and then made all that into a component screen. We then exposed events for the various button click events so that we could attach behaviors on each screen of the prototype. (Our device has lots of buttons. An iPhone pretty much only has one – maybe 3 – of course.)ThanksShane

Leave a Reply

Fill in your details below or click an icon to log in:

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 )

Google+ photo

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

Connecting to %s