Pequenos detalhes podem fazer uma grande diferença na experiência do usuário de um aplicativo. É como comida sem tempero. Imagine comer churrasco sem nada. Terrível, é claro. Mas tudo muda quando se borrifa a quantidade certa de sal no corte certo de carne –caso contrário, o sal não vai salvar seu churrasco.
Sempre amei os pequenos detalhes, mesmo que eles sejam geralmente considerados inúteis ou perda de tempo. Na verdade, são os detalhes que mudam a experiência de seu ativo mais valioso: seus usuários. Eles verão e apreciarão seu esforço em oferecer a melhor experiência enquanto estão usando seu site ou aplicativo. Não ofereça a eles uma experiência comum, e sim uma excepcional.
Agora vamos falar sobre esses truques de UX (do inglês User Experience, traduzido como Experiência do Usuário) dentro de nossos aplicativos de front-end. Vou focar em aplicativos de página única, usando React, e em aplicativos móveis, usando React-Native. Mas essas dicas podem ser aplicadas a qualquer aplicativo, utilizando qualquer linguagem ou estrutura, então não pare sua leitura agora.
Esqueleto
Essa é uma mudança simples, mas acredito que a mais importante e mais significativa. Eu gosto de chamá-la de carregamento sem carregamento. É uma estratégia poderosa usada por muitos gigantes da tecnologia, como Instagram, Facebook e iFood. Seu aplicativo parece muito fluido e bonito para a visão do seu usuário.
Evite enviar aquele grande spinner no meio da tela enquanto o aplicativo truncado é renderizado sob a sombra de fundo da tela inteira. Você verá que é realmente fácil implementar o carregamento do esqueleto usando bibliotecas como react-loading-skeleton.
Rolagem infinita
Nem mesmo o seu pior inimigo merece ter que clicar várias vezes para ir até a próxima página toda vez que chegar ao final da página atual, certo? Os computadores devem saber quando você deseja ver mais informações (já estamos em 2021).
Existe um grande conflito de interesses entre os usuários e a entrega de dados do servidor. Como desenvolvedores, estamos sempre pensando em como melhorar o desempenho, a resiliência e a escalabilidade dos aplicativos. Mas talvez lidar com a paginação como sempre fizemos não seja a melhor experiência para a pessoa do outro lado da tela.
As redes sociais nos acostumaram com a rolagem infinita, como vemos no Facebook, Instagram e até no Google. Não é tão simples realizá-la com o React, mas vou mostrar a melhor maneira de fazer isso, do meu ponto de vista pessoal.
Você pode ler mais sobre os detalhes das implementações aqui.
Página não encontrada (ou página substituta)
Talvez esse seja o detalhe mais necessário. Aqui surgimos com uma ajuda amigável para nosso querido usuário. Uma página substituta –ou, como mais vemos por aqui, “página não encontrada”– é um indício para todos de que algo deu errado (não apenas de sucesso vive o seu site, não se esqueça disso). Por favor, evite que seus clientes vejam aquela página de erro 404 tão feia! Em vez disso, direcione-os a uma página de erro personalizada, que claramente aponta que houve um erro, mas que está tudo bem (nós fazemos isso o tempo todo e não tem problema).
Algumas das grandes empresas de tecnologia usam esse espaço (páginas alternativas) para expressar a criatividade de suas equipes com animações, easter eggs e piadas. Veja os exemplos Github e iFood abaixo (ambos os sites usam animações interessantes para interagir conosco 😍):
Criar uma página de fallback customizada com React e react-router-dom é muito simples e você pode mostrar aos usuários uma página útil e divertida toda vez que eles acessarem um link quebrado. Irei chamá-la de NotFoundPage e você pode personalizá-la como quiser. Uma outra boa ideia é adicionar um botão que os direcione à página inicial.
Seu usuário irá apreciar esta página e você será recompensado por esta ajuda.
Error boundaries
Desta vez, vamos melhorar a experiência do usuário ao navegar em seu aplicativo e detectar um erro inesperado, mas agora através de um erro de código.
Infelizmente, você provavelmente vai se deparar com um bug em produção. Como não queremos que seus usuários sejam bloqueados por nossos erros técnicos, devemos envolver o aplicativo com um Error boundary.
Assim, podemos dizer a eles que algo deu errado, que isto não é culpa deles e que eles devem voltar à página mais tarde. Embora seja uma página com um feedback de erro, você também pode usar esse espaço para fazer seus usuários sorrirem, como fizemos com a página substituta (página Não Encontrada). Então, expresse toda a criatividade de sua equipe aqui também.
É muito comum em aplicativos Javascript e React, como uma linguagem fracamente tipada, esquecer de verificar se existe uma propriedade de objeto antes de chamá-la. E o resultado para o nosso cliente final é uma linda página em branco. Bem, eles provavelmente vão pensar que a culpa é deles e ficarão muito frustrados com isso. Para evitar esse mau funcionamento, é muito simples com React Error Boundaries. Veja a implementação aqui.
Aqui está um exemplo de página de Error Boundary personalizada de um aplicativo iFood React:
Seu aplicativo é resiliente a diferentes tipos de erros?
Tipos de teclado
Acho que este é o menor detalhe, mas também o mais chato deles. Imagine que você está tentando se cadastrar em um e-commerce, mas quando tenta inserir seu número de telefone, o teclado apresentado é o alfabético. Quando você está digitando seu e-mail, você deve mudar para a página de símbolos para digitar pontos e “@”.
Isso é bem chato e, talvez, você perca muitos leads ou deixe de converter usuários por causa desse pequeno esforço que você está obrigando seu usuário a fazer. A experiência muda da água para o vinho simplesmente mudando o tipo de teclado nativo (e-mail, telefone, texto, …).
Você pode aprender mais nas documentações oficiais do React-Native.
Um bom exemplo de como facilitar a vida do seu usuário é dar opções de domínios de e-mail famosos, como fazemos no aplicativo do consumidor iFood.
Obrigado por ler até aqui e não pense que a Experiência do Usuário é apenas assunto do designer. Você também é igualmente (ou mais) responsável pelo resultado final do seu site ou aplicativo e pela experiência completa do seu consumidor. Você gostaria de navegar em seu próprio aplicativo?
Texto original disponível em Medium l iFood Engineering l How details change everything.
