How to place large ( 8 ) buttons on the screen ( block )

Question

We need to place about 8 buttons on the screen. All buttons belongs to one entity. ( Selected from the left table )

This is action buttons.

Purpose of buttons:

• Save
• Clear
• Delete
• Add child
• Change conditions
• View result of processing
• Process
• Process with child elements

I guess:

1. Dropdown buttons. Hmm.... seems like awful.
2. Small icon buttons with tooltip. I don't know.

What is the best practice in this case.

Thanks in advance for help]1

Answer 1

You can utilize the "responsive design progressive enhancement" pattern where according to the clients window width you could display more or less buttons while the most used will be first so there is more chance they are visible at once...

Icons are always a good idea but only for the primary options to make available via visual scan and not by reading the option (save, delete, close etc ... )

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

Answer 2

You can make them looks like this the structure you can add some border element too,

Icon + Name of the function

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

It will be more obvious and neat to the eyes.

Answer 3

You can try placing one button called "Actions". By clicking on that button show all the actions in list or have a iconic representation to reduce button length and accommodate all in one line.

Answer 4

In my opinion, the buttons must be relocated according to what is expected from them, I see Save Clear and Delete, then I see Process and View result, then Add child and change conditions, and I am not sure they all belong to the same form.

Think of the buttons as what they will do next, Save will do nothing but save, so it is a big button at the bottom of the page, "clear" on the other hand should be a link button, Delete, is dangerous, maybe a red delete button somewhere at the top right corner, Change conditions still needs more input from user, Add child should be below the part that will be appended (not clear in your screenshot what child is to be added)...

Bottom line, i think you should rethink your button locations, it isn't a question of how to shape them, Save and Clear cannot sit together of the same weight, your users will hate you for it, if you translate your screen to English it might be easier to help you figure out the right locations.

Answer 5

I would suggest grouping in context. I don't know what the software does and I can't read the labels, but something like this:

• Save: Get rid of it. Autosave everything.
• Clear: Get rid of it. Clicking this by accident removes work and makes the user start over again. Nobody ever really uses Clear except by accident.
• Add child: Presumably one of these fields is a child. Get rid of the button at the bottom and put a + or plain text link "Add" next to the child field. On clicking it, another field is displayed.
• Process with child elements: This is a variable of the primary button, Process. Add a checkbox at the end next to the Process button, labeled "Process with child elements." Make the default state whatever the most frequent use is.
• Delete: Use an X icon or trash icon, put it at the top right of the form.
• Change conditions: Presumably one of the inputs is condition. Why do you need a button to change this? Make the element changeable. If you need a popup or something to change it just add a link labeled "Change" to the right of the condition.
• View results of process: Is this a preview (or review)? Maybe call it that and make it a secondary button at the bottom with less emphasis than Process.
• Process: This is your big, bold button at the very bottom.

There you go. We went from eight buttons at the end of the form to two.

Answer 6

Your best option would be to show the item ('Шаблон') editor with it's own left side vertical navigation pane (your buttons) and hide the grid view ('Шаблоны') completely or slide-hide it to the left.

This way you will get all the buttons pretty good equally formatted and looking nice. You can also add some more options/commands later without breaking the design.

Don't hesitate to hide the grid pane. Currently the user has already selected an item and would like to concentrate on working on it. It is very clear for a user, that if he would like to select another item to edit he can do it by clicking 'Шаблоны' on the navigation above.