Mobilformularer: hvordan erstattes rullelister. Hvorfor venstrejusterende feltoverskrifter er dårligt for mobile enheder

eksempler

Råd: For at forhindre, at jQuery Mobile automatisk tilføjer styling interaktive elementer, rolledatabrug = "no" attribut.

Folk, der bruger din mobil app eller hjemmeside, forfølge et specifikt mål. Typisk er det form, der står mellem brugeren og hans mål. Faktisk betragtes formularer som det sidste trin i processen med at nå brugermål. Derfor er det så vigtigt, at brugeren udfylder formularen så hurtigt som muligt og uden forhindringer.

Følg disse syv regler for at oprette enkle, klare formularer:

Regel #1: Formularer skal være kompatible med den måde, brugeren indtaster deres data på

Sørg for, at formularfelter ikke er skjult af grænsefladeelementer (såsom tastaturet). Når brugeren udfylder formularfelterne, flyttes felterne automatisk op.

Regel #2: Minimer antallet af inputfelter og brugerens behov for at skrive

Jo længere og mere kompleks en formular ser ud, jo mindre sandsynligt er det, at brugerne vil udfylde de tomme felter, især på små skærme. Reduktion af antallet af inputfelter vil gøre din formular mindre rodet, især når du beder brugeren om en masse information.

Gør formularen så enkel og kort som muligt

Men at reducere antallet af felter er ikke nok. Du bør også være opmærksom på den indsats, brugeren bruger på at indtaste data. Udskrivning påkrævet høj grad interaktioner; der er stor sandsynlighed for fejl, selv når du indtaster fra et tastatur i fuld størrelse (især på en berøringsskærm).

Prøv derfor at minimere behovet for taste- og brugerfejl.

Smart standardindstillinger

Smarte standarder hjælper brugere med at udfylde alle formularfelter hurtigere og mere præcist. For eksempel kan du forudvælge en brugers bopælsland baseret på deres geolokationsdata.

Automatisk detektering placering vil spare brugeren tid på at søge efter et hotelværelse

Radioknapper til lignende, men gensidigt udelukkende valg

Når brugeren står over for at vælge fra en liste over muligheder, kan du overveje at bruge en vandret liste med tags. Dette giver dig mulighed for mere effektivt at bruge den tilgængelige skærmplads.

Skydere til min/max pris eller budgetinterval

Overvej at bruge skydere til felter, der indeholder priser eller budget. På denne måde kan brugeren flytte skyderen til minimum/maksimum værdi. Skyderen er nem at flytte vandret, og du kan nemt tilpasse denne handling ved hjælp af visuelle signaler. Men husk, at tallene ikke skal skjules, når du interagerer med skyderen (især når du bruger tommelfingrene).

AirBnB-skyder for at vælge pris

Regel nr. 3: Formularoverskrifter skal enten være over selve felterne eller flydende

Overskrifter fortæller brugeren hovedformålet med et felt, og klar tekst er en af ​​de vigtigste måder at gøre en brugergrænseflade mere tilgængelig på.

Hvorfor du aldrig bør bruge tekstoverskrifter i et felt

In-field headers (eller pladsholdere) er tekst, der sidder inde i et formularfelt, der forsvinder, så snart brugeren begynder at indtaste deres data.

Overskrifter inde i feltet
Mens in-box overskrifter ser godt ud fra et æstetisk synspunkt, er denne fordel ofte overvurderet. Den største fejl er at miste kontekst. Når brugeren klikker på feltet, forsvinder inskriptionen. Og derfor kan han ikke bekræfte, at han har skrevet præcis, hvad der skal til.

Teksten inde i feltet er ikke den mest bedste erstatning visuel overskrift

Nogle brugere, der ser, at der allerede er skrevet noget i et felt, kan også tro, at feltet allerede er udfyldt, og at de ikke behøver at indtaste noget andet og kan ignorere udfyldning.

Hvorfor venstrejusterende feltoverskrifter er dårligt for mobile enheder

Det vigtigste at overveje, når du bruger venstrejusterede overskrifter på en mobilenhed, er skærmstørrelsen og billedformatet. Hvis titlen til venstre er modsat feltet, vil du med en lodret skærmorientering have meget lidt plads tilbage til selve feltet. Dette skaber nogle vanskeligheder ved brug, fordi der ikke er nok plads tilbage til at vise, hvad brugeren skriver. Ikke at kunne se den indtastede tekst skaber et problem for brugerne, fordi det forhindrer dem i hurtigt at bemærke en indtastningsfejl, før de indsender formularen.

Det er meget svært at bemærke en fejl, hvis dataene ikke er helt synlige

Topheader eller responsiv header

Formulartitler skal være øverst i formularfelterne, så brugerne kan se, hvad de udfylder og hvordan. Den største fordel ved at placere formularoverskrifter over formularen er, at du kan strække formularen over hele skærmens bredde og gøre den stor nok til dataindtastning (for eksempel med en skriftstørrelse på 16 pixels). Yderligere fordel Det vil være muligt at skrive klare og forståelige overskrifter (ikke begrænset til 1-2 ord).

Den største ulempe ved at placere overskrifter over felterne er, at hele formularen fylder mere lodret, hvilket betyder, at brugeren skal rulle på skærmen. Det er dog ikke et særligt alvorligt problem – i dag er alle vant til at scrolle.

Alternativt kan du bruge responsive headers til at sikre, at brugerne har udfyldt feltet korrekt. Pladsholderteksten vises som standard, men efter at have trykket på feltet og indtastet tekst, flyttes pladsholderteksten til toppen af ​​feltet, som vist nedenfor.

Regel #4: Formularfeltvalidering skal ske i realtid

I en ideel verden ville brugerne udfylde formularen nødvendige oplysninger og vil fuldføre denne opgave. I den virkelige verden laver brugere ofte fejl. Samtidig kan brugerne ikke lide det faktum, at de efter hele processen med at udfylde felterne når frem til "send"-knappen og opdager, at de har lavet en fejl. Det er korrekt at informere brugeren om succes/fejl i feltet umiddelbart efter udfyldning. Valideringsmeddelelsen informerer straks brugeren om, at de indtastede oplysninger er korrekte. Denne tilgang giver brugerne mulighed for at rette fejl hurtigere og uden at skulle vente på, at fejlene vises efter at have klikket på indsend-knappen.

Hvis du forventer konkrete svar på spørgsmål, skal du straks vise, hvad der skal indtastes og i hvilken form.

Strengvalidering kan også være en løsning. I eksemplet nedenfor kan du se godt eksempel, hvordan du kan rette en potentiel fejl.

Regel #5: Vis tastaturlayoutet i henhold til inputdataene

Brugere foretrækker det tilsvarende tastaturlayout i applikationen. Når brugeren f.eks. bliver bedt om at indtaste et kreditkortnummer, skal du kun vise cifferindtastning for at tilskynde brugeren til at indtaste tal i stedet for symboler. Dette vil øge påfyldningshastigheden og reducere mængden mulige fejl input.

Det skal du sørge for denne mulighed implementeret på hele applikationen og ikke på dens enkelte dele.

Regel #6: Giv nyttige oplysninger i sammenhæng

Nogle gange er der behov for at levere relevante og brugbar information for at forenkle processen for brugeren at udfylde formularen. Men sådan ledsagende tekst bør kun bruges, hvor det virkelig er nødvendigt:

• Ved planlægning af datoer sætter brugere pris på kontekst såsom en indbygget kalender til at bestemme ugedagene. Dette reducerer behovet for at afslutte appen for at se kalenderen, hvilket reducerer risikoen for, at brugeren bliver distraheret fra deres primære opgave.

• Folk kan være bekymrede over sikkerheden af ​​deres data, så du skal vise dem, at deres data ikke vil blive delt med tredjeparter.

Som regel for god manerer bør du ikke strække din forklaring til 100 tegn.

Regel #7: Brug et fleksibelt format

Nogle opgaver kræver meget præcis information fra brugeren. Men samtidig kan det være i strid med principperne om god brugervenlighed at kræve, at brugeren skal give oplysninger i en bestemt form. Hvis du beder brugeren om at indtaste digitale oplysninger (såsom et telefonnummer) i en formular, så vær fleksibel og opret skærme, der kan understøtte forskellige formater input og vis information i den mest brugervenlige form for at forhindre fejl.

Brug ikke et fast dataindtastningsformat

Konklusion

Brugeren kan have alle mulige tvivl, når de udfylder formularen, så du bør forsøge at gøre processen så enkel som muligt. Alle de tips, der er beskrevet i denne artikel, kan forbedre formularernes anvendelighed betydeligt.

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, få din mobilapp til at bede om geolokalisering 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 passende udvalgslister

I tilfælde, hvor drop-down lister eller rullemenuer ikke passer godt sammen med formularer på din mobilside, har du to gode muligheder for mobile formularer: Indtastningsfelter til forudsigelig søgning 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. Ved udformning af formularer til mobile platforme, brug enklere inputfelter i stedet for at adskille dem. 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, du ikke bør glemme, er indlæsningshastigheden på din mobilformular. 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.