Improve follow button design on creator's profile

[Dumzy006]

Hello @srish I feel there should be a difference between the follow and unfollow button. so that the user can easily know when they are following or not. Currently the buttons are similar and it could be confusing to the user. I also added a modal to confirm that the user really wants to unfollow the creator similar to when a user wants to delete a project

what do you think?

See screenshot of the current design

See improved design on the prototype below

https://github.com/unstructuredstudio/zubhub/assets/136137889/6e0658b9-5e48-40d9-829f-fdd7e60dcae5

Screenshots of improved design

[srish]

Nice idea! Could we come up with other design suggestions? Preferably a design that would not take up too much of a dev's time and is a remix of an existing design we come across on other platforms. This one looks very similar to Twitter's.

[Dumzy006]

Okay @srish

[Dumzy006]

Hello @srish Came up with two suggestions, Which are when you click on the follow button it changes to an unfollow button which is either in red or blue stroke. Which do you prefer? See screenshots below

[mehreeee]

Hi @srish @Dumzy006 I think adding icons will improve the user experience.

1. For the follow button, I added a "plus" icon that signifies to the user that if they follow the creator, their follower count increases.
2. I added a "check" icon that signifies to the user that they are following the creator, and I slightly reduced the button color opacity.
3. I added a "close" icon that shows the user they're about to unfollow the creator and changed the button color.

[mehreeee]

Here is a prototype of how this should work

https://github.com/unstructuredstudio/zubhub/assets/105458062/3ddc22b6-f6c7-4292-8ace-0e66652312fc

@srish @Dumzy006

[brrkrmn]

Hey, @Dumzy006 great work! I really like the icons, they make the buttons certainly more meaningful. I personally think showing a modal when the user tries to unfollow is more explanatory than clicking the same button twice to confirm an action. Waiting for mentors' comments to implement the design, thanks 🙂

[mehreeee]

Hey, @Dumzy006 great work! I really like the icons, they make the buttons certainly more meaningful. I personally think showing a modal when the user tries to unfollow is more explanatory than clicking the same button twice to confirm an action. Waiting for mentors' comments to implement the design, thanks 🙂

Hi @brrkrmn I'm glad you like the icons. I don't think there's a need for the pop-up modal because icons can convey information more quickly and efficiently than text alone. This can reduce the cognitive load on users, making it easier for them to understand and interact with the interface. Once users have learned the meaning of an icon, they can quickly recognize it in future interactions without having to read text. Let me know when you're ready to implement the design. Thank you

[Dumzy006]

Hello @srish based on @brrkrmn suggestion I came up with these improvement which includes

1. Icon for follow and unfollow buttons
2. A modal pops up when the user tries to unfollow

See screenshots below

This modal pops up when a user tries to unfollow

[brrkrmn]

I understand @mehreeee, I am okay with both approaches. And thank you guys for your designs 💟 I'm ready to implement but let's wait for @srish to pick a design first.

[srish]

@mehreeee @Dumzy006 Thanks for your designs! After talking with @tuxology, here is our suggestion.

Let's go with @mehreeee's design here: https://github.com/unstructuredstudio/zubhub/issues/909#issuecomment-1766106002. @brrkrmn While implementing, make sure that you follow the padding as in @Dumzy006's design (between icon & text). Also, for the green & red colors used for the following & unfollow state, make sure you use something from existing colors if possible. If not, ask @mehreeee @Dumzy006 to suggest some color suggestions :-) Thank you!

[brrkrmn]

@srish sure! On it 🚀

[brrkrmn]

@mehreeee, @Dumzy006 Hello guys I would like to get your suggestions for the color choices while I implement the logic

With the existing colors, the buttons will look like these:

Not following state:

Following state: I think we need a better one

Unfollow state: we have two options for this one

[mehreeee]

Hi @brrkrmn for the following state, I came up with 2 suggestions

Hex code: #378470

Hex code : #368ED5

For the unfollow state, I prefer your second option. Thank you

[brrkrmn]

Thanks! @mehreeee, we can get the green one since blue is used for the first state. @Dumzy006, what do you think?

[mehreeee]

Thanks! @mehreeee, we can get the green one since blue is used for the first state. @Dumzy006, what do you think?

I agree no problem.

[mehreeee]

Hi @brrkrmn the button change will be effected across this page too right? Because it has the same UX we're trying to improve

[Dumzy006]

Thanks! @mehreeee, we can get the green one since blue is used for the first state. @Dumzy006, what do you think?

I agree no problem.

Hello @mehreeee is this green part of the style guide ?

Weldone so far

[Dumzy006]

Hi @brrkrmn the button change will be effected across this page too right? Because it has the same UX we're trying to improve

Yes

[brrkrmn]

@Dumzy006 I was thinking of opening the PR without applying this implementation to other views so that I can get feedback in the meantime. I do not know if the styling should be the same because the button variants are different in these two pages. @srish is it okay if I open the PR and progress according to the reviews?

[mehreeee]

Thanks! @mehreeee, we can get the green one since blue is used for the first state. @Dumzy006, what do you think?

I agree no problem.

Hello @mehreeee is this green part of the style guide ?

Weldone so far

No dear it’s not. If it doesn’t look good you can suggest another color.

[brrkrmn]

@mehreeee, @Dumzy006 Currently the button looks like this. I have selected the hover colors by myself but can change them according to your suggestion

https://github.com/unstructuredstudio/zubhub/assets/92817363/e71b303e-92b6-4571-9b76-baa76fb0c1aa

[mehreeee]

@mehreeee, @Dumzy006 Currently the button looks like this. I have selected the hover colors by myself but can change them according to your suggestion

Screen.Recording.2023-10-18.at.14.02.25.mov

This looks good @brrkrmn nothing to change from my end. Great work!!

[Dumzy006]

Looks good Weldone @brrkrmn @mehreeee

[brrkrmn]

@Dumzy006, @mehreeee thanks to you ☺️🚀

[brrkrmn]

@srish just opened #920, waiting for reviews ☺️

[srish]

@brrkrmn Nice work! I am still not convinced with the colors. Could you maybe pick three colors from our theme and run it by a designer possibly on Zulip?

[brrkrmn]

@srish sure, will do 👍🏻

[Temabo]

Hi @brrkrmn @srish This is my suggesttion for the normal and hover state of the buttons; I used the normal Zubhub colours for the "Follow" and "Unfollow" and slightly darker shades for their hover states. Then I chose gray for "Following" to indicate that the user has already taken the action of following a creator, and it's a common choice for UI elements that signify a passive or non-actionable state. Prototype Video; https://github.com/unstructuredstudio/zubhub/assets/105416140/a4ea3f49-5b6f-492d-b875-bc7c18360301

[brrkrmn]

@Temabo thank you for your suggestions, using gray for following sounds good 😊

[mehreeee]

Hi @brrkrmn @Temabo please review

https://github.com/unstructuredstudio/zubhub/assets/105458062/782ab157-88a3-49fe-95ee-5c79edca8f2a