verkkolomakkeen suunnittelu: Vitriinit ja ratkaisut

murskaava Pääkirjoitus

tekijästä

The Smashing team rakastaa laadukasta sisältöä ja välittää pienistä yksityiskohdista. Kautta online artikkeleita, Smashing kirjoja, kirjoja sekä Smashing … lisätietoja The Smashing Pääkirjoitus↬

  • 11 min read
  • tallennettu offline-lukemiseen
  • Jaa Twitterissä, LinkedInissä

tässä katsauksessa on käsin poimittu ja järjestetty valikoima hyödyllisimpiä ja suosituimpia verkkolomakkeen suunnitteluun liittyviä Smashing-lehden artikkeleita, joita on julkaistu täällä kaikkina vuosina.

pikakatsaus

  • hyödyllisiä ideoita ja ohjeita hyvään verkkolomakkeen suunnitteluun
  • verkkolomakkeen suunnittelu: esittelyt ja ratkaisut
  • verkkolomakkeen suunnittelu: modernit ratkaisut ja luovat ideat
  • laaja opas verkkolomakkeen käytettävyyteen
  • täydellisen etsimiseen
  • Web Form Validation: best practices and Tutorials
  • form-field Validation: the errors-only approach
  • Web Form Design Patterns: sign-up forms
  • Web Form Design Patterns: Rekisteröitymislomakkeet, Osa 2
  • uusia lähestymistapoja Sisäänkirjautumislomakkeiden suunnitteluun
  • innovatiiviset tekniikat rekisteröitymisten ja sisäänkirjautumisten yksinkertaistamiseksi
  • CSS-pohjaiset lomakkeet: modernit ratkaisut
  • lomakkeet mobiililaitteilla: nykyaikaiset ratkaisut
  • Kompastuskivien poistaminen Mobiililomakkeista
  • ilmainen lataus: lunttilappu suunnitteluun verkkolomakkeet

hyödyllisiä ideoita ja ohjeita hyvään verkkolomakkeen suunnitteluun

syöttölomake on olennainen osa lähes mitä tahansa verkkosivustoa tai sovellusta nykyään. Input on keskeinen vuorovaikutustapa, ja monissa tapauksissa se edustaa vaikeaa käännekohtaa onnistumisen ja epäonnistumisen välillä. On yllättävää, että emme yleensä käytä suhteellista aikaa lomakkeisiin, kun pyrimme tuomaan käyttäjät rekisteröitymis-ja yhteydenottolomakkeillemme.

verkkolomakkeen suunnittelun parhaat käytännöt

Verkkolomakkeissa voidaan käyttää useita tekniikoita ja elementtejä niiden muuttamiseksi viheliäisistä epäonnistumisista onnistuneiksi muuntopisteiksi. Tässä artikkelissa, esitämme joitakin mielenkiintoisia esimerkkejä ja hyödyllisiä ohjeita verkkolomakkeen suunnittelu.

Lue lisää…

laaja opas verkkolomakkeen käytettävyyteen

toisin kuin ehkä luette, lomakkeen pepperointi kivoilla painikkeilla, värillä ja typografialla sekä runsailla jQuery-liitännäisillä ei tee siitä käyttökelpoista. Näin tehdessäsi käsittelisit (jäsentelemättömällä tavalla) vain kolmasosaa siitä, mikä muodostaa muodon käytettävyyden.

tässä artikkelissa, annamme käytännön ohjeita, joita voit helposti seurata. Nämä ohjeet on laadittu käytettävyystestauksesta, kenttätestauksesta, verkkosivujen seurannasta, silmäseurannasta, Verkkoanalytiikasta ja tyytymättömien käyttäjien asiakastukihenkilöille tekemistä todellisista valituksista.

Lue lisää…

verkkolomakkeen suunnittelu: modernit ratkaisut ja luovat ideat

verkkolomake on usein tärkein viestintäkanava kävijöiden ja sivuston omistajien välillä. Palaute on aina tärkeää, minkä vuoksi on tarpeen varmistaa, että verkkolomakkeet ovat helposti ymmärrettäviä ja intuitiivisia käyttää. Kuitenkin, jopa muodon suunnittelussa on varaa johonkin terveelliseen osaan luovuutta.

verkkolomakkeiden ei tarvitse olla tylsiä ja CSS: n tai Flashin avulla voit helposti varmistaa, että ne ovat houkuttelevia ja tehokkaita. Saada huomannut, sinun täytyy keksiä jotain ainutlaatuista ja mielenkiintoista — symbolit, kuvakkeet, värit, sijainti tai koko web-lomakkeen käytetään usein saavuttaa mielenkiintoisia suunnitteluratkaisuja. Olemme etsineet esimerkkejä ja löytäneet niitä. Luovia, omaperäisiä ja epätavallisia verkkolomakkeita.

kuvakaappaus

alla esitellään yli 40 (todella) kaunista esimerkkiä verkkolomakkeista sekä verkkolomakkeen suunnitteluun liittyviä moderneja ratkaisuja ja luovia ideoita. Osa esimerkeistä on Flash-pohjaisia; useimmissa tapauksissa voit kuitenkin helposti luoda samanlaisia malleja puhtaalla CSS: llä ja (X)HTML: llä.

Lue lisää…

etsiessään täydellistä

s eli täysin automatisoituja julkisia Turing-testejä tietokoneiden ja ihmisten erottamiseksi toisistaan on olemassa sen varmistamiseksi, että käyttäjän syöte ei ole tietokoneen tuottama. Näitä erikoisia pulmia käytetään yleisesti verkossa suojaamaan rekisteröinti-ja kommenttilomakkeita roskapostilta. Ollakseni rehellinen, minulla on ristiriitaisia tunteita s. ne ovat ärsyttäneet minua monta kertaa, mutta olen myös toteuttanut niitä pikakorjauksia verkkosivuilla.

re

tässä artikkelissa seurataan täydellisen ratkaisun etsimistä ihmisen tuottaman roskapostin kasvavien määrien ongelmaan. Tarkastelemme , miten ja miksi s: ää käytetään ja miten se vaikuttaa käytettävyyteen, jotta voimme vastata keskeisiin kysymyksiin: Mikä on täydellinen, ja ovatko ne edes haluttavia?

Lue lisää…

Web Form Validation: Best Practices and Tutorials

Ihannetapauksessa käyttäjät täyttävät verkkolomakkeen tarvittavilla tiedoilla ja viimeistelevät työnsä onnistuneesti. Ihmiset tekevät kuitenkin usein virheitä. Tässä kohtaa verkkolomakkeen validointi tulee peliin. Verkkolomakkeen validoinnin tavoitteena on varmistaa, että Käyttäjä antaa tarvittavat ja oikein muotoillut tiedot, joita tarvitaan operaation onnistuneeseen suorittamiseen. Tässä artikkelissa menemme itse validointia pidemmälle ja tutkimme erilaisia validointi-ja virhepalautetekniikoita, menetelmiä ja lähestymistapoja.

Facebook-ilmoittautumislomake

käyttäjän Ilmoittautuminen voidaan vahvistaa palvelimella ja asiakkaalla (verkkoselain). Näin ollen meillä on palvelinpuolen ja asiakaspuolen validointi. Keskustelemme hyvistä ja huonoista puolista. Palvelinpuolen validoinnissa tiedot lähetetään palvelimelle ja validoidaan jollakin palvelinpuolen kielistä. Jos validointi epäonnistuu, vastaus lähetetään takaisin asiakkaalle, web-lomakkeen sisältävä sivu päivitetään ja palaute näytetään.

Read more …

Form-Field Validation: Vain virheet-lähestymistapa

virhesivut lomakekentän validointia varten ovat kammottavia. Olet juuri täyttänyt 20 lomakekenttää, mutta saat saman paisuneen sivun takaisin kasvoillesi, koska yksi kenttä epäonnistui vahvistamisessa.

muistan selvästi viimeisen käytettävyystutkimuksemme aikana usein äänekkäät epätoivon huokaukset aina, kun koehenkilö kohtasi validointivirhesivun.

huomasimme myös, että validointivirheille altistuneet koehenkilöt ryhtyivät ennaltaehkäiseviin toimiin välttääkseen ne myöhemmissä vaiheissa kirjoittamalla esimerkiksi ”N/A” ”yrityksen nimi” – kenttään, jos he epäilivät, oliko kenttä vapaaehtoinen.

 Form Field Validation Error Page at BlueNile.com

Baymard-instituutissa pohdimme tätä ongelmaa ja saimme idean, jota kutsumme ”vain virhekentiksi” — mistä juuri tässä artikkelissa on kyse. Ennen tämän idean tutkimista tarkastellaan kolmea perinteistä validointitekniikkaa: ”same page reload”, ” optimized same page reload ”ja” live inline validation.”

Lue lisää …

Web Form Design Patterns: Sign-Up Forms

jos haluat maksimoida palvelusi tuoton, sinun on maksimoitava verkkolomakkeidesi täyttöasteet. Ellei sinulla ole joitakin vallankumouksellisia ideoita vaikutuksen kävijöitä ensi silmäyksellä, se ei riitä yksinkertaisesti antaa käyttäjille mahdollisuuden rekisteröityä sivustoosi. Jotta palvelu voi saavuttaa maksimaalisen altistuksen, meidän, suunnittelijoiden, on tarjottava käyttäjille hyvä käyttökokemus. Meidän täytyy kutsua heidät, kuvata heille, miten palvelu toimii, selittää heille, miksi heidän pitäisi täyttää lomake ja ehdottaa etuja he saavat vastineeksi. Ja tietenkin meidän pitäisi myös tehdä heidän osallistumisensa äärimmäisen helpoksi.

tehokkaiden verkkolomakkeiden suunnittelu ei kuitenkaan ole helppoa. Ja siihen on yksi yksinkertainen syy: kukaan ei halua täyttää lomakkeita — ei offline eikä verkossa. Siksi suunnittelijoina meidän on selvitettävä äänisuunnittelupäätökset, jotta lomakkeen täyttäminen on helppoa, intuitiivista ja kivutonta.

verkkolomakkeen suunnittelumallit

mutta miten nämä päätökset tarkalleen ottaen saadaan selville? Mihin layoutissa tulee sijoittaa linkki lomakkeeseen? Miten se pitäisi suunnitella? Miten merkintöjä pitäisi korostaa ja miten niitä pitäisi yhdenmukaistaa? Miltä verkkolomakkeen suunnittelukuviot näyttävät nykyaikaisissa web-sivustoissa? Juuri näitä kysymyksiä olemme itsellemme esittäneet. Vastausten saamiseksi teimme kyselyn.

alla esitämme web-lomakkeiden suunnittelumalleja koskevan tutkimuksemme tulokset – tulokset 100 suositusta web-sivustosta, joissa verkkolomakkeilla (pitäisi) on merkitystä. Olemme päättäneet aloittaa ilmoittautumislomakkeet ensin. Esitämme ensimmäisen osan tuloksistamme alla, toinen osa tutkimustuloksista julkaistaan ensi viikolla.

päivitys: kyselyn tulosten toinen osa on nyt julkaistu myös: verkkolomakkeen suunnittelumallit: Ilmoittautumismuodot Osa 2.

Lue lisää …

verkkolomakkeen Suunnittelukuviot: Ilmoittautumislomakkeet, Osa 2

viime viikolla olemme esittäneet verkkolomaketutkimuksemme ensimmäiset tulokset. Tutkimuksen päätavoitteena oli antaa suunnittelijoille ja kehittäjille jonkinlainen intuitio siitä, kuinka tehokkaita verkkolomakkeita suunnitellaan; esitimme myös joitakin suuntaviivoja siitä, miten tehokas ja käyttäjäystävällinen verkkolomake voidaan saavuttaa.

kuvakaappaus

olemme keskittyneet ilmoittautumislomakkeisiin, koska halusimme tarkastella erikseen muita ratkaisevia lomakkeita (esim.kassalomakkeita). Jälkeenpäin olemme käyneet läpi jokaisen rekisteröitymislomakkeen valituista sivustoista ja analysoineet näissä muodoissa toteutettuja suunnittelutapoja. Alla esitämme toisen osan havainnoistamme – tulokset kyselymme keskuudessa web-lomakkeet 100 suosittu web-sivustoja, joissa web-lomakkeet (pitäisi) merkitystä.

huomaa, että tässä viestissä ei ole kyse kassalomakkeista — se on toisen keskustelun aihe, voimme tarkastella niitä erikseen yhdessä tulevista viesteistä. Haluamme kiittää Wufoota siitä, että hän tarjosi meille puitteet kyselymme tekemiseen.

Lue lisää…

uusia lähestymistapoja Kirjautumislomakkeiden suunnitteluun

monille meistä verkkosivuille kirjautuminen on osa päivittäistä rutiiniamme. Itse asiassa, me luultavasti tehdä sitä niin usein, että olemme lakanneet miettiä, miten se tehdään… eli, kunnes jotain menee pieleen: unohdamme salasanamme, käyttäjätunnus, sähköpostiosoite olemme rekisteröityneet, miten olemme rekisteröityneet, tai vaikka koskaan rekisteröitynyt ollenkaan.

nämä kokemukset eivät ole vain turhauttavia meille, vaan huonoja myös yrityksille. Kuinka paha? User Interface Engineering ’ s analysis 1 of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never complete the purchase they started on They requested their password.

Gowalla
viittomalomake Gowallassa.

kaiken kukkuraksi vierailijat, jotka eivät ole kirjautuneet sisään, eivät näe henkilökohtaista näkymää verkkosivuston sisällöstä ja suosituksista, mikä vähentää muuntokursseja ja sitoutumista. Onko kirjautuminen iso juttu?—?tarpeeksi suuri, että jotkut sivustot ovat alkaneet tutkia uusia malleja ratkaisuja vanhaan ongelmaan.

Lue lisää…

innovatiivisia tekniikoita ilmoittautumis-ja Kirjautumislomakkeiden yksinkertaistamiseksi

ilmoittautumis-ja kirjautumislomakkeiden suunnitteluun on monia tapoja. Useimmat suunnittelijat tuntevat perinteiset tavat. Mutta ymmärtäminen ja soveltaminen muutamia innovatiivisia tekniikoita voisi tehdä lomakkeet yksinkertaisempi ja tehokkaampi täyttää. Tässä artikkelissa, haluaisimme esitellä pari uusia ideoita, jotka voivat olla hyödyllisiä seuraavan malleja. Huomaa, että ennen kuin käytät näitä tekniikoita, sinun pitäisi varmistaa, että ne ovat järkeviä yhteydessä, jossa aiot käyttää niitä. Haluaisimme kuulla tapaustutkimuksistasi ja käytettävyystesteistäsi, jotka vahvistavat tai hylkäävät alla esitetyt ehdotukset.

Lue lisää…

CSS-pohjaiset lomakkeet: modernit ratkaisut

rekisteröinti-ja palautelomakkeet löytyvät kaikkialta. Jokainen start-up yrittää houkutella kävijöitä huomiota, joten web-lomakkeet ovat yhä tärkeämpää menestystä tahansa yrityksen. Lopulta juuri nämä verkkolomakkeet ovat vastuussa ensimmäisestä kontaktista potentiaalisiin asiakkaisiin. Katsotaanpa katsomaan, mitä moderneja ratkaisuja web-kehittäjä voi käyttää, suunnitella hänen / hänen seuraava css-pohjainen muoto. Linkit tarkastettu: toukokuu / 08 2008.

Lue lisää…

lomakkeet mobiililaitteilla: nykyaikaiset ratkaisut

Mobiililomakkeilla on yleensä huomattavasti enemmän rajoitteita kuin työpöytäserkuillaan: näytöt ovat pienempiä, yhteydet hitaampia, tekstinsyöttö hankalampaa, lista jatkuu. Niin, määrän rajoittaminen lomakkeiden mobiilisovellukset ja sivustot on yleensä hyvä idea. Kun haluat syötteen mobiililaitteiden käyttäjiltä, radiopainikkeet, valintaruudut, valikot ja listat toimivat yleensä paljon paremmin kuin avoimet tekstikentät.

rajoitteet kuitenkin synnyttävät innovaatioita, eikä liikkuvilla muodoilla ole eroa. Mobiililaitteiden rajoitukset ovat pakottaneet kehittäjät ja suunnittelijat löytämään uusia tapoja, joilla käyttäjät voivat syöttää dataa nopeammin ja helpommin. Kiitos modernit ratkaisut käsitellään tässä artikkelissa, mobiili tila ei ehkä ole paikka välttää muotoja enää paljon. Sen sijaan siitä voi tulla paikka rohkaista heitä.

Lue lisää…

poistamalla kompastuskiviä liikkuvissa muodoissa

muutama viikko sitten yllätyin melkoisesti, kun näin jalkakäytävän lähestyvän nopeasti ollessani kävelyllä. Makasin siinä tyrmistyneenä ja tajusin pian, mitä oli tapahtunut: kaaduin. Auts. B-miinus. Yleensä yritän olla mahdollisimman tarkkaavainen, mutta tällä kertaa iso halkeama jalkakäytävässä tarttui kenkääni ja heitti minut täysin pois tasapainosta.

 Mobile stumbly

kun on kyse lomakkeiden täyttämisestä matkapuhelimella, olen havainnut monien käyttäjien törmäävän samanlaiseen kokemukseen, joka on vain vähemmän kivulias fyysiseltä puoleltaan. Monet mobiililomakkeen elementit vaikuttavat siihen, kuinka sujuvasti käyttäjät pääsevät palveluun tai tuotteeseen, joka piiloutuu kaikenlaisen lomakkeen taakse.

on useita tekijöitä, joita voidaan pitää kompastuskivinä koko lomakkeen täyttömatkan ajan. Erityisesti kannettavassa laitteessa tätä matkaa vaikeuttaa se, että meidän on otettava huomioon kontekstuaaliset parametrit, kuten aika, sijainti tai rajoitetut syöttövaihtoehdot, verrattuna yrityksen työpöytäkokemukseen. Tässä viestissä tarkastelemme yleisimpiä kompastuskiviä mobiililaitteille. Lisäksi aion keskustella suunnittelustrategioita välttää kompastuskiviä ja helpottaa turvallinen ja nopea kävellä lomakkeiden mobiilikäyttäjille.

Lue lisää…

Free Download: Cheat Sheet for Designing Web Forms

Forms, forms, forms: so often overlook in design. Tässä viestissä, meillä on ilo julkaista muodossa suunnittelu Cheat Sheet, luoma Joe Leech ja julkaistiin Smashing Magazine ja sen lukijat. Tämä pinnasänky arkki sisältää Omnigraffle malli, sekä Photoshop (PSD) ja PDF esimerkkejä voit ladata ja käyttää kuin haluat. Tulosta lakana, kiinnitä se seinään, lähetä se asiakkaille, ja yleensä auttaa tekemään kaikkien lomakkeet hieman parempi.

Lomakesuunnittelu

pinnasänkylakanan suunnittelijat ovat käyttäneet vuosia lomakkeiden suunnitteluun ja testaamiseen, ja he ovat päättäneet tiivistää projekteissaan esiin tulevat yleisimmät ongelmat ja ongelmat.

Lue lisää …

sinua saattavat kiinnostaa myös seuraavat ”parhaat” – valinnat:

  • Web Design Elements: Examples And Best Practices
  • Web Design Navigation Showcases
  • Usability & User Experience

Vastaa

Sähköpostiosoitettasi ei julkaista.