Improve the UX around project's public/draft mode visibility

[srish]

Suggestion to approach this task:

• Remove the globe icon from all projects
• Add an icon on draft projects to indicate draft mode

[darechan]

I do agree that globe icon is a bit unnecessary however, globe and a lock is a very generic and good symbol to represent public or private but if there are still confusions regarding the same then it is suggested to use symbols like an eye for public and strike off eye for private. (These are just demos and can be made into the theme colour. Kindly keep that in mind.)

Suggestion 1

Suggestion 2

This is a bit optional but instead of an icon we can replace it with a toggle that would indicate private or public
incase the user clicks on the toggle and tries to switch it on then it we can display a modal/popup asking do you wish to public your project?

[Ananya2003Gupta]

I would like to add something to suggestion 2.
I think red color would not look nice for private mode.
Instead we should keep the default color of a toggle button that is greyish or off white.
To make the project public user will click on the toggle button, a prompt will appear to confirm user's choice and then the toggle button will turn green.

[kodervine]

I suggest something like the image below -

The private projects can have a badge with a "private" text to indicate that it is a private project, while the public project can be blank

Also, we can reduce the opacity of the background in the private projects, while the public ones can have the full opacity

[sethiastha]

@tuxology I and @srish discussed the use cases for these two icons. The feed of Zubhub is similar to a YouTube model. So the content is either public or locked by the creator. We can showcase the projects in the public feed without any icon and the 'only me' category with a lock icon only under 'my projects' (not in the feed of 'all projects').

[darechan]

@tuxology I and @srish discussed the use cases for these two icons. The feed of Zubhub is similar to a YouTube model. So the content is either public or locked by the creator. We can showcase the projects in the public feed without any icon and the 'only me' category with a lock icon only under 'my projects' (not in the feed of 'all projects').

mind if I raise a PR for the same in that case?

[srish]

@darechan Yes, please :) Feel free to attempt this task keeping in mind the approach shared in a previous comment by @sethiastha

[Krishna841]

Hello, reading the above comments I thought of a design like this

Can you provide your feedback on the above design for any changes. Here I have used a lock icon and slightly dark background to denoted that the project is private while the public projects do not have anything. But I seem to be missing the point where locked projects are shown under only me category which I could not find on the site

[Krishna841]

@srish @tuxology

[tuxology]

@Krishna841 The goal of Private mode zubhub is to only allow authenticated users to view certain projects tagged private where visibility is "only for authenticated users"). Keeping this in mind, @sethiastha 's suggestion is straightforward. We can simply just not show private mode projects unless there is an authenticated user (this is how currently private mode zubhub works). The issue now is how do we let the creator understand that their project has been made publicly viewable by the world now (anyone visiting the side, not logged in) vs only the people who have logged in to the account. We do this currently using icons as discussed. I think this requires a review of project modes as well:

• Private, only me: This can possibly be removed and replaced in favour of "Draft" mode?
• Private, authenticated users: Only users who can login to the "private mode" zubhub instance. This is needed if users what to create their own internal community with their own content and some moderator/educator/staff periodically makes the projects public so anyone can view them even without being logged in. If we have this, what is the point of showing locked icons on main view to everyone 🤔 ? Why not just show the projects they chose to make public? (This is how current zubhub works in private mode).
• Public mode: Anyone can view, even when just browsing and not logged in. This can be the default mode.
• Private, Only my friends: We should deprecate this mode I think - it adds to confusion when users are creating projects

Lets discuss more on this //cc @srish @sethiastha

[Fidausym]

Hello @srish @tuxology .
I’m fidausi mohammed and I’m an outreach contributor for the May Internship batch.

I agree that in most cases icons that are not labeled are most times confusing to users, especially icons to features that are not generally used.

First solution: The icons could be labeled. Labeling icons makes it easier for users to understand the functions of icons.

Second solution: Projects can have tags to them or a locked icon on their thumbnail to indicate that the projects need authorization before it can be viewed.

Third solution: I think we should regulate the information showcased to nonmembers. Classified projects which are projects in private mode should not be viewable to anyone who isn’t part of that community or anyone who hasn’t been authorized to view the said project by the project owner.

I feel users should have total control of their projects, they should be given options to choose from, most times options they didn’t know they’d need. Which is majorly choosing to make their private projects visible or not, which syncs with features like accepting requests to view the project in question. I believe users should be given an option where they can hide their private projects from the public eyes ( like a draft) which is only accessible to their theirselves, communities or people they’ve accepted requests from.

[tuxology]

@Fidausym Thanks for your suggestions. Much of what you discussed (except icon labelling) is already part of current ZubHub features (eg. creating projects in draft mode, ability to mark projects private, private mode zubhub to only show projects to authenticated users etc). The issue is around the UI/UX around these features. Would you like to maybe go through current UX around project creation and then share some concrete Figma sketches, highlighting your reasoning around the changes you suggest?

[Fidausym]

@tuxology I’d love to. I’ll start working on it as soon as possible.

[khallow7]

Hey @tuxology @sethiastha @srish and everyone.
I went through the entire project creation process to better understand it, but I found certain things super confusing.

These are the issues I found.

1. When I set the project to the “only me” option, the project is still visible to “authenticated users” → The project should only be seen by me, or it should move to drafts.
2. When I set the project to “only a few Zubhub users” it sends the project to draft, and it's only visible to me. → The project should be visible to authenticated users that you can select.
3. When I try to set “for all registered Zubhub users” then an additional field opens to input usernames. → The project should be visible to all the registered/authenticated users.

The labels names are not rightly ordered. These need to be fixed.

--->
I agree with @sethiastha that all projects in public mode are already public, so there is no need to indicate this with an icon. This would simplify the interface and reduce confusion.

So, how can we improve the creator experience, so they can better understand their project's visibility?
→ We can use well-written labels with icons inside the card, and we can use different colors so that it's easier for the creators to identify what the visibility state is. (Note: These will only be accessed by creators from My Projects)

So, here's my initial idea:

Looking forward to hear your thoughts on these.

[Fidausym]

@tuxology Hello, you asked me last night to create concrete Figma sketches, which should support the solutions I had listed earlier. Here’s my work.

Step 1: I created an account and went through the project creation process and what I found out was.

1• Private projects were not shown to users expect to their creators which is one of the solutions I had brought up, which was to regulate the info for nonmembers of projects.

2• I also noticed that users didn’t have much features or options to regulate the visibility of their projects. I feel in some rare cases users might want to share their private projects to other users who they feel would respect their work or they might just want to share it with their friends and family. So I’d suggest a (a view by friend option)

Step two : I decided to recreate the Zubhub homepage to visually show you the sketches to my solutions.

Solution 1: The icons could be labeled. Labeling icons makes it easier for users to understand the functions of icons.

Solution 1 Feedback: After replicating the homepage. I changed the position of the project status or rather the private and public icons. Which now should be easily spotted by users.

Solution 2: Projects can have tags to them or a locked icon on their thumbnail to indicate that the projects need authorization before it can be viewed.

Solution 2 Feedback: I added large closed padlock icons (private icons) on the private projects thumbnails to indicate to users that the said project is locked.

Solution 3: I think we should regulate the information showcased to nonmembers.

Solution 3 feedback: I had two options which was for private projects to be hidden from all users aside authenticated ones or to regulate the information. I decided to use a toogle to regulate and differentiate amongst public and private projects in page format.

I decided to create three different toogles which should be able to help users filter access for both the public and private projects separately.

I also dropped few comments on my work on Figma which would also explain further the reasons for my choices. You can access the page here

Thank you, I await your feedback.

[khallow7]

Hey @Fidausym I don't think this is the right open issue for the given solution that you provided. This should be in #557

[Fidausym]

@khallow7. Thank you so much. I’ll quickly remove it

[Temabo]

Hello @srish @tuxology Based problem stated, i propose replacing the globe icon on public projects in ZubHub with a label that reads 'Public', and replacing the lock icon on private projects with a label that reads 'Private'. This will make it clear to users what mode their projects are in and eliminate any confusion about the meaning of the icons. We could also just add the label to the Icon. I have designed two variations for this with figma, kindly take a look.

[SafeEHA]

Hi @Temabo I agree with this, adding the text to icons would definitely make it clearer.... @srish @tuxology please can you assign the implementation of his to me

[Faridah-ux]

Hello @sethiastha, I came up with a few ideas on how to best make the project visibility feature understandable for users.

Here is what the projects visibility would look like under the users 'my projects' section.

The first screen is represented with an icon and a text, the hidden eye icon and the visible eye icon. The visible eye suggests when projects are 'public' and the hidden eye suggests when projects are "private".

The second screen is represented with an icon and a text, but with a different icon, the closed lock icon and open lock icon. The closed lock suggests when a project's visibility is 'private' and the open lock suggests when a project's visibility is 'public'.

The third screen is represented with just an icon, the closed lock icon and the open lock icon. The closed lock suggests when a project's visibility is 'private' and the open lock suggests when a project's visibility is 'public'.

The fourth screen is represented with just one icon, the closed lock icon. The closed lock icon suggests when a project's visibility is 'private' and the absence of an icon suggests thats its public.

[Faridah-ux]

Hello @sethiastha, here is an idea of what the projects visibility would look like on the landing page.

The first screen is represented with an icon and a text, the hidden eye icon and the visible eye icon. The visible eye suggests when projects are 'public' and the hidden eye suggests when projects are "private".

The second screen is represented with an icon and a text, but with a different icon, the closed lock icon and open lock icon. The closed lock suggests when a project's visibility is 'private' and the open lock suggests when a project's visibility is 'public'.

The third screen is represented with just an icon, the closed lock icon and the open lock icon. The closed lock icon suggests when a project's visibility is 'private' and the open lock icon suggests when a project's visibility is 'public'.

The fourth screen is represented with just an icon, the hidden eye icon and the visible eye icon. The hidden eye icon suggests when a project's visibility is 'private' and the visible eye icon suggests when a project's visibility is 'public'.

The fifth screen is represented with just text. The text 'private' suggest that project's visibility is 'private' and the text 'public' suggests that project's visibility is 'public'.

The sixth screen is represented with just one icon, the closed lock icon. The closed lock icon suggests when a project's visibility is 'private' and the absence of an icon suggests that it's public.

The seventh screen is represented with just one icon, the hidden eye icon. The hidden eye icon suggests when a project's visibility is 'private' and the absence of an icon suggests that it's public.

[sethiastha]

@Faridah-ux Great explorations. I liked the use of the eye symbol, and prefer the 4th option from the landing page screens.

[iamhks]

Hi @sethiastha Thankyou for the input. I just had a point in mind before I start with the development. As mentioned by Srishti in the description of the issue:

Recently, we received feedback from an educator that the globe icon is super confusing and not clear what it means.

I was thinking of the UX as a student who is a total noob in tech. Is the eye icon very clear that it's meant for project visibility? Whether it is meant to hide/un-hide the project from the public? Not to mention there is another eye symbol for view count below.

That is why I preferred the less modern but practical design of the fifth screen. Would love to have your comments.

[JessicaItepu]

Hi @srish, i can see that this project is still open. Kindly assign this to me.

[ladyami]

@srish I am a designer and developer. I am really interested in the task. Can you assign it to us, ma'am?

[aqsaaqeel]

If we can finalize a design, I would love to work on implementing the changes! @srish @tuxology

[outcast-02]

Hi @srish I made a design.
There might be some mistakes as I took reference from the Zubhub figma sketch file ( can't see the website as its not loading for me ) so I'm not sure how the draft mode visibility looks right now.

image

[srish]

@outcast-02 Could you share a few more variations for the draft mode icon?

[outcast-02]

Hi @srish! I did some research and made variations as you suggested. I have added some text to the icon designs to help better with the understanding.

[khallow7]

@srish @sethiastha @tuxology
Two different exploration for draft mode icon. We can either use icon + draft text or just the icon for drafts.

The other major issue is the icon inconsistencies on the side nav bar. Some icons are smaller and some are larger in size with different border radius and overall feel.
Especially My Drafts icon have a-lot more details compared to other icons. A unified icon system like phosporus-icons should be used through out the website.

Let me know what you think about these. Should I open up new issue to update icons for side navbar?

[pachougu]

@srish i would love to explore this issues if assigned to me

[outcast-02]

@srish i added some variations i made in Figma to give a better visual
let me know your thoughts!

[khallow7]

@srish i would love to explore this issues if assigned to me

You don't need to be assigned if you are exploring ideas. You can explore your ideas and just post your designs here.

[Marhiposa]

Hello @srish @tuxology , i designed a page of how the projects visibility would look like on the landing page and added a few changes.

HERE IS THE SCREEN OF THE LANDING PAGE CURRENTLY.

Here is an improved UX around projects visibility.

• Removed the globe icon, because i believe theres no need for the globe there since there would be option to make it public or private (which i am still working on)
• I added a video time frame since it will represent the video content just for viewers expectation and also can lead to a better viewers satisfaction.
  I am currently designing the drafts section where there will be option to post publicly or privately.
  @tuxology @srish i would love a feedback on what you think .

[Marhiposa]

hello @sethiastha @iamhks @tuxology here is an idea of how my projects will look with the option of having the private mode. i feel users should have total control of their project which is why there is an option to have private mode there.
and they can swipe to view their public or private projects. pls let me know what you think. i will also go ahead and design the draft section.

This is how the private section will look like.

[Shulamite54]

@srish , @tuxology ,I design a simple Zubhub interface to indicate the draft mode, please check it out.
thanks

[Temabo]

Hey @Shulamite54 Nice job!

Although you are not using ZubHub's font and Logo, you can get them on this figma file; https://www.figma.com/file/hidnBfP4kNWl7RDxy3aUZI/ZubHub?type=design&mode=design&t=nwkWXE4oSBUIJ3JC-1

[Temabo]

Hello @srish
To Improve the UX around project's public/draft mode visibility;
I removed the globe from the featured projects

I also came up with a few suggestions for the draft icon

This is a mockup on one of the icons in use in the draft page;

[miracle-E]

Hello @srish I removed the globe icon from the projects in order to improve the UX around the page.

[miracle-E]

I have also worked on the draft page. Please check it out

[Marhiposa]

Hi @srish. Improve the UX around project's public/draft mode visibility

This is how the draft mode will look like. pls your feedback would be highly appreciated.

[Dumzy006]

Hello @srish ,
I made some adjustment to Improve the UX around project's public/draft mode visibility;

I took out the globe from the featured projects

Then for the draft page I made use of icon and text. so that it would be understandable to a non tech savvy rather than making use of only icon

[PascalAnuche]

On the Create Project feature, I observed that when users click on the Created projects, it takes them back to the profile page before they make any changes on their project.

I came up with a design solution by introducing an Edit CTA button that enables the users to edit their projects without having to go through the profile page for them to easily edit their posts and publish them. I also removed the globe icon from confusing the users because when a post i published, it is already been made public to the user audience.

@srish

[DonPresh]

Here are some of the adjustments I made to improve around the project's public and private visibility:

Drafts.

I made 6 different variations of how the draft will appear for the users.
Icon and label
I leveraged accessibility for users with cognitive disability and labelled the icons and also use a background thats more visible for the icon and label to be clear.

My projects

Thought process

The visible project shows without an icon since it’s only visible to the user that uploaded it. The draft comes with the draft icon and label

I labelled the icons in the second part of the design for accessibility purposes and used only text for the 3rd iterations

Featured projects

1. No icons

Thought process

We want to pull unauthenticated users to create account so I blurred the last part out so it will spur them to create account. since there's the blurred part, there's no need for an icon here.

2. Labelled Icons

3. Icons only
   

@srish please review. Feedback will be appreciated!

[ladyami]

Our esteemed mentor, @srish, has made a request for us to come to a consensus on the design that we find most suitable. For this purpose, I have taken the initiative of implementing a voting system link within our Zulipchat. I urge everyone to carefully assess the available options and cast their vote. This will enable us to finalize the design and subsequently allow the developer to commence the task of bringing it to life.

[coderatomy]

Hi @srish. Improve the UX around project's public/draft mode visibility

This is how the draft mode will look like. pls your feedback would be highly appreciated.

Love this most. Right inline with the design. Nice work @Marhiposa

[srish]

It was a close call, but let's go with this icon #556 (comment).

[Temabo]

Hello @srish To Improve the UX around project's public/draft mode visibility; I removed the globe from the featured projects

I also came up with a few suggestions for the draft icon

This is a mockup on one of the icons in use in the draft page;

This is the link to the figma file for this: https://www.figma.com/file/A1GYQtENXSmPUzB63MTgPj/outreachy?type=design&node-id=678%3A139&mode=design&t=oStKX6QdLjYiBFV6-1

Ready to be taken up by a developer

[manoahLinks]

working on this

[Fidausym]

Hello @srish @tuxology @sethiastha this is the second time I'm contributing on this and I'll like to point out a few problems I've noticed and propose a new idea to Improve the UX around project's/draft mode visibility

1. Firstly, According to the principle of similarity when items share some visual characteristic, they are assumed to be related in some way. I believe that seperating "My project" and "My draft" clashes with the goals of the feature itself. Both features were added to simplify the organization of data for projects and I believe should be together for users to understand their similarity in action
2. Secondly, the principle of familiarity states that people have the tendency to remember and develop a preference for things they're more familiar with. I believe we should adopt a layout that is simple to understand and that is also popular amongst users.
3. Thirdly, according to UX principle of simplicity, we're expected to help users achieve goals efficiently using intuitive UIs and minimal roadblocks. I'm sure we can all notice the clutter of information in this page.

SUGGESTION:

1. Instead of seperating "My project" and "My draft", we should fix them under "My Projects" to create a feeling of similarity
2. Instead of using icons to differenciate between public and draft projects, we should use "Published" to identify public projects and "Draft" to identify projects that are still in draft
3. Add a search button and filter to enhance accessibility
4. Add a data visualization layout that simplifies the important details of the project
5. Use a grey background picture with an image icon on it to identify draft projects.
6. Add "More option icon" to simplify information
7. Add a "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later,

My proposal for this solution are:

1. Project Public mode Visibility

• Sample 1;
  Here I seperated "My project" and "My draft", fixed them under "My Projects" to create a feeling of similarity. I also differenciated between public and draft projects, by using"Published" to identify public projects and "Draft" to identify projects that are still in draft. I also added a search button and filter to enhance accessibility and added a data visualization layout that simplifies the important details of the project. I also added an "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later

-Sample 2:
Here I replaced text with icons for the data visualization

-Sample 3;
Here I removed the project stats visible on the page and added a "Project stats" button inside the "more options" bar to hide all the data on projects.


5350520/9dbefe1e-0a36-4157-93dd-2c063ca70536)

2. Project Draft mode Visibility
   Here I used a grey background picture with an image icon on it to identify draft projects. I also added "More option icon" to simplify information.,
   
   
   -Sample 3;
   Here

[coderatomy]

Very nice

…

On Wed, Oct 25, 2023 at 2:11 AM Nana Fidausi Mohammed < ***@***.***> wrote: Hello @srish <https://github.com/srish> @tuxology <https://github.com/tuxology> @sethiastha <https://github.com/sethiastha> this is the second time I'm contributing on this and I'll like to point out a few problems I've noticed. 1. Firstly, According to the principle of similarity when items share some visual characteristic, they are assumed to be related in some way. I believe that seperating "My project" and "My draft" clashes with the goals of the feature itself. Both features were added to simplify the organization of data for projects and I believe should be together for users to understand their similarity in action 2. Secondly, the principle of familiarity states that people have the tendency to remember and develop a preference for things they're more familiar with. I believe we should adopt a layout that is simple to understand and that is also popular amongst users. 3. Thirdly, according to UX principle of simplicity, we're expected to help users achieve goals efficiently using intuitive UIs and minimal roadblocks. I'm sure we can all notice the clutter of information in this page. *SUGGESTION*: 1. Instead of seperating "My project" and "My draft", we should fix them under "My Projects" to create a feeling of similarity 2. Instead of using icons to differenciate between public and draft projects, we should use "Published" to identify public projects and "Draft" to identify projects that are still in draft 3. Add a search button and filter to enhance accessibility 4. Add a data visualization layout that simplifies the important details of the project 5. Use a grey background picture with an image icon on it to identify draft projects. 6. Add "More option icon" to simplify information 7. Add a "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later, *My proposal for this solution are*: 1. *Project Public mode Visibility* - *Sample 1*; Here I seperated "My project" and "My draft", fixed them under "My Projects" to create a feeling of similarity. I also differenciated between public and draft projects, by using"Published" to identify public projects and "Draft" to identify projects that are still in draft. I also added a search button and filter to enhance accessibility and added a data visualization layout that simplifies the important details of the project. *NOTE*: We can also add a "Project stats" button to hide all the data on projects [image: Published 1] <https://user-images.githubusercontent.com/105350520/277826718-fc850c7e-c21f-4b84-9845-1363e839d81d.png> [image: Published drop bar menu] <https://user-images.githubusercontent.com/105350520/277826818-65a93fb9-fd07-4e17-9b65-46f2b1f96156.png> -*Sample 2*: Here I replaced text with icons for the data visualization [image: Published 2] <https://user-images.githubusercontent.com/105350520/277827718-89e4eb58-4cf7-455a-ad14-9fa4393e52f1.png> 1. *Project Draft mode Visibility* Here I used a grey background picture with an image icon on it to identify draft projects. I also added "More option icon" to simplify information and added an "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later, [image: Draft 1] <https://user-images.githubusercontent.com/105350520/277829540-dddcc0cd-9358-4e0b-abdc-d8aa52d2d91a.png> [image: Draft drop down menu] <https://user-images.githubusercontent.com/105350520/277829555-501b64a4-94f5-42c4-a59c-7a6639a4a7bb.png> — Reply to this email directly, view it on GitHub <#556 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BB2AS2YCXJXWIQI3OMOIFQLYBBDKHAVCNFSM6AAAAAAUTG3CROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZYGE4TQMRXGQ> . You are receiving this because you commented.Message ID: ***@***.***>

[Fidausym]

Hello @srish @tuxology @sethiastha this is the second time I'm contributing on this and I'll like to point out a few problems I've noticed and propose a new idea to Improve the UX around project's/draft mode visibility

1. Firstly, According to the principle of similarity when items share some visual characteristic, they are assumed to be related in some way. I believe that seperating "My project" and "My draft" clashes with the goals of the feature itself. Both features were added to simplify the organization of data for projects and I believe should be together for users to understand their similarity in action
2. Secondly, the principle of familiarity states that people have the tendency to remember and develop a preference for things they're more familiar with. I believe we should adopt a layout that is simple to understand and that is also popular amongst users.
3. Thirdly, according to UX principle of simplicity, we're expected to help users achieve goals efficiently using intuitive UIs and minimal roadblocks. I'm sure we can all notice the clutter of information in this page.

SUGGESTION:

1. Instead of seperating "My project" and "My draft", we should fix them under "My Projects" to create a feeling of similarity
2. Instead of using icons to differenciate between public and draft projects, we should use "Published" to identify public projects and "Draft" to identify projects that are still in draft
3. Add a search button and filter to enhance accessibility
4. Add a data visualization layout that simplifies the important details of the project
5. Use a grey background picture with an image icon on it to identify draft projects.
6. Add "More option icon" to simplify information
7. Add a "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later,

My proposal for this solution are:

1. Project Public mode Visibility

• Sample 1;
  Here I seperated "My project" and "My draft", fixed them under "My Projects" to create a feeling of similarity. I also differenciated between public and draft projects, by using"Published" to identify public projects and "Draft" to identify projects that are still in draft. I also added a search button and filter to enhance accessibility and added a data visualization layout that simplifies the important details of the project. I also added an "Unpublish" option to temporarily allow users pull content off your server (maybe for editing reasons or) with the possibility of adding it back later

-Sample 2: Here I replaced text with icons for the data visualization

-Sample 3; Here I removed the project stats visible on the page and added a "Project stats" button inside the "more options" bar to hide all the data on projects. 5350520/9dbefe1e-0a36-4157-93dd-2c063ca70536)

2. Project Draft mode Visibility
   Here I used a grey background picture with an image icon on it to identify draft projects. I also added "More option icon" to simplify information.,
   
   
   -Sample 3;
   Here

@srish @tuxology @sethiastha Hello, Please I need your feedback on this

[srish]

It was a close call, but let's go with this icon #556 (comment).

Thanks everyone for your suggestions! Please see my comment above.