Bug 435671 - Zoom icons should use magnifying glass iconography
Summary: Zoom icons should use magnifying glass iconography
Status: RESOLVED FIXED
Alias: None
Product: Breeze
Classification: Plasma
Component: Icons (show other bugs)
Version: unspecified
Platform: Other Linux
: NOR wishlist
Target Milestone: ---
Assignee: visual-design
URL:
Keywords: usability
Depends on:
Blocks:
 
Reported: 2021-04-12 18:18 UTC by Nate Graham
Modified: 2024-03-25 19:58 UTC (History)
3 users (show)

See Also:
Latest Commit:
Version Fixed In: Frameworks 6.1


Attachments
Existing zoom icons + new ones I've created for comparison. (80.88 KB, image/png)
2023-03-26 20:38 UTC, Philip Murray
Details
The 3 sizes, separated. (56.72 KB, image/png)
2023-03-26 21:22 UTC, Philip Murray
Details
All magnifying glasses are the same size now. (69.00 KB, image/png)
2023-03-27 19:02 UTC, Philip Murray
Details
V4 Zoom X & Y (23.89 KB, image/png)
2023-03-27 20:44 UTC, Philip Murray
Details
Other XY with actual axes at the top of this pic, but unclear in terms of zoom in vs out. (35.14 KB, image/png)
2023-03-27 20:48 UTC, Philip Murray
Details
v5: all arrows same solid stytle now (works better at 22px) and other minor fixes. (76.39 KB, image/png)
2023-03-27 21:29 UTC, Philip Murray
Details
Pix attached of some versions that hopefully work decently at 16 & 22px sizes. (80.01 KB, image/png)
2023-03-31 21:37 UTC, Philip Murray
Details
More of Zoom - In/Out - X/Y (21.72 KB, image/png)
2023-04-01 09:53 UTC, Philip Murray
Details
More of Zoom - In/Out - X/Y (added v7). (23.59 KB, image/png)
2023-04-01 11:40 UTC, Philip Murray
Details
Nate's idea + one where the plus symbol is external. (5.52 KB, image/png)
2023-04-03 16:21 UTC, Philip Murray
Details
16px with arrowed axes & external symbols. (3.20 KB, image/png)
2023-04-03 17:27 UTC, Philip Murray
Details
Pointy XY Circles (16px native). (4.60 KB, image/png)
2023-04-03 19:32 UTC, Philip Murray
Details
XY-Zoom-Drops (12.82 KB, image/png)
2023-04-03 19:44 UTC, Philip Murray
Details
Montage of 22px width (x), height (y), best fit (z) icons (33.97 KB, image/png)
2023-05-05 11:37 UTC, Philip Murray
Details
Montage of 22px width (x), height (y), best fit (z) icons. (46.36 KB, image/png)
2023-05-05 11:39 UTC, Philip Murray
Details
Updated montage. (52.87 KB, image/png)
2023-05-05 12:06 UTC, Philip Murray
Details
Original zoom icons vs my latest set (all using same magnifying glass size & unbroken circle) (40.63 KB, image/png)
2024-02-17 22:36 UTC, Philip Murray
Details
Same as before but with 16px versions included (45.93 KB, image/png)
2024-02-19 21:30 UTC, Philip Murray
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nate Graham 2021-04-12 18:18:23 UTC
These days, most zoom icons used pretty much anywhere take the form of a magnifying glass with a plus, minus, or equals sign in it.

However Breeze icons diverges from this convention, in an attempt to show a more literal depiction of a zooming operation. In my opinion, it doesn't really work to communicate the point, and also suffers by diverging form the common magnifying glass iconography--flawed though it may be.
Comment 1 Philip Murray 2023-03-26 20:38:40 UTC
Created attachment 157601 [details]
Existing zoom icons + new ones I've created for comparison.

Some zoom icons, as per Nate's comments I think the zoom icons might be clearer if the usual magnifying glass is used. At least for the basic zoom in/out ones, the others maybe not so necessary or maybe are clearer for complex use cases. But I made some drafts as per attached.
Comment 2 Nate Graham 2023-03-26 20:50:36 UTC
Oh, these are great! So much clearer! I especially like your take on `zoom-pixels`. That one looks really nice.

The magnifying glasses all having different sizes might not be ideal though. It would be best if we could make them all have the same size somehow.
Comment 3 Philip Murray 2023-03-26 20:54:22 UTC
Notes: there are 3 sizes of magnifying glass, there was a method to it:

1. Big ones (diameter=16px); For where there's something complex inside them. These ones have somewhat stubby handle due to space constraints, but I think it looks OK. E.g. zoom-pixels, zoom-2-to-1, zoom-original.

2. Medium (diameter=13px); Realistic handle length & enough space inside it to put a clear plus/minus symbol. E.g. zoom-in, zoom-out.

3. Small ones (diameter=9px); where there's something going on around it. E.g. zoom-previous, zoom-width, zoom-out-x.

The arrow heads are a bit difficult so, these are still WIP. 
The plain 'zoom' one is a bit unclear in the original, so I just made it an empty eyeglass.
Comment 4 Philip Murray 2023-03-26 20:55:13 UTC
The zoom pixels one is even better when smaller, it almost looks spherical, like a visual trick.
Comment 5 Philip Murray 2023-03-26 21:22:59 UTC
Created attachment 157602 [details]
The 3 sizes, separated.
Comment 6 Philip Murray 2023-03-27 19:02:06 UTC
Created attachment 157639 [details]
All magnifying glasses are the same size now.
Comment 7 Nate Graham 2023-03-27 19:58:19 UTC
Nice!
Comment 8 Philip Murray 2023-03-27 20:03:18 UTC
I'm not so sure about the X / Y ones, got some other ideas coming soon.
Comment 9 Philip Murray 2023-03-27 20:44:09 UTC
Created attachment 157647 [details]
V4 Zoom X & Y
Comment 10 Philip Murray 2023-03-27 20:48:18 UTC
Created attachment 157648 [details]
Other XY with actual axes at the top of this pic, but unclear in terms of zoom in vs out.
Comment 11 Philip Murray 2023-03-27 21:29:33 UTC
Created attachment 157653 [details]
v5: all arrows same solid stytle now (works better at 22px) and other minor fixes.
Comment 12 Nate Graham 2023-03-29 16:33:38 UTC
Putting the symbols inside the glass does help with the size discrepancy. But will that work at 16px? I worry that there just won't be enough room to see the symbols. Also, since the symbols are small and inside the glass area, the icons become kind of samey and hard to distinguish at-a-glance. I think maybe your previous approach of having some of the iconography outside of the magnifying glass component might have better usability.
Comment 13 Philip Murray 2023-03-29 17:52:51 UTC
I've been checking things stay clear enough down to 22px, which is difficult itself, but I hadn't been checking 16px. 16px is quite difficult as things always get quite smudged at 16px. However, the original icons handle it quite well because they stick to using boxes. 

We could always keep a mix of existing & maybe just replace the zoom icons that get used in non-technical programs, i.e. the basic zoom-in / zoom-out / zoom, and leave the existing icons as they are?
Comment 14 Nate Graham 2023-03-29 18:21:13 UTC
Hmm, I think it would be weird for the icons to totally change style at 16px vs 22px. We should strive for a style that works for both, as much as is practical.
Comment 15 Philip Murray 2023-03-29 18:27:02 UTC
I didn't mean to have different pixels at different icon sizes, just not to use all of my round ones for all the different icons if they don't work at all sizes. I think the basic zoom/in/out ones work at all sizes with magnifying glasses and are common enough that it would be good if they were magnifying glasses, but the other zoom icons seem very technical/rare that it wouldn't be that bad if they were left as they are.
Comment 16 ratijas 2023-03-30 16:13:00 UTC
In the latest version, I am confused by x-in, x-out, y-in, y-out communicating their direction with two pieces at once: the arrow direction and the +/- sign inside the magnifying glass.  IMHO arrow should become either a line, or a double-sided arrow.
Comment 17 Philip Murray 2023-03-30 16:29:18 UTC
(In reply to ratijas from comment #16)
> In the latest version, I am confused by x-in, x-out, y-in, y-out
> communicating their direction with two pieces at once: the arrow direction
> and the +/- sign inside the magnifying glass.  IMHO arrow should become
> either a line, or a double-sided arrow.

Yes, I wasn't sure about those either. The negatives with the arrow pointing in the negative axis direction would make them positive.
Comment 18 Philip Murray 2023-03-30 17:14:51 UTC
(In reply to Philip Murray from comment #17)
> (In reply to ratijas from comment #16)
> > In the latest version, I am confused by x-in, x-out, y-in, y-out
> > communicating their direction with two pieces at once: the arrow direction
> > and the +/- sign inside the magnifying glass.  IMHO arrow should become
> > either a line, or a double-sided arrow.
> 
> Yes, I wasn't sure about those either. The negatives with the arrow pointing
> in the negative axis direction would make them positive.

However, the original X/Y icons used arrows in the 4 directions also.
Comment 19 Philip Murray 2023-03-31 21:37:06 UTC
Created attachment 157751 [details]
Pix attached of some versions that hopefully work decently at 16 & 22px sizes.
Comment 20 Philip Murray 2023-03-31 21:39:48 UTC
Numbers provided for easy referencing. Some of the width/height ones with bigger arrows don't work well for the "fit-best" one that usually goes with them.
Comment 21 Philip Murray 2023-04-01 09:53:27 UTC
Created attachment 157760 [details]
More of Zoom - In/Out - X/Y

Still not happy with the zoom ones I posted yesterday. They seem more like zoom left/right/up/down, which I doubt is what's needed. So, made some more!
v2 & v3 use a small magnifying glass, with separate +/- symbols and X/Y axes. They are quite clear, but the axis markings on v2 get a bit smudged at 16px but they look more like axes than v3. Note: it is difficult to have an arrow on the axis as it gets ugly at small sizes.
v4 uses a bigger circle, but the handle is very small & probably unclear at 16px.
v5 is a max sized circle, with basic lines as axes (not sure if they work), also with very small handle.
v6 is my usual 15x15 circle, with better handle, but with the design of v5.
Comment 22 Philip Murray 2023-04-01 11:40:42 UTC
Created attachment 157761 [details]
More of Zoom - In/Out - X/Y (added v7).
Comment 23 Philip Murray 2023-04-01 19:58:34 UTC
Ah, I've just realised there are different sized icon files for different pixel width/heights, so the 16px ones could be made clearer than the above ones as I was only working at 22px & using Dolphin to scale them down. I won't make the 16px versions until anyone has preferences for which seem any good or not. Thanks.
Comment 24 Nate Graham 2023-04-03 14:55:56 UTC
Idea: for those tricky icons, we can put the plus or minus inside the glass, attach the direction indication arrow to the end of the handle, and rotate the handle to point in the direction of the zoom.
Comment 25 Philip Murray 2023-04-03 16:21:42 UTC
Created attachment 157819 [details]
Nate's idea + one where the plus symbol is external.

These are native 16px icons. 
v0 & v1 have 1px larger circle than v2. Only these two I can align a plus symbol into the middle. The handle then becomes either 1px wide, I've also done a 3px wide one, but I usually used 2px in most other icons.
v2 is the handle-direction but with external plus symbol.
Comment 26 Philip Murray 2023-04-03 17:27:19 UTC
Created attachment 157821 [details]
16px with arrowed axes & external symbols.

Working on 16px size natively makes it easier to make clear arrows. So, any of my previous 22px ones that looked a bit blurry at the 16px size, could be redone more clearly.
Comment 27 Philip Murray 2023-04-03 19:32:10 UTC
Created attachment 157826 [details]
Pointy XY Circles (16px native).
Comment 28 Nate Graham 2023-04-03 19:36:50 UTC
Oh I like the pointy circles!
Comment 29 Philip Murray 2023-04-03 19:44:10 UTC
Created attachment 157828 [details]
XY-Zoom-Drops
Comment 30 Philip Murray 2023-04-03 19:48:28 UTC
PointyCircles & ZoomDrops don't have the magnifying glasses as being concentric, well, all the ones today maybe aren't concentric, as a result of having arrows come out of each side I have to move it around. Should be OK, just mentioning in case that's undesirable.
Comment 31 Philip Murray 2023-05-05 11:37:10 UTC
Created attachment 158717 [details]
Montage of 22px width (x), height (y), best fit (z) icons

Just trying out the new montage thing, it is quicker than how I was doing them previously. :)
These are the 22px width (x), height (y), best fit (z) icons. Boxes added to help shows groupings.
Some of these are posted before, but some have variations in size of magnifying glass or arrow type (triangle or line).
The 005 set are actually very close to being the original icons (000 set), same arrows + slightly different side/corner lines, but with a magnifying glass in the middle.
Comment 32 Philip Murray 2023-05-05 11:39:17 UTC
Created attachment 158718 [details]
Montage of 22px width (x), height (y), best fit (z) icons.
Comment 33 Philip Murray 2023-05-05 12:06:41 UTC
Created attachment 158719 [details]
Updated montage.
Comment 34 Nate Graham 2024-02-13 21:47:30 UTC
Sorry for forgetting about this, Philip. I'm a bit confused regarding the latest montage; I think it would be helpful to label each icon with its filename, and ideally if we could see the original icon next to the proposed new icon. That way people could make better comparisons and we could nail down which new icons are perfect, and which new icons could use some more changes.
Comment 35 Philip Murray 2024-02-13 22:12:08 UTC
Hi Nate, no worries. I'd kinda left these ones & went & did some others & half forgot about these. I can't really remember what I was doing and I may have renamed files into that last summary, probably because my naming of the files on my HDD were a mess too. :) 
I think the last montage shows;
- first the original icons as a set beginning name '000' and the 'x/y/z' denoting the zoom being in the z-axis/y-axis/both-axes.
- thereafter, 001 to 015 my fifteen sets of three icons. E.g. 001x + 001y + 001z is set #1.
Comment 36 Nate Graham 2024-02-13 22:47:22 UTC
Thanks Philip. Of those, I think my favorites are the versions with the arrows fully inside the circle, with the circle unbroken.
Comment 37 Philip Murray 2024-02-17 22:36:28 UTC
Created attachment 165916 [details]
Original zoom icons vs my latest set (all using same magnifying glass size & unbroken circle)
Comment 38 Philip Murray 2024-02-17 22:39:57 UTC
Note: I prefer to avoid tiny arrows in some of them as they don't look good. e.g. in the zoom-1-to-2 & zoom-2-to-1 pair, and the zoom-fit-... set.
Comment 39 Philip Murray 2024-02-19 21:30:09 UTC
Created attachment 165943 [details]
Same as before but with 16px versions included
Comment 40 Philip Murray 2024-02-19 21:44:50 UTC
The +/- symbols in the first four 16px icons, for zoom-(in/out)-(x/y), are smaller than I'd like, but the axis takes up space & then there isn't space to make a 5x5 symbol, hence they are 3x3. I could move the axis to the side & remove their 'notches' but then it is unclear what they are.

The zoom-1-to-2 and zoom-2-to-1 don't look quite as nice at 16px. I have used proper double/halving of the rectangles within the zoom circle, but I could make it the small rectangle bigger? but then it wouldn't exactly be a doubling of the dimension.
Comment 41 Nate Graham 2024-02-21 15:15:48 UTC
Honestly those look perfect to me! I'd recommend submitting a merge request to breeze icons as the next step. Thanks a lot for working on this!
Comment 42 Philip Murray 2024-02-21 17:49:27 UTC
You're welcome. I'll create the 32px set and then submit a merge.
Comment 43 Bug Janitor Service 2024-02-23 19:17:08 UTC
A possibly relevant merge request was started @ https://invent.kde.org/frameworks/breeze-icons/-/merge_requests/326
Comment 44 Nate Graham 2024-03-25 19:57:52 UTC
Git commit f6376248c420d634bf9da87fc423eb97540b299e by Nate Graham, on behalf of Philip Murray.
Committed on 25/03/2024 at 19:57.
Pushed by ngraham into branch 'master'.

Use magnifying glass iconography for zoom icons

The current zoom icons use a square iconography that is not as readily
recognizable as magnifying glass ones that are typically used.
FIXED-IN: 6.1

M  +7    -12   icons/actions/16/y-zoom-in.svg
M  +8    -11   icons/actions/16/zoom-1-to-2.svg
M  +8    -11   icons/actions/16/zoom-2-to-1.svg
M  +8    -11   icons/actions/16/zoom-fit-best.svg
M  +8    -11   icons/actions/16/zoom-fit-height.svg
M  +8    -11   icons/actions/16/zoom-fit-width.svg
M  +7    -12   icons/actions/16/zoom-in-x.svg
M  +8    -11   icons/actions/16/zoom-in.svg
M  +8    -11   icons/actions/16/zoom-next.svg
M  +8    -11   icons/actions/16/zoom-original.svg
M  +7    -12   icons/actions/16/zoom-out-x.svg
M  +6    -11   icons/actions/16/zoom-out-y.svg
M  +8    -11   icons/actions/16/zoom-out.svg
A  +1    -0    icons/actions/16/zoom-pixels-symbolic.svg
A  +10   -0    icons/actions/16/zoom-pixels.svg
M  +8    -11   icons/actions/16/zoom-previous.svg
M  +6    -11   icons/actions/16/zoom.svg
M  +10   -20   icons/actions/22/labplot-1x-zoom.svg
M  +10   -20   icons/actions/22/labplot-2x-zoom.svg
M  +10   -20   icons/actions/22/labplot-3x-zoom.svg
M  +10   -20   icons/actions/22/labplot-4x-zoom.svg
M  +10   -20   icons/actions/22/labplot-5x-zoom.svg
T  +1    -14   icons/actions/22/labplot-zoom-in-x.svg
T  +1    -14   icons/actions/22/labplot-zoom-in-y.svg
T  +1    -14   icons/actions/22/labplot-zoom-out-x.svg
T  +1    -14   icons/actions/22/labplot-zoom-out-y.svg
A  +1    -0    icons/actions/22/x-zoom-in-symbolic.svg
A  +1    -0    icons/actions/22/x-zoom-in.svg
A  +1    -0    icons/actions/22/x-zoom-out-symbolic.svg
A  +1    -0    icons/actions/22/x-zoom-out.svg
M  +4    -4    icons/actions/22/y-zoom-in.svg
A  +1    -0    icons/actions/22/y-zoom-out-symbolic.svg
A  +1    -0    icons/actions/22/y-zoom-out.svg
M  +6    -12   icons/actions/22/zoom-1-to-2.svg
M  +6    -12   icons/actions/22/zoom-2-to-1.svg
M  +6    -12   icons/actions/22/zoom-fit-best.svg
M  +6    -6    icons/actions/22/zoom-fit-height.svg
M  +6    -6    icons/actions/22/zoom-fit-width.svg
M  +4    -4    icons/actions/22/zoom-in-x.svg
A  +1    -0    icons/actions/22/zoom-in-y-symbolic.svg
A  +1    -0    icons/actions/22/zoom-in-y.svg
M  +6    -12   icons/actions/22/zoom-in.svg
M  +6    -12   icons/actions/22/zoom-next.svg
M  +6    -12   icons/actions/22/zoom-original.svg
M  +4    -4    icons/actions/22/zoom-out-x.svg
M  +4    -4    icons/actions/22/zoom-out-y.svg
M  +6    -12   icons/actions/22/zoom-out.svg
M  +6    -12   icons/actions/22/zoom-pixels.svg
M  +6    -12   icons/actions/22/zoom-previous.svg
M  +7    -13   icons/actions/22/zoom.svg
T  +1    -13   icons/actions/32/labplot-zoom-in-x.svg
T  +1    -13   icons/actions/32/labplot-zoom-in-y.svg
T  +1    -13   icons/actions/32/labplot-zoom-out-x.svg
T  +1    -13   icons/actions/32/labplot-zoom-out-y.svg
A  +1    -0    icons/actions/32/x-zoom-in-symbolic.svg
A  +1    -0    icons/actions/32/x-zoom-in.svg
A  +1    -0    icons/actions/32/x-zoom-out-symbolic.svg
A  +1    -0    icons/actions/32/x-zoom-out.svg
A  +1    -0    icons/actions/32/y-zoom-in-symbolic.svg
A  +8    -0    icons/actions/32/y-zoom-in.svg
A  +1    -0    icons/actions/32/y-zoom-out-symbolic.svg
A  +1    -0    icons/actions/32/y-zoom-out.svg
M  +6    -11   icons/actions/32/zoom-1-to-2.svg
M  +6    -11   icons/actions/32/zoom-2-to-1.svg
M  +6    -12   icons/actions/32/zoom-fit-best.svg
M  +6    -12   icons/actions/32/zoom-fit-height.svg
M  +6    -12   icons/actions/32/zoom-fit-width.svg
A  +1    -0    icons/actions/32/zoom-in-x-symbolic.svg
A  +8    -0    icons/actions/32/zoom-in-x.svg
A  +1    -0    icons/actions/32/zoom-in-y-symbolic.svg
A  +1    -0    icons/actions/32/zoom-in-y.svg
M  +6    -11   icons/actions/32/zoom-in.svg
M  +6    -11   icons/actions/32/zoom-next.svg
M  +6    -12   icons/actions/32/zoom-original.svg
A  +1    -0    icons/actions/32/zoom-out-x-symbolic.svg
A  +8    -0    icons/actions/32/zoom-out-x.svg
A  +1    -0    icons/actions/32/zoom-out-y-symbolic.svg
A  +8    -0    icons/actions/32/zoom-out-y.svg
M  +6    -11   icons/actions/32/zoom-out.svg
A  +8    -0    icons/actions/32/zoom-pixels.svg
M  +6    -11   icons/actions/32/zoom-previous.svg
M  +7    -12   icons/actions/32/zoom.svg

https://invent.kde.org/frameworks/breeze-icons/-/commit/f6376248c420d634bf9da87fc423eb97540b299e