3

I've written an app for my company that watermarks images we've created and compiles them into a pdf to send to the client. However, rarely, clients will request unwatermarked images: so there needs to be a secondary button to just compile the images without watermarking them.

enter image description here

I want it to look clear that "Watermark All" is the standard and that "PDF Only" is only for rare cases. I've tried making the PDF only button darker, but then it just looks locked/unclickable.

How do I encourage users to click the watermark button unless they've been told otherwise?

  • 3
    Using a checkbox would be more interesting here i think? – Yakke Aug 31 '16 at 13:14
  • The answer by SteveD (ironically, no connections to me, Steve DL) is the way to go. One issue of your UI that causes confusion is that you confuse parameters of an action (watermarked or not) with the call to action itself. "Add..." or "Remove..." clearly explains what it does. But what is the action with the other 2 buttons? If one's "Save" and the other "Save without watermark", it becomes clear what the difference is between them. Then, use default response/focus and a highligh colour to attract user attention on the preferred button. Place it at the edge too for easier clicking. – Steve Dodier-Lazaro Aug 31 '16 at 19:10
10

The watermark feature is just a "setting" of the create pdf feature, so perhaps this should be a Watermark images checkbox which is checked by default.

Also the trigger to create a pdf probably needs to be changed to Compile to PDF because this is aligned with the goal. You could shorten this to just Compile.

enter image description here

  • This is so much the better answer. 1) The watermark functionality is clear and discoverable. 2) You don't need the "PDF Only" button, saving space and ridding that portion of the UI of ambiguous functionality and odd wording. 3) You get the Compile button right where the user needs it - conveniently located at the end of the workflow! – Stonetip Sep 1 '16 at 17:59
1

I can think of a couple of possible ways Katerina.

Firstly would be to put 'PDF Only' as a drop down under the 'Watermark All' button, this shows that Watermark All is the default button but that secondary options are available.

Where watermark all is a button in the below example.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or like this example:

enter image description here

The second option would be to provide a confirmation dialog box after 'PDF Only' is clicked, with a message like "Are you sure you want to proceed without creating watermarks?" - Or whatever message is most appropriate for your situation.

You could always combine the options.

There are other ways, but these are just a couple of ideas - hope they help.

  • I didn't think about having a drop down! That's a good solution- thank you. – Katerina B. Aug 31 '16 at 4:45
  • I'm not sure using a dropdown in that manner is going to be good usability. In general, things like dropdown (and checkboxes, radio buttons, etc) are selectors, not triggers... This use makes their function ambiguous, unless you include a control to act on the selection (which might start to get messy here) – Mattynabib Aug 31 '16 at 12:07
  • Two problems. Firstly, available options are less discoverable this way than in SteveD's answer. Not warranted for when there are only two options to complete the actions on a UI. Secondly, it can be difficult for novice users to navigate this kind of UI and not accidentally "select" one call to action when reading up options in the combobox. Don't mix up buttons and entry widgets. – Steve Dodier-Lazaro Aug 31 '16 at 19:12
  • In this case the drop down is not used like a checkbox, radio button, etc selectors - but more like a dropdown menu. Think about a web dropdown menu where clicking a menu item is in fact an action, or clicking the menu bar at the top of an application i.e. Tools, Edit, etc then you are again performing an action. The problem is that we call both of these things drop downs. I use many applications, photoshop, visual studio, rubymine, that all use this pattern. – Brett East Sep 1 '16 at 2:09
0

As I mentioned in the comment above, in general, things like dropdown (and checkboxes, radio buttons, etc) are selectors, not triggers. They ARE used that sadly sometimes, but it is not a very clear use of the control and can confuse people.

The dropdown control above seems to imply that the "Watermark Only" option is the default and somehow functions as a button as well, but you can trigger the dropdown and pick the other option. Does just picking the option trigger the function? That's not how dropdowns usually work, so you may surprise users by taking immediate action in their selection. The other option might be to have a "Go" control to act on the selection.

However, one of the most common ways to provide a secondary action is to render it as hyperlinked text rather than as a button (as you see with "Cancel" options on many forms). I phone, so I cannot provide a mock up now, but a link - perhaps grayed back by some amount to deemphasize it even more - would help make the priority of the other buttons clearer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.