Dashboard : List view for pipeline

[naveenbhaskar]

The advantages of this view is

• This view is easy on eyes, user can easily scans each list as the alignment is better in this and its from left to right.
• we have more space for each tile without affecting the layout
• if there are multiple runs in one item, still it wont break the layout. A "js" is checking this and make the tiles align properly in the current tile design. we can get rid of these type of "js" items for UI.
• I have already tested this layout in the UX-refresh usability test and users loved this.

1. toggle button for list and tile view. (in case if this is added as an option. otherwise, this will be the default option)

2.draggable icon -> this will help the user to identify that the list is draggable and can be change the order.

3. This will appear whenever there is a pipeline error
4. Multiple run view.
5. if there are a lot of stags, it will come in multiple lines. stage width is restricted.
6. Manual gates showing in a pipeline.

[BrewRunner]

This looks great! This is similar, but vastly improved, to the Go Vertical Remix stylesheet, that someone uploaded to Stylish a few years ago. I actually still use that stylesheet and update it for every UI tweak that comes along with new releases. The vertical layout is much easier to scan quickly than the tiles.

Number 6 on the picture (5 in the list) is a much needed improvement. Access to the manual gates from the dashboard greatly simplifies our release process.

Great job!! Let's get this resourced.

[eeluke]

@naveenbhaskar Can you come up with a few different icon options for #2 (drag and drop) and share? Thanks. Also, I would like for us to come up with a few different options for manual gates as well before we decide - I think the avatar was working, but we can test a few and decide.

[naveenbhaskar]

different options for draggable and manual gates 2 and 6

[drewsonne]

Just curious. Is this a visual mock only, or is there working JS/CSS behind it? Not necessarily hooked up to the API, but drag and drop working, etc.

[eeluke]

@drewsonne I believe this is just a mock right now. Behavior of drag and drop is a work in progress. Any thoughts or input on what you'd like to see or not see?

@naveenbhaskar Can you do a bit of testing with icons? With community and/or some folks in the office? Let's create a few different options and then present a mockup of a screen with icons and get feedback: for manual gates, we can do hands, avatars, lines, arrows and combinations of those things (representations of "stop" and "manual" and "gate"). Only real requirement is simplicity of the icon as we scale it up and down. Let me know if you want to talk more or want me to send some ideas.

[streisguth]

I recommend designing the final icon on a 16x16 grid. This will help keep the form of the design and the weight of the strokes regular with additional icons we will be making, as well as help the design scale and map evenly to different sizes without a lot of antialiasing. I'm happy to demo this during one of our design calls

On Wed, Sep 20, 2017 at 3:43 PM, eeluke notifications@github.com wrote:

@drewsonne https://github.com/drewsonne I believe this is just a mock right now. Behavior of drag and drop is a work in progress. Any thoughts or input on what you'd like to see or not see?

@naveenbhaskar https://github.com/naveenbhaskar Can you do a bit of testing with icons? With community and/or some folks in the office? Let's create a few different options and then present a mockup of a screen with icons and get feedback: for manual gates, we can do hands, avatars, lines, arrows and combinations of those things (representations of "stop" and "manual" and "gate"). Only real requirement is simplicity of the icon as we scale it up and down. Let me know if you want to talk more or want me to send some ideas.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/gocd/gocd/issues/3872#issuecomment-331001530, or mute the thread https://github.com/notifications/unsubscribe-auth/ABsvFUPAoWNuv50qAeU-fPNcr9FsDi87ks5skZUEgaJpZM4PcBPj .

-- Steven Streisguth Artist, Designer, Cyclist lowfi-steve.com http://lowfi-steve.com 267.997.0967

[naveenbhaskar]

@drewsonne , its in the mockup phase now. @eeluke , yes.. will create some options and test it. @streisguth . Will do that when we play the icon story.

[drewsonne]

@eeluke nothing especially for the UI. I was thinking if it was in the mockup (but working gui), I would try and help to contribute to hooking it up to the API. :-)

[eeluke]

@drewsonne We will let you know when that time comes. Thanks for the offer to help!

[tinozza]

@all updating the options for the possible manual gate icons here. please note that these options are proposals and we can further fine-tune the icon style. Do share your feedback/concerns ...

Option1: Existing manual gate icon

Option2: person avatar icon

Option3: Hand icon to indicate that an action is required

Option4: Person icon

Option5: arrow /play next icon

[eeluke]

@tinozza Thanks for presenting some options. I would try to test some of these with folks in the office - present them and ask what the person thinks they mean. Personally, I like them in this order with a few caveats: 1) Option 2 (but would recommend doing a study with a few options at a small size), 2) Option 3 (hand with circle), 3) Option 5.

[streisguth]

Option 5 in the first Regression pipeline is my personal first choice, with the other icon presented in Option 5 being my close second choice. Third choice would be the exiting manual gate icon. Even though the affordances indicated by the 'play' and 'pause' buttons have confused new users in the past, I feel that in this instance it is worthwhile to continue the language of these icons that are normally associated with audio/visual equipment (option 5 resembles a 'next track' symbol). That said, in our sprint prototype, users tended to instantly understand the function of the 'silhouette in a circle' icon. However, this was in the sandbox of our prototype where there were no icons to represent a 'user' or 'avatar', so I feel that this initial positive response was skewed and we should consider the language of the symbols as they relate to each other, as well as the success in contextual recognition of this one symbol in particular.

[naveenbhaskar]

Update on the list view had a discussion with @arvindsv and @maheshp and made these changes. An important information use would like to see first in the pipeline tile is who made the last commits. Based on this , here is the new layout for pipeline tile.

OPTION 1

OPTION 2

Pipeline actions are moved to the header.So action related to the pipeline are in one place

[maheshp]

Few observations/thoughts,

1. I think pipeline details on the dashboard has 2 distinct information. The first is about the pipeline instance which has modification, instance no, stages, vsm etc and other is bout the pipeline which has the name, edit option(gear icon), pipeline actions(run, pause, run with options), history.
2. With the previous example the pipeline actions are in pipeline instance section, wondering if we need to visually differentiate these some how.
3. I have heard users being surprised on opening of the pipeline history page on clicking the pipeline name on the dashboard, should we think of changing this behaviour?

[eeluke]

@naveenbhaskar I worry about putting too many things in that small space. The font now becomes very small and I'm not sure about readability. Can we list the last 3 changes only, who made them, and only a few words of each one with more details on hover? Also, why do we have "changes" as a link if we are surfacing the changes in this way? Isn't that redundant?

As for the action buttons, I think they need be above the gray line as they belong to the entire pipeline. Steven did some designs on this - in tile format. See first mockup here: https://github.com/gocd/gocd/issues/3705.

And yes, I agree that it doesn't make sense to be taken to pipeline history page when you click on pipeline name. I would first try to map out a user flow - when do users visit the history page? where are they coming from? Is this even something that needs to be on the dashboard pipeline tile or can the user navigate to that page from somewhere else?

[arvindsv]

The changes popup needs to be redesigned. It looks out of place and old.

[naveenbhaskar]

@arvindsv , changes popup was just a placeholder.I will update the new design for it

[naveenbhaskar]

Here is the updated the tile no of items in the commit section has reduced. since "changes" moved as a section, removed "changes" link and added history there.Should we call this pipeline history or just history? The action buttons on the top right are not very noticeable. Will relook into this when we do the design changes.

added design for changes popup

[BrewRunner]

There is too much information being crammed into these tiles on the dashboard now. The original proposed view was much more concise, and allowed for numerous pipelines to be presented at once - this is a major advantage to this format over the standard tiles. These latest views are 3-4x at tall, resulting in fewer pipelines in view at a given time. I would prefer to see the minimized content and details upon hovering or clicking on "more".

[arvindsv]

That's a fair comment, @BrewRunner. I'm happy to take back my suggestion of adding material/commit information, if it doesn't work or feels crammed.

I thought it would be nice to see whether your commits are the one in progress. But, I can see that it might be too much information at once.

[eeluke]

@naveenbhaskar Let's go for a "less is more" approach for the dashboard tiles. Can we strip down any unnecessary information and either expose it using an expand collapse function/animation or include it one level down on the pipeline details page? I like your original design for this - I would even challenge you to think about if we can remove even more information here. Key is to keep is valuable with no visual overload. Might want to reach out to some folks including @BrewRunner for some feedback on what is critical info on those tiles/rows...

[naveenbhaskar]

Going back to the old design. Any feedback on the history link here? Click on pipeline name will go to the stage details page.

[eeluke]

@naveenbhaskar Do we need all 4 links? Do people use all of these? Just wondering. Also, I'd like to think a little more about those action buttons (play, pause, etc.) and where they are located. What happens if we move them closer to the pipeline name (to the right or underneath?) and set them apart from the instances themselves? Can we try a few more things here?

[tinozza]

Updating the status for the icon testing for manual gates: Test findings- Order of preference for the icons. 1) Avatar icon: Notes: Most users preferred this icon and were able to correctly identify the purpose of the icon. Only feedback was that at a dashboard level - the icon doesn't seem clickable. Couple of users preferred the person/man icon as well.

---

2) Existing Manual gate Notes: Few of the users preferred this icon - as they are familiar with the icon. However for new users, they were not able to identify this icon as a manual gate.

3)Play next /next track Notes: This icon was preferred as it seems indicative of the fact that there is an action associated with it and seemed clickable.( plus it follows the same style as the play/trigger and pause buttons in the pipeline tile.

---

[naveenbhaskar]

@eeluke , yes.. those four links are required. Initially I thought compare was not used by people, but there are few people who use that from the dashboard. As you mentioned it make sense to move the action buttons near to the pipeline name. here is the mockup

[eeluke]

@naveenbhaskar Thanks for your work. I think the action buttons are a little crowded now, but I like the positioning. We should also think about moving them up on the current dashboard tiles. Would just like to see more padding between and around them here.

As for the links, if we are 100% confident that all of those functions are needed on the dashboard view, then I will trust that. @arvindsv Is this a case where we could try to remove one (and put it one level down) and see if people complain or do you think we really need all of these functions up front?

[arvindsv]

@eeluke I think they're all needed. The one that's least used is "Compare". It doesn't need to be the first, but it's ok. History, Changes and VSM are all needed. As are the buttons.

[maheshp]

I still feel we should look at having some information bout the changes displayed with an option to view more without compromising on the number of pipelines to be shown . It looks like most of the things are hidden.

Also, does it makes sense to have icons over text as links?

[eeluke]

@arvindsv Thanks for your response. I wouldn't be doing my job if I didn't ask about removing things...so, do we think it's critical to have "compare" available up front or is that something we can move and test?

@maheshp I'm open to figuring out how to do this, but only if we think it's truly valuable to our users. @naveenbhaskar we could go with current design for now, but you can test alternates (with more change info available) with users?

[arvindsv]

@eeluke We can move it and see, but I don't know where else it makes sense.

[naveenbhaskar]

Hello all, some updates for the list view design. tried to keep the height of one row to the minimum. All pipeline level actions/items are moved to the header part and instance level to the bottom part.

[maheshp]

@naveenbhaskar few observations,

1. The instance is hyperlinked, guess it should not be.
2. The pipeline history icon is for each pipeline instance, wondering if this should be at each instance level or pipeline level.
3. Also, we would need a mockup to represent a locked pipeline

[arvindsv]

I'd prefer the text "History", over the icon, if possible. I would never realize it is the history icon.

[eeluke]

@naveenbhaskar Nice work. I like the new design for "more".

I actually think the action buttons should be directly to the right of the pipeline name and that the config gear should be aligned right (like previous mockups). I think that those buttons are most pertinent to user workflow.

Also, I feel alright about using a clock for history, BUT we also use it as an alert when a duration is too long. So, for now, let's keep it as a link here and then re-think it when we work on iconography as part of style guide.

[tinozza]

Updating the options for the list view here based on the feedback above: Option1:

1) the action buttons have been shifted to the left alongside the pipeline name. Some of the pipeline names can get really long and the position will shift based on the length. 2) History link has been shifted to pipeline level/ header part (configuration, pipeline error and action buttons). All pipeline instance related information is presented at the bottom part ( vsm, changes, trigger time, compare and stages) 3) Lock icon has been added to represent a locked pipeline.

Option2: 1) Config button alongside the pipeline name and error icon. 2) Action buttons aligned to the right. 3) options for history link position

[eeluke]

Thanks @tinozza for making these changes. A question and a comment: Question: Doesn't the pipeline name now link to the config page? If so, do we even need that gear anymore? Comment: My opinion is that the action buttons make more sense close to the pipeline name, but I do see that there won't be a fixed position for them based on length of pipeline name. Interested in what @maheshp and @arvindsv think...

History link should be aligned right. Lock looks good to me.

[arvindsv]

My preference would be to have the buttons in a fixed place, somewhere.

Also, remember that unlocking a locked pipeline is an action as well.

[eeluke]

Oh good point - let's make sure to let the user know that the lock is clickable (easy enough to do with some kind of hover behavior). Locking and unlocking by clicking on a lock is a pattern already used in lots of places/ways.

If we align the buttons all the way to the right, maybe we can style them to have more dimensionality and they won't get lost in the design? Of course, whatever style we give to them we would have to give to them on tile view also.

On Mon, Nov 6, 2017 at 2:56 PM, Aravind SV notifications@github.com wrote:

My preference would be to have the buttons in a fixed place, somewhere.

Also, remember that unlocking a locked pipeline is an action as well.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gocd/gocd/issues/3872#issuecomment-342316180, or mute the thread https://github.com/notifications/unsubscribe-auth/ABc3JK8DZWc7lGBrZx_hrWc_83BpPQa7ks5sz46OgaJpZM4PcBPj .

[tinozza]

Question: Doesn't the pipeline name now link to the config page? If so, do we even need that gear anymore?

Not really, we were planning to take the users to the pipeline details page on clicking on the pipeline name. The first stage and the first job within that stage will be open by default in this view. And yes, we can change the design of the action buttons to make it more prominent...
We will be working on the tile view next (have to add the changes bit in this view as well). Will update the progress on the same..

[eeluke]

Got it. Thanks for clarifying. Makes sense to me!

Emily

On Tue, Nov 7, 2017 at 2:23 AM, Tina Vinod notifications@github.com wrote:

Question: Doesn't the pipeline name now link to the config page? If so, do we even need that gear anymore? No we were planning to take the users to the pipeline details page on clicking on the pipeline name. The first stage and the first job within that stage will be open by default in this view. and yes, we can change the design of the action buttons to make it more prominent... We will be working on the tile view next (have to add the changes bit in this view as well). Will update the progress on the same..

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gocd/gocd/issues/3872#issuecomment-342438849, or mute the thread https://github.com/notifications/unsubscribe-auth/ABc3JHe-JEXflXNhKijmQLfGKzmdRtnqks5s0C-SgaJpZM4PcBPj .

[cfontes]

Hello, this looks very nice.

Is it usable in any way? Are you guys in need of beta testers?

Cheers!

[naveenbhaskar]

Thanks @cfontes, we are still working on it and will be available soon. We would like to have few people for testing various GoCD features. If you are interested , can you please share your email id. my email is naveenb@thoughtworks.com

[gibsonm]

We are active users of GoCD, with > 500 hundred pipelines currently. I have been getting a lot of feedback from our developers related to desired ux features on the pipelines page. Things that you seem to have in hand (better filtering, views, ability to see just failed pipelines, etc). I'd be very happy to help test some of these features if you need extra hands. My email is mark.gibson@staff.bluematrix.com

[arvindsv]

@gibsonm Thank you so much! That would be very useful.

Current work is around the personalization views (#3842). @naveenbhaskar has uploaded the newest iteration of the design at https://github.com/gocd/gocd/issues/3842#issuecomment-416206837

The experimental installers available at https://www.gocd.org/download/ should have the current state of it and over this week, you should see it change to incorporate these latest designs. We would love to hear feedback about it there.

If you don't mind, one of us might reach out to you occassionally for feedback. It would be great to get your opinion, if you have have the time and inclination. Thank you!

[cfontes]

@arvindsv Would be super nice to have a experimental tag on https://hub.docker.com/r/gocd/gocd-server/tags/

[bdpiprava]

@cfontes -- Expermental builds are available at https://hub.docker.com/r/gocdexperimental/gocd-server/

[stale[bot]]

This issue has been automatically marked as stale because it has not had activity in the last 90 days. If you can still reproduce this error on the master branch using local development environment or on the latest GoCD Release, please reply with all of the information you have about it in order to keep the issue open. Thank you for all your contributions.