6

I have a list of customers in my application. The user can use the same actions for all the entries in the table: show, edit, view stats and delete. Currently I have the links for those actions on each of the lines.

enter image description here

To me the massive group of links looks poor design. What I think is that repeating stuff is bad.

In what other way could I implement the functionality to the entries? Could I instead of the always showing links use a context menu for instance? If I end up using a context menu, how should I provide a fallback method for mobile users?

Keep in mind that the user base is not technical. Most of them are business users that know how to browse internet and send email and that's it.

2

You could group together actions near the top so that the user has to click the checkbox next to a row and then hit Edit/Delete/Show/Stats. This should work for mobile as well:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Alternatively, you could do something like this:

mockup

download bmml source

And for mobile users, default to how you currently have the layout setup so that each individual row has its own action buttons. Since your screen size is severely limited on mobile, having actions on each row is better in terms of usability and accessibility of actions.

2

@hidrees is on the correct and what I do varies slightly. I combine the two suggestions.

I use a Group Action combobox in the header whose selected action will be applied to all selected rows.

I use a single Action combobox per row to apply the selected action to that row.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

As you can see above, I've demonstrated where a single Action combobox and the Group Action combobox have been opened so you can see the available actions.

Also, you'll note that the far left column contains checkboxes. The header is a select/unselect all checkbox and the rest allow you to select multiple rows to perform a Group Action against. This can also be done by being able to highlight multiple rows in your datagrid, but sometimes that isn't an option.

I also have found that some users like to use the keyboard and for them I assign shortcut keys. So for the actions, you could do something like:

  • Show (S)
  • Edit (E)
  • Stats (A)
  • Delete (D)
  • 1
    This is a great solution, if repetitive. Suggestion: Place the action menus to the right of the Name columns. It feels more specific to the content rather than specific to the selection when looking at it contextually. – Pdxd Mar 30 '15 at 18:46
  • Yes you could do that as well. Our grids allow the users to reorder the columns to their content. That said, this is the default view most preferred. We also freeze these two columns on certain grids due to their width so the actions are always visible. – Code Maverick Mar 30 '15 at 18:51

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.