Kontaktformularer er en nøkkelkomponent på mange nettsteder. Selv om de generelt er enkle, må du sørge for at de er enkle å bruke hvis du vil samle potensielle kunder og holde kontakten med brukerne dine. Dette er vanligvis ikke et problem med kontortrafikk, men bruk av skjemaer kan være vanskelig hvis du bruker en mobil enhet.
I denne opplæringen skal vi snakke litt om viktigheten av å designe mobilvennlige skjemaer. Deretter går vi gjennom fem tips for å sikre at skjemaene dine fungerer greit på mobile enheter.
La oss komme på jobb!
Hvorfor det er viktig at skjemaene dine er mobilvennlige
Skjemaer kommer i alle former og størrelser. Ofte vil du håndtere kontaktskjemaer:
Registreringsskjemaer (abonnement) er også veldig populære fordi de lar deg samle e-post og målrette dem under kampanjer:
Imidlertid kan skjemaer brukes til alle slags andre formål. For eksempel kan du samle informasjon ved hjelp av en online spørreundersøkelse eller spørreskjema , i så fall trenger du skjemaer som lar brukerne skrive inn svar.
Med andre ord, skjemaer er veldig allsidige, og nesten alle nettsteder bruker skjemaer på en eller annen måte. Derfor er det viktig at skjemaene dine er enkle å bruke (med mindre du vil gi en frustrerende opplevelse for de besøkende).
Å bruke skjemaer fra en stasjonær eller bærbar datamaskin er vanligvis veldig enkelt. Du har full mus og tastatur, så det å velge feltet du vil bruke og skrive inn data, bør ikke være et problem. Det er imidlertid komplikasjoner å surfe på nettet fra smarttelefonen eller andre kompakte enheter.
Når du jobber med fingrene på en liten skjerm, kan samhandling med skjemaer noen ganger være overveldende på grunn av dårlige designbeslutninger. Dette er noe du bør unngå i dine egne design. Tross alt, hvis mobilbrukere ikke kan samhandle med skjemaene dine, kan du miste konverteringer, potensielle kunder eller bare irritere besøkende.
Det er også viktig å forstå at mobiltrafikk nå, om ikke mer, er viktig enn stasjonære kilder. Faktisk har mobiltrafikken allerede gått forbi sistnevnte de siste årene. Dette betyr at utforming av et mobilvennlig nettsted skal være ditt hovedmål når du starter et nytt prosjekt.
5 tips for å designe enkle å bruke mobile skjemaer
Heldigvis er det ikke så vanskelig å utforme mobilvennlige skjemaer som du kan forestille deg. I de fleste tilfeller trenger du bare å huske på noen grunnleggende ting og teste skjemaene dine grundig før du tar dem i bruk. La oss snakke om hvordan du gjør det!
1. Slett alle unødvendige seksjoner
Jo flere felt skjemaet inneholder, desto vanskeligere blir det å bruke på mobil. Faktisk er bruk av skjemaer på mobil rett og slett mer komplisert. Ved å redusere antall felt eller seksjoner som er inkludert i skjemaene dine, kan du maksimere sjansene for at besøkende skal fylle ut dem.
Her er et raskt eksempel på en Kontaktskjema med noen tilleggsfelt som ikke er nødvendige på mobil:
I de fleste tilfeller er alt du trenger for en flott Kontaktskjema er et navn, e-post og brødteksten i meldingen du ønsker å motta. Alt annet avhenger av hvilken type nettside du bruker og om du prøver å samle potensielle kunder.
Til syvende og sist, jo færre felt skjemaet har, jo lettere blir det for mobile besøkende å bruke dem. Når alt kommer til alt, kan det være vanskelig å velge et felt med en berøringsskjerm, uansett hvor godt designet, for å minimere antall humle brukere må lage.
Målet ditt på dette tidspunktet er å gjennomgå eksisterende skjemaer på nettstedet ditt. Gå gjennom hver av seksjonene og avgjør om du virkelig trenger andre felt enn de som er nevnt tidligere. Hvis det er overflødig felt, er det bare å slette det.
2. Bruk rullegardinlister om mulig
De fleste av oss er komfortable med å skrive på mobile enheter og bruke berøringsskjermer. Men å sende tekstmeldinger til en venn og fylle ut en Kontaktskjema er to vidt forskjellige opplevelser. Med disse er det en god sjanse for at du blir frustrert hvis du må skrive inn mye informasjon.
En måte å gjøre livet enklere for mobilbesøkende er å forenkle valgene de må ta om elementene på nettstedet ditt. For å gi deg en ide om hva vi snakker om, la oss dra nytte av vårt tidligere eksempel på booking restaurant:
Å lage en booking, må du sannsynligvis legge igjen et navn, e-post, telefon et angi tid, samt antall personer tilstede. Det er to måter du kan opprette et skjemafelt for å validere et tidspunkt på dagen. booking:
- Konfigurer et felt som bare godtar numeriske oppføringer.
- Utform en rullegardinliste som inkluderer alle tilgjengelige tidspunkter for en reservasjon.
Som du kan forestille deg, er sistnevnte mer brukervennlig for mobilbrukere. Med denne tilnærmingen trenger de ikke å skrive inn tall, og de kan bare velge hva som fungerer best for dem blant alternativene du inkluderer.
Ideen for deg å se på skjemaene dine og se om de inkluderer felt som du kan erstatte med rullegardinmenyer. Dette vil ikke alltid være tilfelle siden du ikke kan bruke rullegardinmenyer til å samle inn navn eller e-post, men andre alternativer kan brukes.
Uansett bruksområde, vil du sørge for at rullegardinmenyene inneholder alternativer som er enkle å velge fra mobile enheter. Med andre ord, gjør menyen stor nok til at noen ikke trenger å hakke for å velge riktig alternativ.
3. Forsikre deg om at innsendingsknappene er enkle å berøre
Dette tipset er ganske enkelt, men fortsatt å nevnes. Hvert skjema du designer, bør inneholde en måte for brukere å bekrefte at de vil sende inn de oppgitte dataene. I de fleste tilfeller betyr det at du oppretter en sendeknapp:
Når du bruker en vanlig datamaskin, er det mest naturlige i verden å klikke på send-knapp. Vi har imidlertid kommet over noen skjemaer på mobil hvor det er mye vanskeligere å trykke på en knapp.
Hvis de besøkende ikke kan sende inn informasjonen de skrev inn i skjemaene dine, vil hele din innsats bli bortkastet. I tillegg ser ingenting så uprofesjonelt ut som en knapp sende som ikke fungerer som forventet.
For å designe bedre innsendingsknapper for mobil, er det tre tips å vurdere:
- Forsikre deg om at de er store nok til at du enkelt kan trykke på en mobil enhet.
- Ikke plasser knappene dine for nær andre elementer, slik at brukerne ikke berører dem ordentlig.
- Fremhev knappene dine, for eksempel ved å bruke kontrasterende farger eller kreativ typografi.
På toppen av alt dette, vil du også teste knappene dine før nettstedet ditt blir live. Vi vil gå nærmere inn på hvordan du gjør dette på et øyeblikk. For nå, la oss snakke om ytelse.
4. Pass på at skjemaene lastes raskt
Vi snakker mye om nettstedets ytelse i mange av artiklene våre, og det er ikke fordi vi trenger hastighet. Poenget er at de fleste ikke liker langsomme nettsteder, noe som gir perfekt mening.
Med hastigheten på Internett raskere, kan det være vanskelig å vente på at et nettsted skal lastes inn for lenge. I tillegg har hastigheter på mobil internett en tendens til å variere mye mer enn vanlige hjemmeforbindelser. Dette betyr at nettstedet ditt må være svært optimalisert for mobile enheter hvis du vil holde disse brukerne fornøyde, da ikke alle av dem vil ha internettilgang (dvs. rask).
Dette bestemte tipset kan gjelde for hele nettstedet ditt, men det er også viktig for mobilsider som viser skjemaene dine. Hvis det tar for lang tid å laste inn disse delene av nettstedet ditt, du miste konvertering og muligheter for å få kontakt med de besøkende.
Generelt bør det ikke ta mer enn to sekunder å laste inn et nettsted. Når du har kommet forbi denne grensen, øker avvisningsfrekvensen dramatisk, noe som er forferdelige nyheter for deg, og gitt arten av surfing på mobilen, er det best å holde denne tiden så lav som mulig. .
Med dette i tankene er det mange måter å forbedre den generelle ytelsen til nettstedet ditt på. Du kan for eksempel oppgradere til en bedre planovernatting, bruk responsivt tema optimalisert for hastighet og komprimere bildene dine. Selvfølgelig vil disse hjelpe alle brukere, men vil være spesielt nyttige for de som bruker mindre enheter.
5. Test skjemaene dine før du publiserer
Med tanke på at skjemaer er en viktig del av de fleste nettsteder, er det fornuftig at du tester dem grundig før du publiserer dem. Med WordPress er denne prosessen ganske grei. Du kan fortsette og designe spesifikke sider for å vise skjemaene dine, og ikke publisere dem før du har testet dem fullstendig.
Uansett hvilket plugin eller tema du vil bruke, er det opp til deg (så lenge det kan bidra til å utvikle mobilnettsteder). Men når det gjelder testfasen, anbefaler vi at du holder det enkelt og bruker verktøy som f.eks outils av utvikling Chrome å gjøre jobben.
La oss gå gjennom et raskt eksempel. Hvis du bruker Chrome, kan du forhåndsvise siden med skjemaet du vil teste. Høyreklikk deretter hvor som helst på denne siden og velg alternativet inspisere . Chrome viser et sett med verktøy som du kan bruke til å gjennomgå og redigere sidens kildekode til høyre og til venstre, du kan se en forhåndsvisning av utseendet fra en mobilenhet:
Øverst på skjermen kan du bruke en meny til å veksle mellom forskjellige oppløsninger. Chrome inkluderer innstillinger for flere populære mobile enheter, men du kan også angi en tilpasset oppløsning.
På dette tidspunktet bør du sjekke utseendet og oppførselen til kontaktskjemaet ditt på flere enheter. Ta eksemplet nedenfor - skjemaet fungerer bra, men du kan se at det ikke passer så bra som det burde. Vær spesielt oppmerksom på tekst og ikoner, som er for nær kanten av skjermen:
En måte å forhindre dette problemet på er å holde skjemaene enkle, som vi nevnte i det første tipset. I eksemplet nedenfor bruker skjemaet flere rullegardinlister og krever bare tre felt. Dette gjør det enkelt å bruke, og enda viktigere, skjemaet er så enkelt at det må passe perfekt for alle enheter:
Hvis du har problemer med noen av skjemaene dine, må du åpenbart løse dem umiddelbart. Ellers risikerer du å fremmedgjøre mobilpublikummet ditt, noe vi prøver å unngå først!
konklusjonen
Å sørge for at nettstedet ditt er kompatibelt med mobile enheter, er nøkkelen til å holde trafikk og ikke frustrere de besøkende. Spesielt bør skjemaene dine være enkle å bruke på mobile enheter hvis du ikke vil gå glipp av å motta meldinger eller samle inn verdifulle potensielle kunder.
Når det gjelder å designe mobilvennlige skjemaer, er det fem tips for å forenkle livet ditt:
- Slett alle unødvendige seksjoner.
- Bruk rullegardinlister om mulig.
- Forsikre deg om at innsendingsknappene er enkle å trykke på.
- Pass på at skjemaene lastes raskt.
- Test skjemaene dine før du publiserer dem.
