In T288928#7329035, @alexhollender wrote:

Maybe something that indicates a "draft" or a "sketch pad" might work?

cc @iamjessklein (editing), @RHo (newcomer experience), @Volker_E (design systems)

It looks very clean, but it is also very generic. I fear that it might compete with normal editing under this angle.
Also all other article icons are “white on black”, but I guess that outlined approach was intended @alexhollender?

In T288928#7349231, @Volker_E wrote:

In T288928#7329035, @alexhollender wrote:

Maybe something that indicates a "draft" or a "sketch pad" might work?

cc @iamjessklein (editing), @RHo (newcomer experience), @Volker_E (design systems)

It looks very clean, but it is also very generic. I fear that it might compete with normal editing under this angle.
Also all other article icons are “white on black”, but I guess that outlined approach was intended @alexhollender?

Hi @alexhollender - while I like this icon over the current one and like how it is outline vs the other edit icons, I agree with @Volker_E that it could be confused with the existing edit / create page icons. Maybe @aminalhazwani could explore a direction like making the page a dotted/dashed line that may convey the 'draft' aspect of the sandbox.

great feedback @Volker_E & @RHo. Outline vs filled in wasn't intentional. I think your suggestion sounds good @RHo:

In T288928#7349246, @RHo wrote:

Maybe @aminalhazwani could explore a direction like making the page a dotted/dashed line that may convey the 'draft' aspect of the sandbox.

+1 @RHo

I also wonder if some sort of writing instrument would work here (a protractor, ruler etc.) either by itself or layered on top of the document icon.

Hello everyone, thanks all for the valuable insights! I started to explore possible alternatives to the Sandbox icon. As far as I understood the Sandbox page is a space that every user can use to learn and practice new things, test and get familiar with the editor, or draft edits and pages.

Based on this understanding I initially revolved around the idea of draft, which is commonly represented by a black page.

I then explored a richer approach introducing the pencil icon in order to emphasis that the Sandbox is a space where users can write.

I found the pencil icon to be quite small (and constrained in the "page") so I opted for a simpler approach with the pencil only.

Inspired by this approach I explored different possible layouts that would highlight that you can write content in the Sandbox but I found those explorations to be too visually heavy.

I then moved back to the idea of drafting a page, introducing cut-outs to make the icon less visually heavy and more recognizable at small sizes/zoom levels.

While exploring this direction I took @RHo's feedback into account, testing how a dotted line could better support the concept behind the Sandbox.

After a break I decided to try a different direction, which draws the icon closer to the actual feature and less about how/what a user can do with it. The sandbox is an editor that users can use for their own benefit (may be drafting, may be learning, etc). So I tried to draw a small editor where users can type. I also tried to emphasize the "temporary/drafting" concept with the dotted line.

This is how the icon could look inside the menu but feel free to test also the other icons in this Figma file where you can find some further explorations.

Before collecting your feedback and moving forward I have a couple of questions:

• What's the primary goal for the Sandbox? Is it a space where users can learn new things? Is it a space where they can draft things? If we set a primary intention we could better emphasize the concept with the icon too. For example, if we would like to emphasize the concept of learning we could further explore possible icon alternatives.
• As a non-native speaker I was familiar with the concept of sandbox (especially coming from the coding industry) but I thought that might sound confusing for less tech-savvy users. Chatting with Pau I learned that there's some Wikipedia jargon that might be hard to change but I wanted to raise this possible issue nevertheless.
• While testing the new menu I noticed that the icons are visually heavier compared to the labels on the right, their visual weight draws most of your attention and I wanted to ask you if this is intentional or not (this may also be because of their style: filled vs. outline). Always chatting with Pau during my weekly review he told me that it's our intention to set the icon color and the text color to Base10 but there are some technical limitation for the time being. That said this is even more evident on Japanese (or Arab) Wikipedia where the stroke of the letters is thinner compared to the Latin alphabet (of Helvetica in our case).

That's all for now. I am looking forward to your feedback and thanks for your kind support!

I really like the last approach, it seems a good option.

The sandbox is a place where you can write/create your article or save your texts without being an article. It might be an article in some moment, or you just want to test the latest tech innovation by your own. The place is intended for writing, but the uses can be really divergent.

@aminalhazwani the clarity and depth of your explorations is inspiring. And I agree with @Theklan, I like where you ended up. To try and answer your questions:

What's the primary goal for the Sandbox? Is it a space where users can learn new things? Is it a space where they can draft things? If we set a primary intention we could better emphasize the concept with the icon too. For example, if we would like to emphasize the concept of learning we could further explore possible icon alternatives.

I'm not sure if it is so clear cut, unfortunately. Similar to what @Theklan said, I am aware uses range from drafting new articles & templates, to practicing writing/editing, to experimenting with syntax/layouts/other more nuanced aspects of wiki-stuff.

As a non-native speaker I was familiar with the concept of sandbox (especially coming from the coding industry) but I thought that might sound confusing for less tech-savvy users. Chatting with Pau I learned that there's some Wikipedia jargon that might be hard to change but I wanted to raise this possible issue nevertheless.

Agreed that "Sandbox" might not be understandable for newcomers & non-tech folks, and also I agree with Pau that these terms take time to change (one common approach is a proposal in Village Pump, followed by a discussion). Also the terms are not uniform across projects, so discussions would likely have to happen one project/language at a time. If you feel strongly about this it could be a cool learning experience to investigate a bit more. Additional context: fortunately there is a welcome message when you first navigate to your sandbox (at least on English Wikipedia).

While testing the new menu I noticed that the icons are visually heavier compared to the labels on the right, their visual weight draws most of your attention and I wanted to ask you if this is intentional or not (this may also be because of their style: filled vs. outline). Always chatting with Pau during my weekly review he told me that it's our intention to set the icon color and the text color to Base10 but there are some technical limitation for the time being. That said this is even more evident on Japanese (or Arab) Wikipedia where the stroke of the letters is thinner compared to the Latin alphabet (of Helvetica in our case).

I've noticed this as well. In the case of buttons, with bolder text, there is more harmony, but the icons sometimes feel a little heavy. I am not sure if this is intentional, though @Volker_E and/or @RHo might know.

As part of the Desktop improvements project / visual refinements we are looking at the icons and can factor this in. Any suggestions/sketches/ideas you have are welcome.

Hi @aminalhazwani - agree with @alexhollender and @Theklan that the last option (frame #1011) works well and also appreciated your thorough and well-documented exploration process.
Added replies to Alex and your comments about icon styling in the menu below.

In T288928#7355541, @alexhollender wrote:

@aminalhazwani the clarity and depth of your explorations is inspiring. And I agree with @Theklan, I like where you ended up. To try and answer your questions:

What's the primary goal for the Sandbox? Is it a space where users can learn new things? Is it a space where they can draft things? If we set a primary intention we could better emphasize the concept with the icon too. For example, if we would like to emphasize the concept of learning we could further explore possible icon alternatives.

I'm not sure if it is so clear cut, unfortunately. Similar to what @Theklan said, I am aware uses range from drafting new articles & templates, to practicing writing/editing, to experimenting with syntax/layouts/other more nuanced aspects of wiki-stuff.

As a non-native speaker I was familiar with the concept of sandbox (especially coming from the coding industry) but I thought that might sound confusing for less tech-savvy users. Chatting with Pau I learned that there's some Wikipedia jargon that might be hard to change but I wanted to raise this possible issue nevertheless.

Agreed that "Sandbox" might not be understandable for newcomers & non-tech folks, and also I agree with Pau that these terms take time to change (one common approach is a proposal in Village Pump, followed by a discussion). Also the terms are not uniform across projects, so discussions would likely have to happen one project/language at a time. If you feel strongly about this it could be a cool learning experience to investigate a bit more. Additional context: fortunately there is a welcome message when you first navigate to your sandbox (at least on English Wikipedia).

While testing the new menu I noticed that the icons are visually heavier compared to the labels on the right, their visual weight draws most of your attention and I wanted to ask you if this is intentional or not (this may also be because of their style: filled vs. outline). Always chatting with Pau during my weekly review he told me that it's our intention to set the icon color and the text color to Base10 but there are some technical limitation for the time being. That said this is even more evident on Japanese (or Arab) Wikipedia where the stroke of the letters is thinner compared to the Latin alphabet (of Helvetica in our case).

I've noticed this as well. In the case of buttons, with bolder text, there is more harmony, but the icons still feel quite heavy to me. I am not sure if this is intentional, though @Volker_E and/or @RHo might know.

As Pau mentioned, currently there is a limitation in OOUI to get the icons to be in the slightly lighter Base10 colour used for the text (more details on this task T282625). The current workaround that I think should be applied to the menu icons here is to set the icon opacity to 0.87 to approximate as close to Base10 as possible and make it look comparatively less heavy.
And as noted by Alex, the initial basic intentions of the 20x20 icons were for use on buttons and toolbars where the bolded text is more balanced. One possibility that could help would be to set the icons to be slightly smaller at 16px (matching the same size as text) when it is not bolded:

As part of the Desktop improvements project / visual refinements we are looking at the icons and can factor this in. Any suggestions/sketches/ideas you have are welcome.

In T288928#7355932, @RHo wrote:

Hi @aminalhazwani - agree with @alexhollender and @Theklan that the last option (frame #1011) works well and also appreciated your thorough and well-documented exploration process.

+1 to the exploration process!
Note that two questions are open from my point of view:

1. The editor metaphor is translating to a window-like representation. With similarities to our browser icon

2. The additional icon position at lower right is uncommon with our icons collection. The two exceptions are userContributions and recentChanges, former is part of the menu and I guess one reason for the positioning in your explorations.

Added replies to Alex and your comments about icon styling in the menu below.

In T288928#7355541, @alexhollender wrote:

As Pau mentioned, currently there is a limitation in OOUI to get the icons to be in the slightly lighter Base10 colour used for the text (more details on this task T282625). The current workaround that I think should be applied to the menu icons here is to set the icon opacity to 0.87 to approximate as close to Base10 as possible and make it look comparatively less heavy.
And as noted by Alex, the initial basic intentions of the 20x20 icons were for use on buttons and toolbars where the bolded text is more balanced. One possibility that could help would be to set the icons to be slightly smaller at 16px (matching the same size as text) when it is not bolded:

Note that this menu is not an OOUI menu. But we have same abilities to influence appearance. The icons currently have not applied Base10, but Base0. A flaw.
What @RHo has shared is the important background, the biggest & most significant use case for icons has been buttons and toolbars.

I'm not a big fan of resizing icons in specific contexts only. If we want to think about this, we should find general rules, that also apply to standard dropdown menus featuring icons and further decide if text inputs are also at flaw and should be tackled.
Two more problem with resizing of the icons from 20x20 to 16x16 might be harder to recognize for some users. Secondly, downscaling of icons, specifically in a non 2:1 scaling, will result in blurred paths.

Thank you everyone for your thoroughly feedback! I'll try to summarize your inputs into action points:

• The sandbox usage ranges "from drafting new articles and templates, to practicing writing/editing, to experimenting with syntax/layouts/other more nuanced aspects of wiki-stuff" so we have to keep our icon metaphor as open as possible to serve different purposes and uses.
• Investigate the origins of the "Sandbox" naming/label.
• Try if it's possible to emphasize the difference between the proposed sandbox icon (editor metaphor) and the currently available browser icon.
• Explore if it's possible to position the little pencil in the top right corner to better align the proposed sandbox icon with the existing icon collection. Or better -- explore if it's possible to avoid a multi-icon layout.
• Explore if it's possible to further develop the article icon sandbox idea.
• Understand if it's necessary to introduce a second sizing option for out icon collection and specify possible rules/standards to better support the further development.

I am going to tackle the above listed action items and get back to you!

Note that "sandbox" is the English name. Other names include:

• Brouillon in Brench, meaning "draft"
• Proba orria in Basque, meaning "test page"
• Taller in Spanish, meaning "workshop"
• Prove in Italian and proves in Catalan, meaning "test"

...

Change 717515 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] Get sandbox link from core definition

Reason:

(Not working on this right now, but whoever works on this task should restore in when we're ready and I'll rebase)

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

Forgot to mention one important detail, with an icon draft like 1011, we will also need an RTL version. Please compare OOUI RTL demos on 'userContributions' and 'recentChanges' icons.

Thank you all for your comprehensive feedback, here's an update on the latest explorations. The current picks are: the dotted page metaphor and the dotted text editor metaphor. Following a suggestion from Pau I also added a third pick which tries to simplify the icon with a single mark.

The dotted page metaphor works well because we emphasize that users are writing page content. May be their first experience or may be the drafting of a new article. In order to align the icon with the rest of our icon set I moved the pencil in the top right corner. As suggested by Volker I also explored the possible variants for RLT languages. I came to the conclusion that for this icon is not necessary an RTL version (but I would like to check and test with a native speaker). My reasoning behind this suggestion is because in version 001 Menu AEB it seems that the pencil is outside of the page, while in version 003 Menu AEB it may suggests that users are left-handed or writing at the end of a sentence. While option 002 Menu AEB emphasize the direction of a RLT language. Together with Pau we also checked how's the treatment for the edit icon in RTL languages and the direction is the same as LTR languages.

The dotted text editor metaphor visually describes what users will find after they click the menu item. In this instance I kept the pencil icon at the bottom right corner because it was important to keep the black toolbar of the text editor legible in the icon and not hide/mask it with the pencil. As for RTL languages also in this case I don't think is necessary to provide an alternative -- but I would like to test and check with a native speaker too.

The last pick tries to synthesize the sandbox metaphor in a single mark. I stumbled upon the gestures icon from the Google Material design library and it reminded me of a scribble. So (for simplicity) I tried to use this exact icon to emphasize the idea of playing, trying, testing, learning -- scribbling. I also tried to add the scribble inside a page to emphasize the page metaphor. I think it's an interesting direction that we could further explore if you see some potential too.

As always thanks for your kind feedback!

For me, the first option is the best one. As a left-handed, I'm glad that the RTL languages can be represented with a pencil leaning to the left ;)

In T288928#7374142, @aminalhazwani wrote:

Thank you all for your comprehensive feedback, here's an update on the latest explorations. The current picks are: the dotted page metaphor and the dotted text editor metaphor. Following a suggestion from Pau I also added a third pick which tries to simplify the icon with a single mark.

The dotted page metaphor works well because we emphasize that users are writing page content. May be their first experience or may be the drafting of a new article. In order to align the icon with the rest of our icon set I moved the pencil in the top right corner. As suggested by Volker I also explored the possible variants for RLT languages. I came to the conclusion that for this icon is not necessary an RTL version (but I would like to check and test with a native speaker). My reasoning behind this suggestion is because in version 001 Menu AEB it seems that the pencil is outside of the page, while in version 003 Menu AEB it may suggests that users are left-handed or writing at the end of a sentence. While option 002 Menu AEB emphasize the direction of a RLT language. Together with Pau we also checked how's the treatment for the edit icon in RTL languages and the direction is the same as LTR languages.

This is my new preference over the text editor metaphor both for the simpler shape, and also fitting in with the other icons sets in terms of pencil placement. For the RTL version, 002 Menu AEB (i.e., use same as LTR) works best in my opinion, as it is the same direction of the pencil in RTL as the regular edit pencil, and is writing inside dotted line page as you note.

The dotted text editor metaphor visually describes what users will find after they click the menu item. In this instance I kept the pencil icon at the bottom right corner because it was important to keep the black toolbar of the text editor legible in the icon and not hide/mask it with the pencil. As for RTL languages also in this case I don't think is necessary to provide an alternative -- but I would like to test and check with a native speaker too.

The last pick tries to synthesize the sandbox metaphor in a single mark. I stumbled upon the gestures icon from the Google Material design library and it reminded me of a scribble. So (for simplicity) I tried to use this exact icon to emphasize the idea of playing, trying, testing, learning -- scribbling. I also tried to add the scribble inside a page to emphasize the page metaphor. I think it's an interesting direction that we could further explore if you see some potential too.

As always thanks for your kind feedback!

+1 to first option and 002 Menu AEB for RTL for consistency.

Thank you all for your feedback! Here's the chosen sandbox icon with the grid visible and with the icon template from our design style guide visible.

And this is the optimized SVG code after running the Figma export in SVGO.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
  <title>
    sandbox
  </title>
  <path d="M8 12V9l6-6 3 3-6 6H8Zm10-7-3-3L16.646.354a.5.5 0 0 1 .708 0l2.292 2.292a.5.5 0 0 1 0 .708L18 5ZM8 2h2v2H8zM4 2h2v2H4zM0 3a1 1 0 0 1 1-1h1v2H0V3Zm0 3h2v2H0zm0 4h2v2H0zm0 4h2v2H0zm0 4h2v2H1a1 1 0 0 1-1-1v-1Zm4 0h2v2H4zm4 0h2v2H8zm4 0h2v1a1 1 0 0 1-1 1h-1v-2Zm0-4h2v2h-2z"/>
</svg>

@Volker_E can I add the icon and create a new version of the WikimediaUI – Icons and Colors Figma file as you showcased during the last Design Practice & Systems Meetup? Should I also add the icon to this folder https://github.com/wikimedia/WikimediaUI-Style-Guide/tree/master/resources/WikimediaUI-icons-SVGs via a PR?

@Volker_E how can we get the new SVG into OOUI?
Could we do that before the next release?

In T288928#7451956, @Jdlrobson wrote:

@Volker_E how can we get the new SVG into OOUI?
Could we do that before the next release?

I'm happy to add it to OOUI, sure. One second.

Change 733042 had a related patch set uploaded (by Jforrester; author: Jforrester):

[oojs/ui@master] icons: Provide 'sandbox' in 'editing-advanced' pack

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

Change 733042 merged by jenkins-bot:

[oojs/ui@master] icons: Provide 'sandbox' in 'editing-advanced' pack

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

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

[mediawiki/core@master] Update OOUI to v0.42.1

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

Thanks @Volker_E ! This is now unblocked.

Change 736621 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.42.1

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

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

[design/codex@main] icons: Add 'database' & 'sandbox' icon and update to latest optimized

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

Change 738496 merged by jenkins-bot:

[design/codex@main] icons: Add 'database' & 'sandbox' and update to latest optimized icons

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

Change 740890 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/SandboxLink@master] Update icon from 'markdown' to 'sandbox'

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

Change 740894 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update sandbox user menu icon

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

Change 740895 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Update sandbox icon in personal menu

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

Change 740901 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove unused markup icon

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

Change 740902 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Remove markup icon code

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

I ran out of time to review this today (sorry!) so I am unassigning myself because I am going on break tomorrow

Change 740895 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Update sandbox icon in personal menu

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

Change 740894 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update sandbox user menu icon

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

Change 740890 merged by jenkins-bot:

[mediawiki/extensions/SandboxLink@master] Update icon from 'markdown' to 'sandbox'

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

Change 740902 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove markup icon code

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

Change 740901 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unused markup icon

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Go to Vector and check your sandbox appears in the personal dropdown menu with the new icon.

✅ AC2: Enable advanced mobile mode in settings and check your sandbox appears in the personal dropdown menu

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Go to Vector and check your sandbox appears in the personal dropdown menu with the new icon.

✅ AC2: Enable advanced mobile mode in settings and check your sandbox appears in the personal dropdown menu

In T288928#7595437, @ovasileva wrote:

Looks good! Resolving for now, however, @Volker_E, @alexhollender - unsure of what to do for the "add-on" items. Perhaps we can track those under a separate task?

can you clarify what you mean by the "add-on" items? Items that gadgets add to the menu?