Social media: icons in hero cards are not clear

international-labour-organization / designsystem

A design system for the International Labour Organization

Apache License 2.0

1 stars 3 forks source link

Social media: icons in hero cards are not clear #927

Open inesdgomes opened 2 months ago

inesdgomes commented 2 months ago

CMS users and editors keep getting confused about the function of the icons in the hero card. They think they'll link to social media channels, rather than being share buttons. To be discussed how this could be improved.

inesdgomes commented 1 month ago

@beatrizmartinmartins Where can we review this one?

beatrizmartinmartins commented 1 month ago

https://www.figma.com/design/RRxsfLNxjoypKrfJg1EwJf/ILO-Components-Library?m=auto&node-id=7218%3A14778&t=xiREKhqZcf3yfhXq-1

inesdgomes commented 4 weeks ago

Hi @beatrizmartinmartins We discussed this internally and we'd prefer that we do a more substantial redesign here. Could we try that idea of removing the social media icons and have just the 'Share' word that is clickable? Clicking would then show the possible social media channels where the content can be shared. A bit like what UNICEF does here: https://www.unicef.org/supply/reports/supply-chains-save-lives the difference being we want to keep the same position we have at the moment.

beatrizmartinmartins commented 3 weeks ago

@inesdgomes In order to create this, I created a new component, I think it will be easier to maintain in the long term in case we need to make changes to it.

We have 4 options:

Mode: Light and Dark (for the different bg of the cards)
Type: Open and closed

I also had to include a new icon called Share so we could use it on the new component. You can check that new icon here. cc @justintemps

inesdgomes commented 2 weeks ago

Great @beatrizmartinmartins I quite like this solution. @justintemps I think we can move it to development, but let me know if there's anything that you think doesn't work.