0

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![enter image description here]1

  • 2
    You should describe what exactly the purpose of these buttons is and how important they are. Also, are they action buttons or (like it seems on the image) selections? Are multiple selections possible? – Big_Chair Jan 10 '17 at 15:18
  • What's the difference between save and process? Which is the final action? – Eric Stoltz Jan 10 '17 at 18:02
  • It may not look pretty, but I think your current design is functional. I would add icons to the buttons, since that will help your users choose from the options. You could also consider grouping the buttons, line by line, into similar functions (You could even try toolbar-like approach). For instance, maybe Save, Delete, and Clear would belong together. But I wouldn't hide anything. – John Jan 10 '17 at 19:49
  • @eric-stoltz - Save: Just save changes. Process: run the batch process belongs to this item. Where is no "the most final" action. – Vladimir Yakovenko Jan 11 '17 at 9:10
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 ... )

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • I'm not a fan of hiding anything for only 8 items. I think just visually grouping the items somehow, while keeping them all visible is better. – John Jan 10 '17 at 19:52
  • 1
    @mortalus - Looks very useful. I still can't ( not enough reputation ) vote for your answer, but I like it. – Vladimir Yakovenko Jan 11 '17 at 9:13
0

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

Icon + Name of the function

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It will be more obvious and neat to the eyes.

0

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.

0

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.

0

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.

enter image description here

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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