How to select a mobile prototyping tool

This week I needed to find the best prototyping tool to build a series of user testable interfaces on an iPhone. I have built several prototypes using Balsamiq but it was always in the context of trying to gather feedback from product owners on workflow thru the app design. It is a great tool as they supply templates for just about any user interface know to man on their Mockups To Go site. I like using this tool to capture my vision and to explore several alternatives. Using the Balsamiq templates, I can quickly see if the design will actually work. I also use the prototypes to test user scenarios so I know they work at least for me. If I cannot get thru the work flow navigating thru the app then there is no need to test actual users on the interface. Another side benefit of this type of prototype is to get general acceptance from the product owner. Whether it is used to get additional funding or to demo to potential customers as a sales aid, when working with entrepreneurs I find these visual prototypes are invaluable. The product owner is paying for a product and a prototype can definitely help them visualize what they are spending their hard earned money on. Of course there is nothing better than actual end user testing, but their time is precious also and should not be wasted with half baked prototypes that cannot pass a smoke test.

The best thing about Balsamiq is that it has two modes for creating an output clickable PDF. It can look either like a hand drawn sketch or a wireframe. Another nice feature is when exporting a PDF the output can be optimized for viewing (which is great for discussion of annotations recorded in document) or by shrinking the output to fit a page (which is ideal for printing the PDF to make hard written notes while in a conference room). The last feature that I find really useful is that the link hints are optional. For user testing you never want them to appear, but when in initial discussions they are really helpful for the product owner to see the intended user flow thru the app.

Since I was already familiar with Balsamiq, I started building a two page prototype by using Words with Friends app. It was an app I use all of the time and it has some interesting uses of standard iOS controls as well as some custom components. My intent was to see how long it would take to build the two screens including all of the visual treatments and the interactions between the two screens. I also need to use the standard iOS 7 look-n-feel. This is very easy for Balsamiq as the iOS 7 templates already exist at their site. The biggest unknown for me at the start was how the clickable PDF would work on my iPhone. The end result has to be a workable prototype that actual users can use so it cannot just look good it has to be interactive and useable.

1) Added iOS 7 controls inside iPhone device using Balsamiq template

2) Removed device template

3) Duplicated first page
4) Shifted content to right
5) Added settings screen
6) Added clickable links on vertical bars icon

 My first attempt at getting the clickable PDF on my iPhone was to email it to myself. When I opened the PDF on my iPhone, it was not the best user experience as the PDF was embedded in the email app  decoration and the links did not work. I tried both Yahoo! and Gmail and neither one of them were acceptable. I have both Dropbox and Goggle Drive, which worked by using the equivalent of a preview app on the iPhone. My next attempt was using an app called File Browser as it integrates with iTunes. When I connect my iPhone to my Mac, I can then drag the clickable PDFs to the File Browser app and that works as well. I needed to find a better way as I did not want to depend on DropBox, Google Drive or having the physical device attached to my computer.

After an hour of research I found an app called Documents by Readdle. It was a great find as it supports all kinds of network storage alternatives and I have absolute confidence that any iPhone used for testing will have access to one of these methods. The list is quite impressive: iCloud, Dropbox, WebDAV Server, Windows SMB, Google Drive, FTP Server, SFTP Server, SugarSync, Box, Office 365 Sharepoint, SkyDrive and CloudMe. Even better the app has settings on how to view a PDF by using the built-in iOS Viewer or the Readdle PDF Expert. This is the best find of the week as it is also free!

After getting that to work, it was time to switch to something completely different by using a tool I had not previously considered. I found a great list of prototyping tools written in July, 2013 and posted on Alan Cooper's web site. I am not a big fan of subscription services, mostly because I don't do prototyping full time. I am also not a proponent of becoming an expert in a single tool as that tool may become obsolete by the time I conquer it or a better one may come out and then switching will not be that easy. I spent time evaluating two tools. The first is called AppCooker but it has a big draw back as it only runs on an iPad. There is a similar tool called Blueprint. Both of these tools come with free app viewers with examples to try them out. It turns out they both did the standard iOS Clock app so that made it easy to compare them on the user interaction side. I was not impressed with either one enough to buy them on my iPad. For starters, why would I want to build a prototype on an iPad for an iPhone? Time to find another tool.

One tool that kept popping up in searches and blog posts was called Antetype, so I thought it would be good to study it. They have nine training videos on their web site so I watched them all to get a feeling for whether I would like to use it. It has many great features and I am sure you could build any prototype known to man using it, but with great flexibility comes great complexity. They also had a community and an impressive gallery on their site. I would be willing to invest time in this tool if it was my full time job, but since it is not I need to find something else.

One of my favorite speakers and writers is Luke Wroblewski, so I searched his site to see if he had any suggestions. Lo and behold, he suggested Keynote. Several years ago I used PowerPoint to quickly put together a linkable presentation but it was just so simple that I never considered using it again. It turns out that a company called Keynotopia has created templates for Keynote to do the same thing as I had done with Balsamiq. Besides having a great web site, there list of templates or themes as they call them is very impressive. Before buying the Keynote Bundle I tried build a couple of simple pages in Keynote with custom transitions. I typically don't like such things in a presentation as I find them distracting, but to simulate iOS page transitions, it seems like a perfect alternative. TI quickly found the best thing about using the Keynotopia templates as all of the iOS 7 components are vector drawings! The following screenshots show how close these are to the Balsamiq screens. It took about the same amount of time but that is good news as I have never used Keynote in this way before so I can had a learn how to best to set links and use the templates. The first tricky part was adding a clickable link that works on the iPhone. The best way I found was to add a transparent region around the vertical lines icon; otherwise, even with the lines being grouped together, the tapping on the iPhone did not work properly. I also found that using the Push transition was perfect to simulate the switch from one of these screens to the other. When on the first screen the transition was left-to-right and when on the second screen the transition was from right-to-left. Wow did that work perfectly and look great at the same time.

first screen using Keynotopia

second screen using Keynotopia

Since I am surrounded at work with great developers, I thought a third option would be to let one of them build the same thing using Apple's Xcode. All of the data would be static so I wanted to see how much storyboards could be used with the absolute minimum amount of Objective-C code. At the start I thought it would be nice to use only storyboards, but we soon discovered that in this case that was impossible. The biggest amount of effort was spent on getting the page transitions working correctly and also getting the second screen appear with the first screen partially exposed. This behavior used in many iPhone and iPad apps is not built into iOS controls and so must be manually created. I also did not want to bring in any other external libraries to help us. It was really an exercise in creating the very same interface and discovering which one would be the best way to deliver prototypes. The only real drawback to the native iOS app is that we would have to use a tool like TestFlight to deploy the app outside the Apple store for user testing. The best thing of all about the using Xcode to build the prototype is that scrolling to see the rest of the contents in the first screen just works as expected, but in the Balsamiq and Keynote prototypes, this behavior would have to be implemented as separate pages. It can be done, but is more painful and time consuming.

first screen using Xcode

second screen using Xcode

As in everything I do, there are tradeoffs to be considered. I definitely prefer Keynotopia to Balsamiq as the iOS 7 templates are exhaustive and look just like a real app. I like how easy it is to create transitions in Keynote that look just like using a real app. I definitely like using the Readdle app as I don't need to deal with locating the device ID to enter into TestFlight as is used to deliver the Xcode app. Some of the things that the developer did to get this to work were just not reasonable for me to know and remember since I don't do iOS development, so that is definitely a drawback. For now I am going to se Keynotopia if I have to build a prototype by myself and if I have a developer helping me then Xcode wins hands down.