Skip to Main Content
Product Suggestions
Created by Andrew Ardron
Created on Jul 6, 2018

UX tweaks to Grid view, and Bulk Actions

See attached screenshot and numbered bits to go with these notes:

  1. spacing on left of grid, leaving space for selections. Selections dont actually appear at this stage until you mouse over them. Select one, multiple or all as normal
  2. You can select an individual row, or two rows. To ensure the user knows the tick box selection is there, and how it works, this is also temporarily selected whenever you press the ... menu on the line
  3. The + button should not be "hidden" among the other menu items on the right. It should be a bigger, clearer button on the left. Either as a button with text or as a really solid PLUS icon. But by having a button like the one here, with text, you can also have a "split button". In this example Add Line, then the split allows for "Add from CSV/Excel" and "Copy from another Quote". This should be true on all grids, so on Contacts list (whether under company or division, or indeed a contact report) there should also be an add button, this time saying "Add Contact". For an example of this sort of Add button UX, see aha, which has Add release in the release view, Add idea in the idea view, etc.
  4. Make the Edit button into an "info" button (you arent always editing, and sometimes you can edit in the grid, so an edit button doesnt really make sense). But also make it much subtler like the one in the attached mock-up - it isnt actually the main action on a grid so shouldnt be the boldest icon on the screen - the main actions are the record hyperlink, or the Add Lines.
  5. Remove the delete icon (Again, not actually a main action so shouldnt be the boldest icon) and put this behind the ... (vertical and subtle as per the attached mockup). Within this menu you can have a number of actions, not just delete. The first two are valid on all records/rows so this allows the ... to be consistently displayed:
  • Preview (does same as the info button)
  • Open (does the same as the preview, plus then the edit in full... and typically the same as the main hyperlink)
  • Delete
  • Update Margin
  • Update Markup
  • Update Field(s) -- i.e. these are the "Bulk Actions" applying to just this row.
  • NOTE: in this menu, if you have selected one row, or none (in which case it temporarily shows the one line as ticked to emphsise this), then these actions apply to just that one
  • NOTE: in this menu, if you have selected multiple, then you get a smaller menu here (with out the open and preview) ... and any action you choose will popup a confirmation window, that tells you this action is going to apply to 2 selected rows. Eg. Delete will delete the two selected, Update fields will do a "bulk action" on the two selected.

6. the ... in the menu bar is very similar to the ... (vertical) on the record, except that with no rows selected, it assumes you want to apply to them all, so it temporarily shows them all as selected in the background, and pops up a window to confirm the action (eg. delete, update markup, update margin, update fields) and tells you this will apply to ALL rows.

Note: it might be nice, but not essential, if when just one row is selected, the ... in the menu was actually identical to the ... (vertical) in the row, and in this situation also showed the Preview and Open options

 

7. The cog icon in the quote list allows you to set the editable fields. This cog icon should show on all grids, and should be a drop down for configuring this grid, ie.:

  • Set editable fields (only where appropriate as in on Quote lines grid)
  • Filters (moved from ...)
  • Select Fields (moved from ...)
  • Attach files