Responsieve Forms maken met Universal Editor
Het moderne weblandschap vereist formulieren die naadloos werken in een steeds groter wordend spectrum van apparaten en schermgrootten. Van grote desktopmonitoren tot compacte smartphoneschermen verwachten gebruikers consistente, intuïtieve ervaringen, ongeacht het gekozen apparaat. Het maken van responsieve formulieren is niet meer optioneel. Het is een fundamentele vereiste voor het aanbieden van professionele, toegankelijke en voor conversie geoptimaliseerde digitale ervaringen.
De Universal Editor biedt uitgebreide gereedschappen en methoden voor het ontwikkelen van responsieve formulieren die zich op intelligente wijze aanpassen aan verschillende schermafmetingen, invoermethoden en gebruikerscontexten. In deze handleiding worden de technische funderingen, implementatiestrategieën en optimalisatietechnieken besproken die nodig zijn om formulieren te maken die uitzonderlijk op alle apparaten kunnen worden toegepast, terwijl bruikbaarheid, toegankelijkheid en visuele aantrekkingskracht behouden blijven.
Bij het maken van responsieve formulieren zijn twee hoofdactiviteiten betrokken:
- Responsief het Testen: Voorproef en test uw vormen over diverse het schermgrootte gebruikend apparatenmededingers.
- Responsief Ontwerp: selecteer en voer lay-outpatronen uit die naadloos aan verschillende apparaten aanpassen.
In deze gids, zult u leren hoe te:
- Formulieren testen op computers, tablets en mobiele apparaten
- Selecteer de juiste layoutpatronen voor uw inhoud
- Aanbevolen werkwijzen voor responsief ontwerp toepassen
- Algemene problemen met formulieren oplossen
- Formulieren optimaliseren voor mobiele prestaties
Waarom responsieve Forms belangrijk is
Gevolgen van de Ervaring van de Gebruiker:
- Meer dan 60% van de gebruikers heeft toegang tot formulieren op mobiele apparaten
- Slechte mobiele ervaringen leiden tot een 67% hogere wachttijd
- Met responsieve formulieren kunt u de voltooiingstarieven met maximaal 25% verhogen
BedrijfsVoordelen:
- Hogere voltooiingssnelheden voor formulieren
- Verbeterde gebruikerstevredenheid
- Verbeterde toegankelijkheidscompatibiliteit
- Lagere ontwikkelings- en onderhoudskosten
Deel 1: Forms testen op apparaten
Door uw formulieren op verschillende apparaten te testen, kunt u problemen die op een probleem reageren, opsporen en oplossen voordat gebruikers deze tegenkomen. De Universal Editor biedt een emulatormodus om verschillende schermgrootten en -oriëntaties te simuleren.
Je Forms testen
Stap 1: Open de Mededinger van het Apparaat
- Open het formulier in de Universal Editor.
- Klik het
- Het menu van de apparaatkiezer wordt weergegeven.
Stap 2: Selecteer een Apparaat voor het Testen
- Desktop (1200px+ breedte): Standaard het uitgeven mening
- Tablet (768px-1199px breedte): het schermtesten van Medium
- Mobiel (320px-767px breedte): Kleine het schermtesten
- Douane: Specificeer nauwkeurige afmetingen voor specifieke apparaten
Stap 3: De Oriëntaties van het Apparaat van de test
Gebruik het pictogram van de Rotator van het 1} Scherm om allebei te testen:
- Staand wijze: Standaard mobiele richtlijn
- Liggende wijze: Geroteerde tablet of telefoonmening
Resultaten van testen van apparaten
Elk apparaattype onthult unieke responsieve gedragingen:
Visuele voorbeelden door Apparaat
Mening van de Desktop (1200px+):
volledig-breedtelay-out met zij aan zij vormgebieden.
Mening van de Tablet (768px-1199px):
Medium-breedte lay-out met aangepaste component uit elkaar plaatsen.
Mobiele Mening (320px-767px):
enig-kolomlay-out met gestapelde componenten.
Mening van het Apparaat van de Douane:
Gebruiker-gespecificeerde afmetingen voor het gerichte testen.
Testworkflow
voor Nieuwe Forms:
- bouwt in Desktopmening: Begin met volledige functionaliteit.
- Test op tablet: controleer aanpassingen voor middelgrote schermen.
- Valideer op mobiel: verzeker bruikbaarheid op kleine schermen.
- bevestig ontvankelijke kwesties: pas lay-outs aan zoals nodig.
- herstelt alle apparaten: bevestig moeilijke situaties over alle grootte.
voor Bestaande Forms:
- Snelle mobiele controle: Werkt de vorm aan telefoons?
- identificeer probleemgebieden: de lay-out en bruikbaarheidskwesties van de nota.
- Systematisch testen: test grondig elke apparatengrootte.
- de kwesties van het Document: spoor wat moet worden bevestigd.
- voert moeilijke situaties uit: methodisch de kwesties van het Adres.
Deel 2: Responsieve layoutpatronen selecteren
Lay-outpatronen bepalen hoe de formulierinhoud wordt aangepast aan verschillende schermgrootten. Het juiste patroon verbetert zowel de gebruikerservaring als de mobiele prestaties.
Overzicht van het layoutpatroon
Handleiding voor snelle besluitvorming
Lay-out van het Comité van het Gebruik wanneer:
- Uw inhoud is verdeeld in verschillende categorieën
- Gebruikers moeten meerdere secties tegelijk weergeven
- De inhoud is relatief eenvoudig
Lay-out van de Tovenaar van het Gebruik wanneer:
- Het formulier bevat meerdere logische stappen
- U wilt cognitieve belasting verminderen
- Mobiele gebruikers zijn een primair publiek
Lay-out van de Accordeon van het Gebruik wanneer:
- Het formulier bevat optionele of secundaire inhoud
- Ruimtebehoud is belangrijk
- Inhoud kan logisch worden gegroepeerd
Layout deelvenster
In de deelvensterindeling wordt gerelateerde inhoud gerangschikt in visueel verschillende secties, zodat gebruikers meerdere secties tegelijk kunnen bekijken. Deze indeling is ideaal voor formulieren met gecategoriseerde informatie die baat heeft bij een presentatie naast elkaar op grotere schermen.
Responsief Gedrag
- Desktop (1200px en hierboven): de panelen worden getoond zij aan zij of in een net voor maximumzicht.
- tablet (768px-1199px): stapel van Panelen verticaal met aangewezen spatiëring om duidelijkheid te handhaven.
- Mobiel (320px-767px): de Comités worden voorgesteld in een enig-kolomlay-out, met duidelijke scheiding tussen secties voor gemakkelijke navigatie.
hoe te om uit te voeren
- Voeg de Component van het Comitéaan uw vorm toe.
- Groepeer verwante velden binnen elk deelvenster om de logische organisatie te behouden.
- Wijs duidelijke, beschrijvende rubrieken aan elke paneelsectie toe.
- Zorg ervoor dat er voldoende ruimte is tussen deelvensters om visueel onoverzichtelijk te blijven.
Beste praktijken
- Beperk het aantal deelvensters tot 3 of 4 op het bureaublad om overweldigende gebruikers te voorkomen.
- Gebruik beknopte, beschrijvende titels voor elk deelvenster om de gebruiker meer inzicht te geven.
- U kunt velden in deelvensters logisch ordenen om cognitief laden te minimaliseren.
- Navigatie via het deelvenster Testen op aanraakapparaten om de bruikbaarheid op alle platforms te garanderen.
Gemeenschappelijke Gevallen van het Gebruik
- Toepassing van de Baan: secties voor Persoonlijke Informatie, Onderwijs, Ervaring, en Verwijzingen.
- de Registratie van het Product: Comités voor Basic Details, Technische Specificaties, en de Informatie van de Garantie.
- Forms van het Onderzoek: Groepen voor Demografie, Voorkeur, Terugkoppeling, en de Informatie van het Contact.
Wizard Layout
De Lay-out van de Tovenaar begeleidt gebruikers door een multi-step proces, dat één sectie tegelijkertijd presenteert. Deze indeling is vooral handig voor complexe formulieren, omdat cognitieve belasting wordt verminderd en de voltooiingssnelheid toeneemt doordat het proces wordt opgedeeld in hanteerbare stappen.
Responsief Gedrag
- Alle Apparaten: handhaaft een enig-stap nadruk, die voor mobiele gebruikers optimaal is.
- Inhoud van de Stap: Elke stap past ontvankelijk aan, stapelend gebieden of het rangschikken van hen zij aan zij zoals aangewezen voor de het schermgrootte.
- Navigatie: kenmerkt aanrakingsvriendelijke knopen met adequate spatiëring voor gemakkelijke interactie.
- de Indicator van de Voortgang: de bars van de Voortgang of stap wijzen schalen geschikt voor verschillende apparaten, die duidelijke terugkoppelen op voltooiingsstatus verstrekken.
hoe te om uit te voeren
- Neem de Component van de Tovenaarin uw vorm op.
- Verdeel het formulier in logische stappen, idealiter tussen 3 en 7, om elke stap geconcentreerd en beheerbaar te houden.
- Voeg voortgangsindicatoren toe om gebruikers te helpen hun positie in het proces te begrijpen.
- Zorg voor duidelijke besturingselementen voor navigatie, zoals de knoppen Volgende, Vorige en Opslaan.
Mobiele Tips van de Optimalisering
- Gebruik grote aanraakdoelen (minimaal 44 px hoog) voor navigatiebesturingselementen om de toegankelijkheid te verbeteren.
- Zorg ervoor dat de step-indicatoren zichtbaar en leesbaar zijn op kleine schermen.
- Beperk het aantal velden per stap om schuiven te minimaliseren en de focus te verbeteren.
- Schakel de functie Automatisch opslaan in om gegevensverlies te voorkomen als gebruikers het formulier verlaten.
Beste praktijken
- De stappen van het ontwerp om een logische vooruitgang te volgen, met elke stap voortbouwend op vorige.
- Gebruik duidelijke, beschrijvende titels voor elke stap om gebruikersverwachtingen in te stellen.
- Valideer gebruikersinvoer bij elke stap om fouten vroeg af te vangen en frustratie te verminderen.
- Gebruikers toestaan terug te navigeren om eerdere informatie te bekijken of te bewerken zonder gegevens te verliezen.
Gemeenschappelijke Gevallen van het Gebruik
- Vorderingen van de Verzekering: Stappen voor de Details van het Ongeval, de Verzending van het Bewijs, Persoonlijke Informatie, en Overzicht.
- Opstelling van de Rekening: Stages voor BasisInformatie, Voorkeur, de Montages van de Veiligheid, en Bevestiging.
- Proces van de Orde: Stappen voor de Selectie van het Product, Verzendinformatie, Betalingsdetails, en Overzicht van de Orde.
Accordeonlay-out
Met de accordeonindeling bespaart u ruimte door de inhoud in inklapbare gedeelten te ordenen, waardoor deze ideaal is voor optionele of secundaire informatie. Deze indeling is vooral handig voor formulieren met inhoud die logisch kan worden gegroepeerd en die niet in één keer hoeft te worden weergegeven.
Responsief Gedrag
- Mobiele Prestaties: slechts wordt de relevante sectie uitgebreid, die de behoefte aan het scrollen verminderen en ladingstijden verbeteren.
- aanraking-Geoptimaliseerde Kopballen: de kopballen van de Sectie zijn gemakkelijk te onttrekken en uit te breiden, ondersteunend natuurlijke gebaren op mobiele apparaten.
- Vloeiende Animaties: het uitbreiden en het doen ineenstorten secties verstrekken visuele terugkoppelen voor gebruikersinteractie.
- Efficiëntie van de Ruimte: de samengevouwen secties minimaliseren verticale ruimte, die de vorm gemakkelijker maken om op alle apparaten te navigeren.
hoe te om uit te voeren
- Voeg de Component van de Accordeonaan uw vorm toe.
- Groepeer gerelateerde optionele of secundaire inhoud binnen elke accordeonsectie.
- Gebruik duidelijke, beschrijvende kopteksten voor elke sectie om gebruikers te helpen begrijpen welke informatie bevat binnen is.
- Stel de juiste open of gesloten standaardinstellingen voor elke sectie in op basis van belang en gebruikersbehoeften.
Mobiele Voordelen
- Vermindert het schuiven door ongebruikte secties samen te vouwen, die gebruikers toestaan om zich op één sectie tegelijkertijd te concentreren.
- Aanraakvriendelijke interactie ondersteunt natuurlijke bewegingen voor uit- en samenvouwen.
- Sneller laden, omdat alleen de actieve inhoud zichtbaar is.
- Verbeterde focus, omdat gebruikers op elk gewenst moment alleen de informatie zien die ze nodig hebben.
Beste praktijken
- Gebruik duidelijke sectiekoppen, zodat gebruikers weten wat ze moeten verwachten voordat ze een sectie uitbreiden.
- Groepeer gerelateerde inhoud logisch binnen elke sectie om begrip te bevorderen.
- Stel belangrijke secties in die moeten worden uitgebreid als directe aandacht vereist is.
- Geef korte voorvertoningen of samenvattingen van secties weer, zodat gebruikers gemakkelijker kunnen beslissen welke secties ze willen uitvouwen.
Gemeenschappelijke Gevallen van het Gebruik
- Configuratie van het Product: secties voor BasisOpties, Geavanceerde Montages, Toebehoren, en Steun.
- FAQ Forms: Groepen voor Rekening, het Factureren, Technische, en Algemene vragen.
- Montages Forms: secties voor Privacy, Meldingen, Vormgeving, en Geavanceerde opties.
Deel 3: Aanbevolen werkwijzen voor responsief ontwerp
Beste praktijken door Type van Apparaat
Lay-out en Interactie:
- Gebruik een indeling met één kolom voor alle formulierinhoud om de leesbaarheid en het gebruiksgemak te maximaliseren.
- Zorg ervoor dat alle knoppen en interactieve elementen ten minste 44 px hoog zijn voor betrouwbare aanraakinteractie.
- Zorg voor duidelijke, eenvoudige navigatie met zichtbare achterzijde en volgende knoppen.
- Minimaliseer de behoefte om binnen elke sectie te scrollen door lange vormen te breken.
- Focus automatisch op het eerste invoerveld om het mobiele toetsenbord te vragen.
Richtlijnen van het Gebied:
- Tekstvelden moeten de volledige breedte van het scherm beslaan met voldoende opvulling voor aanraakinvoer.
- Gebruik native dropdown/select-elementen voor optimale mobiele bruikbaarheid.
- Eigen datumkiezers implementeren voor een consistente mobiele ervaring.
- Maak gebieden voor het uploaden van bestanden groot en duidelijk gemarkeerd voor eenvoudige toegang.
Lay-out en Bruikbaarheid:
- Gebruik lay-outs met twee kolommen voor verwante velden om te profiteren van de grotere schermruimte.
- De vormgeving en bruikbaarheid van het formulier testen in zowel staande als liggende richting.
- Ontwerpen voor zowel aanraak- als muisinvoer, zodat alle besturingselementen gemakkelijk toegankelijk zijn.
- De grootte van het inhoudsgebied verhogen met behoud van duidelijke visuele hiërarchie en leesbaarheid.
Geavanceerde Eigenschappen en Lay-out:
- Gebruik lay-outs met meerdere kolommen om efficiënt horizontale ruimte te gebruiken en verticaal schuiven te verminderen.
- Geef sneltoetsen op voor frequente acties ter ondersteuning van de gebruikers van stroom.
- Implementeer aanwijsstatussen en visuele feedback voor interactieve elementen.
- Geavanceerde validatie bieden met duidelijke, gedetailleerde foutberichten voor complexe formulieren.
Problemen oplossen
Lay-outproblemen
Mogelijke Oorzaken:
- Elementen met vaste breedte die zich niet aanpassen aan kleinere schermen
- Bureaubladeerste CSS die mobiele stijlen overschrijft
- Afbeeldingen of inhoud die de containers overlopen
hoe te bevestigen:
- Zorg ervoor dat alle afbeeldingen en containers een relatieve of op percentages gebaseerde grootte gebruiken.
- Begin met een eerste benadering van CSS voor mobiele apparaten en laag op verbeteringen voor grotere schermen.
- Formulieren testen met zowel apparaatemulators als echte apparaten.
- Vermijd vaste afmetingen; gebruik flexibele lay-outs.
Mogelijke Oorzaken:
- Knoppen of koppelingen kleiner dan 44 bij 44 px
- Interactieve elementen die te dicht bij elkaar zijn geplaatst
- Aangepaste CSS die de standaardgrootte van het aanraakdoel reduceert
hoe te bevestigen:
- Zorg ervoor dat elk interactief element ten minste 44px bij 44px is.
- Voeg adequate spatiëring toe tussen knoppen, koppelingen en andere besturingselementen.
- Test met echte aanraakapparaten, niet alleen met een muis.
- Vouw de aanraakdoelgebieden naar wens uit voor toegankelijkheid.
Mogelijke Oorzaken:
- Lange tekst of labels die niet omlopen
- Containers met vaste breedten
- Afbeeldingen die niet responsief worden geschaald
hoe te bevestigen:
- Tekstomloop inschakelen voor alle labels en inhoud.
- Gebruik responsieve afbeeldingen die met de container worden geschaald.
- Ontwerp flexibele lay-outs die zich aanpassen aan verschillende lengte van inhoud.
- Test met zowel korte als lange inhoud om het aanpassingsvermogen te waarborgen.
Prestatieproblemen
Mogelijke Oorzaken:
- Grote, niet-geoptimaliseerde afbeeldingen
- Zware of excessieve JavaScript
- Te veel formuliervelden tegelijk laden
hoe te bevestigen:
- Optimaliseer afbeeldingen voor mobiele apparaten en gebruik de juiste bestandsindelingen.
- Niet-kritieke inhoud uitstellen of wazig laden.
- Gebruik van scripts en widgets van derden minimaliseren.
- Formuliervelden stroomlijnen om alleen te laden wat nodig is.
Problemen met testen en valideren
Mogelijke Oorzaken:
- Verschillen in renderingengines van browsers
- Aanraakinteractie niet nauwkeurig gesimuleerd
- Verschillen in netwerksnelheid
hoe te bevestigen:
- Test altijd op echte apparaten naast emulators.
- Gebruik meerdere browsers en apparaten voor uitgebreide tests.
- Simuleer diverse netwerksnelheden om prestatiesknelpunten te identificeren.
- Feedback verzamelen van echte gebruikers in het doelpubliek.
Succeswaarden voor responsieve Forms
Ervaring van de Gebruiker:
- het voltooiingstarief van de Vorm: Beoogd voor 85% of hoger op mobiele apparaten.
- Tijd om te voltooien: de mobiele gebruikers zouden vormen binnen 20% van Desktop voltooiingstijden moeten voltooien.
- tarief van de Fout: houd bevestigingsfouten onder 5%.
- de punten van de Omzetting: identificeer en richt stappen waar de gebruikers weg vallen.
Technische Prestaties:
- de ladingstijd van de Pagina: minder dan 3 seconden op een verbinding 3G.
- de Kernsteden van het Web: ontmoeten of overschrijden Google geadviseerde drempels.
- Toegankelijkheid: bereikt naleving WCAG 2.1 van aa.
- Browser verenigbaarheid: verzeker 98%+ functionaliteit over alle belangrijke browsers.
Controle vóór Publicatie:
- Het formulier testen op mobiele apparaten (niet alleen emulators).
- Zorg ervoor dat alle aanraakdoelen ten minste 44px × 44px zijn.
- Controleer de leesbaarheid van de tekst bij alle ondersteunde schermformaten.
- Bevestig dat formuliervalidatie op alle apparaten en in alle browsers consistent werkt.
- Zorg ervoor dat de laadtijd van de mobiele telefoon minder dan 3 seconden is.
- Controleer of alle interactieve elementen toegankelijk zijn via het toetsenbord en de schermlezers.
- Test het formulier verzenden op alle ondersteunde apparaten.
Volgende stappen
Onmiddellijke Acties:
- controleer uw huidige vormen: test bestaande vormen gebruikend de apparatenmededinger.
- identificeer snel wint: bevestig duidelijke mobiele bruikbaarheidskwesties eerst.
- voorrang geven aan hoog-verkeersvormen: concentreer zich op vormen met het meest gebruikereffect.
- voer een mobiel-eerste benadering uit: Begin met het kleinste schermontwerp.
Geavanceerde Optimalisering:
- Prestaties controle: opstelling analyseert om vormmetriek te volgen.
- het testen A/B: Experimenteer met verschillende lay-outs en benaderingen.
- gebruiker terugkoppelt inzameling: verzamel inzichten van echte gebruikers.
- Ononderbroken verbetering: herzie en optimaliseer regelmatig vormen.