save, save as, load, reload buttons

Question

I need to add those 4 buttons:

1. Save (the current settings)
2. Save as (a new setting files)
3. Load (a new setting files)
4. Reload (reset the settings to the last saved)

I don't know how to graphically put those 4 buttons because I'd like to have them in a workflow order, like: (imagine them in a column) the first one you have to press is the upper one, and the last you have to press before quitting the application is the last one.

The workflow I have in mind is something like: if you open the application the first thing you'd like to do is to load some settings, then change/play with them, and save. If you make some mess you'd like to reload them.

But the reload one is kind of important (if the user is in pnic i want to save him with the reload/reset button) and..

What would you do?

The, even if Save and Save as (a floppy disk and a floppy disk with an arrow) are common way to say "save" I'm not sure about how "reload/reset" icon should be..

Here is how the application should like:

(there are a lot of settings/parameter and one big frame that contains the image of which you are modifying parameters)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Text + Icons = Usability. Visual images can be extremely ambiguous. The syntactic indeterminacy means that to some people the meaning of the picture is left up to their imagination. A photo of an Arrow might look like "next" to some, "forward" to others, and maybe even "back" to those who's language reads opposite the first two.

An icon helps, but having text helps a lot. Check that link for a slew of studies on the issue.

Answer 2

Depending on how much screen real-estate you are working with, plain old text might be best.

Also depending on how people are going to use this application, "Save" seems like it would be the most common and most important function out of those four. It could be beneficial to only add an icon to the "save" button, leaving the other three deemphasized.

Answer 3

It is seems to be a desktop application according to the mental model you are referring to. If you are on the web you should consider some other way to save and load :

• New and Open instead of Load

This can be a search bar, a list, or a link to a pop-up

• Save changes / Cancel instead of Save and Reload

This can be a button for Save changes and a link for Cancel, for sure they have to be distinguishable

• Make a copy instead of Save as

This can be in a action button or a link

Another way can be using Auto save and Undo/Redo but that is another step forward...

Tips

Do not use icons except if you do not have enough real estate.

If you use pop-ups do not forget the ellipsis points

An example :

^{download bmml source – Wireframes created with Balsamiq Mockups}