Os campos de carregamento de ficheiros parecem simples. Um botão que diz "Escolher ficheiro" e um formulário que envia os dados. Mas os carregamentos de ficheiros são momentos de grande peso. A pessoa está a confiar-te o currículo, o documento fiscal, a foto do produto. Se o carregamento parece pouco claro, desajeitado ou falhado, abandona o formulário. Se não sabe que tipos de ficheiro aceitas nem quão grande o ficheiro pode ser, vai perder tempo a carregar o ficheiro errado só para ouvir que falhou. Se o carregamento parece inseguro, vai questionar se o teu site é de confiança. Este artigo explica o que faz os campos de carregamento de ficheiros funcionar, como proteger o utilizador e o teu site, e o que a maioria dos formulários faz mal e impede as pessoas de concluir.
Um campo de carregamento de ficheiros faz mais do que aceitar ficheiros. Recolhe informação sobre permissões. Uma pessoa que carrega um currículo está a dizer "aqui está a minha informação, usa-a para contratar." Uma pessoa que carrega um documento está a dizer "confio em ti com isto." O campo de carregamento tem de comunicar com clareza o que vais fazer com o ficheiro, porque precisas dele e que é seguro carregá-lo.
Porque é que os carregamentos de ficheiros são diferentes de outros campos de formulário
Um campo de texto aceita palavras. Um campo de email aceita um endereço de email. Um campo de carregamento de ficheiros aceita ficheiros de qualquer tamanho, tipo e origem. Isto torna os carregamentos de ficheiros fundamentalmente diferentes dos outros campos de formulário em três aspetos.
Primeiro, os carregamentos de ficheiros trazem risco de segurança. Um ficheiro malicioso carregado para o teu servidor pode danificar o teu site, roubar dados ou infetar os dispositivos dos teus visitantes. Os campos de texto e de email têm limites claros. Os carregamentos de ficheiros não. Uma pessoa pode carregar um executável disfarçado, um script ou malware. Isto quer dizer que tens de validar e proteger-te contra cada carregamento que chega.
Segundo, os carregamentos de ficheiros exigem contexto claro. Uma pessoa precisa de saber que ficheiro carregar antes de começar a procurar no computador. Um campo de email explica-se por si. Um campo de carregamento de ficheiros precisa de dizer "Carrega o teu currículo em PDF ou documento de texto, máximo 5 MB." Sem essa clareza, as pessoas vão gastar minutos a encontrar um ficheiro só para descobrir que tem o formato errado ou é grande demais.
Terceiro, os carregamentos de ficheiros são lentos. Carregar um ficheiro de 10 MB num telemóvel por 4G demora. A pessoa está à espera. Precisa de saber que o carregamento está a acontecer e que não está preso nem bloqueado. Um estado de carregamento e um indicador de progresso são essenciais.
O campo de carregamento em si e como o etiquetar
O campo de carregamento é o botão em que as pessoas clicam para selecionar um ficheiro. O texto do botão importa. Deve dizer o que acontece a seguir.
"Escolher ficheiro" é vago. "Procurar ficheiros" é melhor. "Carregar o teu currículo" é o melhor. O texto do botão deve nomear o ficheiro específico que queres. Isto diz à pessoa exatamente o que procurar no computador.
A etiqueta por cima do botão deve repetir o requisito. "Currículo (PDF ou documento de texto, máx. 5 MB)". Põe o limite de tamanho e os formatos aceites diretamente sob a etiqueta. Não escondas esta informação sob um ícone de ajuda nem em texto cinzento pequeno. As pessoas têm de a ver logo ou não vão saber o que carregar.
Se o teu formulário aceita vários ficheiros, o botão deve dizer "Adicionar ficheiros" ou "Carregar vários ficheiros". Um campo de carregamento de um só ficheiro que de repente aceita dois confunde as pessoas. Sê explícito.
Se o carregamento é opcional, diz isso. "Portefólio (opcional, JPG ou PNG, máx. 20 MB por imagem)". Se o carregamento é obrigatório, a etiqueta deve dizer "obrigatório" ou ter um asterisco. Não assumas que as pessoas percebem.
Tipos de ficheiro aceites e como comunicá-los com clareza
Não podes aceitar todos os tipos de ficheiro. O teu formulário de currículos não precisa de fotos JPEG. O teu formulário de documentos não precisa de ficheiros de vídeo. Tens de especificar exatamente que tipos de ficheiro aceitas.
Não uses jargão técnico. Não digas "tipos MIME" nem "extensões de ficheiro." Diz "PDF, documentos de texto ou exportações do Google Docs." Diz "fotos JPG ou PNG." Diz "folhas de cálculo." Usa os nomes que as pessoas entendem.
Quando uma pessoa carrega um ficheiro no formato errado, o erro tem de ser específico. Não "Tipo de ficheiro inválido." Em vez disso, "Este formulário aceita PDF ou documentos de texto. Converte o teu ficheiro e tenta outra vez." Diz-lhes o que correu mal e o que fazer.
Se o teu formulário precisa de vários tipos de ficheiro em campos diferentes, torna cada um claro. Uma candidatura a emprego pode pedir um currículo em PDF e uma carta de apresentação em documento de texto. Cada campo deve ter o seu botão e os seus tipos aceites. Não faças as pessoas adivinhar que ficheiro vai onde.
Faz uma lista de permitidos dos teus tipos de ficheiro, nunca uma lista de proibidos. Não digas "todos os tipos de ficheiro exceto executáveis." Em vez disso, diz exatamente que tipos são permitidos. Uma lista de permitidos é mais simples para os utilizadores e mais forte para a segurança.
Limites de tamanho de ficheiro e como tratá-los
Todos os campos de carregamento de ficheiros precisam de um tamanho máximo. Sem ele, uma pessoa pode carregar um vídeo de 500 MB por engano e o teu servidor pode falhar ou ficar sem espaço.
O limite de tamanho tem de corresponder ao que as pessoas realmente usam. Um currículo costuma ter 1 a 3 MB. Define o limite em 10 MB para deixar margem. Uma foto de perfil tem 2 a 5 MB. Define o limite em 20 MB. Um clipe de vídeo pode ter 50 MB a 500 MB. Define o limite com base no que realmente precisas.
Diz às pessoas o limite de tamanho antes de carregarem. "O tamanho máximo do ficheiro é 5 MB." Põe-no mesmo ao lado do botão. Se alguém carrega um ficheiro demasiado grande, o erro deve ser imediato e claro. Não um círculo a rodar durante 30 segundos e depois falhar. Mostra o erro assim que o ficheiro é selecionado, antes de o carregamento começar.
Se suportas ficheiros grandes, considera permitir carregamentos em lotes ou carregamentos retomáveis. Se o ficheiro de 100 MB de alguém falha a meio, o carregamento retomável deixa-o continuar de onde parou em vez de recomeçar. Isto evita a frustração em ligações lentas.
Arrastar e largar e vários métodos de seleção
Os campos de carregamento de ficheiros devem suportar várias formas de selecionar ficheiros. Algumas pessoas clicam no botão. Outras arrastam ficheiros do ambiente de trabalho. Outras navegam na galeria de fotos do telemóvel. Tens de suportar todas.
O botão é o método principal. Abre o navegador de ficheiros nativo, que funciona em todos os dispositivos e navegadores.
Arrastar e largar é o método secundário. Uma pessoa deve poder arrastar um ficheiro do ambiente de trabalho e largá-lo na área de carregamento. Parece mais rápido e intuitivo do que clicar num botão e esperar que o navegador de ficheiros abra. Mostra um indicador visual claro quando alguém arrasta um ficheiro por cima da zona de largar. A área deve destacar-se, mudar de cor ou mostrar um contorno tracejado. Isto diz às pessoas que podem largar o ficheiro ali.
No telemóvel, a seleção de ficheiros funciona de forma diferente. Uma pessoa toca no botão e escolhe entre a galeria de fotos, a aplicação de ficheiros ou tirar uma foto nova. Suporta o que funcionar no dispositivo. Não limites os utilizadores de telemóvel a só clicar.
Se o teu formulário aceita vários ficheiros, permite a seleção em bloco e a adição individual. Deixa as pessoas selecionar cinco ficheiros de uma vez no navegador de ficheiros. Deixa-as também acrescentar mais um depois. Não obrigues toda a seleção a acontecer numa só janela do navegador.
Mostrar o que foi carregado e remover ficheiros
Depois de alguém selecionar um ficheiro, mostra-lhe exatamente o que carregou. Apresenta o nome do ficheiro, o tamanho e um pequeno ícone com o tipo de ficheiro. Isto confirma que carregou o ficheiro certo.
Se o formulário aceita vários ficheiros, mostra-os todos numa lista. Deixa as pessoas ver o que estão prestes a enviar. Se carregaram o ficheiro errado, deixa-as removê-lo e carregar outro antes de o formulário ser enviado.
O botão de remover deve dizer "Remover" ou ter um ícone X. Clicar nele deve apagar esse ficheiro da lista de carregamento. Não deve apagar o ficheiro do computador, só do formulário.
Se alguém precisa de substituir um ficheiro, não o obrigues a remover e voltar a carregar. Deixa-o clicar no botão de remover e depois no botão de carregar outra vez num só fluxo. Ou permite clicar no ficheiro para abrir o navegador e selecionar um ficheiro de substituição no próprio sítio. Menos passos significa taxas de conclusão mais altas.
Indicação de progresso e o que mostrar durante o carregamento
Os carregamentos de ficheiros demoram. Durante esse tempo, a pessoa está à espera e a perguntar-se se algo está a acontecer. Tens de lhe mostrar o progresso.
Uma barra de progresso é a opção mais clara. Mostra uma percentagem concluída. 25%. 50%. 75%. Concluído. Uma pessoa vê-a mover-se e sabe que o carregamento está a acontecer. Uma barra de progresso que salta de 0% para 100% instantaneamente não ajuda. Mostra um progresso suave.
Se não consegues mostrar a percentagem exata, mostra um círculo a rodar ou uma animação de carregamento. Algo que se move e mostra atividade. Não mostres um estado de carregamento estático, sem movimento. Um carregamento estático parece bloqueado.
Nunca deixes o botão de enviar clicável enquanto um ficheiro está a ser carregado. Põe-no a cinzento ou desativa-o. Não deixes as pessoas clicar em enviar várias vezes enquanto um ficheiro é carregado. Pode causar carregamentos duplicados ou erros.
Se o carregamento demora mais de três segundos, mostra uma estimativa do tempo restante. "A carregar. Faltam cerca de 30 segundos." ou "A carregar. Ficheiro grande." Não faças as pessoas perguntar-se quanto tempo falta.
Tratamento de erros e porque os erros vagos perdem conclusões de formulários
Os erros de carregamento acontecem. Um ficheiro está corrompido. Uma ligação de rede cai. Um ficheiro é demasiado grande. Foi carregado um formato não suportado. Quando acontece um erro, a tua mensagem determina se a pessoa o corrige ou abandona o formulário.
Um erro vago como "O carregamento falhou. Tenta outra vez." não lhes diz nada. Tentar o quê outra vez. O que correu mal. O ficheiro está corrompido. A rede está avariada. O tipo de ficheiro está errado. Os erros vagos fazem as pessoas sentir-se impotentes.
Um erro específico nomeia o problema. "Este ficheiro é demasiado grande. O teu ficheiro tem 25 MB. O máximo é 10 MB. Comprime-o ou escolhe um ficheiro mais pequeno." "Este formato de ficheiro não é suportado. Este formulário aceita apenas PDF e documentos de texto. Converte o teu ficheiro para PDF e tenta outra vez."
Mostra o erro num sítio bem visível. Não escondido em texto cinzento no fundo do formulário. Usa um fundo vermelho, uma borda vermelha ou um ícone vermelho. Chama a atenção para ele para verem o erro logo.
Não apagues o ficheiro da lista de carregamento quando ocorre um erro. Mantém-no visível para saberem que ficheiro teve o problema. Deixa-os corrigir no próprio sítio ou substituí-lo.
Segurança e proteção do utilizador e do site
Os carregamentos de ficheiros são um ponto fraco de segurança. Uma pessoa que carrega um ficheiro com código escondido pode danificar o teu servidor. Um sistema de carregamento fraco pode expor o ficheiro a outros utilizadores ou a atacantes.
O primeiro passo de segurança é validar o tipo de ficheiro. Não confies na extensão do ficheiro. Um ficheiro chamado "resume.pdf" pode na verdade conter código executável. Verifica o conteúdo do próprio ficheiro, não só o nome. Chama-se validação do tipo MIME. O servidor lê o conteúdo real do ficheiro e confirma que é mesmo um PDF, mesmo uma imagem, o que esperas.
O segundo passo é mudar o nome do ficheiro depois do carregamento. Não guardes ficheiros com os nomes que os utilizadores lhes deram. Muda-lhes o nome automaticamente. "resume.pdf" passa a "upload-a4f9e2k1.pdf" no teu servidor. Isto evita que alguém adivinhe o caminho do ficheiro e lhe aceda diretamente, ou tente executar código carregando um ficheiro com um nome específico.
O terceiro passo é guardar os ficheiros fora da pasta web. Não ponhas ficheiros carregados numa pasta diretamente acessível na internet. Guarda-os à parte. Quando alguém precisa de descarregar o seu ficheiro, envia-o através de uma ligação segura que expira, não de um endereço direto para o caminho do ficheiro.
O quarto passo é definir tamanho máximo de ficheiro e limites de carregamento. Limita o tamanho total de cada ficheiro. Limita o número de ficheiros que alguém pode carregar. Limita quantos carregamentos uma só pessoa pode fazer numa hora. Estes limites previnem abusos e protegem o teu servidor.
O quinto passo é exigir autenticação. Se o teu formulário não é público, exige que os utilizadores iniciem sessão antes de carregar ficheiros. Isto impede pessoas aleatórias na internet de carregar ficheiros maliciosos para o teu servidor.
O sexto passo é usar HTTPS. Todos os carregamentos de ficheiros têm de ser encriptados em trânsito. Se carregas um ficheiro por HTTP simples, um atacante na rede pode intercetá-lo. Usa sempre HTTPS em qualquer formulário que inclua carregamento de ficheiros.
Como a WEMASY ajuda a criar formulários seguros de carregamento de ficheiros
O criador de formulários da WEMASY inclui campos de carregamento de ficheiros com segurança e funcionalidades de experiência de utilização integradas. Podes definir os tipos de ficheiro aceites, os tamanhos máximos e se os carregamentos são obrigatórios ou opcionais, sem escrever código. O criador de formulários valida os tipos de ficheiro no cliente e no servidor para evitar carregamentos maliciosos.
Os carregamentos através dos formulários da WEMASY usam encriptação HTTPS segura. Os ficheiros são guardados fora da pasta do teu website e entregues através de ligações de descarregamento seguras e com validade. Não tens de construir esta infraestrutura tu mesmo.
A interface de carregamento inclui arrastar e largar, pré-visualização de ficheiros, tratamento de erros e indicação de progresso integrados. Os formulários mostram automaticamente aos utilizadores que tipos de ficheiro são aceites e quais os limites de tamanho. Os carregamentos no telemóvel e no computador são suportados.
Podes personalizar o texto do botão, os tipos de ficheiro aceites e os limites de tamanho para corresponder às necessidades do teu formulário. Vê que funcionalidades de formulários estão incluídas no teu plano WEMASY.