4 lomakkeen suunnittelun UX-vinkkejä, joita sinun pitäisi tietää (esimerkkien avulla)

Meillä on tapana ajatella muotoja yksinkertaisesti keinona kerätä käyttäjätietoja, mutta ne ovat myös yksi tapa, joskus ainoa tapa, käyttäjillemme ota yhteyttä meihin. On luultavasti harhaanjohtavaa ajatella, että voimme tehdä käyttäjiä rakkaus lomakkeiden täyttäminen, mutta se on varmasti mahdollista löytää ratkaisuja, jotka eivät häiritse niitä liikaa, ja auttaa heitä prosessin aikana.

Verkkoa selattaessa voimme löytää joskus yllättäviä ratkaisuja, jotka ovat ohjelmallisesti oikein, mutta jotka on suunniteltu siten, että ne ovat todennäköisimpiä monet käyttäjät luopuvat sivustosta huonon käyttäjäkokemuksen vuoksi.

Jos lomakkeet on suunniteltu hyvin, emme voi vain miellyttää käyttäjiä vaan myös backend-tiimiä, joka pystyy käsittelemään paljon vähemmän käyttäjän syöttövirheitä. Täten tässä artikkelissa tarkastellaan, miten voimme minimoi käyttäjän syöttövirheet ja silti Pidä käyttäjät tyytyväisinä.

Odota käyttäjän tarpeita

Verkkosivustoja ja sovelluksia on eri käyttäjäpohjat ja tavoitteet, ja jopa samassa paikassa voi olla useita lomakkeita, jotka keräävät erilaisia ​​tietoja, vain yleisimpiä nimiä varten:

• Kirjautumislomakkeet
• Rekisteröintilomakkeet
• Käyttäjän profiilin lomakkeet
• Uutiskirjeen ilmoittautumislomakkeet
• Checkout-lomakkeet
• Käyttäjäkyselyt
• Yhteydenottolomakkeet
• Kommenttien lomakkeet
• Hakulomakkeet

Kaikki nämä lomaketyypit vaativat erilaisia ​​asioita. Kun suunnittelet kassalomaketta, on tärkeää varmistaa uskottavasti käyttäjille turvallisuus, kun taas kommenttimuotojen tapauksessa on hyvä ajatus lisää tunnuksia tai muita menetelmiä, joiden avulla käyttäjät voivat ilmaista todellisen tunnelmansa.

Kuitenkin jopa samanlaiset lomaketyypit on ehkä suunniteltava eri tavalla, sillä kaikilla sivustoilla on oma ainutlaatuinen käyttäjäpohja. Ennen suunnitteluprosessin aloittamista on aina hyvä ajatus ennakoida, mitä käyttäjät tarvitsevat, ja suunnittele vastaavasti.

Esimerkki: Sosiaaliset kirjautumiset käyttäjävaatimuksiin

Codepenin kirjautumislomake sisältää kolme sosiaalista kirjautumista Githubin yläosassa. Tämä valinta olisi kohtuutonta useimmille sivustoille.

Mutta se on täydellinen Codepenille, koska niiden käyttäjäkanta koostuu kehittäjistä, joista monet haluavat kirjautua Github-tileihinsä, tai liittää niiden kehitystilit keskenään kerralla.

Ajattele Mobile-First

Mobiililaitteilla ja työpöydän käyttäjillä on erilaiset tarpeet, mutta niin lomakkeiden täyttäminen on paljon suurempi haaste mobiilinäytöllä, käyttämällä käsi-eleitä kuin fyysisellä näppäimistöllä, a mobiili-ensimmäinen lähestymistapa voi viedä meidät eteenpäin, kun haluamme suunnitella käyttökelpoisia muotoja.

Lisäksi monet mobiililaitteissa toimivat UI-mallit toimivat hyvin myös työpöydällä.

Esimerkki: Tappable Controls

Laadukkaita liikkuvia lomakkeita ei voi kuvitella ilman näkyviä ohjaimia johon mobiilikäyttäjät voivat helposti napauttaa sormillaan.

Web-suunnittelukonferenssin uutiskirjeen tilauslomake An Event Apart sopeutuu tapaan, jolla mobiilikäyttäjät pääsevät näyttöön - se sisältää kaksi helppokäyttöistä syöttökenttää ja a sormenpään kokoinen painike.

Tekstinsyöttökentät ovat tavallista korkeammat, jotta mobiilikäyttäjät voivat helposti napauttaa niitä, ja iso, oranssi painike, jossa on rasti-kuvake, kannustaa käyttäjiä lähettämään lomakkeen.

Sivuston työpöydän versio käyttää samaa muotoilua, koska se näyttää myös hyvältä ja toimii hyvin suuremmilla näytöillä.

Esimerkki: Kulutettava tulo

Kun suunnittelet lomakkeita mobiililaitteille, on aina tärkeää pohtia, miten voimme minimoida käyttämäsi tila. käyttökelpoinen panos UI-suunnittelumalli on viime aikoina tullut varsin suosittu, ja se toimii erityisen hyvin mobiililaitteissa.

Booking.com hyödyntää tätä mallia mobiilipaikan hakulomakkeessa. Kun käyttäjä napautuu hakukenttään, se laajenee jättää enemmän tilaa eleille, ja sen alla on myös luettelo, jossa on suosituksia.

Kun käyttäjä napautuu ulos kentästä, se kutistuu ja ylimääräiset tiedot häviävät.

Esimerkki: Morphing-painike

Morphing-painikkeet ota käyttökelpoinen syöttökuvio askeleen vielä pidemmälle, kun käyttäjät näkevät ensin painikkeen, joka sitten morfit muotoon kun ne koskettavat sitä.

Alla oleva kuvakaappaus on The Startupin loistavasta artikkelista innovatiivisesta muotoilusta, joka esittelee myös monia muita luovia ratkaisuja.

Helpottaa tulonottoa

Pitkät muodot pyrkivät estämään käyttäjiä. Paras, mitä voimme tehdä pyytää vain sellaista panosta, jota todella tarvitsemme. Tämä ei ole tärkeää vain käyttäjäkokemuksen näkökulmasta, mutta käyttäjät voivat myös epäröidä antaa liian paljon henkilötietoja yksityisyyden suoja.

Joskus me kuitenkin vielä täytyy mennä pitempään. Tässä tapauksessa se on hyvä idea viipaloi ne pienempiin paloihin, ja palvella paloina peräkkäisinä näytöinä.

Monet verkkokauppasivustot (esim. Amazon) käyttävät tätä ratkaisua vähentääkseen korin hylkäämistä.

Jos haluamme helpottaa lomakekenttien täyttämistä, nyrkkisääntö on vähentää häiriötekijöitä ja käyttäjän toimia niin paljon kuin mahdollista.

Esimerkki: Personalized Input Picker

Eri sisällön poimijat, kuten päivämääränvalitsimet tai värinpoistimet, eivät ainoastaan ​​helpota oikeiden syöttöjen ottamista, vaan ne tekevät myös lomakkeen puoleensa vetävämpi, ja huomattavasti vähentää käyttäjän virheitä.

Todoistilistausohjelma antaa henkilökohtaisia ​​vihjeitä sen päivänvalitsimen sisällä, kun käyttäjä liikkuu päivän aikana.

Esimerkiksi alla olevassa kuvassa käyttäjä voi nähdä, että 31. elokuuta hänellä on jo 2 tehtävää, ja se voi ottaa nämä tiedot huomioon päätettäessä oikean päivämäärän tehtävistä. Se on erinomainen idea sovellukselle, jossa tuottavuus on käyttäjän tärkein huolenaihe.

Esimerkki: Drag-and-Drop-tulo

Vedä ja pudota mallit yleensä toimivat hyvin tiedostojen latauskentillä, varsinkin silloin, kun käyttäjien on tarkoitus lähettää kuvia.

Ne eivät todennäköisesti vähennä käyttäjätoimintoja, jotka ovat paljon verrattuna tavalliseen Lataa-painikkeeseen, mutta ne helpottavat valitse, mitä tiedostoa käyttäjä haluaa ladata, siten vähentää mahdollisuutta lähettää väärä tiedosto.

WordPress.com tarjoaa tyylikkään ja intuitiivisen käyttäjän syöttöliittymän postinkäsittelymuodossa. vähän pikkukuvia ja jo lähetettyjen tiedostojen visuaalinen esitys auttaa käyttäjiä nopeasti suorittamaan latauksen.

Esimerkki: Overlay poista häiriöt

Jos käyttäjät ovat hämmentyneitä, kun ne täyttävät lomakkeen, ne ovat alttiimpia virheille ja saavat myös harmiksi helpommin

Sisällön peittokuvat ovat erinomainen vaihtoehto minimalistiselle muotoilulle. Niitä käytetään monimutkaisempia sivustoja jotka haluavat näyttää erilaisia ​​tietoja samassa näytössä.

Alla olevassa kuvassa näet Booking.comin työpöydän version. Kun käyttäjät liikkuvat hakulomakkeessa, loppuosa saa peitetty harmaalla päällysteellä auttaakseen heitä pidä keskittyä lomakkeen täyttöprosessiin.

Anna palautetta käyttäjille

Anna oikea palaute oikeaan aikaan voi parantaa merkittävästi käyttäjäkokemusta.

Muotoilussa on kahdenlaisia ​​käyttäjän palautteita:

1. Palautetta annetaan ennen lomakkeen jättäminen - jotta vähentää virheitä ja muodosta luopuminen, kuten etenemisseurantajat, välitön tulon validointi, joka palkitsee välittömästi käyttäjät oikeasta syötteestä tai auttajan työkaluvihjeistä
2. Palautetta annetaan jälkeen lomakkeen jättäminen - jotta käyttäjät voivat tietää he tekivät virheen, kuten virheilmoitukset

Käyttäjän tarvitsema palaute käyttäjiltä riippuu kohderyhmämme ominaisuuksista ja sivustomme tavoitteesta.

Esimerkki: Progress Tracker

Lomakkeet, jotka ovat pitempiä kuin yksi sivu, kuten kyselyt ja useimmat sähköisen kaupankäynnin kassan lomakkeet, voivat hyödyntää edistymisen seuranta suunnittelumalli. Progress-seuranta antaa välitön visuaalinen palaute käyttäjille heidän asemastaan ​​ja kannustaa heitä jatkamaan prosessia.

SnapSurveys -tutkimusluettelon web-sovellus näyttää vähän etenemispainiketta suoraan lähetyspainikkeiden yläpuolella, jotta käyttäjät voivat luonnollisesti nähdä sen.

hän etenee tracker ei käytä mitään tarroja, mutta miten se on suunniteltu tekee sen tavoitteen selkeäksi - ympyröiden lukumäärä ilmaisee vaiheiden lukumäärän, jo toteutetut vaiheet muuttuvat siniksi, ja käyttäjät voivat helposti nähdä, kuinka monta vaihetta niiden edessä on edelleen.

Esimerkki: Reaaliaikainen validointi

Body Shopin kosmetiikkakauppias käyttää reaaliaikainen validointi käyttäjän profiilin muodossa virheiden poistamiseksi ja lomakkeen valmistusprosessin UX: n parantamiseksi.

Tulot tarkistetaan, kun käyttäjät täyttävät lomakkeen, ja oikeat ja väärät vastaukset näkyvät välittömästi helposti erottuvat kuvakkeet hieman kauempana oikealla mutta silti näkyvällä alueella.

Esimerkki: Expressive Tooltips

Ymmärrettävä mikrokopio on myös olennainen osa onnistunutta käyttäjäpalautetta muotosuunnittelussa. Määritelmän mukaan verkkosivuston mikroskopia koostuu pieniä paloja tekstiä käytetään eri osissa - tarroja, painikkeita, virheilmoituksia, työkaluvihjeitä jne.

Barclay-pankkiryhmä vastaa kirjautumislomakkeeseen kysymyksiin, joita käyttäjät voivat mahdollisesti kysyä hyvin suunniteltuja työkaluvihjeitä jotka sisältävät helppo ymmärtää mikroskopia.

Tooltips on piilotettu pientä? kuvakkeet ei häiritä käyttäjiä jotka tietävät, miten kirjautumislomake täytetään, mutta olla aina läsnä käyttäjille, jotka eivät ole varmoja.

Osa työkaluvihjeistä sisältää jopa hieman visuaalinen merkintä muistikortista jotta käyttäjät voivat helposti löytää tiedot, jotka heidän on syötettävä sisäänkirjautumislomakkeeseen.