I have a web form with a canvas. I must add two buttons in the top-right corner, "Save as SVG" and "Save as PNG". I was wondering if using a drop down button instead of the buttons could be better. At first it seems a nice choice, but I have a doubt on the drop-down button as a good solution under the point of usability. Can the drop-down button be considered a valid choice? Or it's just a hybrid solution?

  • After some searching for a jquery dropdown button, I ended up by creating my own. For those of you interested in seeing my solution, the plugin is available as open source at github https://github.com/fraricce/frMultiButton
    – F.Ricceri
    Jun 14, 2013 at 7:43

4 Answers 4


Usability wise, I would suggest using two separate buttons. The benefits are:

  • Both options are visible to the user
  • Both options take a single click (Using drop down usually will end up in the user have to click twice to select either option)

That being said, if you still want to use a dropdown, you can 'optmize' it by selecting a good default state. Rather than it being a null state, choose the option which is used more.


download bmml source – Wireframes created with Balsamiq Mockups

  • Or choose a "Save" state as the default that does nothing. Jun 8, 2013 at 16:24
  • @Jop Sorry, don't understand that. Why should a Save do noting?
    – danijar
    Jul 31, 2013 at 11:08
  • @danijar As the default state. I mean, 3 options in the dropdown, "Save", "Save as SVG", and "Save as PNG". By default it's on "Save", which does nothing, and something really happens when the user clicks on on of the 2 other options. Jul 31, 2013 at 11:19
  • @Jop Okay thanks, got it now. Indeed, I don't like the solution that much, because selecting an option shouldn't trigger an action since it's too easy to select the wrong entry by mistake. So you'd need a button anyway and you could then just provide a default selection in the dropdown.
    – danijar
    Jul 31, 2013 at 11:48

There is another option: a "save" button furnished with the format options displayed as radio buttons.
Usability-wise, and depending on the usage patterns, it would be nice to have a big and visible "save" button for the user to capture it with a single mouse action.
The format choice would be done once (if this pattern fits) and remembered for that user until changed.
This way the user has to think about the format only once, the first time.
After, it's a matter of only clicking "Save".
I'd choose radios instead of a dropdown because with radios all the options are always visible, and the action is reduced to a single click.
The page needs a way to force the user to choose a format, like for example not enabling the "save" button until after a format was selected (easy) or popping a dialog to ask for the format when somebody chose "save" without selecting one (less confusing).


download bmml source – Wireframes created with Balsamiq Mockups

  • Thanks Juan, it might works under the point of usability. Trying to figure out how it'll looks... Thanks!
    – F.Ricceri
    Jun 6, 2013 at 21:16

If you plan to implement other file types in the future, then I would use a drop down. This will keep the experience consistent.

User would first see "Save as..." And then upon selecting the field, you'd show the file formats.

  • This is a developer´s mantra to favor the easier-to-implement dropdowns instead of radio buttons or other controls that are all visible at once. Francesco can implement new formats by adding new buttons, not using a dropdown won't lock him out of this chance. Ideally in an ideal future he´ll have a single "Save" button and the users will be isolated from the file format thing.
    – Juan Lanus
    Jun 5, 2013 at 22:35
  • I see your point, never thought of it that way. Thanks :)
    – rubysoho
    Jun 5, 2013 at 23:14

I would use a "Save" button that shows a dialog asking for file format when clicked.

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.