Jenni Merrifield's dashboard

I'm not sure how you'd implement this but here's something I'd really like to see - hover over options for presentation mode.

Right now we have links - which is awesome. This lets me create a bunch of mock ups, enter presentation mode and then simulate the changes that occur when clicking on any control where a link is defined. However, in many of the interfaces I'm mocking up, in addition to the large scale changes caused by clicking I often also have smaller scale changes that should be caused by HOVERING over a control.

Now, you might be saying "But Jenni, can't you just use a link and open another mockup showing the hover state?" Well, yes, but that becomes problematic when the control in question has both a hover state and a click action. In other words, if I use the link to show the hover state then the link isn't available to show what happens when the control is clicked, and if I use it to show what happens when the control is clicked then it's not available to show the hover state.

One way this might be implemented is if user defined layers (http://getsatisfaction.com/balsamiq/t...) that can been shown/hidden as desired were implemented first. Then you could add an option on controls for "has hover state" which, when enabled, allows you to specify which layer to show "on hover". The disadvantage I can see here is that you'd need a unique layer for each possible hover state which would probably be rather unwieldy to design.

Another way that might work would be to give individual controls (and possible control groups) the following additional options:

• "shown on hover" - checkbox that, when checked, makes the control initially invisible in presentation mode


• "show on hover" - drop down box that provides a choice of any control (or control group) currently marked as "shown on hover" that, when specified, makes the selected "hover" control visible when the mouse pointer is hovering over the main control.

In this latter case, each control (or sub-control area) that can be assigned a link should also be allowed to have a hover control assigned. Even some items that don't currently provide for links (like Label/Text String) should probably allow hover states.

As for what can be made "hoverable" - ideally give the option to any control, because if you don't, no matter what controls you use someone will want to be able to hover something you figured no one would ever want to. In the absence of that, I'd suggest providing the functionality on the following controls. They are listed in approximate order of priority, from highest to lowest.

• Tooltip / Baloon


• Menu


• Alert Box


• Calendar


• grouped controls

While using a single PNG image with image map capabilities in an HTML file is a pretty good method for moving Balsamq Mockups files into a more accesible dynamic format, I'd like the option of exporting just the controls I've selected to PNG. This is similar to behaviour available in both Visio and Illustrator. In Visio's case, when saving to a bitmapped format (JPG, GIF, PNG) it always exports just the selected objects, unless none are selected in which case it exports the current page. In Illustrator you are given a choice between exporting the entire image, with or without the Art Board boundary, or only selected objects.

An example of where I'd use this is functionality: I could create just one Mockups file with the base UI and any hover states, generate a PNG image with just the base UI selected and additional PNGs for each control representing a "hover" state and then, in conjunction with absolutely positioned div tags and jQuery, I would only need one HTML file to show all the relevant interaction.

With multiple Mockups files it could create an entire dynamic storyboard in a single HTML file.

I acknowledge that a full implementation of layers that can be shown or hidden before exporting to PNG would also solve this issue, but perhaps this would be easier to implement? This method would also mean that, except for the background UI, each individual image the HTML file points to would be quite small, thus reducing the load time for the page.