The following is a guest blog post by John Turner of UsersThink. Enjoy!
Being able to iterate quickly is important for any project, and that's one (of many) reason why Balsamiq is so awesome. It makes it easy to build and edit mockups quickly, even if you're not a designer.
But being able to get objective feedback is also important in the process of designing, and that hasn't always been easy. I started UsersThink to make it easy to get focused feedback on your mockups and prototypes, without needing endless setup or recruitment or any of the usual hassles.
And the combination of an easy-to-use mockup tool like Balsamiq with an easy-to-use feedback tool like UsersThink is like peanut butter and jelly, especially when you see how well they work together.
Here's how to get UsersThink feedback on a myBalsamiq design in just a few steps:
1. Get the prototype URL from your myBalsamiq mockup
Head over to your project and open the mockup you want to receive feedback on.
In the upper right corner of the mockup screen, there should be an arrow pointing to the upper right.
If you hover over that arrow, it should say "Launch Prototype".
Click it, and you'll get a publicly shareable URL of your mockup. Make sure to copy that URL, you'll need to enter it into UsersThink.
UsersThink provides you with focused feedback on any landing page you give it, including a myBalsamiq mockup, like the one you've just prepped for feedback.
To get an example of what a UsersThink participant's feedback will look like, check out a sample user response on the home page.
Click on the Pricing option, and then select the test option you want. The test options are distinguished mainly by the number of participants who will be giving you feedback.
Select the option that works best for you.
3. Paste the Launch Prototype URL into UsersThink
In the first part of ordering, there is a field labeled "Your Landing Page URL".
Paste the Launch Prototype URL into that field, then hit the right-facing arrow button.
Enter your payment information, and click Pay Now.
4. That's it!
That's how simple and easy it is to order feedback from UsersThink. We got tired of the endless options and configurations of other tools, so we standardized and streamlined the process so you can focus on the feedback, and not waste time on setup.
Within 24 hours (often much sooner) you'll get the results of the feedback via email.
5. Get feedback and improve your prototype
Read through the feedback on your prototype and you'll notice trends in terms of what's working and what isn't with your initial design. Since Balsamiq is so easy to use, you can take your newfound knowledge and quickly turn it into improvements in no time.
If you have any questions or if there's anything you'd like to know, feel free to reach out to me, John Turner (CEO of UsersThink) at email@example.com.
The following is a guest blog post by Jason Shah of HeatData. Enjoy!
What if you could know precisely where - down to the exact pixel - people were tapping on your content, pinching and zooming on your images, and rotating their phones and tablets to get a better experience of your mobile sites and apps? Now you can share your Balsamiq mockups to HeatData and get heatmaps of user testing on mobile devices.
The HeatData team wanted to make it super simple for Balsamiq lovers to import their wireframes into HeatData and do serious user testing.
Here’s what you do to test out your mobile mockups from Balsamiq in HeatData:
1. Create your design in Balsamiq Mockups
2. Export your design as an image
We prefer for you to only export the screens, without the iPhone border.
3. Upload that design in the Mobile App Designs section of HeatData.
The HeatData Dashboard
The HeatData Mobile App Designs Section
4. Share the unique HeatData URL and have users interact with it
You can SMS, email, tweet, or simply copy+paste the URL to share it.
The HeatData “Email this URL” feature
Tapping, swiping, and interacting in other ways with the design on an iPhone
5. Magic. View your HeatData from the Balsamiq design right inside HeatData.
A drilldown page for the mockup - see all of the data, unfiltered
You can also filter down into specific events like just taps, touches, and pinches
And that’s it! So what are you waiting for? Go over to HeatData.com and load up your mobile Balsamiq mockups today.
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 firstname.lastname@example.org.
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.
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.
Hello Balsamiq friends! Today we asked Eileen and Max of Link Viewer to write up a blog post introducing their app for testing iOS Mockups. Enjoy!
Presenting your UX concept to your client is a crucial moment in product development. In this post I want to talk about how Balsamiq Mockups and our own Link Viewer App can help you make a great impression.
A lot hasbeenwritten on why wireframes and sketched interfaces are a good idea when communicating with your client. We use myBalsamiq on a day-to-day basis for user interface design @ Mondon Design for that matter. When Peldi asked us to talk about how we present them we were thrilled – to say the least.
First let me remind you of a common problem:
Users Break Prototypes
Giving a flawless mockup presentation on the real device is tricky, especially when we want to hand over our iPad to a client or to a test user. They tend to break the prototype. Viewer menus pop up, accidential swipes will switch pages, things don't work... you get the point.
Instead you need an app that will present the prototype and not stand between it and the user. The app should be as invisible ("chromeless") as possible and let users navigate via links inside the mockup.
Less Is More
To give a smooth mockup presentation, you want:
✘ no loading screens
✘ no menus or status bars
✘ no third party branding inside the app
✘ no funky transitions between slides
✘ no tap zones
✘ no zoom or rotation
✘ no scrolling or swiping
✘ no distractions
✘ no prototype editing
✔ navigation with linked elements only
We did not find an app that could fulfill these expectations so we made our own, Link Viewer.
It works with any hyperlinked PDFs, like the ones that Balsamiq exports.
The Mockups feel solid like a real app, nothing can go wrong while navigating them.
Presenting Without Distractions
One great thing about Balsamiq Mockups is that they just work. With Link Viewer this was our top priority, too. We made a short video to show how quickly you can get your bullet-proof presentation:
Step by Step from myBalsamiq to Link Viewer
If you use myBalsamiq, your can do everything right on your iOS device.
In iOS Safari, open your myBalsamiq 'All Projects' page.
Tap the project dropdown (cog icon), select 'Export to PDF...'
In the export dialog, select 'Optimize for viewing' and tap 'Export PDF'
Tap 'Open In…' and select 'Link Viewer'
Now your mockup is launched every time you tap on the Link Viewer app icon.
1. On iOS device find your project in myBalsamiq
2. Tap the project action menu and Export to PDF
3. Set PDF Export options
4. Open in Link Viewer
5. View your Mockups in Link Viewer
Offline Use with Balsamiq Mockups
There are several ways to get your mockup into Link Viewer. The important step is to create a PDF that has link functionality. Then connect your iOS device via USB and it will show up in iTunes (PC/Mac). In iTunes (PC/Mac), navigate to the Apps section of your device and scroll down until you see the Link Viewer icon. Click it and drag your PDF into the list area on the right.
It might be that you have no access to the target iPhone/iPad. A tester may be on the road or a client far away. Let them download Link Viewer. Create your mockup PDF and email it to them. Once they open the email on their device and click the PDF, they will be able to select "open in… Link Viewer". With the factory settings, Link Viewer will always display the last PDF that was imported.
If you keep the myBalsamiq tab open on your iPad you can generate new mockup PDFs for Link Viewer real quick. The same goes for offline use via USB cable: new PDFs can be uploaded very fast. With myBalsamiq and Link Viewer you have new presentations at hand in no time.
The factory settings make sure that Link Viewer will work right out of the box. However, if you need a file-list to select and delete files or use the resume-from-last-page feature, check out the Link Viewer settings in the iOS settings app.
Thanks to Balsamiq for their mockup tools. We couldn't work without them. Now Link Viewer is our little contribution to the happy UX landscape. If you have any questions or feature requests please email email@example.com
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.
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.
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:
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.
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.
UPDATE: The MockGen service appears to be discontinued as of July 2014.
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.
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.
Enter the starting URL e.g. http://www.facebook.com
Pick a style sheet that controls how the mockup is
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.
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.
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.
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.
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 -->
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 (twoexamples).
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.
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.
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! :)