Page MenuHomePhabricator

Add 'network'/'networkOff' icon in OOUI/Design Style Guide
Closed, ResolvedPublic

Assigned To
Authored By
SGautam_WMF
Sep 10 2020, 2:46 PM
Referenced Files
F32428686: network.svg
Nov 4 2020, 6:35 AM
F32428687: networkOff.svg
Nov 4 2020, 6:35 AM
F32359446: image.png
Sep 22 2020, 7:08 PM
F32358618: Wifi_off.svg
Sep 22 2020, 4:34 AM
F32358622: Screen Shot 2020-09-18 at 9.10.53 PM.png
Sep 22 2020, 4:34 AM
F32358619: Wifi.svg
Sep 22 2020, 4:34 AM
F32358620: Screen Shot 2020-09-18 at 9.11.09 PM.png
Sep 22 2020, 4:34 AM
F32354743: Screen Shot 2020-09-18 at 9.10.53 PM.png
Sep 18 2020, 3:55 PM

Description

For one of our projects, Inuka team would like to present no internet connection state using an icon. We currently don't have anything in icon library that represents it quite right therefore would like to suggest an addition along with "connection available" icon.

WifiWifi-off
Screen Shot 2020-09-18 at 9.11.09 PM.png (568×570 px, 98 KB)
Screen Shot 2020-09-18 at 9.10.53 PM.png (567×568 px, 96 KB)

SVG files


Event Timeline

Wow, this is not made any easier by Material design (or SF Symbols for that matter) unfortunately as they use both icons in different contexts. Personally, the Wifi feels the clearest -- mostly because I worry that the cloud might be more closely associated with accessing personal data (eg. things stored in the cloud).

I think it is good to have an icon to represent connectivity, and I think either could work well.

  • The wifi symbol may be more widely recognizable and direct. Being more technical we need to decide whether it is ok to use a symbol strongly associated with a particular technology (wifi) in a more broader way to cover other connectivity issues such as lack of mobile signal.
  • The cloud symbol is more general which applies for more usecases (wifi, mobile data, servers unavailable...), which seems useful for this and other projects. It relies on the "cloud" metaphor to be understood, so we may want to check if such metaphor is widely familiar.

Note that the issues above are not dealbreakers for either option since the message will be conveyed with additional elements and the context (contents not loading). Just aspects to keep in mind as we observe later users in this context.

Another aspect to consider is whether we may also need the non-stroked version (e.g., to indicate connectivity is back).

Thanks, @cmadeo and @Pginer-WMF for sharing your thoughts on it. I agree with your points, among these two, cloud one does certainly cover the wider use-cases though I believe for our targeted audience the Wi-Fi one would make more sense. Maybe I can propose the cloud one separately. Pau as you mentioned proposing the non-stroked version one would be good too.

@Volker_E shall I update the description with only Wi-Fi one along with its non-stroked version?

@SGautum_WMF Happily +1ing to considerations shared by Carolyn and Pau and you above.
I lean to the Wifi off icon as well. A few minor notes/questions:

  • The dot is probably a bit too small. At small size it might make sense to increase it slightly to make it simpler recognizable.
  • The dot is slightly shifted to the left, I guess that's because of the cross-out line, but wanted to make sure if that's the case.
  • The cross-out line is not ending on pixel. Putting endpoints on pixels makes the SVGs more crispy (less blurred), specifically on low-dpi screens.

If the cross-out line is part of the icon template, we should amend it there as well.

Just for completion on the second icon, “endpoints of lines are square in keeping with simple geometric shapes.”

Yes, please, update the task accordingly. And we should aim for the on and off icon when adding them to our collection.

Hi @Volker_E thanks for your feedback. I have made some changes based on it. Please have a look and let me know if it makes sense. I will update the description after your confirmation.

WifiNo-Wifi
Screen Shot 2020-09-18 at 9.11.09 PM.png (568×570 px, 98 KB)
Screen Shot 2020-09-18 at 9.10.53 PM.png (567×568 px, 96 KB)

@SGautum_WMF Happily +1ing to considerations shared by Carolyn and Pau and you above.
I lean to the Wifi off icon as well. A few minor notes/questions:

  • The dot is probably a bit too small. At small size it might make sense to increase it slightly to make it simpler recognizable.

Increased it's size, hopefully it looks fine now.

  • The dot is slightly shifted to the left, I guess that's because of the cross-out line, but wanted to make sure if that's the case.

Yeah, it's due to cross-out line.

  • The cross-out line is not ending on pixel. Putting endpoints on pixels makes the SVGs more crispy (less blurred), specifically on low-dpi screens.

Corrected, hope this looks fine now.

If the cross-out line is part of the icon template, we should amend it there as well.

Not sure if I understood it.

  • Just for completion on the second icon, “endpoints of lines are square in keeping with simple geometric shapes.”

Yup, I will keep this in mind for the cloud icon.

Great, looks good.

If the cross-out line is part of the icon template, we should amend it there as well.

Not sure if I understood it.

Was meant for the icon template in the Style Guide, not the current task.

@SGautam_WMF When putting it all together, two more question arose:
While it looks great on the grid icon template view, the dot seems too close to the first “ray wave”:

image.png (430×990 px, 36 KB)

Not sure if that's the visual skew or a problem with the SVG export.

Another thing is the line thickness. Have you tried with the standard line thickness of 2 sp?

Change 629183 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] [WIP] icons: Add 'network' and 'networkOff'

https://gerrit.wikimedia.org/r/629183

@Volker_E apologies for late reply. I'll have a look and get back to you.

@Volker_E I did make some minor changes based on your feedback, here are the updated files. Is it okay to update the task description with modified files after the implementation?

Thanks @SGautam_WMF, they look much better and I'd go ahead and propose to merge them. The path thickness seems still a bit too thick in comparison with icons like reload.
But let's get it into this weeks release, the difference is minimal and we can discuss (and probably amend) further from here.

Change 629183 merged by jenkins-bot:
[oojs/ui@master] icons: Add 'network' and 'networkOff'

https://gerrit.wikimedia.org/r/629183

Volker_E renamed this task from Add 'No network' icon in OOUI to Add 'network'/'networkOff' icon in OOUI/Design Style Guide.Dec 3 2020, 3:41 PM
Volker_E added a project: OOUI.

Change 645179 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Update OOUI to v0.41.0

https://gerrit.wikimedia.org/r/645179

Change 645179 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.41.0

https://gerrit.wikimedia.org/r/645179

Volker_E triaged this task as Medium priority.Dec 14 2020, 2:23 PM

Change 649460 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] icons: Amend stroke width in 'network' and 'networkOff' icons

https://gerrit.wikimedia.org/r/649460

Change 649460 merged by jenkins-bot:
[oojs/ui@master] icons: Amend stroke width in 'network' and 'networkOff' icons

https://gerrit.wikimedia.org/r/649460

Change 658692 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.41.1

https://gerrit.wikimedia.org/r/658692

Change 658692 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.41.1

https://gerrit.wikimedia.org/r/658692

Volker_E edited projects, added OOUI (OOUI-0.41.1); removed OOUI.