1

I have existing form on apps which requesting for user's details.

Form Layout :

This is the layout of the form

There are 4 input fields and 1 image uploader. User need to click on the camera icon to start picking the image from gallery or taking photo.

I was kind of believe that most user skipped the photo part, and key-in the rest of the fields. This throws an error and a pop-up will be shown telling user to upload a photo once the user tried to submit the form.

I have done the validation for the 4 input fields and I know that by showing a red * symbol on the right of each label of the input field will tells user that the field is required. My concern is how I can tell user that they need to tap on the camera icon before click on the submit button. I do want to make a little adjustment on the layout but hopefully it is not too complex because the apps already being used by the users for the past years and they already familiar with the existing layout.

Any ideas are welcome.

Validation

1
  • Are all fields required? Commented Nov 22, 2022 at 13:16

2 Answers 2

1

To indicate required mark button and fields with red asterisk:

required fields

 

To indicate required and missing, mark the image upload button with a red circle:

missing required

 

It's helpful to not rely on convention and define markings:

legend

1
  • Yep, I think I will play with the asterisk for the time being. I accepted this answer as it require few adjustment for me :) Commented Nov 23, 2022 at 3:38
0

1. Declare the two main actions

Try being explicit and declaring a couple of steps. This gives them the sense that there's two distinct actions that complete a profile:

  • Adding a picture
  • Completing the form inputs

2. Disable the Submit button until completion

This gives the user some cause and effect, and reinforces the 'steps' outlined in the form. Combine that with an active button for Upload photo, and it puts more emphasis on adding a profile pic as an action.

You might want to keep the * for required if need be, as that's a fairly common convention.

enter image description here

1
  • This layout looks great! I will consider to implement this soon. I appreciate your answer. Commented Nov 23, 2022 at 3:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.