Jos lomake pyytää päivämäärää ja kävijäsi luovuttavat sen täyttämisen sijaan, sinulla on päivämääräkenttäongelma. Se kuulostaa yksinkertaiselta. Valitse päivämäärä. Kirjoita aika. Mutta pienet suunnitteluratkaisut siinä, miten pyydät nämä tiedot, selittävät yllättävän suuren osan lomakkeen keskeytyksistä.
Päivämäärä- ja aikakentät näyttävät suunnittelijan näkökulmasta suoraviivaisilta. Haaste on, että kävijät käyttävät niitä eri tavoin sen mukaan, minkä päivämäärän he etsivät, millä laitteella he ovat ja tarvitseeko heidän vierittää kuukausia vai kirjoittaa numeroita. Kun kentän suunnittelu on oikein, ihmiset etenevät lomakkeessasi kitkatta. Kun se on väärin, he keskeyttävät jo ennen kuin yrittävätkään.
Miksi päivämäärä- ja aikakentät ovat tärkeitä lomakkeesi täyttöasteelle
Päivämääräkentät ovat päätöskohtia. Varauslomaketta täyttävän kävijän täytyy valita tapaamispäivä. Tapahtumaan ilmoittautuvan täytyy syöttää syntymävuotensa. Toistuvaa tilausta perustavan asiakkaan täytyy valita aloituspäivä. Joka tapauksessa tuon yhden kentän käyttökustannus voi ratkaista, viimeisteleekö hän lomakkeen vai lähteekö.
Otetaan ajanvaraus. Tutkimusten mukaan päivämäärävalitsimet toimivat hyvin, kun kävijät valitsevat päivämääriä lähitulevaisuudesta. Sama valitsin muuttuu turhauttavaksi, kun kävijä syöttää syntymäpäiväänsä ja joutuu vierittämään 40 vuotta taaksepäin. Vuorovaikutusmalli, joka tuntuu helpolta ensi kuulle, tuntuu rikkinäiseltä vuodelle 1985.
Aikakentät aiheuttavat samanlaisen ongelman. Kävijän, joka yrittää varata ajan kello 14.30, ei pitäisi joutua napauttamaan pudotusvalikkolistoja tunneille, minuuteille ja aamu-/iltapäivämerkinnälle erikseen. Se, miten rakennat nämä kentät, vaikuttaa suoraan siihen, varaako joku ajan vai sulkeeko selaimen.
Tekstikentät vai päivämäärävalitsimet: oikean vuorovaikutuksen valinta
Valinta tekstikentän ja kalenterivalitsimen välillä ei ole yleispätevä. Se riippuu siitä, minkä tyyppistä päivämäärää pyydät.
Käytä tekstikenttiä kaukana menneisyydessä tai tulevaisuudessa oleville päivämäärille
Kun joku syöttää syntymäaikansa, hän etsii päivämäärää, joka voi olla 30, 40 tai 50 vuotta menneisyydessä. Kalenterivalitsin vaatii heitä napsauttamaan kymmeniä kuukausia päästäkseen sinne. Kolme erillistä tekstikenttää nimillä Päivä, Kuukausi ja Vuosi toimivat paremmin. Kävijä kirjoittaa nopeasti jokaiseen kenttään ja siirtyy automaattisesti ruudusta toiseen. Kahdeksan tai kymmenen näppäinpainallusta ja valmista. Päivämäärävalitsin samaan tehtävään vaatii paljon enemmän napautuksia tai napsautuksia.
Jos käytät yhtä tekstikenttää kolmen erillisen sijaan, näytä odotettu muoto selvästi nimellä, kuten "PP/KK/VVVV" tai "KK/PP/VVVV" alueesi mukaan. Älä käytä paikkamerkkiä, joka katoaa, kun käyttäjä napsauttaa. Nimi pysyy näkyvissä ja kertoo, mitä haluat.
Käytä päivämäärävalitsimia lähitulevaisuuden päivämäärille
Kalenterivalitsin on järkevä, kun joku varaa aikaa ensi viikolle tai valitsee matkapäivän ensi kuulle. Valitsin näyttää oletuksena nykyisen kuukauden ja he napsauttavat tai napauttavat haluamaansa päivää. Visuaalinen kalenterimetafora vastaa sitä, miten ihmiset jo ajattelevat aikataulutusta.
Keskeinen sääntö: aseta kalenterin oletukseksi nykyinen kuukausi tulevaisuuden päivämäärille. Älä pakota heitä napsauttamaan kuukausien läpi oikean löytämiseksi. Ja jos päivämääriä ei ole saatavilla, näytä valitsimessa suoraan, mitkä päivämäärät eivät ole saatavilla. Harmaannutetut tai poistetut päivämäärät estävät turhautumisen, jossa valitaan päivämäärä ja nähdään vasta lähettämisen jälkeen "ei saatavilla" -virhe.
Päivämäärävalitsimen parhaat käytännöt: tee siitä toimiva kävijöillesi
Päivämäärävalitsin on yhtä hyödyllinen kuin se, miten kävijät voivat käyttää sitä. Säännöt, joilla on väliä:
Tue manuaalista tekstisyöttöä valitsimen rinnalla
Kaikki eivät halua käyttää kalenterikäyttöliittymää. Jotkin kävijät haluavat kirjoittaa päivämäärän suoraan. Salli aina näppäimistösyöttö. Jos joku kirjoittaa "3/15/2026", hyväksy se pakottamatta heitä valitsimeen. Älä vaadi erikoismerkkejä. Hyväksy "3-15-2026" tai "3 15 2026" yhtä lailla. Joustava muotoilu poistaa kitkaa.
Käytä HTML5-syöttötyyppejä mobiilissa
Mobiililaitteissa on käyttöjärjestelmään sisäänrakennetut päivämäärä- ja ajanvalitsimet. Käytä lomakekentässäsi HTML:ssä type="date" tai type="time". Joissakin puhelimissa tämä avaa pyörivän päivämäärävalitsimen, toisissa alustan oman päivämäärävalitsimen. Kävijät odottavat tätä vuorovaikutusta puhelimellaan, ja laitteen oma valitsin on optimoitu mobiilikäyttöön.
Rajaa päivämääräalue loputtoman vierityksen estämiseksi
Jos pyydät tulevaa päivämäärää, rajaa valitsin näyttämään kuukaudet seuraavilta 2-3 vuodelta, ei seuraavilta 50 vuodelta. Jos pyydät historiallista päivämäärää, aseta kohtuullinen aloituskohta. "Syntymäajan" oletukseksi aseta 30 tai 50 vuotta sitten, ei 100 vuotta sitten.
Näytä asiayhteys ei-saatavilla oleville päivämäärille
Jos joitakin päivämääriä ei voi valita (koska ajat on jo varattu tai sää estää palvelun), merkitse ne valitsimessa eri tavalla. Harmaannuta ne, poista ne käytöstä tai näytä visuaalinen merkki. Tämä estää umpikujan, jossa joku valitsee päivämäärän ja näkee sitten virheilmoituksen, jonka mukaan se ei ole saatavilla.
Aikakentän suunnittelu: autetaan kävijöitä valitsemaan oikea hetki
Aikakentillä on omat haasteensa. Tapaamisaikaa valitsevan kävijän ei pitäisi joutua valitsemaan tunteja, minuutteja ja aamu-/iltapäivämerkintää erillisistä pudotusvalikoista. Yhdistä ne älykkäästi.
Tarjoa aikoja 30 minuutin välein
Useimmat ajanvarausjärjestelmät eivät tarvitse minuuttitason tarkkuutta. Puolen tunnin välit kattavat tapaamiset, konsultaatiot ja varaukset. Tarjoa aikoja kuten 9.00, 9.30, 10.00 ja niin edelleen. Tämä vähentää vaihtoehtojen määrää menettämättä toimivuutta.
Näytä aika muodossa, jota kävijät jo käyttävät
Yhdysvaltalaiselle yleisölle käytä 12 tunnin muotoa aamu-/iltapäivämerkinnällä. Kansainvälisissä yhteyksissä tai vuoropohjaisessa aikataulutuksessa 24 tunnin muoto voi olla järkevä. Ole johdonmukainen koko lomakkeessa. Älä koskaan vaihda muotojen välillä saman lomakkeen keskellä.
Esivalitse oletusaika tai näytä nykyinen aika
Aikakentän ei pitäisi koskaan olla täysin tyhjä. Joko esivalitse yleinen tapaamisaika (kuten 10.00) tai näytä nykyinen aika. Tämä antaa kävijöille lähtökohdan ja näyttää, missä muodossa odotat tietoa.
Mobiilin huomioiminen päivämäärä- ja aikakentissä
Mobiililomakkeilla on eri rajoitteet kuin työpöydällä. Tila on rajallinen. Kosketuskohteiden täytyy olla isompia. Näppäimistöt peittävät puolet näytöstä.
Käytä mahdollisuuksien mukaan mobiilin omia valitsimia
HTML5:n päivämäärä- ja aikasyötteet käynnistävät käyttöjärjestelmän valitsimen mobiilissa. Se on nopeampi ja käyttäjille tutumpi kuin itse suunnittelemasi mukautettu valitsin. Puhelinten omat päivämäärävalitsimet on jo optimoitu mobiilikäyttöön.
Tee kosketuskohteista riittävän suuria napautettaviksi
Jos rakennat oman valitsimen, varmista, että painikkeet ja päivämäärät ovat vähintään 44 x 44 pikseliä. Pienet kalenteriruudut, jotka toimivat hyvin työpöydällä, muuttuvat mahdottomiksi napauttaa puhelimella.
Vältä automaattista lähetystä
Älä lähetä lomaketta automaattisesti tai hyppää seuraavaan kenttään heti, kun päivämäärä on valittu. Anna kävijöiden vahvistaa valintansa ja edetä omaan tahtiinsa. Automaattinen lähetys voi jumittaa käyttäjät väärään päivämäärään tai aikaan ja turhauttaa heitä.
Virheilmoitukset ja validointi: käyttäjien ohjaaminen oikeaan päivämäärään
Hyvästä suunnittelusta huolimatta kävijät valitsevat joskus virheellisiä päivämääriä. He syöttävät paluupäivän ennen lähtöpäivää. He valitsevat päivämäärän, joka on jo varattu. He kirjoittavat vahingossa "13/45". Virheidenkäsittelysi ratkaisee, korjaavatko he ongelman vai keskeyttävätkö lomakkeen.
Validoi reaaliajassa
Älä odota lomakkeen lähettämiseen kertoaksesi kävijöille, että päivämäärä on väärä. Validoi kirjoitettaessa tai valittaessa. Jos joku valitsee paluupäivän ennen lähtöpäivää, kerro heti. Jos päivämäärä ei ole saatavilla, kerro se heti, jotta he voivat valita toisen.
Kirjoita virheilmoitukset, jotka selittävät, mikä meni pieleen
Huono virhe sanoo "Virheellinen päivämäärä". Hyödyllinen virhe sanoo "Kirjoita päivämäärä muodossa PP/KK/VVVV" tai "Tuo päivämäärä ei ole saatavilla. Valitse toinen."
Nimeä tarkka ongelma ja ehdota ratkaisu. Virheilmoituksesi ei ole rangaistus. Se on hyödyllistä opastusta.
Estä loogisesti mahdottomat valinnat
Jos pyydät lähtöpäivää ja paluupäivää, poista käytöstä paluupäivät, jotka ovat ennen valittua lähtöpäivää. Jos pyydät tapaamista, poista käytöstä päivämäärät, jotka ovat jo täysin varattuja. Tee mahdottomista valinnoista ei-saatavilla olevia sen sijaan, että pyydät kävijöitä valitsemaan ja hylkäät valinnan sitten.
Käytännön mallit: mikä toimii eri käyttötapauksissa
Paras päivämääräkentän suunnittelu riippuu lomakkeesi tyypistä. Tässä yleisiä malleja.
Varaus- ja ajanvarauslomakkeet
Käytä kalenteripäivämäärävalitsinta. Aseta oletukseksi nykyinen kuukausi tai seuraava vapaa kuukausi. Näytä ei-saatavilla olevat päivämäärät. Hyväksy manuaalinen päivämäärän syöttö varavaihtoehtona.
Syntymäaikakentät
Käytä kolmea tekstikenttää (Päivä, Kuukausi, Vuosi) tai yhtä tekstikenttää joustavalla muotoilulla. Vältä päivämäärävalitsimia, koska päivämäärä on niin kaukana menneisyydessä, että valitsimesta tulee hankala.
Toistuvien tilausten tai jäsenyyksien aloituspäivä
Käytä yksinkertaista päivämäärävalitsinta, jonka oletuksena on seuraava vapaa päivämäärä. Useimmat kävijät hyväksyvät oletuksen tai valitsevat päivämäärän seuraavan kuukauden sisältä.
Tapahtuman ajan valinta
Jos tapahtumallasi on kiinteä päivämäärä mutta kävijät valitsevat aikavälin, käytä yksinkertaista ajanvalitsinta 30 minuutin tai tunnin väleillä. Näytä, mitkä välit ovat vapaita ja mitkä täynnä.