1

In the UI design I'm revising, there is a small floppy icon isolated on the main subpane toolbar. Usability tests indicate that people don't see this, so I was considering adding the word 'Save' to the icon to make it more explicit, thus:

enter image description here

However another requirement has now popped up which mandates a 'Save As...' capability. I suppose the obvious thing is to append a small downward arrow or triangle to indicate a dropdown menu with 'Save' and 'Save As...' as options.

The question which I'd be grateful for opinion on is: what wording is suitable to have alongside the icon - this?

enter image description here

Improve this question
5
  • Is it the down arrow-part a separate button?
    – JOG
    Commented Jun 12, 2012 at 13:41
  • It's supposed to be a similar thing to that at the top of this web page, alongside the word 'StackExchange'.
    – Phil Parry
    Commented Jun 12, 2012 at 13:49
  • conventionally this control is located in some main menu, and not in the tool bar. A shortcut for saving is good to have in the tool bar. However combining this with a Save as makes me a bit uncertain... Maybe you don't have menu bar in the application you're developing?
    – AndroidHustle
    Commented Jun 12, 2012 at 13:59
  • I think that the issue is, how big it is and what colors it has, all relative to the rest of the window/page. Perhaps larger screen shots would help.
    – Danny Varod
    Commented Jun 12, 2012 at 14:48
  • What about replacing the small icon + small text with a common 'file' menu link?
    – DA01
    Commented Jun 12, 2012 at 15:11

1 Answer 1

Reset to default
6

It seems like you want to add a Split Button, a button with alternative actions to the default action.

Visual Studio does a similar thing for the action "Add Existing Item" to a project. Pressing the button itself performs the default action (here: "Add"); but pressing the small arrow button shows the alternatives to that action:

enter image description here

In this example, the down arrow is actually a separate button, so it requires a click exactly there to open the drop-down. It seems like you want to make the entire button expand the dropdown in your case, but if the requirements does not mandate exactly that behaviour, I would rather choose the Visual Studio way if "Save" would be much more frequently used than "Save As".

You refer to the StackExchange button on top of this page, but that button is not a default action with alternatives in a drop down, but instead expanding a content that is very different from the button itself.

enter image description here

Either way, it is OK to have the label of the button to only describe the default action. Also consider different icons (or no icon for the alternative).

My experiences from the Visual Studio button is that people have a hard time figuring out how to find the action "Add As Link" to start with. They look for something like "Add Existing Item As Link" next to the "Add Existing Item" action in the menu, not realizing that they first have to open the "Add Existing Item" first.

enter image description here

But in your case, with the button with the alternatives already in the tool bar, it will be easy enough to find.

Improve this answer
2
  • 1
    As a side note, the Add Existing button referenced in Visual Studio is referred to as a Split Button.
    – GotDibbs
    Commented Jun 12, 2012 at 14:23
  • @PhilParry If you like an answer, please vote it up. (And when you have the rep, vote down only misleading or irrelevant answers, not answers you don't like). Also, when you see one or more answers that correctly answer the question you posted, select the best one as "Accepted answer".
    – Danny Varod
    Commented Jun 12, 2012 at 14:51

Your Answer

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

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