Splash Screens: quando e como você deve aplicá-las no seu aplicativo

Você já deve ter percebido que muitos aplicativos, antes mesmo de iniciarem, mostram uma tela vazia apenas com a marca da empresa. É só reparar nos aplicativos da Uber e Netflix, que fazem exatamente a mesma coisa nos primeiros segundos de abertura do app.

Apesar de parecerem apenas decorativas, essas telas iniciais (chamadas em inglês de Splash Screens) são muito importantes para o funcionamento e a experiência que o usuário tem com seu aplicativo.

Por serem tão rápidas e, principalmente, por darem a primeira impressão que o usuário terá do seu produto, existem algumas diretrizes e melhores práticas de onde, quando e como aplicá-las.

Afinal, se a primeira imagem é a que fica, você não vai querer criar uma má impressão e perder seu público antes mesmo que ele interaja com seu aplicativo.

Por que as Splash Screens são necessárias?

Basicamente as telas de lançamento são necessárias porque alguns aplicativos precisam de alguns segundos para carregar suas principais funcionalidades.

Sem as splash screens, você abriria um aplicativo e ficaria olhando para uma tela em branco, sem saber se o app está carregando de fato, se ele travou ou se teve outro problema.

Então, para reduzir o impacto desse carregamento, um dos padrões adotados no design de interfaces é dar um feedback de que o aplicativo está funcionando, e de quebra aproveitar esses pequenos segundos para reforçar a identidade da sua marca.

Qual o tempo ideal de uma tela de lançamento?

Uma splash screen precisa ser rápida e nunca deve demorar mais do que 2 ou 3 segundos.

Se o seu aplicativo é de uso contínuo (como uma rede social), você deve reduzir esse tempo ao máximo. Inclusive, o ideal seria ter um carregamento tão rápido que a splash screen nem é necessária, como no Whatsapp.

Mas se o carregamento do seu app precisa de mais do que 3 segundos, fique alerta. Isso fará com que o seu usuário se frustre com a espera e até desista de usar o seu serviço.

Para reduzir o carregamento, é importante diminuir ao máximo a quantidade de serviços e tarefas que o seu aplicativo roda nos primeiros segundos. Chame apenas pelas funcionalidades principais e deixe o restante para a tela principal.

Como deve ser o design de uma splash screen?

Esse é o momento para ser simples, impactante e visual. Já que a tela de lançamento é necessária, podemos — e devemos — aproveitá-la para reforçar a identidade da sua marca e criar uma ótima primeira impressão.

Também é importante lembrar o quão rápida esta tela é (ou deveria ser). Portanto, diminua ao máximo o número de informações, evite textos longos e, principalmente, não se preocupe em explicar o que o seu aplicativo faz agora. Além de não ser o momento, nada é mais frustrante do que ter uma legenda que passa rápido demais para ser lida.

Ao invés de textos, o verdadeiro foco da sua splash screen deve estar em garantir uma boa leitura da sua marca. Não deixe de aplicar a versão completa da sua logo no centro da tela, de forma que não passe despercebida pelo usuário.

Se você tiver tempo para dar um senso ainda maior de qualidade para a sua splash screen, invista em uma logo animada. Desde que seja simples, ela pode deixar a tela mais dinâmica e divertida, e o usuário nem perceberá que se passaram 3 segundos.

Já para a cor do fundo, utilize o mesmo tom da sua tela principal. Isso irá criar uma experiência muito mais fluida entre a transição de telas. Se essa opção não funcionar para a sua marca, você também pode animar a saída da splash screen com a entrada da tela principal, como a Uber faz:

Não esqueça também que é preciso pensar nas diferentes resoluções de smartphones. O layout precisa ser pensado para todos os dispositos e deve ser fácil de ser aplicado.

E se ocorrerem erros no carregamento?

Se o carregamento, por alguma razão específica, estiver demorando mais do que o esperado, você deve prever algum tipo de ícone de loading na sua splash screen. Não faça apenas a repetição da animação da marca, já que isso não deixa claro para o usuário o que está acontecendo com o seu aplicativo.

Agora, se ocorrerem erros durante a iniciação, isole apenas os que são críticos. No caso de realmente não for possível continuar, como uma falta de conexão, integre o erro à splash screen e evite o uso de uma popup.

Se o erro não for crítico para o funcionamento do aplicativo, o melhor é ignorá-lo durante a splash screen e tentar novamente na próxima tela.

Recapitulando

• Teste quantos segundos o seu aplicativo demora para iniciar e reduza o tempo para no máximo 3 segundos.
• Utilize a sua marca completa e centralizada na tela. Se possível, adicione uma animação.
• Integre o fundo da sua splash screen com a tela inicial do seu aplicativo.
• Preveja uma tela de loading e possíveis erros de carregamento.
• Não esqueça de projetar para todas as diferentes resoluções.