Tiedostonlatauskentät: miten ne suunnitellaan niin, että ihmiset oikeasti käyttävät niitä

Opi, mikä saa tiedostonlatauskentät toimimaan. Tiedostotyypin validointi, tietoturva, käyttökokemus ja yleiset virheet, jotka tappavat lomakkeen täytön.

Luonnos

Tiedostonlatauskentät vaikuttavat yksinkertaisilta. Painike, jossa lukee "Valitse tiedosto", ja lomake lähettää tiedot. Mutta tiedostojen lataus on tärkeä hetki. Ihminen luottaa sinulle CV:nsä, veroasiakirjansa tai tuotekuvansa. Jos lataus tuntuu epäselvältä, kömpelöltä tai epäonnistuneelta, he keskeyttävät lomakkeen. Jos he eivät tiedä, mitä tiedostotyyppejä hyväksyt tai kuinka suuri tiedosto saa olla, he tuhlaavat aikaa väärän tiedoston lataamiseen ja kuulevat vasta sitten, että se epäonnistui. Jos lataus tuntuu turvattomalta, he kyseenalaistavat sivustosi luotettavuuden. Tässä artikkelissa käydään läpi, mikä saa tiedostonlatauskentät toimimaan, miten suojaat sekä käyttäjää että sivustoasi ja mitä useimmat lomakkeet tekevät väärin, jolloin ihmiset eivät vie asiaa loppuun.

Tiedostonlatauskenttä tekee muutakin kuin ottaa vastaan tiedostoja. Se kerää tietoa luvista. Ihminen, joka lataa CV:n, sanoo "tässä ovat tietoni, käytä niitä rekrytointiin." Ihminen, joka lataa asiakirjan, sanoo "luotan sinuun tämän kanssa." Latauskentän täytyy kertoa selvästi, mitä tiedostolla tehdään, miksi sitä tarvitaan ja että sen lataaminen on turvallista.

Miksi tiedostonlataukset eroavat muista lomakekentistä

Tekstikenttä ottaa vastaan sanoja. Sähköpostikenttä ottaa vastaan sähköpostiosoitteen. Tiedostonlatauskenttä ottaa vastaan minkä kokoisia, tyyppisiä ja alkuperäisiä tiedostoja tahansa. Tämä tekee tiedostonlatauksista olennaisesti erilaisia kuin muut lomakekentät kolmella tavalla.

Ensiksi tiedostonlataukseen liittyy tietoturvariski. Palvelimellesi ladattu haitallinen tiedosto voi vahingoittaa sivustoasi, varastaa tietoja tai tartuttaa vierailijoidesi laitteita. Tekstikentillä ja sähköpostikentillä on selkeät rajat. Tiedostonlatauksilla ei ole. Joku voi ladata naamioidun suoritettavan tiedoston, skriptin tai haittaohjelman. Tämä tarkoittaa, että sinun täytyy validoida ja suojautua jokaiselta saapuvalta lataukselta.

Toiseksi tiedostonlataukset vaativat selkeän asiayhteyden. Ihmisen täytyy tietää, mikä tiedosto ladataan, ennen kuin hän alkaa etsiä sitä tietokoneeltaan. Sähköpostikenttä on itsestään selvä. Tiedostonlatauskentän täytyy sanoa "Lataa CV:si PDF- tai Word-muodossa, enintään 5 MB." Ilman tätä selkeyttä ihmiset käyttävät minuutteja tiedoston etsimiseen ja huomaavat sitten, että se on väärää muotoa tai liian suuri.

Kolmanneksi tiedostonlataukset ovat hitaita. 10 MB:n tiedoston lataaminen puhelimella 4G-yhteydellä vie aikaa. Ihminen odottaa. Hänen täytyy tietää, että lataus on käynnissä eikä se ole jumissa tai jäätynyt. Latauksen tila ja edistymisilmaisin ovat välttämättömiä.

Itse latauskenttä ja sen otsikointi

Latauskenttä on painike, jota ihmiset napsauttavat valitakseen tiedoston. Painikkeen teksti on tärkeä. Sen pitäisi kertoa, mitä seuraavaksi tapahtuu.

"Valitse tiedosto" on epämääräinen. "Selaa tiedostoja" on parempi. "Lataa CV:si" on paras. Painikkeen tekstin pitäisi nimetä tarkka tiedosto, jota haluat. Se kertoo ihmiselle tarkalleen, mitä hänen kannattaa etsiä tietokoneeltaan.

Painikkeen yläpuolella olevan otsikon pitäisi toistaa vaatimus. "CV (PDF tai Word, enintään 5 MB)". Laita tiedostokokoraja ja hyväksytyt muodot suoraan otsikon alle. Älä piilota tätä tietoa ohjekuvakkeen taakse tai pieneen harmaaseen tekstiin. Ihmisten täytyy nähdä se heti, tai he eivät tiedä, mitä ladata.

Jos lomakkeesi hyväksyy useita tiedostoja, painikkeen pitäisi sanoa "Lisää tiedostoja" tai "Lataa useita tiedostoja". Yhden tiedoston latauskenttä, joka yhtäkkiä hyväksyy kaksi tiedostoa, hämmentää ihmisiä. Ole selkeä.

Jos lataus on vapaaehtoinen, sano se. "Portfolio (vapaaehtoinen, JPG tai PNG, enintään 20 MB kuvaa kohden)". Jos lataus on pakollinen, otsikossa pitäisi lukea "pakollinen" tai siinä pitäisi olla tähti. Älä oleta, että ihmiset ymmärtävät.

Hyväksytyt tiedostotyypit ja niiden selkeä kertominen

Kaikkia tiedostotyyppejä ei voi hyväksyä. CV-lomake ei tarvitse JPEG-kuvia. Asiakirjalomake ei tarvitse videotiedostoja. Sinun täytyy määritellä tarkasti, mitä tiedostotyyppejä hyväksyt.

Älä käytä teknistä jargonia. Älä sano "MIME-tyypit" tai "tiedostopäätteet". Sano "PDF, Word-asiakirjat tai Google Docs -viennit." Sano "JPG- tai PNG-kuvat." Sano "Excel-taulukot." Käytä nimiä, jotka ihmiset ymmärtävät.

Kun joku lataa tiedoston väärässä muodossa, virheen täytyy olla täsmällinen. Ei "Virheellinen tiedostotyyppi." Vaan "Tämä lomake hyväksyy PDF- tai Word-asiakirjoja. Muunna tiedostosi ja yritä uudelleen." Kerro heille, mikä meni pieleen ja mitä sille tehdään.

Jos lomakkeesi tarvitsee eri kentille useita tiedostotyyppejä, tee jokaisesta selkeä. Työhakemus voi pyytää CV:tä PDF-muodossa ja saatekirjettä Word-muodossa. Jokaisella kentällä pitäisi olla oma painike ja omat hyväksytyt tyypit. Älä pakota ihmisiä arvaamaan, mikä tiedosto kuuluu mihinkin.

Käytä sallittujen tyyppien listaa, älä koskaan kiellettyjen listaa. Älä sano "kaikki tiedostotyypit paitsi suoritettavat tiedostot." Sano sen sijaan tarkasti, mitkä tyypit ovat sallittuja. Sallittujen lista on käyttäjille yksinkertaisempi ja tietoturvan kannalta vahvempi.

Tiedostokokorajat ja niiden käsittely

Jokainen tiedostonlatauskenttä tarvitsee enimmäistiedostokoon. Ilman sitä joku voisi vahingossa ladata 500 MB:n videon, ja palvelimesi voisi kaatua tai tallennustila loppua.

Kokorajan täytyy vastata sitä, mitä ihmiset oikeasti käyttävät. CV on tyypillisesti 1 - 3 MB. Aseta rajaksi 10 MB, niin jää tilaa. Profiilikuva on 2 - 5 MB. Aseta rajaksi 20 MB. Videoleike voi olla 50 - 500 MB. Aseta rajasi sen mukaan, mitä oikeasti tarvitset.

Kerro ihmisille kokoraja ennen latausta. "Suurin tiedostokoko on 5 MB." Laita se aivan painikkeen viereen. Jos joku lataa liian suuren tiedoston, virheen pitäisi tulla heti ja olla selkeä. Ei pyörivä ikoni, joka pyörii 30 sekuntia ja epäonnistuu sitten. Näytä virhe heti, kun tiedosto on valittu, ennen kuin lataus alkaa.

Jos tuet suuria tiedostoja, harkitse latausten sallimista erissä tai jatkettavia latauksia. Jos jonkun 100 MB:n tiedosto epäonnistuu kesken, jatkettava lataus antaa hänen jatkaa siitä, mihin se pysähtyi, eikä aloittaa alusta. Se estää turhautumista hitailla yhteyksillä.

Vedä ja pudota sekä useat valintatavat

Tiedostonlatauskenttien pitäisi tukea useita tapoja valita tiedostoja. Jotkut napsauttavat painiketta. Jotkut vetävät tiedostoja työpöydältään. Jotkut selaavat puhelimensa kuvakirjastoa. Sinun täytyy tukea kaikkia.

Painike on ensisijainen tapa. Se avaa laitteen oman tiedostoselaimen, joka toimii jokaisella laitteella ja selaimella.

Vedä ja pudota on toissijainen tapa. Ihmisen pitäisi voida vetää tiedosto työpöydältään ja pudottaa se latausalueelle. Se tuntuu nopeammalta ja intuitiivisemmalta kuin painikkeen napsauttaminen ja tiedostoselaimen avautumisen odottaminen. Näytä selkeä visuaalinen ilmaisin, kun joku vetää tiedostoa pudotusalueen yli. Alueen pitäisi korostua, vaihtaa väriä tai näyttää katkoviivareunus. Se kertoo ihmisille, että he voivat pudottaa tiedoston tähän.

Mobiilissa tiedoston valinta toimii eri tavalla. Ihminen napauttaa painiketta ja valitsee kuvakirjaston, tiedostosovelluksen tai uuden kuvan ottamisen. Tue sitä, mikä toimii hänen laitteellaan. Älä rajoita mobiilikäyttäjiä pelkkään napsauttamiseen.

Jos lomakkeesi hyväksyy useita tiedostoja, salli sekä joukkovalinta että yksittäinen lisäys. Anna ihmisten valita viisi tiedostoa kerralla tiedostoselaimesta. Anna heidän myös lisätä vielä yksi tiedosto sen jälkeen. Älä pakota kaikkea valintaa tapahtumaan yhdessä selainikkunassa.

Ladatun näyttäminen ja tiedostojen poistaminen

Kun joku on valinnut tiedoston, näytä hänelle tarkalleen, mitä hän latasi. Näytä tiedoston nimi, tiedostokoko ja pieni kuvake, joka näyttää tiedostotyypin. Se vahvistaa, että hän latasi oikean tiedoston.

Jos lomake hyväksyy useita tiedostoja, näytä ne kaikki luettelona. Anna ihmisten nähdä, mitä he ovat lähettämässä. Jos he latasivat väärän tiedoston, anna heidän poistaa se ja ladata toinen ennen lomakkeen lähettämistä.

Poistopainikkeessa pitäisi lukea "Poista" tai siinä pitäisi olla X-kuvake. Sen napsauttamisen pitäisi poistaa kyseinen tiedosto latausluettelosta. Se ei saa poistaa tiedostoa heidän tietokoneeltaan, vain lomakkeesta.

Jos joku tarvitsee tiedoston korvaamista, älä pakota häntä poistamaan ja lataamaan uudelleen. Anna hänen napsauttaa poistopainiketta ja sitten latauspainiketta uudelleen yhdessä kulussa. Tai salli tiedoston napsauttaminen, jolloin selain avautuu ja korvaava tiedosto voidaan valita paikan päällä. Vähemmän vaiheita tarkoittaa korkeampaa täyttöastetta.

Edistymisen ilmaisu ja mitä näyttää latauksen aikana

Tiedostonlataukset vievät aikaa. Sinä aikana ihminen odottaa ja miettii, tapahtuuko mitään. Sinun täytyy näyttää heille edistyminen.

Edistymispalkki on selkein vaihtoehto. Se näyttää valmiusprosentin. 25 %. 50 %. 75 %. Valmis. Ihminen voi seurata sen liikkumista ja tietää, että lataus on käynnissä. Edistymispalkki, joka hyppää 0 %:sta 100 %:iin silmänräpäyksessä, ei auta. Näytä tasainen edistyminen.

Jos et voi näyttää tarkkaa prosenttiedistymistä, näytä pyörivä ikoni tai latausanimaatio. Jotain, mikä liikkuu ja näyttää toimintaa. Älä näytä staattista latauksen tilaa ilman liikettä. Staattinen lataus näyttää jäätyneeltä.

Älä koskaan anna lähetyspainikkeen olla napsautettavissa, kun tiedostoa ladataan. Harmaannuta se tai poista se käytöstä. Älä anna ihmisten napsauttaa lähetä useita kertoja tiedoston latautuessa. Se voi aiheuttaa kaksoislatauksia tai virheitä.

Jos lataus kestää yli kolme sekuntia, näytä arvioitu jäljellä oleva aika. "Ladataan. Noin 30 sekuntia jäljellä." tai "Ladataan. Suuri tiedosto." Älä jätä ihmisiä miettimään, kuinka kauan se vielä kestää.

Virheidenkäsittely ja miksi epämääräiset virheet menettävät lomakkeen täyttöjä

Lataus voi epäonnistua. Tiedosto on vioittunut. Verkkoyhteys katkeaa. Tiedosto on liian suuri. Ladattiin tukematon muoto. Kun virhe tapahtuu, viestisi ratkaisee, korjaako ihminen sen vai jättääkö hän lomakkeen kesken.

Epämääräinen virhe, kuten "Lataus epäonnistui. Yritä uudelleen.", ei kerro heille mitään. Yritä mitä uudelleen. Mikä meni pieleen. Onko heidän tiedostonsa vioittunut. Onko verkko rikki. Onko tiedostotyyppi väärä. Epämääräiset virheet saavat ihmiset tuntemaan itsensä avuttomiksi.

Täsmällinen virhe nimeää ongelman. "Tämä tiedosto on liian suuri. Tiedostosi on 25 MB. Enimmäiskoko on 10 MB. Pakkaa tiedosto tai valitse pienempi." "Tätä tiedostomuotoa ei tueta. Tämä lomake hyväksyy vain PDF- ja Word-asiakirjoja. Muunna tiedostosi PDF-muotoon ja yritä uudelleen."

Näytä virhe selkeässä paikassa. Ei piilotettuna harmaaseen tekstiin lomakkeen alaosassa. Käytä punaista taustaa, punaista reunusta tai punaista kuvaketta. Kiinnitä huomio siihen, jotta he näkevät virheen heti.

Älä poista tiedostoa latausluettelosta, kun virhe tapahtuu. Pidä se näkyvissä, jotta he tietävät, missä tiedostossa oli ongelma. Anna heidän korjata se paikan päällä tai korvata se.

Tietoturva ja sekä käyttäjän että sivuston suojaaminen

Tiedostonlataukset ovat tietoturvan heikko kohta. Piilotettua koodia sisältävän tiedoston lataava henkilö voi vahingoittaa palvelintasi. Huono latausjärjestelmä voi paljastaa tiedoston muille käyttäjille tai hyökkääjille.

Ensimmäinen tietoturvavaihe on tiedostotyypin validointi. Älä luota tiedostopäätteeseen. Tiedosto nimeltä "resume.pdf" voi todellisuudessa sisältää suoritettavaa koodia. Tarkista itse tiedoston sisältö, älä vain nimeä. Tätä kutsutaan MIME-tyypin validoinniksi. Palvelin lukee tiedoston todellisen sisällön ja varmistaa, että se on todella PDF, todella kuva tai mitä odotatkin.

Toinen vaihe on tiedoston uudelleennimeäminen latauksen jälkeen. Älä tallenna tiedostoja käyttäjien antamilla nimillä. Nimeä ne uudelleen automaattisesti. "resume.pdf" muuttuu palvelimellasi nimeksi "upload-a4f9e2k1.pdf". Se estää jotakuta arvaamasta tiedostopolkua ja pääsemästä siihen suoraan tai yrittämästä suorittaa koodia lataamalla tietyn nimisen tiedoston.

Kolmas vaihe on tallentaa tiedostot verkkohakemiston ulkopuolelle. Älä laita ladattuja tiedostoja kansioon, johon pääsee suoraan internetistä. Tallenna ne erilleen. Kun joku tarvitsee tiedostonsa ladattavaksi, lähetä se turvallisen, vanhenevan linkin kautta, ei suoran tiedostopolun URL-osoitteen kautta.

Neljäs vaihe on enimmäistiedostokoon ja latausrajojen asettaminen. Rajoita jokaisen tiedoston kokonaiskokoa. Rajoita tiedostojen määrää, jonka joku voi ladata. Rajoita, kuinka monta latausta yksittäinen henkilö voi tehdä tunnissa. Nämä rajat estävät väärinkäytön ja suojaavat palvelintasi.

Viides vaihe on todennuksen vaatiminen. Jos lomakkeesi ei ole julkinen, vaadi käyttäjiä kirjautumaan sisään ennen tiedostojen lataamista. Se estää satunnaisia internetin käyttäjiä lataamasta haitallisia tiedostoja palvelimellesi.

Kuudes vaihe on HTTPS:n käyttö. Jokaisen tiedostonlatauksen täytyy olla salattu siirron aikana. Jos lataat tiedoston tavallisella HTTP:llä, verkossa oleva hyökkääjä voi siepata sen. Käytä aina HTTPS:ää jokaisessa lomakkeessa, joka sisältää tiedostonlatauksia.

Miten WEMASY auttaa rakentamaan turvallisia tiedostonlatauslomakkeita

WEMASYn lomakerakentimessa on tiedostonlatauskenttiä, joissa on sisäänrakennettuja tietoturva- ja käyttökokemusominaisuuksia. Voit asettaa hyväksytyt tiedostotyypit, enimmäistiedostokoot ja sen, ovatko lataukset pakollisia vai vapaaehtoisia, ilman koodin kirjoittamista. Lomakerakennin validoi tiedostotyypit sekä asiakas- että palvelinpuolella haitallisten latausten estämiseksi.

WEMASY-lomakkeiden kautta tehdyt lataukset käyttävät turvallista HTTPS-salausta. Tiedostot tallennetaan verkkosivustosi hakemiston ulkopuolelle ja toimitetaan turvallisten, vanhenevien latauslinkkien kautta. Sinun ei tarvitse rakentaa tätä infrastruktuuria itse.

Latauskäyttöliittymässä on sisäänrakennettuna vedä ja pudota, tiedoston esikatselu, virheidenkäsittely ja edistymisen ilmaisu. Lomakkeet näyttävät käyttäjille automaattisesti, mitä tiedostotyyppejä hyväksytään ja mitkä kokorajat ovat. Mobiili- ja tietokonelataukset on tuettu.

Voit muokata painikkeen tekstiä, hyväksyttyjä tiedostotyyppejä ja kokorajoja lomakkeesi tarpeisiin. Katso, mitkä lomakeominaisuudet kuuluvat WEMASY-pakettiisi.

Usein kysytyt kysymykset

Pitäisikö vaatia käyttäjiä luomaan tili ennen tiedostojen lataamista?
Jos lomake on julkinen ja anonyymi, tilin vaatiminen luo kitkaa ja voi estää ihmisiä lataamasta. Jos lomake on työhakemuksia tai arkaluonteisia asiakirjoja varten, kirjautumisen vaatiminen on kitkan arvoista. Välimuoto on sallia anonyymit lataukset mutta pyytää sähköpostiosoitetta, jotta henkilö voi tarvittaessa hakea tiedostonsa myöhemmin. Valinta riippuu siitä, kuinka arkaluonteista sisältö on ja tarvitsetko tietoa siitä, kuka latasi mitäkin. WEMASYn Sivustonrakentajalla voit määrittää tämän suoraan verkkosivustollesi.
Miten toimin, jos joku lataa vioittuneen tiedoston?
Palvelin ei aina pysty havaitsemaan, että tiedosto on vioittunut, ennen kuin se yrittää käsitellä sitä. Jos huomaat tiedoston vioittuneen latauksen jälkeen, lähetä käyttäjälle täsmällinen virheilmoitus. Ei "Lataus epäonnistui." Vaan "Saimme tiedostosi, mutta se vaikuttaa vioittuneelta. Voisitko yrittää ladata sen uudelleen?" Se kertoo heille, että ongelma on tiedostossa, ei latausjärjestelmässä. Harkitse myös tiedoston esikatselun tai validoinnin lisäämistä asiakaspuolelle ennen latausta, jos tiedostotyyppisi tukee sitä.
Onko parempi näyttää edistymispalkki vai pyörivä ikoni tiedoston latauksen aikana?
Edistymispalkki on parempi, jos voit laskea tarkan edistymisen. Se näyttää tarkalleen, kuinka suuri osa latauksesta on valmis. Pyörivä ikoni on hyväksyttävä, jos et voi näyttää tarkkaa edistymistä. Tärkeintä on näyttää, että jotain tapahtuu. Pyörivää ikonia katsova ihminen tietää latauksen olevan aktiivinen. Ihminen, joka odottaa ilman mitään visuaalista palautetta, luulee lomakkeen jäätyneen. Näytä aina jotain latauksen aikana.
Pitäisikö sallia yli 100 MB:n tiedostojen lataaminen?
Se riippuu käyttötarkoituksestasi. Työhakemuslomake ei tarvitse yli 20 MB:n tiedostoja. Valokuvagalleria voi sallia 100 MB. Videolatustyökalu voi tarvita gigatavuja. Aseta rajasi sen mukaan, mitä oikeasti tuet. Kerro ihmisille raja selvästi ennen kuin he aloittavat latauksen. Jos joku yrittää ladata 500 MB:n tiedoston lomakkeeseen, jonka raja on 50 MB, näytä virhe heti tiedoston valinnan yhteydessä, ennen kuin he yrittävät ladata.
Voinko pakata tai pienentää käyttäjien lataamia tiedostoja automaattisesti?
Kyllä, mutta tee se ilman lupaa vain, jos se ei muuta käyttäjän tarkoitusta. 20 MB:n valokuvan automaattinen pakkaaminen 5 MB:ksi galleriaa varten on kunnossa. Henkilö halusi lähettää valokuvan. Korkearesoluutioisen suunnittelutiedoston automaattinen muuntaminen matalaresoluutioiseksi ei ole kunnossa. Muutat sitä, mitä henkilö latasi. Jos sinun täytyy käsitellä tai muuntaa tiedostoja, kerro siitä ihmisille etukäteen. "Kuvat optimoidaan automaattisesti verkkoa varten. JPEG-muoto, enimmäisresoluutio 2000 pikseliä."
Mitä tapahtuu, jos jonkun lataus epäonnistuu kesken verkkoyhteyden ongelman vuoksi?
Ilman jatkettavaa latausta heidän täytyy aloittaa alusta. Jatkettavalla latauksella he voivat jatkaa siitä, mihin lataus pysähtyi. Pienille alle 5 MB:n tiedostoille uudelleenaloitus on hyväksyttävää. Suurille yli 50 MB:n tiedostoille jatkettava lataus estää turhautumisen ja keskeyttämisen. Jos tiedostonlatausvälineesi ei tue jatkettavia latauksia, harkitse suurten latausten pilkkomista osiin, jolloin jos yksi osa epäonnistuu, vain se osa täytyy yrittää uudelleen, ei koko tiedostoa.

Ota se heti käyttöön
omalla verkkosivullasi.

Aloita ilmaiseksi WEMASYlla ja rakenna sivusi muutamassa minuutissa.