Usability & responsiveness improvements for non-functional buttons

[ladyami]

Describe the bug The "Materials Used & Category " section on the project page is currently displayed as a set of buttons. However, these buttons are not clickable and do not link to any additional information about them or a section to find similar projects that used the same material or categories. This is a usability issue as users may expect the buttons to provide more details about the materials or categories.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Zubhub Website login'
2. Click on 'Any project card'
3. Scroll down to 'the material used '
4. See error

Expected behavior The list should not be in Buttons

Solution:

There are two possible solutions to this issue:

-Remove the buttons and display the materials & category list as plain text. (quick fix)

-Make the buttons functional and link them to a page to find similar projects or popups with more information about the materials. This information could include the type of material, size, quantity, and more useful info. for the category a page that show list of other project in such category

Additional Notes:

-If the buttons are removed, the section heading should be changed to something more descriptive, such as "Materials and Tools" or "Required Materials."

-If the buttons are made functional, they should have a clear visual indication that they are clickable, such as color change or a hover effect.

Screenshots

[mehreeee]

Nice suggestions @ladyami. Personally I think the buttons should be improved to labels and shouldn’t look like clickable buttons. They should serve as visual cues used to describe and provide information about the materials used in the project.

[ladyami]

@mehreeee you are right, it should be improved to labels or leave them as a button and make them functional

[Boluwatifey1]

Hi @ladyami I don't know if it's from my end alone but anytime I click on a card it takes me back to the login page even when I am signed in.

[aqsaaqeel]

I agree, we can have them look like tags with rounded borders and a sort of greyish background color to represent that they are static visual cues, what do you think @ladyami

[Temabo]

I think we need to decide on a particular style for tags on the platform so it's consistent across all screens. But for this page, like you said @ladyami we have to first decide if the materials used would be clickable.

[Boluwatifey1]

I think we need to decide on a particular style for tags on the platform so it's consistent across all screens. But for this page, like you said @ladyami we have to first decide if the materials used would be clickable.

i don't think they need to be clickable, it should just be improved to labels

[mehreeee]

Hi @srish @ladyami these are my suggestions.

1. Remove the icons to prevent any potential confusion. Instead, convert them into labels. Their purpose is to act as visual cues; the distinct colors will indicate to the user that they are non-clickable, similar to tags.

@Temabo @aqsaaqeel What do you think?

[Mitchell377]

for easy usability it be an active button with a text link, i believe this can be worked on @ladyami

[PascalAnuche]

I have been trying to click on a card even when logged but still take me back to login page

[yokwejuste]

I have been trying to click on a card even when logged but still take me back to login page

when last did you pulled updates?

[mehreeee]

How can we do that @yokwejuste ?

[PascalAnuche]

I have been trying to click on a card even when logged but still take me back to login page

when last did you pulled updates?

How is it done?

[coderatomy]

Make sure in the main directory of zubhub then run; git pull origin master or just git pull

[yokwejuste]

How can we do that @yokwejuste ?

I mean when last did you pulled form upstream ?

git pull upstream master

[DonPresh]

I think we need to decide on a particular style for tags on the platform so it's consistent across all screens. But for this page, like you said @ladyami we have to first decide if the materials used would be clickable.

I actually agree with this.

[ladyami]

@ everyone, the best way to solve this issue is to decide which one of the solutions can be easy to implement if we Find out from the developers then we designers can now decide what to design what do you all think?

[mehreeee]

Okay let’s do a quick survey. If you suggest it should be clickable, react with a “👍” emoji if it shouldn’t be clickable react with a “❤️“ emoji. What do you think @ladyami @DonPresh @Temabo @aqsaaqeel @Boluwatifey1

[yokwejuste]

Hey @mehreeee this is great. I'll go for this: But still left with some questions:

• Why the choice of those colors?
• Why not using uniform colors?
• Any particular significance for them and what path do they take?

[mehreeee]

Hey @mehreeee this is great. I'll go for this: But still left with some questions:

• Why the choice of those colors?
• Why not using uniform colors?
• Any particular significance for them and what path do they take?

I used the colors to differentiate it from our secondary button. Using one color makes it look clickable like a secondary button. Since they’re visual cues and non clickable they should look different. The colors are from our style guide.

[coderatomy]

The design is nice @mehreeee. Your design is great but the contrast of the letters is kinda low. It's hard to visualize. Can you maybe try to improve it a bit. More so that top section for the description. I don't know how you planning to solve that though.

[DonPresh]

Okay let’s do a quick survey. If you suggest it should be clickable, react with a “👍” emoji if it shouldn’t be clickable react with a “❤️“ emoji. What do you think @ladyami @DonPresh @Temabo @aqsaaqeel @Boluwatifey1

I think both could work sha. It could be a situation where it acts like tags. If you click on glue, it will show you all projects that creators used glue or etc. @mehreeee @Temabo what do you guys think?

[Temabo]

Okay let’s do a quick survey. If you suggest it should be clickable, react with a “👍” emoji if it shouldn’t be clickable react with a “❤️“ emoji. What do you think @ladyami @DonPresh @Temabo @aqsaaqeel @Boluwatifey1

I think both could work sha. It could be a situation where it acts like tags. If you click on glue, it will show you all projects that creators used glue or etc. @mehreeee @Temabo what do you guys think?

Yes, both suggestions work. That's why we also need the input of the devs on which would be better to implement.

[Boluwatifey1]

Okay let’s do a quick survey. If you suggest it should be clickable, react with a “👍” emoji if it shouldn’t be clickable react with a “❤️“ emoji. What do you think @ladyami @DonPresh @Temabo @aqsaaqeel @Boluwatifey1

I think both could work sha. It could be a situation where it acts like tags. If you click on glue, it will show you all projects that creators used glue or etc. @mehreeee @Temabo what do you guys think?

This is actually a nice idea if the dev are willing to work with that

[ladyami]

This is what Non-clickable Tag look like

[Temabo]

This is what Non-clickable Tag look like

Yes @ladyami I think we need to update the current tag design on the platform so we can use the same one everywhere else for consistency.

[ladyami]

This is what Non-clickable Tag look like

Yes @ladyami I think we need to update the current tag design on the platform so we can use the same one everywhere else for consistency.

That will be Great let check what the tags look like

[ladyami]

I have been trying to click on a card even when logged but still take me back to login page

I just face similar problem

[ladyami]

@Temabo This is what non click able LABEL look like

[mehreeee]

The design is nice @mehreeee. Your design is great but the contrast of the letters is kinda low. It's hard to visualize. Can you maybe try to improve it a bit. More so that top section for the description. I don't know how you planning to solve that though.

Thank you. Is it better now @coderatomy?

[coderatomy]

Better! Thanks