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 · 307 comments

Comments

@Tyriar
Copy link
Member

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 label Jun 22, 2016

@bpasero

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member Author

commented Jun 23, 2016

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

@bpasero

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Contributor

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).

@stevencl

This comment has been minimized.

Copy link
Member

commented Jun 23, 2016

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member Author

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Member

commented Jun 26, 2016

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

@Tyriar

This comment has been minimized.

Copy link
Member Author

commented Sep 21, 2016

@bgashler1 any update on this?

@bgashler1

This comment has been minimized.

Copy link
Contributor

commented Sep 21, 2016

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

This comment has been minimized.

Copy link
Member Author

commented Sep 25, 2016

The dark border looks particularly awkward on a grey background.

image

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

@bgashler1

This comment has been minimized.

Copy link
Contributor

commented Sep 26, 2016

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

@fabiospampinato

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Member

commented Sep 26, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Nov 3, 2017

/cc @chryw

@Tyriar

This comment has been minimized.

Copy link
Member Author

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

This comment has been minimized.

Copy link
Contributor

commented Nov 3, 2017

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.

@cerib

This comment has been minimized.

Copy link

commented Aug 14, 2019

I think the new icons are perfectly fine. Y'all need to chill a bit.
The internet always goes "ch-ch-changes!!" anyways.

@qt1

This comment has been minimized.

Copy link

commented Aug 14, 2019

@cerib

Thinking all is fine is one thing. Arguable - but this is your personal opinion and taste.

Telling other people to accept your way (and sneering while you are at it) ? Well, not cool at all.
Try maybe accepting that other people are entitled to other opinions and have limitations you may not have.

And, IMHO, this is the main point here. The new desige is really worse for poeple with certain visual limitations.

@Siccity

This comment has been minimized.

Copy link

commented Aug 14, 2019

This reminds me of the whole Blender 2.79 > 2.8 icon debate.

Comparison

asdf

Going from diverse, instantly recognizable and memorable to modern, flat and monotone.
Arguments could be made towards consistency and overall quality, sure. But this is a step in the wrong direction.

@schtauffen

This comment has been minimized.

Copy link

commented Aug 14, 2019

Please allow me to configure the expand/collapse icon (currently chevron) back to the little triangle. I prefer it greatly.

@ErikHumphrey

This comment has been minimized.

Copy link

commented Aug 14, 2019

I think the new icons are perfectly fine. Y'all need to chill a bit.
The internet always goes "ch-ch-changes!!" anyways.

I think most people here are using constructive criticism.

@Tsabrandon

This comment has been minimized.

Copy link

commented Aug 15, 2019

Loving the new icons! 😍

@mrmckeb

This comment has been minimized.

Copy link

commented Aug 15, 2019

The new icons are great, do you think you could help the LiveShare team update theirs? MicrosoftDocs/live-share#2601

@I0F

This comment has been minimized.

Copy link

commented Aug 15, 2019

Ok, so I appreciate the new design.

But the rounded edges on the Explorer and Extensions icons are not in inline with Microsoft's icon guidelines.

The rounded corners are for corners that are somewhat round in real life like the edges of the shell of the USB drive, but not the actual corners of the metal port.

59722433-844b4680-91d8-11e9-9428-2b36137b0f0a

The Explorer icon is 2 sheets of paper, I can't find any of the official Microsoft icons that have sheets of paper in them, to have round corners for the paper.

The Extensions icon, we can debate that, but if it is supposed to represent building blocks, legos have pretty sharp edges.

Plus it will be much easier on the eye.

@haydennyyy

This comment has been minimized.

Copy link

commented Aug 15, 2019

@Siccity

This comment has been minimized.

Copy link

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.

@misolori

This comment has been minimized.

Copy link
Member

commented Aug 15, 2019

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):

  • Update Octicons to match new icon style #76909
  • Provide library of icons for extension authors #74974
  • Update extension icons to match new icon style #77411
  • New notification icons are not very readable #78857
  • Code folding chevron icon is confusing #78024
  • Allow configuration of product icons #79130
@Hum4n01d

This comment has been minimized.

Copy link

commented Aug 15, 2019

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]

@misolori

This comment has been minimized.

Copy link
Member

commented Aug 15, 2019

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

  • Allow configuration of product icons #79130
@Hum4n01d

This comment has been minimized.

Copy link

commented Aug 15, 2019

Ah, sorry 😅 I missed that

@sarpik

This comment has been minimized.

Copy link

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)

@waynebloss

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 17, 2019

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

This comment has been minimized.

Copy link

commented Aug 17, 2019

I love the update. Thanks guys!

@guillaumep

This comment has been minimized.

Copy link

commented Aug 20, 2019

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

@ackvf

This comment has been minimized.

Copy link

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

@mattwoodnyc

This comment has been minimized.

Copy link

commented Aug 21, 2019

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

This comment has been minimized.

Copy link

commented Aug 21, 2019

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

@johnoscott

This comment has been minimized.

Copy link

commented Aug 22, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.