Disable the submit button until an answer option is selected or an answer is typed

[seanlip]

Platform
Oppia Android

Describe the request

We've received some learner feedback that:

• The student did not understand that she is expected to tap on an answer option before she can proceed.
• The student did not understand that she is expected to input an answer in the input field. She was confused about not seeing the Continue button like in the previous cards.

Suggestions for addressing these include:

• Disable the Submit button until an answer/response is selected.
• Consider adding hints along the lines of "Click on the correct answer below" to the various question types, e.g. multiple-choice questions.

The aim of this design request is to look through all question types in the Android app and verify that they are intuitive in informing the learner about what they should do next.

Context for the request

This feedback comes from 2 learners and involves auditing the existing "play lessons" feature in the Android app.

Link to PRD
N/A

Information about deadlines/priorities
This can be tackled at the regular priority.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• UX Design approved (Android mocks should include dark mode)
• UX Writing approved
• Product approved

For a design project to be completed, it needs approval from UXD, UXW and PM. Please tag the following reviewers when your project is ready (it's enough to have one signoff from each of UXD, UXW and PM):

• LaCE projects: @ConorAMack / @rfinch11 (UXD), @jikim322 / @roxanashirazi (UXW), @dchen97 (PM)
• CD projects: @IMHieuVo / @celestinetales (UXD), @kmuir1991 / @12lamy2 (UXW), @dchen97 (PM)
• Android projects: @kaiyuxu (UXD), @jlevick / @danapj (UXW), @seanlip (PM)

[seanlip]

See also a similar issue for Web: #79.

That issue talks about giving the learner clear guidance if they click the disabled button without entering an answer. We should do the same on Android.

[Himali07]

Hi Team here are the final mockup and figma file:

1. Design Figma File

2. Mock up

[seanlip]

FYI, noting that there's an accessibility concern with showing a message when a disabled button is clicked (see email thread). So these mocks may not be final yet.

[jlevick]

Error messages for the 12 question types:

• Drag-and-drop sort

  • Arrange the boxes to continue

• Fraction input

  • Enter a fraction to continue

• Checkbox input

  • Choose an answer to continue

• Multiple choice input

  • Choose an answer to continue

• Math equation (e.g. 2x + 3y = 5)

  • Enter a number to continue

• Algebraic expression (e.g. 2x + 3y)

  • Enter a number to continue

• Number input

  • Enter a number to continue

• Numeric expression (e.g. 5 + 2)

  • Enter a number to continue

• Ratio input

  • Enter a ratio to continue

• Text input

  • Enter an answer to continue

• Number with units (e.g. 4 km)

  • Enter an answer to continue

• Click on image

  • (Android) Tap on image to continue
  • (Web) Click on image to continue

Copy iterating figma file if interested:
https://www.figma.com/file/TCgSWSCMT0E2jIORyH7486/J.Levick---Oppia-Copy?type=design&node-id=0%3A1&t=2ofXr60TdxSL7Ulu-1

[seanlip]

Thanks @jlevick!

One thought: for "Click on image" input, let's add a message for that as well, as a fallback. In order to standardize things, we might end up treating it similar to multiple-choice in the future, i.e. the learner clicks a spot on that image and then clicks submit to confirm their selection. What should the message be in that case?

(We probably won't change this yet, but we've had to go through a similar process before for multiple-choice -- it used to be that clicking automatically submitted the answer -- so I think it's worth planning for this case as well.)

Thanks!

[jlevick]

@seanlip I've updated the above with the error message for 'Click on image'. Per the Android Design Team's discussion this evening, I've changed the drag and drop sort message as well. Thanks!

[seanlip]

Great, thanks @jlevick!

@kaiyuxu can you approve this project for UXD (see checklist in first comment) and set its status to "Handed off to PM", or does it still need more work on the UXD side? Thanks!

[kaiyuxu]

We discussed this yesterday during our call and found the relevant screens for different types of questions to see how relevant the error messages are. (I.e selecting images ones have no submit button.) Himali said she will have one final version to share and I will approve that one. Thanks.

[Himali07]

Following up on that @sean. Do we need to have screens for each error message with the relevant type of question showing on the screen?
For example Algebraic expressions: To have screens showing algebraic equations question + Error message for algebra questions just so that engineers can match the right question with error messages?

[Himali07]

@kaiyuxu. Do we have figma file for each type of questions? You had mentioned we have Adobe XD files right? Can you please share link to that?

[seanlip]

Following up on that @sean. Do we need to have screens for each error message with the relevant type of question showing on the screen?
For example Algebraic expressions: To have screens showing algebraic equations question + Error message for algebra questions just so that engineers can match the right question with error messages?

Hi @Himali07 -- no, that's not necessary. Thanks for checking!

[Himali07]

Sounds good. Thanks @seanlip.

At @kaiyuxu, I think then we are good from design point of view.
The click on image to answer type of question are not needed to be addressed. Check in Jaime's Figma file for clarification .

I am attaching the mock up and figma file for your design approval.
Figma
Mock up

Thank you.

[kaiyuxu]

Hi Kenneth, Can you help take a look at the Figma and let us know if a dark mode for a similar design already exists in the Android app? Thank you, Kaiyu

…

On Mon, Jun 12, 2023 at 5:14 PM Himali07 ***@***.***> wrote: Sounds good. Thanks @seanlip <https://github.com/seanlip>. At @kaiyuxu <https://github.com/kaiyuxu>, I think then we are good from design point of view. The click on image to answer type of question are not needed to be addressed. Check in Jaime's Figma file <https://www.figma.com/file/TCgSWSCMT0E2jIORyH7486/J.Levick---Oppia-Copy?type=design&node-id=0-1&t=BBel4vOLSecuCxjx-0> for clarification . I am attaching the mock up and figma file for your design approval. Figma <https://www.figma.com/file/dHUz2vH8M0Tms4t0xwz3sj/Oppia-Anroid-App_HL?type=design&node-id=1-17539&t=Y6WcnkfhuVIRBaCg-0> Mock up <https://www.figma.com/proto/dHUz2vH8M0Tms4t0xwz3sj/Oppia-Anroid-App_HL?type=design&node-id=189-10117&scaling=min-zoom&page-id=1%3A17539&starting-point-node-id=189%3A10117&show-proto-sidebar=1> Thank you. — Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH6PWHFME2Q7HTBTJYWC6WTXK6WEPANCNFSM6AAAAAAW6B2FQA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Kaiyu Xu Tel: (+1) 510-990-5445 Email: kaiyu ***@***.***>.***@***.***

[kaiyuxu]

Hi Kaiyu, I have replied to this in the earlier email. You should have received it by now. I am not very sure what I was supposed to review but I think the design looks good. However, is a bit lighter than the current implementation. I attached screenshots in the other email. Be sure to check them out. Thanks, Kenneth.

[seanlip]

Since this seems to be approved by UXD/UXW I have filed it on Oppia Android here: oppia/oppia-android#5070

If further changes are needed, please feel free to update the mocks directly and comment on that issue.

Also, @Himali07, one question. What should the colour of the text be in dark mode -- could you please specify this in the mocks? (Once you've done that, please comment here and we can close this issue.) Thanks!

[Himali07]

@seanlip
I have added the error message color code for dark mode to the same figma file.
Here is the screen shot.

Let me know if this answers your question.
Thanks :)

[seanlip]

Yup it does. Thanks @Himali07! Closing this issue as completed.