Kuinka suunnitella reagoivia ja laite-agnostisia muotoja

Lomakkeet ovat yksi digitaalisen tuotesuunnittelun tärkeimmistä komponenteista, olipa kyseessä sitten rekisteröitymisvirta tai moninäkymäaskeleet - joten ne on suunniteltava niin, että ne toimivat tehokkaasti mobiililaitteissa.

Näin voit suunnitella lomakkeita mobiililaitteille, mukaan lukien nopea tarkastelu kuinka käyttää Flexboxia .



01. Suunnittelu pystysuoraan vieritykseen

Yhden sarakkeen asettelu toimii paremmin

Yhden sarakkeen asettelu toimii paremmin

Laitteen koosta riippumatta helpoin tapa täyttää lomake on lineaarinen. Useat sarakkeet häiritsevät käyttäjän vauhtia (käyttäjät todennäköisesti tulkitsevat kenttiä epäjohdonmukaisesti, mikä on negatiivinen tekijä käytettävyyden kannalta) ja voi johtaa siihen, että käyttäjien täytyy turvautua vaakasuoraan vieritykseen.

Lomakkeiden asettamisen yhteydessä sinun on suunniteltava merkinnät yhteen sarakkeeseen: jos lomake on yhdessä sarakkeessa, polku loppuun asti on suora viiva sivua alaspäin.



02. Aseta tarrat kenttien yläpuolelle

Sijoita tarrat lomakekenttien yläpuolelle

Sijoita tarrat lomakekenttien yläpuolelle

Tunnisteet kertovat käyttäjille, mitä vastaavat syöttökentät tarkoittavat. Kun valitset tarrojen sijoituspaikan, sinulla on kaksi vaihtoehtoa: vasemmalle tasattu tai ylhäältä tasattu.

Vasemmalle tasatut tarrat toimivat hyvin, jos lomaketta täytetään työpöydällä tai tabletilla. Ne ovat kuitenkin kauhea ratkaisu mobiililaitteille, joissa näytön tila on rajallinen. Koska vasemmalle tasattujen tarrojen on istuttava ennen kenttää, kapea näyttö jättää hyvin vähän tilaa itse kentälle - varsinkin jos laite on pystytilassa. Tämä luo kaksi vakavaa käytettävyyskysymystä:



  • Lomakekenttä ei ole tarpeeksi leveä näyttämään käyttäjän koko syötettä, mikä tekee hänestä todennäköisemmän vastausten virheellisen kirjoittamisen ja johtaa virheellisempien lomakkeiden lähettämiseen
  • Kun käyttäjälle ilmoitetaan antaneensa virheellisiä tietoja, heillä voi olla vaikeuksia havaita ja korjata ongelma, koska he eivät näe koko virheellistä syötettä

Tarran sijoittaminen lomakekentän yläpuolelle, kun käyttäjä selaa mobiililaitteesta, varmistaa, että käyttäjät näkevät enimmäisleveyden tietojen syöttämiseen, koska sinun ei tarvitse käyttää mitään tunnisteessa.

Tarrojen kirjoittaminen syöttökenttien yläpuolelle helpottaa myös selkeiden ja mielekkäiden kenttätarrojen kirjoittamista, koska et rajoitu yhteen tai kahteen sanaan.

03. Käytä kosketuskohteita

Napautuskohteiden tulisi olla helppokäyttöisiä riippumatta siitä, minkä kokoisessa laitteessa ne näkyvät. Suuremmat kohteet (syöttökentät ja painikkeet) ovat helpompia käyttäjille, joilla on pienempi näppäryys, olipa kyse pysyvästä tai väliaikaisesta ympäristöstä.

Tällä hetkellä suurin kohdekoko on kosketuslaitteille, joten sinun on suunniteltava kosketus ensin. Näin varmistetaan, että käyttäjien ei tarvitse lähentää tekstiä kirjoittaakseen tai vaihtoehtoa valitsemaan. Napsautettavien alueiden tulee noudattaa rasvasormisääntöä, eivätkä ne saa häiritä ympäröiviä alueita: ihmisen keskimääräinen sormityyny on 10 x 14 mm ja keskimääräinen sormenpää on 8-10 mm, joten 10 x 10 mm on hyvä kosketuskohteen vähimmäiskoko.

Mutta napautuskohteen ei pitäisi olla vain oikean kokoinen, vaan myös varmistettava, että useiden napautuskohteiden välillä on tarpeeksi tilaa. Itse asiassa, jos saat Tap-kohdekoko-virheen mobiilihakukoneoptimointityökaluissa, se johtuu usein siitä, että napautuskohteesi ovat liian lähellä toisiaan sen sijaan, että todellinen napautuskohde olisi liian pieni.

Mobiililaitteiden sisällön lukeminen voi olla vaikeaa, joten tulojen tekeminen 100-prosenttisesti ja tekstin vähintään 16 kuvapisteen (1em) varmistaminen tekee suurta eroa. Tällä tavoin ei tarvitse nipistää zoomausta tai ylimääräistä vieritystä vaadittujen tietojen lukemiseen.

kuinka tehdä silmät valkoisemmiksi photoshopissa

04. Käytä HTML5-lomakekenttiä

Mobiililaitteet tarjoavat mukautettuja ohjelmistonäppäimistöjä eri syötetyypeille, ja HTML5-lomakekentät ovat helpoin tapa parantaa lomakkeiden käyttökokemusta. Nämä syöttötyypit antavat selaimelle vihjeitä siitä, minkä tyyppinen näppäimistöasettelu näytetään näyttönäppäimistöille.

Sisällytä syötetyypit määrä , sähköposti , Puhelin , url ja Päivämäärä , ja mobiililaitteidesi näppäimistösyöttö päivittyy, jotta käyttäjän on helpompaa täyttää lomake. Se ei vaadi sinun lisäämistä ylimääräisiin luokkiin tyylilomakkeiden syötteisiin, sinun tarvitsee vain käyttää kelvollisia HTML5-syötetyyppejä:

05. Käytä Flexboxia

Tunnustetaan tosiasia - reagoivan asettelun luominen HTML-muotoon on vaikeaa. Useimmat meistä ovat kamppailleet tämän kanssa jossain vaiheessa. Vaikka on aina ollut mahdollista saada asettelu käyttäytymään odotetulla tavalla erikoistuneiden tekniikoiden avulla, prosessi ei ole koskaan ollut helppoa.

Strukturoitujen asettelujen käsittelyyn liittyviä tekniikoita on tullut ja mennyt vuosien varrella: kehittäjät ovat käyttäneet HTML-kehyksiä, HTML-taulukoita, float-pohjaisia ​​asetteluja ja viime aikoina erilaisia ​​CSS-kehysten suosimia ruudukkojärjestelmiä, kuten Bootstrap .

Mutta HTML Flexible Box -mallin (tai Flexbox ), HTML on vihdoin saanut runsaan laatikon muotoilukoneen, joka käsittelee monimutkaisia ​​asetteluja, mukaan lukien HTML-lomakkeet.

Flexbox antaa meille paljon joustavuutta rakentaa nopeasti kauniita muotoja. Keskeinen asia, joka on ymmärrettävä Flexboxissa, on se, että se on konttien käsittelytyökalu: sen tarkoituksena on tarjota tehokkaampi tapa sijoittaa, kohdistaa ja jakaa tilaa säiliön esineiden välillä, vaikka niiden kokoa ei tunnettaisikaan ja / tai dynaaminen (täten sana 'joustava').

Mielenkiintoista on, että Flexbox antaa meille suuren joustavuuden muodon rakentamiseen nopeasti ilman mediakyselyjä. Lisäksi kaikki nykyiset selaimet tukevat sitä.

Meidän Web-suunnittelijan opas Flexboxiin artikkeli kertoo sinulle enemmän, mutta nyt harjoitellaan ja opitaan käyttämään Flexboxia reagoivan lomakkeen luomiseen. Ensinnäkin määritellään lomakkeen HTML-rakenne:

 
       
  • First Name
  •    
  • Last Name
  •    
  • Email
  •    
  • Phone
  •    
  • Message
  •     
  • Submit
  •  

Huomaa, että jokaisella lomakkeessa olevalla luettelokohdalla on luokka joustava . Tämä luokka tunnistaa joustavan säiliön muodossa. Yksi Flexboxin suurista eduista on kyky käyttää mitä tahansa HTML-elementtiä määrittelemään sen säilöt ja elementit.

Voit käyttää Flexbox-tyyliä mihin tahansa HTML-elementtiin, mikä tarkoittaa, että voit helposti muotoilla ja muuttaa elementtejä toisistaan ​​riippumatta. Muista, että Flexbox on vain muotoilumekanismi, mikä tarkoittaa, että voit lisätä ja poistaa sen haluamallasi tavalla.

Tunnistetaan CSS: n joustavat säiliöt. Lisäksi haluamme keskittää joustavat kohteet pystysuunnassa poikkiakselin poikki. Sen määritteleminen on melko helppoa, meidän on vain määritettävä yksinkertainen CSS-sääntö:

.flex li {   display: flex;   flex-wrap: wrap; align-items: center; }

Seuraava vaihe on määrittää joustavien kohteiden leveydet. Tärkeimmät vaatimukset:

onko hyvä käyttää viitteitä piirrettäessä
  • Tunnisteiden tulee olla vähintään 100 kuvapistettä ja enintään 200 kuvapistettä
  • Tarrojen jälkeen tulevien lomakkeen osien on oltava vähintään 200 kuvapistettä

Mitä tämä antaa meille? Jokainen tarra ja siihen liittyvä lomake-elementti näytetään yhdellä vaakasuoralla rivillä, kun lomakkeen leveys on vähintään 300 kuvapistettä (muista, että käytämme tässä oikean suuntaisia ​​tarroja).

.flex > li > label {   flex: 1 0 100px;   max-width: 200px; } .flex > li > label + * {   flex: 1 0 200px; }

Lopuksi lähetyspainikkeelle, joka on myös joustava kohde, määritämme muutaman perustyylin:

.flex li button {   margin: auto;   padding: 22px 46px; }

Kuten näette, vähäisellä merkinnällä ja Flexboxin voimalla olemme rakentaneet reagoivan lomakkeen.

Kun yhä useampi käyttäjä kantaa mobiililaitteita, on tärkeää tarjota käyttäjäystävällinen kokemus millä tahansa laitteella. Tärkeintä on sopeutua sekä käyttäjän tarpeisiin että laitteen ominaisuuksiin.

Tämä artikkeli julkaistiin alun perin numerossa 287 nettilehti , ammattilaissuunnittelijoille ja -kehittäjille tarkoitettu lehti, joka tarjoaa uusimmat uudet verkkotrendit, -teknologiat ja -tekniikat. Tilaa net täältä.

Aiheeseen liittyvät artikkelit: