User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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.
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:
Or for example, with text, different color and with a default action already visible. There are lots of possibilities:
and after slide in:
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.
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...
Something like this could be an idea:
The interaction would be
Pro: users could select a bunch of items and evaluate them simultanously.
Con: users have to click/tap 2 times minimum
An action such as a finger tap or mouse click could be used to show the options available to the individual row.
Per the image above I would also suggest at least one, possible two, changes:
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.
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.
This forces the user to do two things:
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.
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...
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/
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.
