2

I am working on application that analyzes live video and can tell, with the help of AI, when an object of a certain type (e.g human, vehicle) is detected in the video.

The application will have a wizard to get users started. And looks like this:

enter image description here

However, the project manager now wants the application to allow sub-categories to the Vehicles category, such as Cars, Trucks, Bikes, Busses, etc. How can I best convey to users that the Vehicles category has sub-categories and that they can select one or more of said sub-categories?
Just adding more cards to the list feels wrong since hierarchically these are "below" Vehicles. I also want to keep all of this on "Step 2".

I have been experimenting for 2 days and have tried flipping, expanding or otherwise transforming the card to reveal these options, but nothing "clicked". I am mentally drained of ideas.

Overall UI/UX feedback is also welcome.

Improve this question

2 Answers 2

Reset to default
3

You can put categories inside a card and put checkboxes so the top does “select all” or “deselect all”, while checkboxes in list allow customize subcategories

enter image description here

Putting categories in a card makes it somewhat overengineered, you should play with design (maybe good artist will draw it in a very beautiful way) I would try to hide subcategories list under “more” toggleable area and see how it goes.

upd rather than selecting subcategories you may find it more intuitive to let user "filter out" objects that he dont need as it is the idea behind allowing user to choose specific categories enter image description here

Improve this answer
8
  • That's a good idea. The checkbox next to vehicles is obsolete. This approach limits the number of clicks/taps to one and it displays the small set of Vehicle options up front. Simple and nice. :)
    – Zoe Marmara
    Jan 23, 2020 at 19:20
  • thanks :) as a user won't you miss "select all" feature? so you dont have to click on every single category checkbox
    – ADOConnection
    Jan 23, 2020 at 22:09
  • 1
    That's a good question. You need to test your assumption with real users to answer that. From my experience, field observations and personal study, I would say that too many options may overwhelm users and cause the opposite results. But it all comes down to how the user journey is constructed. We have to take a step back and see this holistically, from the beginning to the end.
    – Zoe Marmara
    Jan 23, 2020 at 22:15
  • Yeah I am leaning toward something like this. I definitely do not want all options visible like this, but under some kind of show/hide option that reveals these like an accordion.
    – Chris
    Jan 23, 2020 at 22:32
  • I think your actual problem is that you trying to combine different types of "selection" like "select vihecles and then do something and select or not bus, etc". Actually its more likey you "select vihecles and then FILTER OUT busses". Keeping filtering idea in mind your card may only need funnel icon next to checkbox and things will go straight from that point: whatever you flip the card or toggle any area to show/hide.
    – ADOConnection
    Jan 23, 2020 at 22:44
1

From a user's standpoint, I would expect that I see the two options (i.e., the "Humans", "Vehicles" cards) and when I click a card I would get some more information about my selection on the right of the page. As you have it now in the wireframe, just imagine that I have clicked the "Vehicles" card. On the right of the screen I see the available sub-options and I can select in the carousel the one that I find the most appropriate. So what signifies a "selection" action for "Vehicles" (in your case the radio button) should be on the items featured in the carousel and not in the "Vehicles" card.

You will need to replace the radio button at the bottom of the "Vehicles" card with a "See the available options" link. When clicked, this will trigger the action of displaying the available options on the right of the page.

Improve this answer
8
  • The initial idea was that the carousel rotates independently of your selection, and that you can refer to it if you need more info. We can definitely make it reflect on your last selection - it's not a bad idea. My only issue with this is that if you want to detect, say, Humans and Bicycles you select these differently - one by simply clicking on the Humans card (Humans don't have sub-categories) and Bicycles by first clicking on the Vehicles card and then clicking on the right pane. I'm not a UXer, but it seems less ideal to interact with 2 different sections to make one choice. Thoughts?
    – Chris
    Jan 23, 2020 at 11:46
  • I am considering smaller cards so that more selections can be done vertically. pic Maybe that works better?
    – Chris
    Jan 23, 2020 at 11:57
  • 1
    Hi Chris! Thanks for giving me the chance to bring another perspective to your project. Your idea is good. However, I see that the left area scrolls. I suggest that you limit scrolling only to the sub-items. Why is that? Because the user's memory will create an association of the location/space of the parent items and the children items. You need to visually separate the two, otherwise it will be more time-consuming for users to perform the action.
    – Zoe Marmara
    Jan 23, 2020 at 12:29
  • 1
    Another thing that you should pay attention to is the proximity of the form and the "Next" button. Use color to create the association between them because "Next" can be very far away for the eye to notice.
    – Zoe Marmara
    Jan 23, 2020 at 12:29
  • 1
    I have tried, but wasn't very satisfied with the result. I'll try it again though. Replacing the checkbox with a button is a good idea, but it would still have to behave like a checkbox, right? Remember that "humans" don't have the extra step.
    – Chris
    Jan 23, 2020 at 14:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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