Editor-gids voor het visueel aanpassen van apps

Gepubliceerd 2026-10-11 · Bijgewerkt 2026-10-11

De editor is de werkruimte waarin je een toepassing na de eerste creatie bekijkt en verder aanpast. Een goede visuele editor maakt duidelijk welk element is geselecteerd en laat je lay-out, inhoud, componenten, responsief gedrag en acties met gegevens wijzigen voordat je publiceert.

Leer de werkruimte kennen voordat je wijzigt

Begin met de belangrijkste delen van de editor: de huidige pagina of het canvas, navigatie tussen schermen, de componentstructuur, eigenschappen en de voorbeeldweergave. Controleer vóór elke wijziging welke pagina openstaat en welk element werkelijk geselecteerd is.

Maak onderscheid tussen lokale en gedeelde componenten. Een knop op één pagina veranderen is iets anders dan een gedeelde knop aanpassen die overal wordt gebruikt. Ook een wijziging aan een bovenliggende container kan meerdere onderliggende elementen beïnvloeden.

Bekijk daarom eerst de hiërarchie, de bovenliggende container en aangrenzende onderdelen. Daardoor kun je later sneller bepalen of een fout in het element zelf, in de omliggende lay-out of in een paginaspecifieke instelling zit.

• Controleer de actieve pagina
• Onderscheid lokaal en gedeeld
• Begrijp de hiërarchie
• Gebruik de voorbeeldweergave

Pas lay-out en ruimte doelgericht aan

Verplaats onderdelen niet willekeurig totdat het er goed uitziet. Bepaal wat de gebruiker eerst moet zien, wat de hoofdactie is en hoe informatie door de pagina loopt. Witruimte helpt groepen te vormen en hiërarchie zichtbaar te maken.

Test bij wijzigingen aan breedte, hoogte, marges, opvulling, uitlijning of rasters ook langere inhoud. Een korte titel kan goed passen terwijl drie regels tekst de kaart laten breken. Vaste hoogtes kunnen vertalingen of dynamische gegevens afsnijden.

Houd soortgelijke componenten consistent. Primaire knoppen, kaarten, formulieren en koppen horen gemeenschappelijke ontwerpprincipes te volgen. Herbruikbare componenten helpen daarbij zonder elk scherm exact hetzelfde te maken.

• Benadruk de hoofdactie
• Gebruik ruimte voor groepering
• Test lange teksten
• Houd componenten consistent

Bewerk inhoud en kies componenten op functie

De editor moet ook echte inhoud kunnen aanpassen. Controleer paginatitels, labels, hulpteksten, lege toestanden, bevestigingen en foutmeldingen. Tekst moet duidelijk maken wat er is gebeurd en wat de gebruiker hierna kan doen.

Kies componenten op basis van de taak. Tabellen zijn geschikt om gestructureerde records te vergelijken, kaarten om inhoud te verkennen en een dialoogvenster om een korte beslissing te nemen. Een belangrijk meerstappenproces is vaak duidelijker op een eigen pagina.

Als Infera Agent een wijziging genereert vanuit gewone taal, bekijk daarna het resultaat in de editor. Controleer gebruikte gegevens, aansluiting op het bestaande ontwerp en het werkelijke gedrag tijdens klikken, invoeren en verzenden.

• Maak labels duidelijk
• Kies componenten per taak
• Controleer gekoppelde gegevens
• Test interacties

Controleer responsief gedrag op mobiele schermen

Responsief ontwerp is niet simpelweg een desktopweergave verkleinen. Twee kolommen kunnen onder elkaar komen, horizontale navigatie kan een menu worden en een grote tabel kan op mobiel een andere presentatie nodig hebben.

Let op overlappende knoppen, afgekorte tekst, smalle invoervelden, vaste onderdelen die inhoud bedekken en ongewenst horizontaal scrollen. Controleer ook of aanraakvlakken groot genoeg zijn en formulieren bruikbaar blijven wanneer het mobiele toetsenbord openstaat.

Bij meerdere talen moeten vertaling en responsief gedrag samen worden getest. Woorden verschillen in lengte en een lay-out die in de ene taal goed past, kan in een andere taal te krap zijn.

• Test meerdere breedtes
• Stapel kolommen bewust
• Controleer aanraakvlakken
• Test vertaalde inhoud

Controleer gegevens en logica na visuele wijzigingen

Interfaceonderdelen tonen vaak gegevens, starten processen, wijzigen records of roepen externe diensten aan. Controleer na een wijziging welke informatie een element leest of schrijft en welke actie het moet uitvoeren.

Na een gewijzigd formulierveld moet je validatie, standaardwaarde, verplichting, opslag en afhankelijke automatisering opnieuw testen. Bij een filter controleer je de daadwerkelijke resultaten. Bij een verplaatste actie test je rechten en foutafhandeling opnieuw.

Ken voor elk belangrijk bedieningselement de trigger, gebruikte gegevens en verwachte uitkomst bij succes en fout. Zo voorkom je dat een visueel correct scherm een functionele fout verbergt.

• Controleer lezen en schrijven
• Test validatie opnieuw
• Controleer rechten
• Test succes en fout

Gebruik voorbeeld, tests en versies voor publicatie

Open vóór publicatie de voorbeeldweergave en doorloop de app zonder bewerkingspanelen. Test navigatie, scrollen, invoer, validatie, laadstatus, succesmeldingen en fouten. Bij meerdere rollen moeten belangrijke rechten apart worden getest.

Maak een herstelpunt vóór grote wijzigingen aan gedeelde componenten, aanmelden, gegevens of kernprocessen. Voer daarna één samenhangende wijziging tegelijk uit, zodat regressies gemakkelijk aan een specifieke wijziging kunnen worden gekoppeld.

Controleer na publicatie ook de live versie. Productiegegevens, domeininstellingen, cache, configuratie en externe diensten kunnen anders reageren dan de voorbeeldweergave. Een live controle hoort daarom bij de volledige editor-werkwijze.

• Test kritieke routes
• Maak herstelpunten
• Controleer belangrijke rollen
• Test de live versie

Vragen

Gratis starten Templates