Web UX: Show meaningful errors to the users

Having a user-driven and user-friendly website can be tricky sometimes since it would let the whole development team spend more time on things that do not add value to functionality and core business. Yet, it can help the user in the short term and add value in the long term. Project managers who are strict with their deadlines could underestimate the value added in the long term. I am unsure if this is true for Apple website teams, yet they are missing some great user experience.

Recently, I tried to publish an app to the app store from the Apple website, but I faced an issue with my contact information. Even though I provided the correct information in multiple formats, I still needed to accept them and give a meaningful message to the user.

In my experience, the website always gives them an error for providing the wrong phone number, which reads as if this field is invalid. Here is the general message:

Here is the message from the field input for itself:

I had this issue even when I tried with the two zeros at the beginning, even if I did not add the country code. It always gave me the same error message, with no direction on how to fix that, what to do, or even what was wrong!

Initially, I thought it was an issue with the server, so I decided to try again after a few hours. I checked the health status of Apple products, which did not have an issue. After being tired, I decided to debug the problem as a software engineer and check what was sent through the network and what the response was, which led to the "Aha moment" for me.
Aha! moment, Apple needs to provide the correct message.
When I checked the network messages, I learned they provided the correct details and guide from the backend, yet the website does not provide them.

Here is the request payload:

The response:

{
    "errors": [
        {
            "id": "SOME-GUID",
            "status": "409",
            "code": "ENTITY_ERROR.ATTRIBUTE.INVALID",
            "title": "An attribute value is invalid."
            "detail": "The phone number must be in a valid format. Preface the phone number with ‘+’ followed by the country code (for example, +44 844 209 0611)",
            "source": {
                "pointer": "/data/attributes/contactPhone"
            }
        }
    ]
}

By looking at this and reading the details, I could understand that the issue was in number format, which made my life easier.

A final thought:

As developers, we should know and understand the users' issues to write great UI and excellent UX for them. When we ignore writing the correct message and show the users how to solve their issues by themselves, we put a lot of load on the users and our support team, and we might lose some users. This means a loss of revenue in the long run, which businesses do not like.

The above is the detailed content of Web UX: Show meaningful errors to the users. For more information, please follow other related articles on the PHP Chinese website!