Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
1  
For context, could we see a screenshot or wireframe of the application/interface? –  Matt Obee Sep 3 '13 at 14:40
    
you are right :) see the edit –  nkint Sep 3 '13 at 14:52
    
What sort of device/screen are you designing for? –  oatmealsnap Sep 3 '13 at 15:57
    
for a desktop computer –  nkint Sep 3 '13 at 17:46

3 Answers 3

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.

share|improve this answer

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.

share|improve this answer

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 :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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