GitLab CI/CD UX Team Design Reviews, 14 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: CI/CD UX Team Design Review | 14 January 2020

Description

Design Review session of CI/CD UX Team.

- Juan J. Ramirez | 00:31
xUnit Pipeline Screenshots

A

And then, just for the record, I'm gonna say it again: I'm gonna be presenting something that I already presented, but this time is gonna be a like the groomed down designs that are like more MBC that the original ones and also repeat some small aspects from the original one that I present so okay. So let me share my screen.

A

So I don't know if you guys remember these, but I think I showed these last year, maybe like last, like first days of December I believe so basically, what's going on here is like in testing. We have like the ability of knowledge ability. We have like certain sweet certain tests that go. They look a web app and then they care like test that web app and within the context of that, sometimes we need screenshots. So for dad, you use things like selenium.

A

You use like like a webdriver that goes on, like navigates, into like an actual review up and then performs all these actions and then like. If you give the instruction to the script to take a screenshot on failure or like on certain case scenarios, then it will do that right. So because this is kind of like an important use case for many people taking the screenshots, then we decided that we wanted to create like a dedicated, buford screenshot. So what I, what I showed last year, was basically okay.

A

There's gonna, be these kind of like super you in the job view that it's gonna show you, like. All the tests that are running for that particular job and then, if they have screenshots, you will see that they do have screenshots and you can expand them and you can see like the screenshot and you can see the details of the screenshot like the beaut or sites had in which took the screenshot, plus all the user. hm Details like the URI of the like of the review up in which the at which the screenshot was taken.

A

So there's a lot of details and, of course, these had like lot of functionality. Functionality going on here, like there was I, get the ability of switching between sessions like filtering by status, hiding tasks spanning screenshots, so there was quite a bit of things going on there and then the ability of seeing the raw, the raw logs for that. So this is goodbye like we had to groom down. These I mean we. We we needed sort like very smaller and there's also.

A

Some considerations about this design in terms of like where it's leaving on right now, so these leaves at the job level and after for further analysis, we are we realize that, like. If you have this at the job level, then if you have multiple jobs that are taking screenshots, then it becomes very painful to just go Alex, inspect all those jobs and see all those screenshots, and that's that's something that can definitely happen.

A

You can have like several jobs with with screenshots on them, so what we did was revisit this a little bit so okay, so let me just go to the new.

B

A

So the first thing that we did is that now we are not gonna, have this view of the job level anymore. So the idea is that now this view is gonna live at the pipeline level, and this is better because, like we already have tests and tests are very similar to what screenshots is gonna be doing so in tests, we basically show all the suites that run jobs and we we show the jobs or like the actions that those job jobs.

A

Sorry the Sweden job, is basically the same. So we we Schober, although all the jobs- and we showed the actions that the job took when he was running the tests we show if it fail or if it passed, and then we show the trace- and we show like many of those things, so it's very very similar to like what we're gonna do with screenshots.

A

The the main difference here is that with screenshots were you showing the the actions within all the sweets that took screenshots, so one consideration that we had for this is that maybe we could actually add the screenshots to the tests tap like a spark like all the drops are shown there but I.

A

Basically, this means that option because, like if you see, for instance, this example that we have here, there's like like, like 135 through 1458 tests, so like that's pretty hard to navigate like if you want to find the screenshots inside those tests, it's gonna be pretty hard, and then that means that you also need to build some sort of functionality. For that you know like some filtering or some type of sub that allows you to see the screenshots and then, on the other hand, is like most people.

A

They just want to see the screenshots on isolation right. They want to see like show me all the things that fail and like the ones that had screenshots and I care about those things, I, don't wanna. If I wanna expect the tests deeper, then I'll just go to the test. Stop so basically, we decided that we were gonna use. The ship like create like a new tab called screenshots, and this tab is basically a table and the table shows the name of the action the suite from which is coming.

A

The suite is basically the equivalent to the job the status of the action on a start time, duration, all that stuff, the action that it took in terms of like pioneers, selector and all that stuff and then the screenshot itself right. So these in this particular case, we're saying that there's like five screenshots right. So all those screenshots are shown here in context and then there's two things that I'm going to explain here.

A

One is like there's the ability of downloading the screenshots or like, in this particular case, downloading the whole artifact, because there's two things: there's a screenshot and then there's the actual kind of like roll lock that you can download as well. So basically, the idea here is that these will don't download a sheep with like a seeped pile with the screenshot and and kind of a crawl lock like the XML xunit test, and then one particular aspect about these- that it's pretty important is that just screenshot is not gonna.

A

Give them enough context of what happened. I mean it matters a lot, because you can see that something is wrong, so maybe they can say, like you know, like these buttons shifted, like five pixels to the left, for some reason right. So, like not that's important, but now they need to understand why you know I what class. What was the test that failed so like, for instance, the test was testing for like CSS classes right.

A

So from this view, they cannot tell that so the way to actually figure out that is by looking at the trace, there's like like the trace that block trace that matters for that particular screenshot. So the way that you achieve that is by clicking this guy so like. If you hover over this guy, you will see like spheal trace and then we would present this model that has the trace right.

A

I show these to my UX body yesterday and she Alexis, and she she had some good comments about like the fact that we were trying to do it like these, like she had some concerns about like context like. Do you lose context too much if you click these and then like you're kind of like oh what I'm looking at you know what what does this thing correspond to in the table? Right and I agree with her I think, like there's, probably some things that we could do to improve.

A

That I mean we have the name of the we have the name of the action under, but one thing that I was thinking is maybe even showing the screen on the morale as well. I mean like that's basically redundant but like I, don't think it's gonna hurt the user and they can see like oh here's, the screenshot, and here you're like the load screenshot, you can see all the trace so yeah. This is basically so.

A

The idea now is just like show this table always with the screenshots expanded, because it's all the screenshots that's name of the tab. This is gonna work for anything that it's coming from an ex. You need report so like. If your test generates an X, you need report regardless, if it's using selenium or puppeteer, whatever like it's or. However, you are like doing these. It's always gonna read, look for the X unit report and then it's gonna generate this view.

A

Out of that, and then one thing that I also did here is like showing the error State for this, because, like there's like one kind of grace condition which is like it can actually like, like the whole thing can like say like oh I'm, looking at X, you need report. I see screenshots, but they're like it goes on a characterize to retrieve those screenshots and they failed for some reason, I mean, like that's unlikely, but it could happen so I yeah we needed to collect some Tom ever stay there. For that.

A

Yeah, that's pretty much. It like I, also like, of course, I'm looking for feedback on all these things, but I also was thinking about like an older I have been thinking about one particular kind of like think about this design, which happens a lot in grid lab, actually, which is the fact that, for instance, we tests on with security which is not showing up here. We we only show those stops.

A

If the pipeline has those things configure right like like, if it has security things going on, then he will show that tab right and I was wondering if that's the best practice right like do. We really want to do it that way, because I think that, basically like it doesn't definitely doesn't favor. Discoverability I mean like if you, if you don't see the security tab, although you don't have security jobs.

A

That means that you don't you'll, never find out that that think it's going on right, like that, you actually have the ability of setting up security, and the same thing thing goes goes for tests and screenshots and I was looking like a round.

A

Let me see if I can show this quickly. I was looking around each lab. I, don't think we're very consistent with that like if you go to something like, for instance, I'm gonna, go to this repo and you go to security and I go to security. Were here like we, we don't hide security, but right like we, we have like an empty state right like where we say like Oh, learn more about this thing.

A

If you want to use it right, so I was wondering why we hide these stops there, even if that functionality exists there right so I, don't know that. Basically, it's kind of like that. The last be that I want to say, because I think that's kinda, like something for discussion. I want to hear your thoughts on that, because I'm inclining my thoughts towards idea that we should have all the available cops always showing up, and if you don't have those things you should click on them and there's an empty state that says like.

A

Oh, these job didn't have screenshots. If you want to test which screenshots here's a guide for that, that that was kind of the last piece that I wanna serve.

B

Think that's a pretty valid point about I mean it's one of our larger underlying UX problems across kilobits discoverability of features, so I would guess the reason why we've gone to this hide tabs scenario is probably born out of I'll. Try not to get on a rant here, but there's one of my least favorite patterns in gitlab right.

C

B

You go back to the can go over to the are there desert.

D

B

I really hate this idea of using tabs as filters right right.

C

Look they're like jobs.

B

And then failed jobs to mean job failed. Job should be a filtered subset of jobs, but we never.

C

B

The filters, and now we use tabs as filters and even at the point, I understand why you're breaking out the screenshots, in my opinion, long term ideal situation would be like this is a test and it's a filterable set of that. But we don't have these robust filters on a lot of these views. So we end up I feel like going to this tab pattern run and then I think that's why it's hidden right, because my sense of failed jobs isn't there to just hide that top right. I! Really don't like this pattern. No.

A

I didn't I agree with you, I, like basically counting what I was thinking at the beginning is like I. Don't want to create a new table right I want to keep everything routine tests because text, it's like what like these horrible tests right, but a little bit of context, I, don't think this is gonna, make sense until I actually show it.

A

So you see how white whites kind of like so and when I use the horrible example which give up org which, as we know, loads super lowly, has millions of things going on, but I think up. I think it's gonna show like the the problem pretty well. So, if I go to, let's go to any image requests.

A

Actually, let me go to a pipeline pipeline.

A

And, of course, he's gonna take a long time. We find a failed one somewhere.

A

This one is failed, so.

A

This is extremely slow. I, don't like this is like just you'd love that or like this is painfully slow.

A

Alright, so this one has like millions of tests right. So if you click these.

A

This one is also gonna take a long time, but you will see the problem right away.

B

Yeah no I get it right. If you have 15,000 of anything yeah.

D

B

Not filterable and not sortable yeah.

A

B

Information in there is essential.

A

Exactly exactly.

B

A

So what I was trying to get to is like, while these loads, like my initial plan, was like, let's add some type of filter into these right, like maybe there's like something like like a control at the top of this table. That he's like show me all the suites that have screenshots. So maybe you have screenshots here and everything right, but yeah, that's the problem that I see is the like. First of all, we're not ready for that like to create like that. Verbose then be like the whole thing about.

A

These was let's move towards a more MVC state right so like improving this table on, like re, filtering and everything, I, don't think it's win the scope of that, which is why I can't like gravitated towards ad out on having a table, but also like from like an information architecture, point of view, if you like this one actually doesn't have like a lot of fail things but like even if you click up this thing.

A

And there's like a lot of things going on here right like there's all these tests, you know so like you need, if you had filters outside of that context, you need to have also filters inside these contexts, so the design becomes way more complex right like well. The other one is like isolated right. It's just kinda like that. Yeah, like all these pipeline, has the screenshots, which matter to me, because I want to see how I think we're behaving rows.

A

Those jobs that we're taking screenshots we're behaving so like show me that, but I concede that that's basically kind of like a cheap way to like filter tests in favor of screenshots and yeah.

B

A

Think perfectly valid MVC.

B

I think would the way we should go. I think this is a perfectly valid NBC I think I'm, just also suggesting that whenever I see 15,000 of anything yeah, we need to filter like eventually, I would like to see this. Maybe you know acts I. Think this view is illustrating that it's it's kind of lost its value.

A

At this, oh, it's totally on you I mean like so we're not totally usable but like what what value do I get from these really like out-of-the-box, not not much right like it's. uh Unless I do come on fine and I tried to find like something like a pool. Well, I, don't know all right! That's you know, like that's kind of how I, like that's kinda, like the hockey way that I will use this view somehow, but I. Don't even think that that's like really that good! It's just this.

A

Again, this is get up org right, like it's kind of like a very extreme.

B

Use case yeah, but I mean, if it's possible, it's possible right and right and and when you run tests, it's not like a human being. Actually like did this on purpose. This is what happens when you write code with tests and to get coverage, and things like this yeah. That's the nature of writing. Tests is right there. Obviously it's going to be a lot of them. I mean you're right. Gila organs is enormous right.

B

A lot of repos are enormous, so we.

A

Need to need to handle.

B

This situation, it's true, it's true.

A

You know just looking at this. A singlet opener on each bird is really there's no reason to show like how tail things you know why I I'm thinking that, like you, should be showing like failures right I mean like there should be like a filter somewhere. That's like show only failures.

B

Yeah filters or yeah and even like you know, a view of this.

A

But what do you guys think about the fact that, like we don't show, for instance, security when, like there's no security jobs like what do you think about not showing that until you have security, jobs or like screenshots or whatever is gonna happen on these stubs because always think you know I keep thinking like we should show these just like basically have an empty state for this scene, like you, don't have any security jobs, yeah.

C

I think the meeting I agree that this also be a good idea to show an empty stage like what Mike already said to help the discoverability and also kind of you know gives the user is a hint that yeah your jobs are available there right and I'm. Just eight all right, I'm gonna.

A

At Demetri, do you all these I mean the only I mean we're. Gonna have like, for instance, screenshots I, know that, like Ian, like owns like the security tab, like my question, is security.

D

A

D

Character is owned by the security team as far as I first as far as I know, okay,.

B

D

Pipeline page, incomplete is I, think part of CI in a way, but it isn't like that. We need to approve anything in that sense. It is I. Do I what I do think is that you know adding yet another tab is a clear sign that we need to rethink our strategy because we're you know there's.

D

This is one of those cases where it's clear that we're extending beyond any original scope for this cordis page right, I, agree with Mike that this is a very valid MVC and that we should move forward in order to move forward. But I do think that you know we have the need to rethink our concept of extending the pipeline page it definitely if that is part of purely CI I, don't think so at the same time, because it touches so many other, you know workflows and stage groups.

D

This is this is a perfect like it's the merge request, widget all over again in a different place.

A

Yeah right right, yeah I mean like definitely we're not gonna solve this problem here on this school, but I think we should start thinking about how we're gonna feel with these I also feel that we can like abuse, taps to matching good love. You know like when we don't know how, like a way when we don't have fine, like a good way to play.

A

Something in context of a screen is like Oh put it in a top like the top is like the catch-all pattern you know and tops are good, but I think like we should have like a healthy balance it. It cannot be that, like every time that we have something, it's like a new top right like it's not good for users, he does some favorites cover ability and our tops are not great I mean I'm. Gonna, say it.

A

I feel that our tops are like sometimes I, look at them and like it's like, because I work, a deal up, I know that how they work but I think like if I was a user. When you go to an issue like it took me a while I mean let me open one. He took me a while to discover like the design stuff you know like I did like it's kind of like until someone said. Oh there's, a design stub, you know, so why.

D

A

D

Issue on especially like there are two parts here right: it's legacy, UI, that's being extended beyond its original idea and then there's. The second thing, which is the design of our tabs component, is not fulfilling its made of being. You know, accessible and cleared once a user. This is a concept. It was very clear, especially for the pipeline's tab within the merge quest page where users were scrolling over it. Looking.

C

D

For a sign where you know some hint of pipeline- and they just didn't see it, there's a there's, dedicated issue to improving it. Okay, but you know it's it's it's the same thing with image cosplay, you know the original intent didn't include this much expansion right. This needs to be a dedicated effort, it's not something that is easily so.

A

Right, yeah I think it happens. A lot yeah like well. This is not a good example, but yeah with the Mercs requital murder. Troopers widget, like there.