What's the best way for a user to make a product selection?

Of all of my products that a user can buy, there are probably three that are really the “bread and butter” products and are therefore the most commonly selected. It makes sense, therefore, to have a “Quickbuy” screen where a user can just hit one of three buttons to select a product.

This is what I’ve got so far and it works but, well, meh…

Screen Shot 2022-11-18 at 12.27.16

My issue is that I want to highlight which option has been selected and this seems problematic using buttons. To do this I’ve created a rectangle that’s slightly bigger than the button and this becomes visible behind the button when it’s selected. It just looks a bit rubbish.

A drop down a user can use to pick the big three products from would result in a few too many clicks.

I’ve looked at Ionic Checkboxes but can’t work out how to uncheck the other two when one is checked.

What’s the accepted way to do this that will keep my users happy and be fairly straightforward to implement for me? I feel I’m missing something here so appreciate any pointers.

I’m not entirely sure what you’re asking?.. but can’t you just change the button styling when it’s clicked to show it’s selected (i.e. change the border, or the colour etc.)?

Hi there, @joefarrowsmith… what’s the experience you are going for here? Does the user click one of those buttons and immediately go to a payment screen (which is kind of implied by “quickbuy”, but it doesn’t sound like the experience you are describing)? Or are they clicking a button only to select one of those products and the only thing you are doing when the button is clicked is highlighting the one they selected? If it’s the latter, I might use an icon of some sort to represent the products, and I would probably make a visual change to the icon when a product is selected (which you could do with a button, too).

Anyway, if you can provide some more details about the experience you are going for here, I’m sure folks will have ideas for you.

Best…
Mike

Yes, your first explanation is the correct one. The idea is that the user can just hit one button and head to payment rather than have to navigate filters etc for various sizes, colours and what have you and then go to payment. Kind of like if you go into a MacDonalds and just want a Big Mac Meal, there’d be a button on the screen to just hit that option rather than build the meal with its individual items (I have no idea if that’ a good analogy because I’ve only been a MacDonalds (McDonalds even?) twice ever but hopefully it makes sense.)

I like the idea of icons to do this and to make a graphical change to the selected one. Is there an accepted graphical change that means an icon is selected? I did try to find this option for a button but I could find nothing that made a permanent change - only when it was hovered - or that wouldn’t revert back to the button’s original style straightaway.
Here’s what the properties look like for the button but it only “flashes” to the colour required before reverting to the original. Ideally I’d like the button to remain that colour (and, if possible, look like it’s pressed in) until another button is pressed…

Screen Shot 2022-11-18 at 13.38.12

Sorry my explanation’s a bit rambling. I hope it makes a bit better sense now and, as always, I’m very grateful for your taking the time out to consider this.

Al the best
Joe

My apologies for my quality of question…I’ve tried to explain it a bit better below. I’ve had difficulty trying to find graphic changes to buttons which is why I resorted to asking here. If I can do it, it would work but I haven’t been successful. I put that down to user error on my part.

Thank you for your input however, I’ll explore it again.

All the best
Joe

First, just a heads up that the condition is pressed means literally while the button is being pressed (i.e., clicked and held). So, that’s not what you want. If you want to change the look of a button or an icon, a good way to go is to set a custom state to a particular value when the button/icon is clicked, and then put a condition on the button/icon to change the appearance of it when the custom state is set to the particular value.

The above being said, I’m still not sure what you are trying to accomplish with the visual change if you want a “quickbuy” option. When the user clicks one of the buttons, aren’t you immediately navigating to a payment page or something? At that point, you and the user know what they have selected, and you could just show it on the payment page.

1 Like

Mike, Thank you for this. I’ve managed to achieve exactly what I was trying to by following the very method you suggested (ie using custom states) and thank you for the clarification around the “Is pressed” condition - I think I was getting there slowly but your confirmation was needed.

Just to clarify what I was trying to achieve…My “quick buy” screen isn’t quite as quick as you say (ie like the “Buy Now” button on Amazon). Essentially, on my screen where users select products, they have a few choices to make. I’ve got a button at the top that is effectively "Stuff all that, I just want a standard ‘Widget B’ " So they click the ‘Widget B’ button and the size, colour and amounts are filled in automatically and they can press the “Buy” button to go to payment. The reason I wanted the button to stay pressed was that I needed them to know what they’ve selected.

Thank you ever so much for your help. I think you’re on about 100% success for bailing me out of these conundrums and I’m really grateful to you. I owe you!

Have a lovely weekend
All the best

Joe

1 Like