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.

[srish]

@JessicaItepu Looks like you are interested in UX/UI design. If so, you can propose an idea here in this task, and as and when a developer shows interest, we can implement it. The task needn't be assigned to you in this case.

[Boluwatifey1]

@srish can I join @JessicaItepu, I am also interested in the design

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