Help us design the "Toggle Markup" Feature
Hi all!
Time to build another feature together! :)
We've been getting the following requests, which are all related:
- some of you want to hide the markup while in edit mode, for when you just want to take a look at the mockup or show it to someone
- some of you want to hide the markup when exporting to PNG or PDF or printing
- some of you want to hide the markup when saving your mockup in the plugin versions
- some of you want to hide the markup when in full-screen (this already works, just click on the icon or hit M to show/hide the markup)
- some of you want to specify some controls that are not in the "Markup" tab to be treated as markup.
I'm thinking all of the requests above can be accommodated with 2 features:
- A "treat as markup" toggle in a right-click menu for the selected controls. The following controls will have it turned on by default, but you'll be able to turn it off (again, via right-click):
Arrow, Callout, Comment / Sticky Note, Geometric Shape, Horizontal Curly Brace, Red X / X-Nay, Scratch-Out and Vertical Curly Brace
- A "show markup" menu item in the View menu (CTRL+M) maybe coupled with an icon next to the full-screen icon
When you hide the markup, it will automatically hide all the elements that have "treat as markup" on.
Then when you export to PDF or PNG, go to print or "save and close" in the plugin versions, the markup will only be visible if you have it showing before you do the export.
Aside from getting your general feedback about the idea, I have some specific questions:
1- should this be a per-mockup or application-wide setting?
I'm leaning towards app-wide.
2- should this setting be remembered across restarts?
Hmm, see question #3. If we can solve point #3 nicely, I'd say yes. Otherwise, no.
3- how will how will the user know that there's some markup hidden?
It has to be clear but not loud.
4- what happens to the markup elements UI Library when markup is hidden?
Two options: either we disable them, or we let you add them, but as soon as you drop a control, the "show markup" toggle is turned on for you automatically, showing all the other markup. I think I like the latter option better.
5- I don't want to save this "show markup" toggle in the BMML file itself, do you agree with that?
I think the "show me the mockup without the markup" is a transitory state, not worth saving. Especially if this is an application-wide setting (question #1).
Here's a quick mockup I threw together, I put the BMML here if you'd like to improve it: http://dl.dropbox.com/u/41723/togglem...
Looking forward to getting your feedback on this!
Time to build another feature together! :)
We've been getting the following requests, which are all related:
- some of you want to hide the markup while in edit mode, for when you just want to take a look at the mockup or show it to someone
- some of you want to hide the markup when exporting to PNG or PDF or printing
- some of you want to hide the markup when saving your mockup in the plugin versions
- some of you want to hide the markup when in full-screen (this already works, just click on the icon or hit M to show/hide the markup)
- some of you want to specify some controls that are not in the "Markup" tab to be treated as markup.
I'm thinking all of the requests above can be accommodated with 2 features:
- A "treat as markup" toggle in a right-click menu for the selected controls. The following controls will have it turned on by default, but you'll be able to turn it off (again, via right-click):
Arrow, Callout, Comment / Sticky Note, Geometric Shape, Horizontal Curly Brace, Red X / X-Nay, Scratch-Out and Vertical Curly Brace
- A "show markup" menu item in the View menu (CTRL+M) maybe coupled with an icon next to the full-screen icon
When you hide the markup, it will automatically hide all the elements that have "treat as markup" on.
Then when you export to PDF or PNG, go to print or "save and close" in the plugin versions, the markup will only be visible if you have it showing before you do the export.
Aside from getting your general feedback about the idea, I have some specific questions:
1- should this be a per-mockup or application-wide setting?
I'm leaning towards app-wide.
2- should this setting be remembered across restarts?
Hmm, see question #3. If we can solve point #3 nicely, I'd say yes. Otherwise, no.
3- how will how will the user know that there's some markup hidden?
It has to be clear but not loud.
4- what happens to the markup elements UI Library when markup is hidden?
Two options: either we disable them, or we let you add them, but as soon as you drop a control, the "show markup" toggle is turned on for you automatically, showing all the other markup. I think I like the latter option better.
5- I don't want to save this "show markup" toggle in the BMML file itself, do you agree with that?
I think the "show me the mockup without the markup" is a transitory state, not worth saving. Especially if this is an application-wide setting (question #1).
Here's a quick mockup I threw together, I put the BMML here if you'd like to improve it: http://dl.dropbox.com/u/41723/togglem...
Looking forward to getting your feedback on this!
2
people have this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
-
Inappropriate?I think that this is a great idea. On the point of markup UI elements when it's hidden though - as you point out, sometimes people might want to use these as part of the actual mock up, not as mark up. If you give people this option, then it would be strange to force it to be mark up when mark up is toggled off! Instead, maybe markup UI elements are auto treated as non-mark-up when mark-ups are off?
I’m excited!
-
Good point Joshua. I like your idea as well, but I fear it might require a level of understanding of the app from users that's very deep...this is a tough one! -
Inappropriate?True - maybe you could have a setting that says 'Treat mark-up UI elements like normal elements', which is default off. So the standard will be as you describe above (they always default as mark-up, and dragging it in toggles mark-up elements visible), but an advanced user can change it so that when you pull them in it treats them as normal elements, unless the user right clicks to change it. Understand that this is extra work though - maybe iteration 2;p
-
Hm, it takes you 5 lines to explain. "Markups are markups" is one line and I think everybody understand it...? -
I thought about this more, and I think wanting to add markup elements that are NOT to be treated as markup is a pretty rare thing, so I'm ok if it takes a few more steps to achieve than the more common case. Thus I'm leaning towards just turning on markup on drop. -
Inappropriate?I like this feature as well. My take on it:
1- should this be a per-mockup or application-wide setting?
BK- app wide would be my vote; per page seems unduly granular.
2- should this setting be remembered across restarts?
BK - I'd say yes, remember the setting since it's a setting that involves the state of the overall UI.
And my suggestion for letting the user know would be to treat the markup tab differently - maybe a gray/white inverse highlight as opposed to the existing no highlight or the blue-selected highlight. I would have said toggle the state of the button on the toolbar but that would be hard to notice and not in keeping with your UI. But if you come into the work environment and glance at the tabs it might be easier to see the difference. And this approach kind of keeps with the "all pages" markups on/off setting, as in "all these elements are disabled/invisible".
3- how will how will the user know that there's some markup hidden?
BK - see above.
4- what happens to the markup elements UI Library when markup is hidden?
Two options: either we disable them, or we let you add them, but as soon as you drop a control, the "show markup" toggle is turned on for you automatically, showing all the other markup. I think I like the latter option better.
BK- I agree with the latter option; we should be able to access the markups, and since the action is to add one, we'd want to know the location of the existing markups.
5- I don't want to save this "show markup" toggle in the BMML file itself, do you agree with that?
BK - I agree, not necessary in the BMML.
I’m interested.
-
Hi BK, thanks for the feedback. The issue with using the Markup tab in the UI library is that many people hide the library alltogether. I do like the option of making the button on the top-right a toggle. Let me mock it up, I'll post it at the bottom -
Inappropriate?Cool feature!
But don't use the context menu, use the property dialog. Markup is a property and all the properties are collected in the property dialog.
Just use the same icon from the toolbar as toggle (checkbox) in the property dialogs edit bar (top row). -
It's true that it's a property, but so are "Custom Properties", which are only accessed through the right-click menu. The reason I want to only show this in right-click is that changing the "markupness" of a control is an advanced feature, and as such I don't think it deserves a permanent spot on ALL the variations of the property inspectors. That said, if this becomes a very commonly used feature, we can always add a button there as you suggest. -
"Custom Properties" need a new dialog, so I think it's ok, to have it's own context menu. But to just set a boolean, I don't like to use a special context menu. You might hide some "advanced properties" in the same way, you're hiding the link stuff.
Talking about hiding, from a usability point of view I'd rather hide all these export menus... :-) -
Inappropriate?1- should this be a per-mockup or application-wide setting?
I vote for app-wide. Exporting to PDF is easier that way.
2- should this setting be remembered across restarts?
Not needed for me, but might help others. Shouldn't be that hard to implement.
3- how will the user know that there's some markup hidden?
Icon in the toolbar, see your own mockup :-P
4- what happens to the markup elements UI Library when markup is hidden?
Show markup library, but turn markup on, if one of the markup objects is used.
5- I don't want to save this "show markup" toggle in the BMML file itself, do you agree with that?
Yes, I agree, don't save it in the bmml file (see 1)
-
Thanks for the validation Andi -
Inappropriate?What I would be more interested in seeing would be a feature where: if you are in full-screen/presentation mode, the markup tags can be hidden by holding down a key (like the shift key).
-
This already works, while in full-screen just hit M to hide and M again to show them. -
Inappropriate?Funny, I needed that feature today!
I vote for the same as Andi:
1. app-wide setting
2. remember across restart
3. toolbar showing markup available
4. turn markup on automatically
5. don't save in BMML -
Inappropriate?I had hoped this feature was going to work a little differently. I remember seeing a video about how animators work. they have an image on a bottom sheet then they have tracing paper laid over the top the draw on the tracing paper the create a layer with the content they want.
I would like to see the tracing paper idea here. A markup layer that you can hide or show. When you show it you could then place anything on this layer . You could then place anything on this layer even new visual components.
If you extend this further maybe you are not making a markup layer but just making layers. You could create several with either comments or options mark ups. This would be great for generating storyboards showing how a dialog changes. You would want to select which layers are visible and which are not.
This could, for example allow you to use the bottom (current) layer to show state level UIs then use a layer to add transitions then another layer to add markup.
I feel that this would be more beneficial in the long run and it would allow you to introduce a variety of other types of functionality, where are the solution described above seems a little limiting.
I hope this helps and is not too controversial.
I’m hoping for something slightly different
-
Hi theThought, I like your idea but I think it makes the tool a lot harder to use, maybe let's have it mature a little bit more before adding layers. The good news is that my proposed design above does not conflict with the layers idea, in the sense that the toggle could one day be used to show/hide the markup layer...in other words, I think my design could evolve into yours farily painlessly (from the user's point of view), if we decide to go the layers route one day.
My name is "Baby steps" :) -
Inappropriate?Hi there, I haven't read through all the comments yet, but I was thinking this could be an OK solution for #3:

It's subtle in its normal state, louder in its "there's something hidden" state.
Thoughts?
I’m happy
-
IMO the colored icon is enough without the text in the toolbar (I like the consistency with the full screen mode). I would keep this icon to toggle markup visibility and not use the gray version (i.e. remove the icon when no markup is present) -
Hi Laurent, I'm not sure I understand you fully. Let me try to paraphrase:
- remove the icon button if there's no markup in the mockup (I'd rather disable it than remove it)
- don't add the label in the "markup hidden" state, but just show the icon button as toggled (I fear this might not be loud enough, but we'll see)
Anyways, this is a pretty small thing, we'll have to code it and see how it feels. -
- I would not add logic, whether there is markup or not, just enable/disable
- I vote for the "icon only, no text" version -
Inappropriate?My 2 cents:
1- App wide has my vote.
2- Yes - I think it should be remembered.
3- Toolbar option.
4- I like the drop and turn on option best.
5- Sure - I'm good with that. -
Inappropriate?1- App wide
2- Yes, remember setting on startup.
3- Toolbar option seems perfect. bright yellow/dim icon is sufficient. If people can find and use the full-screen icon, they'll be able to find and use the markup visibility icon as well
4- Definitely drop and turn on so I can place the new element.
5- not bmml.
I’m diggin' this feature
Loading Profile...







