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?

Improve this question
2
  • 3
    Using a checkbox would be more interesting here i think?
    – Yakke
    Aug 31, 2016 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, 2016 at 19:10

3 Answers 3

Reset to default
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

Improve this answer
1
  • 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, 2016 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.

Improve this answer
4
  • I didn't think about having a drop down! That's a good solution- thank you.
    – Katerina B.
    Aug 31, 2016 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, 2016 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, 2016 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, 2016 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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