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

[ladyami]

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?

I think the size needs to be decrease to make them look like non labels

[DonPresh]

I made them smaller like tags so it doesn't look clickable. I maintained the color scheme because of contrast issues.

@ladyami review

[DonPresh]

I'm still working on the design

[ladyami]

I made them smaller like tags so it doesn't look clickable. I maintained the color scheme the site has because of contrast issues.

@ladyami review

YES that is what I am about to design it look good

[mehreeee]

I still think it looks better with the colors tho, to improve visuals. Compare github labels. I have made them smaller like you said @ladyami What do you think?

[Temabo]

I still think it looks better with the colors tho, to improve visuals. Compare GitHub labels. I have made them smaller like you said @ladyami What do you think?

If we make them have different colors, they would look clickable. So if we decide that these tags would be clickable then we can use various colors, else we can just use one color for all.

[DonPresh]

Exactly @Temabo. Multi-colors always work best with tags. It’s equally more visually appealing. How it functions, however, makes the difference.

[DonPresh]

@mehreeee nice designs btw!

[Temabo]

I also think we are mixing it up right now, remember during project creation, the last step is to add categories which I believe would act as tags ( which can be clicked like tags on GitHub or Hashtags on Instagram), these categories would be clickable. I don't think there is a need for the "Materials Used" to be clickable. So "Category" tags can be clickable, while materials used can just be a list @ladyami @mehreeee @DonPresh What do you guys think?

[mehreeee]

Exactly @Temabo. Multi-colors always work best with tags. It’s equally more visually appealing. How it functions, however, makes the difference.

Alright I understand.

[brrkrmn]

@mehreeee, going for the label style of Github works well. Maybe reducing the line height would be better since I think they still kind of resemble buttons.

@Temabo Yes I agree. I don't think it's necessary to make materials used clickable

[mehreeee]

Alright guys, here's my final proposal, we make the Materials used non-clickable and a bit squared, make the categories clickable and a bit rounded, and use colors to differentiate them. @brrkrmn @ladyami What do you think?

[Temabo]

I have 3 suggestions: 1. We can make the Materials used look like non-clickable tags and give the Category coloured clickable tags

2. Here are both not clickable hence same style.

3. Here, the materials used can be a bullet point list or each material can simply be separated by commas. While the categories are tags.

[Temabo]

Alright guys, here's my final proposal, we make the Materials used non-clickable and a bit smaller, make the categories clickable and a bit bigger, and use colors to differentiate them. @brrkrmn @ladyami What do you think?

This looks good! @mehreeee I like the idea of adding # to the category tags!

[mehreeee]

Alright guys, here's my final proposal, we make the Materials used non-clickable and a bit smaller, make the categories clickable and a bit bigger, and use colors to differentiate them. @brrkrmn @ladyami What do you think?

This looks good! @mehreeee I like the idea of adding # to the category tags!

Thank you ❤️

[DonPresh]

I made them smaller like tags so it doesn't look clickable. I maintained the color scheme because of contrast issues.

@ladyami review

I thought of a possibility of listing the materials out and making the categories as labels. What do you guys think? @mehreeee @Temabo

[DonPresh]

I have 3 suggestions: 1. We can make the Materials used look like non-clickable tags and give the Category coloured clickable tags

2. Here are both not clickable hence same style.

3. Here, the materials used can be a bullet point list or each material can simply be separated by commas. While the categories are tags.

@Temabo omg. I actually thought of the possibility of your 3rd option since it's not clickable.

[DonPresh]

Alright guys, here's my final proposal, we make the Materials used non-clickable and a bit smaller, make the categories clickable and a bit bigger, and use colors to differentiate them. @brrkrmn @ladyami What do you think?

@mehreeee Love.

[aqsaaqeel]

I have 3 suggestions: 1. We can make the Materials used look like non-clickable tags and give the Category coloured clickable tags

2. Here are both not clickable hence same style.

3. Here, the materials used can be a bullet point list or each material can simply be separated by commas. While the categories are tags.

I love the 1st one, this is exactly what I had in mind when I said rounded tags. And since there are always going to be max 3 categories, having them colored makes sense.

[Boluwatifey1]

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

I haven’t been able to access this page we have been deliberating on but from the screenshots I get the problem