Grafana UX Squad, 22 Sep 2021

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Grafana UX Feedback Session 2021-09-22

Description

This week we looked into how to navigate the calendar using the keyboard.

A

Welcome everyone I'm having my third day today, back at work after parental leave and already taking the lead in this meeting again. Yes, my meeting happy to see some of our regular faces again and some new faces. That's great, um I'm not sure whether all of you are familiar with the format because we're having new joiners all the time.

A

So there is a doc that we are using for our agenda and I just put the link for that in the chat. As most of you probably know, uh we like to take notes in the doc and also if you have a question or some feedback that doesn't fit into the allocated time for discussion, then you can also throw that in the doc so that the person presenting can still see your feedback and maybe ask any remaining questions later.

A

And um it's important to remember that everyone is a notetaker, so feel free to help, write stuff down and take care of the feedback so that it doesn't get lost, because I know that when you're presenting stuff then later on, it's much easier to be able to read the notes. Instead of having to jump back into the recording and look at everything again and figure out where the important parts were said, so, yes, thank you in advance for helping to take notes. Yes, amy, you raise your hand. So speaking of the recording.

B

One thing that I have a question about as a relatively new joiner is that um I presented last week, but I don't know where to find the recording from last week. So how do.

A

B

A

That is a zoom issue, I'm not sure how it was handled while I was on leave, but the thing is at least originally. This meeting was set up by danielle lee so that it automatically records, but he is the one who gets sent the link. So in the past diane and I have been chasing daniel for the recording link and because of the way that zoom works, this doesn't really work any other way. I think unless they have changed it in the meantime, but it doesn't seem like it.

A

So, yes, we always have to manually fetch the link and then throw it in the dock, unfortunately, which can take a bit of time when daniel is busy. Sometimes we keep asking him for the links for like two or three weeks and then all of a sudden we get a bunch of links all at once. So uh it's not the most convenient.

A

I will see what I can do to maybe make that a bit more streamlined um yeah, but in the meantime, yes, I will try to get the link for last week for you, because I have not watched that session either. So, uh yes, I'm very curious about it all right, so we only have one topic on the agenda today presented by uche.

A

How can we move in and out of the calendar using keyboard nav and it looks like it's safe for youtube?

A

So that's great hello, youtube audience welcome to the ux feedback session, and today's topic is hopefully interesting and if you have any feedback, feel free to drop it in the youtube comments or in the public reference like or on our twitter. We're happy to hear from you. Yes, uh uche! Do you want to start presenting yeah.

C

Yeah sure um hi everyone, my name, is kobasi and I'm a member of the visa essential squad. So for today's presentation, I'm here to present the work, we've been doing around accessibility and specifically for the time picker calendar.

C

uh Before I jump into the solution, I would like to show you what the current state of the sentinel calendar looks like. So I'm just trying to share my screen.

C

Can you all see my screen?

C

Yes awesome, so um basically what we have are a main for the tanki kakalinda is, basically, you could see I'm trying to navigate the um to the influence, that's the uh absolute time which inputs and the problem we we are currently having right now. Is we don't have a way we could navigate to the time picker calendar using the keyboard so basically in class?

C

The problem is, we don't have a way to move in and out of the timekeeper calendar and, as you can see, uh highlighting on the inputs kind of like makes the calendar vanish. um So our solution for this was for us to have like a calendar icon right next to the images uh to the inputs uh yeah.

C

So, basically, if we should navigate through this and using the keyboard, that is in the tab, you know highlighting on the uh calendar icon you could see there is this focus um like you could see that it indicates this focus uh thing and basically clicking enter. You can move into the calendar and you know using the tab. You can move in and you can move within the calendar. Then, if you want to move out of the calendar, you could just press escape and then it returns focus back to the um calendar, icon and yeah.

C

I would also want to mention that this is how it looks like on narrow keyboards currently, um so, basically, we want to maintain some form of consistency between how it looks like put on narrow, viewports and also on wider viewports, so so yeah, I'm here to see some feedback on how we can better improve the user. Experience of this particular component and yeah- that's pretty much. It.

D

I I have some questions, so the first one is: did you tab the whole way through all the previous week previous month previous year stuff, or did you use arrow keys.

D

And when you move around within the calendar, you use arrow keys or the tab.

C

Okay, so for in moving around the uh calendar, you use the top key for now um reason is because, under the hood we use like this particular library that you know basically renders the dates for us. So, yes, we can book. We can implement the arrow keys for that, but it's going to be very hacky, um so for now, just for the current prototype you have basically we use the tab and for moving in and out.

C

uh Basically, we use the tab to move in and then we used to escape a key to move out of calendar. I hope that answers your question.

D

E

um I also have a question you said to get out of the calendar you have to hit the escape button. Is that right? So that's the only way to get out of the calendar. It's not so that you can click.

D

E

Else and get out of it, maybe or maybe just hit, enter or something.

C

Yeah, so uh for the escape button works. When you navigate the calendar using the keyboard, you can as well click outside of the calendar, and then it closes. So, for example, if you should click here and then click outside the calendar closes automatically so yeah it works, but using escape and escapes primarily for the keyboard navigation. And then you can click outside if you are using the mouse.

C

E

So when I click outside of the calendar is the date that I chose um chosen or will it disappear again.

C

uh So if you so basically clicking inside or clicking the calendar icon, you could type in to select the date. So once you click your specific dates, you can either press escape or click outside, and then you know the only time it applies is when you click the apply time range, uh the apply terminate button. So you can so, let's see so typing in let's say we clicked import and then we click to seven.

C

You could see like it automatically updates the inches and you can just escape and get to the apply sandwich button so so yeah. This is what we have currently.

A

C

A

Follow-Up question to that: if you only click on one day, then the picker doesn't update. Is that correct? It looked like it.

C

A

um Yeah like, if you wanted to do from september 3rd uh zero o'clock to september third 23 59 59, then you couldn't do that within that picker right you'd have to do it manually. Is that correct? um You.

D

Could click twice on the same.

A

Day and then make it like have that one day range right.

C

um I I guess you can uh completely try and do this by trying it out. So let's say we click three and then we click it again. ah It didn't.

A

Work: nice, okay, good.

C

Yeah, it did work, so you can actually that's.

A

C

A

To make sure, because otherwise that would be confusing, but I guess I I do kind of see nia's point, or at least I think that was your point- that maybe it's not clear that you can click twice, because you have two ranges or like two time stamps and each of them has their own button.

A

So some people might think that I have to click the top button to pick one timestamp and then the bottom button to pick the other timestamp. But you can do the same thing within one flyout.

A

So maybe it's a bit weird that we have two buttons yeah.

E

I would have assumed as well to have click the first one and then the second one. I wouldn't think that I can do both in one calendar. Basically.

C

um Yeah, I guess you can do goods in one calendar, um so basically it it works yeah you can do both in one calendar. You can also do both in different calendars so and as much as yes, we just clicked the first one. You can still escape and go back to like second one as well, um but yeah. um I guess what just mentioned about maybe having one calendar icon.

C

I don't know. Maybe that could make more sense.

F

And we should also think how the mouse interaction works right now, because what I'm seeing is that it behaves the same way. We, when you use the keyboard to select the dates that when we use the mouse, so if right now, you just open the calendar and click on the first date, the date doesn't update until you select the the end date, um so we would also have to figure out how that works with the mouse. You know what I mean like it would change the interaction for keyboard.

F

Yeah, I don't know if, if I make myself clear there, it's easy when I see it happening on my screen.

C

Yeah, I think I I got your points so basically, like we could transmit transpose, would to have the same interactions. We have using keyboard with uh the mouse, so we shouldn't have like two different ways of interacting yeah: it's mouse and keyboard. Okay,.

A

Maybe it's not just that, but also simply the visual feedback, because right now you have clicked on something. So you have changed something with the mouse, but the fields haven't updated because you have only clicked on one day and that might be confusing as a user.

A

I clicked I did my interaction and I'm not even seeing that the fields haven't updated because with all the numbers like there is no way to tell have they properly updated or not. You would have to look closely to see that and now, if I click apply, then actually it's not applied like a wrong time range is applied there right. So that might be confusing, because it might not be clear that oh, I need to click something else in order to update the field, because I've only clicked once now.

F

Yeah, exactly like, I feel like the whole interaction right now is just confusing, but it's nothing to do with the keyboard navigation. Exactly.

A

F

Out of the calendar, we were talking about that which brought out, but it's more like it's just weird.

A

It's because um there is no visual distinction between the beginning and end of a range and the in between area. So, basically right now it. The the interface doesn't tell me that I have only done half of the needed interaction.

A

It looks the same. So maybe we need like, like a half or like you, have done the first click, but you still need to do the second click visual indicator or something.

B

Can we just update the first field on the first click or selection?

B

I mean that would.

A

Solve that that's a good point yeah, and in this case then I guess the second field would just need to be cleared because right, it might not make sense anymore right and then, if the that's that's a really good idea, because then we could do field validation and then, if the second field is empty and you try to click on apply, you just get the like red highlight. Oh, you still need to enter something into this field or you need to click a second date in the calendar.

A

That's very good idea. I like it.

F

Back to chess question, though, because um so the challenge that we had here was with keyword navigation. How do we get into the calendar right uh and without this I can we found it really hard? Do we think that the icon is going in the right direction.

F

Adding the icon to the input.

A

I don't remember, because I did some ux work on this, but it was ages ago. um What are good practices around this I mean such a calendar picker with feels that's quite common. So, like do other solutions, have two calendar icon buttons as well? Are they just all inaccessible, which I think is probably not the case? I'm not sure.

A

I would probably look at how other solutions do this, and do they have two buttons, and is that fine or do they only have one button or are the fields just always linked and the calendar pops up simultaneously for both of them? But there is a better visual indicator that there is two dates a beginning and an end or something.

A

I would probably check that again, because I think the button is good, I'm just not sure whether having two of them is right. Maybe we just need one and then the question is where it would be positioned.

G

Yeah on that point, I was just looking at airbnb's website and they place just like a similar topic.

G

They place check in and check out just besides each other there's two input fields and whenever you click on check-in, there's a slide down with the calendar open, and you can see this month and the next month, because it intuitively already gives the sense that you you are supposed to select now and then until when your your stay is gonna, be so then, whenever you click on the first date of check-in, the the field gets updated with that specific date and then, whenever you do that for the checkout, the same happens above when you, when you click on the yeah.

G

When you see the checkout so yeah, just the food for thought to design options. Here, it's just one calendar, not two icons.

F

I think the airbnb case wouldn't exactly work for us, because in that case you can't type in your own dates right. You need to use the calendar pick.

G

Yeah, I don't know how that would work. uh Keyboard-Wise um yeah, that was a transit.

F

Test because, in our case, we need- because you can enter now now minus six months or something like that. So we need the user to actively go into the calendar if they want to, but not necessarily um which maybe.

A

We can check in the week's flow, but maybe we can check other observability tools because they have the same challenge right.

E

I have another question concerning the time: is it always from 0 to 23 59, or is it always 24 hours, or can I also edit the time.

C

um I think you can edit the time, uh but then you need to like do it manually by you know clicking into the input. So like you know, basically our challenge. Initially with the time picker was uh there was with the first solution we had. uh There was no way you can directly like edit the inputs, but with this you can just go in, and you know maybe add, maybe one from 1 pm to like 3 p.m. Something like that.

C

So so yeah, it's not always 0 to 20 23 59, you it's uh you can it can be basically anything so long as it's uh so long as it's within the you know, required time range, that's from 0 to 23 59. So.

E

Okay, because I don't as a user, there is not an indicator that I can also change the time it looks like when I I can change the date because of the calendar icon, but it looks like the the the time is already set for me. So is there, um unless I do it manually, there's no other way for me to change the time as well. Right.

B

Yeah, so this is one of the things when I was looking at the time picker a few weeks ago, that is kind of funny, because it's a little misleading that we call it a time picker, because you can't actually pick the time you have to type it so our label for our name, for it is a little off.

B

I think that's definitely something to consider, but I don't know that it's exactly what it is trying to do right this moment it feels like I mean I think, we've all sort of acknowledged that and there's a design dock around this that we, you know it's time to kind of revisit this design overall, and I would suggest that that's probably one of the things to look at um just because we, you know there are pickers for times, and you know, with all kinds of different elements available like spinners and stuff, um that that might be helpful here or might not be.

A

Yeah also um in the very very original time, picket design way before this one. I think we didn't have such a distinction between absolute and relative ranges and in the fields that are now labeled absolute time range. You can also enter relative time ranges because we have kind of like a syntax for picking time ranges and in here there is no way to even access any hints or documentation about how this syntax works.

A

So if you don't know about the syntax- and you click a relative range, then you might see- oh, it says like from now minus six hours to now and then you're like. Oh, I think there might be something going on here, but if you don't like coincidentally stumble upon this, then you might not even figure this out on your own. So maybe we just need a little bit more introduction or like guidance around what these fields actually do and the fact that they do more than just pick absolute ranges.

C

Cool, um I guess all this feedback was super useful um if there's any other comments or feedback, I'm also happy to.

A

Maybe one thing that I thought about regarding the keyboard usability: I know that people like my mother, who might not be the typical grafana user red people who are less tech savvy they might not think of using escape as the most obvious way to leave something. So I'm not sure whether we should also have like a visual.

A

I don't know x option to remove the fly out or do you think our users are so smart that they don't need that.

C

I think that's a very good point. um Currently, the close button exists on narrow viewports, so we could also.

D

C

Yeah, we could also add it to wider viewports yeah. That's that's a very good point.

A

Because then, like, if you using a keyboard- and you don't think of hey, I could just try using escape to close the fly out. Then you can at least tap until you reach the x and then close it. That way.

C

Awesome um any other feedback or comments.

C

Yeah then, I guess uh I mean thanks a lot for all the feedback. I'll definitely go back to our dream board and you know try to implement all this useful feedback and improve the ux of this specific component. Yeah thanks a lot.

A

Awesome uche thank you for demoing this. Sometimes it looks like you're so close and then the feedback is actually like. It brings up more issues than the one that you wanted to solve now. So I guess sorry, not sorry.

A

Yeah, I hope you will find like an intermediate solution before we go revisit the whole thing and make it better.

D

A

A on a larger scale um yeah- and that was the only thing on today's agenda, so thank you. People on youtube for watching, see you next time and, as you know like check out our channel for more ux feedback session recordings and other great grafana content all right now the youtubers are gone and we will cut that. um And yes, is there any feedback that everyone has to improve the session in the future?

A

Maybe we can try and advertise it so that we have more stuff on the agenda, but I mean having 30 minutes back to our lives is also great, so any other opinions.

A

I guess not great, then. Thank you all for your feedback. As always thank you for joining and yeah bring good topics that we can discuss.

A

Oh thank you, patrick. I'm also happy to be back.

A

Okay, cool then enjoy additional 30 minutes of work time for today and see you again next week.

B

Thanks everyone bye.

A

Bye thanks, everyone bye.