[EXP] File Window Icons (struggling a bit)

[Mario]

As part of the ongoing IMatch facelift (for IMatch 2024/2025) I'm currently re-designing and re-creating the icons displayed in File Windows for bookmarks, dot, pins etc. as vectors.

I've already did several iterations.

The overall theme for the new icons in IMatch is clean-and-crisp, without effects like 3D and stuff like that. This gives IMatch a modern look and also ensures visual compatibility between the 'classic' IMatch user interface and the icons and styles I use for app-based features like the People View, Event View, Dashboard etc.

The icons used in File Windows are a bit special, since they have to work on all kinds of background, from very light to very dark to very visually 'rough'.

IMatch currently has two sets of icons for File Windows: 16 pixel and 32 pixel. The size is picked based on the icon size you have configured in the application settings.

Since the new icons are all vector-based, I wonder if I should size them somehow depending on the control font size? Or maybe on the width / scale of the thumbnail panels? Smaller panels get smaller icons (within reason). Any ideas or suggestions? On the other hand, simpler is usually better

Here is a screen shot of my current icon set. There will be some revisions of course, but I wanted you to have a look and provide feedback, hopefully. Don't tell me you weren't warned

[Tveloso]

The new icons look very nice!...(and I like idea of having them scale with the Thumbnail Panel size).

[sinus]

I am on the same boat like Tony: scale with thumbnail panel.

Looks very good to me, although for me the pins and dots are somehow difficult to distuingish - although they are on the left and right side, I know.

Maybe the point for me is the colour. If I scroll quickly through thumbs, I guess, I look more on color than on shape and then, I see only red and then is for me the danger, to mix them up. 

I to not know, how to change this, maybe the pins circles a bit smaller, and the "handle" slightly wider.

And a remark to the green globe (I think, it is a globe), if the icons are smaller, I can hardy see the white lines, maybe black lines would be better?

But as you wrote, you are in the process to change them, I am sure, at the end it will look fine.


But it could be, that nobody else but me has this impression - but at the end you will hear, what users think. 

[photophart]

I'm with Markus, the pins and dots are maybe a bit too similar. The globe probably needs different color lines, something contrasting, say...red? I rather like the others especially the new pen.

Mark

[Mario]

Next revision:

[sinus]

This looks to me much better! Very good. 

[Jingo]

I agree... these look good. 

While on the subject: do you think you might update the File Window Layout (Display/Editor/XAML engines) to allow for vector icons which also auto scale with thumbnail changes?  

[Mario]

The XAML support comes from a costly 3rd party toolkit I'd like to phase out. They don't support vector images in XAML.
I would love to replace XAML with standard HTML, for a lot more options. So far I could not find a solution for this but I'm still looking.

[mopperle]

2nd revision looks much better, especially the globe (GPS) icon. Regarding dots and pins: did you think about changing the shape of the dots, like square, diamond.. for more differentiation?

[Mario]

changing the shape of the dots, like square, diamond.. for more differentiation?

Not really. Dots should show like dots. And dots are always on the left, while pins are on the right. I doubt users often confuse these.

[jch2103]

I compared version 2 with the existing icons. The existing ones seem smaller (which I prefer), but the new ones seem 'fuzzier'(?). Otherwise they seem fine. Ability to resize may be an advantage. 

[Mees Dekker]

I also would like to have smaller pins and dots. Big ones obscure the thumbnail to much.

[sinus]

I guess, the examples here are those icons with 32 pixel. But Mario wrote, there is also a set with 16 pixel. 
If I understand this correct, users can choose from two different sizes. 

[Mario]

I guess, the examples here are those icons with 32 pixel. But Mario wrote, there is also a set with 16 pixel.
If I understand this correct, users can choose from two different sizes. 

The current version of IMatch has two sizes: 16 pixel and 32 pixel. You can choose the icon size E > P > Application: Icon size. As you assumed right, I've used the 32 pixel size for the screen shots, since this is the default for 4K screens.

The global icon size affects all icons, from File Windows to Filter Panel.

Since vector icons scale, I'm playing with the idea to make the icons auto-size, based on the width of the thumbnail panel.
For example, if I make the icon width 10% of the panel width, this is what I get for different panel sizes:



The minimum width is based on the control font, to avoid that icons become too small to see or click.

Another idea would be to allow the user to select a custom icon size (not only Normal and Large) globally.
Or to make the icon size part of the File Window layout settings, so the user can use 'perfect' icon sizes for each layout.

Comments? Suggestions? Ideas?

[Mario]

I've implemented my idea with a per File Window layout icon size and it works great.

The default height is 0, which means automatic. IMatch then uses an icon height of 10% from the panel width (as shown above).
The minimal height is set to 2/3 of the control font size (to ensure that the icons are visible and clickable) and the maximum height is 2 times control font height (maybe I'll make than 1.5), to not let icons grow too much.

This should work fine for 95% of the user base...
The other 5% can configure a custom icon height between 8 and 99 pixels - for each layout individually.

[sinus]

Sounds very cool, Mario.

Yep, I think, on this way most of the users will be happy - including me. 

[Uwe]

Hello,
I am new to Imatch and still in the test phase. And maybe there is the possibility of the setting and I just don't know it yet or it was discussed a long time ago finally. Question: how would it be to position the icons depending on the thumbnail in the course of the "redesign" - i.e. landscape vs. portrait mode? In this case, the icons would always be in front of the "neutral" background next to or above and below the thumbnail. Contrast problems would thus be obsolete. Because of the size, I would choose the vector version.
greetings, Uwe

[Mario]

To get this result, set the Stretch Thumbnails option to No in your File Window Layouts.




Most users prefer the thumbnail to be as big as possible, without an enforced border around it - which is why this setting is set to Yes by default.
Depending on how you work with icons and your personal preferences, screen resolution etc., one of the modes will work better for you.