How details change everything

Big small details that change the user experience inside your application

Antonio Mesquita
Jun 29 · 5 min read

This article aims to show how small details can make a huge difference on your consumer experience using your application. It’s just like unseasoned food. Imagine eating barbecue without seasoning it. Terrible, of course. But that changes when you sprinkle the right amount of salt, and don't forget to choose the right cut of meat, otherwise the salt won't save your barbecue.

I always loved the small details, but they can usually be thought as useless junk or a waste of time. But instead, it changes the experience of your most valuable asset: your user. And they will see and appreciate your effort to offer them the best experience using your website or app. Don't deliver an ordinary experience, but an exceptional one.

Now let's talk about these UX tricks inside our Front-end apps. I'll focus on Single Page Applications using React and mobile apps using React-Native. But those tips can be applied on any application using any language or framework, so don't leave me now.

Skeleton

Avoid dispatching that big spinner in the middle of the screen while the app truncated renders under the full screen shadow background. It's really easy to implement skeleton loading using libraries such as react-loading-skeleton.

Infinite Scroll

There is a big conflict of interest between users and server data delivery. As developers, we are always thinking about how to improve application performance, resilience and scalability. But maybe handling pagination like we always did is not the best experience for the person in the other side.

The social medias made us very used to infinite scrolling like Facebook, Instagram and even Google. But it's not very simple to implement it with React, but I'll show you the best way to do it, from my personal point of view.

You can read more about the implementations details here: https://www.pluralsight.com/guides/how-to-implement-infinite-scrolling-with-reactjs

Fallback Page

Some big tech companies use this space (fallback pages) to express their teams creativity with animations, easter eggs and jokes. See the Github and iFood examples below (both sites use cool animations to interact with us 😍):

Creating a custom fallback page with React and react-router-dom is very simple and you can show to the users a funny/helpful page every time they reach a broken link. I'll call it NotFoundPage and you can customize it as you want. It's also a good idea to add a bottom that redirect them to the home page.

Your user will appreciate and reward you for this help.

Errors Boundaries

Unfortunately you'll probably deploy a bug to production. As we don't want your users being blocked by our mistakes we should wrap the application with an Error Boundary.

So we can tell them that something went wrong, it's not their fault and they should come back later. Although that's a page with an error feedback, you can also use that space to make your users smile as we did with the fallback page (Not found page). So express all your team creativity here too.

It's really common in Javascript and React applications, as a loosely typed language, to forget to check if an object property exists before calling it. And the result to our final client is a beautiful blank page. They will probably think it's their fault and be really frustrated about it. To avoid this bad behavior it's very simple with React Error Boundaries. Let's see the implementation below:

Here is an example of a custom error boundary page from one iFood React App:

Is your application resilient to different types of errors?

Keyboard Types

That's so annoying and, maybe in a way, you can lose many leads or don't convert users because of this minor effort that you are making your user do. The experience changes from water to wine simply by changing the native keyboard type (email, phone, text, …). I'll show an exemple using React-Native.

You can learn more on React-Native official docs: https://reactnative.dev/docs/textinput#keyboardtype

A really good exemple of how to ease the life of your user is to giving them options of famous email domains like we do at iFood consumer app.

Thanks for reading till now and don't think that User Experience is only designer's business. You're also equally (or more) responsible for the final result of your site/app and the full experience of your consumer. Would you enjoy navigating on your own application?

iFood Engineering

Food is our passion, technology is our talent