1

I'm working on a complex UX that requires 2 discreet tasks to be accomplished on a list of items:

  1. Batch-Selection *of any items (for Archiving)
  2. Selection of only 2 similar items (for Comparison)

My current solution has these 2 features discreetly separated:

enter image description here

The reason they were originally separated was that Comparing has some rules ( you can only compare 2 exact same URLs ) Therefore not all the items are selectable in the list, only valid comparable ones are: View screencast.

It would be ideal to unify both into 1 selection system, but my fear is that it would be even more confusing due to the comparison rules. Can this be elegantly done?

One possible solution:

1 - allow for any multiple items to be selected.

2 - if 2 are selected, then show both Comparison (if applicable) + Archive options

3 - if 3 or more, then only show Archive

COMPARE COMPARE ARChIVE ARChIVE


(option 1) downsides:

1- there are 2 Selector Columns.

(option 2) downsides:

1- The Comparison is not a feature clearly evident up-front in the UI until you select.

2- Rules are not evident until post-interaction, so if a user selects 2 random URLs, we would have to explain ( via alerts ) why you can't compare 2 non-identical URLs. ( which in option-1 is solved simply by disabling non-comparable URLs )

1 Answer 1

1

Try a single selection mechanism, then split the actions into buttons.

Right now you're mixing properties and actions in the form of a 'compare' column.

Compare is not a property of the row (instance). It's an action you perform with selected instances.

You can remove it, so that there's only one selection column, and it's a standard pattern to have the selection mechanism to the left before any attribute columns.

Try surfacing the capabilities in proximity to the selection.

enter image description here

You can test if users understand the logic by trying an label like Compare identical URLs. This tells them:

  • Comparison is the action
  • URLs are the property
  • They must be identical

It's not the shortest label; you can test to see how succinct you can be with the same clarity, or push the explanation to a tooltip. Try not to push the responsibility to the user for having to memorize the logic that comparison is bound by.

You can augment this by keeping the button disabled until two identical URL rows are selected.

enter image description here

3
  • Thanks @Mike. That is a decent solution. You may find this amusing but in the end, we decided ( for now ) to just keep the Comparison column and its unique selector disabling() + Modal Tray (see screencast: share.getcloudapp.com/Z4ukqpBR) because this feature is 1000x more important than Archiving ( which will happen 1/100th of the time ) - So rather than force both into 1 and thus compromising the UX for Comparisons.. we just move Archive to the inline-options dropdown.
    – Arturino
    Aug 18, 2020 at 17:05
  • Screenshot
    – Arturino
    Aug 18, 2020 at 17:38
  • Thanks for sharing the question. it's an interesting problem either way...
    – Mike M
    Aug 18, 2020 at 17:55

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.