Create an icon for temporary accounts


Article Images

IP Masking: Create an icon for temporary accounts

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)

userTemporary_SVG.zip1 KBDownload

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

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).

Volker_E changed the task status from Open to In Progress.May 19 2023, 8:06 AM

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.

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.

userTemporary_SVG.zip1 KBDownload

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits