I campi per caricare file sembrano semplici. Un pulsante che dice "Scegli file" e un modulo che invia i dati. Ma i caricamenti di file sono momenti ad alta posta in gioco. La persona ti affida il suo curriculum, il suo documento fiscale, la foto del suo prodotto. Se il caricamento sembra poco chiaro, goffo o fallito, abbandonerà il modulo. Se non sa quali tipi di file accetti o quanto può essere grande il file, perderà tempo a caricare quello sbagliato solo per sentirsi dire che non ha funzionato. Se il caricamento sembra poco sicuro, si chiederà se il tuo sito sia affidabile. Questo articolo spiega cosa fa funzionare i campi per caricare file, come proteggere sia l'utente sia il tuo sito e cosa sbagliano la maggior parte dei moduli, impedendo alle persone di arrivare in fondo.
Un campo per caricare file fa più che accettare file. Raccoglie informazioni sui permessi. Chi carica un curriculum dice "ecco i miei dati, usali per l'assunzione". Chi carica un documento dice "mi fido di te con questo". Il campo di caricamento deve comunicare chiaramente cosa farai con il file, perché ti serve e che è sicuro caricarlo.
Perché i caricamenti di file sono diversi dagli altri campi del modulo
Un campo di testo accetta parole. Un campo email accetta un indirizzo email. Un campo per caricare file accetta file di qualsiasi dimensione, tipo e provenienza. Questo rende i caricamenti di file fondamentalmente diversi dagli altri campi in tre modi.
Primo, i caricamenti di file comportano un rischio per la sicurezza. Un file dannoso caricato sul tuo server può danneggiare il tuo sito, rubare dati o infettare i dispositivi dei tuoi visitatori. I campi di testo e quelli email hanno confini chiari. I caricamenti di file no. Qualcuno potrebbe caricare un eseguibile mascherato, uno script o un malware. Significa che devi validare e proteggerti da ogni caricamento che arriva.
Secondo, i caricamenti di file richiedono un contesto chiaro. La persona deve sapere quale file caricare prima di mettersi a cercare nel computer. Un campo email si spiega da sé. Un campo per caricare file deve dire "Carica il tuo curriculum in formato PDF o DOC, massimo 5 MB". Senza questa chiarezza, le persone passeranno minuti a cercare un file per poi scoprire che è nel formato sbagliato o troppo grande.
Terzo, i caricamenti di file sono lenti. Caricare un file da 10 MB su un telefono in 4G richiede tempo. La persona aspetta. Deve sapere che il caricamento è in corso e che non è bloccato né congelato. Uno stato di caricamento e un indicatore di avanzamento sono essenziali.
Il campo di caricamento e come etichettarlo
Il campo di caricamento è il pulsante che le persone cliccano per selezionare un file. Il testo del pulsante conta. Deve dire cosa succede dopo.
"Scegli file" è vago. "Sfoglia i file" è meglio. "Carica il tuo curriculum" è il migliore. Il testo del pulsante dovrebbe nominare il file specifico che vuoi. Così la persona sa esattamente cosa cercare nel computer.
L'etichetta sopra il pulsante dovrebbe ripetere il requisito. "Curriculum (PDF o DOC, max 5 MB)". Metti il limite di dimensione e i formati accettati direttamente sotto l'etichetta. Non nascondere questa informazione sotto un'icona di aiuto o in un piccolo testo grigio. Le persone devono vederla subito, o non sapranno cosa caricare.
Se il tuo modulo accetta più file, il pulsante dovrebbe dire "Aggiungi file" o "Carica più file". Un campo che accetta un solo file e all'improvviso ne accetta due confonde le persone. Sii esplicito.
Se il caricamento è facoltativo, dillo. "Portfolio (facoltativo, JPG o PNG, max 20 MB per immagine)". Se il caricamento è obbligatorio, l'etichetta dovrebbe dire "obbligatorio" o avere un asterisco. Non dare per scontato che le persone capiscano.
Tipi di file accettati e come comunicarli chiaramente
Non puoi accettare ogni tipo di file. Il tuo modulo per i curriculum non ha bisogno di foto JPEG. Il tuo modulo per i documenti non ha bisogno di file video. Devi specificare esattamente quali tipi di file accetti.
Non usare il gergo tecnico. Non dire "tipi MIME" o "estensioni dei file". Di' "PDF, documenti di testo o esportazioni da Google Docs". Di' "foto JPG o PNG". Di' "fogli di calcolo". Usa i nomi che le persone capiscono.
Quando una persona carica un file nel formato sbagliato, l'errore deve essere specifico. Non "Tipo di file non valido." Piuttosto, "Questo modulo accetta documenti PDF o DOC. Converti il file e riprova." Di' cosa è andato storto e cosa fare.
Se il tuo modulo richiede tipi di file diversi per campi diversi, rendi chiaro ciascuno. Una candidatura di lavoro può chiedere un curriculum in PDF e una lettera di presentazione in DOC. Ogni campo dovrebbe avere il suo pulsante e i suoi tipi accettati. Non far indovinare alle persone quale file va dove.
Usa un elenco di tipi consentiti, mai un elenco di tipi vietati. Non dire "tutti i tipi di file tranne gli eseguibili". Di' invece esattamente quali tipi sono consentiti. L'approccio con l'elenco dei consentiti è più semplice per gli utenti e più forte per la sicurezza.
Limiti di dimensione dei file e come gestirli
Ogni campo per caricare file ha bisogno di una dimensione massima. Senza, una persona potrebbe caricare per errore un video da 500 MB e il tuo server potrebbe bloccarsi o esaurire lo spazio.
Il limite di dimensione deve corrispondere a ciò che le persone usano davvero. Un curriculum pesa di solito da 1 a 3 MB. Imposta il limite a 10 MB per lasciare margine. Una foto del profilo pesa da 2 a 5 MB. Imposta il limite a 20 MB. Un video può pesare da 50 MB a 500 MB. Imposta il limite in base a ciò che ti serve davvero.
Di' alle persone il limite di dimensione prima del caricamento. "La dimensione massima del file è 5 MB." Mettilo proprio accanto al pulsante. Se qualcuno carica un file troppo grande, l'errore deve essere immediato e chiaro. Non un indicatore che gira per 30 secondi e poi fallisce. Mostra l'errore appena il file è selezionato, prima che il caricamento inizi.
Se supporti file grandi, valuta di permettere caricamenti a blocchi o riprendibili. Se il file da 100 MB di qualcuno si interrompe a metà, il caricamento riprendibile gli permette di continuare da dove si era fermato invece di ricominciare. Evita la frustrazione sulle connessioni lente.
Trascinamento e più metodi di selezione
I campi per caricare file dovrebbero supportare più modi di selezionare i file. Alcune persone cliccano il pulsante. Alcune trascinano i file dal desktop. Alcune sfogliano la libreria foto del telefono. Devi supportarli tutti.
Il pulsante è il metodo principale. Apre la finestra nativa di selezione file, che funziona su ogni dispositivo e ogni browser.
Il trascinamento è il metodo secondario. Una persona dovrebbe poter trascinare un file dal desktop e rilasciarlo nell'area di caricamento. È più veloce e intuitivo che cliccare un pulsante e aspettare l'apertura della finestra di selezione. Mostra un chiaro indicatore visivo quando qualcuno trascina un file sull'area di rilascio. L'area dovrebbe evidenziarsi, cambiare colore o mostrare un bordo tratteggiato. Dice alle persone che possono rilasciare il file qui.
Su cellulare, la selezione dei file funziona in modo diverso. Una persona tocca il pulsante e sceglie tra la libreria foto, l'app dei file o scattare una nuova foto. Supporta tutto ciò che funziona sul suo dispositivo. Non limitare gli utenti da cellulare al solo clic.
Se il tuo modulo accetta più file, consenti sia la selezione multipla sia l'aggiunta singola. Lascia che le persone selezionino cinque file insieme dalla finestra di selezione. Lascia anche che ne aggiungano uno dopo. Non obbligare a fare tutta la selezione in una sola finestra del browser.
Mostrare cosa è stato caricato e rimuovere i file
Dopo che qualcuno seleziona un file, mostragli esattamente cosa ha caricato. Mostra il nome del file, la dimensione e una piccola icona del tipo di file. Conferma che ha caricato il file giusto.
Se il modulo accetta più file, mostrali tutti in un elenco. Lascia che le persone vedano cosa stanno per inviare. Se hanno caricato il file sbagliato, lascia che lo rimuovano e ne carichino un altro prima dell'invio del modulo.
Il pulsante di rimozione dovrebbe dire "Rimuovi" o avere un'icona X. Cliccarlo deve eliminare quel file dall'elenco dei caricamenti. Non deve eliminarlo dal computer, solo dal modulo.
Se qualcuno deve sostituire un file, non costringerlo a rimuovere e ricaricare. Lascia che clicchi il pulsante di rimozione e poi di nuovo quello di caricamento in un unico flusso. Oppure permetti di cliccare il file per aprire la selezione e scegliere un file sostitutivo direttamente. Meno passaggi significa tassi di completamento più alti.
Indicazione di avanzamento e cosa mostrare durante il caricamento
I caricamenti di file richiedono tempo. In quel tempo la persona aspetta e si chiede se sta succedendo qualcosa. Devi mostrare l'avanzamento.
Una barra di avanzamento è l'opzione più chiara. Mostra una percentuale completata. 25%. 50%. 75%. Completato. La persona può vederla muoversi e sapere che il caricamento è in corso. Una barra che salta da 0% a 100% all'istante non serve. Mostra un avanzamento fluido.
Se non puoi mostrare una percentuale esatta, mostra un indicatore rotante o un'animazione di caricamento. Qualcosa che si muove e mostra attività. Non mostrare uno stato di caricamento statico senza movimento. Uno stato statico sembra bloccato.
Non rendere mai cliccabile il pulsante di invio mentre un file si sta caricando. Rendilo grigio o disattivalo. Non lasciare che le persone clicchino invia più volte mentre un file si sta caricando. Può causare caricamenti doppi o errori.
Se il caricamento richiede più di tre secondi, mostra una stima del tempo rimanente. "Caricamento in corso. Circa 30 secondi." oppure "Caricamento in corso. File grande." Non lasciare che le persone si chiedano quanto manca.
Gestione degli errori e perché gli errori vaghi fanno perdere completamenti
Gli errori di caricamento capitano. Un file è danneggiato. Una connessione di rete cade. Un file è troppo grande. È stato caricato un formato non supportato. Quando succede un errore, il tuo messaggio decide se la persona lo risolve o abbandona il modulo.
Un errore vago come "Caricamento non riuscito. Riprova." non dice nulla. Riprovare cosa. Cosa è andato storto. Il file è danneggiato. La rete è guasta. Il tipo di file è sbagliato. Gli errori vaghi fanno sentire le persone impotenti.
Un errore specifico nomina il problema. "Questo file è troppo grande. Il tuo file è 25 MB. Il massimo è 10 MB. Comprimilo o scegli un file più piccolo." "Questo formato di file non è supportato. Questo modulo accetta solo documenti PDF e DOC. Converti il file in PDF e riprova."
Mostra l'errore in un punto ben visibile. Non nascosto in un testo grigio in fondo al modulo. Usa uno sfondo rosso, un bordo rosso o un'icona rossa. Attira l'attenzione perché lo vedano subito.
Non eliminare il file dall'elenco dei caricamenti quando si verifica un errore. Tienilo visibile, così sanno quale file ha avuto il problema. Lascia che lo correggano sul posto o lo sostituiscano.
Sicurezza e protezione di utente e sito
I caricamenti di file sono un punto debole per la sicurezza. Una persona che carica un file con codice nascosto può danneggiare il tuo server. Un sistema di caricamento scadente può esporre il file ad altri utenti o ad attaccanti.
Il primo passo di sicurezza è validare il tipo di file. Non fidarti dell'estensione. Un file chiamato "curriculum.pdf" potrebbe contenere codice eseguibile. Controlla il contenuto del file, non solo il nome. Si chiama validazione del tipo MIME. Il server legge il contenuto reale del file e conferma che sia davvero un PDF, davvero un'immagine, qualunque cosa ti aspetti.
Il secondo passo è rinominare il file dopo il caricamento. Non conservare i file con i nomi dati dagli utenti. Rinominali automaticamente. "curriculum.pdf" diventa "upload-a4f9e2k1.pdf" sul tuo server. Impedisce di indovinare il percorso del file e di accedervi direttamente, o di provare a eseguire codice caricando un file con un nome specifico.
Il terzo passo è conservare i file fuori dalla cartella web. Non mettere i file caricati in una cartella direttamente accessibile da internet. Conservali separatamente. Quando qualcuno deve scaricare il suo file, invialo tramite un link sicuro che scade, non un URL diretto al percorso del file.
Il quarto passo è impostare dimensione massima e limiti di caricamento. Limita la dimensione totale di ogni file. Limita il numero di file che una persona può caricare. Limita quanti caricamenti una singola persona può fare in un'ora. Questi limiti prevengono gli abusi e proteggono il tuo server.
Il quinto passo è richiedere l'autenticazione. Se il tuo modulo non è pubblico, richiedi agli utenti di accedere prima di caricare file. Impedisce a persone a caso su internet di caricare file dannosi sul tuo server.
Il sesto passo è usare HTTPS. Ogni caricamento di file deve essere cifrato in transito. Se carichi un file con HTTP semplice, un attaccante sulla rete potrebbe intercettarlo. Usa sempre HTTPS per qualsiasi modulo che includa caricamenti di file.
Come WEMASY ti aiuta a creare moduli sicuri con caricamento di file
Il creatore di moduli di WEMASY include campi per caricare file con funzioni di sicurezza ed esperienza d'uso già integrate. Puoi impostare tipi di file accettati, dimensioni massime e se i caricamenti sono obbligatori o facoltativi senza scrivere codice. Il creatore di moduli valida i tipi di file sia lato client sia lato server per prevenire caricamenti dannosi.
I caricamenti tramite i moduli WEMASY usano la cifratura sicura HTTPS. I file sono conservati fuori dalla cartella del tuo sito e consegnati tramite link di download sicuri e a scadenza. Non devi costruire tu questa infrastruttura.
L'interfaccia di caricamento include trascinamento, anteprima del file, gestione degli errori e indicazione di avanzamento già integrati. I moduli mostrano automaticamente agli utenti quali tipi di file sono accettati e quali sono i limiti di dimensione. Sono supportati i caricamenti da cellulare e da computer.
Puoi personalizzare il testo del pulsante, i tipi di file accettati e i limiti di dimensione in base alle esigenze del tuo modulo. Scopri quali funzioni dei moduli sono incluse nel tuo piano WEMASY.