How details change everything

Big small details that change the user experience inside your application

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

That’s a simple change, but I guess the most important and most significant one. I like to call it loading without loading. It's a powerful strategy used by many tech giants as Instagram, Facebook and iFood. Your application looks much fluid and pretty for your user view.

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

Not even your worst enemy deserves to have to click over and over again to go to the next page every time he/she reaches the end of the page, right? Computers should know when you want to see more data (it's already 2021).

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

Maybe that's the most necessary detail. It's like a friend's help for your lovely user. A fallback page is an indication to everyone that something went wrong (not only from success lives your website, don't forget that). Please prevent your clients from seeing that ugly 404 page! Show them a custom error page that clearly means that they committed a mistake, but it's ok (we do it all the time and it's fine).

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

This time around to improve the user experience while navigating on your app and catching an unexpected error, but this time generated by a code error.

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

I think that's the smallest detail, but also the most annoying one. Imagine you're trying to sign up into a e-commerce, but when you're trying to input your phone number the keyboard shown is the alphabetic one. When you're typing your email you have to change to the symbol page to type dots and "@".

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?

Take a look at the vacancies available in iFood and learn more about the selection process.