Refinement of the new modern icon style

[Michael5601]

As the community poll is finished now I want to refine the icon style that will be used as a base for the new style guide.

Please see my comments to the results here.

[Michael5601]

If you agree we can focus on the Mono style with dual tonality (see Dual-Tone style) and icon enablement.
I also want to discuss the content in the Eclipse UI Guidelines to refine the chosen style.

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

[BeckerWdf]

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

I don't really know what the real cause is. Maybe it's just some kind of "padding" so that there a bit of space when icons are next to each other. Maybe we can make an experiment and try out what happens if we don't leave these 1 pixel rows / columns empty.

[Michael5601]

One such example from the Eclipse UI Guidelines is the centering of the icons. Is there a reason why icons are not centered but have one pixel space on the top and left side?
If we can avoid this for the new style this would be great as we already have problems with this as seen here. This would also increase the size of the icons because we can use the whole 16x16px space.

I don't really know what the real cause is. Maybe it's just some kind of "padding" so that there a bit of space when icons are next to each other. Maybe we can make an experiment and try out what happens if we don't leave these 1 pixel rows / columns empty.

Yes this is a good idea.

[Michael5601]

@IamLRBA if you want you can create a simple list of icon related requirements from the Eclipse UI Guidelines.

With this I mean a listing of things like Positioning, Color Palette etc.
We need a short information about how every point is done in the UI Guidelines. This way we can also find deprecated information in the UI Guidelines that can be fixed with a PR.
You don't need to go to deep for every point as we can just read it in the UI Guidelines ourselves. We only need a simple list with everything to think about and a short description. If you already have ideas you can describe your approach to the new icon style for the specific point of the list.

If you don't want to create this list and want to focus on something different instead, I will provide the list as soon as I find some time. :)

[Michael5601]

I just saw that the positioning of the icons (one pixel line space on two sides) is dependent of the type of the icon in the Eclipse UI Guidelines.

The following icon shows only 2 of 4 different icon types from which 2 have the same spacing. So in total we have the 1 pixel space on the top + left (toolbar icons), bottom + left (view icons + model object icons), bottom + right (perspective icons). If we don't find a good reason why the positioning should be done this way, I would strongly advise against it.

[IamLRBA]

@IamLRBA if you want you can create a simple list of icon related requirements from the Eclipse UI Guidelines.

@Michael5601 I did some digging and here's what i found.

Icon Design Guidelines for Eclipse UI

1. Positioning

Icons should align consistently within their designated spaces, particularly in tree views or lists. Misaligned icons create a cluttered appearance and reduce readability.

---

2. Color Palette

The Eclipse-style palette uses blue and yellow as base colors, complemented by green, red, brown, purple, and beige for specific functions or object types. Consistency in color choices ensures harmony across the UI while enabling differentiation between elements.

---

3. Icon Types

Distinctions exist between functional, representational, and navigational icons:

• Functional: Depict actions (e.g., run, stop).
• Representational: Indicate objects (e.g., files, folders).
• Navigational: Guide users through the interface.

---

4. Icon Size & Placement

Standard sizes are critical for clarity and consistency. Eclipse icons are typically designed for 16x16 pixels but must remain legible at various resolutions. Placement standards include spacing to avoid visual clutter.

---

5. Enablement States

Icons should visually indicate their states, such as active, inactive, or disabled. Techniques include using grayscale for disabled icons or applying slight opacity changes. This is crucial for user feedback and accessibility.

---

6. Overlays

Overlays provide additional contextual information, such as a small arrow to signify a shortcut. They should be clear and not obscure the main icon’s function.

---

7. Consistency

Icon design should adhere to established visual patterns to maintain a unified look and feel across the UI. Variations should be minimal and purposeful.

---

8. Accessibility

Icons must be distinguishable for users with color blindness or other visual impairments. Use patterns, shapes, and complementary design elements alongside color to enhance accessibility.

---

9. Prototypes and Testing

Before finalizing designs, test icons within the Eclipse environment to ensure usability in real-world scenarios. This helps refine the style guide and identify practical issues.

If at all you need further refinements or additional points added to the list, let me know!

[IamLRBA]

I just saw that the positioning of the icons (one pixel line space on two sides) is dependent of the type of the icon in the Eclipse UI Guidelines.

The following icon shows only 2 of 4 different icon types from which 2 have the same spacing. So in total we have the 1 pixel space on the top + left (toolbar icons), bottom + left (view icons + model object icons), bottom + right (perspective icons). If we don't find a good reason why the positioning should be done this way, I would strongly advise against it.

Thank you, @Michael5601, for highlighting this issue with the current positioning rules in the Eclipse UI Guidelines. I completely agree that the varying pixel spacings based on icon type introduces unnecessary complexity and could result in misalignment issues. As mentioned in previous discussions, I'd still have those same ideas as my thoughts and suggestions to address this:

Suggestions for Standardization:

1. Uniform Spacing

   • Apply a single standard for pixel spacing (e.g., 1-pixel space on all sides or no space at all) across all icon types.
   • This ensures predictable and consistent alignment regardless of the icon's context, reducing design complexity.

2. Context-Specific Adjustments

   • If specific icon types (e.g., toolbar icons) really do require unique positioning due to design constraints (As I am pretty sure our foredesigners who designed the guidelines sat in a similar discussion and had reasons for choosing that), we can document these adjustments explicitly as exceptions.
   • But the base rule should remain consistent to minimize unnecessary variations.

3. Testing Prototypes
   I'm glad you already mentioned this as a step in the near future so it can help us to evaluate their impact on visual clarity and alignment, particularly in dense UI components like toolbars, menus, and side panels.

Benefits of Standardization:

• Simplifies the guidelines, making them easier to follow for designers.
• Enhances visual consistency across the Eclipse interface.
• Aligns with modern UI/UX best practices, improving the overall user experience.

Let me know your thoughts!

[Michael5601]

Thanks for the list!
We can go trough every point of the list and discuss it.
I think for Positioning we have the same opinion that we should stay with a no-space rule. As said we have to test if this leads to any complications.

The second point from the list is Color Palette. My idea for this is that most icons will be monochromatic as they don't need a visual indicator. But some icons for example Actions like the debug_exc icon should be fully colored monochromaticly (in this case green) or dual-toned like I presented it for the pin_editor in the poll. The colors for this indications can for sure be derived from the current color-code.
For example:

• The color for interfaces is purple in the UI Guidelines so the visual indicator for dual-toned icons should be colored purple if the icon is connected to interfaces.
• An icon to stop the execution should be fully red in one single red tone. Here we don't need dual-tonality.
• Icons like the search icon can remain in the default color without any dual-tonality. The default color should be gray as presented in the poll. The gray I used for the light theme is #6E6E6E.

I`d say we focus on the light theme at first as all icons can be easily "recolored" automatically after they are designed monochromatically. The design is the hard part for this initiative.