Page MenuHomePhabricator

IP Masking: Create an icon for temporary accounts
Closed, ResolvedPublic

Description

Background

As part of the IP Masking project, temporary accounts created will have a user page and access to Echo notifications.

User story

As a person who has a temporary account,
I want to be sure that this is temporary different from a regular user account,
So that I can be assured I have not signed up to Wikipedia.

Proposed design

PNGSVG
image.png (20×20 px, 3 KB)

Previous proposed designs

  1. Existing userAnonymous icon from Codex/OOUI

image.png (86×294 px, 8 KB)

  • Used as a placeholder in early work on IP Masking, but considered not ideal as a misrepresentation of the person being incognito in the same way as browser incognito mode.
  • Can be confusing for the Unregistered/Anonymous editor user type that would still exist in many places during the MVP
  • Stylistically very different from the userAvatar icon
  1. Dotted outline avatar

image.png (306×1 px, 29 KB)

  • Used in Growth usability tests (see figma) with no negative feedback.
  • Dotted line is more indicative of the ephemeral nature of the user account but may be harder to notice at the smaller resolution.

Acceptance criteria for Done

Design

  • The design of the new icon is ready, and it follows our icon system guidelines
  • The new icon has been reviewed with help from the DST and main stakeholders in AHT, Growth, and Web team
  • The icon is recognizable on low DPI resolutions
  • The icon has been exported as an optimized SVG and added to this task’s description
  • The new icon has been included in our Icon System Figma file, and the library has been published

Code

  • Add icon in Codex
  • Add icon in OOUI moved to separate task T338165

Documentation

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
ovasileva triaged this task as Medium priority.May 2 2023, 3:02 PM
RHo updated the task description. (Show Details)
RHo moved this task from Backlog to Needs Other Product Teams on the Temporary accounts board.
RHo added a subscriber: KieranMcCann.

Added proposed design from @KieranMcCann for review from Design.

The proposed, half filled is even harder to identify on small screens. Provided the reasons against userAnonymous it seems though as best compromise though.
I'd be fine to move forward with it.

'userTemporary'?

The proposed, half filled is even harder to identify on small screens. Provided the reasons against userAnonymous it seems though as best compromise though.
I'd be fine to move forward with it.
'userTemporary'?

Yes, SGTM!

Also, adding @Prtksxna for vis and also if this is something that should/can be updated across IP temp accounts at even smaller icon size (for example Vector legacy personal tools).

Change 921171 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'userTemporary'

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

Restricted Application raised the priority of this task from Medium to High. · View Herald TranscriptMay 19 2023, 8:05 AM
Volker_E changed the task status from Open to In Progress.May 19 2023, 8:06 AM

Change 921171 merged by jenkins-bot:

[design/codex@main] icons: Add 'userTemporary'

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

The proposed, half filled is even harder to identify on small screens. Provided the reasons against userAnonymous it seems though as best compromise though.
I'd be fine to move forward with it.

'userTemporary'?

I agree that the current proposal could not be read enough on small screens due to the dots.

Op.3.png (700×1 px, 283 KB)

I propose to use a more solid icon instead since:

  1. Solid icons are more readable on any screen
  2. Although we use line icons, most of our icons are solid and should be reduced to the essential form
  3. Since sot-lines are not well read, I would reduce the use of dot-line icons just for concepts like cut and sandbox

What if we use a more solid icon by combining the IconUserAvatar and IconClock?

Op.4.png (700×1 px, 283 KB)

The proposed, half filled is even harder to identify on small screens. Provided the reasons against userAnonymous it seems though as best compromise though.
I'd be fine to move forward with it.

'userTemporary'?

I agree that the current proposal could not be read enough on small screens due to the dots.

Op.3.png (700×1 px, 283 KB)

I propose to use a more solid icon instead since:

  1. Solid icons are more readable on any screen
  2. Although we use line icons, most of our icons are solid and should be reduced to the essential form
  3. Since sot-lines are not well read, I would reduce the use of dot-line icons just for concepts like cut and sandbox

What if we use a more solid icon by combining the IconUserAvatar and IconClock?

Op.4.png (700×1 px, 283 KB)

I think the avatar with clock is too similar to the userAvatar. Let's proceed with this half-filled avatar as it is a good solution for the temporary status.

Change 922610 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

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

Change 922610 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.10.0 to v0.11.0

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

Is this now available? Can it be resolved?

It is available now as cdxIconUserTemporary in Codex, but would like to check with AHT @Prtksxna in case it needs to be added to OOUI as well...?

@bmartinezcalvo - could you please confirm the addition is reflected in Figma and other documentation per the task description? Then pending answer from AHT, we can resolve.

@bmartinezcalvo - could you please confirm the addition is reflected in Figma and other documentation per the task description? Then pending answer from AHT, we can resolve.

@RHo I've included the new userTemporary icon in the Figma library and I've published it.

But there is a problem with the current icon. While adding the icon in the library, I've realised that the icon shape is 20px instead 18px (there should be 1px padding between icon and icon box as we have in the userAvatar icon). So now userTemporary is a bit bigger that userAvatar. I recommend redesigning the new iconTemporary icon to the right size to avoid different icon sizes in the system, which means we should export it and add in Codex again.

Captura de pantalla 2023-05-26 a las 14.36.46.png (656×1 px, 42 KB)

@bmartinezcalvo - could you please confirm the addition is reflected in Figma and other documentation per the task description? Then pending answer from AHT, we can resolve.

@RHo I've included the new userTemporary icon in the Figma library and I've published it.

But there is a problem with the current icon. While adding the icon in the library, I've realised that the icon shape is 20px instead 18px (there should be 1px padding between icon and icon box as we have in the userAvatar icon). So now userTemporary is a bit bigger that userAvatar. I recommend redesigning the new iconTemporary icon to the right size to avoid different icon sizes in the system, which means we should export it and add in Codex again.

Captura de pantalla 2023-05-26 a las 14.36.46.png (656×1 px, 42 KB)

Argh, thanks for catching that! Yes, let's update with the size tweak and re-export.

Moving to In Design to resize the icon shape to the right size.

I've redesigned the userTemporary icon to be the same size as the userAvatar. Also updated the icon in the Figma library and published it.

Captura de pantalla 2023-05-26 a las 17.10.31.png (680×1 px, 38 KB)

These are the new SVG to add in code. They need to be replaced in Codex.

Change 924170 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Update 'userTemporary' to latest design

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

Change 924170 merged by jenkins-bot:

[design/codex@main] icons: Update 'userTemporary' to latest design

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

ldelench_wmf added a subscriber: ldelench_wmf.

Discussed with DST: we will create a new task for OOUI

Change 927786 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8ca78d2715/w

Change 927786 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.11.0 to v0.12.0

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

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8ca78d2715/w/