5

in the mobile site i have delivery filters with a list of options the user can choose from , the options functions as radio button. but once the user select one of the options the selected options will be checked (as you can see in the attached image).

the thing here is that the user can't check and unchecked the option that he have selected because this is a radio button. he can only choose another option from the list.

my concern is how to give the user the indication that he can't check and uncheck this option ? although he can do it on other filters like color for example.

  • changing the icon from check mark (✓) to (.) built will help?

enter image description here

6
  • 6
    IMO users saw this so many times that they won't be so confused because of a checkmark instead of a bullet (also context helps to clarify you can't pick two delivery times...). What I'm more concerned about is that "Clear all" button... Nov 11, 2015 at 11:46
  • what's the problem with clear all button? Nov 11, 2015 at 13:34
  • I can't get its meaning. Will it deselect all options? Does it mean "Cancel" or "Back"? Nov 11, 2015 at 13:35
  • it will clear all the selected elements and back to filters page Nov 11, 2015 at 13:47
  • Sorry but I don't understand. Clear all selected elements...where? In the Delivery time page? There is just one select(able) element, there is not an "all". Nov 11, 2015 at 13:51

7 Answers 7

1

Nice question - a scenario we did discussed in the office a while ago.

We later asked the question: Why is it relevant for the user to see all elements that are smaller than the selected ALSO selected? We solved it by a wording change: "Up to 3 weeks" - what you already did - is implying that "everything below and including 3 weeks", so you do not need to mark the other items as well.

Another input, beside the question: We found that the maximum-delivery-time-filter is not useful: If you mark it, it will not be filtering at all. We skipped it. Second thought: You maybe soon will find out that users only want to filter for the short time periods and that the "long time delivery" filters will not be used at all. For us it also decreased PDPs per sale and increased AddToCart rate to remove the long time periods, since the feeling of "They sure have quick delivery!" rose.

The "downside" is: Long delivery products will be sold even less. I put it in quotes, since these actually are these kind of products you should maybe consider to leave out at all to strengthen your delivery USP.

BUT, again, as always, this might be depending on context.

1
  • can you provide me with a screenshot or a link for your m-site or app where i can test that or if you know any website provide delivery filter, i couldn't find so far any ecommerce website has filter by delivery Nov 13, 2015 at 10:49
1

Taken from Nielsen Norman Group:

Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn't display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.) If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled "None." Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen. Checkboxes vs. Radio Buttons

with that being said, I would:

  1. add a default option for the filter, which will be selected as default
  2. re-think about the check as a way to indicate on selected option. this is a bit confusing to the user since it imply on checkbox or the option to multi select. I would highlight the entire selected row instead (see mock)
  3. I find the buttons useless. This is a radio button, once the user click on it, it should be selected. with the buttons you add the user another click that is actually pointless. moreover, it let the user to feel that it is multi-select and not radio button, like when you write "clear all" for example.

enter image description here

0

It may be possible to use a dot • to suggest the radio-button-like function, rather than a check mark to suggest a check-box-like function.

This was the Windows standard in the early days of GUI.

0

I assume you use this screen for other filters (categories, price etc.) where it would be possible to select multiple options. If so, users will expect to be able to select multiple options here as well.

To make it clear that this works differently, make it visually different.

A solution would be to use a dropdown (with the delivery options) on the main page. It is visually different and with a dropdown people expect to only select one option.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • don't you think this is a bit confusing , for all filters you have to go to another screen to select the options but this one you stay on the same page . Nov 12, 2015 at 12:53
  • I don't think it's as confusing as the previous version where the user expects certain behaviour but it turns out to be different. In this case it's very clear that this filter works differently. You would have to test that to be sure. You could also try to rephrase the labels on the filters to make them all work the same way.
    – Martyn
    Nov 12, 2015 at 18:48
0

The problem is also business rule-specific. In the following schematic, will all of the options (price, category, etc) have a default value when a user view them?

enter image description here

If so, you could also show the default delivery time value and then use the same pattern as with all other filters to allow users to change the default delivery time in: enter image description here

The default time should also be labelled explicitly (like Amazon does with Same Day Delivery or Standard options). This ensures consistency and solves user issues with effective signposting and language.

2
  • I don't understand the significance of the images you've included. Why did you add the same image as provided in the original post? And why did you copy someone else's mockup and include it in yours? May 16, 2016 at 21:29
  • @maxathousand: the images help to understand the argument i make on good defaults and effective signposting. I do not claim these to be my images and i assume theres is no issue in reusing wireframes to support an answer/comment.
    – NVas
    May 19, 2016 at 6:57
0

You may want to think or consider a different approach to deal with this, it works best with multi-select options or single select (radio or checkbox):

I really like the Amazon approach:

The Amazon, handles the situation like this and clearly indicates how to select / deselect the options chosen by clicking on 'CLEAR' or 'CHECKBOX' it-self. It adds the "CLEAR" option dynamically upon selection which indicates the interactivity.

BTW, the BIG Brands like "AMAZON" always does the research, usability testing (could be A/B as well) and releases the features to the market. So, I am sure this works well with most of the users, in terms of giving visual clues or affordance.

enter image description here

0

As in a radio button the only interaction possible is selecting one element. I don't think you need to explicitly show that only one can be selected; as in a radio button vs checkboxes the user who doesn't understand it will get it in the second interaction.

So whatever the user clicks it will be selected (even if it was previously selected), and the former selected will be deselected.

You might want to make one of the options to be selected on load or not.

You can check the how the App bar filtering menu is used in Material design - App bar.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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