Forum Discussion
Any idea how to deselect element when it is in a Button Set?
Ok, this might seem stupid, but I'd like to use normal "select" behaviour (I mean click, select, click, deselect) combined with Button Set (which behaves like - click on element 1 - select element 1, click on element 2 - deslect element 1, select element two, click again on element 2 - nothing happens).
My brain is frying from other things so I think I'm missing some easy solution.
Triggers don't work, as first you change state, and after that you fire a trigger. So everything like "Change state to normal when state is selected" fires always. I'll probably come up with some variables etc. solution, but I'd love to keep it clean, as I have plenty of elements on the screen.
Are you going to require that the learner clicks something in the button set?
- If so, then it doesn't seem worth it to allow them to deselect a button by reclicking it. I think most folks are comfortable with the standard UI behavior of a button set. If they click something and want to change their answer, they'll likely just click another button in the set (like in a multiple-choice question).
- If not, then the easiest solution might be to add a "Clear all selections" button with triggers that change all of the buttons to Normal.
For button sets the behaviour is as expected based on web standards that one is always selected.
Doesnt unselect and select another just create additional clicks for your users?
When you guys think about "selected" state only as a radio buttons or tabs or something like that - both of your answers are "yes". But when you are thinking out of the box... ;)
I'm using selected state sometimes to show additional information on click (I know this can be done using layers, but it doesn't always make sense or interfere with another mechanism or simply you can use nice animation on entering/leaving selected state without additional hassle. It also can be done with hover, but that's not mobile friendly.).
Anyway after a couple of hours I finally came up with minimum-trigger solution. Attaching for anyone who wants to use something like that in their project.
The idea is simple. Check if two variables are true, if yes, select "placebo" button so it will automatically "unselect" current selected element.
1. Make sure variable gets resetted every time you click "normal" button. This was tricky but came out as simple solution of changing Variable on every status change to "selected" (and while you click on already selected button, the variable is not affected).
2. Set 1st variable to true on first click.
3. Set 2nd variable to true on second click to trigger move animation for supporting element.
4. Set placebo element to selected when move animation ends and reset both variables.The issue is if you use a button set it will describe them as radio buttons in the accessible voice over and then you add additional cognitive load, because the function does work as expected. I would have removed the button set and built it differently.
Because you have put everything inside the selected state you also cannot control the focus order of the displayed objects.
If you one with your use case I think you could dispense with all of the triggers, use a selected state and then have three triggers on each selectable object to return the other three to normal
