On a desktop and touch devices, I'd like to know is there is a way to tell the user that some control could be clicked (one action) and long pressed (another action)?

Real-world example:

  • We have column chart

enter image description here

  • Tap performed on column 2007 (single selection)

enter image description here

  • Tap performed on column 2009 (single selection)

enter image description here

  • Long press performed on column 2010 (single selection)

enter image description here

Current situation is that user doesn't know that chart has possibility to multi-select columns (perform long press). How to indicate that it is possible?

  • Is the long press possibility the only possibility of the button, or can the user also perform a short press? – Nick Groeneveld May 11 '17 at 9:51
  • @NGAFD yes, click is also possible (e.g on click items in a list behave like radio button group, but on long press we can select several items like checkbox group). – Artem Lopatiy May 11 '17 at 9:58
  • Take a look at Material design - Selection Patterns. – Alvaro May 11 '17 at 10:10
  • @NGAFD example added to a question – Artem Lopatiy May 11 '17 at 10:25
up vote 1 down vote accepted

Since the bars have both a click and a long press, i reckon there are a couple of ways to acheive this.

  • Write a small info note at the end informing the users about the long press
  • Give some visual feedback , like a small circle filling up as the user makes contact with the page/touches the page.
  • one more form of visual feedback : start 'filling' the bar with color when user makes contact. click will make the bar fill up instantly, when that is seen . i guess the user will make an attempt to fill it up slowly, i.e long press .
    • in the above scenario, once user has long pressed, i'd recommend elevating the selected bar above the others to make sure it was selected via long-press or use a different fill color.

We used the last scenario for an app where user had this same confusion , but then again those were cards and not bars. But i hope this helps :)

Changing the color of the column may be too little for the user to know that he have selected something. Along with the color change, you could display a top toolbar showing how many items the user selected along with the option to cancel selection and other specific actions.

Someting like that:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I hope it helps :)

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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