Page MenuHomePhabricator

Design icon for "IP Reveal" action, possibly change VisualEditor icon
Closed, ResolvedPublic

Description

Background

After the IP Masking project is implemented the IPs that are shown on MediaWiki will be hidden. Those with access will need to click an "IP Reveal" button to be able to see the hidden IPs. Here are some rough mocks of what this would look like:

image.png (1×2 px, 483 KB)

We are currently using the "eye" icon for the IP reveal action. This icon is being used for VisualEditor at the moment (see F34947198).

Goal

  • Decide which icon is appropriate for IP Reveal and VE
  • Design the new icon
  • Add new icon to library
  • Start using new icon

Event Timeline

@bmartinezcalvo is this the right place to raise a task like this? Should I be using different tags for Codex?

@alexhollender_WMF did you do some work exploring different ways the VisualEditor could be represented without using the eye? Could you please link me to that work?

@alexhollender_WMF did you do some work exploring different ways the VisualEditor could be represented without using the eye? Could you please link me to that work?

I did very little work. Additionally I think it makes more sense for @iamjessklein and @KieranMcCann to own this.

Screen Shot 2022-02-28 at 11.43.31 AM.png (1×1 px, 101 KB)

Hi @Prtksxna. I was going to pick this up if that’s okay with you? Is there an interactive prototype of the IP reveal I can look at?

Hi all. After a bit of consideration, here’s my suggested proposal:

  • Redesign the visual editing, and source editing icons. For this I’ve done something similar to Alex’s previous proposal but given more prominence to the eye and brackets elements.
  • Make the eye icons more general purpose for show/hide actions. This could then be used for the IP show/hide action, as well as other uses such as preview.
  • Alternatively, if we felt we needed a specific icon for the IP show/hide then I’ve created icons that add the eye to pins. Personally I’m not sure extra icons are needed for this and that the standard eye icons would be fine but just wanted to share this option for thoughts.

icon-proposal.png (582×2 px, 54 KB)

...and here is the new proposed editing icons in context...

editing-icons-in-context.png (612×1 px, 24 KB)

Let me know if you have any thoughts

@KieranMcCann I love all the proposals, specially the ones for visual and source editing.

About the Show /Hide IP, what f we use here the Show/Hide (simple eye) icon? I would focus here the concept of the icon in the action (view/hide) instead of in the element you want to show/hide (IP). If we start adding specific icons for each element we want to show/hide, we would increase the number of icons in our library. Also, this eye inside a point icon is a bit complex comparing it with the rest of our iconography.

+1 to those being very good proposals and +1 to focussing on the action over the specific thing.
For the change of visual editing and source editing we should widen the conversation and make this a separate task. Both icons have a long history and also seen strong opinions leading to where they are now.

Thanks for picking this up Kieran! I really like the proposals! 💯
As @Volker_E mentioned we should widen the conversation. @iamjessklein thoughts on how we could do that?

I agree, the extra IP-specific icons are not needed. The standard eye icon works well here.

Thanks for the feedback @bmartinezcalvo @Volker_E @Prtksxna. Glad we all agree that there is no need to add IP specific icons :)

Very good point about widening the conversation regarding the edit icons @Volker_E.

Thanks for the feedback @bmartinezcalvo @Volker_E @Prtksxna. Glad we all agree that there is no need to add IP specific icons :)

Very good point about widening the conversation regarding the edit icons @Volker_E.

+1 about the updated editor icon for VE. This was discussed in T289723: Sticky header: Add edit icons to sticky header where I believe in the end it was decided that when both the editing tabs are shown, the edit pencil icon was used for VE and brackets for source edits (specific gif F34688559 in this comment T289723#7436172), so assume if we do want to spread the change widely it would in the sticky header as well as the editor dropdown.

Thanks for all of these explorations @KieranMcCann @Prtksxna. For the ip reveal is it possible to share a mockup of what it will look like when the address is masked?

I think that the half eye and bolder brackets are easier to differentiate on scan.

This is probably going to come out of left field re: ve but as we are looking at the icon set across the board, here are my two cents. I have been wondering for quite some time if icons differentiating the states is excessive. The high level concept that we are trying to communicate here is that this is an edit button, and then there are two modes. Making an icon for visual and source kind of brands the names that we have for tools themselves. If don't think this would block movement on this ticket, but it's worth considering.

Thanks @iamjessklein. It’s a good point and I do think we should be asking ourselves that about icons more often – Does this icon really help a user understand an action? If not, do we really need an icon? I also think there is a good argument for having a single Edit icon.

So an alternative proposal would be to get rid of icons for visual editing and source editing, which would then allow us to use the eye icon for more general show/hide purposes (such as the IP reveal).

And then the edit dropdown would look like this...

Screenshot 2022-03-22 at 14.44.24.png (666×1 px, 62 KB)

Thanks @iamjessklein. It’s a good point and I do think we should be asking ourselves that about icons more often – Does this icon really help a user understand an action? If not, do we really need an icon? I also think there is a good argument for having a single Edit icon.

So an alternative proposal would be to get rid of icons for visual editing and source editing, which would then allow us to use the eye icon for more general show/hide purposes (such as the IP reveal).

And then the edit dropdown would look like this...

Screenshot 2022-03-22 at 14.44.24.png (666×1 px, 62 KB)

I understand that point and this seems like a good proposal @KieranMcCann. However, I definitely feel this should be a separate task (removing instances where a specific VE and Source icons are used), where you can then also capture all the other places these icons are in use, such as on the sticker header I mentioned in T301440#7796147:

Thanks for the feedback @bmartinezcalvo @Volker_E @Prtksxna. Glad we all agree that there is no need to add IP specific icons :)

Very good point about widening the conversation regarding the edit icons @Volker_E.

+1 about the updated editor icon for VE. This was discussed in T289723: Sticky header: Add edit icons to sticky header where I believe in the end it was decided that when both the editing tabs are shown, the edit pencil icon was used for VE and brackets for source edits (specific gif F34688559 in this comment T289723#7436172), so assume if we do want to spread the change widely it would in the sticky header as well as the editor dropdown.

I think we should take into account that this feature is going to be used by a very small percentage of users relative to the number of VE users. As a result I don't think we need to considering changing the VE icons because of a relatively obscure feature, and I'm not sure it is a priority for the editing team right now.

(For context the edit mode switching tool comes up for debate almost every year, e.g. T116417, T289723, T173531, T235593#5897563 )

Note also the eye/bracket icons are used in other contexts to designate "visual/source mode", specifically when viewing diffs (either in the VE save dialog on on history pages):

image.png (359×616 px, 50 KB)

Yep, the feature would be relatively obscure. The most common place that I see this being used would be on top of RecentChanges and History, and only for those who have the needed roles.

Screen Shot 2022-04-11 at 10.34.06 AM.png (386×1 px, 154 KB)

So we all agree that an IP-specific icon isn't required and the normal 'show' icon would be sufficient here. Would it be okay, at least for now to use this icon for both uses? Would it muddy its visual editor meaning?

@bmartinezcalvo, do you know if we are already using it for non-VE purposes at other places?

@bmartinezcalvo, do you know if we are already using it for non-VE purposes at other places?

@Prtksxna the name of this icon is eye-VE so I guess we are using it just for VE since we use the VE in its name. Opening the Figma > Wikimedia Foundation > Libraries > DS analytics I can check that we are using it in so many projects so not sure if we are using it for non-VE purposes (maybe @Volker_E knows more about real examples). What I personally recommend is that this eye icon can be used for many use cases and not just for VE (e.g. imagine we want to design a show/hide password input, we should use this eye icon).

Captura de pantalla 2022-04-11 a las 10.30.02.png (1×2 px, 1 MB)

@Prtksxna It's additionally in use in 3D extension on[[ https://gerrit.wikimedia.org/g/mediawiki/extensions/3D/+/91325ba778111a8a273731ca59bf0b62e631c236/modules/mmv.3d.head.js#36 | 'view' indicating button ]] and once in FlaggedRevision to mark a “stable page”.
That seems to be it, both no high visibility use cases.

Removing inactive task assignee. (For future reference, please do so as part of offboarding!)

hi @Prtksxna cc @JSengupta-WMF - is there still a request for a new icon and/or review of the Visual Editor icon for this task?

Checking again to see if this request is still valid, otherwise I am going to close it.

hi @JSengupta-WMF - can we close this task? I believe in what were the latest iterations from @Prtksxna, the decision was made to not have an icon at all with the show IP button.

image.png (1×1 px, 228 KB)

JSengupta-WMF claimed this task.

@RHo makes sense. Changing the status to resolved.