Skip to content
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

Update card selector component and sidebar design #7932

Closed
gtsiolis opened this issue Jan 31, 2022 · 5 comments · Fixed by #9002
Closed

Update card selector component and sidebar design #7932

gtsiolis opened this issue Jan 31, 2022 · 5 comments · Fixed by #9002

Comments

@gtsiolis
Copy link
Contributor

Problem to solve

The current card selector component can feel a bit distracting due to bordered layout. This becomes for visible with the growing list of available editors.

Proposal

Following the designs in #7852 (comment) and the design exploration happening in the backstage for #7564, here're some early design drafts how we could update the card selector component design. This can affect the editor selection, as well as, theme and plans sections in user settings. Cc @akosyakov @loujaybee

BEFORE AFTER
Editors Editors-1

To this extend, we could also include the version as mentioned in #7852 (comment).

Using stable version Using latest version
Editors-2 Editors-3

TBD (To be discussed)

@gtsiolis gtsiolis added type: feature request New feature or request user experience component: dashboard team: webapp Issue belongs to the WebApp team labels Jan 31, 2022
@gtsiolis
Copy link
Contributor Author

gtsiolis commented Jan 31, 2022

To explain further this design approach and visualize the proposal, see below how this could help information hierarchy and overall UX.

Low fidelity design Low fidelity design in perspective Layer design
Editors Editors-1 Editors-2

@akosyakov
Copy link
Member

akosyakov commented Feb 1, 2022

To this extend, we could also include the version as mentioned in #7852 (comment).

I really like to see versions too :) There are actually numbers for insiders and EAP too, i.e. 1.64-insiders, eap-213.103.14 and so on

@loujaybee
Copy link
Member

loujaybee commented Feb 1, 2022

I think this is a (seemingly) small but really important issue—thanks for raising @gtsiolis !

  1. It gives both desktop and browser more of a feeling to the user of equal weighting in Gitpod, which aligns best with having an orthogonal product [1] and our IDE / product ambitions! 🚀
  2. This will resolve inconsistencies with selecting early access/insider versions for both VS Code and JetBrains IDE's [1]

A couple thoughts on current design:

  1. The black square is not entirely obvious to me as a selected state, is there any way we could make the selected state stronger/more obvious, somehow? Maybe reintroducing the tick, or some other visual cue?
  2. "Latest release" doesn't necessarily signify to me that the version is potentially unstable. We should review the copy text, and/or add some disclaimers. But, of course the challenge is to have copy text which applies to both VS Code Insiders, and also JetBrains EAP without overloading the UI.

@gtsiolis
Copy link
Contributor Author

gtsiolis commented Feb 1, 2022

Thanks for the feedback, @loujaybee!

The black square is not entirely obvious to me as a selected state

This is currently an early design focusing on creating better information architecture as described in #7932 (comment). We could probably improve the colors, keep the thick border or the tick, etc.

"Latest release" doesn't necessarily signify to me that the version is potentially unstable.

Completely agree. UX copy is also work in progress and you're right about the version is potentially unstable. We should probably include a hint about this which could apply to all editors above.

@gtsiolis
Copy link
Contributor Author

Picking this up to finish the sidebar menu color changes. Card component and copy updates are taking place in #8783, see also #8786 for the single option for editor selection.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

Successfully merging a pull request may close this issue.

3 participants