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 have many buttons on the page (see the image below). You can perform an action on every item using these buttons. Is there any ways to improve this? I was thinking a lot, but can't find a good way to do this.

I also can't hide them and show only on hover, because there is no such hover-event on mobile devices.

Many buttons on the page

share|improve this question
    
Possible duplicate: ux.stackexchange.com/questions/42043/… –  cimmanon Nov 20 '13 at 15:34
add comment

8 Answers

up vote 14 down vote accepted

I once had the following solution to this problem: In my case there was an input and when the input got focus the buttons would slide into the row (and stayed there after the input lost focus). In your case you can create a button on the side which, when clicked, will slide in the other buttons. Something like this:

enter image description here

Or for example, with text, different color and with a default action already visible. There are lots of possibilities:

enter image description here

and after slide in:

enter image description here

You could also use arrows or different shapes on the "more" button or what ever works best for you. I think the slide in and out effect is more clear than just show or hide all buttons immediately.

share|improve this answer
add comment

Without knowing more details, I would guess that the "Run" operation needs to be used more frequently than the others. For this reason I made it more prominent on the left, which also helps separate this from other actions. The other options are access through a "More" button.

Also I would consider the word "Duplicate" instead of "Clone". "Clone" seems a little geeky (at least here in the US), unless the users are specifically computer geeks, then it might be appropriate.

Just an idea...

idea

share|improve this answer
add comment

An action such as a finger tap or mouse click could be used to show the options available to the individual row.

enter image description here

Per the image above I would also suggest at least one, possible two, changes:

  1. Separate the "positive" actions from the "negative" actions.

In your case, "run" and "clone" from "delete". The positive actions, which would generally be the more common ones, should be placed in a more actionable area -- that is, easier to get to. I placed the "run" button near the template name -- I'm not necessarily suggesting that is the best location.

A "negative" action should be harder to execute -- not annoyingly difficult to get to, just someplace that is obviously different from the "positive" actions. Placing to the far left or far right is common.

  1. Move "Clone" into the "Add Template".

This is a suggestion that would reduce the number of buttons, but I am unaware of your applications function as a whole so this may not ultimately be a best case scenario. If "clone" is not a very common action, asking the user to first "add template" and then giving them the option to "clone" it would not be a general annoyance. That choice depends on your use case.

I would not suggest placing a single set of buttons above or below the table and asking the user to first select a row.

enter image description here

This forces the user to do two things:

  1. Make large mouse, or finger, movements between the selected row and the buttons.
  2. Forces the user to scroll when the table is long and the buttons are off-screen. In this case too, the buttons may not be visible if below the table and the user may not be able to use them as context -- thus not knowing what to do!
share|improve this answer
add comment

Something like this could be an idea:

enter image description here

The interaction would be

  • select item
  • run/clone/delete selected item(s)

Pro: users could select a bunch of items and evaluate them simultanously.

Con: users have to click/tap 2 times minimum

share|improve this answer
add comment

Its also common on mobile platforms for these sorts of lists to have an edit mode and as well as a normal mode.

When in edit mode, you might display just the Clone and Delete buttons. In normal mode, you might just show the Run button.

share|improve this answer
add comment

Otherwise you can use hover(as you said) for desktop users but for mobile users you can use swipe from right to left to show buttons. The behavior you can find on mail app on iOS and so on...

share|improve this answer
add comment

The way Tweetbot on iOS exposes the menu for each tweet on tap is another good method to solve your problem. Great post on table UI patterns here: http://www.jankoatwarpspeed.com/ultimate-guide-to-table-ui-patterns/Tweetbot on iOS 7

share|improve this answer
add comment

Why do you need a "Delete" button for a mobile interaction? (If I understand right,you said it is a mobile device).

The standard interaction for delete is the swipe gesture on line item.

Run could be on the left (play button), and clone to the right. This separates the two action visually and reduces the chances of clicking a button by mistake.

share|improve this answer
add comment

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.