Jquery mobil formular. Der opstod problemer ved placering af feltnavne til venstre

UX designer fra IBM Zoltan Collin.

Til bogmærker

Zoltan Collin

Dropdown-formularer virker som et oplagt designvalg: de er nemme og billige at oprette, de fylder ikke for meget, de bekræfter automatisk indtastede oplysninger, de understøttes på tværs af alle browsere og platforme, og brugerne er allerede brugt til dem.

Designere bruger oftest drop-down lister uhensigtsmæssigt, men efter direktørens mening Google-produkt Luke Wroblewski, dette mønster bør kun bruges som en sidste udvej.

Lad os se på nogle begrænsninger:

• Dropdown-mulighederne er usynlige, indtil brugeren klikker eller trykker på formularen. Derudover er det ved første øjekast umuligt at forudsige, hvor mange linjer der vil være på listen - to eller halvtreds.
• At vælge en indstilling fra en rulleliste er en proces i flere trin, især på mobile enheder ah: først skal brugeren trykke på formularen og åbne mulighederne, rulle ned og finde den, han skal bruge, vælge den og lukke listen.
• Dropdown-lister gør designere dovne, fordi det er så nemt at tilføje alle mulige muligheder til én liste uden nogen prioritering. På grund af dette ligner dropdown-listen meget en anden skabelon - "hamburger"-menuen.
• At rulle gennem lange lister som at vælge et land er et mareridt. Især på mobile enheder, hvor tastatursøgning normalt ikke er tilgængelig.
• På nogle enheder er feltet til at vise muligheder meget lille, så at stryge kan være et mareridt.

Antal synlige muligheder liste på iOS kan virke ekstremt ubetydelig

Den gode nyhed er, at der er mange alternative dataindtastningselementer, der i mange tilfælde vil fungere bedre end drop-down lister.

Anslå antallet af muligheder

Du bør ikke bruge rullelister til beslutninger, hvor du skal vælge en af ​​to muligheder. Prøv i stedet et afkrydsningsfelt eller alternativknap.

For ikke stor mængde For gensidigt udelukkende muligheder er en form i form af radioknapper eller Segmented Control-knapper egnet. Brugeren vil straks se alle tilgængelige muligheder og behøver ikke at udvide listen.

Eksempel på brug af segmenterede kontrolknapper

Antallet af synlige muligheder afhænger af skærmens bredde og tekstlængde. Du bør dog ikke bruge mere end fem muligheder

Brug en indtastningsformular med en filtreret rulleliste til et stort antal nøjagtige visse muligheder, når brugeren ved præcis, hvad han skal finde.

I stedet for at rulle gennem hele listen, kan brugerne indtaste de første bogstaver og vælge filtrerede indstillinger

For store og forskelligartede lister er det bedre at bruge eksisterende brugerdata for at sikre, at populære svarmuligheder er inkluderet i listen. I dette tilfælde vil 90% af brugerne straks kunne vælge den ønskede mulighed, og de resterende 10% vil klikke på "Andet", som vil blive afklaret i det næste spørgsmål.

Og selvom "Andet" ikke er den mest elegante løsning, kan prioritering forbedre UX for de fleste brugere.

Bedøm din foretrukne inputformular

En af fordelene ved en rulleliste er, at brugerne ikke behøver at skrive så meget. Men hvis du kun skal skrive lidt, og dataene efterspørges ret ofte (f.eks. personlige oplysninger), så er det mere bekvemt at indtaste dem i stedet for at vælge dem fra en liste.

På mobile enheder er den nemmeste måde at indtaste dit fødselsår ved at bruge numerisk tastatur, ikke en rulleliste

Generelt er det numeriske tastatur mest effektiv metode indtaste en numerisk værdi.

​Selv hvis listeværdierne er sorteret i rækkefølge, kan det være lettere for brugerne at indtaste dem i hånden i stedet for at rulle gennem dem.

Hvis det er vigtigt for dig at bekræfte de data, som en person indtaster, skal du bruge en indtastningsformular med en filtreret rulleliste.

Når brugeren f.eks. skal angive en tilstand, skal du filtrere listen tilgængelige muligheder måske kun et bogstav

Dette er især vigtigt, hvis sorteringsrækkefølgen af ​​listeelementerne ikke er helt klar.

For eksempel forstår brugerne ikke efter hvilket princip valutaer er sorteret. Gør det, så de kan søge på både dets navn og forkortelse

Det samme gælder listen over lande.

For heltal - såsom antallet af passagerer eller varer i en vogn - er det bedst at bruge en stepper. Det giver brugerne mulighed for at øge eller mindske værdien med et enkelt klik.

Til brøktal eller variabler placeret på en skala, er det bedst at bruge en skyder.

Søg

I henhold til din anmodning mobilsideformular fundet 2833 resultater

• At udvikle god navigation til en hjemmeside er en af ​​de nøglefaktorer god udvikling projekt og det faktum, at besøgende begynder at udforske webstedet for at tjekke alle kroge og kroge (bogmærker, billeder, tekst osv.) for information. Se og bliv inspireret til dine egne fantastiske projekter.

  Overholdelse: 7

• Når man designer mobile applikationer, står en udvikler over for forskellige faldgruber, der kan ødelægge alle anstrengelser. I denne lektion vi vil beskrive de 6 mest lumske og typiske fejl når du arbejder på versioner til mobile enheder.

  Overholdelse: 7

• I denne lektion vil vi finde ud af, hvordan man opretter en original beskedformular i form af en skrivemaskine. Alle hovedfunktionerne i denne enhed, som er gået ud af brug, vil blive omhyggeligt gendannet med ved hjælp af CSS og jQuery.

  Overholdelse: 7

• Her finder du hele sandheden om webstederne e-handel: Ifølge den seneste forskning på dette område, iflg i det mindste 59,8% potentielle købere nægter at betale for det, de har lagt til deres indkøbskurv (MarketingSherpa 59,8%, SeeWhy 83% og MarketLive 62,14%). Hovedspørgsmål: Hvorfor opgiver kunderne deres indkøb så ofte? Faktum er, at der er nogle grundlæggende fejl, som udviklere af e-handelswebsteder begår meget ofte. Om der er en generelle principper som gør det svært for brugerne at købe vores produkter? Og er der nogen meningsfuld måde at forbedre salgsydelsen for det, vi sælger?

  Overholdelse: 7

• Den bedste nye funktion i HTML5 er muligheden for at tilføje standardtekst til formularfelter. Pladsholderattributten tillader formularfelter at vise specifik tekst, mens de er tomme eller ikke i fokus (når feltet har fokus, ryddes det). Dette er en stilfuld funktion, men den understøttes stadig ikke af alle browsere. I denne vejledning viser jeg dig, hvordan du bruger Modernizr til at bestemme, om den understøttes af en given browser, og hvis ikke, udfyld formularfelter med standardtekst dynamisk ved hjælp af jQuery.

  Overholdelse: 7

• Modulært gitter kan yde betydelig hjælp ved oprettelse af en hjemmeside. Hun giver begge dele visuel struktur for webstedselementer og miljøet for indhold. Det er hun tilfældigvis på en enkel måde skabe en afbalanceret og ensartet hjemmeside.

  Overholdelse: 7

• Når du udvikler en projektgrænseflade, ønsker du altid, at den skal være enkel og forståelig for brugeren. Uanset hvad dit websted tilbyder, skal du finde en balance mellem enkelhed og funktionalitet. Det er meget vigtigt at sikre, at brugeren nemt kan finde og forstå alle funktioner i dit projekt, ideelt set uden at indlæse andre sider.

  Overholdelse: 7

• Forestil dig den følelsesmæssige uro hos en bruger, der skal tilføje blot et par tegn for at indsende en formular med et stort antal manuelt udfyldte felter, og pludselig er alle data tabt. Forfærdeligt. Medmindre der selvfølgelig er en måde at gendanne dataene for at undgå Sisyfos skæbne.

I denne artikel tager vi et kig på nogle af de nye formularforbedringer i HTML5 og analyserer, hvordan de hjælper med at forbedre brugergrænseflade på mobilen. Vi vil især se, hvordan formularer kan udvides med de ekstra inputtyper, som HTML5 tilbyder, og vise, hvad du kan forvente af forskellige mobilbrowsere.

HTML5-inputtyper

HTML5 har en masse nye inputtyper til formularer. Disse typer input giver mulighed for større kontrol og verifikation af inputdata. Nogle af dem er især nyttige til mobile brugere som ofte har svært ved HTML arbejde Input. Fuld liste Inputdatatyperne er angivet nedenfor:

• farve — farvevalg
• dato — valg af dato
• datetime - vælg dato og tid
• e-mail — e-mail-maskevalidering
• nummer - indtast nummer
• range — range skyder
• søg - søgefelt
• tel — telefonmaskevalidering
• tid - timing
• url - URL-validering

Selvfølgelig er denne liste ikke komplet. Dette inkluderer ikke typer, der er accepteret af standarden, men deres essens er endnu ikke klar. Vi vil overveje de mest populære og relevante af ovenstående typer i denne artikel med eksempler.

1. Input type farve

Hvis denne inputtype understøttes, vil brugerens browser kalde den indbyggede farvevælger til klientenhed. Den valgte farve vil blive præsenteret i den tilsvarende hexadecimal værdi RGB.

< input type = "color" / >

Eksempel på arbejde:

Stilen på pop op-vinduet afhænger af din browser. Klik på knappen for at se, hvordan det virker.

Vælg din farve:

Desværre, support af denne type mobile browsere lader meget tilbage at ønske. Af alle de eksisterende kan den korrekte kortlægning kun findes i Opera mobil Og Chrome Android. For alle andre browsere vil et tomt tekstfelt blive vist. Dette er værd at huske på. Alternativt kan du skitsere paletten i JS eller bruge plugins.

2. Indtast dato

Hvis det understøttes af browseren, giver det en praktisk blok til at vælge en dato.

< input type = "date" / >

Eksempel på arbejde:

Valg af dato:

Bemærk, at datoindtastningstypen såvel som dato- og datotids-lokaltypen tilbyder nyttige attributter, værdier som min og maks., der kan sætte grænser og validering af brugerinput. Det vil vi demonstrere nedenfor i teksten.

Type HTML-input Dato understøttes af næsten alle browsere. Undtagelserne er Opera Mini og standard Android-browseren.

3. Indtastningstype datetime og datetime-local

Det her Input type giver brugeren mulighed for at angive dato og klokkeslæt i et praktisk format. Hvis det understøttes, vil det blive vist som en indbygget dato/tids-widget på enheden. Forskellen mellem disse inputtyper er, at den første er bundet til verdenstid, og den anden indeholder ingen tidszoneinformation.

< input type = "datetime-local" / >

Eksempel på arbejde:

Vælg dato og klokkeslæt:

Ikke understøttet i IE Mobile og Opera Mini. På andre populære browsere (mobil) fungerer typen mere eller mindre korrekt, men tilfælde af fejl og fejl er ikke ualmindeligt. Husk også dette, og glem ikke JavaScript fallbacks.

4. Indtast e-mail

Denne type kræver ingen repræsentation. Mange mennesker bruger det allerede, og det understøttes af næsten alle browsere.

< input type = "email" / >

Eksempel på arbejde:

Indtast din e-mailadresse:

Inden afsendelsen kontrollerer browseren rigtigheden af ​​det udfyldte felt og informerer brugeren, hvis inputformatet er ugyldigt. Beregningen er baseret på følgende udtryk (tekst)@(domæne)

5. Indtast typenummer og tlf

Dette er en anden type, der ikke kræver meget diskussion. Men i et mobilt miljø er det meget nyttigt værktøj. Brug det i tilfælde, hvor brugeren præsenteres for et sæt med kun tal. I denne situation vil han blive tilbudt brugervenlig grænseflade numerisk tastatur.

Eksempel på arbejde:

Vælg værdi:

Standardområdet i de fleste browsere er mellem 0 og 100. Det vil sige, at skyderens position længst til venstre er 0, og den fjerneste position er 100. Du kan ændre området ved at bruge min- og max-attributterne. Vi kan også indstille trinværdien gennem attributtrinnet. Så for at angive et interval fra 5 til 50, i trin på 5, ville vi bruge:

< input type = "range" min = "5" max = "50" step = "5" / >

Støtte fra alle populære browsere, undtagen Opera Mini.

7. Formularvalidering

Det er meget praktisk at indstille specielt HTML attribut Input for at kontrollere inputdata. For eksempel vil vi oprette et felt, der skal udfyldes:

Spørg enhver voksen, hvilken ting de ikke kan forlade hjemmet uden, og de vil svare dig: nøgler, pung, mobil. Med væksten af ​​producenter af mobilenheder og udgivelsen af ​​nye og forbedrede modeller er det simpelthen umuligt ikke at bukke under for denne voksende tendens.

Data fra 2014 viser, at alene i USA har 90 % af voksne en mobiltelefon, hvoraf 58 % er smartphone-ejere. 42 % af amerikanerne ejer tablets. I en rapport forudsagde eMarketer, at ved udgangen af ​​2014 vil folk bruge omkring 1,75 milliarder smartphones på verdensplan.

Disse tal bekræfter kun, at mobile enheder i dag er forvandlet fra luksusvarer til vores daglige nødvendighed. Hvis tidligere telefoner kun var et kommunikationsværktøj, er vi nu afhængige af dem, når vi arbejder, slapper af eller shopper.

Optimering af formularer til mobile enheder

Fremkomsten af ​​smartphones gør ikke kun indkøb lettere for forbrugerne. Dette er en velkommen tilføjelse til den allerede voksende online shoppingindustri. Med tiden begyndte ikke kun online, men også offline virksomheder at forstå vigtigheden mobiltelefoner, sammen med andre kampagnekanaler, til at skaffe kunder.

Formularer feedback spiller en stor rolle i online shopping, de er også et kerneelement i den mobile platform. Vi støder normalt på dem, når vi foretager et køb, og siden beder os om at give specifikke oplysninger såsom navn, adresse, telefonnummer og oplysninger om kreditkort. Mange købere synes dog, at det er en kedelig opgave at udfylde formularer, hvilket kan ødelægge deres interesse. Derudover står online-shoppere typisk over for udfordringer såsom mangel på tid eller dårlig internetforbindelse, hvilket kan have en negativ indvirkning på dit mobilsites konverteringsrate.

Nedenstående er 10 måder at fremskynde dine kunders mobiltransaktionsydelse på og også gøre deres online shoppingoplevelse behagelig.

1. Medtag kun det meste vigtige detaljer ind i din form

Hvis du ikke har tålmodighed til at udfylde tonsvis af formularer på en webside, mens du handler online, så har dine kunder det sikkert på samme måde. Der er forskel på at udfylde en Full-On formular og udfylde en simpel formular for at købe noget fra en online butik. I forhold til sidstnævnte kan den første version af formularen være ret irriterende, og du risikerer at miste klienten, når han bliver træt af at udfylde formularen, især hvis han ser, at han skal oplyse tre forskellige telefonnumre.

Gør online mobil shopping bekvemt ved at give dine kunder en enkel, men komplet bestillingsformular. Spørg kun brugere om gyldig vigtig information, såsom fulde navn, adresse E-mail, telefonnummer, forsendelsesoplysninger og kreditkortoplysninger. Du kan også inkludere en rulleliste over stater eller lande, du sender til, eller endnu bedre, har din mobil app anmoder om geolocation fra kunder. På denne måde kan du få deres adresse hurtigt og præcist.

2. Brug højdejustering for etiketter og inputfelter.

Smartphones har et begrænset visningsområde sammenlignet med pc'er, så det er vigtigt, at du designer en form, der maksimerer dette område. En måde at gøre dette på er at bruge lodret justering for dine formularfelter. Du kan se, hvornår det bruges til en form vandret justering, er der en mulighed for, at ikke al information passer på smartphoneskærmen, og en etiket eller et inputfelt kan gå tabt. Sådanne bestillingssedler kan se besværlige ud for købere, hvilket kan mindske deres interesse.

På den anden side, hvis etiketter og inputfelter er placeret lodret, vil det være nemmere for dine kunder med det samme at se de oplysninger, de efterspørger, herunder hvad de skal udfylde. Dette vil hjælpe dem med at være sikre på sikkerheden ved transaktionen. Dette layout forhindrer også kunder i at gå glip af indtastningsfelter eller endnu værre, at udfylde formularen igen.

Plus, det vil minimere det visuelle rod i dine former. Knapperne "Hvad er dette" og "Flere detaljer" kan placeres på mobilversionen af ​​dit websted. Hvis disse knapper skal placeres på en formular, skal du placere dem, så kunderne ikke distraheres fra at foretage et køb.

3. Brug rullemenuer og rullelister

En anden begrænsning forårsaget af det begrænsede visningsområde på en mobilenhed er endeløs scrolling, hvilket vi skal gøre for at se hele siden eller for at udfylde en formular. Selvom scrolling er en almindelig begivenhed, foretrækker smartphonebrugere at have en hurtig måde at købe produkter online.

Brug af rullemenuer og rullelister kan hjælpe dig med at reducere den tid, dine kunder bruger på at udfylde formularer. I stedet for at tvinge køberne til at vælge imellem kæmpe mængde muligheder, kan du gruppere individuelle produkter i kategorier. Pull-down menuer er også nyttige til at linke beskrivelser af dine nøgleprodukter, som du vil have på én side. Bare husk ikke at begynde at beskrive dem, mens menuen udvides.

4. Brug fyldestgørende lister valg

Når rullelister eller rullemenuer ikke passer til dine mobilwebsteders formularer, har du to gode muligheder for mobile formularer: forudsigelige søgeindtastningsfelter og private rullelister.

Indtastningsfelter til forudsigelig søgning giver dine kunder mulighed for at søge efter det produkt eller den tjeneste, de har brug for søgeord, og viser også en liste over alle lignende resultater. Denne form for formular er ideel i tilfælde, hvor søgningen forventes at tage lang tid, eller når der er en række produkter, der ikke falder ind under separate kategorier. Lukkede rullelister fungerer på den anden side godt for lister over specifikke menupunkter arrangeret i en bestemt rækkefølge, såsom alfabetisk eller kronologisk rækkefølge.

5. Nem indtastning af data

Du er sikkert stødt på inputfelter på formularer på både web- og mobilsites. Nogle gange er de opdelt i 2-3 dele, såsom navn, adresse, telefonnummer. Og selvom dette virker på websteder, på deres mobile versioner Denne brug af formularer er ikke altid hensigtsmæssig.

Oftest kræver opdeling af inputdata mobile shoppere, udfyld alle tre (eller to) inputfelter for blot at svare på én etiket. Hvis du vil overdrive det i samme form, kan dine kunder miste interessen for processen. Derudover kan adskillelsen af ​​inputdata blive opfattet tvetydigt af klienter eller endda forvirre dem. Når du designer formularer til mobile platforme, skal du bruge enklere inputfelter i stedet for at dele dem op. For eksempel, i stedet for at have to separate felter til for- og efternavn, skal du bruge et. Dette vil hjælpe dine kunder med at udfylde formularen hurtigere.

6. Formater dine formularknapper

"Bekræft"-knappen er sidste skridt i nethandel, samt de fleste vigtig knap i form af. Hvis ja, så bør du arrangere det på en sådan måde, at dine kunder forbliver involveret i processen med at udfylde formularen.

Gør knappen "Bekræft" attraktiv ved at indstille dens bredde til 1/3 af din formular eller ved at male den i en lys farve. Og i stedet for blot at bruge ordene "Bekræft" eller "Send", skal du bruge mere veltalende opfordringer til handling, såsom "Tilmeld dig nu" eller "Send din ansøgning".

Undgå dog at bruge for lyse farver eller lave knapper, der bevæger sig for meget, da det vil distrahere dine kunder fra at klikke. Du kan bruge subtile farveændringer eller at svæve, når der trykkes på en knap, så dine kunder ved, at de er færdige med transaktionen.

7. Indstil zoom ved hjælp af viewport-metatagget

At browse på en mobilenhed kan enten passe kunderne, eller de skal muligvis blive ved med at zoome ind på siden, men hvis de gør dette ved et uheld, kan de fare vild på siden. Du vil være i stand til at styre dette ved hjælp af viewport-metatagget i dine formularer. Dette vil give dine kunder mulighed for at undgå at skalere siden ved et uheld, eller endnu værre, helt at miste formularen af ​​syne.

8. Giv mulighed for at gemme data

Shopping ved hjælp af mobiltelefoner kan være udfordrende opgave for nogle kunder, fordi der er risiko for at klikke på "Tilbage"-knappen eller ved et uheld genindlæse siden, og hvis alle de udfyldte oplysninger forsvinder, så vil din køber højst sandsynligt afvise transaktionen. Du kan undgå denne mulighed ved at give dine kunder muligheden "Åbn i ny fane", når de klikker på et link uden for formularen.

Derudover i tilfælde, hvor brugerne ikke længere kan vende tilbage til tidligere sider, lav et vindue med en advarsel og knapper som "Agree", "OK" eller "Cancel". Ved at gøre dette kan du advare dine kunder om, hvorvidt deres data er blevet gemt på siden eller i browseren, og dermed hjælpe dem med at beslutte at gå videre til kassen.

9. Hjælp kunder med at spore deres fremskridt

Ikke alle købere er interesserede i at udfylde feedbackformularer. I dette tilfælde vil det være nyttigt for dig at finde på en måde at vise kunderne, at de næsten er ved at udfylde den. Du kan gøre dette ved at placere en indlæsningsbjælke øverst i formularen, eller ved at bruge en simpel tidslinje og procenter til at vise, hvilket trin de er på. Husk at begrænse antallet af disse trin for at spare dine kunders tid.

10. Få formularen til at indlæse hurtigt

En anden faktor, som du ikke bør glemme, er indlæsningshastigheden på din mobil formular. Hvis siden tager et stykke tid at indlæse, kan din kunde være ude af krogen. Netop det faktum, at dine brugere er nået til det punkt, hvor de skal udfylde formularen, viser, at de er klar til at afgive en ordre. Lad være med at skuffe dem med dårligt indlæsning af sider. Indlæsningshastigheden af ​​dine formularer afhænger også af antallet af elementer, du lægger på siden, så vær forsigtig, når du bruger store billeder.

Og som altid, test dine formularer på alle systemer og enheder

I dag kræver de mange forskellige mobile enheder og deres grænseflader, at vi designer formularer til hver af dem. Så sørg for at teste dine formularer imod forskellige typer mobile enheder, under hensyntagen til forskellene operativsystemer, størrelser og browsere. Med test kan du ikke kun forbedre din form, men også sikre dig, at den fungerer på alle tilgængelige enheder.