Page MenuHomePhabricator

Update Sandbox icon
Open, In Progress, MediumPublic

Description

New collapsible menu's Sandbox link is a big < >, suggesting that you are going to write in code. As the sandbox is a starting point for newbies, it should suggest exactly the opposite: that this is the place to start writing. Something suggesting a sketch or a pencil, should be better.

Current Sandbox icon:

Screen Shot 2021-09-13 at 10.11.07 AM.png (808×710 px, 167 KB)

TODO

  • Update sandbox icon in OOUI to the new icon
  • Release a new version of OOUI (Changing it here should make it propagate to all Minerva and Vector skins)

QA

  • Go to Vector and check your sandbox appears in the personal dropdown menu with the new icon.
  • Enable advanced mobile mode in settings and check your sandbox appears in the personal dropdown menu

Event Timeline

Aklapper renamed this task from Sandbox link shouldn't suggest that you are going to use code to Replace Sandbox icon (< >; "markup") which implies "code" instead of writing.Aug 16 2021, 9:03 AM

@Theklan good point, thanks for raising this. I can't remember my exact thought process when choosing the icon but I remember struggling to find something appropriate.

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

image.png (90×93 px, 918 B)

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

Yes!

image.png (90×93 px, 918 B)
seems a really good option!

Jdlrobson added a subscriber: Jdlrobson.

If we're changing Vector we should also change Minerva:

Screen Shot 2021-09-03 at 10.23.59 AM.png (230×534 px, 14 KB)

Change 717515 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

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

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

If we're changing Vector we should also change Minerva:

Screen Shot 2021-09-03 at 10.23.59 AM.png (230×534 px, 14 KB)

+1, I will finalize the icon in the next week or two

alexhollender added a subscriber: aminalhazwani.

@aminalhazwani (you may already know this) so each person with a Wikipedia account gets a sandbox, which is a scratch/draft space of sorts where they can practice things, draft articles, etc. I had originally used a < > icon because sometimes people use their sandbox to practice writing wikitext (or experiment with other templates and code-like things), but as @Theklan as helpfully pointed out it's more confusing than helpful.

So the basic idea is to have some kind of document/page + the edit pen(cil) — see above comments. You can find all our current icons via the Figma library, or if it's easier for you most of them also live here. Icon creation guidelines are here.

Please reach out for any help along the way : )

@alexhollender - where in the interface is the icon that you are highlighting? Can you provide a screenshot?

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

image.png (90×93 px, 918 B)

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?

image.png (236×1 px, 39 KB)

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

image.png (90×93 px, 918 B)

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?

image.png (236×1 px, 39 KB)

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:

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.

image.png (244×1 px, 16 KB)

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

image.png (254×1 px, 17 KB)

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.

image.png (258×1 px, 20 KB)

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.

image.png (234×1 px, 17 KB)

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.

image.png (238×1 px, 18 KB)

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

image.png (242×1 px, 21 KB)

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.

image.png (192×906 px, 16 KB)

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.

image.png (642×778 px, 43 KB)

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

image.png (928×820 px, 91 KB)

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

Screen Shot 2021-09-15 at 10.50.15 AM.png (445×971 px, 86 KB)

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.

Screen Shot 2021-09-15 at 10.54.15 AM.png (109×253 px, 7 KB)

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.

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

Screen Shot 2021-09-15 at 10.50.15 AM.png (445×971 px, 86 KB)

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.

Screen Shot 2021-09-15 at 10.54.15 AM.png (109×253 px, 7 KB)

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:

image.png (606×450 px, 33 KB)

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.

+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

image.png (68×190 px, 2 KB)

I personally think the article icon sandbox idea works better as it's more centered on what the sandbox is about, a playground for wiki content. Although I see the difficulties in the visual styling in the exploration.

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

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:

image.png (606×450 px, 33 KB)

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.

Jdlrobson changed the task status from Open to In Progress.Wed, Sep 22, 10:41 PM

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.

image.png (544×2 px, 122 KB)

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.

image.png (544×2 px, 121 KB)

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.

image.png (524×1 px, 63 KB)

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

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.

image.png (544×2 px, 122 KB)

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.

image.png (92×172 px, 1 KB)

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.

image.png (544×2 px, 121 KB)

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.

image.png (524×1 px, 63 KB)

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.

image.png (790×1 px, 70 KB)

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?

@Jdlrobson @ovasileva we've got an icon! moving this to needs analysis

alexhollender renamed this task from Replace Sandbox icon (< >; "markup") which implies "code" instead of writing to Update Sandbox icon.Tue, Oct 19, 5:10 PM