Help Button not Obvious

[jeremylt]

Describe the Issue

The new Ask For Help button is not obvious. We have users on the forum frequently not understanding how to find the Ask For Help button.

https://forum.freecodecamp.org/t/new-help-button-not-obvious/571552

Affected Page

All RWD

Steps to Reproduce

1. Go to any RWD page
2. Click on 'Check Your Code' a few time
3. See question mark

Expected behavior

As suggested by @lasjorg, we could include a one word description along with the symbol, for clarity: https://forum.freecodecamp.org/t/new-help-button-not-obvious/571552/7

Screenshots

No response

System

All

Additional context

No response

[jeremylt]

@naomi-lgbt you said you wanted to circle back to this?

[ShaunSHamilton]

There seems to be this weird meta of using the word "doubt" on the forum; we could pair the ❔with that. jk

[bbsmooth]

I'm all for adding "Reset" and "Help" to those icon buttons. If we did this then we would need to remove the aria-label from these buttons as the added text inside those buttons should be the accessible name for each button.

[Vansh-Baghel]

@jeremylt I see, may I work on it?

[Vansh-Baghel]

@Sboonny Would like to have your thoughts here as well ❤️

[Sboonny]

@ahmadabdolsaheb wanted the removal of the text, because it allows extra spacing for the future buttons, and we are moving the new RWD to look similar to the mobile version.

But we don't have the future buttons, and after reviewing https://github.com/freeCodeCamp/freeCodeCamp/pull/48586, we really need to clean the technical debt first.

I am happy with adding this back, maybe only for wide screens 🤔. I don't mind adding them for both either, and changing all of them when the future buttons are added.

[Vansh-Baghel]

@Sboonny True, like we can remove the buttons itself for mobile versions as it already have it in the bottom.

[jeremylt]

I'm not sure if/how complicated it is to implement, but only adding the text for a one word description if the window is wide enough sounds reasonable to me.

[Vansh-Baghel]

I'm not sure if/how complicated it is to implement, but only adding the text for a one word description if the window is wide enough sounds reasonable to me.

Yes, that could be done. Like showing the text for wide screens and removing for the small ones.

[BalanaguYashwanth]

Hello @Vansh-Baghel,

So you will like to raise PR and close the ticket ?

[Vansh-Baghel]

@BalanaguYashwanth Yes sure, ill do it if its needed. I am not sure if you are a moderator or a contributor, ill implement it once the maintainers confirm this functionality.

[Sboonny]

I'm not sure if/how complicated it is to implement, but only adding the text for a one word description if the window is wide enough sounds reasonable to me.

There are values in the curriculum for tablat width, and we have Media component for this, not the bootstrap react one.

But to be honest, I think it's for the best to use text in the mobile and desktop for, and when we need to change it later, we will have a better solution then.

Edit: if I prefer something doesn't mean it's a good idea, it's just the preference. We can discuss hiding and changing the button in a different issue, when we have the other feature ready, and when we am done with refactoring the editor.

[jeremylt]

I think tackling this in multiple steps is perfectly reasonable.

That is, adding the one word text now and adjusting as needed in the future for mobile.

[jeremylt]

I don't understand what that means?

[Sboonny]

This seems to be a first timer issue, here is the file https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/templates/Challenges/classic/lower-jaw.tsx

to solve this, add Reset and Help text to their corresponding buttons. Don't worry about hiding it for mobile, this issue isn't about it.

---

If you would like to fix this issue, please make sure you read our guidelines for contributing, we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum if you need help contributing, our moderators will guide you through this.

[Sboonny]

I don't understand what that means?

Nah, you got my intent perfectly fine 👍, I shouldn't have diverged the issue.

[jeremylt]

Nah, you got my intent perfectly fine +1, I shouldn't have diverged the issue.

You're good - there was another reply in there that got deleted

[Vansh-Baghel]

there was another reply in there

Apologies, I commented in the wrong commit. (*￣3￣)╭

[Vansh-Baghel]

This seems to be a first timer issue, here is the file https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/templates/Challenges/classic/lower-jaw.tsx

to solve this, add Reset and Help text to their corresponding buttons. Don't worry about hiding it for mobile, this issue isn't about it.

If you would like to fix this issue, please make sure you read our guidelines for contributing, we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum if you need help contributing, our moderators will guide you through this.

I have already fixed it, may I raise a PR?

[Sboonny]

I would leave it for first timers, it's rare that there is an open issue for them

[lasjorg]

Doesn't the text need to be translatable? Do they use the t function with the text? Pretty annoying function name BTW, good luck doing a search for that identifier in the code.

One thing that might also communicate the ask for help button purpose a bit better is if the circle was a speech bubble. But it clashes a bit with the design and when I tried doing a mock it didn't look very good. I tried it with both a round and square bubble. The buttons might just be too small for such an icon.

Just as an example of what I mean. Ignore the alignment I had to create the icon from two icons and I didn't bother doing a very good job.

---

As an aside.

What would be really slick is having an onboarding step. I'm sure it would be a lot of work, especially with internationalization and accessibility in mind (and depending on the implementation).

[Sboonny]

Doesn't the text need to be translatable? Do they use the t function with the text? Pretty annoying function name BTW, good luck doing a search for that identifier in the code.

oh god, you are right, I wanted to forget it 🤣.

One thing that might also communicate the ask for help button purpose a bit better is if the circle was a speech bubble. But it clashes a bit with the design and when I tried doing a mock it didn't look very good. I tried it with both a round and square bubble. The buttons might just be too small for such an icon.

👍🤔 Maybe we redesign it entirely, let me open issue after this one about making the buttons bigger and then we can implement the image.

the alignment I had to create the icon from two icons and I didn't bother doing a very good job.

Didn't notice 😅, as long as the icons don't have role and label, I am happy, I think they look good 👍

[lasjorg]

Well, it was just an example. But I do think it communicates its purpose a bit better. Just to be clear, I would still suggest we add the text.

We should probably clue in @ahmadabdolsaheb and hear what they have to say.

[ahmaxed]

Replacing texts with icons was an experiment to minimize space used for those buttons and have a predictable ui in regards to localization.

The issue with adding and removing the text based on screen size is that editor pane itself changes size regardless of the viewport width. As a result, a user could be using a desktop and have a narrow editor (lower jaw).

Using icons for buttons is common practice for mobile, but require some getting used to in Desktops. I don't know if a best.

Having the icon with the text could work. Since the width of translated texts have different widths, we need to make sure that the overflown row is scrollable vertically.

Youtube uses a similar pattern even for small screens on their web app.

Screen Shot 2023-02-16 at 4.32.19 PM

[jeremylt]

I think the issue is that while the reset button is somewhat ubiquitous, the help button isn't super obvious. That symbol doesn't intuitively mean "click this button to go to the forum to ask questions"

[bbsmooth]

On a side note, I don't think the YouTube button example above is the best example of accessibility and I think it probably fails SC 1.4.10. I know it seems strange that a site like YouTube would have obvious WCAG failures, but this is not the only one. Make your browser approximately 1280px wide and try zooming in 400% while watching a video (be sure to read the comments). I think you will find that you need a lot of horizontal scrolling.

Moral of the story: Big sites that should be able to do better can still have accessibility issues.

[ahmaxed]

@jeremylt, I am open to replacing the icon to see if that helps resolve the issue. @lasjorg's suggested icon is looks like a good alternative.

[hbar1st]

What would be really slick is having an onboarding step. I'm sure it would be a lot of work, especially with internationalization and accessibility in mind (and depending on the implementation).

I have been wanting such a thing especially for translated content because of the added confusion of not having the correct keyboard settings by default (people from certain European countries use keyboards for example that don't have backslashes).

The issue I opened though has been closed #48943 as "won't fix".

[jeremylt]

A button for requesting help should not require an onboarding step to understand.

[lasjorg]

No, onboarding shouldn't be required to understand what the main buttons do.

But it's also not uncommon to have an onboarding step that quickly goes through the UI. Lots of sites have onboarding, even when the UI is/should be self-explanatory.

It is a "nice to have", not a "need to have", which is why I called it slick. It can also help improve initial engagement and communicate an overall tone of the site.

Anyways, I made a PR for the button just so we have something.

[ahmaxed]

If the issue continues after the icon change, we could re-add the one word descriptions. Additionally, we could have the button light up when the button appears to add more emphasis.

[jeremylt]

I thought that we agreed that adding a single word would be a good idea above?

I don't understand why using a word to communicate is a bad thing here. Icons aren't a universal replacement for words.

Edit: no, it looks like we still really want to rely upon icons instead of words in the discussion above. I just don't understand the resistance to a single word. We have the infrastructure to translate it. It shouldn't take that much space and we can always collapse out the words if there isn't enough room. But I'm not aware of a universal 'go to the forum to ask a question' button in English, let alone all cultures.

[ahmaxed]

Let's do single word and show the buttons in multiple lines based on the width of the instructions pane.

[DEVelooper29]

I am interested to make this issue my stepping stone in the journey of Open Source contribution. Can someone please brief me up what has to be done finally after the discussion?

[ahmaxed]

Action items: Replace the icons with descriptive words (reset, help)for the buttons in lower-jaw-icon-bar. Add descriptive words (reset, help) to the right of the icons for the buttons in `lower-jaw-icon-bar Replace 'lower-jaw-icon-bar' with a more descriptive class name. Make sure 'lower-jaw-icon-bar' contents wrap when the pane is too small.

[DEVelooper29]

Okay. I'll do that

Action items: Replace the icons with descriptive words (reset, help)for the buttons in lower-jaw-icon-bar. Replace 'lower-jaw-icon-bar' with a more descriptive class name. Make sure 'lower-jaw-icon-bar' contents wrap when the pane is too small.

[ahmaxed]

@DEVelooper29, I just updated the spec. Let's have both the icon and the word next to one another for this iteration.

[DEVelooper29]

@DEVelooper29, I just updated the spec. Let's have both the icon and the word next to one another for this iteration.

Got it.

[anubhav1206]

Can I work on this?

[ahmaxed]

@anubhav1206 there is an attached pr that is being reviewed for this issue.