Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search is broken for non-logged in users #802

Open
khallow7 opened this issue Oct 5, 2023 · 60 comments · Fixed by #918 or #1087 · May be fixed by #997
Open

Search is broken for non-logged in users #802

khallow7 opened this issue Oct 5, 2023 · 60 comments · Fixed by #918 or #1087 · May be fixed by #997
Assignees
Labels
bug Something isn't working good first issue Good for newcomers high priority

Comments

@khallow7
Copy link

khallow7 commented Oct 5, 2023

*Issues
Problem 1: When searching for projects project suggestion menu does not show up
Problem 2: Searching for creators leads to blank page
Check the embedded video for more clarity

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://zubhub.unstructured.studio when you are not logged in.
  2. Select "Projects" option from the dropdown, type a keyword in the search bar and try searching for a project. See error.
  3. Select "Creators" option from the dropdown, type a keyword in the search bar and try searching for a creator. See error.
  4. Select "Tags" option from the dropdown, type a keyword in the search bar and try searching for a tag. See error.

Expected behavior
Solution 1. Each of the three options should direct users to the corresponding project, creator, or tag search results.
Solution 2. Disable the search bar completely and not have non logged in users have access to key features.
Solution 3. Restrict search to first 4-5 results. Then below the page, show "Log in to view more" button.

Need input from project maintainers & designers which option might be better.

Screenshots

Recording.2023-10-05.224655.mp4
@Mutombe
Copy link

Mutombe commented Oct 5, 2023

I tried and it worked for me
Screenshot (75)

@srish srish changed the title Search function does not work properly Search is broken for non-logged in users Oct 5, 2023
@srish srish added bug Something isn't working good first issue Good for newcomers high priority labels Oct 5, 2023
@Mutombe
Copy link

Mutombe commented Oct 5, 2023

Assign it to me

@Temabo
Copy link

Temabo commented Oct 5, 2023

@srish If a non-logged in user should not have access to projects, creators and tags, I think it would be a good idea to simply disable or remove the search bar entirely. Alternatively, we can leave the search bar and when a non-logged in user clicks on it they see a pop-up that says “Sign Up to view projects” and a “Sign UP” CTA. What do you think?

@yokwejuste
Copy link
Collaborator

I tried and it worked for me Screenshot (75)

it was clearly said above "For non-logged in users" and your screenshot is showing you're logged-in

@yokwejuste
Copy link
Collaborator

yokwejuste commented Oct 6, 2023

@srish If a non-logged in user should not have access to projects, creators and tags, I think it would be a good idea to simply disable or remove the search bar entirely. Alternatively, we can leave the search bar and when a non-logged in user clicks on it they see a pop-up that says “Sign Up to view projects” and a “Sign UP” CTA. What do you think?

I think we should disable the search for non logged in users, except if we are to make search through feature project only.

@srish, @tuxology I'm calling your attention to this issue

@rak16
Copy link

rak16 commented Oct 6, 2023

@yokwejuste @Temabo Your suggestions makes sense and I second that we remove the search for unauthenticated users. We already have a set of projects showing up on the hero page and there is a CTA reading - "Login to view more". So removing the search completely should be fine.

@GloriaKaduru
Copy link

GloriaKaduru commented Oct 6, 2023

@srish A better solution to this would be @khallow7 ‘s Solution 3.

The Search feature should be available to all types of users, just a little restricted for non-logged on users. Show users 4-5 search options that match search input, then ask them to Login/Signup for more search results.

@ladyami
Copy link

ladyami commented Oct 6, 2023

@srish I think the search bar should not be removed for none login user when they search and see the platform have the project they are looking for, when they click on view a modal will pop up asking them to sign in or sign up to view in that case this will encourage to take the actions

@coderatomy
Copy link
Collaborator

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

@khallow7
Copy link
Author

khallow7 commented Oct 6, 2023

From a developer perspective, accessing projects on the site necessitates a request to the /creator/${username}/projects endpoint, which requires a valid username parameter. This implies that users must be logged in to access this functionality.

Additionally, the presence of the bar enhances the overall design aesthetics. It might be worth considering implementing a feature for "global projects" that can be viewed even when users are not logged in, thus enhancing the accessibility and visibility of projects to a broader audience. Something like sample projects

Hmm, interesting.
The point is to motivate users to log in to the platform. I don't think having "global projects" will help in that. It will be the same as showing "all projects" before logging in.

@coderatomy
Copy link
Collaborator

Not really, @khallow7. I believe users should have insight into the app's functionality before committing to an account. Implementing a feature showcasing sample projects is crucial in this context. It can serve as a compelling incentive for users to engage with the platform. Regarding login, these sample projects should be visible, but users should be prompted to log in to access additional content.

@khallow7
Copy link
Author

khallow7 commented Oct 6, 2023

Not really, @khallow7. I believe users should have insight into the app's functionality before committing to an account. Implementing a feature showcasing sample projects is crucial in this context. It can serve as a compelling incentive for users to engage with the platform. Regarding login, these sample projects should be visible, but users should be prompted to log in to access additional content.

For insights into the app's functionality, there's a "featured projects section" just below the hero section to do that exact thing.

@coderatomy
Copy link
Collaborator

Roger that! Design wise, I think this feature shouldn't be removed. Maybe let's prompt the user to login first once tries doing this action, then redirect back to this page. How about that @khallow7?

@Marhiposa
Copy link

HI @khallow7 @coderatomy @srish i redesigned a landing page header concerning what you discussed . i personally think the long search bar is not needed, i decided to make it small i also replaced the profile logo for a CTA button (Sign in). then instead of the long search bar i think the nav bar would direct users to where they need to go on the landing page.
what do you think ?

landing page

@khallow7
Copy link
Author

khallow7 commented Oct 6, 2023

Roger that! Design wise, I think this feature shouldn't be removed. Maybe let's prompt the user to login first once tries doing this action, then redirect back to this page. How about that @khallow7?

It would be super useful if we could do some A/B testing to test which works the best with users.

@Marhiposa
Copy link

@khallow7 what do you think ?

@Marhiposa
Copy link

@coderatomy pls any suggestion

@coderatomy
Copy link
Collaborator

Nice work @Marhiposa. Am curious to know if the search bar won't show up once a user is logged. Am not privileged to decide. But this LGTM, thanks alot.

@coderatomy
Copy link
Collaborator

Ohh! I see. I think this is better looking and pretty straight forward. Though I agree with @khallow7, an A/B test can help in such a scenario

@Temabo
Copy link

Temabo commented Oct 6, 2023

@GloriaKaduru @ladyami

I see it from your POV as well, This way non-logged in users get an overview of a few of the projects they would have access to after they sign up.

@GloriaKaduru
Copy link

GloriaKaduru commented Oct 6, 2023

@srish @khallow7 I designed what I think the Search Feature should look like for non-logged in users.

Exploration 1: Showing a brief overview of what the search results are but restricting them from looking further by prompting them to log in or sign up.

Search feature variant 1

Exploration 2: Having a pop up come up when they try to make a search. I made this variation because I figured that the first may not be as simple as this to code and may require the seach query to be pulled everytime. Also, the copy is more generic and can be used for any search category (Projects, Creators or Tags)

Search Feature variant 2

Please let me know your thoughts on which design fits better. Here's the link to the design file. https://www.figma.com/file/nyUduEpFmVZ05xA8rt28Mt/Search-Feature-For-Non-Logged-In-Users?type=design&node-id=0%3A1&mode=design&t=iJYzp3aXqBCLdeOf-1

@Temabo
Copy link

Temabo commented Oct 6, 2023

@GloriaKaduru very clean design! I am leaning towards the first exploration, I believe it works. Although, Zubhub buttons are rounded with a corner radius of 20px

@ladyami
Copy link

ladyami commented Oct 6, 2023

@GloriaKaduru @ladyami

I see it from your POV as well, This way non-logged in users get an overview of a few of the projects they would have access to after they sign up.

@Temabo You are right That is Ux standard I think

@ladyami
Copy link

ladyami commented Oct 6, 2023

@srish @khallow7 I designed what I think the Search Feature should look like for non-logged in users.

Exploration 1: Showing a brief overview of what the search results are but restricting them from looking further by prompting them to log in or sign up.

Search feature variant 1

Exploration 2: Having a pop up come up when they try to make a search. I made this variation because I figured that the first may not be as simple as this to code and may require the seach query to be pulled everytime. Also, the copy is more generic and can be used for any search category (Projects, Creators or Tags)

Search Feature variant 2

Please let me know your thoughts on which design fits better.

wow Good job @GloriaKaduru look really Amazing but if you can decrease the font size on the first screen "log in or sign ........." text it will look more Amazing and the second screen log in to your zubhub account..........., you can remove zubhub in the sentence and also decrease the size

@Mutombe
Copy link

Mutombe commented Oct 6, 2023

I tried and it worked for me Screenshot (75)

it was clearly said above "For non-logged in users" and your screenshot is showing you're logged-in

My mistake

@aqsaaqeel
Copy link
Contributor

@GloriaKaduru I really like your design and the first exploration seems best because it prompts the user to sign in.

@coderatomy
Copy link
Collaborator

Right @tuxology. A note everyone, I have a PR here #825. It just needs a few tweaks

@maureen-oz
Copy link

Hey @khallow7 I just read through all the comments and found out that the problem 1 that you stated has not been worked on. If the user is logged in, I believe it's a better experience to show these suggestions during typing as well.
I will take on this task and design the suggestions during search. Thank you.

@maureen-oz
Copy link

Dashboard for students-suggestions during typing
I'll like to know your thoughts on this @khallow7
The views on each suggestion would help capture users on what project to view after typing.

@benndip
Copy link
Contributor

benndip commented Oct 18, 2023

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239

And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

@yokwejuste
Copy link
Collaborator

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239

And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

Hey @benndip are you working on this?

@benndip
Copy link
Contributor

benndip commented Oct 18, 2023

Nice work @maureen-oz , but there is already an agreed design for this, which is the design @srish confirmed here: https://github.com/unstructuredstudio/zubhub/issues/802#issuecomment-1758796239
And so she also said it is ready to be picked by a developer on the Zulip chat. Hence that's the design we are to go with.

Hey @benndip are you working on this?

Yes @yokwejuste , I am will be opening a PR soon

@coderatomy
Copy link
Collaborator

coderatomy commented Oct 18, 2023

Sorry @benndip and @yokwejuste. Perhaps you saw my comment above. Let's try to follow along with each other. Already pushed a fix for this

@benndip
Copy link
Contributor

benndip commented Oct 18, 2023

Oh yeah @coderatomy , I saw your comment already, I think like @srish said, it's okay to have multiple PR to an issue, so that we can converse and compare the best that fits and go with it. Great work @coderatomy

@coderatomy
Copy link
Collaborator

Alright. But I hope you implementing a different design of the two?

@benndip
Copy link
Contributor

benndip commented Oct 18, 2023

Well, it's the same accepted design, which @srish said, but with a different logic to what you have.
It's fine, I think it causes no issues.

@coderatomy
Copy link
Collaborator

coderatomy commented Oct 18, 2023

Devs, when implementing this login/route protection UI element, please ensure that this is implemented as a reusable component that can be applied over specific pages as required. We will for now apply this over search page and other pages we want to redirect unauthenticated users from the home page.

Update the PR here #825 and made the ProtectedRoute component reusable @tuxology

@tuxology
Copy link
Member

I have merged route protection via #825 @coderatomy We will need to add some more routes and exclude some - can be done later. Eg /projets/create etc. Looking at #918 now 👍

@tuxology
Copy link
Member

tuxology commented Oct 27, 2023

@coderatomy I've reverted #918 Since the feature was not working as intended on production. Upon searching as non logged in user, we were not seeing first few results and just showing Oops error!

image

We need to reconsider what search means for logged in and non-logged in users since there are some more nuance:

When you interact with search bar as non logged in user, following things happen:

  • If you start typing in tags, creators you get suggestions in dropdown
  • If you start typing in projects, you don't see suggestions in dropdown - This is fine ✅
  • If you finish typing in a project and click search, you don't see results
  • If you finish typing in tags, creators, projects and hit search you get 404.

The overarching question is how should this UX work? @srish and I are discussing this and will paste the expected UX flow here. Since we have the required components now, it should be trivial to do this with some alterations to #918

@tuxology tuxology reopened this Oct 27, 2023
@srish
Copy link
Member

srish commented Oct 27, 2023

After discussing with @tuxology, this is the expected flow:

In a non-logged state:

  • The search bar should never show any results for projects, tags, and creators in the dropdown.
  • For projects, creators, & tags, when someone types a word, for example, “cardboard,” and hits enter, they should be able to see up to 4 results on the screen with the login modal.
  • The creator profile and project page should be accessible with a direct link but should have the same UI as seen when in the logged-in state. Right now, there are no margins on the page.
  • For projects, creators, & tags, when someone types a word, for example, "Arduino," and hits enter and there are no results available for the search keyboard, we should show some message that the search didn't find any results and show the login modal.

@coderatomy
Copy link
Collaborator

Alright. I have seen all the comments. Let me push an update

@brrkrmn brrkrmn moved this to Todo in Outreachy 27 Dec 6, 2023
@brrkrmn brrkrmn self-assigned this Dec 6, 2023
@brrkrmn brrkrmn moved this from Todo to In Progress in Outreachy 27 Dec 22, 2023
@brrkrmn brrkrmn moved this from In Progress to Under Review in Outreachy 27 Jan 19, 2024
NdibeRaymond pushed a commit that referenced this issue Jun 17, 2024
* style page and add login card
* fix misaligned login form in search results
* change styles for creator search
* implement no results found design
* make results one row
* made some major refactors

Issue: #802
Signed-off-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
NdibeRaymond pushed a commit that referenced this issue Jun 17, 2024
* style page and add login card
* fix misaligned login form in search results
* change styles for creator search
* implement no results found design
* make results one row
* made some major refactors

Issue: #802

Signed-off-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
Co-authored-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
NdibeRaymond pushed a commit that referenced this issue Jul 17, 2024
* style page and add login card
* fix misaligned login form in search results
* change styles for creator search
* implement no results found design
* make results one row
* made some major refactors

Issue: #802

Signed-off-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
Co-authored-by: Ndibe Raymond Olisaemeka <rolisaemeka-ctr@wikimedia.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment