Prototyping for the iPhone with Briefs

Giff Constable Aprizi, UI/UX

I’ve been playing around with the open source prototyping tool Briefs, and while it took a little hair-pulling to get through the quirks, it really is a great tool.  Briefs lets you script up an interactive mock-application, and then test it out on iOS devices.  The best part is you can create a prototype with your own images, rather than someone else’s default widgets (my view of testing is the less you force people to use their imagination, the more you can trust what you learn).

I just shot a quick video with my point-and-shoot camera of Aprizi’s first draft prototype running on my 3GS phone (you can hear I have a cold right now):

I couldn’t create the *exact* behavior of a real app, but I could certainly get close enough to do some basic in-person desirability-and-usability testing. We very quickly learned some things to change, and next up is to create a new prototype and test with more people outside of our team.

Our process was as follows:

Fran, our friend helping with Aprizi’s iPhone app, downloaded the open source code for Briefs from Github and built it on his Mac. We then installed it on my iPhone using TestFlight (which I love).

I mocked up the demo in Photoshop, cut up the images into individual png assets, and then scripted the interactive behavior using the simple “bs” scripting language (yes, that’s actually the awesome name). Then there was a two step process where I had to run my .bs “code through two command line scripts. The first one (“bs“) parses the file and creates an intermediate file in the “brieflist” format, and the second (“compact-briefs“) creates a single binary XML file that includes the images. I placed this final file in my public Dropbox folder, copied the URL over to my iphone, replaced “http://” with “brief://” in the link, and launched this link from the Notes app, which then triggered the Briefs app to show the prototype you see in the video above.

There were definitely some quirks.

  • the compact-briefs script I originally downloaded from Github would not work on my Mac, but Fran was able to build a version that did.
  • the app offers some very cool transition and animation effects, but I still found myself having to get creative to “cheat” an approximation of app behavior
  • the tool was really designed for portrait apps, and since I was creating a landscape app, I had to rotate all my images 90 degrees (and to get the scrolling images to start at the top, which they don’t in the video, I should have actually rotated 90 degrees in the other direction)
  • compact-briefs fails to create your binary XML file if you have syntax problems in your .bs code, which is fair, but it also failed when I had my images in an “img” subfolder rather than an “images” subfolder. Go figure. (Edit note: could not dupe again so chalking images/img prob up to user error, ie me) Unfortunately, it doesn’t give you any hint as to why it is failing.
  • to get the iPhone Briefs app to work properly, I had to make sure to manually shut it down after each use, otherwise it would fail to load the “brieflist” file again. To do this, exit the app, double-tap the phone’s home button to see the active apps, touch and hold the Briefs icon, and then close it out

All in all, it’s not the simplest thing in the world (there’s no support right now and little out there on the Internets, but hopefully this post saves some others some guesswork and time), but I haven’t seen anything else that would let us prototype something so close to a real app. I’m glad we invested the time.

Thank you Rob Rhyne for open-sourcing the toolkit! I hope Apple finally approves the app, and will be watching the Briefs twitter feed for more.