Update Hints icon

[srushtirk]

Is your feature request related to a problem? Please describe.
We have received feedback from our users that the hint bulb is not clearly discoverable in the app.

Describe the solution you'd like
Update the hint icon to display the word "Hint" before the bulb and make it bounce up and down thrice every time a hint is available. Whenever a new hint is available, an additional banner saying "New" should appear on the top right of this button. Please see the lightweight mock below:

Describe alternatives you've considered
i) Adding help text "Do you need help?" above the hint icon (Trade Off - This can make the screen cluttered, and cause distractions to the user)
ii) Audio cues, like a pop or tap sound once a new hint is available (Trade Off - This can cause distractions)

Additional context
Specs for animation are shared in this doc: https://docs.google.com/document/d/1lrvjulcybrbvMjwIkheI_pnW-k4T7X1FFlEmNZYtVIo

[BenHenning]

Some thoughts:

• Will it be confusing that 'Hint' may correspond to more than one hint, and that it could also correspond to a solution?
• Is the 'new' banner behaving the same as the old yellow dot (i.e. it only shows up when there's a hint to show that hasn't been seen yet)?
• Do you have a reference for the bouncing animations?
• Do you have any references for how to style the text and 'new' badge per other apps since we don't have full fidelity mocks?

[srushtirk]

Some thoughts:

• Will it be confusing that 'Hint' may correspond to more than one hint, and that it could also correspond to a solution?

I don't think it will be confusing for more than one hints, for solutions yes. Can we update the icon title to say 'Solution' once all hints have been exhausted and solutions are being provided? If not, we should be ok to proceed with the risk of confusion for 'solution' for the current version. The button will still bounce and indicate 'new' on a new solution available and we will have the user rely on these.

• Is the 'new' banner behaving the same as the old yellow dot (i.e. it only shows up when there's a hint to show that hasn't been seen yet)?

Yes, same behavior as the yellow dot.

• Do you have a reference for the bouncing animations?
  Here are a few references:

1. https://media.emailonacid.com/wp-content/uploads/2019/09/EOA-PulseEffect2019-Blog.gif
2. https://webartdevelopers.com/blog/bouncing-arrow-animation/
3. https://www.geeksforgeeks.org/how-to-make-smooth-bounce-animation-using-css/#:~:text=Hence%2C%20it%20looks-,like,-%3A (The bounce is a lot high in this one, we want to keep it subtle in Oppia)

• Do you have any references for how to style the text and 'new' badge per other apps since we don't have full fidelity mocks?

I am not sure about the styling specs, can we use the same font and style per the rest of the text in the app?

[BenHenning]

I'll have to look into whether renaming the button conditionally with 'Solution' will be easy, but I'll lean on 'Hint' as a fallback. Re: font and coloring, I'll need to play with those and follow up with you once I start working on this.

My only remaining question for right now: is the button supposed to include that bulb icon? If so, can you point to a material icon that we should use for this (or should we just be using the existing icon that the app uses?)?

[srushtirk]

Yes please, the bulb icon should be included in the hint and it can be the same as existing icon.

Also FYI - I am meeting with the design team tomorrow and hope to have a hi-fi mock next week. Will keep you posted.

[srushtirk]

@BenHenning Met with the design team today and after discussion, we have come to a consensus to simplify and revise the hints button a little bit.

• Hint icon (which looks like a strip) should display the word "Hint" after the bulb.
• There should be an arrow available on the right of this strip, which navigates to the ‘Reveal Hint’ card on tap.
• When a new hint is available, the bulb should turn yellow.
• Once the hint is accessed by the user, the bulb should turn into a white outline.
• No further animation needed.
• All icons used are material icons.

Here is the Figma flow: https://www.figma.com/file/k50afbDR2xgvaiHgR9hRer/Untitled?node-id=0%3A1

Please let me know your thoughts.

[BenHenning]

That should be more doable @srushtirk. I'm not sure on the exact sizes or spacing yet, but I'll try to use other points in the app to reference in order to figure these out. I'll follow up if I have any further questions--thanks to you & the design team for providing this.

I'm also assuming that:

• There's no animation for the bar appearing
• The bar never disappears for that state
• There's no change in the flow of how the hints dialog appears (I think it floats up from the bottom, but this may change across OEMs)

Are these all true?

The only thing I'm unsure of is what to do when a user navigates back to a state that had unseen hints. I think today we don't show the yellow dot (which would mean we'd just show the bulb outline and rightward arrow for those cases, even if the user didn't reveal the hints). Does that sound correct?

[srushtirk]

That should be more doable @srushtirk. I'm not sure on the exact sizes or spacing yet, but I'll try to use other points in the app to reference in order to figure these out. I'll follow up if I have any further questions--thanks to you & the design team for providing this.

I'm also assuming that:

• There's no animation for the bar appearing
  Correct.
• The bar never disappears for that state
  Correct.
• There's change in the flow of how the hints dialog appears (I think it floats up from the bottom, but this may change across OEMs)
  Yes, the bar should float up from bottom.

Are these all true?
Yes.

The only thing I'm unsure of is what to do when a user navigates back to a state that had unseen hints. I think today we don't show the yellow dot (which would mean we'd just show the bulb outline and rightward arrow for those cases, even if the user didn't reveal the hints). Does that sound correct?
Yes, this workflow sounds correct.

[StarTrooper08]

Can I try working on this issue if it's still open?

[seanlip]

@StarTrooper08 Welcome to Oppia! It looks like you might not have seen our "getting started" instructions yet. Please read and follow the instructions for new contributors here, to start with: https://github.com/oppia/oppia-android/wiki/Contributing-to-Oppia-android#onboarding-instructions.

[StarTrooper08]

Ok 👍

[KolliAnitha]

Verified in 0.7-alpha-6c08d882d3. The bulb icon turns yellow when there is a new hint.