Esta página fornece 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:
- Cobertura ruim do provedor de rede.
- Condições climáticas extremas.
- Quedas de energia.
- Inserção de "zonas mortas" permanentes, como em edifícios com paredes que bloqueiam conexões de rede.
- Entrar em "zonas mortas" temporárias, como ao viajar de trem ou passar por um túnel.
- conexões de Internet com intervalos de tempo, como em aeroportos ou hotéis;
- Práticas culturais que exigem acesso limitado ou negado à Internet em horários ou dias específicos
Seu objetivo como desenvolvedor é proporcionar uma boa experiência que diminua o impacto das mudanças na conectividade.
Decida o que mostrar aos seus usuários quando eles tiverem uma conexão de rede ruim
A primeira pergunta a ser feita é como seria o sucesso e a falha de uma conexão de rede para seu app. Uma conexão bem-sucedida é a experiência on-line normal do app. Uma falha de conexão inclui o comportamento do app off-line e em redes lentas.
Para determinar como lidar com falhas de conexão, pergunte-se estas perguntas importantes sobre a 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 o fracasso está sendo determinado?
- O que fazer se a conexão falhar?
- Como você diz 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 em caso de falha na 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. Apps que priorizam informações atuais, como clima ou rastreadores da bolsa de valores, precisam ser atualizados automaticamente e informar o usuário o mais rápido possível.
Recomendamos informar ao usuário que seu app da Web foi atualizado "em segundo plano" usando uma sugestão visual, como um elemento de aviso do Material Design. Isso envolve a detecção da presença de um service worker e de uma atualização do conteúdo gerenciado dele. Veja um exemplo de código dessa função em funcionamento aqui.
Um exemplo é o Status da plataforma do Chrome, que publica uma observação para o usuário quando o app foi atualizado.
Alguns apps sempre podem mostrar a última vez em que foram atualizados. Por exemplo, isso é especialmente útil para apps de conversão de moedas.
Os apps de notícias podem mostrar uma notificação simples de tocar para atualizar informando o usuário sobre novo conteúdo. A atualização automática de um artigo faria com que os usuários se perdessem.
Atualizar a interface para refletir o estado contextual atual
Cada elemento da interface pode ter o próprio contexto e comportamento, que mudam dependendo da conexão necessária. Um exemplo seria um site de e-commerce que pode ser navegado off-line, mas desativa os preços e o botão "Comprar" até que a 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 a bolsa de valores está aberta. Toda a interface fica branca e esmaece quando o mercado fecha. Quando o valor de uma ação aumenta ou diminui, cada widget de ações fica verde ou vermelho, dependendo do estado.
Ensinar o usuário a entender qual é o modelo off-line
A maioria dos usuários está acostumada a sempre ter uma conexão de rede. Você precisa ensiná-los sobre o que muda no seu app quando eles não têm uma conexão. Informe onde grandes dados são salvos e ofereça configurações para mudar o comportamento padrão. Use vários componentes de design da interface (como linguagem informativa, ícones, notificações, cores e imagens) juntos para transmitir essas ideias, em vez de confiar em uma única escolha de design, como um ícone por si só, para contar toda a história.
Oferecer uma experiência off-line por padrão
Se o app não exigir muitos dados, armazene-os em cache por padrão. Os usuários poderão 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 seu app não pareça confiável. Um app que diminui o impacto de uma falha de rede encanta os usuários.
Os sites de notícias podem se beneficiar do download automático e do salvamento automático das notícias mais recentes. Talvez os dados sejam salvos fazendo o download apenas do texto, para que o usuário possa ler as notícias de hoje sem precisar de conexão. É possível adaptar esse comportamento ao comportamento do usuário, priorizando o download das categorias de notícias mais visualizadas pelo usuário.
Informar o usuário quando o app está pronto para consumo off-line
Quando um app da Web é carregado pela primeira vez, ele precisa indicar ao usuário se ele está pronto para uso off-line. Faça isso com um widget que fornece feedback rápido sobre uma operação com uma mensagem na parte de baixo da tela. Por exemplo, quando uma seção tiver sido sincronizada ou um arquivo for transferido por download.
Confira se a linguagem usada é adequada ao seu público-alvo e use a mesma frase em todos os casos em que for aplicável. Públicos não técnicos geralmente entendem a palavra "off-line" de forma errada. Portanto, use uma linguagem baseada em ações com a qual eles se identifiquem.
Deixe claro "salvar para off-line" na interface
Se um aplicativo usar muitos dados, verifique se há uma chave ou pino para adicionar um item para uso off-line. Faça o download automático de arquivos somente se um usuário tiver solicitado especificamente esse comportamento em um menu de configurações. Verifique se a interface do usuário fixado ou de download é óbvia para o usuário e não oculta por outros elementos da interface.
Um exemplo disso é um player de música que exige arquivos grandes. O usuário está ciente 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 planeje com antecedência, então é recomendável informar o usuário sobre isso durante a integração.
Esclareça o que está disponível off-line
Seja claro sobre as opções disponíveis. Pode ser necessário mostrar uma guia ou configuração para uma "biblioteca off-line" ou índice de conteúdo para que o usuário possa conferir o que está armazenado no dispositivo e o que precisa ser salvo. Verifique se as configurações são concisas e deixe claro onde os dados são armazenados e quem tem acesso a eles.
Mostrar o custo real de uma ação
Muitos usuários equilibram a capacidade off-line com o "download". Os usuários em países em que as conexões de rede falham regularmente ou não estão disponíveis geralmente compartilham conteúdo com outros usuários ou salvam conteúdo para uso off-line quando têm conectividade.
Às vezes, os usuários de planos de dados evitam o download de arquivos grandes por medo de custo. Por isso, também convém mostrar um custo associado para que os usuários possam fazer uma comparação ativa para um arquivo ou tarefa específica. Por exemplo, o app de música mencionado acima pode detectar se o usuário está em um plano de dados e mostrar o tamanho do arquivo para conferir o custo.
Evitar experiências invadidas
Os usuários geralmente invadem uma experiência sem perceber. Por exemplo, antes de existirem apps da Web de compartilhamento de arquivos baseados na nuvem, era comum que os usuários salvasse arquivos grandes e os anexasse a e-mails para continuar editando esses arquivos em outro dispositivo. Uma boa interface resolve o problema que os usuários estão tentando resolver sem entrar na experiência invadida. Por exemplo, ofereça uma maneira de compartilhar arquivos grandes entre dispositivos, em vez de facilitar o processo de anexar arquivos grandes a e-mails.
Torne as experiências transferíveis 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 que perde uma conexão de rede no meio de uma reserva. Quando a conexão é restabelecida, o app é sincronizado com a conta do usuário, permitindo que ele continue reservando no dispositivo desktop e fazendo com que a experiência seja tranquila.
Diga ao usuário em que estado estão os dados. Por exemplo, você pode mostrar se o app foi sincronizado. Ensine-os sempre que possível, mas tente não sobrecarregá-los com muitas mensagens.
Criar experiências de design inclusivas
Ao projetar sua UX, busque ser inclusivo, fornecendo dispositivos 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 ao design da interface. Ele inclui o caminho que um usuário percorre no seu app e tudo o que ele encontra ao longo do caminho, incluindo a linguagem que o app usa 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 dizer ao usuário o que seu app está fazendo.
Usar vários dispositivos de design para criar experiências de usuário acessíveis
Use idiomas, cores e componentes visuais para mostrar um status ou uma mudança de estado. Usar apenas cores para mostrar o estado pode ser difícil de perceber para os usuários ou até totalmente inacessível para usuários com deficiência visual. Além disso, como o Web design tende a usar cinza para elementos desativados, usar a interface esmaecida para mostrar que o app está off-line pode causar confusão sobre o que ele pode fazer off-line, especialmente se você usar apenas cores 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 de interface.
Usar ícones que transmitem significados
Use rótulos de texto significativos ao lado dos ícones. Só os ícones 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 ser irrelevante para usuários mais jovens que nunca viram um disquete, bem como o ícone de menu de hambúrguer.
Ao apresentar um ícone off-line, mantenha a consistência com os recursos visuais padrão do setor quando houver e forneça um rótulo de texto e uma descrição. Por exemplo, você pode usar um ícone de download para significar salvar para off-line, um ícone de sincronização para uma ação que envolve sincronização. Tenha cuidado ao usar ícones para demonstrar o status que pode ser interpretado 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 conteúdo, mostre ao usuário que ele está sendo carregado para que ele não ache que há uma falha. Uma maneira de fazer isso é usando um layout de esqueleto, uma versão de wireframe do app exibida enquanto o conteúdo está sendo carregado. Considere também usar uma interface de pré-carregador com um rótulo de texto informando ao usuário que o app está sendo carregado ou uma animação pulsante suavemente para o wireframe para que ele pareça estar ativo e carregando. 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 fornecendo 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 de quando ele está on-line, mas ainda mostre que o arquivo foi "salvo" e será sincronizado quando houver uma conexão de rede. Isso informa o usuário sobre como o app funciona e garante que a tarefa ou ação tenha sido armazenada, o que pode aumentar a confiança no uso do 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 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 estiver instável, ele não conseguirá escapar dessa ação, então a interface o impede de fazer qualquer outra coisa.
Evite solicitações de rede que bloqueiem conteúdo. Permita que o usuário continue navegando no app e enfileire tarefas que serão executadas e sincronizadas quando a conexão melhorar.
Design voltado ao próximo bilhão
Em muitas regiões, dispositivos simples são comuns, a conectividade não é confiável e, para muitos usuários, os dados são extremamente caros. Conquiste a confiança dos usuários sendo transparentes e frugais com os dados. Pense em maneiras de ajudar usuários com conexões ruins e simplifique a interface para ajudar a acelerar tarefas. Sempre tente perguntar 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 ajudá-los a aprender, tente criar associações com conceitos familiares, como explicar que fazer o download para uso posterior é o mesmo que off-line de dados.
Ao projetar para conexões de rede instáveis, siga estas diretrizes:
- Projeto para o sucesso, falha e instabilidade de uma conexão de rede.
- Os dados podem ser caros, por isso, considere o usuário.
- Para a maioria dos usuários do mundo, o ambiente tecnológico é quase que exclusivamente móvel.
- Dispositivos mais simples são comuns, com armazenamento, memória e capacidade de processamento limitados, telas pequenas e qualidade de tela touchscreen menor. Certifique-se de que o desempenho faz parte do seu processo de design.
- Permita que os usuários naveguem pelo seu aplicativo quando estiverem off-line.
- Informe os usuários sobre o estado atual e as mudanças de estado.
- Tente oferecer o acesso off-line por padrão se o aplicativo não precisar de muitos dados.
- Se o app tiver muitos dados, explique aos usuários como fazer o download para uso off-line.
- Torne as experiências transferíveis entre dispositivos.
- Use linguagem, ícones, imagens, tipografia e cores para expressar ideias para o usuário.
- Forneça tranquilidade e feedback para ajudar o usuário.