Thinking on ways to solve ​​MULTI-SELECT

Key Takeaways

[Music] welcome to another episode of gooey challenges [Laughter] where i build interfaces my way and then i challenge you to do it your way because with our brains combined we will find multiple ways to solve these interfaces and expand the diversity of our skills [Music] in today's gui challenge we are going it's not going to be that spooky the whole time there's just no way but in this gui challenge we're talking about multi-select and look at this multi-select right this is like a filtering system people don't need to be making some choices in your interface to sort of filter a big set of data that we're trying to reduce cognitive overload by giving some powers to the user and look at these new controls in ios these are cool love it so i'm going to tell you how we got these controls how i set this up because look we have desktop users being empowered we have mobile users being empowered here it is over on android gotta love this here we'll make two selections and look at our filters set here and over here right power through with our keyboard space space everything works just as we want so there's multiple controls in here and um all of them are just trying to serve these different users that need to make some filter choices that we want their input and they're going to want to skim and make choices really fast and not be bogged down by some sort of i don't know really extravagant filtering system so anyway this is the one that i chose to build this was my style today and let me show you some of the other cool features it has like the theme that's in here right we have a light and a dark theme we cover color schemes in one of the earlier gui challenges so i'm just going to quote down that's where all these values came from and go there if you want to learn about it more there is a subtle thing though i want to show you in here and that is if you look at the accent color on these check boxes here they match the focus within state border of this field set and i don't change the focus color of the outlets this one comes with the browser right here like let's come over here ah see how the focus within is set and the checkbox uh accent color is coming from the same one and i just thought that gave a really nice look it's like you're interacting with this group here and you're interacting with this group and the colors kind of come through as this sort of like focus color it's not really focused but you know what i'm doing i'm bringing attention to these areas using like oriented colors that are making them pop off the page anyway it's really easy to miss at first not that it had a really powerful effect and this component is also managing a lot of the states so if we look up here look this is holding on to three items so this is a state where there's more than one down here there's more than one here i'm just going to refresh firefox oh which firefox persists your checkboxes uh like your choices just it's kind of a cool feature actually anyway so here i am a refresh i have none selected which means i see everything right that's an interesting state for this component and this other component to have a relationship with now i didn't uh go into how we built this today now this uh suite grid is built with isotope just a library i love to work with and it has a sort and filter api that will automatically rearrange all of the items in here and then of course you know i just love delays so i put a little bit of a delay between each one which is again part of its api and it just looks so nice doesn't it anyway isotope kick butt if you've never used it before go check it out it's really fun but anyway the component today that we're talking about is this managing um in this case the items that are selected the filters and so we have none selected there's a scenario where there's one selected you can have many selected and then you can have like all of them selected and that's just the states that it needs to manage and the hard part between my solution here is that i have a check box system and a select box system right this one is using a multi-select here we are in ios right and i love this interface i think this is just so much better than i would build um but i have to integrate with it as a separate type of component for users that are coming from touch right they're going to be very familiar with this interface this is going to look nearly native to them and uh you know they get the results really fast so i don't think they need anything additional plus you get to save so much space on mobile look at all that space we save oh that's so cool but um yeah i have to manage two different components and so that trade-off was something i was willing to um work with and well i'll show you that in the javascript as i resolve both of the um choices from the user into the same object so that i can submit them to a database as a normalized value set and anyway we'll get there but first let's look at more of the interaction models because there's some cool things i want to show you like keyboard traversal here let's spend some time in ios right now i'll hit tab i'll hit space i'll hit space i'll hit shift tab shift tab space shift tab space right you can even be using a gamepad right now imagine you're on your switch and you're just hitting up and down in the nintendo store right and you have different games showing up here on the right super easy interface for keyboards gamepads and stuff like that nothing too surprising but follow me over to a larger browser where i've kind of fooled my system and um let's take a look over here i've uh i'm in the responsive mode of devtools in desktop touch so i don't really know right now desktop touch scenarios so maybe you tell me one where there wouldn't you wouldn't have a mouse or wouldn't have a stylus or something where you're only on desktop with i mean windows probably has this but anyway in that rare scenario uh you may see an input like this one and this is the multi-select and here i have it open over here select multiple and this is the default layout you get when something can be multiple selected like here if i hit shift i can select both of those or i can hit click and just get one i can command click so here i'm going to get 30 days command click and i can make multiple multiple selections like this but um what's really fun is if i hit just down and up here i can go through all these items on my keyboard and anyway i just like showing you this because the grid is so responsive and the choices are so cool that i can hear i'll hold shift and just go up on down it's just fun i just this is just a fun visual thing to do and hopefully you were entertained by all the swooshy squares uh like i was when i realized this anyway let's go back to talking about some of the other features in the debugging corner well now we got to talk a little bit about reduced emotion because you know i just love that and um today i'm going to show you through simulation in our operating system usually open it up in dev tools but let's go into accessibility today to display and reduce motion boop pull that back and what should change hmm okay first off we see an instant uh highlights right we're not scaling that because why not that looks great and when we choose we see an instant result in our grid very nice so mindful right light and dark motion no motion we're just flipping tiny little variables in our system to make sure that this all works and that's so cool i'm gonna go ahead and turn reduced motion off go back to the overview and yeah that's so nice okay cool let's turn off the lights again because i think that's just fun when we do the screen reader experience and i'm gonna go through our uh checkbox system check it out so here let me dive into chrome and hit command f5 multi select vertical line gui challenges web content all right we are inside of the web content and i'm going to tab into our first field set and make a couple filter choices leaving toolbar item palette entering multi-select gui challenges web content last 30 days unchecked checkbox new group last 6 months unchecked checkbox checked 2 filters giving 6 results table lamps desk lamps unchecked checkbox checked three filters giving 10 results did you hear how that's telling me how many filters i have applied across all of there and how many results there are isn't that neat i mean wouldn't you want to know that if you were hitting filters and nothing was sort of telling you how many were behind each choice that as soon as you made a choice you were reminded how many filters you've chosen and then i thought that was so cool the way that i did it is a combination of counters and javascript and using some aria roles and by assigning an element a certain aria status it's able to announce the changes that are happening and i thought that was just the neatest little experience so let me go ahead and turn that off i hope you found that interesting the article of course will have all of it uh spelled out very clearly for you but okay let's turn on the lights i mean it was the spooky episode so maybe we should leave them no let's turn them on let's turn on okay voice over off uh that was nice all right next i want to check out the right to left let's go look at a bigger browser i'm going to open up the dev tools and notice we have a select element here with all the option groups and that's how you get all those different grouped areas anyway cool feature okay right to left right to left here we go and well look at that isn't that handy we hover on each of our labels they automatically highlight the check box and if we choose them we get a nice filtered grid ah that's just so cool if you're uh got a keen eye though do you see the bug in the grid here this is isotope laying it out not css grid and these two squares should be over here because the inline start is here right this is the directionality now is going from right to left so interesting right uh by using a library which gave us a lot of cool tools it actually is hindering some of our uh internationalization of our content but maybe it's not hindering it but in this case we can you know maybe someone would notice but kind of cool still all of our styles here in the sidebar and the multi-select and just sort of that interaction we want that though all works and right to left let's go back to the left to right nice now the layouts in this um multi-select scenario ended up not being that exciting so we have the body in the main um those are centering all the content here putting some space between our grid and our header for this little layout here but if we go to the side the side has no special layout other and you can see our counter reset though or filters counter set so we were talking about that earlier our form though does have a layout and so we're using the form to group all of the input types so we're trying to collect information from our users and putting it into one spot so we can just use the form as an object for kind of querying what the values are for these but look it's a grid it's a grid has a gap that's nice look i can drag the gap the new length tool is looking sweet in devtools i don't know if you tried it yet it's also got a type pop-up look at that you can change all the different units right here so in case you're even learning units they're right there okay anyway enough uh fanboying about the length tool this though is interesting so display grid not interesting length tool well that was i think very interesting but the max inline size at 30 characters this is kind of uh crucial in that i'm setting the sidebar size on the form with a character unit selector um or character unit uh relative unit which is sort of like making sure that the items here never go beyond a certain width and i think that's really normal for a sidebar to sort of have a max width and then you let um lines wrap for these different label elements anyway so that's how i did it was with a maxing line size of 30 characters and i felt like 30 characters was a good size for showing a filter and a sidebar and that sets pretty much the width for the entire thing all the way down kind of interesting so here let's look at a field set field set just has some spacing nothing really that interesting here we're using two i love using two characters everywhere it's just sort of a great unit the legend here that's inside of this field set now it's not necessarily layout related but look at how it sits in here um it's a very unique way that it's positioned and it's unique to the field set and legend this just comes free with the browser and i thought it looked really nice here as we're not only visually grouping the elements we're giving it a label but that label is also read to screen readers and so when it said you know last 30 days that's what this one is it's like a new this is a new category section and so new is what's written here and screen readers and you know sighted users are all going to get to see this value and i just thought it worked out really nice that way and down here this is just our label and our checkbox we're using flex and they're aligned to the center so um it's just really cool right so there's our layout nothing really too surprising um but really stable and really nice for us now there was like one kind of crucial thing that i do want to go over which was toggling the visibility of this select up here so by default the select is set to display none because we're kind of assuming a user is coming with a mouse now if they're not visiting with a mouse they're visiting with pointer course let's go see what we do for example here in the field set so our field set here's all of our styles we have this media query called use select so if we're using the select in this particular use case so this would come back as you know true or false based on if the user is using a mouse or if they're using their finger if they're using their finger we want to set the field sets to display none so no checkboxes those are just too tedious for your finger and we'll go turn the select element on and it can now show and be the dominant way to put input into the form so that was it i use custom media up here with the rest of my stashed custom medias like motion okay and dark and light which we use in all sorts of episodes and this one is called use select and i just thought it made things nice to read time to talk about javascript i'll just try to briefly go over because i think what's more interesting is the results on the console so here's where i'm importing isotope i initialize isotope here give it some of my preferences here that i use to make a grid and then here's my filter grid function that gets called with the sort of things that's trying to be matched and here's where i check prefers reduce motion on the client and this is where i set the new filter so i arrange i set the new query that's going to set what is to be shown and what's not here's the stagger which changes the delay for each of them by 25 milliseconds and then the transition duration which i set to either zero if motion is not okay or i set it to something if it is okay down here i like prepare the select options so when you use a select element there's a way to get all the values out of it using element.selectedoptions and here i make an array from it and sort of push things into a data format that looks a lot like what the form is getting with the checkboxes here's where i'm watching the select to change so that i know if i need to go prepare the values then here's where i'm invoking or creating a query and then invoking isotope to filter the grid down here this is the checkboxes so the checkbox is watching all the forms for input whenever the checkboxes change we go grab form data for the whole form and we output a new object to the console i'll show you that in a second and here's where i create another query this time again for isotope and i set the filter here and then down here at the very bottom a query selector applied filters text content it says giving this many results and so this is what's spoken out to the screen reader because it's being inserted into an element that it knows to announce to the user so we modify it with css and javascript and both those combine into an announcement to the to the user okay let's go look at the results in the console because i think it's kind of fun all right let me pull open the console hit escape down here so we pull up in the javascript look we've already been making some choices but all of our choices have been checkboxes so far so if i hit refresh well i want to see some grid items there we go and if i check one i check two look we have an array there's the group and here's the value here's the group and the value last 30 days so this means that they're on right these are binary so these are only if they're on are they going to show up in this list and that was the way that the checkbox element and the form element reported these so these could be submitted to a server let's fool the browser a little bit here and change some of these great so now i have multi-select down here right so i've named them in my console warning that's what's giving me this nice little yellow here and if i twirl this open new last 30 days new last six months so i'm making sure that the data structure that's getting created by the multi-select and the data structure that's being created by the check boxes are the same thing so that i can submit them to one place and that api only has to care about one type of filter set or one type of sorting set but my interface on the client side can sort of do the hard work to manage a touch input and a desktop input and a gamepad input in all these different interfaces on mobile and tablet and desktop and combine them into one so that the server doesn't have to care right the server doesn't want to have to care that there's a user using this brand new input on android if they're using a brand new input on ios they just want to get some values and show them to their user just really really neat stuff so i hope you enjoyed this multi-select episode this is a fun type of user experience that i've built so many times over the years and i know you've built one too send it to me it can always make for these really neat interactions right where we're just sort of like going in and showing and hiding different elements based on selections what have you built i'm dying to see it dying to see it and i hope you have a good holiday and take care y'all i'll see in the next gui challenge [Music] you