Bug 479920 - network-wired should have less monitor, more wire
Summary: network-wired should have less monitor, more wire
Status: CONFIRMED
Alias: None
Product: Breeze
Classification: Plasma
Component: Icons (show other bugs)
Version: 5.92.0
Platform: Compiled Sources Linux
: NOR wishlist
Target Milestone: ---
Assignee: visual-design
URL:
Keywords: usability
Depends on:
Blocks:
 
Reported: 2024-01-16 21:47 UTC by Ilya Bizyaev
Modified: 2024-04-29 20:05 UTC (History)
5 users (show)

See Also:
Latest Commit:
Version Fixed In:
Sentry Crash Report:


Attachments
Screenshot (12.12 KB, image/png)
2024-01-16 21:49 UTC, Ilya Bizyaev
Details
SampleSVGs (2.22 KB, application/zip)
2024-01-18 01:35 UTC, Andres Betts
Details
wired-network (1.45 KB, image/svg+xml)
2024-01-28 21:29 UTC, Andres Betts
Details
wired network variant icons (6.85 KB, application/zip)
2024-01-29 22:23 UTC, Andres Betts
Details
icons 16px (8.03 KB, application/zip)
2024-04-11 00:18 UTC, Andres Betts
Details
Icons 32px (8.45 KB, application/zip)
2024-04-11 00:19 UTC, Andres Betts
Details
Network icon with red X (1.23 KB, image/svg+xml)
2024-04-29 01:08 UTC, Andres Betts
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Ilya Bizyaev 2024-01-16 21:47:30 UTC
SUMMARY
When I look at the system tray and see the icon that looks a lot like a monitor, I think that it has something to do with monitors. For example, when I want to configure screen brightness, the icon with a screen on it wins my attention over “crescent with a light bulb”, and I click it instead. At such a small size, it's hard to tell that the thing to the left of the screen represents an Ethernet cable.


STEPS TO REPRODUCE
1. Log in to Plasma
2. Establish a wired connection
3. Wait for the “network-wireless” icon to appear on the plasma-nm indicator

OBSERVED RESULT
It's a cyborg screen

EXPECTED RESULT
It's a cable, maybe with a planet next to it (aka the web)

ADDITIONAL INFORMATION
Comment 1 Ilya Bizyaev 2024-01-16 21:49:10 UTC
Created attachment 164962 [details]
Screenshot
Comment 2 Nate Graham 2024-01-16 22:01:53 UTC
Agreed, the monitor here is not super appropriate given that we're talking about a type of network, not a display device.
Comment 3 Nate Graham 2024-01-16 22:02:45 UTC
Same goes for the related "network-limited" icon, and all the variants of network-wired
Comment 4 Jin Liu 2024-01-16 23:28:30 UTC
IIRC it's *cable and the globe* in some other platform?
Comment 5 Andres Betts 2024-01-17 14:40:07 UTC
I will help with the icon
Comment 6 Andres Betts 2024-01-18 01:35:49 UTC
Created attachment 164996 [details]
SampleSVGs

I looked around a little bit and noticed that the wired icon is pretty much a copy of what Window has had for a long time. While that is not necessarily a bad thing, it's also one that makes me rethink what we should have. If we are talking ethernet, maybe that's the stronger focus. I found a few samples from around the web and tried to imitate the current breeze icon look and created the attached icons.

Given the 22px bounding box and pixel alignment, I had to put some graphics in half pixels, hopefully they don't look too bad. For the emblems, I just copied the ones we currently use. Let me know your thoughts. If positive, I will polish the icons more and make them ready for production.
Comment 7 Nate Graham 2024-01-18 21:54:08 UTC
Those icons look a lot like network-rj11-female-symbolic, which we already have and depict an ethernet port. Yours look better though, so I think we could replace the existing ones with those, and keep thinking about what to do for new network-wired icons.
Comment 8 Andres Betts 2024-01-19 20:19:53 UTC
That would make sense. I searched around to see how others are interpreting network-wired. Is there one from these examples that seems to convey that well? I can make something inspired on that. https://imgur.com/a/YnwDmUV
Comment 9 Ilya Bizyaev 2024-01-20 00:57:32 UTC
I think something like the 3rd and the 6th icons from the second image would work. It might also be possible to replace the monitor with a wireframe planet on the current icon, but I couldn't make a mock-up that would look good in small sizes.
Comment 10 Nate Graham 2024-01-23 19:14:31 UTC
I like the 3rd one too.
Comment 11 Andres Betts 2024-01-23 19:21:20 UTC
Ok, sounds good! I will work on this during the weekend.
Comment 12 Andres Betts 2024-01-28 21:29:20 UTC
Created attachment 165317 [details]
wired-network

Here is a new rendition. Let me know of any edits.
Comment 13 Nate Graham 2024-01-29 17:17:48 UTC
That looks good to me!
Comment 14 Andres Betts 2024-01-29 20:35:29 UTC
Just to make sure, the icon belongs to a family of status icons that has 6 variants. I can make the variants. Should I put them all here in this ticket?
Comment 15 Ilya Bizyaev 2024-01-29 21:34:25 UTC
I like the proposed icon, too :)
Comment 16 Nate Graham 2024-01-29 21:38:16 UTC
Ultimately they're all gonna need to end up in a merge request, so I'd say do that. invent.kde.org is a better platform for code review and collaboration compared to bugzilla.
Comment 17 Andres Betts 2024-01-29 22:23:59 UTC
Created attachment 165329 [details]
wired network variant icons

Just to confirm this work for you all. Let me know and I can try my luck on a MR and see what happens.
Comment 18 Nate Graham 2024-01-30 00:29:13 UTC
Visually those look great! Do you think there's any way you can squeeze an exclamation point into the triangle? Maybe for the larger sizes, at least? Because keep in mind we'll need at least 16px and 22px versions of these, with 32px versions being desirable as well.
Comment 19 Andres Betts 2024-01-30 00:35:01 UTC
(In reply to Nate Graham from comment #18)
> Visually those look great! Do you think there's any way you can squeeze an
> exclamation point into the triangle? Maybe for the larger sizes, at least?
> Because keep in mind we'll need at least 16px and 22px versions of these,
> with 32px versions being desirable as well.

I think it can be done. I will try.

Question, is the 16px version derived from the 22px version, or do I need to make 16px versions? Also, note that 22px lends itself to be blurry as pixels are not equally distributed. There is a chance some aspects of them look blurry.
Comment 20 Nate Graham 2024-01-30 17:47:01 UTC
If you mean "can I downscale the 22px version to get a 16px version", then no, it needs to be hand-made (or at least hand-altered) so it can be pixel-perfect at the 16px size.

There's no reason an icon would need to be blurry at either size; if it is, it means the lines aren't pixel-aligned.

If it's happening because you have a 1px vertical line that needs to be dead-center in the icon, then yeah, that would be a problem. It could be made non-blurry by changing it to a 2px vertical line.
Comment 21 Andres Betts 2024-03-10 03:13:21 UTC
Can you write out the list of icons needed in total and their names? Sorry for dropping this. I have been pretty busy.
Comment 22 Nate Graham 2024-03-10 03:48:44 UTC
network-wired
network-wired- activated
network-wired-activated-limited
network-wired-activated-locked
network-wired-available
network-wired-disconnected
network-wired-unavailable
Comment 23 Andres Betts 2024-04-11 00:18:56 UTC
Created attachment 168374 [details]
icons 16px
Comment 24 Andres Betts 2024-04-11 00:19:10 UTC
Created attachment 168375 [details]
Icons 32px
Comment 25 Nate Graham 2024-04-11 16:05:16 UTC
Those look good! Three things:
- In network-wired-unavailable, was it intentional to use a black X instead of a red X? Usually our X badges are red.
- network-wired, network-wired-active, and network-wired-available look the same (or am I just not seeing any differences?) so the latter two could just be symlinks to network-wired, right?
- Could you also include 22px versions? That's the size that these will be displayed at most commonly in the panel, so it's important to have that size.
Comment 26 Andres Betts 2024-04-11 17:34:46 UTC
- In network-wired-unavailable, was it intentional to use a black X instead of a red X? Usually our X badges are red.
Yes, because even in the current 22px it's not consistent. I can make it red if there is more red than black in the icon set. Let me know.

- network-wired, network-wired-active, and network-wired-available look the same (or am I just not seeing any differences?) so the latter two could just be symlinks to network-wired, right?
Yes because it seemed to me that there is no need to make one different visually than the other. Maybe there is a case for that, let me know.

- Could you also include 22px versions? That's the size that these will be displayed at most commonly in the panel, so it's important to have that size.
22px versions are contained in this attachment:  wired network variant icons
Comment 27 Nate Graham 2024-04-12 16:53:20 UTC
(In reply to Andres Betts from comment #26)
> - In network-wired-unavailable, was it intentional to use a black X instead
> of a red X? Usually our X badges are red.
> Yes, because even in the current 22px it's not consistent. I can make it red
> if there is more red than black in the icon set. Let me know.
Yeah I think we should go with red here.

> - network-wired, network-wired-active, and network-wired-available look the
> same (or am I just not seeing any differences?) so the latter two could just
> be symlinks to network-wired, right?
> Yes because it seemed to me that there is no need to make one different
> visually than the other. Maybe there is a case for that, let me know.
Nah, seems fine, I just wanted to know.

> - Could you also include 22px versions? That's the size that these will be
> displayed at most commonly in the panel, so it's important to have that size.
> 22px versions are contained in this attachment:  wired network variant icons
Ah so I see. Missed it because of the different naming style.

So yeah, can you fix up the X colors? After that would you like me to submit them to breeze-icons?
Comment 28 Andres Betts 2024-04-29 01:08:32 UTC
Created attachment 168985 [details]
Network icon with red X
Comment 29 Nate Graham 2024-04-29 20:05:31 UTC
That looks great!