Hello friends!
Today's little update fixes a number of little bugs here and there. As you may notice, some are injections, meaning fixes for code that used to work in the past and broke in the previous release. Clearly we need to do a better job at preventing these issues from happening, so it's a confirmation that putting Florian on building up our suite of automated tests full-time was a good idea, and absolutely necessary. :)
Anyways, let's get right to it:
- All versions: Alert dialog with a single button no longer looks ugly. Thanks halsura for reporting it!
- All versions: Fixed a couple of issues with the mouse cursor not switching back after a crop operation. Thanks Jason Kerchner, Dakota Brown and andreasgibnes for reporting it!
- All versions: Fixed an issue with the UI Library staying open during full-screen presentation mode (and links not working). Sorry about the injection, and thanks Wiking, Jason Kerchner, Tim LaBonne, chris.gatland and Bruce MacNaughton and László Bővíz for reporting it.
- All versions: Fixed a bug with the Data Grid not hiding rows properly. Thank you Marshal Datkowitz for reporting it!
- All versions: Fixed a bug with the tooltip text not wrapping. Thanks to halsura and paul for reporting it!
- All versions: Fixed "some controls don't look disabled" bug. Thanks to Eric Chan for reporting it and to Chris M. for emailing about it.
- All versions: The Button control now uses smaller horizontal label padding when the button itself is small. Thanks ireddick for requesting it and to Chris M. for emailing about it.
- All versions: A Search control with no text doesn't "get squished" any more.
- Mockups for Desktop: fixed "Caps-lock breaks keyboard shortcuts" bug on Win and Linux. This was an old issue, first reported by Armaud 3 years ago, then again by Joe Eckert and pswulius. Florian wrote a blog post about it too!
- Mockups for Desktop: Auto-Save had broken for existing files, it only worked for new files. Thanks rafa for reporting it!
- myBalsamiq: Fixed issues with failing conversions (endless spinner). So sorry about this one. Our conversion servers ran out of disk space. We now updated them to a 20Gb hard drive (from 8Gb) and most importantly made sure old logs and error reports get deleted after a week so that the disks won't fill up again. Thank you sarah for reporting it.
- myBalsamiq: Anonymous users can edit and save mockups in wiki-access projects again. Thanks Jonta for reporting it!
- myBalsamiq: fixed an issue with image upload from the myBalsamiq editor. Thanks dcanarick, blackdr and Keving Fox for reporting it!
- myBalsamiq: fixed an issue with links not showing up in the HTML and PDF views after editing some mockups. Thank you Mattmas and Sarah Edwards for reporting it!
- myBalsamiq: Updated our real-time messaging protocol to something a little more firewall-friendly.
- myBalsamiq: We no longer log out users automatically on suspended sites.
- myBalsamiq: fixed an issue with some mockup thumbnails showing a single band.
- Mockups for Google Drive: renamed the Create New menu from "Wireframe" to "Wireframe (with Balsamiq Mockups)".
- Mockups for Confluence: migrated the plugin to V2, so that it's now compatible with the latest Atlassian SDK.
- Mockups for JIRA: Fixed a bug with mockup thumbns not showing when running JIRA with a contextPath.
- Mockups for JIRA: Now more resilient to mockup names that include special characters.
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply 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:
- myBalsamiq: build #3779
- Mockups for Desktop: version 2.1.16
- Mockups for Google Drive: version 2.1.8
- Mockups for Confluence: version 2.1.16
- Mockups for FogBugz: version 2.1.15
- Mockups for JIRA: version 2.1.16
- Mockups for XWiki: version 2.1.15
- Web Demo: version 2.1.15 launch it
Onward!
Hello friends!
In case you missed it, Google just released Google Drive, their new storage and collaboration offering in the cloud.
We've been using it for a couple of months over here, and it's really awesome. You can get to all your files from any device, it all syncs automagically.
What's especially cool in Google Drive are the super-powerful sharing abilities: you can share files and folders with another person, a group of people, everyone on your Google Apps domain, or the whole world. If you've used Google Docs in the past, you know what I'm talking about. Except now you can save ANY kind of file in there, the first 5Gb are free and Google Docs files don't count against your quota. Sweet.
Another feature that really stands out to us is Drive's extensibility. You can create and edit documents directly from Google Drive, using in-browser applications.
When Google approached us to see if we would be interested in integrating Balsamiq Mockups with Google Drive, we jumped at the chance. It's been a couple of months in the making, but we're proud to release it to you today!
Balsamiq Mockups for Google Drive is available on the Chrome Web Store, and it works on all modern browsers.
There's a free 7-day, fully-functional trial. After the trial you'll have to sign up for a paid plan ($5/month or $50/year) to continue to save your mockups with the app, but you'll still be able to view them.
The editor is the one you know and love from the other versions of Balsamiq Mockups, but it's a little more limited in its feature set (linking, image upload and symbols are not supported right now). As usual, we wanted to get something useful out the door quickly, then listen to your feedback to help us prioritize what to work on next. We plan on improving the app FAST, don't worry. Use it for a while and tell us what you think! We're all ears.
Here's a few links:
One of our goals as a company is to be there where you need us, not to force you to work in a specific way in order to use our software.
Mockups for Google Drive brings us closer to that goal. We hope it will help you and your team design better software, and have fun doing it!
Onward!
Peldi and the Balsamiq Team
Hello friends!
We just updated myBalsamiq. The process was still rougher than what we'd like, but it definitely went much better than last time. Doing the update on a Saturday lowered the stress level considerably. We'll continue working on our processes to make it super-smooth in the future.
What's new in this myBalsamiq release?
- GIANT refactoring work in order to generate mockup images in the background. This results in dramatically faster saving times from the editor, and most importantly, brings full support of Symbols to myBalsamiq. Now when you update a Symbol, all the images of the mockups that use it get regenerated for you. You'll just see a spinner for a few seconds. Same for images, both site and project. This was a huge effort, and it smoothens what was certainly the roughest edge in myBalsamiq. Thanks to all who reported it here.
- Finally, we have proper timezones! Thanks Sagar A. and Steve C. for reporting it.
- We now inject some real-time events in the editor, instead of polling. In English, this means that your editor will work faster and use the Internet a lot less. For us, it should result in hundreds of dollars in hosting savings each month.
- Fixed an intermittent issue with mockup reordering.
- Now we really allow projects uploads up to 100MB.
- We now properly show Renew and Upgrade buttons when a site is in the grace period.
- Clicking "edit this mockup" in presentation mode works now. Thanks Melvin Ram for reporting it!
- Now the editor skin file is versioned as well, so you won't have to clear your cache after our updates.
- We no longer send you an email confirmation request if you're creating a new myB site with an old email - you've already confirmed your email address the first time!
- Fixed a formatting issue on the "What site do you want to work on?" selection page.
- Mockup thumbnails are now in jpg format (smaller, faster to load)
- Made a lot of little performance improvements here and there. The app should feel snappier, let us know if you notice it as well!
- In free for classroom use sites, we now allow students who are project members (but not staff members) to buy Mockups for Desktop at the discounted price.
- We no longer refresh the whole assets dialog when one is deleted. Faster!
- Added an "hideBar=true" URL option to the prototype view, which is handy if you're doing running usability tests on your myBalsamiq prototypes
- We now remember if you selected "show linking hints" across single mockup pages, as well as in prototype view.
- In prototype view, we also remember if you had the bottom bar showing or hidden across different pages.
- We now fail more gracefully if you point your browser to a non-existing project.
- Fixed an error in the editor when switching between mockups that contained Symbols.
- In order to work towards a more RESTful API, we now reserved some mockup names. If you get some weird XML instead of your mockup, just go to the project home page and rename it from there (we could have renamed the few offending mockups automatically, but it felt too aggressive on our part). Sorry for the hassle, we hope it won't happen again.
- We now ignore mockups whose names start with a dot (.) in project uploads
- We no longer refresh the whole project grid when deleting a project. Faster!
- The editor now shows nicer, smoother thumbnails in the project browser.
- We moved our database to a reserved RDS instance to save some money.
We are very happy with this release, can't wait to see how it performs as traffic increases during the week! :)
Onward!
Peldi for the Balsamiq Team
The following is a guest post by John Clark of Kupima. We also interviewed John in our free eBook! :)
I'm a big fan of using Balsamiq Mockups to help shape the design of a new website, or to compare proposed enhancements without the pain of actually building them. It's the smart way to do things, and so I was delighted to see myBalsamiq offering all that was great about the Mockups tool, but in a way that fits in with modern distributed teams. It's exciting that people can collaborate from anywhere in the world and help build better things.
Of course, building great designs is fine and well, but the beauty of myBalsamiq is that it's so quick and easy to create a number of different interpretations and evaluate each in turn. To do this does require stepping outside of myBalsamiq, however, and making use of some kind of user feedback tool. You could, of course, get your friends to give feedback but if you're running as a distributed team, why not use the same approach and use the 'power of the cloud' for your feedback as well?
Kupima is one tool you can use. Kupima is all about getting video reviews of how real users use a website in combination with what they think about that website. It's a bit like getting someone in to 'test drive' your site without the hassle and, more importantly, without the risk of pestering your friends and family with 'yet another test'. What's more, using an existing user panel such as we have ensures that you're getting fresh eyes on your site.
You can use Kupima to get feedback on your myBalsamiq prototypes quite easily. After all, what myBalsamiq gives you is effectively a kind of 'wireframed website' anyway, so it's not really so different to testing a completed site. What's more, by using Kupima at this stage you can get fresh insight from real users to help steer your design toward something that is effective and usable.
How to test your myBalsamiq prototype using Kupima
It's easy: firstly, if you've not tried Kupima before, sign up here and choose the number of users you want to receive video reviews from. I generally recommend 5 users to start with, as with that number you'll likely identify 80%+ of any problems or usability issues with your design.
Once you've signed-up, you can either choose one of our existing template tests or create your own from scratch. Whichever you choose depends on the type of feedback you are after. For this article, we'll create a test from scratch so that you can see how easy it can be:
Simply put the link to the myBalsamiq prototype starting page in the field called Website Address. If you're wondering where to get this address from, press the myBalsamiq Launch Prototype button (which looks like an arrow) just below the New Mockup button, and copying the url from the new browser window:
Back in Kupima, you can also select the number of users that you want to take your test. Note that you can, if you like, choose to have your own users take the test. Otherwise, you can specify a target demographic profile which matches your 'typical' user:
You can then set individual tasks or test steps for each user to perform during their test. I recommend thinking carefully about what you want to achieve from your test so that you can guide users toward the pages of most interest. Of course, maybe you're just after general first impressions, in which case you might want the users to explore freely...
The final step of setting up your test is to set some questions. Kupima offers two main categories of question; the first is the written question, which allows users to provide open-ended opinion and suggest improvements to your design:
The second is the discrete question, which limits the responses to one or more fixed values. This allows you to extract real data from your results across the entire set of test participants.
Once you've created your questions (and paid the test fee, of course ;-) then users matching your target demographic will be notified and will take your test. Each time one of them completes the test and uploads their video, you'll get an email notification and can view their response. When the test is done, you can also view the summarised questionnaire responses and generate a PDF test report.
User testing your designs is a very worthwhile step; the earlier you involve users, the more effective your design will be and the better your website will end up. To make it all the more tempting, we've included a special offer so that you can try out Kupima at a discounted rate. Simply set your test up and then enter the following code at the payment page to receive a discount: KMYBALSAMIQ30
Please get in touch with us at Kupima if you have any questions - we'd love to be able to help you get the most from your designs!
John Clark
Hello again friends!
After this morning's total myBalsamiq update disaster, we get back to our regularly scheduled programming...
It's been a little over a month since our last release, but it sure feels like a lot longer: we've been busy!
First of all, let's see what's in today's release. Get comfortable, 'cause this is a HUMONGOUS one! :)
The focus of this release is to pick any low-hanging fruit that make the app better, to reduce our customer support load and to pay back some technical debt accumulated in the past.
Changes that apply to all versions of Mockups
Note: these changes are not available in myBalsamiq yet. They'll be available on the next release (not sure when, but soon).
- Controls are now scaled down in the UI library!
- Added text color, state and font size support to the Search control. Thanks Damien for requesting it!
- Added text color support to Checkbox, Radio Button, Checkbox Group and Radio Button Group. Thanks Chris M. for requesting it (via email)
- Added border color support to ComboBox, Date Chooser and Numeric Stepper. Thanks Chris M. for requesting it (via email)
- Added a disabled state to the Tree control.
- Added background color support to browser control. Thanks for requesting it Chris Gruel and Ryan, cobnutweb and Eric T. (via email)
- Added link and bar color support to the Link Bar control. Thanks to stephen and Melvin Ram for requesting it!
- Added border color support to the Text Area control. Thanks Carol P. for requesting it (via email).
- Added opacity support to the Scratch Out control. Thanks Ivor Potter for requesting it!
- Added text alignment support to the Button control. Thanks Christian for requesting it!
- Added multiline support via \r to the Button control. Thanks Martin L. for requesting it (via email)
- Added font size support to the Multiline Button control. Thanks Jeffrey G. for requesting it (via email).
- Added text alignment support to the Sticky Note control. Thanks Maria for requesting it!
- Alert Box buttons are now linkable. Thanks pablo.hcontreras and stephen.onkea and Humancell, Chros Thornton hasen12 and karinammorales for requesting it!
- The State inspector now only shows you the states that are common to all the selected controls. I could have sworn that's how it worked from the beginning! Oh well. :)
- Made Charts and Geometric Shapes fit within their boundaries better.
- Added a new "Forms" category in the UI library. Why didn't we do this sooner?
- added arrange and align menus in edit menu
- Changed the behavior of the advanced Data Grid formatting options. Now if you specify a percentage, it will win over the column's native width (it used to be the other way around). Thanks missprintt, Ben Norris and John Daues for helping us realize that this is the behavior people expect.
- Added support for up+down arrows / inactive sort in datagrid (with v^ or ^v). Thanks stuartchamberlain and Jeff for requesting it.
- Fixed all the display bugs we could find in the DataGrid control. Thanks Adi Roiban and Bruce C., Amy U. and Jeffrey G. for reporting bugs via email.
- Changed keyboards shortcut for Align Center CTRL+ALT+SHIFT+2 to CTRL+ALT+2 (that SHIFT is no longer needed now that Unlock all is CTRL+3).
- The selected Tab background color now matches the background fill of tabs (both horizontal and vertical tabs). Thanks Josh and Isaac Wood for requesting it!
- Vertical Tabs now look nice even on the right-hand side and with long labels. Thanks briknow for reporting it and to Bob K. for emailing us about it.
- Added multiline support via \r to Tabs Bar and Vertical Tabs Bar controls. Thanks karenImor for requesting it!
- The Quick Add list now gets wider when it needs to show long labels. Thanks Win7Guru and Martin Kessner and Ryan for requesting it!
- Added better tooltips for the color inspectors everywhere, so that you know if you're affecting the text, the border, the background, etc.
- Added a link to Little Big Details in the Help menu. We love the site and are proud to support it!
- Panning by holding down the space bar and dragging is fixed. Sorry for the injection, and thanks Felix, chrismrink and Gianni C. (via email) for reporting it!
- Fixed the last of the text clipping / "words go missing" issues in in the Button and Multiline Button controls. Thanks to all those who reported it here and here, and to Jeffrey G. for reporting it via email
- Fixed vertical alignment of text when using system font in the Pointy Button control.
- In the iPhone Menu control, the second label no longer gets cut off when using System fonts. Thanks Sean for reporting it!
- Fixed a bug with cropped groups moving around when you switch mockups. Thanks Andreas F. for reporting it (via email).
- The Balsamiq Mockups icon looked a little stretched in the About box. It's fixed.
- Fixed Down Triangle and Down Filled-In Triangle icon labels (they were swapped). Thanks gelzerr for reporting it!
- Fixed an Runtime Exception when loading certain malformed mockups.
- Fixed an infinite loop caused by a bug in the Tooltip control. Thanks Andrew H. for reporting it (via email) and to Russell for reporting it here.
- Harmonized menu capitalizations in all of our products (they were all over tHe pLAcE)
- We now enforce a minimum height if no text is present in form controls. Thanks bkvlinden for reporting it.
- We no longer allow empty text on Radio Button Group and Checkbox Group controls (it just reverts to the default text if you delete it all, like some other controls).
- The UI Library scroll position doesn't get reset on save or mockup switching any more. Thanks Jon Chambers and surfermikel for reporting it!
- Fixed an issue with the focussed state of the Button control not "sticking" on application restart.
- The Label control didn't have equal top and bottom padding - it's now fixed. Thanks Andreas Weder for reporting it.
- The Undo and Redo tooltips in the Property Inspector were not in sync with the rest of the UI. Fixed.
- Fixed the vertical position of the header label in the List control. Thanks rafa for reporting it!
- Added Geometric Shapes to the "Containers" tab in UI Library. Thanks guenne for requesting it!
- Changed the name of Numeric Stepper to Numeric Stepper / Spinner / Spin Control. Thanks Chris M. for requesting it (via email).
- Fixed a couple of bugs around going full-screen or opening a new file while cropping images or groups.
- Fixed a bug with the mouse cursor not getting back to normal after leaving a crop action.
Changes to Mockups for Desktop
- Added CTRL+ALT+S shortcut for "Save All"! Thanks to all who asked for it here and here and via email.
- Added a keyboard shortcut (the letter "E") for editing the current mockup while in full-screen mode. Thanks ckhan for requesting it!
- You can now save a non-dirty new mockup from the right-click tab menu. Thanks Lana P. for the request.
- Added an option to "Discard All New Mockups and Quit" when trying to quit with multiple unsaved mockups open.
- You can now add custom icons from your account assets folder even if the mockup has never been saved. Thanks Scott for bringing this up!
- Added support for custom icons that have alpha transparency. Thanks Brad for requesting it!
- Fixed a bug when using custom icons in symbols and editing their source. Thanks Ryan and Stéphane Bouteille for reporting it!
- We now fail more gracefully if you have an invalid path in your configuration file. Thanks corianda for reporting it (via email).
- Fixed a bug that resulted in a new empty file being created if you double clicked on a bmml file while you had a new and dirty mockup already open. Thanks Leon for reporting it!
Changes to Mockups for Confluence
- The plugin now supports usernames with colon (":") in them. Thanks Femke M. for reporting it
Changes to Mockups for Jira
- Big update! Balsamiq Mockups for JIRA is now a Version 2 plugin! No more restarting JIRA in order to install, uninstall or update. You can do it all via the Universal Plugin Manager now! We updated the Mockups for JIRA Admin Guide to reflect this welcome (and long overdue) change. A little snag is that in order to update to today's build, you'll have to delete the old plugin from .../atlassian-jira/WEB-INF/lib manually and restart JIRA one last time.
- We refactored a bunch of our code to make it fit with our other plugins. A side-effect of this change are the handy new "Save" and "Close" buttons in the top-left of the editor. If you see anything not behaving as expected, let us know and we'll fix it right up!
- Another side-effect of the refactoring is that image uploads now happen from within the editor itself! No more html pop-ups, it now behaves just like in Mockups for Confluence. Smoother.
- The plugin now supports usernames with colon (":") in them.
Changes to Mockups for Fogbugz
- Big refactoring effort. The plugin is now compatible with FogBugz onDemand again (this broke because of a recent change in FogBugz onDemand itself). A side-effect of this is that our plugin is no longer compatible with FogBugz version 8.3.41 and prior (i.e. purchased before 2/2/2011). If you are running an older FogBugz and really cannot update it, you can find the last version of our plugin compatible with your FogBugz in our build archives: MockupsFogBugz2.1.13.zip.
- Fixed a display but on the Mockups for FogBugz onDemand pricing table.
- Fixed and issue in FogBugz 8.7 and url-encoded attachment names.
- Fixed a bug with Google Chrome giving a "double http header" warning on some image attachments.
How do I update?
If you're using myBalsamiq, please wait until we update it with these changes (stay tuned on this blog).
For other versions, simply 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.1.15
- Mockups for Confluence: version 2.1.14
- Mockups for FogBugz: version 2.1.14
- Mockups for JIRA: version 2.1.15
- Mockups for XWiki: version 2.1.14
- Web Demo: version 2.1.16 launch it
What else is going on?
Although the list above is quite impressive, it pales in comparison to the effort we've been putting in test automation in the last few months. We now have over 500 unit and integration tests in the Mockups editor itself. We have Selenium-based bots running HUNDREDS of tests on myBalsamiq and now Mockups for JIRA (bots for other plugins coming shortly). We integrated most of the automated tests into our continuous integration server so that if a test fails, the whole build fails. We are changing our processes so that no new feature goes out the door without having an automated testing suite to go with it.
In short, we have a lot of code now, and don't want it to break. Since we rely on your feedback so much, your trust in our release quality is really important for us. These automated suites will help us ensure we maintain that quality and sleep better at night. :)
Of course there will always be bugs, but we're doing the best that we can to prevent them and catch them before you do. Thanks for your understanding if we miss some.
Let's see, what else did we do since the last release...
As a last note, I'll be giving a talk in London on April 17th, then Mike and I will be manning a booth at UX London. At the end of April I'll be in Las Vegas for MicroConf, and it looks like I'll be speaking at Business of Software 2012 in Boston in the fall again. Yay! I hope to meet some of you in person at those events!
Alright, back to figuring out how to update myBalsamiq quickly and safely.
Onward!
Peldi for the Balsamiq Team
P.S.Many thanks to our good friend Mims Wright who helped us with many of today's changes!
Hello friends.
For the second time in the history of Balsamiq, I write you today to apologize for our mistakes.
This morning we started what was supposed to be a routine myBalsamiq update. We couldn't do a zero-downtime update because this update required data migration in the database, so we announced a 30 minute downtime, thinking it was really only going to take 10 minutes, but we said 30 just to be safe.
How wrong we were. MyBalsamiq was in maintenance mode for about 3 hours today. Given that we would like to compete on reliability for myBalsamiq, this is clearly really, really bad.
A number of things happened during the downtime, it was a nightmare. We ran out of disk space in the database, a machine got rebooted while running data migration, and even our personal internet connection went down at some point. It was, simply, awful.
Some things were just unlucky, but we should have prepared for most of the others. This was our fault, no two ways around it.
In the end we ended up reverting to the old build, so the 3 hours of downtime were totally wasted on your side. We'll make sure they're not wasted on our side though, we've learned a bunch of lessons and will take them to heart.
First of all, we're going to start doing updates on Saturdays instead of Tuesday mornings. I didn't want to do this because it means that a few of us will have to work during the weekend, both to do the update and to man the support lines in case something goes wrong with the new version. As the CEO I hate to ask people to work weekends, but we all agree that your collective time is more important than our own, it's just the nature of the business we decided to get into, so we'll happily make the schedule change.
Other than that, we are improving our "things to check before a release" checklist with the lessons we've learned today, and going to make changes to our database structure so that data migration won't take nearly as long (in case you're interested, we're going to move the bmml data from the database to S3).
We also need to make sure our maintenance page embeds the @myBalsamiq twitter feed, so that people can stay updated on our progress more easily. Plus I have ideas about automated backups emailed to you, desktop sync, Dropbox integration...all things that should mitigate your downtime in case this happens again.
If you were affected by today's outage, please email sales@balsamiq.com and we'll credit your myBalsamiq site for 3 months or extend your trial for 3 months. It's the least we can do, and fully understand that it's not enough to regain your trust in our service.
We are committed to making myBalsamiq known for its uptime, but clearly we have a long way to go. We are learning, and I feel very sorry that our early adopters have to pay for our inexperience. :(
Alright, back to work for us. Again, I'm so sorry.
Peldi
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!
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.
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.
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:
- Sign up to MockGen
- Go to the Generate page
- Enter the starting URL e.g. http://www.facebook.com
- Pick a style sheet that controls how the mockup is
generated
- 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
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:
- edit the original question/answer containing the mockup you want to improve
- copy the part between
<!-- Begin mockup and End mockup -->
- hit cancel
- go back to your answer in the text editor and paste the code you just copied
- look down in the preview and click on "edit the above mockup" to launch the editor
- 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
Next Page »
