New icons in IntelliJ Platform 2018.2

One of the main goals of all the products we create at JetBrains is to increase our productivity as developers. And we’re ready to go the extra mile to achieve this.

This year IntelliJ IDEA turned 18. Through all these years, the IDE has got lots of nice features, and for many of them, dedicated icons were added. As a result, there are colorful icons all over the interface.

2017.3@2xMain toolbar in IntelliJ IDEA 2017.3. Almost all icons have at least two colors and complex shapes.

Such abundance of color and detail distracts from the main purpose of the IDE – working with code efficiently. To help maintain focus and productivity, a clearer UI was needed.

Two years ago we updated the Project tree icons. We made them flat and systematized the colors.

project tree@2x

Project tree icons in 2016.2 vs. 2016.3

The next step was then to improve the toolbars. There have been no significant changes in the toolbar structure since the earliest versions. If you compare the main toolbar in the different versions of IntelliJ IDEA, they are pretty similar:

retrospective1@2xMain toolbar across the different IntelliJ IDEA versions: 9, 11, 12, and 2017.3

Was it still necessary to have so many icons on the toolbars? Do most users actually click all these icons? To answer these questions, we collected usage statistics and used these insights to analyze the toolbars.

Icons-2017.3-heat-map-gifMain toolbar in 2017.3, reflecting the statistics of how many users usually click each icon. Green stands for ‘used by the greatest number of users’, while red means ‘used by the least number of users.’

We identified the icons that were being used by less than 5% of all users, and removed them. These icons will no longer distract the other 95% of users. With fewer icons on the toolbar, it’s also faster to find the one you need.

2018.1@2x2018.1 main toolbar with removed rarely used icons

In addition to removing the rarely used icons, we have also redesigned the remaining ones. The toolbar icons had not been updated since 2012 (for 6 years!), looking rather inconsistent and somewhat outdated.

There are about 4,000 unique icons in IntelliJ-based products. Structured and clear guidelineы for icons, therefore, was a prerequisite for a redesign. We’ve developed a guide like that, and here are some main points.

 

1. Style and forms

The common style unites several icons into a set. The unified style makes the icons cohesive and recognizable.

The majority of IntelliJ Platform icons are rather small — 16px x 16px. So we’ve settled on a flat geometric icon style with straight corners and edges. Flat icons work better and remain legible even at small sizes.

style@2x(1) Flat shapes over complex 3d forms; (2) straight corners over a mix of corners; and
(3) straight lines over curves.

At the same time, we wanted the icons to be simple. Clean and simple icons ensure readability and reduce visual clutter.

details@2xEach icon is reduced to its minimal form, without losing its significance.

The new icon shapes were designed using a grid and keyline shapes. The grid and basic shapes help make the icons visual proportions and placement consistent.

grid@2x
Grid and keyline shapes help make the icons’ visual proportions and placement consistent.

As the main drawing line, we use a 2px stroke. Using the same line weights across icons keeps the icons consistent.

stroke@2x(1) Consistent stroke width. (2) The thinner stroke can be used for subtle tweaks
to the legibility of an icon and for optical correction.

One of the subtasks was to unify a huge variety of arrows.

arrows@2xArrow icons, unified. Arrowheads of 90°, 2px body ends in a square stroke.
Orientation: horizontal, vertical, 45° or round.

In the old set, some icons used several versions of the same metaphor, while others had specific metaphors that could be replaced with a more generic one. We worked to unify the metaphors and merge any duplicates.

merge@2xDuplicated icons, merged. When similar icons are responsible for the same functions, things get confusing.

 

2. Colors

Many of the icons from the old set did not follow any guidelines on colors. The color was often just used for decoration.

We’ve rethought how we use color and systematized the color palette. Now, color is always used to convey specific information. For instance, green is used for start actions, and red stands for ‘stop’ or destructive actions.

colors@2x

 

Tool window buttons

The biggest controversy was caused by the tool window button icons. We’ve made all tool window icons grey.

toolbuttons_grey@2xNew tool window buttons

We reasoned as follows:

  • The tool window buttons appear along the whole perimeter of the IDE. The monochromatic icons make the environment less distracting and help you concentrate on the code.
  • All primary tool windows are more or less equivalent in terms of usage, so it does not seem that any of them should stand out.
  • Using tool window buttons is more about muscle memory: you are likely to remember the button position and just move the mouse to this place.
  • Unlike the toolbar icons, tool window buttons have labels to help identify them and their.

We’ve received some feedback about the new tool window icons. Many people inside JetBrains and external EAP users like the new simplified forms of the tool window button icons. However, some users have complained about the lack of color (IDEA-192025).

The color helped them find icons faster, and now it takes more time to read labels. The second problem is that tool windows from some 3rd-party plugins still have colored icons, and they are too bright in comparison to the new grey icons.

Thank you all for the feedback! We are still thinking about what version of icons should be used. If the new icons are not as useful for you, please use the “ToolWindow Colorful Icons” plugin that colors the tool window button icons.

toolbuttons_colored@2xNew tool window buttons with the ‘ToolWindow Colorful Icons’ plugin

We look forward to continuing this dialog and collecting more feedback. We will use your feedback to come up with future plans.

 

Summary

We have updated many of the icons in the most common toolbars, and we intend to continue these efforts.

summary@2xMain toolbars in 2018.1 vs. 2018.2.
A “Git” label was added to help new users find out that Version Control is supported in the IDE.

Organizing the color palette and paying attention to icon shapes helped us make the UI visually simpler. A clear interface now helps minimize distraction from the source code, thus improving your focus and productivity.

Please try the preview of IntelliJ IDEA 2018.2 or other IntelliJ-based IDEs and tell us what you think!

This entry was posted in News and tagged , , . Bookmark the permalink.

121 Responses to New icons in IntelliJ Platform 2018.2

  1. LC says:

    It was bad when you changed the project tree icons and it’s very bad now.

    “One of the main goals of all the products we create at JetBrains is to increase our productivity as developers.”

    You’re a UX Designer, not a developer.

    Since the subscription model was introduced your products are getting worse and worse, unlike their memory and cpu consumptions.

  2. Bas says:

    I personally really like what you guys been doing to the UI recently! But in a perfect world, there would be more theming options as I personally don’t like the colors in Darcula.

  3. TheBestPessimist says:

    Please don’t make the colors dull and flat. They don’t look as good.

    I really like having _at least_ a little bit of color on the buttons, even if muscle memory is what it usually drives me.

    • Alina Mishina says:

      Thank you for the comment! We do not remove the colors completely, just reduce the number of colors and use color to convey meaning.

      Could you please provide examples, where you’d like to add more color? You could comment the ticket https://youtrack.jetbrains.com/issue/IDEA-192025 and add images there, if it’s more convenient for you.

      • Udo says:

        IMO colors in icons work as an eye-catcher.
        It’s easy to find a colored icon like the blue-ish version-control or black-ish Terminal. Now all is grey in grey and it’s much harder to find the area/function I’m looking for.

        It’s like loosing a dimension – in the past icons differ by shape and color, now it’s only by shape.
        Using colors only by impact “positive”, “destructive”, “warnings”… is far too less because most of the icons are used to identify areas and functions which don’t fall into the categories above.

        I want the colors back :-)

        • Mark Lindhout says:

          Agreed. The colors were my go-to aspect of recognition as well. I feel lost now, since both the shapes have changed, and the colors are gone.

          At _least_ provide a way to revert back to the previous icon set if you’re removing it!

          I mean, this is my always-used, always-open software. You can’t just break it by saying inane crap like ‘Are users really clicking these icons?’.

          MEASURE, TRACK, and DECIDE, for god’s sake. You’re not some goddamn Berlin start-up full of Dunning-Krüger-victims.

        • Alina Mishina says:

          Hi, Udo!

          Please use the plugin https://plugins.jetbrains.com/plugin/10777-legacy-icon-pack-for-intellij-2018-2- if you want to return the colored icons back.

  4. K says:

    Perhaps instead of just “coming up with future plans”, also have interested parties **test** your new designs … Such as on https://usabilityhub.com.

    Widespread utilities need regulation.

  5. Maccimo says:

    Just tried plugin, mentioned in the post. They are completely useless.
    Only the few toolbar icons colored and no other icons fixed.

    So you just renamed “Idea 2016.2 Icons Pack” plugin and throw away all but few toolbar icons from them. Oh, and convert hundred-lines-of-code plugin from Java to Kotlin, of course!

    Damn, what really disturb me is the fact I’m forced to search for really working icon substitution plugin with *colorful* and *contrast* icons or stay with 2018.1 where above mentioned “Icons Pack” still works.

    C’mon, JetBrains, fire your marketing and UI/UX depts, they are enemies!

  6. Arnav Desai says:

    Was there any thought or a process given around maybe providing a single plugin which the users might extend/update etc. to create their own versions of the icons and also making it part of the theme so that the user could change the setup as to their liking based on their preferences.

  7. Josh says:

    I’m confused as to why people, under the banner of “productivity”, are complaining about changes to things one uses a mouse to click.

    If they truly cared about productivity, they might have tried learning keyboard-only equivalents to see if those were more efficient.

    • Charlie Hayes says:

      Having distinguishing colors lets one identify icons in ones periphery without having to focus on the icons or perform cognitive tasks to identify the meaning (by reading or understanding).

      Memorizing keyboard shortcuts puts a much higher burden on users than letting them discover features by looking around. Also, often times a user’s hand is on the mouse and thus using the mouse is more efficient than moving their hand over to the keyboard.

      Colors (or lack of colors) can also be used to indicate a UI element is disabled. There is no physical feedback for this using keyboard shortcuts, users would still need to rely on visual feedback.

      • halirutan says:

        I understand that people have different feelings about colored icons, but “using your peripheral vision to distinguish colors” is biologically unsound. You might want to read about the fovea centralis before making such claims. It is actually a tiny portion of about 5 degrees where you have foveal vision which means high resolution and colors. As I’m too lazy, I will quote wiki

        “The size of the fovea is relatively small with regard to the rest of the retina. However, it is the **only** area in the retina where 20/20 vision is attainable, and is the area where fine detail and colour can be distinguished.”

        Unless you are super-human, there is no way you can identify anything without actually focusing it on a moderately large screen. On my 33′ screen with IDEA in fullscreen mode.. no way that I can make out what happens in the project view when I focus on the center.

        Memorizing keyboard shortcuts is a pain. However, I’m one of those people who believe that I’m faster with it. There is a lot of fuzz about this, and I think it should be anyone’s personal choice but let me quote Jeff Atwoods anyway

        “I don’t think anyone would argue that learning keyboard shortcuts is faster than using the mouse to navigate and learn a program. Clearly it isn’t — it’s quite painful, as anyone who has ever been stranded at a Unix command prompt can probably tell you.

        However, as Tog himself notes, when the keyboard shortcut is already memorized and well understood, it’s a clear productivity win.”

        • Vojtěch Krása says:

          You are totally wrong. What you see is a composite of what you saw, the brain fills in peripheral vision.

          I think it is rather obvious that colors help, dubious is a claim that they distract.

        • Vojtěch Krása says:

          And on top of that, maybe you have a damaged vision because it is normal to see colors in the whole peripheral vision.
          https://biology.stackexchange.com/a/24514

          • halirutan says:

            For all those people who haven’t read the scientific publication linked in the stackexchange that Vojtech mentions, please go ahead and make up your own opinion.

            Think about, if identifying colored blobs with a size of about 7-11cm (!) in your peripheral vision on a uniform background can be compared to the highly complex situation on your IDEA screen. There, an icon is only (for me) 0.4cm large and is *not* uniformly colored. The colored parts are as small as 1mm.
            And with such small details, you need to take much more into account than only the fact that there are some cones in your outer retinal region.

            Important is that inside the fovea, each photoreceptor has its own bipolar cell and that you are near the optical axis of the lens where artifacts like aberrations are minimized.

            There is a lot more to say about this, but I don’t like the attitude of Vojtech. Since it seems that we cannot keep a civilized conversation, I won’t comment further.

            If anyone has further question, just google and reach out to our eye-research team. My opinion still stands and maybe we can find a better study with more than 10 participants that actually says something about differentiation of small color details at the periphery of your vision.

            • Vojtěch Krása says:

              I only disproved your statement that “using your peripheral vision to distinguish colors is biologically unsound”. No need to take it personally, but I am not the one who uses biological trivia to prove something in usability area.

              The truth is, that it is easier to distinguish a color of a small blob than to distinguish its detailed shape and its text. Of course, there are exceptions and it’s harder for some icons and easier for others.

              You also make it sound like we do not move our eyes or look totally elsewhere. Actually, if I take into account your data, 5 degrees is just fine to recognize a colored icon, but not enough for a gray one. So what does it tells us?

              I currently have ~50 icons with a single letter text in the bookmarks bar in my browser, I would have 50 more if I could have two bars. And I can tell you that it was a disaster when I accidentally switched Windows to colorless mode.

      • Michael says:

        “often times a user’s hand is on the mouse”

        you’re doing it wrong :-)

        Seriously, even though I would argue that you should never move your hands off a typing position… even if you only use the mouse one time once a year, you should get the icons you want. Vote for themes! And meanwhile, I should be able to hide the toolbar. :-)

  8. Charlie Hayes says:

    I agree with most of these comments; the colorless icons fly in the face of long-held rules on visual anchoring and peripheral identification.

    The UI doesn’t need to look like a pretty website; it needs to be efficient and productive.

    Did the UX team just ask users if they liked it or did they perform statistical analysis to see if users were able to accomplish the same tasks in less time?

    I wasn’t into the outline icons and odd shading change made a year or so ago anyway but the changes outlined in this post seem like a big backstep.

  9. The most shocking thing to me is that there are actually programmers who use IntelliJ that are *clicking* the *save icon*…

    Firstly: clicking?
    Secondly: auto-save?

    • Igor Santos says:

      THIS. EXACTLY THIS.

      Honestly (and probably being a bit pendant) I mostly don’t use the UI. Every week or so I’m learning a new keyboard shortcut, so the icons I’m mostly bored of are those on the project tree – which sometimes are hard to read and identify (why do INI files look like two spools??)

      I can understand why some people got upset with icon simplification and reduction of colors, but everyone must agree they were such a patchwork. It gives the overall UI a touch of care and more professionalism, to say the least.

      And if you’re afraid of changes… well, you shouldn’t be on IT in the first place :)

      • Alina Mishina says:

        Igor, thank you for sharing you experience and for the feedback!

      • Jan Schwien says:

        Please keep in mind that there are also developers out there which have more tasks than just coding. As a full time game developer I have to use a lot different tools over the day which are mouse only controlled. So its most of the time faster to stick to mouse input. (Like VCS, Find, Replace workflows)

    • Alina Mishina says:

      Daniel, for us this statistics was also quite unexpected, considering that auto-save is supported and now there are almost no applications with the save button. That’s why we still have not removed save button from the toolbar. We plan to improve it in the future versions.

    • Charlie Hayes says:

      I hit the command-s shortcut all the time (and to a much lesser extant the toolbar icon) to execute a save, knowing full well that it’s being auto saved.

      1) It’s a good habit to save, why break the habit even if its redundant for this one application

      2) Invoking the save action starts processes that otherwise wouldn’t start (or would but after a delay). For example, file watchers and remote file syncs

      • rober says:

        I understand you, I do the same when I’m working, for example, with sass in order to fire the refresh on the browser.

        But man! Clicking…

      • Alina Mishina says:

        We are not planning to remove the Save action and shortcut for it. I just speaking about the toolbar icon. The shortcut for this action is well known while clicking the icon on the toolbar is much slower.

  10. Romanow says:

    I think the best idea would be to provide icon packs and an option to customize idea icons easily. While I like the new icons from the design perspective I hate needing to re-learn the new icons and feeling dumb in the process.

  11. Cabot says:

    For me the best icons are the ones from version 9-11.
    They were easily recognizable.
    Now all the icons look same… flat.. I don’t understand this obsession of geometry. Yes I know rule of thirds and all this stuff, but managing 30° in open folder icon? Common…
    And I also vote for colorful tool window buttons. It’s much more readable/for better navigation, especially when you have 10 buttons…

  12. ADEV says:

    I don’t know why lot of hate in the comments, i wouldn’t approve them personally..

    anyways..

    I find the new set of icons really modern and fresh, good work! i really like them!

    I wasn’t fan of the all monochrome set, but i’m so happy you reacted quickly and fixed it, and even improved them

    Icons is always a hard question, everyone have their own taste

    I think the best idea is to indeed offer the ability to people to change icon sets easily, and for plugin creators a way to easily packages icon sets, maybe a new functionality for IDEA platforms ? Customization done by community, with a gallery to easily install what sets/themes/configs, this way everyone will be happy

    • Alina Mishina says:

      Thank you!

      It’s a good idea to provide ability to customize the icon set. We created a ticket: https://youtrack.jetbrains.com/issue/IDEA-194684. Please vote!

    • Charlie Hayes says:

      “modern and fresh” are not measurable. “modern and fresh”, are by definition, bad for usability. Users get used to icons, colors, and shapes and make connections in their brain on what they mean and when to use them. Changing these for the sake of change is a Very Bad Idea.

      Now if jetbrains performed a usability study with metrics, they might be able to prove the new icons lead to better outcomes. If that’s the case, that is what should be presented here.

      Designers throwing around weasel words, barely-descriptive words, or personal preferences should not convince anyone of the superiority of the new icons.

  13. Sergei Stepanov says:

    I really like what you been doing to the UI simple and nice! Thank you! And applause for your designers!

  14. Oleksii Vynnychenko says:

    Don’t like the change with monochrome icons at all. Color doesn’t distract me at all, it provides additional element by which I can distinguish buttons from each other (other is shape of icon). When I have a row of 15-20 buttons I need all of them to be color, so I can find one that is needed with peripheral look.

    Same goes for tool window buttons, I can have up to 10 in a row. Saying that I can read label is really bad from UX and productivity perspective – reading label takes longer than just “I need that blue icon for Nuget, there’re just 2 of blue ones on my PC: Docker and Nuget, and Nuget is always on the left from Docker on my PC, so it’s first blue icon from the left”.

    Not to mention that it’s common pattern to distinguish disabled buttons from normal: disabled are grayed out.

    I really hope you’ll reconsider and 2018.2 products will come with colored icons.

    • Charlie Hayes says:

      I agree with all the objective, evidence-backed reasons you have for why this change is almost definitely very-bad. It’s disheartening to see the other comments that are purely personal preference contrast with your science-based approach.

  15. Tano says:

    Please keep them in one shape, any shape you want.
    This is the 3rd set of icons that I see on the VCS toolbar since I use CLion.

    • Alina Mishina says:

      Hi Tano,
      Sorry for the inconvenience. Yes, the VCS icons changed several times in the last years. It was rather hard to come up with metaphors for these icons as they are rather abstract. We performed a usability test of the new VCS icons and I hope we won’t change them for a long time.

  16. Jan Schwien says:

    I understand the point but I feel the current icons are just perfect for my perspective.
    maybe you should go with optional settings:
    – standard
    (love it)
    – flat with color
    ( I could live with that but don’t like it)
    – one color like grey
    (A total no go for me since I work color based not icon shape based … I find that out after my favorite game Eve Online changed the icons to gray … it totally killed my entire user experience.)

  17. Iivari Mokelainen says:

    Print and high-dpi designs for small “72dpi” icons… “Consisten stroke width” – are you guys really saying that something as minor as inconsitent stroke width was slowing down of using the IDE? How do you guys not understand – you don’t need to make the IDE beautiful, you need to make it __functional__. Please hear us.

  18. Pim says:

    I’ve hidden every toolbar and icon as much as possible and find my way around in the IDE using keyboard shortcuts mostly :-)

    I really like the new style though. It feels more consistent and fits nowadays style better in my opinion.

    Wether they are coloured or one grey colour should be an option, so the theme feature is a nice one :-) I might switch in the future when I get bored.

  19. Thierry says:

    I’ve been using IntelliJ IDEA for many years now and it’s UI is something I particularly appreciate for many reasons.

    Speaking about UI is always a tricky topic as everybody has it’s own preferences and tastes. I used the Darcula theme when it was released and was pretty comfortable with it. But since a year ago, I use the classic theme again. Why ? A matter of taste I guess. Or maybe I find it visually easier to use ? Tastes evolve, it’s as simple as this.

    Speaking about UX, in my humble opinion, IDEA’s one is one of the most advanced one I know. What I particularly like is that it’s clean and smart. I feel it’s focused on productivity because icons I need are quickly accessible and those I don’t are usually accessible through a contextual menu or the within the menu bar.
    Regarding cleaning the toolbar of less used icons, I totally get the point because I clearly don’t want to search an icon, I want to find it quickly. It’s a thin nuance but there’s one. And the IDEA UI typically helps me in this.
    Also when the tree view was redesigned I felt a bit lost and found it a bit unclear. I remember myself asking why it was redesigned. And the more I used it the more I liked it. My habits were a bit changed but I got new ones and now that I’ve « accepted » those changes, I find it pretty natural.

    Moreover as a developer, I heavily use shortcuts which are for me quicker than having to take my mouse, point and click on an icon. To be honest I think the only icon I use regularly is the “Run” one on the right of the configuration list because I have many configurations and being already in that area of the screen I click on it. The other icons I can use are in a particular context (VCS, breakpoints, …) but their usage frequency is not that high.

    Icons like the “Project Structure” and “Search Everywhere” on the right of the toolbar are totally useless for me. I think I have almost never used them (I go in the menu instinctively for this, I don’t know why).

    To be honest and to conclude, other IDEs like eclipse and NetBeans (I have used both) tends to provide a dark theme as IDEA does but it’s not enough to seduce users. IDEA remains the most simple for me in term of usage, efficiency and clarity.

    UX and UI designers at JetBrains are very talented in my opinion. Changing a UI is very risky as it depends a lot of the tastes and feeling of everyone. But I must admit I like when designers challenge themselves and take risks by changing a UI, a behavior, a feature because they believe that change could change developers’ experiences and increase their productivity. That’s why we call innovation and that’s exactly what they do.

    To all UX and UI designers: a big shout out and congratulations for your hard work! Keep up your amazing job, I love it! Cheers!

  20. DZ says:

    Please spend your time fixing real defects, an icon bar that most people don’t use and in face is turned *off* on a default install really isn’t a good use of time when YouTrack is filled with more pressing defects.

  21. Daniil says:

    I find it really hard to distinguish between buttons on a panel with the new icons. Color was really helping. I think icons in one group should have different colors, regardless of their semantics

  22. Dmytro says:

    If I’m one of the 5 % who used copy/paste buttons on the toolbar, is there any possibility to add them now manually?

  23. John Florian says:

    I’m only looking at this page rather than a proper build, but in the section on arrows the arrow on “import” seems utterly backwards to me. The L-shape reminds me partly of a box and if the arrow is pointing away from that box that suggests export, not import. Also, compare this with the the one for “pull” which points down and left. I’d think pull/import should be parallels and opposite of push/export.

    Overall though, I really like what you’ve done. Reduction that’s not taken too far is great refinement, even if it will impose minor temporary inefficiencies while the relearning takes place.

  24. Sven says:

    Well done! The UI looks much fresher and modern now. And I really don‘t had an problems finding any buttons. Also like the neutral tool window buttons.

  25. Jigal van Hemert says:

    Just my opinion:

    Contrast
    =======

    Contrast is rather important in recognizing an icon. It can both be black/white contrast and colour contrast.
    Gray icons on a lighter gray background is low contrast. Especially as gray is commonly used for disabled items the contrast between gray (icon), medium gray (disabled) and light gray (background) is not enough.

    Contrast between colour can be seen in the Project tree icons. Almost all of the new icons have a reduced contrast making it actually harder to recognize them even with the “systemized” colours.

    Style and forms
    ===============

    A shape must recognizable. The flat pin icon doesn’t look like a pin. The “bug” icon isn’t shaped like an insect any more.

    Which brings me to icon language. Using homonyms has always been a bad thing in icons. “Bug”, “link”, and so on are clear for English speaking people but the rest of the world has no association between a part of a chain and a ‘link’ to a website.

    Unifying the arrows is a bad thing. Arrows are used for many meanings and now it gets more confusing. “back” and “previous” are usually arrows that point to the left (intelij uses up for previous) but the actions are completely different and justify using different kind of arrows. “Install” and “Download” have the same icon with only a tiny white dot as the difference. The new “sort” icon has harder to read characters.

    The “exit”-icon is also a hard one. Most people use either an open door or a shape with the arrow point outside the shape. I would use the latter.

    Shapes must be recognizable. The icons are very small (can’t we have larger icons for high resolution screens?) and then suddenly “pull” and “commit” almost look the same (look at the Main toolbar of 2018.2).

    Colour
    ======

    Because not everybody can see colour in the same way colour should only be used to support the meaning of an icon not as a essential part of the message. The idea of using red for destructive/negative actions and green for positive actions seems nice but leads to strange situations. Why is the “stop” icon red? No real-life device puts colour on pause, play, stop, fast forward, rewind buttons, only red on the record button because that really destroys something.
    Other than for the status icons the colours in the palette can be freely used as accent colour. Different shades of the colours can be used to add some detail (especially if you use vector based icons on high resolution devices).

    Tool windows buttons
    ====================

    Tool window buttons are weird. Why have an icon and text? If the text is needed to explain the icon then the icon was bad in the first place.

    • Alina Mishina says:

      Hi, Jigal!

      Thank you for the detailed comment. Please find my explanations below:

      Contrast
      ====================

      The new grey toolbar icons are darker than the old icons. The icons contrast ratio is 4.3 – 4.9 :1 for different themes. While the value recommended for the text by WW3C
      (no specific guidance for icons) is between 3:1 and 4.5:1. The previous icons ration was not bigger than 3.6:1.

      The new icons are rather dark, so the difference between enabled and disabled states is significant.

      Shape
      ====================

      The “pin” icon has not changed the shape significantly. The shape repeats the silhouette that was before.

      The “bug” icon is used for debugger, and it’s a common metaphor that already used in many IDEs. The icon is recognisable, while at the moment it does not matter from which language it comes. The same for example for “play” triangle icon, that comes from the tape decks where triangle points to the direction in which the tape will move. At the moment many people do not know this meaning, while they understand what the icon means.

      Arrows. In IntelliJ “previous” arrow is used to go up and down through the search results or changes in Diff view. So it’s logical that it points to the top. Also, the arrowhead for navigation arrows is not a filled triangle as for others. It helps to distinguish them.

      Install and Download icons are very close by the meaning, so it’s ok that they have similar shapes. Also, these icons have different colors and they usually appear in different contexts.

      Exit icons: yes, I agree that the shapes you described are more common. We left the shape close to the one that was used before, not to break the habit. I hope we will update it in the future releases.

      Regarding size: you can change the default font in Settings | Appearance & Behaviour | Appearance. The toolbars and icons will become bigger accordingly. If you want to change only icons size, please feel free to create a ticket in our tracker: https://youtrack.jetbrains.com/

      Color
      ====================

      Stop action in IDE is destroying in comparison to the player. In the player, you can press stop and start, and the process will start in a moment. While in the IDE the process restart can take much more time.

      Tool windows buttons
      ====================

      For tool window buttons the icons + label is used to make the button bigger, so it’s easier to aim and click it. The icon plays here a secondary role: to separate the labels in the buttons stripe and help together with a label to find the needed tool window.

  26. funivan says:

    Icons are awesome. Waiting for them in latest phpstorm EAP)

  27. Anabell says:

    I find it really hard to distinguish between buttons on a panel with the new icons. Color was really helping. I think icons in one group should have different colors, regardless of their semantics

  28. Eugene F says:

    Please don’t go that extra mile. Please stop changing icons every year.
    I will appreciate very much if you don’t change them at all for another 30 years.
    I haven’t seen any complaints about IntelliJ icon sets at all except the rants about every major icon change.
    Adapting to a new icon set takes a lot more of my precious time than whatever issues you assume there are with colors or shape.

  29. Alina Mishina says:

    We do no change the icons every year. The toolbar icons have not changed for more than 6 years.
    If you feel that you’d rather have the old design, you can install the plugin provided by our user: https://plugins.jetbrains.com/plugin/10777-legacy-icon-pack-for-intellij-2018-2-

    • Eugene F says:

      That is just not true. I clearly remember VCS icons change in 2017.

      And thanks for the plugin but it does not solve the issue. It only creates another issue. I have a large team and some people do prefer the new icons while others prefer the old icons. But developers often do pair programming on the same machine and these icon differences introduce extra context switching.
      For the same reason “you should use hotkeys anyway” argument doesn’t work either. People have different hotkey setups and when you switch from Mac to PC or Eclipse to IntelliJ keymap you just have to resort to GUI icons and when those are different too people just get stuck.
      Even without the plugin I already see this source of frustration between people who use EAP version and people who stick to releases.

      Please understand that I actually like the new icon set and its overall consistency. It is definitely an improvement but it comes at a cost and does not actually solve any major problems but creating new ones.
      If you would spread this change over years and switch a few icons every minor release it would be percepted differently. But this is a big bang change and it has a huge impact on many users.

      Also please note that being 6 years old is not a defect either. Try switching the traffic light’s colors. I’m sure a lot of people will appreciate.

      • Alina Mishina says:

        Yes, we updated the VCS icons several times, as we tried to come up with better metaphors. While most of the other icons did not change.

        In contrast to traffic light example, we do not change the colors for common metaphors. The same is for icons metaphors, we try to keep the shapes close to the current ones, just simplify them.

        If we change several icons per release it will take too much time to update them all. We still have lots of icons to update. I understand the problem with inconsistency you described. But the same will happen if we update icons step by step. It seems that the problem could not be avoided and it will decrease when 2018.2 is released and most people switch to it.

        Sorry for the inconvenience.

  30. Hans says:

    Since there’s always the problem of the loud minority, I just want to say, I really like the new design and icons! :)

    • Maccimo says:

      “Loud minority” talk not about “design”, but about serious usability degradation and counterproductive position of JB for this problem.

    • Alina Mishina says:

      Hi, Hans,

      Thank you for the support! It’s great that you like the new design.

  31. Thomas says:

    If you need a label (“Git:”) to explain what the following icons are for, you did something wrong with your design….

    • Alina Mishina says:

      Thomas, we do not add “Git” label to explain the icons. It was added to help new users find out that Version Control is supported in the IDE because some of the users do not know that.

  32. Vincent de Lau says:

    As a color blind person (common Deuteranopia) I have a hard time getting the information conveyed in color. I have not seen the icons in action yet, I’m judging based on the images included in the article above. I those images, the difference between green and red is almost invisible to me.

    I’ve voted for https://youtrack.jetbrains.com/issue/IDEA-192644

  33. Shelly says:

    The new icons are great however icons as of now were fine.
    I believe you’re doing this to improve something which is good.
    Awesome!

  34. Vladimir Okonechnikov says:

    Please, add icon colors option for all icons (not only ToolWindow) or just return old icons.
    I’m used to look for shape and color to quickly find the right icon. This update makes it unreasonably difficult.

    1. In future, please add this kind of drastic changes as an option and see if it’s popular.
    2. Focus less on icons and fonts but more on functionality. Better add multiple remote python consoles feature or usable rest client (i’m still urged to use Postman).
    3. “For instance, green is for start actions, and red is for stop or destructive actions.” – No. IDE is a tool for developers, not for people unaware what the icon does. Every click we make and symbol we type may have a destructive action.

    • Alina Mishina says:

      Hi, Vladimir!

      Thank you for the feedback!

      1. Please use the plugin if you want to return to the old icons set: https://plugins.jetbrains.com/plugin/10777-legacy-icon-pack-for-intellij-2018-2-.

      2. The designers were more involved in the icons update than developers. So these changes did not affect the work on other features.

      3. We also have lots of new users, so it’s not clear to everyone what each icon means. Also, not all icons are destructive, for example, different groupings and sorting in trees. You can just click the icon once again and return to the prevoius state.

  35. Jacob says:

    I definitely appreciate the work, but the color icons are a must for someone who doesn’t have the greatest vision. In other applications, I can just make the toolbars larger, but I don’t want to do that in my IDE because I need more room for the code (which is in a larger font).

    Colors are really helpful to find those buttons, so I’ll probably be using that plugin that adds them back in.

  36. cug says:

    I’m writing just to put some weight on the other side, as the people who don’t like the changes are vehement in their arguments.

    Colors now have meanings – that is good.
    All icons now have a determined size and use 2px stroke, that brings consistency – that is good.
    Icons now scale better – that is good.

    I welcome the new colorless toolbar change. I kept toolbars hidden specifically because it was too distracting. Now both grey and colorful options available – that is serving all people satisfied before + people like me = more people – that is good.

    Icons have changed – that is bad. All change is bad to the people who learnt their meaning and now they need to hover over the icon to learn what it means.

    In an ideal world looking at the icon alone will tell you what it means, but in reality the meaning needs to be learnt. The floppy disk meant floppy disk until you learnt it meant save, and now you know it. (and you don’t use it)
    The new debug icon will be all right after a couple of times you see it. Same with the pin icon. The value is the meaning and that’s in your head. Nothing changed there.

    Good job UI team. The IDE is getting better IMO with every version you introduce changes. More beautiful when first seen? Not to me. More simple and conveying more meaning? Yes yes, beauty comes from that.

  37. Jakob says:

    I dont like that majority of icons are gray, it makes it seem as if the functionality of button is disabled. 2018.1 were much better.

    • Alina Mishina says:

      hi, Jacob!

      The icons are dark gray, and the difference between enabled and disabled states is significant. The contracts ratio is 4.3 – 4.9 :1, bigger than it was before. Could you please provide exact examples of the toolbar or menu where you mix enabled and disabled icons?

  38. agata says:

    I will definitely use “Tool window color plugin”. For me colors are really helpfull to find what i am looking for in the toolbar. Eg i somehow remember that “version control” had some blue icon ( i do not remember even how it looks like, just remember that it is blue). So when I need version controll i look down and try to find the blue icon :)

  39. Campus says:

    All this gray is really depressing. In addition my brain at least has been trained over the years to treat gray icons as indicator for a disabled function. On top of that they just look like garbage when being hovered in the menu for example.

    What is this hate of UX ppl against color about? Color is information and more information is good.

    • Alina Mishina says:

      Hi, Campus!

      Thank you for the feedback!

      The problem with icons on hover also was with the previous icons set. We are aware of this problem and hopefully will find a solution in future releases.

  40. Gary Bartlett says:

    Is it possible to access the standard (new 2018.2) icons when adding new actions in the Menu & Toolbars setting? If you press the “Edit Action Icon…” button, you are only presented with a dialog that allows you select an external icon file, rather than a ‘standard’ icon. Alternatively, are the embedded icons available in some folder, or are they available for download separately?

  41. David Gilbertson says:

    I’m a fan. Great work.

  42. Dave Stewart says:

    Might also be a good time to look at some of the context menus, which are a little randomly-ordered sometimes.

    • Alina Mishina says:

      Hi, Dave!

      We are planning to rework the main menu and menu in the editor, to group options and sort them more logically. Do you have other examples of the context menus that are randomly-ordered?

  43. Richard Richter says:

    I’d be curious how the productivity is measured. I understand clicks on toolbar (I’m not using full toolbar for that reason), but making all the icons grey is confusing at first – but you expect I’ll work faster because of that? Now I have to read more than just see the familiar icon with some colour. This relates mostly to panels around the window, I don’t have keyboard shortcuts assigned to everything, I liked some colours here and there – and boom, now I’m working on some oversized Android application.
    We’ll survive 10 more years with these and there will be a new hype in the name of productivity. Perhaps just barcodes instead of icons? It’s clean geometry after all…

  44. Cani says:

    The new debug icon and the commit icons are not self explaining in my opinion. The bug doesn’t look like a bug. The tiny feet and the feeler are hard to recognize. Especially on small displays it looks more like an egg.

    Further more the tick doesn’t associate with a commit. The old icon had three commit dots like the the git-scm.com icon at least. I would at least put dots at the ends and the angle.

    • Alina Mishina says:

      Hi, Cani!

      Thank you for the feedback! We have not received a feedback that the bug icon is hardly recognizable. It becomes more straight and less detailed than the previous icon, so it should work better in small sizes.

      We conducted a survey about the commit icon. The checkmark icon was the clearest for developers. Also, most of the people chose this icon as the best metaphor for the commit.

      The previous commit and pull icons have a big duplicated part with three dots, the different part was small and it was more difficult to distinguish the icons. We wanted to leave the meaningful part of the icons.

  45. Totumfacky says:

    How to bring back old icons (That before Webstorm 2018.2)?

  46. Huiming Zhang says:

    In the latest version 2018.2, the icons are colors dull and flat, I have to distinguish buttons/panels by texts.
    In previous version, I just take a glance at the color of icons to find the proper buttons/panels.

    The new icons are bad user experience for me.

  47. re: 2018.2;

    Change management failure:
    – offer, don’t *enforce*
    – nudge, don’t *shove*

    It’s not just you guys, lot’s of companies fail this when making arbitrary seeming changes. You may have all the metrics in the world to justify it, but all the user sees is “you broke my stuff, WTF!? *Rage*”.

    My productivity is hurt because I have to relearn my interface. Discreet colour-blob shapes act as visual anchors and i’m now a bit adrift. There’s an un-nerving difference in my experience. Yes, i’ll adapt, eventually, but until then I need to expend extra brain cycles because of aesthetic choices you pushed.

    Could you not have a one-time popup that says “look, new icons!” with an option to choose or decline and *keep* the old ones for existing features until we’re ready for the change? Shipping an icon set is trivial; I shouldn’t have to download a plugin that a user created to “fix” a “problem” you made.

  48. Charlie Hayes says:

    All the new icons look like they are disabled.

  49. Spencer says:

    Please, PLEASE do tests before making significant UX changes. Good UX = better productivity. We have too much eye strain as it is. Removing helpers to eye movement increases use and strain.

    I can look at the middle of my monitor and see in the periphery the PhpStorm icon, Spotify icon, Sublime icon. Why? purple, green, and orange. So when I actually go to click on them my eye/brain have to do little work to find them (even if I randomly move them around from their normal position!!!–that’s a powerful statement!).

    Simplify the icons? fine. But don’t remove the color eye “handles”!

  50. Petschko says:

    Why do every Program need to go into this Flat-Icon bull*…? I have drawing Software, where all Icons are grey, it really disturbs and slows me down, now finally I have this fun in your Software as well… It makes everything slower, you can use Color as indicator where stuff is, but it’s gone…

    Btw, when you have to write Git: before some Icons, these are not speaking for itself, you should change them to more self explaining ones…

    At least there is a Plugin to revert these changes, I do not like the changes. We are using an IDE and not a fancy XY Program to show how hip we are. We want work and this does not work with flat 1 colored Icons… Please give us the option to change back to older Designs

    I’m so glad when this Minimalistic/Flat-Design-Trend is over

    Please focus on other more important stuff, than making our UI always different

  51. Pingback: Что нового в GoLand 2018.2 - Новини дня

  52. Khaled says:

    I really dont like the new icons argh!

  53. Konstantin says:

    I don’t like new icons. The main problem is that most of buttons are gray, and it’s harder to distinguish them now.

  54. Michael says:

    I like the color and I find it very easy on the eyes and focused from any other editor out there for java, but I am fairly new to IntelliJ and I am unsure how to collapse the project structure using a keyboard shortcut on a MacBook Pro with the symbol that is provided when you hover it!

  55. Mike says:

    I like the new icons! To me they make the interface look more elegant.

Leave a Reply

Your email address will not be published. Required fields are marked *