freeCodeCamp profile is missing indications of fields

[ilenia-magoni]

When you read a profile it's not clear that those are Name, Location, About

Maybe @bbsmooth can give some accessibility indications?

[bbsmooth]

Hey @ieahleen How do I get to that profile you displayed in your first pic?

[ilenia-magoni]

Thank you @bbsmooth , it's at freecodecamp.org/ieahleen

[bbsmooth]

There are quite a few accessibility issues with this profile page, but I'll stick to the topic at hand. For the personal information displayed in your first pic above, there is no requirement that you need to label what each of these are. Yes, it is not clear what some of these are, but it is not clear for everyone, regardless of how you are accessing the page, so there is no accessibility issue here since everyone experiences this ambiguity. The decision as to whether you want to label these to make it clearer is a usability issue. If we want to make sure that everyone understands what these are then we should label them. If we are fine with the ambiguity then we can leave them as is.

[ppeters0502]

I tested out adding translatable labels next to the Name, Location, and Bio to make it a little clearer. If this looks ok, and there aren't any accessability issues, I can submit a PR with these changes.

[moT01]

I think I would prefer to leave this how it is - but I'm not against adding some labels either. That looks pretty decent. I wonder if it would look better with the colons all lined up - e.g. the colon (:) on each line would be horizontally centered. Hmm, I think that about section allows quite a lot of characters so that may not work well.

[ojeytonwilliams]

I think I would prefer to leave this how it is

It's not terrible as is, but I think there's room for improvement.

However, I'm not sure we need labels for all of them, since Name should be self-explanatory and About probably is, too. That said, Location being the only one with a text label looks a little strange. We could try using a icon (with aria-label) for Location and see how that looks.

@ahmadabdolsaheb what do you reckon?

[ppeters0502]

I know we're still kind of on the fence about whether labels are needed or not. I tweaked my original changes I screenshotted earlier to line the labels up and put the responses in a Col so that they don't bleed past what would look normal. I think this looks better, but I totally understand if we go towards not having labels:

[ppeters0502]

Here's one more screenshot with a longer About section so you can see how it would look if someone wrote a novel for their bio :)

[nayabatir1]

Here's one more screenshot with a longer About section so you can see how it would look if someone wrote a novel for their bio :)

This is neat 🔥

[ppeters0502]

I went ahead and submitted a PR with these changes, if everyone else thinks we shouldn't need the labels, I can close the PR. If everyone approves of the changes, if I could get a hacktoberfest label applied, that would be great!

[ahmaxed]

The redesign of the Profile is way overdue. How about organizing the user information section in the following way. It should make things more obvious.

[moT01]

I wonder if we should do away with the streak. It's always been a little inconsistent - although, I do know it motivates some people so maybe it's fine.

[moT01]

I like Ahmad's design here - but it also doesn't include any labels. So I think we are probably leaning towards not adding labels. I looked a few profiles quick - twitter, github, our forum - they don't really include labels either. But they do seem to universally use some icons to indicate things where applicable...

Twitter:

GitHub:

Forum:

Our current profile pages have some icons already, so I would vote to stick with those. We could find an icon for each of the areas - or maybe just the location can have one of those drop pins or something. Wondering if we should have this issue focus on adding some icons and make another for the redesign, or just do the redesign here.

[ahmaxed]

That is a great observation. I tried to fit the join dated, location, and the socials in one line that is why I dropped the icons.
We could definitely re-incorporate them.

[moT01]

For this specific issue, I think we should either add another icon for the location, or just leave it all as is and close this - and create a separate issue for the redesign.

[ahmaxed]

That is a good idea. As Ilenia mentioned, the Profile info is not presented well. It would be better if we focus our attention to a redesign.

I am closing this issue in favor of #48234
Please let me know if this has been closed by mistake.