The UX of Clickable Prototypes with Napkee

For the past few months, I have been using Balsamiq and loving it.  It doesn’t have everything I want, but it has plenty and the design is charming.  I am sketching designs very quickly and effectively.  However, last week I had a new challenge. There were a series of sketches that strung together to form the overall workflow.  The engineer didn’t understand what clicked to what.  So I thought, a click-able prototype is needed.

My first try used Napkee, which is an add-on I bought for Balsamiq for the sole purpose of creating click-able prototypes.  It transforms the Balsamiq mockups into HTML or Flex versions.  neither of which worked for me.

HTML Version
This version mutilates the design of the Balsamiq.  It creates real HTML out of the sketchy source.  I definitely do not want this.  I want the sketchy look, just click-able.  I think they went WAY overboard on how functional this is for a use case that makes no sense.

Flex Version
This version stays true to the original sketches, but for the life of me, I can’t figure out how to turn it into a web page.  I tried opening the project in Flex Builder 3 and 4.  Why can’t it just output an HTML page embedded with a SWF?  That would work fine for me.  I wish this is what it did.  I will email them and see what the deal is with that.  It somehow works, but I can’t figure it out.

Missing jQuery ImageMap Version
I did this one manually, but I wish Napkee or Balsamiq would take my cue.  First, you save your Balsamiq sketches to PNG files in a folder.  Then I downloaded a free image map tool called from SilverAge Software called Handy Image Mapper.  Not the best tool in the world, but it did the job.  I miss Homesite with it’s built in version.  Webuilder 2010 doesn’t include this.  Anyway, I then created a different image map for each one of the mockups and saved them on the page with a different CSS class.  I whipped out my jQuery and wrote this:

//When the page loads
$(document).ready(function() {

  //How awesome is jQuery? Attach events to the AREA tag?!
 $("AREA").click(function () {

   //What was the area pointing to?
   //I made them all point to the fileName.png of the mockup
    var targetImg = $(this).attr("HREF");

    //What is the class, which maps to the proper MAP definition
    var targetMap = $(this).attr("class");

    //Main is the single image,
    //We change the source to the right mockup and then
    //Change the USEMAP attribute to match the mockup
    $("#main").attr("src",targetImg).attr("USEMAP", targetMap);

    //Don't actually click anywhere
    return false;
  });

});

This is a tiny piece of JavaScript using jQuery.  Napkee should export all the images and use the definitions of the links in Balsamiq to create USEMAPs.  Then this little script would do all the work, swapping out the image and changing the map to the right place.  This is what I wanted, and what I think most people want from a click-able Balsamiq prototype.

I will send this post to them and see what they can do.  It seems this method is WAY easier and much better for the experience.  I hope it works.


Comments

One response to “The UX of Clickable Prototypes with Napkee”

  1. Hi Glen,
    thanks for the review!
    Napkee is intended to be a tool to have HTML or Flex prototypes (or skeleton of prototypes) in a really short time. It does not generate production-ready code but it generates something that is similar (or at least closer) to the final result.
    That comes handy for example during usability test sessions.
    Having a PNG-map is out of scope for Napkee for two reasons: there’s a tool that does that exactly (http://vi.to/bmml/) and Balsamiq Mockups has a PDF export that includes links between pages.
    You can reach me at enrico@napkee.com for any kind of comment and/or request, I’m all ears! 🙂
    Enrico

Whatya think?