Grafana UX Squad, 18 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Grafana UX Design Session 2020-11-18

Description

At Grafana Labs, we run internal design feedback sessions every week. This is the first time ever we're opening up an internal design session! In the video, our UX designer Jess presents some UX issues and potential improvements for the new Exemplars feature of the Prometheus data source. To skip the intro and get right into the presentation, start watching at 2:43: https://youtu.be/XPoqNPOsfd4?t=163

How do you like the proposed UX solutions? Should we share more of these sessions? Anything we should do differently? Tell us what you think. If you want to see more of these sessions, feel free to drop a like! The UX team is excited to read your feedback.

If you want to give us even more UX-related feedback, we're currently researching Grafana query editors. You can take a 10-minute survey ( https://Grafana.optimalworkshop.com/questions/grafana-query-editors ) or reach out to the UX team directly: ux@grafana.com.

A

Yeah, so maybe just a quick intro for nico, who is here for the first time this is an open session and we have an agenda doc. You might already have seen it on slack where the link gets posted.

A

um Everyone can just drop topics in their book sometime. They think they need, and then we can give feedback and discuss during the session, and everyone is encouraged to help take notes so that it's not just one person who has to sweat typing and maybe miss half of everything and can never give feedback themselves.

A

um One thing that we also have introduced is that we have two note-taking champions who encourage everyone to take notes when people forget so any volunteers who would like to be note-taking champions today,.

A

We are volunteering very nice.

A

Diana plus dog, a human person as a backup, don't.

B

Listen to them.

A

Volunteering I'll.

C

A

Okay, thank you so much jack. That doesn't mean you two have to be all you. Two and a half uh have to be the only people to take notes. Everyone please help them, but they are allowed to uh call people out for being lazy and not taking notes this time. I'm not gonna take notes because I will be presenting so uh yeah, let's get right into it, since we don't have anything else on the agenda.

A

Oh, um but one thing recently, we got the request that if we don't have a packed agenda, that people from the ux team or even developers, could just demo something that they're working on right now, just to give insights on what they're doing. So any of you interested in showing something today like without the need to receive feedback or without the need to have any preparation done like just showing a glimpse on the workbench.

D

I have nothing. Sadly, I will try to arrange some students for next time, but.

A

I mean maybe we can see their work then next week. I guess that's a no from everyone, but that's fine, so um for the project that I'm presenting today. This is the exemplars feature and I found five ux issues with the current live solution where I found fixes for so, I will just go through each problem and its solution, one after the other, because I think it's easier that way to then to present all the problems and then all the solutions. After um so let me share my figma.

A

A

Okay, so maybe just to give you an introduction, it's about the exemplars feature in prometheus, which means that you can now output exemplars, which are these little dot thingies here that give you further information on events that happen along your series, and there are some issues with the way this currently works.

A

So the problem is, I mean here, it's quite simple, because in this example screenshot you only have one series, but imagine you had multiple series like two or three graph lines here, then these dots could be associated to different series like this one could be associated to the green value line here and then, if we had another yellow one, this one could be associated to the yellow one.

A

But currently there is no way to tell or whether it's not even issue one isn't it yeah and the first one is that we have so many dots here and in this example, they are all in the bottom and don't really get in the way of the graph, but depending on how the exemplar values are, they might just be on top of this graph here.

A

So we want a way to make the examples not get in the way of the data, so my solution idea was to create decrease the opacity of the exemplars, so that this way they are less intrusive, with the line graph and feel more like they are behind the.

C

A

um But then I'm personally not sure whether that could be like not helpful to users who are particularly looking for a certain exemplar. So I also thought maybe we could introduce a toggle where we say. Oh, we want the examples to be like transparent in the background or we want them to be in the foreground and then the line graph sort of gets in the background.

A

And of course we can still experiment with opacities here but like, as you can see in this uh fake mockup here like if the exemplars sort of cover up the line, and this makes it much easier to tell what graph actually looks like. But this makes it easier to figure out where the exemplars are yeah.

A

So that's problem and solution one then we have problem two which is about what I've mentioned already with uh grouping so currently like all the exemplars here would just be white or black dots depending on the theme, and you would know which belongs to which uh series.

A

So what I am experimenting with is adding different shapes that could be associated to different lines so that, if you're looking for a value exemplar for the value 2, then you know to look for the crosses and not for the diamonds um yeah. Of course this doesn't scale infinitely.

A

So if we have like 21 series, then you would have a lot of shapes, I'm I have been trying to like find different shapes and like different ways to design these shapes so that you can still tell them apart, but maybe there's better ideas, but I didn't want to encode these different connections between exemplars and sirius, just by color, because that's not the most accessible uh yeah. So that's something that could maybe use improvements, but it's start any questions so far. Is it clear what I'm explaining?

A

No people are nodding.

D

A

uh Okay, so do we pass sorry, did we pass if we're nothing, yeah, yeah yeah? Absolutely I'm just making sure that it's clear what I'm saying um all right.

A

So the problem is that let's say you do have 10 series and a lot of exemplars. Then the view could get really overwhelming. Like imagine this times, 10 right, then it's a bit much so um like in the dashboards, where you can click a series. To only show that serious, I thought it would be nice to click a series and then only see that one series and the exam players associated with it. That should hopefully also be something that we can easily add, because we already have that functionality in regular panels.

A

And then there is another thing: currently the window like the modal that appears when you click an exemplar, is this, so you get a bunch of labels and then you get a trace id, and this here is clickable, and what I did not like about this design is that it just looks like a tag and as a user. I wouldn't be aware that this functions like a button, because not all the tags that we use in grafana are clickable. So it's not fully clear to me. um The reasoning why this is designed.

A

That way is because we have like a similar functionality here in the log labels, where we also show a trace id, and you can click this blue thing to go to a tracing tool. We call tempo, but, as you can see, this is kind of different right here. It's a separate button that tells you where you're going when you click and the trace id itself is not clickable. Here, the trace id directly is clickable or it's supposed to be clickable, so I thought we should unify these both places and make the call to action clearer.

A

So what I thought is we could do it like this, so use a small button instead of a tag and also add an icon that clarifies I'm not actually sure um whether we want to open this in a new tab or a new window or whether we want to open a split view so either we should have a new window icon or a split view icon here, so that users know when I click here like this will happen and also oh, then I can query this trace id with tempo, and so I would propose to the same thing here.

A

So that's consistent and the call to action is clearer and then I found another issue with this um labels view wait. Where is it here, um so this status code 200 here these values?

A

Sometimes they are associated to series, but it could very well be that as a user, I am looking for a certain information here and I want to see all the traces that share that information, for example, because the status code 200, is some sort of error that I am interested in exploring.

A

So I'm not actually sure yet whether all of these are relevant or whether it's just a few of them.

A

But my design proposal is that we add a filter option here, so the users could click the value or the filter, icon and then similar, as in the I think, parse fields in loki logs.

A

We could show only the exemplars where this applies and would indicate the filtering here and then you could sort of remove the filter by clicking, show all um yeah, and I only put the one filter icon but depending on which values are useful. We could add it for all of them or for some of them. I don't honestly now uh yeah more exemplar, savvy people can decide that and that's all the five improvement ideas that I have feedback.

D

Please that was an awesome presentation.

D

A

D

Yeah, I'm yeah, I love it. I mean I talked about to david, about the exemplars way back and to see what came out of it is it's really cool? um I just have like. I really like the idea with um toggling whether they're like exemplars, are in the background or foreground right.

D

What was that? But that also made me think that maybe what you can toggle is actually whether you're show exemplars, because it's not like you always need them. You need exemplars, I'm guessing now, because I don't have enough context, but when you're investigating something right or checking something.

A

Yeah, I have been considering adding a third option for none, but what I'm not sure about yet is whether that's needed, because I think you have to pick a specific exemplar data source in order to be able to see examples at all, so basically you're pre-selecting that you want to see exemplars already.

A

So I'm not sure whether you need to have a non-option like anyone from the dev site here who can clarify.

A

E

uh I I can't I'm afraid.

A

Okay, that's okay! Thanks.

F

Yeah I mean I I I think you're right I mean that's the like that should support exemplars and you should actually like actively trying to visualize examples to get them uh shown, but I don't think that toggling them it's a bad idea like.

F

I can imagine myself, sometimes looking at the graph and like in a specific moment, not being interested in examples, for example, because I only want to see to see the series behind it and honestly like this is another thing uh I mean I I know I I know you already told that we should um probably play a bit more with opacity and colors for the exemplars.

F

Like I love the idea of of changing the opacity and sort of making like more subtle to the series, I'm not sure like. I imagine this on um on a dashboard that is hanging on a tv screen in some office and I'm not sure how this would work with people passively. Looking at the dashboard like when you're required to interact with the dashboard itself, does it make sense, not sure if it's if it makes sense to you?

F

I know this is.

A

Very interesting, like I don't think we have addressed this uh sort of presentation mode use case for exemplars. Yet at all, so I have no idea whether it would be relevant if it is then you're absolutely right that it doesn't add as much value uh yeah.

A

So I will just have to explore that further, whether it's relevant as a use case or not the way it works right now, since we we don't really get any info about an exemplar from the graph, except for like uh where it's located on the x and y axis um so far, it would bring even less value in in the presentation situation, because you would have to click the exemplar to even see more properties for it.

A

So maybe it's just generally not a high priority use case, but I will definitely follow up on that.

B

uh On the switching part, I was thinking uh by the way I I love the result: the problem to reservation like the solution that you proposed with different shapes on here on the opacity which also, I think it's a good solution. I was thinking that we, instead of having a switch between showing background versus foreground, can we do a slider with opacity and that can address the issues for those who have accessibility stuff and they can just try and do their own opacity.

A

That's a great idea. I have no idea why I didn't think.

B

Of that I will try that uh and on the naming itself, if you're, if you're going to do a toggle, uh I realize I didn't know what examples are. So I searched I've seen it's something related to 10 points tracing.

B

Can we maybe have an information icon near the naming with saying what that is, and my my last comment was so when you click on an example, and you see the detail view, you have the blue button right now and you propose query with tempo and my question is shouldn't the call to action be traced with tempo instead of query.

D

ah Interesting point.

A

That's a very good question and I honestly wasn't sure what the appropriate term was and when I looked at the tempo documentation and our blog articles that we have so far. It always said query. But I can absolutely verify that with the writing team yeah.

B

I was also thinking uh to, if possible, not sure how much that would clutter things uh to add the little icon from tempo in there to raise awareness that it's a product and because tempo can mean stuff. I don't know temporary.

D

D

Yeah and on that note actually, I think we should be very specific, and that is something probably you have to research, yes, but we should be very specific about whether it's a split view, new tab or whatever. uh So people know what to expect the other thing. um The filter, icon. Next to the details of a trace.

D

I will just wait until you finish this.

D

So usually, my initial thought was that when I see such icon is that, if I click on it, I will get filtering options, notes that it will get filtered automatically and often people click without waiting for yourself with those such popular icons, people don't tend to wait for tooltip right, so I was thinking that maybe it's just about saying, filter out with the status quo, simply with words some kind of a button or whatever. That is very explicit. What will happen.

D

F

Regarding this, uh why don't you use the same pattern? We do for logs, for example like in logs views we have when you expand the log item. uh You have a an icon, which is an eye, if I remember correctly, which will actually filters the log for that value.

A

Yeah I was thinking about whether I should use the I, and I must honestly say I don't like the way the eye icon is working right now from a ux perspective in the logs. I think that could be improved, but you're, probably right that we should just find one pattern that works in all the places and that we can use in the same way.

D

ah One thing that uh I really like the idea with different shapes for different queries when it comes to exemplars, but it's also depending on the screen resolution and the size of the panel. They will be less more or less readable and they will more or less look the same. So that is kind of a challenge I see, especially if they will have a certain opacity um yeah.

D

So that can pose a lot of challenges and also from the accessibility point of view like you need a lot of precision to hover and click on these things.

A

You know I have addressed this when the dev team first demoed the feature to me, because I was worried about the very small clicking area, but while the uh the shape itself looks small, there is actually like a invisible area around it where you can already hit that object, so it's a bit easier to hit them than it looks so like if your cursor would be here. This would already be hovered so that you can see. Oh if I click now, it.

D

D

I think it's great, that the one additional thing that can be done on the front and side is to actually not only make it like pop with color or whatever or get highlighted, but actually make this particular example uh a little bit bigger like to enlarge it because uh the color change making this like a small animation, can very quickly uh improve the navigation there and jumping from one to another.

A

Yeah, it's a good point. I haven't thought of it, but we should absolutely do that and then regarding size in general, I mean for now I've just been using a similar size to the one that we currently have in the live version, but I do agree that maybe we could make them slightly bigger. I think they're like five by five pixels. Now, maybe if we had eight by eight, it could still work.

F

Also, I have another consideration about accessibility here uh like the first one is not really about accessibility, um but in in series you can.

F

I mean this is always not ready to uh to the explorer mode but more in dashboards. If this is coming to dashboard uh as well um that you can use you can align points, you have an option to to have points on the series being rendered as points and not uh just as as lines, which means that, for example, like the sh, the point shape for exemplars will be the same of the one in the series. I'm not sure if it's clear.

D

Two for me.

A

I know what you mean: I've seen the points feature.

F

A

Yeah, that's uh that's a good point haha point.

A

um Just the other day, I'm not even sure what situation it was. Maybe it was a query, editor interview, but a user actually requested that this points view should be available in explorer as well so you're right that um this needs to be considered. Maybe that's also why the extemplar standard icon is not a circle, but a diamond right now. So maybe we just cannot use circle icons, oh yeah. We need a distinction for that.

F

Now I'll slide down, another point will be uh like I like that. On the on the note on the side, you have a different kind of shapes like uh solids and uh stripes. I think I don't remember the other ones, because one I think uh there was a discussion or some suggestion a while ago about uh having the serious like each different for accessibility purposes, each series having different shapes for those dots to sort of make it like uh color, bright, color blind proof.

F

I don't know if, if you remember this.

A

Yeah, that's basically the plan.

F

Yeah, so this will probably interfere with these different shapes for different series.

D

Oh yeah, I remember that.

F

Like if I have a square on series, a and our in a circle, usb.

F

Because of accessibility, so I'm not I'm I'm making it like color, bright, color, color. Blank proof, then having the examples with the same icon will make it harder. Maybe yeah.

D

It's kind of going back to the discussion about having like a point graph, it's kind of the evolution of it. Isn't it.

F

A

So you mean, instead of having uh like one specific shape for points. You mean that the point should just have the same shape as the exemplar to make it clear that there is an association between that graph, but then you're right. That.

F

Themselves could.

A

Look like exemplars and that's not what we exactly.

F

Like they should look the same like because the color is is exactly the same point, but also the shape it's related when I'm coral brine colorblind, but at the same time, with the same color, I make the points on the serious sort of useless like the concealer but confusing.

F

I think I I don't know the solution, I'm just thinking about a problem that we might face in the future. If we want to go with the for that.

F

A

Okay, yeah, that's great feedback. I will just have to think about this a bit more, um not making this easier. It never happens, but that's okay, like that's! Why.

D

I go into the session with the.

A

Like full knowledge that it means more work.

D

I mean yeah it's about making those features and ideas, uh bulletproof, basically,.

A

Exactly awesome any other feedback, because otherwise I'm I'm already quite happy with what I got.

E

I have a question like yes, you say you can filter exemplar by clicking that value and see it. Why do I need to click an exampler, see those values and then I can filter. Is it not a filter button.

E

Filter button for the examples.

D

Interesting, so like feel what you mean is like filtering before, like to filter exemplars that have only a specific value before clicking on any example beforehand.

E

Yeah, I was just curious because basically, the other way around we're already building a filter feature so.

A

So like these filters filter based on sirius, so you will get all the examples associated with like this one line graph. Oh.

E

I mean the second second thing you showed where you actually looked at the data inside an example.

A

A

E

A

E

No, it's not that one. There.

D

Too many designs.

E

Yeah, you showed one, you click yeah and then you say show only so you basically already build a field feature feature for it.

A

Yeah I mean this one I was thinking is more specific because, theoretically, if exemplars with multiple sirius had that status code, you would still see multiple series, so you basically filter for two different things or from two different perspectives, and you could also combine them like. I could have three series down here that all have the status code 200 and then I could click one of them and then I would only have the one remaining.

D

Okay, so I guess we're diving into nitty gritty details of how examples work right.

A

I think so like I think it does.

D

Like honestly, I got lost for a second.

A

So the way I understood, nico's question is he's just asking whether we need to have two different, like kinds of filtering, whether we can just combine it into one. In the same thing,.

E

No, no, it was basically, you basically showed um like a workflow of like I have to click an example and then I can filter based on status code, but there was no way of just filtering first and then selecting examples.

A

ah Uh-Huh yeah, I mean I'm not sure whether users would know what to filter for beforehand.

A

I'm not sure whether, like you can gauge what could be like status, codes or values of these exemplars. I will have to ask, but it could be an interesting idea. I will take that up.

E

Some context I haven't read up on it. What examples are I just imagine it's like data points.

A

That's perfectly fine, but uh good point. Nonetheless, all right, uh then, because we don't have anything else on the agenda, and we already talked about this much longer than I had blank, which is good um unless anyone has anything else they want to show or talk about. I will just give all of us 25 minutes back.

D

I have one thing so: we've been discussing uh broadcasting one of feedback sessions on youtube and the question is: is this a session that we want to share on youtube? Would it be okay for everyone to upload this to youtube or not? An answer is fine. Just do you all feel comfortable with it for me as a person.

E

That's fine, sorry! So who is the target in terms of publishing it on youtube?.

D

um It's usually people who use grafana and just follow our channel. So like engineers.

D

I mean think about it. I will reach out later on to everyone one by one, to ask privately whether it's okay and it's perfectly okay to say no. um It was just a thought that I had.

A

um Yeah, I will just I want to confirm that content-wise, it's okay, to show this with david and zoltan.

D

A

F

Oh, I think it's like for also for future sessions uh like should we ask um participants beforehand.

D

Yeah, that is why I'm yeah yeah I just like this- is like a nice half an hour session purely on exemplars. We could ask for feedback, also on youtube for people to like comment on what they watched uh yeah. It was kind of late. I get that um yeah if we say yeah, it's fine, then we'll publish, if not we'll, try another time. You know.

F

It's totally fine.

C

um I have a comment like um uh jess, if you're doing any few further like meetings with the joe or ana the primary um temple developers, would you uh ping me as well? I would like to join because uh I kind of volunteered to be the tempo doc writer and I'm myself coming up to speed with all the um different nuances that you were talking about. The exemplar and stuff like that.

A

Absolutely I mean honestly, I haven't talked to the team that much it's mostly been just david and zoltan, who sort of quickly threw this on my table. But if I have another meeting I will make sure that you get invited.

C

D

You all right, do you get 20 minutes back.

A

D

A

Absolutely oh before we go one last question, though, um is there anything we could do to make these sessions better.

D

I really enjoyed today's session like it took half an hour talking about one topic in depth, and I really really liked it like.

D

Usually when we have like one topic, it seems like ah mac, it will be done in 10 minutes, but actually what ends up happening is that we have space for more in-depth discussion, uh which I really really enjoy, um and I just note that I don't think we should cancel if we have only one topic, because today's session and some previous sessions actually show that uh even if it's one topic, it can be really cool and meaningful conversation for like half an hour, yeah.

A

Absolutely I agree awesome anything else. Otherwise, take 20 minutes.

A

All right, I guess that's 20 minutes, then have a great rest of your day. Everyone have a great.

F

F