Kävijäsi silmäilee lomakettasi kaksi sekuntia ennen kuin kirjoittaa yhtäkään merkkiä. Hän lukee kenttien koot, välit ja asettelun. Koko lomakkeen levyinen postinumerokenttä huutaa sekaannusta. Yhden rivin tekstialue yksityiskohtaiselle palautteelle antaa viestin, ettet odota paljon.
Syöttökenttäsi leveys kertoo käyttäjälle, kuinka paljon tekstiä odotat hänen kirjoittavan. Pieni tekstiruutu viestii "kerro nimesi". Korkea tekstialue viestii "kerro tarinasi". Jos teet tämän väärin, aiheutat sekaannusta, kirjoitusvaivaa ja lomakkeen keskeytyksiä.
Lomakkeessasi on kahdenlaisia tekstikenttiä: yksirivinen syöttökenttä ja monirivinen tekstialue. Ne näyttävät erilaisilta, toimivat eri tavalla ja ratkaisevat eri ongelmia. Oikean valitseminen ei ole monimutkaista, mutta sillä on väliä sille, miten käyttäjät kokevat lomakkeesi ja täyttävätkö he sen.
Mikä on tekstikenttä
Tekstikenttä on yksirivinen ruutu, johon käyttäjät kirjoittavat lyhyttä tekstiä. Se ei rivity uudelle riville, kun saavutat reunan. Se ei tue useita kappaleita. Paina enteriä, ja lomake lähetetään (tai siirtyy seuraavaan kenttään). Se on suunniteltu rajattuun, lyhyeen dataan.
Tekstikenttä luo käyttäjälle mielikuvasopimuksen. Pyydät jotain nopeaa. Nimen. Sähköpostiosoitteen. Postinumeron. Päivämäärän. Yhden tiedon.
Mikä on tekstialue
Tekstialue on monirivinen tekstiruutu, joka laajenee käyttäjän kirjoittaessa. Paina enteriä, ja saat uuden tekstirivin. Se vierittyy pystysuunnassa, kun sisältö ylittää näkyvän alueen. Se viestii käyttäjälle, että odotat enemmän kuin muutaman sanan. Kappaleet ovat tervetulleita. Yksityiskohtaisia ajatuksia odotetaan.
Tekstialue poistaa rajoitteen. Käyttäjä tietää voivansa kirjoittaa niin paljon kuin tarvitsee ahtamatta vastaustaan yhdelle riville.
Milloin käytät yksirivistä tekstikenttää
Käytä tekstikenttää, kun odotettu vastaus mahtuu yhdelle riville ja käyttäjä voi vastata muutamalla sanalla tai vähemmällä.
Yhteystiedot
Nimi, sähköpostiosoite, puhelinnumero. Nämä kentät ovat aina yksirivisiä. Käyttäjä odottaa kirjoittavansa nimen ja jatkavansa, ei avaavansa tekstieditoria puhelinnumeroaan varten.
Lyhyet tunnisteet
Käyttäjätunnus, tilinumero, postinumero, salasana. Näillä on määritelty pituus tai niiden odotetaan olevan lyhyitä. Yksirivinen kenttä on järkevä.
Sijainti- ja logistiikkakentät
Kaupunki, osavaltio, maa, katuosoite (ensimmäinen rivi). Nämä ovat tyypillisesti yksirivisiä. Voit jakaa osoitteen useisiin yksirivisiin kenttiin yhden ison tekstialueen sijaan.
Haku ja suodatus
Hakuruudut. Tuotesuodattimet. Päivämääräalueet. Nämä odottavat nopeaa syöttöä, eivät kappaletta. Yksirivinen kenttä tuntuu oikealta.
Päivämäärät ja luvut
Mikä tahansa kenttä, johon käyttäjä syöttää tietyn päivämäärän, ajan, määrän tai hinnan. Yksirivinen kenttä. Joskus haluat päivämäärille erikoistuneen syöttötyypin (kuten päivämäärävalitsimen), mutta vuorovaikutusmalli on silti yksirivinen.
Milloin käytät tekstialuetta
Käytä tekstialuetta, kun odotat käyttäjän kirjoittavan useamman kuin yhden lauseen tai kun vastaus on luonnostaan pidempi kuin yksi rivi.
Kommentit ja palaute
Jos kysyt "Mitä palautetta sinulla on?", käyttäjä ajattelee kappaleina, ei yksittäisinä sanoina. Tekstialue viestii, että tilaa on koko ajatukselle. He eivät tunne olevansa ahtaalla.
Viesti- ja tiedustelulomakkeet
Kun kävijä täyttää yhteydenottolomakkeen, jossa on viestikenttä, hän tarvitsee tilaa selittää tilanteensa. Tekstin määrä vaihtelee paljon. Tekstialueeseen mahtuu sekä kahden lauseen nopea kysymys että kahden kappaleen yksityiskohtainen pyyntö.
Kuvaus- ja lisätietokentät
Tuotekuvaukset, projektikuvaukset, palveluvaatimukset. Mikä tahansa kenttä, joka pyytää käyttäjää antamaan asiayhteyttä tai yksityiskohtia. Tekstialue kutsuu näitä yksityiskohtia.
Muistiinpanot ja erityisohjeet
Kenttä, jossa lukee "Lisää erityistoiveet" tai "Huomioitavaa toimitukseen", tarvitsee usein tekstialueen, koska et voi ennustaa, onko käyttäjällä lisättävänä kaksi sanaa vai kaksi kappaletta.
Kokoperiaate: kentän leveys vihjaa odotetusta pituudesta
Kenttäsi koko lähettää viestin ennen kuin käyttäjä kirjoittaa yhtäkään merkkiä. Koko lomakkeen leveyden kattava postinumerokenttä aiheuttaa sekaannusta. Käyttäjä näkee kaiken sen tilan ja ajattelee "ymmärsinkö väärin, mitä pyydät?"
Käytä tätä sääntöä: kentän visuaalisen koon pitäisi vastata odotetun vastauksen pituutta.
Lyhyet tekstikentät
Postinumeroa varten tee syöttökentästä kapea. Ehkä 80-120 pikseliä leveä työpöydällä. Tämä visuaalinen signaali kertoo käyttäjälle "kirjoita viisi numeroa, ei kappaletta".
Nimikenttään käytä keskileveyttä. Ehkä 200-300 pikseliä. Riittävän pitkä nimelle "Alexander Thompson", mutta ei niin leveä, että se kutsuisi kirjoittamaan elämäkerran.
Tekstialueet
Tekstialueet laajenevat sekä vaaka- että pystysuunnassa. Neljä riviä korkea tekstialue viestii suuremmasta vastauksesta kuin kaksi riviä korkea. Tee tekstialueestasi odotettua vaivaa vastaava.
Jos odotat muutamaa lausetta, aloita kolmella tai viidellä näkyvällä rivillä. Jos pyydät yksityiskohtaista palautetta, aloita kuudella tai kahdeksalla rivillä. Käyttäjät voivat muuttaa kentän kokoa, jos tarvitsevat lisää tilaa, mutta alkuperäinen koko asettaa heidän odotuksensa.
Tekstikenttien suunnittelusäännöt
Yhdistä aina nimeen
Älä koskaan käytä paikkamerkkitekstiä näkyvän nimen korvikkeena. Paikkamerkkiteksti katoaa, kun käyttäjä alkaa kirjoittaa, mikä heikentää saavutettavuutta ja jättää heidät arvaamaan, mitä kenttä halusi. Käytä selkeää nimeä kentän yläpuolella tai vieressä ja käytä paikkamerkkitekstiä vain lempeänä vihjeenä.
Huono esimerkki: kenttä ilman nimeä, vain harmaa paikkamerkkiteksti "Kirjoita nimesi".
Hyvä esimerkki: nimi "Nimi" syöttökentän yläpuolella ja halutessasi paikkamerkkiteksti, kuten "John Doe".
Merkitse pakolliset kentät selvästi
Merkitse pakolliset kentät tähdellä (*) tai sanalla "(pakollinen)" sulkeissa. Älä jätä käyttäjiä arvailemaan, onko kenttä vapaaehtoinen.
Validoi ajoissa, palaudu sulavasti
Jos käyttäjä syöttää virheellisen sähköpostiosoitteen tai väärin muotoillun puhelinnumeron, älä tyhjennä hänen syötettään. Näytä virheilmoitus, joka selittää ongelman tarkasti, ja säilytä hänen keskeneräinen syötteensä, jotta hän voi korjata sen kirjoittamatta kaikkea alusta.
Tue odotettua syöttötyyppiä
Sähköpostille käytä type="email", jotta mobiilikäyttäjät saavat sähköpostille optimoidun näppäimistön. Puhelinnumerolle käytä type="tel". Luvuille käytä type="number". Nämä erikoistuneet syöttötyypit parantavat mobiilikokemusta lisäämättä sinulle työtä.
Tekstialueiden suunnittelusäännöt
Anna tekstialueen kasvaa sisällön mukana
Jos käyttäjä kirjoittaa pitkää viestiä ja tekstialue pysyy kiinteän kokoisena, hänen täytyy vierittää kentän sisällä kirjoittaessaan. Se rikkoo kirjoituskokemuksen. Käytä CSS:ää tai JavaScriptiä, jotta tekstialue laajenee automaattisesti, kun käyttäjä lisää rivejä. He kirjoittavat luonnollisesti, kenttä kasvaa, ei vieritystä kentän sisällä.
Näytä alkukoko selvästi
Tekstialueella pitäisi olla riittävästi näkyvää korkeutta viestimään, että odotat enemmän kuin yhden rivin. Näytä vähintään kolme tai viisi riviä tyhjää tilaa, jotta käyttäjät ymmärtävät, ettei tämä ole yhden rivin kenttä.
Aseta tarvittaessa kohtuullinen merkkiraja
Joissakin tekstialueissa on rajoja. Asiakastukilomake voi rajata palautteen 5 000 merkkiin. Jos sinulla on raja, näytä jäljellä oleva merkkimäärä käyttäjän kirjoittaessa. Anna heidän nähdä, kuinka paljon tilaa on jäljellä, sen sijaan että he huomaavat sen vasta törmätessään seinään.
Käytä tasalevyistä fonttia koodille tai tekniselle syötteelle
Jos tekstialue on koodinpätkille tai tekniselle datalle, käytä tasalevyistä fonttia, jotta välit ja tasaus näkyvät visuaalisesti. Tavalliselle tekstille, kuten viesteille tai palautteelle, käytä oletuksena brändiisi sopivaa pääteetöntä fonttia.
Yleisiä virheitä tekstikentissä
Kaikkien tekstikenttien tekeminen samanleveiksi
Jos jokainen lomakkeesi syöttökenttä on yhtä leveä, menetät visuaalisen signaalin odotetusta pituudesta. Postinumerokentän ei pitäisi olla yhtä leveä kuin nimikentän. Anna koon viestiä odotuksesta.
Paikkamerkkitekstin käyttö nimien sijaan
Tämä mainittiin edellä, mutta se on kriittistä. Paikkamerkkiteksti on hyödyllinen vihjeenä, ei nimenä. Ruudunlukijaa käyttävä ei näe paikkamerkkitekstiä. Käyttäjä, joka on täyttänyt joitakin kenttiä ja palaa takaisin, unohtaa, mitä kenttä halusi.
Validointivirheiden näyttämättä jättäminen asiayhteydessä
Jos käyttäjä kirjoittaa virheellisen sähköpostiosoitteen ja virheilmoitus ilmestyy lomakkeen yläreunaan, vaikka sähköpostikenttä on alareunassa, hänen täytyy vierittää löytääkseen ongelman. Pidä virheilmoitukset lähellä kenttää, joka ne laukaisi, värillisinä (punainen tai oranssi) ja kuvakkeella, joka viestii "jokin on pielessä".
Kumoamismahdollisuuden puute tyhjennyksessä
Jos käyttäjä tyhjentää kentän vahingossa tai lomakkeessa on "Tyhjennä"-painike, joka pyyhkii kaiken, varmista, että he voivat kumota toiminnon. Yhden painikkeen napautus ei saisi tuhota viiden minuutin lomakkeentäyttötyötä.
Yleisiä virheitä tekstialueissa
Kiinteän kokoiset tekstialueet, jotka eivät laajene
Tekstialue, joka pysyy samankokoisena sisällön ylivuotaessa ja vaatiessa vieritystä, pakottaa käyttäjän kirjoittamaan pienessä ikkunassa. Kokemus tuntuu rikkinäiseltä. Tee tekstialueesta sellainen, joka laajenee sisällön mukana.
Merkkirajasta ei kerrota selvästi
Jos tekstialueellasi on enimmäispituus, käyttäjän pitäisi tietää se ennen kuin hän saavuttaa sen. Näytä merkkilaskuri, joka päivittyy kirjoittaessa. "500 merkkiä jäljellä" tai "2/5 000 merkkiä" kertoo heti, kuinka paljon tilaa on.
Liian pieni alku
Tekstialue, joka on vain yhden rivin korkuinen, ei viesti "haluan yksityiskohtaisen palautteesi". Se näyttää edelleen yksirivisestä kentältä. Aloita vähintään kolmella tai neljällä näkyvällä rivillä, jotta käyttäjä ymmärtää voivansa kirjoittaa enemmän.
Esimerkkejä: syöttökenttä vai tekstialue asiayhteydessä
Yhteydenottolomake
Nimikenttä: yksirivinen syöttökenttä. Riittävän leveä pitkälle nimelle mutta riittävän kapea viestimään "vain nimesi".
Sähköpostikenttä: yksirivinen syöttökenttä, jossa type="email".
Puhelinkenttä: yksirivinen syöttökenttä, jossa type="tel".
Viestikenttä: tekstialue, riittävän korkea muutamalle kappaleelle.
Tuotearvostelulomake
Nimesi: yksirivinen syöttökenttä.
Sähköpostiosoitteesi: yksirivinen syöttökenttä, jossa type="email".
Arvosana (1-5 tähteä): erikoistunut syöttötyyppi, ei tekstialue.
Arvostelusi: tekstialue.
Suosittelisin muille: valintaruutu, ei tekstikenttä.
Kassalomake
Etunimi, sukunimi, sähköpostiosoite, puhelinnumero: kaikki yksirivisiä syöttökenttiä.
Toimitusosoite (katu, kaupunki, osavaltio, postinumero): tyypillisesti useita yksirivisiä syöttökenttiä, ei yksi tekstialue koko osoitteelle.
Erityiset toimitusohjeet: tekstialue. Käyttäjällä voi olla yksi lause tai kolme lausetta tarpeidensa mukaan.
WEMASY-lomakkeet: syöttökenttien ja tekstialueiden rakentaminen
WEMASYn lomakerakentajassa on sekä tekstikenttiä että tekstialueita. Kun lisäät kentän lomakkeeseesi, valitset kenttätyypin sen mukaan, mitä kysyt.
WEMASYn yhteydenottolomakkeeseen lisäisit tekstikentän kävijän nimelle ja sähköpostiosoitteelle ja sitten tekstialueen viestille. WEMASY hoitaa tyylittelyn automaattisesti, joten syöttökenttäsi ja tekstialueesi vastaavat brändisi värejä ja typografiaa. Sinä keskityt kysymään oikeita kysymyksiä. Lomakerakentaja hoitaa asettelun ja kenttien toiminnan.
Jos tarvitset erikoistuneen syötteen (kuten päivämäärävalitsimen tai sähköpostin validoinnin), WEMASY tukee sitäkin. Kentän koko, toiminta ja validointi toimivat yhdessä ohjaten käyttäjää kohti valmista lomaketta.