A fájlfeltöltő mezők egyszerűnek tűnnek. Egy gomb, amelyen az áll, hogy „Fájl kiválasztása”, és az űrlap beküldi az adatot. De a fájlfeltöltés nagy tétű pillanat. Az illető az önéletrajzát, az adódokumentumát, a termékfotóját bízza rád. Ha a feltöltés bizonytalannak, nehézkesnek tűnik, vagy úgy érzi, hogy nem sikerült, otthagyja az űrlapot. Ha nem tudja, milyen fájltípusokat fogadsz el, vagy mekkora lehet a fájl, időt vesztegel a rossz fájl feltöltésével, csak hogy aztán megtudja, nem sikerült. Ha a feltöltés nem tűnik biztonságosnak, megkérdőjelezi, hogy megbízható-e az oldalad. Ez a cikk azt mutatja meg, mitől működnek a fájlfeltöltő mezők, hogyan védd a felhasználót és az oldaladat is, és mit rontanak el a legtöbb űrlapon, ami megakadályozza, hogy az emberek végigvigyék.
A fájlfeltöltő mező nem csak fájlokat fogad. Engedélyekre vonatkozó információt is gyűjt. Aki önéletrajzot tölt fel, azt mondja: „itt az adataim, használd őket a felvételihez”. Aki dokumentumot tölt fel, azt mondja: „rád bízom ezt”. A feltöltő mezőnek világosan közölnie kell, mit fogsz csinálni a fájllal, miért van rá szükséged, és hogy biztonságos feltölteni.
Miben különbözik a fájlfeltöltés a többi űrlapmezőtől
A szöveges beviteli mező szavakat fogad. Az e-mail mező e-mail-címet. A fájlfeltöltő mező bármilyen méretű, típusú és eredetű fájlokat fogad. Ez három szempontból alapvetően megkülönbözteti a többi űrlapmezőtől.
Először: a fájlfeltöltés biztonsági kockázatot hordoz. A szerveredre feltöltött rosszindulatú fájl kárt tehet az oldaladban, adatot lophat, vagy megfertőzheti a látogatóid eszközeit. A szöveges és az e-mail mezőknek egyértelmű határaik vannak. A fájlfeltöltésnek nincsenek. Valaki feltölthet álcázott futtatható fájlt, szkriptet vagy kártevőt. Ezért minden beérkező feltöltést ellenőrizned és védened kell.
Másodszor: a fájlfeltöltéshez egyértelmű környezet kell. Az embernek tudnia kell, milyen fájlt töltsön fel, mielőtt keresni kezd a gépén. Az e-mail mező magától értetődő. A fájlfeltöltő mezőnek ki kell mondania: „Töltsd fel az önéletrajzod PDF vagy Word formátumban, legfeljebb 5 MB.” Ez nélkül az emberek percekig keresnek egy fájlt, aztán kiderül, hogy rossz formátumú vagy túl nagy.
Harmadszor: a fájlfeltöltés lassú. Egy 10 MB-os fájl feltöltése telefonon 4G-n időbe telik. Az illető vár. Tudnia kell, hogy a feltöltés folyamatban van, és nem akadt el vagy fagyott le. A töltési állapot és a folyamatjelző elengedhetetlen.
Maga a feltöltő mező és mit írj a címkéjére
A feltöltő mező az a gomb, amelyre az emberek kattintanak a fájl kiválasztásához. A gomb szövege számít. Azt kell mondania, mi történik ezután.
A „Fájl kiválasztása” homályos. A „Fájlok tallózása” jobb. Az „Önéletrajzod feltöltése” a legjobb. A gomb szövege nevezze meg a konkrét fájlt, amit kérsz. Ez pontosan megmondja az embernek, mit keressen a gépén.
A gomb feletti címke ismételje meg a követelményt. „Önéletrajz (PDF vagy Word, legfeljebb 5 MB)”. A fájlméret-korlátot és az elfogadott formátumokat közvetlenül a címke alá írd. Ne rejtsd el egy súgó ikon mögé vagy apró szürke szövegbe. Az embereknek azonnal látniuk kell, különben nem tudják, mit töltsenek fel.
Ha az űrlapod több fájlt fogad el, a gombon az álljon, hogy „Fájlok hozzáadása” vagy „Több fájl feltöltése”. Az az egyfájlos feltöltő mező, amely hirtelen két fájlt is elfogad, összezavarja az embereket. Légy egyértelmű.
Ha a feltöltés nem kötelező, mondd ki. „Portfólió (nem kötelező, JPG vagy PNG, képenként legfeljebb 20 MB)”. Ha kötelező, a címkén álljon, hogy „kötelező”, vagy legyen rajta csillag. Ne feltételezd, hogy az emberek értik.
Elfogadott fájltípusok és világos kommunikálásuk
Nem fogadhatsz el minden fájltípust. Az önéletrajz-űrlapodnak nem kellenek JPEG fotók. A dokumentuműrlapodnak nem kellenek videófájlok. Pontosan meg kell adnod, milyen fájltípusokat fogadsz el.
Ne használj szakzsargont. Ne írd, hogy „MIME-típusok” vagy „fájlkiterjesztések”. Írd, hogy „PDF, Word dokumentumok vagy Google Docs exportok”. Írd, hogy „JPG vagy PNG fotók”. Írd, hogy „Excel táblázatok”. Használd azokat a neveket, amelyeket az emberek értenek.
Ha valaki rossz formátumú fájlt tölt fel, a hibaüzenetnek konkrétnak kell lennie. Nem „Érvénytelen fájltípus”. Hanem: „Ez az űrlap PDF vagy Word dokumentumokat fogad el. Kérjük, alakítsd át a fájlt, és próbáld újra.” Mondd meg, mi ment félre, és mit tegyen.
Ha az űrlapodhoz különböző mezőknél különböző fájltípusok kellenek, mindegyiket tedd világossá. Egy álláspályázat kérhet PDF önéletrajzot és Word kísérőlevelet. Minden mezőnek legyen saját gombja és saját elfogadott típusai. Ne kelljen az embereknek találgatniuk, melyik fájl hova megy.
A fájltípusokat engedélyezőlistára tedd, soha ne tiltólistára. Ne írd, hogy „minden fájltípus, kivéve a futtatható fájlok”. Írd meg pontosan, mely típusok engedélyezettek. Az engedélyezőlistás megközelítés a felhasználóknak egyszerűbb, a biztonság szempontjából pedig erősebb.
Fájlméret-korlátok és kezelésük
Minden fájlfeltöltő mezőnek kell egy maximális fájlméret. Enélkül valaki véletlenül feltölthet egy 500 MB-os videót, és a szervered összeomolhat, vagy elfogyhat a tárhelye.
A méretkorlát igazodjon ahhoz, amit az emberek ténylegesen használnak. Egy önéletrajz jellemzően 1-3 MB. Állítsd a korlátot 10 MB-ra, hogy legyen tartalék. Egy profilfotó 2-5 MB. Állítsd a korlátot 20 MB-ra. Egy videóklip lehet 50-500 MB. A korlátot aszerint állítsd, amire valóban szükséged van.
Mondd meg az embereknek a méretkorlátot, mielőtt feltöltenek. „A maximális fájlméret 5 MB.” Írd közvetlenül a gomb mellé. Ha valaki túl nagy fájlt tölt fel, a hibának azonnalinak és világosnak kell lennie. Nem olyan pörgő jelzőnek, amely 30 másodpercig forog, aztán kudarcot vall. Mutasd a hibát, amint kiválasztották a fájlt, a feltöltés megkezdése előtt.
Ha támogatod a nagy fájlokat, fontold meg a részletekben történő vagy a folytatható feltöltést. Ha valakinek a 100 MB-os fájlja félúton elbukik, a folytatható feltöltéssel onnan folytathatja, ahol megállt, nem kell elölről kezdenie. Ez lassú kapcsolaton megelőzi a frusztrációt.
Húzd és ejtsd, és a több kiválasztási mód
A fájlfeltöltő mezők több módot támogassanak a fájlok kiválasztására. Vannak, akik a gombra kattintanak. Vannak, akik az asztalukról húzzák a fájlokat. Vannak, akik a telefonjuk fotótárában böngésznek. Mindegyiket támogatnod kell.
A gomb az elsődleges mód. Megnyitja a natív fájlböngészőt, amely minden eszközön és böngészőben működik.
A húzd és ejtsd a másodlagos mód. Az embernek tudnia kell az asztaláról a feltöltési területre húzni egy fájlt, és ott elengedni. Ez gyorsabbnak és intuitívabbnak érződik, mint egy gombra kattintani, és megvárni, hogy a fájlböngésző megnyíljon. Mutass világos vizuális jelzést, amikor valaki egy fájlt a célterület fölé húz. A terület emelkedjen ki, váltson színt, vagy kapjon szaggatott szegélyt. Ez azt üzeni az embereknek, hogy itt elengedhetik a fájlt.
Mobilon a fájlkiválasztás másként működik. Az ember rátapint a gombra, és választhat a fotótára, a fájlkezelő alkalmazása, vagy egy új fotó készítése között. Támogass mindent, ami az eszközén működik. Ne korlátozd a mobilos felhasználókat csak a kattintásra.
Ha az űrlapod több fájlt fogad el, engedd a tömeges kiválasztást és az egyenkénti hozzáadást is. Hagyd, hogy öt fájlt válasszanak ki egyszerre a fájlböngészőből. És utána még egyet hozzá is adhassanak. Ne kényszeríts mindent egyetlen böngészőablakra.
A feltöltött fájl megjelenítése és fájlok eltávolítása
Miután valaki kiválasztott egy fájlt, mutasd meg pontosan, mit töltött fel. Jelenítsd meg a fájlnevet, a fájlméretet és egy kis ikont a fájltípussal. Ez megerősíti, hogy a megfelelő fájlt töltötte fel.
Ha az űrlap több fájlt fogad el, mutasd mindet listában. Lássák, mit készülnek beküldeni. Ha rossz fájlt töltöttek fel, tudják eltávolítani, és másikat feltölteni az űrlap beküldése előtt.
Az eltávolító gombon az álljon, hogy „Eltávolítás”, vagy legyen rajta X ikon. A rákattintás törölje a fájlt a feltöltési listáról. Ne törölje a fájlt a gépükről, csak az űrlapról.
Ha valakinek le kell cserélnie egy fájlt, ne kelljen eltávolítania és újra feltöltenie. Kattinthasson az eltávolító gombra, majd újra a feltöltő gombra egyetlen folyamatban. Vagy engedd, hogy a fájlra kattintva megnyíljon a böngésző, és helyben választhasson cserefájlt. Kevesebb lépés magasabb kitöltési arányt jelent.
Folyamatjelzés és mit mutass feltöltés közben
A fájlfeltöltés időbe telik. Ez alatt az ember vár, és azon tűnődik, történik-e egyáltalán valami. Mutatnod kell a haladást.
A folyamatjelző sáv a legvilágosabb megoldás. Százalékban mutatja a készültséget. 25%. 50%. 75%. Kész. Az ember nézheti, ahogy mozog, és tudja, hogy a feltöltés zajlik. Az a folyamatsáv, amely azonnal ugrik 0%-ról 100%-ra, nem segít. Mutass egyenletes haladást.
Ha nem tudsz pontos százalékos haladást mutatni, mutass pörgő jelzőt vagy töltési animációt. Valamit, ami mozog, és tevékenységet jelez. Ne mutass mozdulatlan töltési állapotot. A mozdulatlan töltés lefagyottnak látszik.
Soha ne legyen kattintható a beküldés gomb, amíg a fájl feltöltés alatt áll. Tedd szürkévé vagy tiltsd le. Ne hagyd, hogy az emberek többször rákattintsanak a beküldésre, miközben egy fájl feltöltődik. Ez dupla feltöltést vagy hibákat okozhat.
Ha a feltöltés három másodpercnél tovább tart, mutass becsült hátralévő időt. „Feltöltés. Még körülbelül 30 másodperc.” vagy „Feltöltés. Nagy fájl.” Ne kelljen az embereknek azon töprengeniük, mennyi van még hátra.
Hibakezelés, és miért veszít el kitöltéseket a homályos hibaüzenet
Feltöltési hibák előfordulnak. Egy fájl sérült. Megszakad a hálózati kapcsolat. A fájl túl nagy. Nem támogatott formátumot töltöttek fel. Hiba esetén az üzeneted dönti el, hogy az ember kijavítja, vagy otthagyja az űrlapot.
Az olyan homályos hiba, mint a „A feltöltés nem sikerült. Kérjük, próbáld újra.”, semmit sem mond. Mit próbáljon újra? Mi ment félre? Sérült a fájl? Megszakadt a hálózat? Rossz a fájltípus? A homályos hibák tehetetlennek érzik magukat az emberek.
A konkrét hiba megnevezi a problémát. „Ez a fájl túl nagy. A fájlod 25 MB. A maximum 10 MB. Kérjük, tömörítsd, vagy válassz kisebb fájlt.” „Ez a fájlformátum nem támogatott. Ez az űrlap csak PDF és Word dokumentumokat fogad el. Kérjük, alakítsd át a fájlt PDF-fé, és próbáld újra.”
A hibát jól látható helyen mutasd. Ne az űrlap alján, szürke szövegben elrejtve. Használj piros hátteret, piros szegélyt vagy piros ikont. Hívd fel rá a figyelmet, hogy azonnal meglássák.
Hiba esetén ne töröld a fájlt a feltöltési listáról. Maradjon látható, hogy tudják, melyik fájllal volt a probléma. Hagyd, hogy helyben kijavítsák vagy lecseréljék.
Biztonság: a felhasználó és az oldal védelme
A fájlfeltöltés biztonsági gyenge pont. Aki rejtett kódot tartalmazó fájlt tölt fel, kárt tehet a szerveredben. Egy gyenge feltöltőrendszer más felhasználók vagy támadók elé teheti a fájlt.
Az első biztonsági lépés a fájltípus ellenőrzése. Ne bízz a fájlkiterjesztésben. Egy „onelet.pdf” nevű fájl valójában tartalmazhat futtatható kódot. Magát a fájl tartalmát ellenőrizd, ne csak a nevét. Ezt hívják MIME-típus-ellenőrzésnek. A szerver elolvassa a fájl tényleges tartalmát, és megerősíti, hogy valóban PDF, valóban kép, bármi, amire számítasz.
A második lépés a fájl átnevezése feltöltés után. Ne a felhasználók adta néven tárold a fájlokat. Nevezd át őket automatikusan. Az „onelet.pdf” a szerveren „upload-a4f9e2k1.pdf” lesz. Ez megakadályozza, hogy valaki kitalálja a fájl elérési útját, és közvetlenül hozzáférjen, vagy egy meghatározott nevű fájl feltöltésével kódot próbáljon futtatni.
A harmadik lépés a fájlok tárolása a webkönyvtáron kívül. Ne tedd a feltöltött fájlokat olyan mappába, amely közvetlenül elérhető az interneten. Tárold őket külön. Amikor valakinek le kell töltenie a fájlját, biztonságos, lejáró linken keresztül küldd, ne a fájl elérési útjára mutató közvetlen URL-lel.
A negyedik lépés a maximális fájlméret és a feltöltési korlátok beállítása. Korlátozd minden fájl teljes méretét. Korlátozd, hány fájlt tölthet fel valaki. Korlátozd, hány feltöltést végezhet egyetlen személy óránként. Ezek a korlátok megelőzik a visszaéléseket, és védik a szerveredet.
Az ötödik lépés a hitelesítés megkövetelése. Ha az űrlapod nem nyilvános, kérd, hogy a felhasználók jelentkezzenek be a fájlfeltöltés előtt. Ez megakadályozza, hogy az internet véletlenszerű felhasználói rosszindulatú fájlokat töltsenek fel a szerveredre.
A hatodik lépés a HTTPS használata. Minden fájlfeltöltésnek titkosítva kell haladnia. Ha sima HTTP-n töltesz fel fájlt, a hálózaton lévő támadó elfoghatja. Mindig HTTPS-t használj minden olyan űrlapnál, amely fájlfeltöltést tartalmaz.
Hogyan segít a WEMASY biztonságos fájlfeltöltő űrlapokat építeni
A WEMASY űrlapépítőjében vannak fájlfeltöltő mezők beépített biztonsági és felhasználói élmény funkciókkal. Kód írása nélkül beállíthatod az elfogadott fájltípusokat, a maximális fájlméretet, és azt, hogy a feltöltés kötelező vagy nem kötelező. Az űrlapépítő a fájltípusokat az ügyfél és a szerver oldalán is ellenőrzi a rosszindulatú feltöltések megelőzésére.
A WEMASY űrlapokon keresztüli feltöltések biztonságos HTTPS titkosítást használnak. A fájlokat a weboldalad könyvtárán kívül tárolják, és biztonságos, lejáró letöltési linkeken keresztül adják át. Ezt az infrastruktúrát nem neked kell megépítened.
A feltöltési felület tartalmazza a húzd és ejtsd funkciót, a fájl előnézetét, a hibakezelést és a folyamatjelzést. Az űrlapok automatikusan megmutatják a felhasználóknak, milyen fájltípusok fogadhatók el, és mik a méretkorlátok. Mobilos és asztali feltöltés is támogatott.
Testre szabhatod a gomb szövegét, az elfogadott fájltípusokat és a méretkorlátokat az űrlapod igényei szerint. Nézd meg, milyen űrlapfunkciókat tartalmaz a WEMASY csomagod.