Need a good way to alert users about why they can't use certain functionality (eg. bc of permissions)

[nishaDangol-Sussol]

What went wrong? 😲

In latest v1.1.15 apk, the Confirm sent button is disabled and thus the internal order can't be send anymore!
Let know if I'm missing any new updates/changes in the flow! (since it was working well in v1.1.14) 🤷

Expected behaviour 🤔

The sent button should not be disabled

How to Reproduce 🔨

Steps to reproduce the behaviour:

1. Get latest v1.1.15 apk
2. Create a new internal order and add some lines
3. See error: the Confirm sent button is disabled
   

Your environment 🌱

• Version: v1.1.15 apk
• Platform:
  • android (tablet)
  • server (windows)

Solution:

"Anisha says: Button enabled and toast"

[roxy-dao]

You need omSupply permissions -> can confirm Internal Order as Sent ticked in central

[DhanyaHerath]

@roxy-dao @mark-prins do we have a preferred pattern for things that are prevented because of permission?
Two possible options are: disable the button but with a tooltip explaining why, or keep enabled and have an alert explaining why.

I think adding at least a tooltip could be helpful here.

[mark-prins]

Already has a tooltip 😉

I don't like the alert on an enabled button, it means I have to click to dismiss the alert. The disabled button is a good visual cue that it isn't allowed. That's personal preference though I guess.

[roxy-dao]

🤔 I noticed people don't actually use the tooltips at all... Maybe a pain to hover over things all the time to see if there is a tooltip of not? Maybe they don't know there's a tooltip? 🤷🏻

[mark-prins]

So..? Do you think an alert would be more effective?

What about a toast? that'd be a compromise - the button is still enabled, an alert shows, and I don't have to click to get rid of the alert

The tooltip isn't very informative, now that I check it 😄

[DhanyaHerath]

Hahha yeah I was trying to find definitive articles telling me what was the best way. I started out neutral between "disabled and tooltip" and "enabled and alert" and then I started leaning towards enabled:
https://uxpsychology.substack.com/p/hidden-vs-disabled-states
https://axesslab.com/disabled-buttons-suck/

I'd (1) agree with Roxy that lots of people don't hover (not everything has a tooltip), (2) want to suggest we ask @anisha-msupply when she gets back (even though I now feel very strongly about my new opinion), (3) should have this consistent across omSupply and HSH

[mark-prins]

One more link: https://uxpsychology.substack.com/p/hidden-vs-disabled-states
I still find the idea of an enabled button that just alerts to tell me "you are not allowed to do this" a bit weird - happy to run with it and see.
Another option is to show a message in place of the button or different text on the button.
I'd still go with the click+toast option as my pick if we do have to change from disabled

[DhanyaHerath]

I like the click + toast option - can that work even if the button is disabled?

[roxy-dao]

The button would not be disabled for click + toast option 🤔 ... though the other disabled buttons would need to be refactored for consistency?

Click + toast sounds good to me.

[DhanyaHerath]

Let's leave this for when @anisha-msupply is back, and then have the decision communicated across all our products - might be good to have a guideline in Storygraph.

[andreievg]

Also disabled with a question mark that is clickable

[DhanyaHerath]

Anisha says: Button enabled and toast

[DhanyaHerath]

TODO: Document where needs to be updated to match this behaviour

[fergie-nz]

Anisha says: Button enabled and toast

Hey @DhanyaHerath,

I'm wondering that given Anisha's input, is this still requiring discussion?

[fergie-nz]

Let's leave this for when @anisha-msupply is back, and then have the decision communicated across all our products - might be good to have a guideline in Storygraph.

I'm also wondering if you're needing any more actions to get this into HSH design pipeline?

[adrianwb]

Already has a tooltip 😉

I don't like the alert on an enabled button, it means I have to click to dismiss the alert. The disabled button is a good visual cue that it isn't allowed. That's personal preference though I guess.

Absolutely agree - having to click away alerts like that is one of my pet hates about desktop mSupply - personally I prefer some visual cue e.g. different colour/style/disabled button + a tooltip, but toast is also ok as you don't need an extra click. You just need to be patient for the short time it takes to disappear again, although that might be a problem for some :-) The same goes for mandatory fields, particularly if there are multiple ones - there should be a clear visual cue. There are few things more annoying that having to go back and fill in one field, click OK and then be told that you've missed another one...

[jmbrunskill]

James Brunskill, [22/02/2024 at 12:25:04 PM]:
For the why is my button disabled problem, I wonder if we could create a component that looks visually disabled, but on click shows a tooltip/callout?

Probably needs a close icon option…

[mark-prins]

Have implemented the callout version, as per this comment

I still like the toast though, so I'm thinking I may change to that

[AnushaUp]

🧪 Testing

Tested in omSupplyV2.1.0

You may need to turn off permissions and then login again in order to properly test. I tweaked the code bc I'm lazy.

• Cold chain equipment > Create asset button
• Cold chain equipment > Add from scanner button
• Cold chain equipment > Print QR code
• Inbound returns list view > New return
• Outbound returns list view > New return
• Pack variants > Create or Delete
• Patient list view > Create patient
• Check storybook as well (yarn storybook) to view the example

[AnushaUp]

[ ] Cold chain equipment > Add from scanner button

Found Issue here #5223