Esta página apresenta diretrizes de design sobre como criar uma ótima experiência do usuário em redes lentas e off-line.
A qualidade de uma conexão de rede pode ser afetada por vários fatores, como estes:
- Cobertura ruim do provedor de rede.
- Condições climáticas extremas.
- Falta de energia.
- Entrar em "zonas mortas" permanentes, como em edifícios com paredes que bloqueiam conexões de rede.
- Entrar em "zonas mortas" temporárias, como quando você está em um trem e passa por um túnel.
- Conexões de Internet com tempo limitado, como as de aeroportos ou hotéis.
- Práticas culturais que exigem acesso limitado ou nenhum acesso à Internet em horários ou dias específicos.
Seu objetivo como desenvolvedor é oferecer uma boa experiência que diminua o impacto de mudanças na conectividade.
Decidir o que mostrar aos usuários quando eles tiverem uma conexão de rede ruim
A primeira pergunta a ser feita é como o sucesso e o fracasso de uma conexão de rede afetam seu app. Uma conexão bem-sucedida é a experiência on-line normal do app. A falha de conexão inclui como o app se comporta off-line e em redes com atraso.
Para determinar como lidar com a falha de conexão, faça estas perguntas importantes de UX:
- Quanto tempo você espera para determinar o sucesso ou a falha de uma conexão?
- O que você pode fazer enquanto o sucesso ou a falha está sendo determinado?
- O que fazer se a conexão falhar?
- Como você informa ao usuário o que está acontecendo?
Informar os usuários sobre o estado atual e a mudança de estado
Informe ao usuário o estado do aplicativo e as ações que ele ainda pode realizar quando houver uma falha de rede. Por exemplo, uma notificação pode dizer o seguinte:
Parece que você tem uma conexão de rede ruim. Não se preocupe. As mensagens serão enviadas quando a rede for restaurada.
Informar os usuários quando a conexão de rede melhorar ou for restaurada
A forma como você informa ao usuário que a conexão de rede melhorou depende do aplicativo. Os apps que priorizam informações atuais, como rastreadores de cotações ou clima, precisam ser atualizados automaticamente e informar o usuário assim que possível.
Recomendamos que você informe ao usuário que seu app da Web foi atualizado "em segundo plano" usando uma dica visual, como um elemento de aviso do Material Design. Isso envolve detectar a presença de um worker de serviço e uma atualização do conteúdo gerenciado. Confira um exemplo de código dessa função em ação neste link.
Um exemplo disso é o Chrome Platform Status, que publica uma observação para o usuário quando o app é atualizado.
Alguns apps sempre mostram a última vez que foram atualizados. Por exemplo, isso é especialmente útil para apps de conversão de moeda.
Os apps de notícias podem mostrar uma notificação simples de tocar para atualizar, informando o usuário sobre o novo conteúdo. A atualização automática de um artigo faria com que os usuários perdessem o lugar.
Atualizar a interface para refletir o estado contextual atual
Cada elemento da interface pode ter o próprio contexto e comportamento, que muda dependendo se ele precisa de uma conexão bem-sucedida. Um exemplo seria um site de e-commerce que pode ser acessado off-line, mas desativa o preço e o botão "Comprar" até que uma conexão seja restabelecida.
Outras formas de estados contextuais podem incluir dados. Por exemplo, o app financeiro Robinhood usa cores e gráficos para informar ao usuário quando o mercado de ações está aberto. Toda a interface fica branca e depois cinza quando o mercado fecha. Quando o valor de uma ação aumenta ou diminui, cada widget fica verde ou vermelho, dependendo do estado.
Ensine o usuário a entender o que é o modelo off-line
A maioria dos usuários está acostumada a ter sempre uma conexão de rede. É necessário informar a eles sobre as mudanças no app quando não há conexão. Informe onde os dados grandes são salvos e forneça configurações para mudar o comportamento padrão. Use vários componentes de design de interface (como linguagem informativa, ícones, notificações, cores e imagens) juntos para transmitir essas ideias, em vez de depender de uma única escolha de design, como um ícone sozinho, para contar toda a história.
Ofereça uma experiência off-line por padrão
Se o app não exigir muitos dados, armazene esses dados em cache por padrão. Os usuários podem ficar cada vez mais frustrados se só puderem acessar os dados com uma conexão de rede.
Tente tornar a experiência o mais estável possível. Uma conexão instável faz com que o app pareça não confiável. Um app que diminui o impacto de uma falha de rede deixa os usuários felizes.
Os sites de notícias podem se beneficiar do download e do salvamento automáticos das notícias mais recentes, talvez salvando dados fazendo o download apenas do texto, para que um usuário possa ler as notícias do dia sem uma conexão. É possível adaptar esse comportamento ao comportamento do usuário, priorizando o download das categorias de notícias que o usuário mais acessa.
Informar ao usuário quando o app estiver pronto para consumo off-line
Quando um app da Web é carregado pela primeira vez, ele precisa indicar ao usuário se está pronto para uso off-line. Faça isso com um widget que ofereça um feedback breve sobre uma operação por meio de uma mensagem na parte de baixo da tela, como, por exemplo, quando uma seção foi sincronizada ou um arquivo foi transferido por download.
Confira se o idioma que você está usando é adequado para seu público-alvo e use a mesma expressão em todos os casos em que for relevante. Públicos não técnicos geralmente entendem mal a palavra "off-line". Use uma linguagem baseada em ações com que seu público possa se identificar.
Deixar claro que a opção "salvar para uso off-line" está na interface
Se um aplicativo usa muitos dados, verifique se há uma chave ou um pino para adicionar um item para uso off-line. Faça o download automático de arquivos somente se um usuário tiver solicitado explicitamente esse comportamento em um menu de configurações. Confira se a IU de fixação ou download é óbvia para o usuário e não está oculta por outros elementos da IU.
Um exemplo disso é um player de música que exige arquivos grandes. O usuário sabe do custo de dados associado, mas também pode querer usar o player off-line. O download de músicas para uso posterior exige que o usuário se planeje com antecedência. Por isso, é importante informar o usuário sobre isso durante a integração.
Esclarecer o que está disponível off-line
Seja claro sobre as opções que você está oferecendo. Talvez seja necessário mostrar uma guia ou configuração para uma "biblioteca off-line" ou um índice de conteúdo para que o usuário possa conferir o que foi armazenado no dispositivo e o que precisa ser salvo. As configurações precisam ser concisas e claras sobre onde os dados são armazenados e quem tem acesso a eles.
Mostrar o custo real de uma ação
Muitos usuários associam o recurso off-line a "download". Os usuários em países em que as conexões de rede falham com frequência ou não estão disponíveis compartilham conteúdo com outros usuários ou salvam conteúdo para uso off-line quando têm conectividade.
Os usuários com planos de dados às vezes evitam fazer o download de arquivos grandes por medo do custo. Por isso, talvez você também queira mostrar um custo associado para que os usuários possam fazer uma comparação ativa de um arquivo ou tarefa específica. Por exemplo, o app de música mencionado pode detectar se o usuário está em um plano de dados e mostrar o tamanho do arquivo para que o usuário possa conferir o custo de um arquivo.
Ajudar a evitar experiências hackeadas
Os usuários muitas vezes hackeiam uma experiência sem perceber. Por exemplo, antes dos apps da Web de compartilhamento de arquivos baseados na nuvem, era comum os usuários salvarem arquivos grandes e os anexarem a e-mails para continuar editando esses arquivos em um dispositivo diferente. Uma boa interface resolve o problema que os usuários estão tentando resolver sem se envolver na experiência hackeada. Por exemplo, forneça uma maneira de compartilhar arquivos grandes entre dispositivos, em vez de facilitar o envio de arquivos grandes em e-mails.
Transferir experiências de um dispositivo para outro
Ao criar para redes instáveis, tente sincronizar assim que a conexão melhorar para que a experiência seja transferível. Por exemplo, imagine um app de viagens perdendo uma conexão de rede no meio de uma reserva. Quando a conexão é reestabelecida, o app é sincronizado com a conta do usuário, permitindo que ele continue a reserva no dispositivo de mesa e tornando a experiência perfeita.
Informe ao usuário em que estado os dados estão. Por exemplo, você pode mostrar se o app foi sincronizado. Ofereça informações sempre que possível, mas não sobrecarregue o usuário com muitas mensagens.
Criar experiências de design inclusivas
Ao projetar sua UX, procure ser inclusivo, fornecendo recursos de design significativos, linguagem simples, iconografia padrão e imagens significativas que orientem o usuário a concluir a ação ou tarefa sem atrapalhar.
Use uma linguagem simples e clara
Uma boa UX não se resume a projetar a interface. Ele inclui o caminho que um usuário segue pelo app e tudo o que ele encontra ao longo do caminho, incluindo a linguagem usada pelo app para descrever essa jornada. Ao explicar os componentes da interface ou o estado do app, evite jargões técnicos. A palavra "off-line" geralmente não é clara o suficiente para informar ao usuário o que o app está fazendo.
Usar vários dispositivos de design para criar experiências do usuário acessíveis
Use linguagem, cor e componentes visuais para mostrar um status ou uma mudança de estado. Usar apenas a cor para mostrar o estado pode ser difícil de perceber pelos usuários ou até completamente inacessível para usuários com deficiência visual. Além disso, como o design da Web tende a usar cinza para elementos desativados, usar a interface cinza para mostrar que o app está off-line pode causar confusão sobre o que ele pode fazer enquanto está off-line, especialmente se você usar apenas a cor para mostrar o estado.
Para evitar mal-entendidos, expresse os estados do app para o usuário de várias maneiras, por exemplo, com cores, rótulos e componentes da interface.
Use ícones que transmitam significado
Use rótulos de texto significativos com os ícones. Os ícones sozinhos podem ser confusos, especialmente porque o conceito de "off-line" na Web é relativamente novo. Outros casos de ícones confusos incluem o uso de um disquete para representar "salvar", que pode não ter significado para usuários mais jovens que nunca viram um disquete, bem como o ícone de menu "hambúrguer".
Ao apresentar um ícone off-line, mantenha a consistência com os recursos padrão do setor quando eles existirem e forneça um rótulo e uma descrição de texto. Por exemplo, você pode usar um ícone de download para indicar que a ação de salvar é para uso off-line e um ícone de sincronização para uma ação que envolve sincronização. Tenha cuidado ao usar ícones para demonstrar status que podem ser interpretados como uma ação de salvar ou fazer o download.
Para mais inspiração, consulte o conjunto de ícones do Material Design.
Usar layouts de esqueleto e outros mecanismos de feedback
Enquanto o app carrega o conteúdo, mostre ao usuário que ele está carregando para que ele não pense que está quebrado. Uma maneira de fazer isso é usar um layout de esqueleto, uma versão de wireframe do app que aparece enquanto o conteúdo está sendo carregado. Considere também usar uma interface de pré-carregamento com um rótulo de texto informando ao usuário que o app está sendo carregado ou uma animação de pulsação suave para que o wireframe pareça estar vivo e sendo carregado. Isso garante ao usuário que algo está acontecendo e ajuda a evitar reenvios ou atualizações desnecessárias.
Mostre o estado de uma ação feedback. Por exemplo, se um usuário estiver editando um documento off-line, considere mudar o design do feedback para que ele seja visivelmente diferente do modo como ele é quando o usuário está on-line, mas ainda mostre que o arquivo foi "salvo" e será sincronizado quando o usuário tiver uma conexão de rede. Isso informa ao usuário como o app funciona e garante que a tarefa ou ação dele foi armazenada, o que pode aumentar a confiança dele ao usar o aplicativo.
Não bloquear conteúdo
Em alguns apps, um usuário pode acionar uma ação, como a criação de um novo documento. Alguns apps tentam se conectar a um servidor para sincronizar o novo documento e, para demonstrar isso, eles mostram uma caixa de diálogo modal de carregamento intrusiva que cobre toda a tela. Isso pode funcionar se o usuário tiver uma conexão de rede estável, mas, se a rede for instável, ele não vai conseguir sair dessa ação. Portanto, a interface impede que ele faça qualquer outra coisa.
Evite solicitações de rede que bloqueiam conteúdo. Permita que o usuário continue navegando pelo app e coloque em fila tarefas que serão realizadas e sincronizadas quando a conexão melhorar.
Projetar para o próximo bilhão de usuários
Em muitas regiões, dispositivos de baixo custo são comuns, a conectividade não é confiável e, para muitos usuários, os dados são extremamente caros. Ganhe a confiança dos usuários sendo transparente e econômico com os dados. Pense em maneiras de ajudar os usuários com conexões ruins e simplifique a interface para ajudar a acelerar as tarefas. Sempre peça permissão aos usuários antes de fazer o download de conteúdo com muitos dados.
Ofereça opções de baixa largura de banda para usuários com conexões lentas. Forneça recursos menores em conexões de rede mais lentas ou ofereça uma opção para escolher recursos de alta ou baixa qualidade.
Conclusão
A educação é fundamental para a UX off-line porque os usuários não estão familiarizados com ela. Para ajudar a aprender, tente criar associações com conceitos conhecidos, como explicar que fazer o download para uso posterior é o mesmo que dados off-line.
Ao projetar para conexões de rede instáveis, lembre-se destas diretrizes:
- Projete para o sucesso, a falha e a instabilidade de uma conexão de rede.
- Os dados podem ser caros, então considere o usuário.
- Para a maioria dos usuários em todo o mundo, o ambiente tecnológico é quase exclusivamente móvel.
- Dispositivos de baixo custo são comuns, com armazenamento, memória e capacidade de processamento limitados, telas pequenas e qualidade de tela tátil mais baixa. Verifique se a performance faz parte do seu processo de design.
- Permita que os usuários naveguem no seu app quando estiverem off-line.
- Informe os usuários sobre o estado atual e as mudanças nos estados.
- Tente oferecer o modo off-line por padrão se o app não exigir muitos dados.
- Se o app tiver muitos dados, informe os usuários sobre como fazer o download para uso off-line.
- Permita que as experiências sejam transferidas entre dispositivos.
- Use linguagem, ícones, imagens, tipografia e cores para expressar ideias ao usuário.
- Ofereça garantias e feedback para ajudar o usuário.