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

Inconsistent weight and use of color in iconography throughout UI #8017

Closed
Tyriar opened this issue Jun 22, 2016 · 314 comments
Closed

Inconsistent weight and use of color in iconography throughout UI #8017

Tyriar opened this issue Jun 22, 2016 · 314 comments
Assignees
Labels
debt Code quality issues icons-product Issues for in-product icons ux User experience issues
Milestone

Comments

@Tyriar
Copy link
Member

Tyriar commented Jun 22, 2016

See images below of the various different icons across the UI at x2 with some comments. This is by no means exhaustive but contains the major icons:

/cc @bpasero

General comments

  • Since color is used so sparingly throughout the UI, it draws additional attention to the icons that feature red and green in particular. Clear output should have not have a particularly strong visual presence imo.

Explorer

  • Why is the folder filled in brown and not white?
  • Why does the collapse all button feature a blue -, why is it a different blue than the one used in the status bar?

image

Search

  • Why is the red x an inconsistent style with the x used elsewhere?
  • Why does the clear icon feature a different light gray than the other icons?

image

  • Why is there a dark border around these icons in particular?

Git

image

  • Why is the tick icon a different weight, why isn't it solid?

Debug

image

  • Why is the debug output icon so short?

image

  • Why is the deactivate breakpoints button feature a circle filled with black (vs transparent used elsewhere)

image

  • Why is the close all button filled so it's inconsistent with the collapse all?
  • Why does the close all button button have a black border when collapse all doesn't?

image

Problems

image

Editor

image

@Tyriar Tyriar added the ux User experience issues label Jun 22, 2016
@bpasero
Copy link
Member

bpasero commented Jun 23, 2016

+1, our icon set needs a champion that owns and fixes them. I would add on top that I was never a big fan of the icons we use in the activity bar...

@Tyriar
Copy link
Member Author

Tyriar commented Jun 23, 2016

@bpasero what in particular about the activity bar icons; size, style?

@bpasero
Copy link
Member

bpasero commented Jun 23, 2016

Yeah, activity bar could be smaller imho for what it provides. Basically all icons we use are pretty much 4 years old I would say, a general face lift might be cool to bring them all in sync.

@bgashler1
Copy link
Contributor

bgashler1 commented Jun 23, 2016

It so happens that the we have some new icons in the works that match the new Microsoft Design Language (cleaner and more modern icons that use strokes instead of heavy-weight fills).

@bgashler1 bgashler1 added the polish Cleanup and polish issue label Jun 23, 2016
@stevencl
Copy link
Member

Great points @Tyriar. I think with our recent discussions around panels, colours etc that we should look at a UI and UX overhaul. We've built up enough UX and UI debt as the product has evolved that we need to address it.

@bpasero
Copy link
Member

bpasero commented Jun 25, 2016

I must also admit that I am not a big fan of the recently introduced icons in the integrated terminal:

image

They do not seem to fit our other icon set at all. I also find the "Hide" icon questionable as one can easily confuse it with a dropdown menu.

@Tyriar
Copy link
Member Author

Tyriar commented Jun 25, 2016

@bpasero the consistency of the icons will be solved in time as @bgashler1 mentions this is the way we're heading (there may be 1 or 2 releases where they're inconsistent though). @bgashler1 actually came up with some pretty nice looking icons that featured a mini terminal (box around >) and +/- symbols in the top corner, the argument against these was that the most important part of the icons (+/-) was the smallest.

See #8018 for discussion on the new close icon.

@bgashler1
Copy link
Contributor

bgashler1 commented Jun 26, 2016

@bpasero I totally hear you on the consistency issue. What we could do is possibly get these icons ported into our old look (heavier stroke weight) to remain consistent while we await a new icon set.

@bpasero
Copy link
Member

bpasero commented Jun 26, 2016

I would be interested to get a look at the icon set when it is available 👍

@Tyriar
Copy link
Member Author

Tyriar commented Sep 21, 2016

@bgashler1 any update on this?

@bgashler1
Copy link
Contributor

I want to get to this, but the priority shifted to some other things first. Also there was a bit of speed bump with this which I can speak more in person about.

@Tyriar
Copy link
Member Author

Tyriar commented Sep 25, 2016

The dark border looks particularly awkward on a grey background.

image

https://marketplace.visualstudio.com/items?itemName=rebornix.nova

@bgashler1
Copy link
Contributor

@Tyriar this is a halo, and you are correct that it doesn't belong here. We'll be getting them out eventually.

@fabiospampinato
Copy link
Contributor

fabiospampinato commented Sep 25, 2017

IMHO, aesthetics-wise, the icons are the worst part of the editor, by far. They should really be taken more seriously, this issue is more than 1 year old!

Just look at the icons used for the "Output" panel:

screen shot 2017-09-25 at 20 26 51

Pretty much everything that could have gone wrong did: inconsistent shades of gray, style and shapes (X icon), the maximize/un-maximize icon doesn't properly illustrate it's function, the "toggle output scroll lock" icon seems taken straight from an iOS password manager or something, I prefer to hide it via some custom CSS than to have it displayed to me.

Also, the whole "enlarge on click" effect is pretty distracting, I cannot think of any other app that uses it. Just look at this and tell me if you find it pleasing to watch:

2017-09-25 20_50_52

@stevencl
Copy link
Member

Thanks for your comments @fabiospampinato. Unfortunately we do not have the capacity right now to address the issues with the icons. At some point we hope to, but as you have quite rightly pointed out, this issue is over a year old.

@Tyriar
Copy link
Member Author

Tyriar commented Nov 3, 2017

/cc @chryw

@Tyriar
Copy link
Member Author

Tyriar commented Nov 3, 2017

Something we should also do when tackling this is sharing the icon image files across components so we don't have multiple of the same image loaded into memory.

@fabiospampinato
Copy link
Contributor

Perhaps octicons should be extended with all the needed icons. This way they could also be used by extensions.

One, albeit minor, problem this would solve: I needed a refresh icon for one extension I made, and I wanted to use the same one VSC uses, so I had to find the actual file and embed it with the extension. If that icon ever changes my extension's icon will feel inconsistent. If it could reference to what VSC uses this problem won't happen.

The limitation of this is that all icons would have to be mono-colored, unless they are combined afterwards via CSS.

@hbjydev
Copy link

hbjydev commented Aug 15, 2019 via email

@Siccity
Copy link

Siccity commented Aug 15, 2019

Apart from my general dislike, here are a couple of minor nitpicks.

image

  • Expand/collapse is no longer consistent with collapse all.
    The icon for collapse all was consistent with the old square icon set for expand/collapse, but with the new chevrons their relation is not apparent anymore.

  • The folder icon looks more like a tab than a folder. This was previously made clear with the yellowish color that folders commonly have.

@miguelsolorio
Copy link
Contributor

Update

Thank you to everyone who's been providing feedback, we've been listening all week on here and on Twitter so we appreciate you taking the time to comment. There are some issues that have risen out of this and we've been trying to prioritize them so that we can address them soon.

In terms of the feedback about the icons being too thin/hard to see, we've passed this feedback to our icon team that works on the Microsoft Design Language (MDL) icons and they are working to address this.

Below is a list of the issues that have come up that we're actively tracking in case you are wanting to 👍 any (you can also see the full list of icons-product issue):

@Hum4n01d
Copy link

I know this was already posted earlier, but I'd like to request an option for (or overall switch) a filled in version of the new icons:

image

[image originally posted by @misolori earlier in the thread]

@miguelsolorio
Copy link
Contributor

@Hum4n01d please see my post update right above your comment:

@Hum4n01d
Copy link

Ah, sorry 😅 I missed that

@kiprasmel
Copy link

kiprasmel commented Aug 16, 2019

Can I revert back to the old icons whilst still getting the new updates?

I personally highly prefer the old ones over the new ones (specifically in the activity bar, others are fine), and the fact that this feature was not made as an opt-in is pretty nerve wracking.

I've seen #78748 (comment) and no, I do not want to roll back to a previous version.


#78748 (comment)

Sorry, we don't have a way for you to use the old icons without rolling back to a previous version.

C'mon people..


Edit:

I see potential in #79130 (comment)

@ghost
Copy link

ghost commented Aug 16, 2019

Hey guys, thanks for a great, free product but these new icons suck. There's no color in any of them... Why is that?

What exactly is the value of "unifying things" to us and why does unification mean removal of color?

@blundster
Copy link

Hey guys, thanks for a great, free product but these new icons suck.

I completely agree - MS please stop fixing things that are not broken!
With all that talk about diversity in teams and so on - you now need to unify things..
Please take into account that while it's a Microsoft product - it's also a community effort.
I must admit, that the team responsible for VS code has been listening to the voice of users and contributors so far, and that's part of the reason why vscode is so freakin' awesome!
I hope it will also be the case this time!
I don't want to stop updating this product as I did with macOS or Adroid.

@gwardwell
Copy link

I love the update. Thanks guys!

@guillaumep
Copy link

Changes like this will always leave some people unsatisfied. But I also personally love it! Thanks for the great update!

@ackvf
Copy link

ackvf commented Aug 21, 2019

What I don't like about the update is that all of the userland extension icons now don't match the new theme. Also, why are the icons smaller? Anyway, I guess I like the new update after all.
before | now
image image

@mattwoodco
Copy link

Reading this PR, I understand why they were introduced, but when you combine rounded-corners with very thin stroke widths, you make the user do a lot of work.

The trash can is blurry and split panel looks like a pillow:
Screen Shot 2019-08-21 at 2 44 44 PM

I'm not able to see the + in these first two icons:
Screen Shot 2019-08-21 at 2 44 54 PM

I would strongly suggest revising the icons so they render clearly on both regular and retina screens. Look into "pixel-fitting" techniques. Take a look at this fine post from 2012 by @dcurtishttps://dcurt.is/pixel-fitting

@ErikHumphrey
Copy link

ErikHumphrey commented Aug 21, 2019

After getting used to them a bit, most of new icons (sidebar, explorer) seem better overall.

@johnoscott
Copy link

I am a big fan of the new outline icons for this simple reason; they are more readable the same way the written character is.

@unixcow
Copy link

unixcow commented Aug 26, 2019

new icons are indeed harder to interpret at a glance, didn't have that problem with old ones

@spartanatreyu
Copy link

I am a big fan of the new outline icons for this simple reason; they are more readable the same way the written character is.

Depends on the screen, the lighting in the room and the person. The very fact that this is comment 309 on this issue (and this is one issue out of a bunch of related issues) should hint how many people are having problems with the new icons.

@KodyJKing
Copy link

KodyJKing commented Aug 27, 2019

I find the new activity bar icons harder to read. They also look pretty blurry for me. I use window zoom level -2 though.

@akaleeroy
Copy link

Not a regular user so I can't speak for all of the icons, but the prominent ones on the sidebar are now cleaner, and with the clutter gone it makes me feel more relaxed working in the editor for long stretches of time. 👍 Thank you!

@SupinePandora43
Copy link

"if it works, don't touch it!" - i think this caused tons of comments for "reverting old icons back"

@zzzorgo
Copy link

zzzorgo commented Sep 13, 2019

And here is my humble contribution to this topic. The old git-related icons looked clearer on a low density screens (the current ones are almost as dust particles over the screen). Also inconsistency of icons became worse.

vs-icons

@jletey
Copy link

jletey commented Sep 13, 2019

@zzzorgo The inconsistent icon that is in the screenshot belongs to the GitLens plugin. The GitLens icons have already been updated by @eamodio, and will be released very soon!

@vscodebot vscodebot bot locked and limited conversation to collaborators Sep 17, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
debt Code quality issues icons-product Issues for in-product icons ux User experience issues
Projects
None yet
Development

No branches or pull requests