Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Make workspace stopped state more obvious #3025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Tracked by #3042
ketang opened this issue Jul 18, 2022 · 12 comments · Fixed by #3130
Closed
Tracked by #3042

Make workspace stopped state more obvious #3025

ketang opened this issue Jul 18, 2022 · 12 comments · Fixed by #3130
Assignees
Labels
design needed Request for more beauty site Area: frontend dashboard

Comments

@ketang
Copy link
Contributor

ketang commented Jul 18, 2022

I have to hunt for clues too much to tell that my workspace is stopped. The explicit status looks just like all the other text, so I'm otherwise left to infer based on the presence of the "Start" button or seeing that the last job was a "stop" job.

I think the workspace status is one of the most important pieces of information on this page, and I think its presentation should reflect that. I think it should be more colorful and appear at the top left near the workspace name.

image

@BrunoQuaresma
Copy link
Collaborator

I totally agree with you. I have some ideas in mind and I will post them here when they are done.

@BrunoQuaresma BrunoQuaresma added the design needed Request for more beauty label Jul 19, 2022
@BrunoQuaresma BrunoQuaresma self-assigned this Jul 19, 2022
@kylecarbs kylecarbs mentioned this issue Jul 19, 2022
20 tasks
@BrunoQuaresma
Copy link
Collaborator

@ketang what do you think about these?

Stopped
Running

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

I think this is a significant improvement. A few notes:

  • do we need the "agent" column for a stopped workspace?
  • the kubernetes_deployment in the mock shows Connected; is that just a mock artifact?
  • I feel bad saying this to someone named "Bruno," but I think brown is rarely an attractive color on computer screens
  • What do you think of a border, background, and/or text highlight on the workspace name to indicate status?
  • the pills holding status, organization, and user name are all similar in appearance, which makes it harder to tell which is which.
  • this also implies they're of equal importance in the UI, but this page is usually going to be viewed by the owner, who presumably knows their name and organization

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jul 20, 2022

do we need the "agent" column for a stopped workspace?

No, I think we can remove it.

the kubernetes_deployment in the mock shows Connected; is that just a mock artifact?

Yes 😆

I feel bad saying this to someone named "Bruno," but I think brown is rarely an attractive color on computer screens

lol np, when you say "brown" are you talking about the stopped status color? I don't link it too much as well but since we are using a dark theme, the best is to use a darker yellow as the background for the chip.

What do you think of a border, background, and/or text highlight on the workspace name to indicate status?

I can try some options and see what looks better

the pills holding status, organization, and user name are all similar in appearance, which makes it harder to tell which is which.

I agree, I will see if I can solve this.

this also implies they're of equal importance in the UI, but this page is usually going to be viewed by the owner, who presumably knows their name and organization

I agree 2x

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

when you say "brown" are you talking about the stopped status color?

Yes, exactly.

@BrunoQuaresma
Copy link
Collaborator

  • I tried the borders and font color and didn't work well honestly, but if you have strong feelings about that, could you mock something? So I can better understand how you see it
  • I made two versions, one with the badge on the side of the title and another, on top of it
  • I removed the pills from the secondary info like template and owner

Running - Horizontal
Running on Top

I liked both, but I feel the "top" version works better since it is the first info the user sees on the page 🤔

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

I tried the borders and font color and didn't work well honestly, but if you have strong feelings about that

No worries. I was just brainstorming.

I don't have a clear opinion about the two alternatives you presented. I think they're both good. One thing that I do observe is that the second mockup, with the status above the title, is that it results in a third, otherwise empty row, which may not be ideal. However, that's a smaller detail, and I think both are successful at achieving the initial improvement I was asking for.

@presleyp
Copy link
Contributor

@Kira-Pilot makes a good point in Slack that we don't know how long the workspace name will be, so putting the pill above is better. I also wonder if we could put the pill above and right-justified, so it's over the button that changes workspace status...but maybe that makes it less obvious to left-to-right readers like us.

@BrunoQuaresma
Copy link
Collaborator

BrunoQuaresma commented Jul 20, 2022

@presleyp I played around with the idea and I don't think it is bad... I kinda liked it, but it looks a bit "unexpected". Thoughts?
Running on Top

@Kira-Pilot
Copy link
Member

I like the top best but it doesn't look bad right-justified either!

@ketang
Copy link
Contributor Author

ketang commented Jul 20, 2022

Eye tracking heat maps indicate that top left is highest salience, so I think we should prefer that for this high importance datum.

@presleyp
Copy link
Contributor

Yeah I think top left is fine or if you go with top right I feel like it should be as large as the Stop button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design needed Request for more beauty site Area: frontend dashboard
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants