How to test your myBalsamiq prototypes with Loop11

The following is a guest blog post by Toby Biddle of Loop11. Enjoy!


Usability testing for a website in the early stages of development, before design and functionality has been implemented, is widely accepted as the most appropriate stage for evaluating a new website design. Testing at this stage provides a cost effective option by reducing the risk of having to make significant changes after programming has begun. Typically testing at this stage is undertaken on wireframes.

Originally the term “wireframe” referred to a quickly rendered 3D model showing the model’s structure used while the model maker was working. They were much faster to work with than the full rendering, and in the field of web design they still are.

Wireframes are constructed instead of designing final pages, in part, because:

  • Wireframes are faster.
  • Information architecture and design phases can happen in parallel.
  • Wireframes force viewers to focus on the content, not the visual design.

Perhaps the most important benefit of wireframes, particularly HTML wireframes, is the way they lend themselves to ongoing user testing. Because of their interactivity, HTML wireframes can very easily be used to conduct early-stage usability testing.

Here’s how you can quickly and easily conduct usability testing with your myBalsamiq prototypes using Loop11. We’ve replicated the Kayak website as wireframes in myBalsamiq and we’ve put together a simple usability project using Loop11.

In myBalsamiq

Firstly, to create a clickable prototype in myBalsamiq simply create your mockups and then link the pages together using the built-in link features. Then, from the project pages, click the up/right arrow icon in the upper right of the page (see image below). This launches the project in prototype mode and lets you navigate through your prototype as a clickable interface.

The prototypes have keys in their URLs to make them shareable, but private. Here's a URL from the Kayak project: https://acme.mybalsamiq.com/projects/kayak/naked/Home?key=dcf6a8799cecef8ea699d6bd76d8483ba5bd8b24

Once you have created your mockups and linked all the pages it’s then just a matter of coming up with some appropriate tasks to tests the wireframes and creating a project in Loop11. Here’s how to do that:

In Loop11:

Loop11 has a simple 5-step process for creating a usability project. Step 1 requires you to enter some basic details about your project, including a public title, a working title, language (there are over 40 languages you can run your projects in) and introduction text for your participants.

Step 2 is the crux of a usability project; it’s where you enter the tasks you want your participants to perform and any follow-up questions you might have for them.

To create a task you need a task name, which simply helps you differentiate one task from another later, and the specific task scenario that you want participants to perform.

Importantly, so Loop11 can generate the metrics that help you understand how usable your prototype is you need to enter a URL where you want your participants to commence the task (the start URL) and then a success URL(s) which is the page of your prototype that you want to see your participants navigate to for a specific task. These URLs come directly from your Balsamiq prototype and just need to be copied and pasted in the appropriate fields in Loop11.

The remaining steps in Loop11 are pretty straightforward so we haven’t covered them here.

When preparing your wireframes the level of functionality and interaction you build into them depends on the comprehensiveness of the testing you want to do. Wireframes with minimal functionality (like the Kayak prototype) provide good feedback on site structure, labelling, and overall usability issues while fully clickable and functional wireframes with indicative or actual content are ideal for replicating a natural browsing and all aspects of usability can be tested with fully-functional wireframes.

The final launched project in Loop11, including some additional tasks and questions we didn’t cover can be viewed here. If you conduct the evaluation as a real life participant we’ll generate some useful results and can discuss the analysis of results in a future post.

Happy testing!

User-testing your myBalsamiq wireframes with Usabilla

The following is a guest blog post by Jurian Baas of Usabilla. Enjoy!


When Mike asked me to tell a bit about how Usabilla and myBalsamiq can be used together I got really excited. We use Balsamiq at Usabilla HQ ourselves, and more importantly, a lot of our clients love it and use it often. Our visual survey tool can be used to get user feedback in any stage of the design process, and is often used for testing wireframes.

I will show you how to take a prototype from your myBalsamiq project and get feedback on it by using a Usabilla test.

First, you need a Usabilla account. Luckily we offer a no-strings attached trial, so you can try it 30 days for free.

Sign up for a Usabilla account

After signing up, you can set up your first test. You can choose a template which has predefined tasks, or choose a blank template. I chose a 'like and dislike' test for this example. When you get to the test overview, you see two empty task cards, nicely tucked in between the introduction and thank you page.

Click the first card, and you can upload an image you want to test, or use a URL to generate an image.

This is where the magic comes in: you can insert any page from your myBalsamiq click-through prototype here. Just go to your project's prototype view by clicking the Launch Prototype arrow icon in the upper right of the screen under the New Mockup button.

This opens your project in a new window. Copy the url from your address bar.

You can easily select the page from your page gallery for the next task.

That's it! You can now let people give feedback on your myBalsamiq prototype with a Usabilla test. Hit 'Activate test', and send out the link to people you want to participate in your test.

After a few people completed the test, hit 'Analyze' and have a look at the feedback:

I hope you will be able to improve your wireframe by great user feedback! We are always happy to help people with setting up tests, so please let us know if you have any questions.

MockGen: From Web Site to BMML in One Click

Hello Balsamiq friends! Today I have asked Tim Shnaider to write up a blog post introducing his new awesome Mockups extension. Enjoy! Peldi

Generate mock-ups from web pages.

Hi everyone, I’m Tim from xemware. We are a small ISV based in New Zealand. Our goal is to provide tools and services that make the software design process easier and quicker. We’ve got big plans, and we listen to you, so tell us what you'd like to see to make your lives easier.

Introducing MockGen


MockGen (www.mockgen.com) lets you quickly generate mockups from web pages. You choose how the web page is converted into a mockup by selecting a style sheet (we have four to choose from and power users can create their own with our help.)

It's designed to be a timer saver to get you working with mockups quickly using your own existing sites or others (solely for inspiration of course!).

You can generate mockups for many pages, and links are retained between the mockup controls.

Using MockGen is easy:

  1. Sign up to MockGen
  2. Go to the Generate page
  3. Enter the starting URL e.g. http://www.facebook.com
  4. Pick a style sheet that controls how the mockup is
    generated
  5. Click Submit

The MockGen web service will retrieve the pages, convert them to mockups, and email them to you in a ZIP file.

So how do the mockups look? - the following example shows the differences between some of the style sheets, when used to render the very familiar Facebook login page.

'Complete' style sheet - An almost complete replica of the page - as a mock-up with individual controls!

'Standard' style sheet - simpler rendering, background images have been stripped.

'Simple' style sheet - all text is rendered black, and images are left as placeholders.

Time saver hint: use the Create Bookmarklet feature on the Generate page to create a bookmark that can be dragged to your bookmarks folder/toolbar. Then, when you're viewing a web page in your browser that you want to create a mock-up from, click the bookmark to pre-fill the MockGen Generate page form. Read this blog post for more info.

Try out MockGen for free.

You can generate an unlimited number of mockups using the ever so slighty restricted (limited to 600px high) style sheets. To generate entire pages subscribe to a plan or buy credits as required.

We'd love to get feedback and requests from you - follow @mockgen on twitter or stop by our support forum and drop us a note.

Happy Generating!
Tim @ xemware

Balsamiq ❤ UX.StackExchange.com

Hello friends!

As you should know by now, our main goal as a company is to help rid the world of bad software, one user interface screen at the time.

We try to do so by making and constantly improving Balsamiq Mockups, by giving our software away to schools and UX teachers, by highlighting software we love to use, by sponsoring blogs and events that teach the world about Usability and User eXperience, and more.

If helping others build more lovable software is your passion, we want to help you. Simple as that.

Today we are thrilled and honored to introduce our latest initiative in this area: a new, free version of Balsamiq Mockups, integrated with UX.StackExchange.com.

If you don't know what StackExchange is, you've been missing out. It's a collection of community-edited and moderated question and answer websites, each dedicated to becoming the single best online resource on a number of different topics. The most famous StackExchange site is StackOverflow.com, the ultimate Q&A site for programming questions. Other popular StackExchange sites are Startups.StackExchange.com or English.StackExchange.com, about the English Language and its Usage. See a full list here.

About a month ago we were excited to see that UX.StackExchange.com launched publicly, and thanks to the long beta period had already become a wonderful resource for anyone interested in creating better software.

Almost immediately, we noticed that people were attaching images made with Balsamiq Mockups to their questions or answers to make them more clear.

Here's a few examples:

Shortly thereafter, ux.stackexchange user Moshe Berman posted this question:

A few days later, I got an email from Joel Spolsky asking if we could make it happen. Clearly, we jumped at the opportunity, it' such a good fit with our mission!

A few mockups later (shared between the teams via myBalsamiq of course), a couple of weeks of coding, and here we are!

It's free for you to use, and - in case you're wondering - it's free for StackExchange to host.

The Integration

StackExchange developer extraordinaire Benjamin Dumke-von der Ehe was able to integrate our core wireframe editor really nicely.

When you first ask a question or submit an answer, you can see our little smiley icon in the StackExchange editor.

Click it and the Balsamiq Mockups editor will pop up in the browser.

Create your wireframe or import an existing BMML (from Mockups for Desktop for instance), then hit Save and Close and voila', the mockup is added to your question.

You can add text above and below, or add more wireframes to the same question.

To edit an existing mockup, just click the "edit the above mockup" link in the preview panel.

Iterating

Taking someone's wireframe and proposing an alternate design is a very important part of every UI discussion.

Here how to do it:

  1. edit the original question/answer containing the mockup you want to improve
  2. copy the part between <!-- Begin mockup and End mockup -->
  3. hit cancel
  4. go back to your answer in the text editor and paste the code you just copied
  5. look down in the preview and click on "edit the above mockup" to launch the editor
  6. make your edits, then hit "Save and Close". This will save your edited mockup as a copy, leaving the original untouched.

If instead you want to make your edits in Mockups for Desktop, you can simply click on the little "download bmml source" link under each wireframe, edit the BMML in Mockups for Desktop, export it (CTRL+E), then go back to the browser and use the Import XML feature in the editor to upload it.

Try it out!

This integration launched today, and we are already seeing the community using it successfully (two examples).

So, next time you have a doubt your UX ideas, why not ask the community at UX.StackExchange.com? Bookmark it now! :)

Many thanks to Benjamin Dumke-von der Ehe, Jarrod Dixon, David Fullerton, Michael Pryor, Joel Spolsky and everyone else at StackExchange who helped with this little project. As usual, you guys are a real pleasure to work with.

Onward!
Peldi for the Balsamiq Team

Release: HUGE loading time improvement!

Hi again friends!

Today's release main feature is a major optimization to our skin assets and icons, which results in dramatic improvement in loading times for the web and plugin versions of Balsamiq Mockups.

See for yourself in this before and after video:

The back story is that as part of the work to provide a cleaner skin for Mockups we moved our assets out of a .fla file into separate PNG files. This had a nice side-effect of reducing our skin file size from 3.2Mb to 1.1Mb, just like that!

Other changes and improvements in this build:

  • All versions: improved the angle of rotation of the arrow points - it's the little things! ;)
  • All versions: standardized our licensing language around "License Information", which includes a License Name and a License Key. We were using a combination of Your Full Name, Organization Name, Serial Key and other terms before, which was confusing. It's hard to come up with language that applies both to single individuals, companies and software resellers. I really didn't like the legalese term "Licensee Name"... we're optimistic that this License Info=Name+Key combination will work.
  • All versions: Icons that don't belong to any bucket in the Icon Library now can be found in a new "Other" bucket (other than the "All" bucket of course).
  • Mockups for Desktop: fixed our native .deb package to remove the Ubuntu 11.04 package is of bad quality issue. Thanks Roger W. and Hervé L. for reporting this!

How do I update?

Easy! Just install from our download page on top of your current installation. You won't have to re-register.

As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)

For posterity, these are the version numbers of today's release:

  • Mockups for Desktop: version 2.0.24
  • Mockups for Confluence: version 2.0.23
  • Mockups for FogBugz: version 2.0.24
  • Mockups for JIRA: version 2.0.23
  • Mockups for XWiki: version 2.0.21
  • Web Demo: version 2.0.20 launch it

What else is going on?

On June 19th our little company turned three years old! We now have over 50k customers, sold over $6,600,000 of Mockups, and are lucky enough to be working with nine awesome people, doing what we love together. Who knows, maybe we even helped rid the world of a little bit of bad software, which is still our ultimate goal. Life's too short for bad software! :)

I don't usually dwell on things, but I'm letting myself be proud for 5 minutes today. Here's to 30 more years! :)

Onward!
Peldi

Release: Shift+Drag Selection, and a lot more!

Hi friends. I know, it's been almost a month since our last release, but I think you'll agree this one was worth the wait.

Take a look!

Shift+Drag to toggle selection!

This subtle-but-awesome change is too hard to describe in text so I made a little video about it.

Big thanks go out to GooeyGrl, Julian Whitacker and Jenni Merrifield for schooling us on the right conventions to use, to Greig Varga for a related request and to David Hirschfeld for helping us debug this awesome little feature.

What else is new

  • All versions: Added support for two-finger horizontal scrolling on Mac trackpads! That's right. Works both in the UI Library (when placed on top) and in the canvas. Try it out! Whoo-hoo! Thanks to jacksonfox, Paul Help Guy, Ian, Victoria Wagman, the_undefined, besi and the countless others who have complained about this issue.
  • All versions: Improved the property inspector positioning algorithm one more time. It now only "moves out of the way" if your selection would be completely obscured by the inspector, not if it just touches it. Try it, we think you'll like it. It stays put a lot more.
  • All versions: we now sort the locked items in the right-click menu by z-Order, which is more intuitive (just like we do for the "select behind" feature).
  • All versions: fixed a bug in link positions in export to PDF when markup was hidden. Thanks again to David Hirschfeld for reporting this (via email).
  • All versions: label color of callout controls now automatically switches to white when necessary (like for Buttons, Text Areas and other controls).
  • All versions: fixed a few little bugs with label and icon color not changing to white properly when the background was dark and exporting. Thanks to Kenny Saunders for this bug report and to Will for this one.
  • Mockups for Desktop: Copy icon and menu item are now properly enabled when overriding a symbol's properties.
  • Mockups for Desktop: fixed a bug with "Create new file" in the Export All to PNG feature. Thank you Pascal-Luis Perez for reporting this bug.
  • Mockups for Desktop: now remembers the correct windows size and position if you open the application by double-clicking on a .bmml file as well.
  • Mockups for Desktop: fixed a bug with AutoSave showing up too aggressively (after a Save All / Close All). This is another David Hirschfeld email report.
  • Mockups for Desktop: fixed a bug with image names in UI Library when using non-latin characters.
  • Mockups for Desktop: a lot of you reported closing files by accident, so now we only show the (x) close icon in the selected file. Thanks Roman for bringing this up.
  • Mockups for Desktop: you can now save an empty file before doing anything else to it.
  • Mockups for Desktop and myBalsamiq: we now show pretty names for Symbols instances in the Unlock and Select right-click menus. Thanks Brett Porter and Ben Norris for the good idea.
  • Mockups for Desktop and myBalsamiq: Symbols which use images from Account Assets now can load them when displayed in the UI Library.
  • Mockups for Desktop and myBalsamiq: When copying inside a symbol and pasting outside of it, the overridden properties are now maintained properly. Thank you Andreas Weder and Eduardo Vila for reporting this bug.
  • Mockups for Confluence: you can now add a mockup to the home page of your Confluence installation.
  • Mockups for Confluence: mockups with spaces in their names work again. Thanks Marcin for reporting it.
  • Mockups for JIRA: you can now add mockups via the operations shortcuts screen in JIRA 4.2.2. Thanks Ryan Rich for reporting it!
  • Mockups for FogBugz: fixed an issue with other mockups not showing up when you go edit a wireframe attached to a wiki page.
  • Mockups for FogBugz: fixed an issue with loading images used in a mockup. Thanks Ted Anderson for reporting the bug.

I have to say, Mockups is becoming a nice little piece of software if I may say so myself... ;)

It's getting there...thanks in LARGE part to all of you and your bug reports and feature requests, so THANK YOU and keep them coming! :)

Four new extensions, and more coming!

We love to see more and more people building tools that integrate and extend Mockups in various ways. Since our last release, four more have popped up:

  1. m|oppr is a new mobile application development platform that helps you built rapidly iOS , Android and Windows Mobile 7 solutions, including the back-end data services. A couple of weeks ago m|oppr announced the release of an integration between Balsamiq and their platform. This is very exciting because people can now directly go from concepts to deployment in a very short time. Their integration supports the major controls from labels, text inputs, buttons to tables and even graphs. The integration takes a balsamiq file and generates an m|dsl file which can then be edited and used to generate the native code for each target platform. You can generate an m|dsl file on line.
  2. Also on the mobile front, RealityMechanic announced a private beta of Mockups2Android, which turns your BMMLs into Android applications.
  3. Rob Crewdson from SoftwareServant wrote a guest blog post detailing his extension, check it out!
  4. Wirify Pro is a bookmarklet that lets you turn any web page into a BMML Mockup. Read their announcement about the integration here.

More exciting third-party Mockups extensions are coming, so stay tuned!

How do I update?

Easy! Just install from our download page on top of your current installation. You won't have to re-register.

As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)

For posterity, these are the version numbers of today's release:

  • Mockups for Desktop: version 2.0.16.
  • Mockups for Confluence: version 2.0.16
  • Mockups for FogBugz: version 2.0.18
  • Mockups for JIRA: version 2.0.17
  • Mockups for XWiki: version 2.0.15
  • Web Demo: version 2.0.14 launch it

One more thing: we now maintain a list of older builds for all of our products, in case you need one. Check it out: builds archive.

Onward!
Peldi for the Balsamiq team

P.S. By the way, I hope you're having as much fun using Mockups as we are making it. We're having so much fun it's almost embarrassing... shouldn't work be hard? Oh well, let's keep it going and see what happens. Have a wonderful day everyone!

A new Mockups Extension: SoftwareServant

The following is a guest post by Rob Crewdson of Software Servant, introducing this Mockups for Desktop extension.


Hi everyone, my name is Rob Crewdson. Peldi has given me the opportunity to write about turning your Mockups into a fully operational information system.

I want to talk about two things:

  • The best method for specifying information systems.
  • How to use this method to automatically build complete applications from a Ms Word specification.

The automation part may sound a bit crazy but it can be done for all sorts of information systems of any complexity.

First a bit of background.  I am based in Australia and have worked in the software industry for a very long time including more than 20 years managing international software vendor operations.

At age 25, I started my own software development house and specialised in turn-key contracts to build core business systems.  By turn-key, I mean that we would deliver a total solution on a fixed date for a fixed price.  This business model is obviously challenging but it proved to be very successful because of the method we devised to ensure that the signed-off system specification was both the business contract and the source document for the development team, ie. the customer could understand and authorise the specification and the developers could build the system from that same document without further amplification.  This meant that we always had a single authoritative document to reference.

The other main element of our method was to build the system specification by first identifying all the required system outputs and then sourcing each element of those outputs.

This method provides the underpinnings for the current method and supporting tools.

We have improved the documentation format, optimized the use of modern infrastructures and automated the development phase; however, it is fundamentally the same method that proved so successful on so many projects.

So, how do we go about turning your Balsamiq Mockups into fully operational information systems?

You have already made a great start by using Balsamiq Mockups to identify and specify the format of all of the UI outputs.  The direct user interface (UI or UX)  is not necessarily all of the output, you may also need to specify printed reports, charts and data formats used for information exchange with other applications.

Look at the video below to get a basic understanding of how you can copy Mockups to a system specification and then automatically build an executable application.

The specification method is simple and intuitive:

  • Have a simple, consistent specification structure and language that can be understood and accessed by all stakeholders (use Ms word).
  • Start by specifying all of the outputs including all of the required data elements (Balsamiq Mockups is great for this!)
  • Each data element must have a source.  Identify the source, (eg. data entry, database Table.Column, file, XML feed, calculation, process, service, unknown).
  • Specify the workflows, ie. how the UI forms relate to each other and under what conditions.
  • Follow each data source to its natural end, eg. a database Table.Column or data entry.  A data source that is a process, service or calculation should be further specified in turn and a data source identified for each of its elements and so on.

When all of the data elements have been properly sourced and the UI and work flow has been approved, the specification is complete.

Easy eh! :)

Well, it is if you're project is facilitated by an experienced IT professional.  The rest of the project team can be users and managers from the business domain, they will be comfortable with the process and the specification document because there is no technology barrier and it just feels like the way it should be done.

From my experience, this is always the best method, both when the target application is manually developed and when the target application is automatically built from the specification.

Obviously, if you can automatically build the system you want from the completed system specification, this is a very big leap forward and a huge advantage over any alternative method.  Being able to build a running application from the specification is not only a good thing after the specification is signed off; it also means that you can build and review during the specification phase as often as you want.

The system specification is the sole source document for the system and is always consistent with the production application.

These systems are easily changed as business requirements change because you always have an authoritative specification document that tells you exactly what the current application does.  All system maintenance is done via the specification.

Have a look at some specification examples at www.softwareservant.net

Do I hear some objections?

What about Use Cases and all of that other great UML stuff? Maybe an interesting idea taken too far.  Modelling of this type can become a large project in itself; the models represent complex concepts that can create a barrier between the business stakeholders and the system being developed.

The models may be useful for expert analysts to gain a greater understanding of a large and complex problem but they have little to do with application development. Once development starts, the models are usually not maintained to be consistent with the implemented system so tend to become historic and interesting documents.  Have a look at the "Criticisms" section of the Wikipedia entry for UML.  I also came across this paper recently: it's written by UML supporters but, to me, it confirms the complexity of the method and its lack of suitability to specification and development.

We don't do all that work in the specification, you're doing a lot of the work that our developers do.  Not doing the necessary work in the specification is nothing to boast about!  This is a major reason for information systems development failure.  It's important that the business rules, workflow and data sourcing are specified while you are working with the relevant business experts in the project team before handing the project over to a separate development team.  Otherwise you lose control of the system development process and rely on individual developers to make correct assumptions regarding the project even though they may have had no exposure to the business or the project team.  A complete system specification represents detailed user interaction, data sources, calculations and conditional logic.  The specification structure and language needs to balance clarity for all stakeholders with brevity and consistency.   I think that SoftwareServant does all of this very well. The more complex calculations and processes are easily isolated into their own sections where only qualified project team members need to address them. Of course, it's not compulsory to specify completely before signing off and handing over to a development team to finish it off; I'm just promoting best practice. The basic rule is that the less complete the specification is at sign-off by the business, the greater the possibility of dispute at implementation.

We can develop a better product using Java or C# or .... because we have finer control etc.  Well, maybe some developers can but very few will and it will take them much longer and cost much more.  When you want to change the system, you are going to depend on an individual developer's source code and memory.  Further, you will require extensive low level unit testing to pick up program problems and performance issues and also require more complex software configuration management.

The engines that run the SoftwareServant applications are consistent in look and feel; performance and reliability; and they have had the bugs ironed out by multiple users.

Of course, this doesn't spell the death of programming as we know it!

There is a truly enormous mountain of software out there that will need looking after for a very long time; in fact, there is a serious shortage of skills out here.  In my visualised future, there will always be a vibrant development and technology community but not operating at the business interface layer.  At the next layer down we will still be building technology infrastructure, tools, components, interfaces, integrations, specialised chart controls, report writers etc that are used and re-used at the business design and specification level.

Feel free to ask questions and/or beat me up re: my opinions.

Cheers, Rob Crewdson


Thanks Rob. If you like Rob's approach, head over to SoftwareServant.net to try it out for yourself! :)

You can find more about Mockups extensions on our Community Page.
Peldi

Napkee Launches!

An Italian engineer living abroad, happily employed by a large tech company, spots a new revolutionary technology rapidly gaining traction and decides to drop everything in order to "get in on it" by improving it.

No, I'm not talking about my decision to start Balsamiq to build Web Office plugins, but rather Enrico Berti's decision to quit his job to start Napkee Labs, a new micro-ISV launching today.

Napkee nicely complements Balsamiq Mockups by providing a way to turn your wireframes to either HTML/CSS/JS, a Rich Internet Application that runs in your browser or even a Desktop application.

This is a very hard problem to solve in an elegant and user-friendly way, as there are a lot of moving pieces to deal with. In fact, it's even too hard for us to want to solve ourselves! I have been advising Enrico for the last few months, and I see in him the right combination of talent, passion and determination needed to succeed.

I have asked him to write a little guest post here to introduce himself and Napkee to you. Enjoy!

Everything began last March when I wrote an email to Peldi saying that I wanted to do something more for Balsamiq other than being another evangelist. The idea of creating an exporter for Mockups was born after a couple of hours and I started to write code the exact same evening. At the beginning it was not called Napkee and it had a really creative name: Mockups Exporters. :) It also looked great...

pic1

That big smile was - and still is - the effect that this project has on me. Time passed relentlessly and I spent almost every single minute of my free time on creating something that could be useful to a lot of people working in the UX field.

Fortunately today Napkee looks way better and it allows you to export to interactive HTML+JS+CSS or Flex prototypes in a matter of clicks.

pic2

Check it out on www.napkee.com!

The journey from that email to my micro-ISV seems quite long but I feel and hope that it's just the beginning of a bigger and longer one!
I'm pretty much excited, and you?

Enrico

Convert Mockups to HTML+Image Maps Prototypes

Hi there. We at Balsamiq are terribly excited about the wonderful community-contributed tools and Mockups extensions that are being developed these days. To introduce the latest one we have asked its main developer, Vitorio Miliano, to write a short post for this blog - our first ever guest post! :)

Hi, I'm Vitorio Miliano, and I'm guest blogging here on the Balsamiq Blog to show you a little script I worked up that lets you turn Balsamiq Mockups wireframes into clickable HTML image maps.

I'm a Senior User Experience Consultant for a company called Optaros, and annotated wireframes are a significant deliverable of our design process. We've previously used OmniGraffle, Photoshop or straight HTML for these, but some teams have been using Balsamiq Mockups on projects since the beginning of the year, and it's been working out really well.

It was working well enough that I wanted to be able to do more of the things we can do with HTML wireframes:

  • I wanted to be able to use the mockups for user testing. (The first time I wanted to do this, presentation mode didn't have the option to turn off the big cursor and hints yet.)
  • I wanted to be able to distribute the mockups in a clickable series.
  • I wanted to be able to demonstrate complicated interactions, like hover changes and preserving state across multiple wireframes.

vi.to/bmml

This script is the start of those things. It generates an HTML file from each BMML+PNG you provide, giving you an image map with each object from the wireframe defined in it, along with boilerplate JavaScript (using jQuery) for reacting to the click and hover events for each area on the image. There are two samples on the page: the first shows the default output, using the jQuery "maphilight" plugin to see each area of the wireframe defined in the image map; the second shows changing the image on hover, and responding to a click.

Right now, that's about all it gives you, but I'm using it here at Optaros and will be continuing to update it. Questions are already coming up. Should I be generating binaries instead of requiring Python? Should it automatically hook up the links you've already defined in the wireframe? What's the right way to handle grouped or locked items?

We just finished a rich prototype in HTML for a film studio, and I'll be replicating that in Balsamiq as a test case for more complicated effects, but I'm just one person in one design group. I'd really like to know what you think. I'd love to hear about how you're using Balsamiq, and what you've wished you could do with the wireframe once it's built, ways you've wanted to show them off, interactions you've wanted to demonstrate. Send me your BMML files and we'll talk about it. Bug reports and patches are helpful, too (the script is open source, MIT licensed), and there's a TODO.txt included, in case you want to poke at the code.

I hope you find this useful. My email address is vito underscore bmml at perilith dot com, and I look forward to hearing from you!

Thanks,
Vitorio Miliano

Thank you Vitorio for providing this extension! We think it will be useful to lots of Mockups users and that some of them will want to contribute to it!

SWT->BMML: an Interesting New Mockups Extension

Hi there. I wanted to share with you an interesting new little project by Max Rydahl Andersen, a core developer at JBoss (@maxandersen on Twittter).

In short, it's a way to transform an existing dialog built in SWT (the widget framework used in Eclipse based projects such as Flex Builder) into a BMML representation, ready to be imported into Balsamiq Mockups.

Check out this short video demonstration:

Here's Max blog post about the project: Instant Mockup for Eclipse SWT Applications

What I like about this tool is that while a lot of people have been asking for exporters from BMML to various programming languages*, this is the first time I see someone importing from an existing UI into Mockups, and makes a lot of sense!

In the real world, being able to start from a blank slate is a luxury, most often than not you'll be iterating on an existing UI in order to improve it. Having a quick way to import a GUI to Mockups is a huge time-saver.

Anyone up for building an HTML+CSS -> BMML importer? It would be so cool to be able to specify a URL and have a BMML representation of that page returned. Mockups such as this one would take 2 seconds to build! I realize that HTML+CSS is a huge beast, but hey that's what they'll pay you for right? ;) If you're interested, I have documented the BMML format here (yay for open formats!).

Thank you so much Max for starting this project and I'm looking forward to seeing it grow! The code is all on github so if you're a SWT developer I encourage you to dive in and help out, you'll all benefit from Max's awesome week-end project! :)

Peldi

*I know some of you have already started working on this, and I can't wait to be able to share about your progress! :)