webbformulär Design: montrar och lösningar

Smashing Editorial

om författaren

Smashing-teamet älskar högkvalitativt innehåll och bryr sig om de små detaljerna. Genom våra online artiklar, Smashing böcker, e-böcker samt Smashing … mer aboutThe Smashing Editorial↬

  • 11 min läs
  • sparas för offline läsning
  • Dela på Twitter, LinkedIn

denna översikt har ett handplockat och organiserat urval av de mest användbara och populära Smashing magazines artiklar relaterade till Webbformulärdesign och publiceras här under alla år.

Snabböversikt

  • användbara tips och riktlinjer för bra webbformulär Design
  • webbformulär Design: montrar och lösningar
  • webbformulär Design: moderna lösningar och kreativa ideer
  • en omfattande Guide till webbformulär användbarhet
  • på jakt efter den perfekta
  • validering av webbformulär: bästa praxis och handledning
  • validering av formulärfält: den enda felmetoden
  • designmönster för webbformulär: Registreringsformulär
  • designmönster för webbformulär: Registreringsformulär, del 2
  • nya metoder för att utforma inloggningsformulär
  • innovativa tekniker för att förenkla registreringar och inloggningar
  • CSS-baserade formulär: moderna lösningar
  • formulär på mobila enheter: moderna lösningar
  • ta bort snubblar i mobila former
  • gratis nedladdning: fuskblad för att designa webbformulär

användbara tips och riktlinjer för bra webbformulär design

inmatningsformuläret är en viktig del av nästan alla webbplatser eller applikationer dessa dagar. Input är en kärnmetod för interaktion, och i många fall representerar den den hårda omvandlingspunkten mellan framgång och misslyckande. Med den tid och ansträngning vi lägger på att föra användare till våra registrerings-och kontaktformulär, det är förvånande att vi tenderar att inte spendera en proportionell tid på formulären själva.

 bästa praxis för Webbformulärdesign

ett antal tekniker och element kan användas i webbformulär för att förvandla dem från misslyckade misslyckanden till framgångsrika omvandlingspunkter. I den här artikeln presenterar vi några intressanta exempel och användbara riktlinjer för Webbformulärdesign.

Läs mer …

en omfattande Guide till webbformulär användbarhet

i motsats till vad du kan läsa, peppar din form med fina knappar, färg och typografi och massor av jQuery plugins kommer inte att göra det användbart. I själva verket skulle du ta itu med (på ett ostrukturerat sätt) bara en tredjedel av vad som utgör formanvändbarhet.

i den här artikeln ger vi praktiska riktlinjer som du enkelt kan följa. Dessa riktlinjer har skapats från användbarhetstestning, fälttestning, spårning av webbplatser, ögonspårning, webbanalys och faktiska klagomål till kundsupportpersonal av missnöjda användare.

Läs mer …

webbformulär Design: moderna lösningar och kreativa ideer

webbformulär är ofta den viktigaste kommunikationskanalen mellan besökare och webbplatsägare. Feedback är alltid viktigt och därför är det nödvändigt att se till att webbformulär är lätta att förstå och intuitiva att använda. Ändå, även i formdesign kan man ha råd med en hälsosam del av kreativiteten.

webbformulär behöver inte vara tråkiga och med CSS eller Flash kan du enkelt se till att de är tilltalande och effektiva. För att bli märkt måste du komma med något unikt och intressant — symboler, ikoner, färger, position eller storleken på webbformuläret används ofta för att uppnå intressanta designlösningar. Vi har sökt efter några exempel och vi har hittat dem. Kreativa, originella och ovanliga webbformulär.

skärmdump

nedan presenterar vi över 40 (verkligen) vackra exempel på webbformulär samt moderna lösningar och kreativa ideer relaterade till webbformulärdesign. Några av exemplen är Flash-baserade; men i de flesta fall kan du enkelt skapa liknande mönster med ren CSS och (X)HTML.

Läs mer …

på jakt efter de perfekta

s, eller helt automatiserade offentliga Turing-tester för att skilja datorer och människor åt, finns för att säkerställa att användarinmatning inte har genererats av en dator. Dessa märkliga pussel används ofta på webben för att skydda registrerings-och kommentarformulär från spam. För att vara ärlig, jag har blandade känslor om s. de har irriterat mig vid många tillfällen, men jag har också genomfört dem som snabba lösningar på webbplatser.

re

den här artikeln följer sökandet efter den perfekta lösningen på problemet med ökande mängder mänskligt genererad spam. Vi tittar på hur och varför s används och deras effekt på användbarhet för att svara på viktiga frågor: Vad är det perfekta , och är de till och med önskvärda?

Läs mer …

validering av webbformulär: bästa praxis och handledning

helst kommer användarna att fylla webbformuläret med nödvändig information och avsluta sitt jobb framgångsrikt. Men människor gör ofta misstag. Det är här validering av webbformulär spelar in. Målet med webbformulärvalidering är att säkerställa att användaren tillhandahöll nödvändig och korrekt formaterad information som behövs för att framgångsrikt slutföra en operation. I den här artikeln kommer vi att gå utöver själva valideringen och utforska olika validerings-och felåterkopplingstekniker, metoder och tillvägagångssätt.

Facebook registreringsformulär

användarens inmatning kan valideras på servern och på klienten (webbläsare). Således har vi validering på serversidan och klientsidan. Vi kommer att diskutera för-och nackdelar med varje. I valideringen på serversidan skickas information till servern och valideras med ett av serversidans språk. Om valideringen misslyckas skickas svaret tillbaka till klienten, sidan som innehåller webbformuläret uppdateras och en feedback visas.

Läs mer …

validering av formulärfält: Felmetoden

felsidor för validering av formulärfält är fruktansvärda. Du har just fyllt i 20 formulärfält, men du får samma uppblåsta sida som kastas tillbaka i ditt ansikte eftersom ett enda fält misslyckades med att validera.

jag minns tydligt de ofta högljudda suckarna av förtvivlan under vår senaste användbarhetsstudie varje gång en testämne stötte på en valideringsfelsida.

vi märkte också att försökspersoner som hade utsatts för valideringsfel började vidta förebyggande åtgärder för att undvika dem i efterföljande steg genom att skriva saker som ”N/A” i fältet ”företagsnamn” om du är osäker på om fältet var valfritt.

 felsida för validering av formulärfält på BlueNile.com

på Baymard Institute reflekterade vi över detta problem och fick en uppfattning om att vi bara kallar ”felfält” — vilket är exakt vad den här artikeln handlar om. Innan vi utforskar den här tanken, låt oss titta på tre traditionella typer av valideringstekniker: ”samma sida reload”, ”optimerad samma sida reload” och ” live inline validering.”

Läs mer …

designmönster för webbformulär: Registreringsformulär

om du vill maximera intäkterna för din tjänst måste du maximera slutförandegraden för dina webbformulär. Om du inte har några revolutionerande ideer för att imponera på dina besökare vid första anblicken räcker det inte att bara göra det möjligt för användare att registrera sig på din webbplats. För att göra det möjligt för tjänsten att nå en maximal exponering behöver vi, designers, ge användarna en bra användarupplevelse. Vi måste bjuda in dem, beskriva för dem hur tjänsten fungerar, förklara för dem varför de ska fylla i formuläret och föreslå de fördelar de får i gengäld. Och naturligtvis bör vi också göra det extremt enkelt för dem att delta.

det är dock inte lätt att utforma effektiva webbformulär. Och det har en enkel anledning: ingen gillar att fylla i formulär — varken offline eller online. Därför måste vi som designers ta reda på ljuddesignbeslut för att göra formulärets slutförande enkelt, intuitivt och smärtfritt.

webbformulär designmönster

men hur exakt kan vi räkna ut dessa beslut? Var ska länken till formuläret placeras i layouten? Hur ska vi utforma det? Hur ska vi markera etiketterna och hur ska vi anpassa dem? Hur ser designmönster för webbformulär ut på moderna webbplatser? Det var exakt de frågor vi har ställt oss själva. Och för att få svaren har vi genomfört en undersökning.

nedan presenterar vi resultaten av vår undersökning av aktuella webbformulär designmönster-resultaten av en analys av 100 populära webbplatser där webbformulär (bör) Materia. Vi har beslutat att börja med registreringsformulär först. Vi presenterar den första delen av våra resultat nedan; den andra delen av undersökningsresultaten kommer att publiceras nästa vecka.

Uppdatering: den andra delen av undersökningsresultaten publiceras nu också: webbformulär designmönster: anmälningsformulär del 2.

Läs mer …

designmönster för webbformulär: Anmälningsformulär, del 2

förra veckan har vi presenterat första resultaten av vår webbformulär undersökning. Huvudsyftet med undersökningen var att ge designers och utvecklare en viss intuition om hur effektiva webbformulär är utformade; vi presenterade också några riktlinjer för hur ett effektivt och användarvänligt webbformulär kan uppnås.

skärmdump

vi har fokuserat på registreringsformulär eftersom vi ville överväga ytterligare viktiga formulär (t.ex. kassablanketter) separat. Efteråt har vi gått igenom varje registreringsformulär för de valda platserna och analyserat designmetoderna som implementerats i dessa former. Nedan presenterar vi den andra delen av våra resultat — resultaten av vår undersökning bland webbformer av 100 populära webbplatser där webbformulär (bör) Roll.

Observera att det här inlägget inte handlar om utcheckningsformulär — det är ett ämne för en annan diskussion, vi kan betrakta dem separat i ett av de kommande inläggen. Vi vill tacka Wufoo för att ge oss ett ramverk för att genomföra vår undersökning.

Läs mer …

nya metoder för att utforma inloggningsformulär

för många av oss är inloggning på webbplatser en del av vår dagliga rutin. Faktum är att vi förmodligen gör det så ofta att vi har slutat behöva tänka på hur det görs… det vill säga tills något går fel: vi glömmer vårt lösenord, vårt användarnamn, e-postadressen vi registrerade oss med, hur vi registrerade oss, eller ens om vi någonsin registrerade oss alls.

dessa erfarenheter är inte bara frustrerande för oss, men är dåliga för företag samt. Hur illa? User Interface Engineering ’ s analysis 1 av en stor online-återförsäljare fann att 45% av alla kunder hade flera registreringar i systemet, 160 000 personer begärde sitt lösenord varje dag och 75% av dessa personer slutförde aldrig köpet de började när de begärde sitt lösenord.

Gowalla
inloggningsformuläret på Gowalla.

för att avsluta det ser besökare som inte är inloggade inte en personlig vy av webbplatsens innehåll och rekommendationer, vilket minskar konverteringsfrekvensen och engagemanget. Så, logga in är en stor sak?—?stor nog att vissa webbplatser har börjat utforska nya designlösningar för det gamla problemet.

Läs mer …

innovativa tekniker för att förenkla registreringar och inloggningar

det finns många sätt att utforma registrerings-och inloggningsformulär. De flesta designers är bekanta med de konventionella sätten. Men att förstå och tillämpa några innovativa tekniker kan göra dina formulär enklare och effektivare att fylla i. I den här artikeln vill vi presentera ett par nya förslag som kan vara användbara för din nästa design. Observera att innan du använder dessa tekniker bör du se till att de är vettiga i det sammanhang där du ska använda dem. Vi vill gärna höra om dina fallstudier och användbarhetstester som bekräftar eller avvisar de förslag som föreslås nedan.

läs mer…

CSS – baserade formulär: moderna lösningar

registrerings-och feedbackformulär finns överallt. Varje start försöker locka besökarnas uppmärksamhet, så webbformulär blir allt viktigare för ett företags framgång. I slutändan är exakt dessa webbformulär ansvariga för den första kontakten med potentiella kunder. Låt oss ta en titt, vilka moderna lösningar en webbutvecklare kan använda, utforma hans/hennes nästa css-baserad form. Länkar kontrolleras: mer/08 2008.

Läs mer …

formulär på mobila enheter: moderna lösningar

mobila formulär tenderar att ha betydligt fler begränsningar än sina skrivbordskusiner: skärmarna är mindre; anslutningarna är långsammare; textinmatning är svårare; listan fortsätter. Så att begränsa antalet formulär i dina mobila applikationer och webbplatser är i allmänhet en bra ide. När du vill ha inmatning från användare på mobila enheter tenderar radioknappar, kryssrutor, menyer och listor att fungera mycket bättre än öppna textfält.

men begränsningar föder innovation, och mobila former är inte annorlunda. Begränsningarna för Mobila enheter har tvingat utvecklare och designers att hitta nya sätt att tillåta användare att mata in data snabbare och lättare. Tack vare de moderna lösningarna i den här artikeln kanske mobilutrymmet inte är en plats för att undvika former mycket längre. Istället kan det bli platsen att uppmuntra dem.

Läs mer …

ta bort stötestenar i mobila former

för några veckor sedan blev jag ganska förvånad när jag såg trottoaren snabbt närma sig medan jag var ute på en promenad. När jag låg där bedövad insåg jag snart vad som hade hänt: jag föll. AJ. B-minus. Jag försöker normalt vara så uppmärksam som möjligt, men den här gången fångade en stor spricka i trottoaren min sko och kastade mig helt ur balans.

Mobile stumble

när det gäller att fylla i formulär på en mobiltelefon har jag observerat många användare som stöter på en liknande upplevelse, bara mindre smärtsam i sin fysiska aspekt. Många element i en mobilform påverkar hur smidigt användarna kommer till en tjänst eller produkt som gömmer sig bakom en form av något slag.

det finns flera faktorer som kan anses vara stötestenar under hela resan att fylla i ett formulär. Specifikt på en bärbar enhet kompliceras denna resa av det faktum att vi måste överväga kontextuella parametrar som tid, plats eller begränsade inmatningsalternativ, jämfört med en fast skrivbordsupplevelse. I det här inlägget kommer vi att titta på de vanligaste snubblorna för Mobila enheter. Dessutom kommer jag att diskutera designstrategier för att undvika snubblor och för att underlätta en säker och snabb promenad genom formulär för mobila användare.

Läs mer …

gratis nedladdning: Cheat Sheet för att designa webbformulär

Forms, forms, forms: så ofta förbises i design. I det här inlägget, Vi är glada att släppa Form Design Cheat Sheet, Skapad av Joe Leech och släpptes för Smashing Magazine och dess läsare. Detta crib sheet innehåller en OmniGraffle-Mall, liksom Photoshop (PSD) och PDF-exempel som du kan ladda ner och använda som du vill. Skriv ut arket, klistra fast det på din vägg, skicka det till kunder och hjälp i allmänhet att göra allas formulär lite bättre.

formdesign

designarna av spjälsängen har spenderat år på att designa och testa formulär, och de har bestämt sig för att sammanfatta de vanligaste problemen och problemen som uppstår i sina projekt.

Läs mer …

du kanske är intresserad av följande” bästa ” val också:

  • Webbdesignelement: exempel och bästa praxis
  • Webbdesignnavigering visar
  • användbarhet & användarupplevelse

Lämna ett svar

Din e-postadress kommer inte publiceras.