Small details can make a big difference in an app's user experience. It's like food without seasoning. Imagine eating barbecue without anything. Terrible, of course. But everything changes when you sprinkle the right amount of salt on the right cut of meat – otherwise, the salt won't save your barbecue.
I've always loved the little details, even though they are generally considered useless or a waste of time. In fact, it's the details that change the experience of your most valuable asset: your users. They will see and appreciate your effort in providing the best experience while using your website or app. Don't offer them an ordinary experience, but an exceptional one.
Now let's talk about these UX tricks (from English User Experience, translated as User Experience) within our applications front-end. I will focus on single page applications, using React, and in mobile applications, using React-Native. But these tips can be applied to any application, using any language or framework, so don't stop reading now.
Skeleton
This is a simple change, but I believe it is the most important and most significant. I like to call it loading without loading. It's a powerful strategy used by many technology giants, such as Instagram, Facebook and iFood. Your app looks very fluid and beautiful for your user's vision.
Avoid sending that big spinner in the middle of the screen while the truncated application is rendered under the full screen background shadow. You will see that it is really easy to implement skeleton loading using libraries like react-loading-skeleton.
Infinite scrolling
Not even your worst enemy deserves to have to click multiple times to go to the next page every time they reach the end of the current page, right? Computers should know when you want to see more information (it's already 2021).
There is a huge conflict of interest between users and server data delivery. As developers, we are always thinking about how to improve application performance, resiliency, and scalability. But maybe dealing with paging like we always have isn't the best experience for the person on the other side of the screen.
Social networks have accustomed us to infinite scrolling, as we see on Facebook, Instagram and even Google. It is not so simple to do it with the React, but I'll show you the best way to do it, from my personal point of view.
You can read more about implementation details here.
Page not found (or replacement page)
Perhaps this is the most necessary detail. Here we come up with friendly help for our dear user. A replacement page – or, as we see most here, “page not found” – is an indication to everyone that something went wrong (not only does your website live on success, don't forget that). Please prevent your customers from seeing that page error 404 so ugly! Instead, direct them to a custom error page that clearly points out that there was an error but that everything is fine (we do this all the time and it's okay).
Some of the big technology companies use this space (alternative pages) to express their teams' creativity with animations, Easter eggs and jokes. See the examples Github and iFood below (both sites use interesting animations to interact with us 😍):
Create a page fallback customized with React It is react-router-dom It's very simple and you can show users a useful and fun page every time they visit a broken link. I will call her NotFoundPage and you can customize it however you want. Another good idea is to add a button that takes them to the home page.
Your user will appreciate this page and you will be rewarded for this help.
Error boundaries
This time, we will improve the user experience when navigating your application and detecting an unexpected error, but now through a code error.
Unfortunately, you will probably run into a bug in production. Since we don't want your users to be blocked by our technical errors, we must wrap the application with a Error boundary.
This way, we can tell them that something went wrong, that it's not their fault, and that they should come back to the page later. Although it is a page with error feedback, you can also use this space to make your users smile, like we did with the replacement page (Not Found page). So, express all your team's creativity here too.
It is very common in applications JavaScript It is React, as a weakly typed language, forget to check whether an object property exists before calling it. And the result for our end client is a beautiful blank page. Well, they'll probably think it's their fault and be very frustrated about it. To avoid this malfunction, it is very simple with React Error Boundaries. See the implementation here.
Here is an example page error bound customization of an application iFood React:
Is your application resilient to different types of errors?
Keyboard types
I think this is the smallest detail, but also the most annoying of them. Imagine that you are trying to register for an e-commerce, but when you try to enter your phone number, the keyboard presented is alphabetical. When you are typing your email, you must switch to the symbols page to type periods and “@”.
This is quite annoying and you may lose a lot of leads or fail to convert users because of this small effort that you are forcing your user to make. The experience changes from water to wine simply by changing the native keyboard type (email, phone, text, …).
You can learn more in the official documentation for React-Native.
A good example of how to make your user's life easier is to provide options for famous email domains, as we do in the iFood consumer app.
Thank you for reading this far and don't think that User Experience is just the designer's business. You are also equally (or more) responsible for the final result of your website or application and your consumer's complete experience. Would you like to browse your own app?
Original text available at Medium l iFood Engineering l How details change everything.
