Loading Profile...
Hover Over State for Presentation mode
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:
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.
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
I’m interested in seeing what other people think of this idea.
3
people like this idea
I like this idea!
Tell me when this idea gets some attention.
The more people who like this idea, the more it gets noticed.
The more people who like this idea, the more it gets noticed.
The company has not planned to implement this.
-
Inappropriate?Hmm, this ends up in balsamiq authoring rather than balsamiq mockups. I used to work with a product called Picure Book (not on the market anymore, we switched to Powerpoint). It had features like that.
Personally, I don't like more presentation features, as all the mockups I make end up as PNG in Word. I fear, next would be actions on checkboxes or menus...
Again, this is just my opinion. I can see the use for such a feature in presentation mode. -
Inappropriate?Hi Jenni, this is definitely a stretch. I really really would like to avoid adding "actions" or "behaviors" to Mockups if possible, it's a terribly slippery slide which ends up in Mockups becoming a very hard tool to use.
That said, can you please tell me more about what your use-case is? What was the mockup that made you think about asking for this feature? If you tell me what the problem was in detail we can maybe think of a different way to solve it that doesn't require to much UI...it's a long shot, but we could try... :) -
Inappropriate?Here's a section out of a recent mockup I've created that relates to my request:
Notice the "tooltip" balloon that's coming off of the link showing the user's account name. In a "live" situation this tooltip appears when the mouse pointer hovers over the link while clicking the link opens up the user's profile page.
If this was the only tooltip interaction on the page I could probably get away with creating a single mockup for the page this UI comes from, leaving the tooltip visible and then setting the link value for the username link control to open the mockup for a user profile. Unfortunately, there are several links across the entire mockup which also present a tooltip on hover. Placing so many tooltips in the mockup at one time not only causes visual clutter but they can also start covering up most of the main UI.
I could create one main page without any tooltips and then copy it several times and add one tooltip to each copy and then set the link value of each appropriate link to bring up the appropriate "tooltip" page, but there are a couple of problems with this approach. One is that, once the link value of the link control is set so that clicking moves to the tooltip mockup then it isn't available to be used for moving to the user profile mockup. Another is that I now have to manage many almost identical mockup files - one for each tooltip.
There are probably other workarounds for exhibiting this behaviour within presentation mode, but I'd prefer to have a mechanism designed specifically for showing user interactions in response to a pointer hovering over a control rather than clicking a control. (Currently, I just don't use presentation mode and instead create the multiple files, export everything to PNG and create web pages using jQuery to make hovering show the tooltips and clicking go to the next mockup page.)
:-j(enni)
I’m glad you asked for further explanation.
-
Inappropriate?I would be interested in reading the continuation of this discussion if any explanation was given (maybe via email or other?)... because I am having the same 'problem'. I have to work with a given navigation to extend an existing website, and there are submenu lists that are displayed when hovering over a menu button.
Interestingly, there is really no mockup without design, which is quite fascinating. Design can be reduced but never to zero, somehow it is always 100%!
Juliette
I’m thankful
-
Inappropriate?One way to implement this would be to allow users to connect to two separate mockup files - one for a link, one for a hover - to the same control. Links are already shown with a blue arrow icon in the lower right corner. Hovers could be shown with some other icon - maybe a "speech balloon" which is reflective of the "rich tooltip" concept that a large majority of hovers represent - in a different corner - top right maybe?
Then, in presentation mode, always show the hover icon and when the hover icon is clicked, the presentation switches to the specified "hover" file.
Any file that has been opened from a "hover" link in another file should work just like any other file. One "nice to have" would be if presentation mode could automatically returns to the calling file if the user clicks anywhere that isn't set as a link or a hover.
I’m tired of having to manually hand code rollover hover effects
EMPLOYEE
