The following is a guest blog post by Darrell Benatar of UserTesting.com. Enjoy!
Part of the reason we’re such big fans of the Balsamiq Mockups interface is how simple it is. Users can literally have a mockup of a new site or app ready to share with stakeholders and other team members in just minutes. In fact, we’ve recently finalized the design of one of our upcoming campaigns after creating our wireframes through Balsamiq’s desktop app.
For the purposes of this article, we’ll focus on mockups created through myBalsamiq, which makes it easier than ever to get the feedback you need to optimize your prototype. Like all things related to design, it’s always a good idea to receive feedback from those outside your creative process.
While it’s great to pass along ideas to your teammates and collaborate on your latest mockup, there’s always a chance that you’ll miss out on important features that your end users are looking for.
At UserTesting.com, our panel of users are at your disposal, and can provide you with detailed usability testing results in as little time as an hour...and it's affordable! Here’s how it works in a nutshell:
Create Your Test: Choose one of our task templates and customize it for your site.
We Notify Users: Users who fit your chosen demographic are notified and immediately record themselves using your site.
Get Feedback: In 1 hour, you'll get a usability test video and written answers to your questions.
Share Results: Combine your favorite clips into a highlight reel to email to your team.
Once you’re ready to share your wireframe with your team, take a moment to drop by UserTesting.com and share it with our testers to gain valuable feedback from potential end users.
Here’s how you can get started in a few easy steps:
1. Create Your Prototype URL in myBalsamiq
When your mockup is ready to test, switch to prototype view and prepare your URL before heading over to UserTesting.com. With the click of a button you can generate a shareable URL for your prototype through myBalsamiq.
2. Select the Number of Participants for Your Test
Once you’re on our homepage, click on the “Pricing & Sign Up” link, then select the number of participants for your test. You can have as many as 100 participants reviewing your prototype.
3. Pick a Device & Test Type
Select Personal Computer or Mobile Device as your preferred device for the test, then choose whether or not you would like to use one of our templates that are prepopulated with tasks and questions based on your needs. We even have a tab prepared just for users looking to test their latest prototypes.
4. Copy & Paste Your Prototype URL
After you click “Start with this template,” copy your prototype URL and paste it into the first field.
5. Customize Your Test
Once you click “Continue,” you’ll have the option to customize the template with your own instructions, tasks, and questions for our testers.
6. Choose Your Demographic
When you’re ready, you’ll have the option of revising the number of participants you’d like to test your prototype, the source of your participants, and your target demographic.
7. Come Back In an Hour
Participants typically complete tests within an hour after you’ve submitted your test. As your tests are completed, you’ll receive an email notifying you that they’re ready to view. You’ll now be able to view a video of your prototype being tested, as well as answers to the questions you’ve provided. Through your UserTesting.com dashboard, you’ll also be able to export your studies, create highlight reels of your video reviews, and share them with your team.
So that's it! Get the most out of your myBalsamiq prototypes and receive unbiased feedback on your mockups today. We're also more than happy to chat with you about your usability testing questions, so feel free to let us know how we can help at support@usertesting.com.
The following is a guest blog post by Raymond Ha of Isomorphic Software. Enjoy!
Hi, Everyone, I’m Ray from Isomorphic Software, the creators of SmartClient and Smart GWT. If you haven't heard of our technology before, SmartClient and Smart GWT are HTML5/AJAX platforms that are used to build complex web applications, especially those that involve lots of screens, lots of data and power user features.
We’re big fans of Balsamiq, so we’re excited to announce a new tool that generates SmartClient and Smart GWT code from Balsamiq mockups in one easy step. It’s called Reify – an actual English word meaning "to make something abstract more real or concrete".
There are already several tools available that can turn Balsamiq mockups into simple interactive web pages, PDFs, and other formats so they can be more easily shared. That's not what Reify does.
Instead, Reify deeply analyzes your Balsamiq mockups, and produces source code similar to what a developer might write by hand. This allows your team to skip over the phase of painstakingly recreating the UI shown in the mockup, and move directly to adding business logic and data binding.
Watch the Video
Don’t re-create. Re-use.
Reify allows you to get much more out of your Balsamiq mockups. Normally, when a mockup is handed off for implementation, your developers needed to laboriously duplicate the mockup in actual code - one screen at a time. This is an enormous waste of time and effort, and typically causes extra iterations as developers inevitably miss subtle but important details. With Reify, you can go straight from a mockup to working code that reproduces your intended design.
How does it work?
In Balsamiq, placing a widget on top of a window or tab is enough for the mockup to look right. However, working applications need to know that a widget is contained by a tab or window, or the wrong thing will happen when the screen is resized or the window dragged.
Reify deeply analyzes your mockup to discover the relationships that are implied by the way you arranged widgets. Containment relationships are automatically discovered, labels are automatically associated with input controls, input controls are automatically grouped into logical forms, and aligned components are grouped into flexible layouts that respond as expected to browser resizes.
Reify even compensates for imprecision in mockups by recognizing that a set of controls is meant to be perfectly aligned even if the mockup is a few pixels off, and recognizing that the intended size of a control is its visible size, not the size of its (invisible) bounding box.
Clean, Extensible Code
Tools that generate code often produce awful results that cannot be meaningfully extended. Reify is different.
Reify outputs screens in Isomorphic’s Component XML format, a concise, declarative format similar to Flash’s MXML or Microsoft’s XAML. Reify makes great efforts to produce clean, minimal code. For example, if a component gets its size from its container, Reify won’t output the redundant size information on the component. More generally, Reify will avoid outputting code that would set a property to its default value.
Screens created by Reify can be connected to real data sources in one step, and event handlers and business logic can be added while keeping the screen definition in XML. This enables a clean separation between layout and logic, and allows non-developers to understand and modify screen layout without breaking business logic.
No Limits
You can easily mix and match between screens imported via Reify and classic hand-coded screens and layouts. For example, if you have created a highly dynamic, portal-style layout manager that couldn’t be built just with XML, you can still use Reify to create portlets, wizards, and other screens controlled by your advanced layout manager.
Or, you can create a screen that has a placeholder for a dynamically generated component, and insert that component programmatically after the Reify-created screen is loaded.
Reify lets you maintain any part of your application in easy-to-read, easy-to-modify XML, while still allowing advanced, data driven techniques to be used wherever appropriate - the best of both worlds.
Thanks to the Balsamiq team for creating one of the best tools in the business. We hope that Reify will become another invaluable tool in your arsenal. If you have any questions, please Contact Us or visit our Forums.
