zubhub
zubhub copied to clipboard
unstructuredstudio
(feat) Improve follow button
Summary
The follow button in ProjectDetails.jsx has 3 states for the following, not following and unfollowing scenarios. The label, class name, and color of the button depend on the state which is changed everytime the button is clicked.
Closes #909
Changes
- added a following state with the initial value of notFollowing
- created two constants objects for mapping the state values and appropriate button props.
- created a function to handle button click, which calls
toggleFollowwhen necessary and updates the following state using constants - implemented the logic in useEffect to set the following state correctly on the first mount
- added new colors and classes for the styling
PS:
I implemented this feature only for the ProjectsDetails view for now. I would be happy to receive some feedback before carrying this to other views. I have some doubts about where to carry the constants for every view to use commonly. Thanks, waiting for reviews 🚀
Final version
https://github.com/unstructuredstudio/zubhub/assets/92817363/50015a6b-cc13-4387-ac05-d94fd67e997b
hello @brrkrmn , thanks for working on this! (and everyone else that contributed to the UX). I was a bit confused when you mentioned that the button has three states but I got the context when read up the issue. Here is what I think we should do, I think the hover state of the second button state should be unfollow too. That makes more sense and is the way other social media sites do it (e.g. twitter)
thank you @NdibeRaymond, to check if I understood correctly, is this what you're looking for?
https://github.com/unstructuredstudio/zubhub/assets/92817363/d43530a1-ba3b-4c01-b37d-5c80486ea49c
If this looks okay then it's ready
thank you @NdibeRaymond, to check if I understood correctly, is this what you're looking for?
Screen.Recording.2023-11-12.at.12.21.32.mov If this looks okay then it's ready
Almost there. What I meant was that the unfollow on hover over following should be exactly the same as the third state unfollow. It should not be two different unfollow styles. They should both be exactly the same
@NdibeRaymond okay now we show the unfollow state on hover. One last question, do we need to show the unfollow button both on hover and after click? Formerly, we used the unfollow state to make users click twice if they want to unfollow someone, it was like an additional checking to make sure if they really want to unfollow.
With my current code, when the user hovers over the following button, they see the unfollow button and then when they click, they do not see the unfollow button again, so they only click once to unfollow someone. Like in this video:
User only clicks once when they hover :
https://github.com/unstructuredstudio/zubhub/assets/92817363/da4c8ea4-ed6e-4db2-a9a3-529cb1aa95d9
If the user does not leave their mouse from the button and keep clicking, the button works as formerly
https://github.com/unstructuredstudio/zubhub/assets/92817363/90c0d0bf-39c2-48a8-810e-ead719cccee6
Now that we added the unfollow state on hover, do users need to see the unfollow state even after clicking? It may be repetitive but wanted to make sure
@NdibeRaymond okay now we show the unfollow state on hover. One last question, do we need to show the unfollow button both on hover and after click? Formerly, we used the unfollow state to make users click twice if they want to unfollow someone, it was like an additional checking to make sure if they really want to unfollow.
With my current code, when the user hovers over the following button, they see the unfollow button and then when they click, they do not see the unfollow button again, so they only click once to unfollow someone. Like in this video:
User only clicks once when they hover :
Screen.Recording.2023-11-12.at.18.00.10.mov If the user does not leave their mouse from the button and keep clicking, the button works as formerly
Screen.Recording.2023-11-12.at.18.16.59.mov Now that we added the unfollow state on hover, do users need to see the unfollow state even after clicking? It may be repetitive but wanted to make sure
I think the do you want to unfollow this user prompt is useful. We can bring it back. With this hover unfollow the third state unfollow will likely look like an extension of the hover unfollow and that's fine. So bring back the third state unfollow and the prompt. Again thanks for working on this!
Hello @brrkrmn , I checked and the prompt still doesn't appear when I click on the button. Can you fix that?
hey @NdibeRaymond, I think I misunderstood. We never showed a "do you want to unfollow this user" prompt. Right now, the user sees 'unfollowing' state both when hovering over the 'following' state and after clicking it. Do you suggest adding a prompt in addition to this? And how would we show the prompt, like in a modal?
OK, I see that we have iterated a lot on this. I think some points are good. I wanted to also bring one more point - we need to think about mobile users (our primary users) who don't have hover mechanism available for them to "prompt" them. I think for mobile users, lets keep it very simple - If you are already following, "Follow" becomes "Unfollow" and when they click it, it changes back to "Follow" since you are now unfollowed.
thanks @tuxology, the button works as you explained for mobile users, and desktop users can see the hovered state. If there's not anything else, this is ready now
thanks @tuxology, the button works as you explained for mobile users, and desktop users can see the hovered state. If there's not anything else, this is ready now
@brrkrmn can you share a video of the current behaviour here? this is so we have something to reference to while making the reviews. For my previous comment, I think to understand what I think is probably the best and less confusing flow, you should look at how follow and unfollow work on a site like twitter (the same interactions but with our own colors and styles)