Sisältö
- 01. Lomakemallit
- 02. Ei-semanttinen merkintä
- 03. Jaetut lomakkeet
- 04. Maagiset linkit
- 05. Kaksivaiheinen todennus
- 06. Dynaamiset paikkamerkit
Tylsät, tylsät muodot. Rakastakaa heitä tai vihaat heitä (ja totta puhuen, te vihaat heitä), ne ovat väistämätön osa melkein jokaista verkkorakennusta, riippumatta siitä, rakentatko täysimittaisia verkkokauppoja (kuten inspiroivia esimerkkejä verkkokauppasivustoista) vai suoraviivaisia yrityssivustot (ehkä käyttämällä hyviä verkkosivustojen rakentajia), sinun on ennemmin tai myöhemmin tehtävä joitain lomakkeita.
Emme tuskin voi syyttää suunnittelijoita yrittämästä keksimään innovatiivisia tapoja tehdä niistä mielenkiintoisempia, mutta kuinka moni näistä muotitrendeistä tosiasiallisesti pitää yllä käytettävyyttä? Katsotaanpa joitain yleisiä UX-lomakemalleja, alkaen modaalien sisällä olevista lomakkeista.
Etsitkö lisää web-suunnitteluun liittyviä neuvoja? Katso suosituimmat web-hosting-palvelut.
- 10 sääntöä käyttäjäystävällisten verkkolomakkeiden tekemisestä
01. Lomakemallit
Lomakkeiden sijoittaminen modaalien sisään ja niiden näyttäminen dynaamisesti vaikuttaa ilmeiseltä ratkaisulta muuten liian monimutkaiselle tilanteelle. Lomakkeet eivät vie mitään merkittävää tilaa, joten miksi he tarvitsevat oman osoitteensa? Itse asiassa on useita syitä.
Esteettömyys. Tärkein syy on, että jos teemme modaaleista esteettömiä (ja tietysti meidän pitäisi olla), ne tulisi helposti hylätä painamalla ESC-näppäintä tai napsauttamalla modeemin tyhjää tilaa. Nyt kun liikennemuodot on helppo hylätä, olisi haittaa (puhumattakaan siitä, että pääsy vastapäätä) vahingossa hylätä modaali (ja lähettämättömät lomaketiedot) lomakkeen täyttämisen puolivälissä.
Asiakaspalvelu. Esteettömyyden lisäksi lomakkeiden yhdistäminen modaaleihin ja lähinnä lomakkeen isännöinti erilliselle URL-osoitteelle tarkoittaa, että asiakaspalvelun edustajat eivät voi linkittää näihin lomakkeisiin viestinnän aikana, mikä tekee asioista erittäin vaikeita sekä asiakkaille että asiakaspalvelun edustajille.
Salasanojen hallinta (joko selaimessa tai erillisinä sovelluksina) muistaa joskus kirjautumistiedot ruudulta näkymälle, joten jos käyttäjä pystyy kirjautumaan sisään missä tahansa sovelluksessa tai verkkosivustolla, sisäänkirjautumisen voi olla vaikea saada tiedot, jos mainitut tiedot tallennettiin, kun käyttäjä oli eri URL-osoitteessa.
Ratkaisu: älä tee muotoja modaalien sisällä. Lomakkeiden hahmontamisessa modaalien sisällä on enemmän ongelmia kuin se ratkaisee, ja vaikka jotkut lomakkeet ovat niin yksinkertaisia, että se saa näytön näyttämään käytännössä tyhjältä, lomakkeita täyttävät käyttäjät eivät todennäköisesti välitä. Sinäkin olet käyttäjä, joten tiedät jo, että välitön vastaus lomakkeeseen on "Toivottavasti tämä ei vie kauan", ei ", tämä lomake ei näytä tarpeeksi kiinnostavalta". Prioriteetti auttaa käyttäjiä siirtymään siihen, mihin he todella tarvitsivat.
02. Ei-semanttinen merkintä
Elementit eivät ole kaikki luotu tasa-arvoisiksi. Semanttinen merkintä varmistaa, että jokaiseen tilanteeseen on olemassa erilaisia koodimerkintöjä; Esimerkiksi, vaikka vakiosyöttökenttä saattaa näyttää samalta kuin sähköpostikenttä, sovellus- ja selainmyyjät tietävät eron ja heidän käyttäytymistään mukautetaan asianmukaisesti odotetun syötteen mukaan.
Kohdennetut sähköpostikentät mobiililaitteissa näyttävät näppäimistön version, jossa @ -merkki on heti käytettävissä, kun taas tavalliset syöttökentät eivät toimi näin. Pelkästään konseptin vahvistamiseksi salasanakentät korvaavat käyttäjän syötteet selvästi tähdillä - turvallisuussyistä - ja URL-kentät näyttävät .com-näppäimistön mukavuuden vuoksi.
Mutta koska nämä erot ovat niin hienovaraisia, semantiikka unohdetaan usein, varsinkin suunnittelijat, jotka eivät ole tietoisia näistä eroista, koska he eivät ole mukana koodipuolella.
Ratkaisu: toteuttaa semanttinen merkintä. Ilman semanttista merkintää käyttäjät eivät pysty saamaan näitä aikaa säästäviä käytettävyysetuja, minkä vuoksi suosittelen aina, että suunnittelijat kertovat kehittäjille, kuinka tiettyjen käyttöliittymäelementtien tulisi toimia joko kanavanvaihdon aikana tai muuten.
Kehittäjien ja suunnittelijoiden tulisi myös varoa syöttökenttien piilottamista (ts. syöttötyyppi = "piilotettu"> tai vastaava), käsite, jota käytetään progressiiviseen paljastamiseen tai sellaisten tietojen keräämiseen, joihin on pääsy ilman käyttäjän nimenomaista tarjousta (kuten sijainti, palvelimen puoli). Piilotetuilla syöttökentillä ei ole olennaisesti tyyppiä automaattisen täytön tullessa voimaan, minkä seurauksena se ohitetaan kokonaan.
03. Jaetut lomakkeet
Jaetut muodot ovat pitkiä muotoja jaoteltuina osioiksi esimerkiksi yksi osa toimitusosoitetta ja toinen osa laskutustietoja. Tämä käsite on todella järkevää ja sitä on käytetty (onnistuneesti) todella kauan.
Luonnollisesti muodon jakamisen tärkein etu on kognitiivisen ylikuormituksen väheneminen; muodon jakamisen väärinkäytöllä voi kuitenkin olla haitallinen vaikutus. Esimerkiksi sisäänkirjautumislomakkeilla käyttäjien pakottaminen kahden vaiheen läpi, kun jokaisessa vaiheessa on vain yksi kenttä (sähköposti ja salasana), on tarpeetonta, puhumattakaan siitä, että se rikkoo automaattisen täydennyksen edut.
Automaattinen täydennys toimii sopusoinnussa muiden syöttökenttien kanssa. Esimerkiksi, kun käyttäjät kirjoittavat sisäänkirjautumiseen sähköpostiosoitteensa, salasanakenttä täydennetään kätevästi, kun kyseiselle sähköpostiosoitteelle on tallennettu oikea yhdistelmä, mutta jaettaessa aiheeseen liittyvät kentät eri vaiheisiin, selain ei voi täydentää mitä ei ole. Automaattinen täyttö voi säästää päivän, mutta lopputulos riippuu siitä, että selain tekee oikeat oletukset (ts. Jos käyttäjällä on useita sisäänkirjautumisia samalle verkkosivustolle tai sovellukselle, selain voi valita väärän yhdistelmän).
Ratkaisu: Tee lomakkeista tylsiä!
Lomakkeet ovat tylsiä ja ovat aina. Sen sijaan, että yritämme tehdä niistä mielenkiintoisia, kaikkein käyttäjäkeskeisin suunnittelupäätös, jonka voimme tehdä lomakkeista, on tehdä niistä nopeampi ja helpompi käyttää. Lomakkeiden jakamisen suhteen tekniikan paras toteutus on käyttää sitä vain jakamalla toisistaan riippumattomat kentät.
04. Maagiset linkit
Pysyessään kirjautumislomakkeissa, maagiset linkit ovat uusi suuntaus, jossa sähköpostiosoitteen syöttämisen jälkeen käyttäjälle lähetetään sähköpostilinkki, joka kirjaa heidät automaattisesti sisään. Jos olet koskaan käyttänyt Slackia, olet jo perehtynyt konseptin kanssa, joka säästää mobiililaitteilla salasanasi kirjoittamista.
Jotkut saattavat sanoa, että käsite on hieman väsyttävä, koska käyttäjän on itse vaihdettava sovellus kirjautumiseen, vaikka UX-virta on tosin hieman parempi kuin saada väliaikaisia kirjautumistietoja, jotka käyttäjän on kopioitava sovellukseen kirjautumista varten. Automaattisen täytön ja / tai automaattisen täydennyksen rikkomisen lisäksi tuntemattomat käytännöt voivat olla hämmentäviä käyttäjille.
Ratkaisu: Tee taika-linkeistä valinnaisia tai toissijaisia. Maagisissa linkeissä ei ole paljon vikaa, ja ne voivat varmasti olla hyödyllisiä matkapuhelinkäyttäjille, jotka eivät mieluummin kirjoita; yleissopimus tekee kuitenkin liian monta oletusta siitä, miten käyttäjä on asettanut sähköpostinsa. Parhaan tuloksen varmistamiseksi tee taika-linkit valinnaisiksi.
05. Kaksivaiheinen todennus
Kaksivaiheinen todennus (tai 2FA) on jotain kaksiteräisestä miekasta. Toisaalta se lisää turvallisuutta pyytämällä käyttäjiä hyväksymään kirjautumisyritykset tekstiviestillä, sähköpostilla tai jonkinlaisella 2FA-todennussovelluksella; toisaalta se pakottaa käyttäjät hyväksymään kirjautumisyritykset tekstiviestillä, sähköpostilla tai jonkinlaisella 2FA-todennussovelluksella - urgh!
Kuten ihmisen psykologia sanelee, olemme enemmän huolissamme ongelmista, joita meillä on tällä hetkellä, joten on vaikea huolehtia turvallisuuden eduista, ennen kuin tilillemme on todella murtauduttu. Useimmat käyttäjät eivät halua 2FA: ta ennen kuin tarvitsevat sitä.
Ratkaisu: Älä pakota 2FA: ta tai tarjoa ainakaan käteviä tapoja sen toteuttamiseen, esimerkiksi WiFi: n tai sähköpostin kautta.
Jos 2FA: ta ei vaadita, tee siitä ainakin valinnainen (ts. Käyttäjän on kytkettävä se päälle mainitun sovelluksen tai verkkosivuston asetusten kautta).
Oletetaan, että käyttäjä on ulkomailla. Heillä ei ole pääsyä päivittäiseen mobiilidataansa. Heillä voi kuitenkin olla pääsy WiFi-verkkoon, joten sähköposti tai 2FA-todennussovellus, kuten Google Authenticator, olisi paljon helpompaa kuin tekstiviestipohjainen todennus. Ja jos käyttäjä voi sammuttaa sen väliaikaisesti, vielä parempi!
06. Dynaamiset paikkamerkit
Syöttötarroilla on todella epäoikeudenmukainen maine, koska ne voivat tehdä lomakkeista näyttävän kömpelöiltä ja meille opetetaan uskomaan, että vähemmän on enemmän. Mutta tämä ei ole yksi niistä hetkistä. Viime vuosina yleinen käyttöliittymäsuunnittelutrendi on saada paikkamerkki-teksti siirtymään tunnisteeseen, kun napsautetaan syöttökenttää. Paikkamerkit ja syöttötarrat palvelevat kuitenkin kahta hyvin erilaista toimintoa, eikä yksi voi korvata toisia, vaikka animaation ulkonäkö luulisi.
Paikkamerkkejä käytetään osoittamaan käyttäjälle, mitä pidetään hyväksyttävänä arvona, kun taas tarra on yksinkertaisesti lyhyt kuvaus syötekentän tarkoituksesta. Tässä on esimerkkiyhdistelmä:
Tunniste: "Nimi" Paikkamerkki: "John Doe"
Jos lyhytaikainen muistisi ei ole loistava, sinulla on todennäköisesti ollut hetki jossain vaiheessa, jossa olet unohtanut kirjoittamasi lomakkeen kentän puolivälissä. Se on hyvin yleinen skenaario.
Ratkaisu: Pidä ainakin etiketti aina näkyvissä. Pitämällä tarra näkyvissä voit varmistaa, että lomakekentät on helppo täyttää oikein, myös käyttäjille, joilla on erilaiset esteettömyystarpeet, tai henkilöille, joilla on lisääntynyt kognitiivinen kuormitus meluisissa, häiritsevissä tai stressaavissa ympäristöissä.
Onko sinulla joukko uusia ideoita? Pidä ne turvassa pilvivarastossa.
Tämä artikkeli julkaistiin alun perin numerossa 318 netto, maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Osta numero 318 täältä tai tilaa täällä.
