Better Error Messaging for Invalid URLs

[SiobhyB]

Expected behavior

If I enter an invalid URL at the login form, I expect to receive an informative, helpful error message that informs me why I'm not able to log into the app.

Actual behavior

The following error appears if I enter an invalid URL at the login form, which isn't that helpful to users:

"Hmmm, it doesn't look like there's a WordPress site at this URL. Double-check the spelling and try again."

Screenshot:

Steps to reproduce the behavior

1. Navigate to the app's login screen and select the "Log in by entering site address" option.
2. Enter some nonsense text, for example "DFOJDOFJF".

Tested on iPad mini, 10.9 of WordPress for iOS

This was raised by @jtreanor and some other recent support rotations as a lot of support requests are made up of users who enter an invalid URL. More informative error messaging could have a positive impact on the number of incoming requests.

[SiobhyB]

Android version of issue: wordpress-mobile/WordPress-Android#8460

[thehenrybyrd]

Ran into this today in #1667778-zen. The user had entered "larifrank" in the URL field.

[thehenrybyrd]

Here's another in #1774027-zen. The user entered a YouTube embed link in the URL field.

[thehenrybyrd]

An interesting variation in #1846393-zen.
This user entered the full logged out URL: http://ecrituredudesert.com/wp-login.php?loggedout=true
They also had an xmlrpc.php issue, so I don't know whether this URL caused trouble, but thought it was interesting to note another extreme of what folks enter in the URL field.

[designsimply]

Raising in priority because error message handling came up recently from the Mobile Guild as an ongoing problem.

[diegoreymendez]

I have an initial implementation for this on iOS working.

That said, I realized the proposed solution may not be the best in terms of UX.

I realized that the check we do to ensure that the URL is "valid" is 100% local. Since it's local and quite low-impact, I think it doesn't make much sense to allow the user to perform an action that we know will fail (ie: tap "Next").

Here's an example of what we could do (please ignore the message shown):

From the Android issue this is the error message that we're showing to the user for the failed local URL verification: "The site address you entered is invalid. Please re-enter it.".

Can I ask for your opinion on this @mattmiklic ? We can decide not to show the error as well, but the idea behind this is that for the local part of the verification we can just prevent the user from even trying to go forward.

[diegoreymendez]

Ping @oguzkocer ^

[SylvesterWilmott]

@diegoreymendez

I like the proposal ie. preventing the user from proceeding until a valid URL is entered. I don't think we should show an error whilst the user is typing though. Furthermore, if we do this then we will need to be explicit about what we expect the user to enter in this field.

I have two suggestions:

Showing a hint/red text if:

• The user hasn't typed a character for 2s
  or
• The field is filled and unfocused

With a message along the lines of Please enter a valid URL eg. example.wordpress.com

or

Use a persistent footer on that field with the message Please enter a valid URL eg. example.wordpress.com.

[diegoreymendez]

@SylvesterWilmott - These are the latest changes you indicated. The first error message needs to be run through editorial if approved, whereas the second one is in line with Android.

[diegoreymendez]

I'd need an editorial review for the error message shown while typing in the demo above:

Please enter a valid URL eg. example.wordpress.com

Extra Context

A similar message was reviewed recently for Android here. The reason why we're proposing a slightly different one is because the message is now being shown as you type (See demo in the previous comment).

The message proposed for Android was shown only after clicking "Next":

The site address you entered is invalid. Please re-enter it.

Let me know if you need more info or clarification. Thanks!

[SylvesterWilmott]

Looks good @diegoreymendez , I'm starting to wonder if the first error should be in grey text since it's more of a hint and not an error.

Either way, I'd like to wait for @mattmiklic to approve this change just in case we are overlooking something that led to the decision of keeping the button active originally.

[mattmiklic]

I don't think there was any specific reason for not validating the URL before allowing the user to proceed. It seems like a good idea to me. 👍

[diegoreymendez]

Thank you all for the contributions. This feature is coming out in WPiOS v12.4.

[designsimply]

@diegoreymendez do you still need [Status] Needs Copy Review for this issue? It looks like it can be removed.

[diegoreymendez]

@designsimply - It was never done as far as I'm aware, so I'm waiting for it still.