Best way to show many user actions for table rows?

I currently have a table which shows a row for each created form a user has. For some users this will only be 1 or 2 items. For others, they'll have 40-50.

For every form there are many actions available based on the status of the form. If it's "incomplete" you can edit it, delete it, show a read-only view, PDF version, etc. If the status is something else, "edit" and "delete" may be hidden but you get new options.

We've noticed some severe usability/discoverability problems with the way it is now and I was hoping you guys had some suggestions on improving things.

Here's how the table looks:

As you can see, the most common actions are displayed to the right of each row, to a maximum of 4. However, there is another menu when you hover over the hyperlinked name:

(We originally copied this idea from Sharepoint)

When the user clicks the background of the cell - but not the hyperlink - they're shown the following menu:

As you can see, there are many more options than we had room to show on the right-hand "Options" column.

---

There's another similarly activated menu in the table header. We call this the Table Menu for lack of a better term (please suggest a better term!). When you hover your mouse cursor over any of the column headers, you see a blue button with a down arrow:

Clicking this button shows the following menu:

(We originally went with a button because if you click the header itself, it resorts)

---

As mentioned before, we now know these were terrible choices, especially the first example. Users have consistently failed to discover the functionality and we've got seasoned veterans with 4 years of working with the site who don't know these buttons are there. Clearly it needs to change.

However:

• We're pretty sure a list of ALL the options just dumped on the right column isn't the answer. (In fact, we used to do this, and many complained about it)


• The table takes up pretty much the entire horizontal width of users' screens, so putting stuff to the left/right of the table won't work


• For many users the tables can be long, so putting stuff at the top/bottom of the table likewise won't work.


• We'd also like to have better usability for tablets, where small, cramped links are bad and 'hovering' is impossible

---

Do you guys have suggestions for how to improve either/both of these experiences?

Thanks!

Answer

You could proceed as follows:

1. Try to reduce the width of the particular columns. This way you gain space.


2. Move the contextmenu completely to the right, such that all actions are under one hood.


3. Reconsider your actions. Prioritize and group them and correct the layout correspondingly.

And in detail:

Regarding 1.: For example, the column description doesn't need to be as wide as the most long word in the column. You could introduce a line break, if a certain width is exceeded. This article gives some inspirations for the design of data tables in web applications. Additionally, maybe you find a more space-saving representation of the "Completed"-Column.

Regarding 2. and 3.: From the number of available actions, I conclude that your table is used very interactively. I don't know your context but I guess, that the user usually spends some time with his selected record transferring, submitting, editing and so on. Maybe expandable rows are appropriate in this case (see the links below).

Ask yourself: what are the most important and most frequently used actions? These actions should be displayed first (for example, maybe "transfer/submit of pronk attachments" is in reality used more frequently then "pdf" or "notes").

Further inspirations you might get here: Article at UXMatters.com

Ideas for inline-editing: Article at designingwebinterfaces.com

Ideas for expandable rows and action menus: jankoatwarpspeed.com