Kontaktformularer er en nøglekomponent på mange websteder. Mens de generelt er ligetil, skal du sørge for, at de er lette at bruge, hvis du vil samle kundeemner og holde kontakten med dine brugere. Dette er normalt ikke et problem med kontortrafik, men det kan være svært at bruge formularer, hvis du bruger en mobilenhed.
I denne vejledning skal vi tale lidt om vigtigheden af at designe mobilvenlige formularer. Dernæst gennemgår vi fem tip for at sikre, at dine formularer fungerer problemfrit på mobile enheder.
Lad os komme på arbejde!
Hvorfor er det vigtigt, at dine skemaer er mobilvenlige
Formularer findes i alle former og størrelser. Ofte vil du beskæftige dig med kontaktformularer:
Tilmeldingsformularer (abonnement) er også meget populære, fordi de giver dig mulighed for at indsamle e-mails og målrette dem under kampagner:
Formularer kan dog bruges til alle slags andre formål. For eksempel kan du indsamle oplysninger ved hjælp af en online undersøgelse eller spørgeskema , i hvilket tilfælde du har brug for formularer, der giver brugerne mulighed for at indtaste svar.
Med andre ord er formularer meget alsidige, og næsten alle websteder bruger formularer på en eller anden måde. Derfor er det vigtigt, at dine formularer er nemme at bruge (medmindre du vil give dine besøgende en frustrerende oplevelse).
Brug af formularer fra en stationær eller bærbar computer er normalt meget let. Du har en fuld mus og et tastatur, så det skal ikke være et problem at vælge det felt, du vil bruge og indtaste data. Men at surfe på nettet fra din smartphone eller anden kompakt enhed har komplikationer.
Når du arbejder med fingrene på en lille skærm, kan interaktion med formularer nogle gange være overvældende på grund af dårlige designbeslutninger. Dette er noget, du bør undgå i dine egne designs. Når alt kommer til alt, hvis mobilbrugere ikke kan interagere med dine formularer, kan du miste konverteringer, kundeemner eller bare irritere besøgende.
Det er også vigtigt at forstå, at mobiltrafik nu, hvis ikke mere, er vigtig end desktop-kilder. Faktisk har mobiltrafik allerede overhalet sidstnævnte i de senere år. Det betyder, at design af et mobilvenligt websted skal være dit hovedmål, når du starter et nyt projekt.
5-tips til udformning af nemme at bruge mobile formularer
Heldigvis er det ikke så svært at designe mobilvenlige formularer som du måske forestiller dig. I de fleste tilfælde skal du bare huske nogle grundlæggende i tankerne og teste dine formularer grundigt, før du tager dem i brug. Lad os tale om, hvordan man gør det!
1. Slet alle unødvendige sektioner
Jo flere felter din formular indeholder, jo sværere bliver det at bruge på mobil. Faktisk er brugen af formularer på mobil simpelthen mere kompliceret. Ved at reducere antallet af felter eller sektioner, der er inkluderet i dine formularer, kan du maksimere dine chancer for, at besøgende udfylder dem.
Her er et hurtigt eksempel på en Kontaktformular med nogle ekstra felter, der ikke er nødvendige på mobil:
I de fleste tilfælde er alt hvad du behøver for en fantastisk Kontaktformular er et navn, e-mail og brødteksten i den besked, du ønsker at modtage. Alt andet afhænger af den type hjemmeside, du bruger, og om du forsøger at indsamle kundeemner.
I sidste ende, jo færre felter formularen har, jo lettere bliver det for mobile besøgende at bruge dem. Når alt kommer til alt kan det være vanskeligt at vælge et felt ved hjælp af en berøringsskærm, uanset hvor godt designet, for at minimere antallet af humle, som brugerne skal lave.
Dit mål på dette tidspunkt er at gennemgå eksisterende formularer på dit websted. Gå gennem hver af deres sektioner, og find ud af, om du virkelig har brug for yderligere felter end de tidligere nævnte. Hvis der er et unødvendigt felt, skal du bare slette det.
2. Brug rullelister, hvis det er muligt
De fleste af os er komfortable med at skrive på mobile enheder og bruge berøringsskærme. Men sms'er en ven og udfylder en Kontaktformular er to vidt forskellige oplevelser. Med disse er der en god chance for, at du bliver frustreret, hvis du skal indtaste en masse information.
En måde at gøre livet lettere for din mobile besøgende er at forenkle de valg, de skal træffe om elementerne på dit websted. For at give dig en idé om, hvad vi taler om, lad os drage fordel af vores tidligere eksempel på booking restaurant:
At lave en booking, skal du sandsynligvis efterlade et navn, e-mail, telefon et angive et tidspunkt, samt antal tilstedeværende. Der er to måder, hvorpå du kan oprette et formularfelt til at validere et tidspunkt på dagen. booking:
- Konfigurer et felt, der kun accepterer numeriske poster.
- Design en rulleliste inklusive alle tilgængelige tidspunkter for en reservation.
Som du kan forestille dig, er sidstnævnte mere brugervenlig for mobilbrugere. Med denne tilgang behøver de ikke at indtaste tal, og de kan bare vælge, hvad der fungerer bedst for dem, fra de muligheder, du inkluderer.
Ideen for dig at se på dine formularer og se, om de indeholder felter, som du kan erstatte med rullemenuer. Dette vil ikke altid være tilfældet, da du ikke kan bruge rullemenuer til at indsamle navne eller e-mails, men andre muligheder kan bruges.
Uanset brugen af dem vil du sikre dig, at dine rullemenuer indeholder muligheder, der er lette at vælge fra mobile enheder. Med andre ord gør menuen stor nok til, at nogen ikke behøver at hakke for at vælge den rigtige mulighed.
3. Sørg for, at dine indsendelsesknapper er nemme at røre ved
Dette tip er ret simpelt, men skal stadig nævnes. Hver form, du designer, skal indeholde en måde, hvorpå brugere kan bekræfte, at de vil indsende de indtastede data. I de fleste tilfælde betyder det at oprette en sendeknap:
Når du bruger en almindelig computer, er det den mest naturlige ting i verden at klikke på en send-knap. Vi er dog stødt på et par former på mobil, hvor det er meget sværere at trykke på en knap.
Hvis dine besøgende ikke kan indsende de oplysninger, de indtastede i dine formularer, spildes al din indsats. Derudover ser intet så uprofessionelt ud som en knap sende det fungerer ikke som forventet.
At designe bedre indsendelsesknapper til mobil, her er tre tips til at overveje:
- Sørg for, at de er store nok til, at du nemt kan trykke på en mobilenhed.
- Placer ikke dine knapper for tæt på andre elementer, så brugerne ikke rører dem ordentligt.
- Fremhæv dine knapper, for eksempel ved hjælp af kontrasterende farver eller kreativ typografi.
Oven i alt dette vil du også gerne teste dine knapper, før dit websted bliver live. Vi går nærmere ind på, hvordan man gør dette på et minut. Lad os lige nu tale om ydeevne.
4. Sørg for, at dine formularer indlæses hurtigt
Vi taler meget om webstedsydelse i mange af vores artikler, og det er ikke fordi vi har brug for hastighed. Pointen er, at de fleste ikke kan lide langsomme websteder, hvilket giver perfekt mening.
Med hastigheden på Internettet hurtigere kan det være svært at vente på, at et websted indlæses for længe. Derudover har mobil internethastigheder tendens til at variere meget mere end almindelige hjemmeforbindelser. Dette betyder, at dit websted skal være meget optimeret til mobile enheder, hvis du vil holde disse brugere glade, da ikke alle af dem har internetadgang (dvs. hurtig).
Dette særlige tip kan gælde for hele dit websted, men det er også vigtigt for mobilsider, der viser dine formularer. Hvis det tager for lang tid at indlæse disse dele af dit websted, du miste konvertering og muligheder for at oprette forbindelse til dine besøgende.
Generelt skal et websted ikke tage mere end to sekunder at indlæse. Når du først er kommet over denne grænse, har afvisningsfrekvensen en tendens til at stige dramatisk, hvilket er forfærdeligt nyt for dig, og i betragtning af arten af mobil browsing er det bedst at holde denne tid så lav som muligt. .
Med dette i tankerne er der mange måder at forbedre dit websteds overordnede ydeevne på. For eksempel kan du opgradere til en bedre planovernatning, brug responsivt tema optimeret til hastighed og komprimere dine billeder. Selvfølgelig vil disse hjælpe alle brugere, men vil være særligt nyttige for dem, der bruger mindre enheder.
5. Test dine formularer inden du publicerer
I betragtning af at formularer er en vigtig del af de fleste websteder, er det fornuftigt, at du tester dem grundigt, inden du offentliggør dem. Med WordPress er denne proces ret ligetil. Du kan fortsætte med at designe specifikke sider for at vise dine formularer og ikke offentliggøre dem, før du har testet dem fuldt ud.
Uanset hvilket plugin eller tema du vil bruge, er det selvfølgelig op til dig (så længe det kan hjælpe med at udvikle mobilwebsteder). Men når det kommer til testfasen, anbefaler vi, at du holder det simpelt og bruger værktøjer som f.eks OUTILS af udvikling Chrome at udføre arbejdet.
Lad os gennemgå et hurtigt eksempel. Hvis du bruger Chrome, skal du fortsætte med at få vist siden med den formular, du vil teste. Højreklik derefter et vilkårligt sted på denne side, og vælg indstillingen inspicere . Chrome viser et sæt værktøjer, du kan bruge til at gennemgå og redigere sidens kildekode til højre og til venstre, du kan se en forhåndsvisning af dens udseende fra en mobilenhed:
Øverst på skærmen kan du bruge en menu til at skifte mellem forskellige opløsninger. Chrome indeholder indstillinger for flere populære mobile enheder, men du kan også indtaste en brugerdefineret opløsning.
På dette tidspunkt skal du kontrollere udseendet og opførslen af din kontaktformular på flere enheder. Lad os tage eksemplet nedenfor - formularen fungerer fint, men du kan se, at den ikke passer så godt som den burde. Vær især opmærksom på især tekst og ikoner, som er for tæt på skærmkanten:
En måde at forhindre dette problem på er at holde dine formularer enkle, som vi nævnte i det første tip. I eksemplet nedenfor bruger formularen flere rullelister og kræver kun tre felter. Dette gør det let at bruge, og vigtigere, formularen er så enkel, at den skal passe perfekt til alle enheder:
Hvis du har problemer med nogen af dine formularer, skal du naturligvis løse dem med det samme. Ellers risikerer du at fremmedgøre dit mobile publikum, hvilket vi først prøver at undgå!
Konklusion
At sikre, at dit websted er kompatibelt med mobile enheder, er nøglen til at holde trafik og ikke frustrere dine besøgende. Specifikt skal dine formularer være nemme at bruge på mobile enheder, hvis du ikke vil gå glip af at modtage beskeder eller indsamle værdifulde kundeemner.
Når det kommer til at designe mobilvenlige former, er der fem tips til at forenkle dit liv:
- Slet alle unødvendige sektioner.
- Brug rullelister, hvis det er muligt.
- Sørg for, at dine indsendelsesknapper er let at trykke på.
- Sørg for, at dine formularer indlæses hurtigt.
- Test dine formularer, før du offentliggør dem.
