👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Mockups 1.6 Release: Linking Mockups, and More!

Lots to share, but here's the main announcement:

You can now link Mockups together!

Simple as that. 🙂

At the moment the feature only works in Mockups for Desktop, but with your help I plan on bringing it to the Confluence, JIRA and XWiki plugins versions as well in the near future (more on this later).

Feature Overview

Linking two mockups together is now as easy as choosing a file name from a pull-down menu. Simply click on a control that supports linking (most do), and you'll see a new "Link" pull-down in the floating property inspector
link_pi
The list is pre-populated with the names of all the BMML files found in the same folder as the file you're editing. As long as you keep all the related mockups in the same folder (I have one per project I'm working on, and I keep them in DropBox), this should be all you need. BTW, it's a best practice to also keep all images related to a project in an "images" folder next to BMML files.

For controls that can have multiple targets, you'll see something like this instead:
linkbar
Once a control links to another other mockup it show a little arrow icon at their bottom-right corner, like this:
button_link
To 'activate' the links you simply enter the newly renamed the "Full Screen Presentation" mode (formerly "Full Screen View", CTR+F).

Controls with links will have a little blue overlay on them as well as the link icon and mousing over them will show a big hand pointer with the name of the target file for this link, like so:
bighand
Simply click on a link to load up the referenced mockup file. Voila', there's all there is to it! 🙂

Actually, there's one more thing: you can use the left and right arrow keys to go back and forth between the mockups you have visited in your run-through.

Here's a quick screencast (38 seconds, no audio) of linking up three existing mockups and running through the resulting prototype:

bonus points if you recognize what this prototype is from

Also in this release

  • Mockups for Confluence, JIRA and XWiki: New "Save and Continue" feature. It creates a new minor version (no version comment and no email updates are sent out) and lets you continue editing.
  • Added Space Out Horizontally and Space Out Vertically alignment tools:spaceout
  • Added some keyboard shortcuts for aligning elements, CTRL+ALT+1 for left, CTRL+ALT+SHIFT+2 for center, CTRL+ALT+3 for right, CTRL+ALT+4 for top, CTRL+ALT+5 for middle, CTRL+ALT+6 for bottom. Why the SHIFT in the center align? Because CTRL+ALT+2 is already "Unlock all" - thanks Yittesen and Jason Smith for the request!
  • Changed the file type description for BMML to "Balsamiq Mockups Markup Language", shorter and more to the point. Thanks to Kanwal Kipple for pointing this out.
  • Added the ability to color the scratch-out control, so that you can create beautiful art like this one: 😉
    scratchoutcolors
  • Made a BIG optimization in the code that runs when you switch from one mockup to another, and when moving objects around the screen. It should be noticeably faster. Also, we will continue to make these performance optimizations in the future, so stick with us!
  • Added back the 10-pixel padding at the bottom and right edges of the mockup so that you can grab the edges easily. This was an injection from when I removed the border around the exported images, my apologies.
  • In Mockups for XWiki, I changed a few strings and improved the installation experience overall - it now tells you when you need to create the BalsamiqMockupsEditors group etc.
  • Fixed a bug with the property inspector showing up above the selection at the right side of the screen.
  • Fixed a bug with "True" and "False" strings not keeping capitalization when the mockup was saved.
  • The Text Input control now properly gets smaller if you select a font size smaller than 13.
  • Made the iPhone menu resize horizontally so that you can use it in landscape mode as well.

How do I update?

As usual, this is a free update. Here are the links:

What's next on the TODO list?

Our main focus continues to be the Mockups web application, which is coming along REALLY nicely (tell us a little bit about yourself if you'd like to be on the private beta).

Other than that, we want to take care of the "Failed to Save" dialog box and of the "Check for updates" features soon. We also have a couple of surprise announcements coming up, so stay tuned here or on Twitter.

Side Note about the Linking Feature: What took So Long?

You may be wondering why it took us so long to develop this feature. The first requests for it date as far back as 9 months ago...which is an enormity considering Mockups is only 10 months old and that I take pride in quick turnaround...and that the actual coding of the feature took less than 8 hours.

There are a couple of reasons why I have waited this long. First of all, I wanted the app to be in 'good shape' before adding a big feature like this one, so adding essential features like the Image Import and others came first.

Second of all, look at this image:

It's a picture of a page from Bill Buxton's Sketching User Experiences book that a customer emailed me months ago. I have it hanging in our office and I 100% agree with its spirit.

Until today Mockups was designed to only do sketches. Linking mockups together allows you to move from sketches to prototypes (albeit rudimentary ones), and in my opinion has the potential to change the nature of the application completely, so I want to thread very carefully...it's a slippery slope. Now that you have linking I have no doubt that you will be asking for a host of other features that a good prototyping application should have, like the ability to bundle mockups into projects, the ability to export all the linked mockups into an HTML / PDF "runnable" prototype, better templating/master pages support, the ability to create sitemaps...I'm not against any of this, but I don't want to forget that Mockups is a simple little application and I want it to stay that way. It should get the job done (FAST), stay out of your way, be inexpensive and fun to use.

So forgive us if those other features don't come right away...it's not easy to design them in a way that doesn't compromise the overall usability and 'feel' of the application. I will start some GetSatisfaction topics about them so that we can design them together.

Also, prototyping tools usually cost in the $400/user range, which IMHO is a fair price for what you get. So I might consider releasing some of these features in a "Pro" version of Mockups, keeping the current version as easy and inexpensive as it is today. Again, it's a slippery slope...a different market segment means different competitors...I need to think about it carefully.

The last and most recent reason for delaying the release of this feature is that there is a chance it might unleash some significant growth in customers. Since being able to provide legendary customer service is my #1 priority, I wanted to make sure we as a company are set up to provide it. For a while I was all alone, but now there are 3 of us who can answer email, tweets, etc. Still...Mariah, Marco and myself can only answer so many questions each day while moving the product forward at the same time. We are pretty happy with how we are doing right now, but realize we could do better and will need to be able to scale our efforts more once this feature is released. I'm working on it and hope to be able to share some exciting news on this topic soon.

Thank Yous

This feature wouldn't be possible without the extensive help (and nudging) of all the people who contributed to the "Help me design the linking feature" and related threads: darchik, Adam B., Adam Wride, Akimbo, arv43, Benned Frazier, Bhavin Turakhia, Brian Gilbert, Clyde C. Logue, Derek, Eugene Mirotin, frankodwyer, Henry Olson, Jason Smith, Jennifer Hudson, Jim Jarret, Johan, johnaustin, Jonathan Strauss, Jorge, kdhoffman, kvb, László Bővíz, Leon Barnard, LockSmithDon, Michael Bourque, Michael Hackney, modius, MrLucky, Nic, Nigel Pegg, Noel Gomez, Patrick Angeles, Pete, PeteM, pswulius, Rahndir, ramses, Riel Roussopoulos, Robert Dempsey, Robert Myers, Rory Clarke, ryanbetts, sfmatthews, Shailesh, smoyer, Stephen Scaringi, thinkdata, Thom, Todd Anglin, Travis Jensen, turnkey...this feature is for you.

I know I did not implement every one of your ideas, but be sure that they all influenced the current design and please consider today's release as a step forward, it's definitely not an end. We'll get to it all, we just have to be careful! 🙂 I hope you'll continue to share your great ideas going forward.

I'll update this post with links to a few GS threads about the next steps soon.

Onward! Happy prototyping! 🙂

Peldi

Peldi for the Balsamiq Team

Leave a Comment

Comments (24)

  1. Hi Virgin,

    Unfortunately, I’m in that particular situation where I am not allowed to show anything I worked on outside of those who are involved.

    I do notice only two of my asset links are working. I’ll just have to figure this out myself for the time being.

    If I happen to come upon this issue again, while working on something more personal. Then, I shall definitely send you an email.

  2. Hi RC,

    Sorry for the snag.

    Even links from imported assets should indeed work when you export to PDF.
    Would you mind sharing your file/project to support@balsamiq.com so that we can try to reproduce the issue here? We will keep your data in the strictest confidence and only long enough to try to debug your issue.

    Please feel free to add any relevant detail to your email such as the product and version used or the related assets so we can figure out what’s happening here.

    We’ll get to the bottom of this!

    Virgin

  3. Hello,

    I have exported my mockups as a PDF. My mockups contans links that are link to other mockups within the same project. The links seems to run find when I run Balsamiq in full screen presentation mode, but the links that are attached to my imported assets does not work in PDF format. According to the documentation, the links should work.

  4. Your comments about a “slippery slope” remind me of the splash that Turbo Pascal made back in the 80’s. For 80 bucks, you got a real Pascal compiler, when the cheapest one available before that was about 500 bucks. Maybe 80 bucks could buy you some basic prototyping abilities, including the ability to ship a pdf-based prototype around the company and have people ask how you made it.

    You have an excellent application, recommended to me a few days ago by a long time IA at Microsoft. Learning curve is pretty much zero. I bought the license after 3 days of use.

    The application is itself a testament to how to build software; I’m impressed that you kicked something of this level of sophistication out in 10 months! Great work, please keep it up.

    Bob Rodes
  5. Hi Balsamiq Team,

    I just discovered your excellent product today, months after this particular thread, but wanted to write (better late…). You’ve probably used Caretta Software’s GUI Design Studio, (http://www.carettasoftware.com), and they tackle navigation links with connection arrows that go from component to component, loading various mockup pages as necessary. Their one crime is the mockups/prototypes have too high fidelity, although you can dumb it down a bit through the presentation settings. They allow you to use the mockup page files as “component elements” that you can drag into your main workflow starting point. For example, if you have 5 dialogs that can all be spawned from one main part of the application, you just drag each page (that resides in a project tree) to the main page so you can see all five dialogs with the starting page. Then you use the line links to connect the calling elements (buttons, tabs, etc.) to each componentized page. I’m sure there’s talk of this somewhere in your forum but I’m new and have only scratched the surface. What their approach buys you is a full view of the application prototype (especially useful for iPhone apps) on one page with the line connections showing the links.
    Again, you’ve no doubt explored their application, but I just wanted to mention that approach seems to work really well.

    I am really impressed with how you guys run the company, manage the content of the site, and I’m delighted with the end result in your desktop product! Where do I sign up?

    Cheers,
    Ben

  6. I appreciate your desire for keeping the product simple. That truly is one of the big selling points. I also think you can maintain the applications spirit while incorporating linking/presentation.

    As a product manager and business analyst, I focus on HOW something is going to be used FIRST before I design the interface (though the overlap is substantial). Enabling flow and demonstration capabilities allows me to use Balsamiq to quickly SHOW the process and options of experiences with pictures rather than requiring my client/users to read use cases or stories.

    I actually think that exporting to PDF or PPT with linking embeded might serve your audience more than building more capabilities into a presentation mode.

    You may find that the greater opportunity is in simplifying the creation of the user’s flow rather than enhancing the presentation area where there are already tools that do that for you. My entire goal in the beginning of a application design is to dialog about what the user wants to accomplish. Low fidelity mockups with easy flow definition is ideal.

    Thanks for the great application!!!

  7. Peldi, is there a way to turn off the blue Link arrow on objects? I would like to link some things together, but I don’t want it to affect the look of my mockup at all because *most* of the time, I’ll just be sending out an email with some screenshots in it. I’ll rarely be doing a full screen presentation, but I’d like to bake in some of that just for my own benefit so I can get a feel for the flow.

    [Peldi: hey Dave, we’re working on it: http://www.getsatisfaction.com/balsamiq/topics/presentation_mode – scroll to the end]

  8. Hi all, here’s the link to the GS thread about porting this feature to the plugin versions: http://www.getsatisfaction.com/balsamiq/topics/adding_linking_support_to_mockups_for_confluence_jira_and_xwiki

    I’d love your input!

    Peldi

    Peldi Guilizzoni
  9. Please keep Balsamiq simple to work with. I like the fact that it is a sketching application and not a prototype application.

    How about two seperate applications, one for sketching and one for the advanced stuff.

    P.S. I’m currently reading Sketching the User Experience, so I recognized your sample application in the movie instantly.

  10. Thanks for the linking — huge advancement.

    For those who need to demo their mockups (and who doesn’t?), you might try a solution we’ve been very happy with — create a screencast of a typical walkthrough. I actually prefer this solution to letting the client just click around aimlessly, since I can both control the flow and narrate the experience.

    We use Macs, and the Screenflow application does a great job of capturing, and then letting you edit, a Balsamiq walkthrough.

  11. First of all, thanks for listening and implementing the linking feature in quite a successful way! I bought my license yesterday and today I’m already getting up to speed in a project!

    That said, and even appreciating your focus in simplicity, having a way to demo a mockup project to our clientes sending it by email would be great!

    Have you thought of making a “player”? just a stripped down version of the desktop edition with only the “Full Screen Presentation” option?

    Please… (!!!)

  12. Linking mockups is interesting, I guess.

    What would be better is multipage mockups and the ability to link to different pages. This crutch is just a crutch.

    [Hi Nate, we are actively working on multi-page Projects right now]

  13. Agree with linking you get into the big Adobe/Microsoft designer developer market, which could be interesting. One thing I like about Microsoft Sketch Flow is its simplicity to visually build the flow of the application.

    Also, I would agree that this could be a good opportunity for a Pro version.

  14. Please … do not destroy balsamiq’ incredible usage, by making it hard to work with !

    I have been working with other prototype tools … and it do become very complicated – because prototyping is complicated (often pretty damn close to developing).

    Just my 2 cents

    Nicolaj
  15. Brilliant, top marks for simple elegance.

  16. I have to demo a mockup next week, this COULD NOT have come at a better time! I had some minor regrets about purchasing a license before, but now am ecstatic about Balsamiq. Nice work!

  17. What Steven said – unless this is your plan to have everyone I email my exported mockups to buy a copy as well 😉

  18. “Save and Continue” for JIRA/Confluence – excellent!

    How far out is linking for JIRA/Confluence?

  19. Thumbs up for less instead of more. I think this one was a real test of your vision for the product and the choice you made gives me confidence in the future of Mockups.

  20. Any plans to allow linked Mockups to be exported in some kind of form that can be sent to end-users? It would be great if they could navigate around the screens. I find that non-developers sometimes struggle to visualize the flow.

  21. Great work as always Peldi.

    BTW, if email support is getting time consuming and you want to give HelpSpot a go shoot me an email and I’ll hook you up.

  22. Oh, sorry. Peldi, Marco and Mariah, thank you all 🙂

  23. Thanks, Peldi!
    Keep up good work. However, I am a little bit concerned about Mockups turning into Visio-like monster. It is a slippery slope, indeed. 🙂

  24. Speaking of slippery slopes, you realize now you’ll be expected to do screen transitions on button clicks 😉