11

I'm designing an mobile app for both iOS and Android, which includes a form. The form has several required input fields that the user needs to complete before continuing.

If the user clicks Continue before typing in everything required, an error message would pop up under the field. All okay so far.

But, according to the iOS developers on my team, it's impossible (or at least difficult) to make something appear in the layout that pushes the rest of the content down. This is not a problem on Android apparently.

I don't know enough about developing for iOS, and I struggle to find a decent alternative for the iOS developers, so my questions are:

  • Is this really a problem when developing for iOS?
  • Should I make space for the error message below the input field, before it's displayed?
  • Are there any other good solutions to displaying the error message, that doesn't push the content down?

enter image description here

Here's a screenshot to showcase my problem. I've also made an example where I have reserved space for the error message, but I don't think it looks pretty good to have so much space between the elements, when it's not gonna be consistent throughout the app.

  • 1
    I think you're ignoring the use of immediate validation. Yes, it would push the rest of the form down, but the user hasn't gotten to that part yet, and it helps the user to maintain their focus. You can read more about that here: smashingmagazine.com/2009/07/… – invot Jan 25 '18 at 17:32
3

I disagree with @colmcq. Giving space for error messages, that might come in like 10% of the cases is not at all a good option.

Actually, it is not Impossible or difficult to show the form validation messages as you have shown in option 2. Many apps use that method only.

Reference
- Please ask your dev team to check for an easy method in stackoverflow.com or developer.apple
- You might find some useful information here: https://www.davidbritch.com/2017/03/validating-user-input-in-xamarinforms-iv.

There is a new and intuitive form validation here: https://github.com/adamwaite/Validator

  • Hi @Kishan, it seems that your first link is broken :) – André DS Jan 4 at 8:13
2

Showing error message below an input field is one of the most common practices. Google's Material Design also recommends the usage of this method.

In iPhone different methods are used to show these error messages. Some of them are listed below.

  1. Enable the action button only when the user enters the value for all the required input fields - eg. Whatsapp

    enter image description here

  2. Show a toast at the top of the screen over the apps navigation bar - eg. Myntra

    enter image description here

  3. Show the error message as a banner at the top of the screen below the navigation bar - eg. Instagram

    enter image description here

  4. Displaying short error messages (mostly single line) below the input field without taking extra space ie, the message is shown in the available space below the field and hence the separation between the fields doesnot blemish the screens asthethics - eg. BookMyShow

    enter image description here

  • I like all your options except for #1. How does the user know what's wrong? – Alan Jan 29 '18 at 12:45
  • The question was regarding validations for required fields. Here, only when the user enters the value for all required fields, the action button will be enabled. An example for this would be Edit Profile screen in Instagram's android app. In the case of other error messages (like the server side errors), a dialog is shown with the error details in iPhone apps. – Akhil Ashok Jan 29 '18 at 13:20
  • The question is more concerned with how to display error messages than just validation. I think the dialog piece of option 1 is an important thing to include. :) – Alan Jan 29 '18 at 13:22
  • 1. doesn't make any sense: that looks like activation once a field has been completed with any input. 2. and 3. will fall apart if there are multiple error conditions. 4. is kinda what he has so all we're arguing about is the amount of white space taken up – colmcq Jan 30 '18 at 15:02
0

I think the design with space makes sense for two reasons:

  • the layout doesn't jump when error messages are displayed
  • more white space makes the design look less cluttered

So go with option 3

  • 1
    I don't think providing spaces for the error message in the UI would be a good aesthetic solution. Also, as @kishan said it is not difficult to show validations as in option 2 and it is one of the most common ways of showing error message in websites. – Akhil Ashok Jan 29 '18 at 6:52
0

Just take a look at the Material Design Guidelines. I understand you use a classic style, but you can apply the same solution.

Text field input Helper text may be included before, during, or after a user interacts with each field on a form.

Show error text only after user interaction with a field. If the user inputs incorrect data, helper text may transform into error text.

Minimize form text to the essentials. Not every text field needs helper and/or error text.

Specification:

Place 16dp of vertical space between text fields and below the error text.

enter image description here

enter image description here enter image description here enter image description here enter image description here

0

on our last project we have used tooltips to show error messages. the reason was that we used long forms, and the shown error messages created emtpy spaces that devided logical components.

for an inspiration: react tooltips - https://react-tooltip.netlify.com/

  • This seems awkward from many aspects, to be honest. Does that mean the error messages only display when you hover over the field? Other than an accessibility problem, that doesn't seem very useful for at-a-glance reviewing of forms either. – JonW Feb 6 at 12:09
  • you can set it to be displayed on default, not only on hover – Matus William Horecny Feb 7 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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