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

Assigned To

None

Authored By

	RHo
	May 1 2023, 4:17 PM

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

PNG	SVG
	userTemporary_SVG.zip1 KBDownload

Previous proposed designs

Existing userAnonymous icon from Codex/OOUI

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

Dotted outline avatar

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

Update T141801: WikimediaUI (Codex/OOUI) icon inventory (tracking)

Details

Project	Branch	Lines +/-	Subject
mediawiki/core	master	+1 K -1 K	Update Codex from v0.11.0 to v0.12.0
design/codex	main	+1 -2	icons: Update 'userTemporary' to latest design
mediawiki/core	master	+879 -779	Update Codex from v0.10.0 to v0.11.0
design/codex	main	+14 -0	icons: Add 'userTemporary'

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	Niharika	T324492 IP Masking - MVP
Open	None	T326816 Update features for IP Masking
Resolved	• Jdlrobson	T326911 Update Web Team-owned products that may be affected by IP Masking
Open	None	T335440 [EPIC] Web team support for IP masking
Open	None	T335546 IP masking: Temp account user menu options
Resolved	None	T335694 IP Masking: Create an icon for temporary accounts
Open	None	T338165 IP Masking: Create the OOUI version of the temporary account icon

Event Timeline

RHo created this task.May 1 2023, 4:17 PM

Restricted Application added a project: Design-Systems-Team. · View Herald TranscriptMay 1 2023, 4:17 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

• Jdlrobson moved this task from Incoming to Web Team FY2022-23 Q4 Sprint 5 on the Readers-Web-Backlog board.May 1 2023, 6:27 PM

• Jdlrobson edited projects, added Readers-Web-Backlog ( Web Team FY2022-23 Q4 Sprint 5); removed Readers-Web-Backlog.

ovasileva triaged this task as Medium priority.May 2 2023, 3:02 PM

ldelench_wmf moved this task from Requests to Backlog on the Design-Systems-Team board.May 2 2023, 3:34 PM

ldelench_wmf moved this task from Inbox to Proposed New Components on the Codex board.

• Jdlrobson mentioned this in T335546: IP masking: Temp account user menu options .May 3 2023, 5:38 PM

kostajh moved this task from Inbox to Triaged on the Growth-Team board.May 4 2023, 7:01 PM

RHo claimed this task.Tue, May 16, 1:50 PM

RHo updated the task description. (Show Details)

RHo moved this task from Backlog to Needs Other Product Teams on the IP Masking board.

RHo added a subscriber: • KieranMcCann.

Added proposed design from @KieranMcCann for review from Design.

• Volker_E updated the task description. (Show Details)Tue, May 16, 4:51 PM

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'?

In T335694#8857144, @Volker_E wrote:

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

gerritbot added a project: Patch-For-Review.Fri, May 19, 8:05 AM

• Volker_E edited projects, added Design-Systems-Team (Design-Systems-Sprint); removed Design-Systems-Team.Fri, May 19, 8:05 AM

Restricted Application raised the priority of this task from Medium to High. · View Herald TranscriptFri, May 19, 8:05 AM

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

• Volker_E moved this task from Committed to In Design on the Design-Systems-Team (Design-Systems-Sprint) board.

• Volker_E moved this task from In Design to Design Review on the Design-Systems-Team (Design-Systems-Sprint) board.

cmadeo mentioned this in T337250: IP Masking on iOS: Editing related changes.Mon, May 22, 6:42 PM

cmadeo mentioned this in T337267: IP Masking on iOS: Edit history related changes.Mon, May 22, 7:43 PM

cmadeo mentioned this in T337268: IP Masking on iOS: Talk .Mon, May 22, 8:01 PM

Change 921171 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Mon, May 22, 8:30 PM

• Volker_E updated the task description. (Show Details)Tue, May 23, 12:17 AM

• Volker_E updated the task description. (Show Details)Tue, May 23, 12:19 AM

In T335694#8857144, @Volker_E wrote:

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.

I propose to use a more solid icon instead since:

Solid icons are more readable on any screen
Although we use line icons, most of our icons are solid and should be reduced to the essential form
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?

In T335694#8873040, @bmartinezcalvo wrote:

In T335694#8857144, @Volker_E wrote:

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.

I propose to use a more solid icon instead since:

Solid icons are more readable on any screen

Although we use line icons, most of our icons are solid and should be reduced to the essential form

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?

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

gerritbot added a project: Patch-For-Review.Tue, May 23, 9:14 PM

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

Maintenance_bot removed a project: Patch-For-Review.Tue, May 23, 11:11 PM

cmadeo mentioned this in T337523: IP Masking on iOS: Settings + Expiry.Thu, May 25, 9:32 PM

Is this now available? Can it be resolved?

In T335694#8882275, @Jdlrobson wrote:

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.

In T335694#8882569, @RHo wrote:

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

In T335694#8882886, @bmartinezcalvo wrote:

In T335694#8882569, @RHo wrote:

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

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

bmartinezcalvo updated the task description. (Show Details)Fri, May 26, 3:20 PM

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

gerritbot added a project: Patch-For-Review.Mon, May 29, 11:49 PM

Change 924170 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Fri, Jun 2, 1:10 AM

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

RHo mentioned this in T338165: IP Masking: Create the OOUI version of the temporary account icon.Mon, Jun 5, 4:48 PM

RHo updated the task description. (Show Details)

cmadeo mentioned this in T338265: IP Masking on Android: Editing.Tue, Jun 6, 7:18 PM

cmadeo mentioned this in T338266: IP Masking on Android: Edit history.Tue, Jun 6, 7:20 PM

cmadeo mentioned this in T338268: IP Masking on Android: Talk.Tue, Jun 6, 7:28 PM

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

gerritbot added a project: Patch-For-Review.Tue, Jun 6, 8:47 PM

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: