17

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: Table overview

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:

Row mouseover (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:

Row 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:

Table Header Button

Clicking this button shows the following menu:

Table 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!

1
  • P.S. This is a web page, not a native application.
    – DOOManiac
    Oct 5, 2012 at 13:14

6 Answers 6

11

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

2
  • Lots of great links, thanks. Regarding the order, it could definately stand to be re-ordered a bit. I also like the idea others mentioned of still showing, but disabling, irrelevant menu options. That'll give some more consistency to the menu I think. Regarding making the columns skinnier, word wrapping the description just trades horizontal cruft for vertical - and it introduces whitespace on all the other columns. We can't really combine columns into a nicer looking combo either, because sorting is a very heavily used feature here...
    – DOOManiac
    Oct 3, 2012 at 21:57
  • 1
    One issue that we found during user studies with controls on the very right is that the main row identifier is usually on the left so the users have to track the mouse/eyes from left to right to make sure they match controls to the right icon. Aug 25, 2016 at 21:10
5

Regarding the 4 popular actions you have in the "Options" column:

If you have more than 4 actions, you can change the fourth action to "More..." and when clicked, show the complete context menu for this row. This is much harder for a user to miss.

You may need to move the context menu completely to the right as well, like Anna Prenzel's suggestion, if you don't want the context menu to appear in two different locations.

0
1

A partial suggestion - when the user selects a particular row, expand that row into something much taller - say, 5x the height, that shows more detail about that item.

You then have more room to display available actions, and maybe even do away with showing actions on non-selected rows.

Update

While this does introduce some behaviour that doesn't have a visual affordance, it's something that users will quickly learn.

From the looks of it, this application is one used by experienced users; in terms of Alan Cooper's book About Face, a sovereign application, where it can be worthwhile providing more power at the expense of some complexity.

1
  • I would worry that users won't know they're supposed to 'select' the row though, especially since that's a mechanic we've never used before. So then, w/ just looking at it, it would look like there were no options available for the row... Hmm...
    – DOOManiac
    Oct 3, 2012 at 13:09
1

Regarding the row actions (Edit/Check/PDF/Notes), I suggest the following approach:

  1. The menu you are showing on right-click (on the row background) is great in my eyes. We should focus our efforts and make sure this is what users do.

  2. Instead of showing this menu only on right click on the background of the first cell, I would show this menu on any right click anywhere on the row (all cells, hyperlink foreground and background). I'm pretty sure this menu is more important than the one shown when right clicking on the hyperlink. If not, combine them.

  3. I would remove the "Options" column from the table. At first this may seem to reduce accessibility, but I think this column is actually confusing since users don't try to right-click at all and think that these 4 options are everything they can do. If users don't see any way to perform an action on this row, they are going to right-click on it and experiment.

These are the basic steps.. Consider the following in addition to improve with an alternative parallel flow:

  1. Add the ability to select a row. A selected row can either be marked by highlighting it, or by coloring its border with a distinct color (like blue). Consider how Excel marks the currently selected cell.

  2. One of the rows (and only one) must always be selected at all times. By default, you can select the first row. Whenever a user clicks on another row (anywhere, any cell, foreground, background, etc), this row should become the selected row. The only way to unselect a row is by selecting a different one.

  3. Add a top-level window menu (where the "File Edit View Window Help" is located in Windows) called "Form" which will contain actions regarding the currently selected row. This menu will always be active since some row must always be selected. This menu should be identical to the right-click menu.

This dual menu approach (right-click + top-level) is used in spreadsheet software like Excel. You can also see it used for copy-paste actions as well, so users should be pretty familiar with it.

4
  • 1
    We don't do anything w/ right click, so I'm not sure where you're getting that. Personally I hate it when any page overrides my right clicking, and I have Firefox set to not allow it...
    – DOOManiac
    Oct 3, 2012 at 20:27
  • 2
    Also, the vast majority of users won't think to right click anything because that's something you just don't do on the web. And it does nothing towards improving tablet accessibility...
    – DOOManiac
    Oct 3, 2012 at 20:36
  • hmm.. it wasn't clear from your question that this is a web app. The UI seems native from the screenshots - the grid control with expandable rows. Regarding the right click, since I assumed native, you wrote "user clicks on the background", so I assumed right click. Might be a good idea to clarify the question
    – talkol
    Oct 4, 2012 at 8:46
  • Sorry about that. By background I meant the padding of the cell (the non-hyperlinked part). I'll take it as a compliment that the screenshots led you to believe it was a native app. :)
    – DOOManiac
    Oct 5, 2012 at 13:15
0

@talkol is so right!

I'd add a detail: a tooltip (for that seasoned 4-year user) telling them to right-click to see the actions menu, except for the 1st column that should say open report or whatever it does.
I'd also give the links of the 1st column a "display:block;" style to make the whole cell clickable. Obtaining a different reaction by clicking the background is at least confusing.

For those who could miss the right-hand links, a clickable trigger to display exactly the same options menu, looking like gmail's "more actions" dropdown, or like a wrench, and not taking table row width.

If you are wary of row selection then at least give the hovered row a slightly different background color, to reassure the user about which is the element the actions will affect. Consider using intentHover instead of plain hover events. This plugin delays the hover actions a few milliseconds so the users can fly the pointer over the table rows without the visual noise of a rapid highlihtings and lowlightings.

2
  • I've considered a G-mail like toolbar at the top of the table, but I don't want users to have to bother w/ selecting a row before the options come online. It also gives the false impression that you can select more than 1 row at a time and take an action. Other areas of the site DO let you take an action on multiple rows so it would be confusing to see a similar layout w/ two different behaviors.
    – DOOManiac
    Oct 3, 2012 at 20:33
  • Of the gmail artifacts, I only mentioned the [more V] button, a dropdown menu. I don't think the toolbar is a good option because it looks somehow disconnected fon the table rows. It would look as associated with the whole table, not a single row. Google solves this by making the toolbar change upon row selection.
    – Juan Lanus
    Oct 4, 2012 at 20:10
0

Interesting discussion. Here are a number of thoughts:

Grid Options: - Add a Tools /wrench/grid button above the grid, far right: should contain actions to the grid itself, not the row specific information. - Remove items like Export to Excel from the Rt Click header (which currently is the blue button with a downward arrow) and place in this new menu - Include such options as toggling on filters (though suggest this is more explicit and easily toggled item, maybe leave option on in grid at least by default and provide option to turn off)

Context Menu (rt click within a cell)

  • Suggest not having a mouse-over on every cell- this is noise if someone leaves there cursor on a cell. One way to help with learning curve is the popup that user can dismiss once or each time a user comes into this grid- gives a hint like "Did you know that you can edit your report by right clicking on a row?" and give a link to the help.

  • Add sections / divider lines to the menu and group by similar actions- this makes it easier to digest

  • Remove the Options column, house items in this context menu. Add
    buttons above the grid that chunk the options- for example, an edit
    button; consider a split button for additional edit options within this, like Edit Record [use non tech name]. Other options Add/ View / Open buttons - this
    gives user more visual affordances about options within the grid.

And some questions back: this looks like a tree grid- are parent level actions applied to child rows?

Are the options currently available in anyway related to the status or "Completed" column information? If so, consider how the options appear in the context menu - disabled?

Hope this is helpful. Grids are such powerful options, but precisely because of that, it can be hard to make the interactions with them clear.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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