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?
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.
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).
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.
I would use a "Save" button that shows a dialog asking for file format when clicked.