Krysta Curtis adds joy to the world through design.

Screen Shot 2014-08-28 at 11.24.58 AM

Yesterday I created a set of iPad wireframes in Google Drawing that I wanted to quickly turn into an interactive prototype.  I found myself at a loss – there is really no clear cut solution for prototyping interactions on iPad.  And here’s one the thing you need to know about me… when I have an awesome new idea in my head, I need to work FAST!  In these moments I have little patience for learning curves or fumbling around with clumsy UI.  With that in mind, here’s a synopsis of how I found my way to my new favorite prototyping tool.

Adobe Flash

imgresAdobe Flash used to be my go-to tool for prototyping screen-based interactions.  I had devoted a lot of time to learning this complex tool previously so I wouldn’t have to worry about the learning curve here.  However, I still find Flash to be a little on the slow side for quick sketch interactions and prefer to use this tool for more polished presentations.  Also… iPads and Flash do not get along!  So I quickly knocked this off my list.

Mashable’s List

I did a quick search for iPad prototyping tools on Google.  One of the top hits was a Mashable slideshow, 20 Excellent Wireframing Tools for Mobile.  Twenty???? Are you serious?  My patience was already wearing thin!  I browsed through each of the 20 tools scanning their descriptions to see if they matched my needs.  I chose to look into Flinto, InVision and Proto.io.

Flinto

mobile_prototyping_tool_flinto

I started with Flinto and watched the demo video on the homepage.  Neat!  The video demonstrates the ability to scroll screens while having static headers and footers.  It also seemed very easy to drag and drop wireframes into the website.  I dove in a little further – I took screenshots of my Google Drawing wireframes and popped them into Flinto.

I quickly came across my first issue – the proportions of my wireframes did not match the proportions of an iPad screen… there was an ugly black bar under my wireframe.  Doh!  To fix this, I found a photo of an iPad on google image search, dragged it into my wireframes and adjusted the proportions to match.  Problem solved!

Now I added a second wireframe and learned how to link them together.  WOW!  This was one of the most delightful experiences I’ve had in a while.  To link screens, simply draw a box of the tap area on the first screen and then click on the target screen.  A sleek red line is drawn to the target screen and when released, flows from the first screen to the target in a most delightful way!  This experience is great because:

  • There are no drop-down menus to find the target screens.
  • I don’t have to bother with figuring out a naming convention for my screens.
  • I don’t have to navigate into different areas of the prototyping tool – it’s all handled on one screen.

Next, I sent the link of my prototype to my iPad…  BAM!  I had it up and running in just a few seconds.  I was pleased to say the least.  However, when I started navigated between my screens, I did notice a lag and the buttons weren’t as responsive as I wanted.  So I went on to the next prototyping tool:

InVision

full206

I enjoyed InVision’s clean design and easy drag and drop functionality to add images to the project.  However, unlike Flinto, inking my wireframes together required opening up a new window, tapping a button at the bottom of the window and then using a drop down menu to find the filename of my wireframe.  Gah!  This took some fumbling around to figure out.

My immediate goal was to launch this onto my iPad to see how the navigation/tapping felt compared to Flinto. Getting the InVision prototype onto my iPad was just as easy as Flinto. Upon opening the prototype, I noticed the lag was just the same as Flinto’s.

Flinto was still my favorite!  But, I wanted to give the other options a try as well.  Next up, Proto.io:

Proto.io

Screen Shot 2014-08-28 at 1.10.00 PMWoah… Proto.io is hardcore!  There is so much going on!  The learning curve felt really steep.  This tool also seemed a little off-target for my needs – it seems useful as a wireframing + interaction prototyping tool more like Balsamiq.  Since I already had my wireframes built in Google Drawing I wanted to add them instead.

This was no easy task.  I resorted to looking at Proto.io’s help section without any luck.  Finally I did a search on Google and came across a forum with a clear description of how to do this.  This was way too complex for my needs.  Next I looked into Fluid UI:

Conclusion

I decided I could live with the slight tap/laggy issues on the Flinto iPad prototype.  Phew… I had finally chosen the perfect tool for my specific and super fast application.  And now that I’ve completed my prototype, I can say I’m very pleased with Flinto!  I look forward to sharing my prototype with you all very shortly!

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

%d bloggers like this: