2.3 Interactieve gebruikersinterfaces maken
Een goed ontworpen interactieve gebruikersinterface is essentieel voor de bruikbaarheid en efficiëntie van een FileMaker databasetoepassing. In deze zelfstudiegids bespreken we hoe u interactieve elementen zoals navigatie-elementen (menu's en knoppen), aangepaste dialogen en popovers kunt maken om de gebruikerservaring in uw database te verbeteren. Daarnaast behandelen we enkele beproefde tips om de bruikbaarheid van uw gebruikersinterfaces te verbeteren.
Inhoudsopgave
- 2.3 Interactieve gebruikersinterfaces maken
- Navigatie-elementen maken (menu's, knoppen)
- Aangepast menu en navigatie in gFM-Business
- Door de gebruiker gedefinieerde dialogen en pop-overs
- Tips om gebruiksvriendelijkheid te verbeteren
- gFM-Business Open Source FileMaker Basis ERP De software van de spoedcursus
- Veelgestelde vragen over interactieve gebruikersinterfaces
Voordat je navigatie-elementen gaat maken, is het belangrijk om na te denken over hoe je wilt dat gebruikers door je applicatie navigeren. Bedenk welke lay-outs of functies vaak worden gebruikt en hoe je de toegang ertoe zo eenvoudig mogelijk kunt maken.
- HoofdnavigatiemenuOverweeg of het zinvol is om een centraal navigatiemenu te hebben dat op elke pagina zichtbaar is. Dit menu zou links kunnen bevatten naar de belangrijkste onderdelen van de applicatie, zoals "Startpagina", "Klanten", "Bestellingen" en "Rapporten".
- Contextuele navigatieDenk aan het toevoegen van contextuele navigatie-elementen die veranderen afhankelijk van de lay-out of de huidige gegevens. Je kunt bijvoorbeeld knoppen toevoegen die alleen verschijnen als aan bepaalde voorwaarden is voldaan, zoals een knop "Bewerken" die alleen wordt weergegeven voor bestaande records.
Stap 2: Knoppen maken
Knoppen zijn een essentieel element van elke gebruikersinterface en stellen gebruikers in staat om bepaalde acties uit te voeren, zoals het openen van een andere lay-out, het uitvoeren van een script of het opslaan van gegevens.
- Knop toevoegenSchakel over naar de lay-outmodus en selecteer de Belangrijk hulpmiddel in de bovenste werkbalk. Klik in het opmaakgebied om een knop toe te voegen.
- De knop labelenGeef de knop een duidelijk en begrijpelijk label, zoals "Opslaan", "Verwijderen" of "Volgende". Het label moet kort en betekenisvol zijn.
- Actie toewijzen: In het dialoogvenster voor de knop onder Actie kun je een specifieke actie aan de knop toewijzen, zoals het uitvoeren van een script, overschakelen naar een andere lay-out of het uitvoeren van een aangepaste functie. Deze acties worden uitgevoerd wanneer de gebruiker op de knop klikt.
- KnopontwerpGebruik de inspecteur om het uiterlijk van de knop aan te passen. Je kunt kleuren, lettertypen en marges wijzigen om de knop te integreren in de algehele lay-out.
Stap 3: Menu's maken
Menu's bieden een gestructureerde en gemakkelijk toegankelijke manier om gebruikers verschillende opties of functies aan te bieden.
- Maak vervolgkeuzemenuSelecteer het gewenste veld met de muis en ga naar het laatste tabblad in de inspector. Gebruik in het gebied "Control style" de optie Pop-up menu of Fade-in lijst om een menu te maken. Selecteer onder "Waarden van" een lijst met waarden die moeten worden weergegeven voor selectie.
- Menu-items definiërenDefinieer de menu-items als een waardenlijst onder [Bestand > Definiëren > Waardenlijsten]. Een waardenlijst kan statische waarden of waarden van velden of gerelateerde velden bevatten. gFM Business gebruikt vaak dynamische waardenlijsten met de functie "MagicValueList". In dit geval wordt "MagicValueList" gespecificeerd als de waardenlijst en wordt een scripttrigger toegewezen aan het veld (bij invoer), die de waardenlijst dynamisch aanmaakt met de functie [MagicValueList]. Een waardenlijst die op deze manier wordt toegewezen, hoeft niet vooraf te zijn gedefinieerd als een waardenlijst in FileMaker.
- Menu-acties toewijzenElk menu-item kan een actie activeren, vergelijkbaar met knoppen. Gebruik scripttriggers om aan te geven of er iets moet gebeuren wanneer een gebruiker een menuoptie selecteert.
Zodra je je navigatie-elementen hebt gemaakt, test je de navigatie vanuit het perspectief van de gebruiker. Controleer of alle links en knoppen correct werken en of de navigatie intuïtief en vloeiend is.
De menu-items van de navigatie en het hoofdmenu in de gFM Business ERP-software hoeven niet afzonderlijk te worden aangepast op de lay-outs, maar zijn vooraf gedefinieerd in de ontwikkelaarsmodule "Beheer" onder de tabbladen [Navigatie] en [Hoofdmenu]. Voor de ontwikkelaar heeft dit het voordeel dat alle navigatie-elementen identiek zijn op alle schermen en eenvoudig kunnen worden gekopieerd van een bestaande lay-out. De Professional-versie ondersteunt ook meertalige hoofdmenu's en navigaties.
Door de gebruiker gedefinieerde dialogen en pop-overs
Door de gebruiker gedefinieerde dialogen en pop-overs zijn interactieve elementen die extra informatie weergeven of invoer van de gebruiker vragen zonder de huidige lay-out te verlaten.
Stap 1: Aangepaste dialogen maken
Aangepaste dialogen zijn pop-upvensters die je kunt gebruiken om berichten weer te geven aan de gebruiker of om invoer te vragen.
- Script makenOm een door de gebruiker gedefinieerd dialoogvenster weer te geven, moet je een script maken. Ga in het menu onder [Scripts] naar de scriptwerkruimte (Cmd/Ctrl+Shift+S) en klik op Nieuw script.
- Dialogen definiërenGebruik het commando Je eigen dialoogvenster weergeven in het script om het dialoogvenster te maken. Je kunt de titel, het tekstbericht en maximaal drie knoppen definiëren.
- Invoervelden toevoegenJe kunt maximaal drie invoervelden toevoegen waarin gebruikers gegevens kunnen invoeren. Deze velden kunnen worden gebruikt om waarden in te voeren die vervolgens verder worden verwerkt in het script.
- Acties op basis van gebruikersinvoerGebruik voorwaardelijke statements (If statements) in het script om verschillende acties uit te voeren op basis van de invoer van de gebruiker of de geselecteerde knop.
Stap 2: Popovers maken
Popovers zijn kleine vensters die verschijnen wanneer de gebruiker op een element klikt en die extra informatie of invoervelden weergeven. Ze zijn bijzonder nuttig om complexe gebruikersinterfaces overzichtelijk te maken.
- Popover toevoegenSelecteer het item "Popoverknop" in het knoppengereedschap in de bovenste werkbalk en klik in de lay-out om een popoverknop toe te voegen. Een popoverknop ziet eruit als een normale knop, maar opent een popovervenster als erop wordt geklikt.
- Ontwerp popover-inhoudZodra je de popoverknop hebt gemaakt, dubbelklik je erop om de popovereditor te openen. Hier kun je velden, teksten, knoppen en andere objecten toevoegen, net als in een normale lay-out.
- Interacties toevoegenGebruik scripts of directe acties om de interactiviteit van de popover te regelen. Je kunt bijvoorbeeld instellen dat bepaalde velden in de popover worden gevalideerd voordat de gebruiker de wijzigingen kan opslaan.
- TestenTest de popover in browsemodus om te controleren of hij correct wordt weergegeven en de gewenste acties uitvoert.
Tips om gebruiksvriendelijkheid te verbeteren
Stap 1: Consistentie behouden
Een consistente gebruikersinterface is gemakkelijker te leren en te gebruiken. Gebruik consistente kleuren, lettertypes en stijlen in alle lay-outs. Zorg ervoor dat navigatie-elementen zoals knoppen en menu's op dezelfde plaats staan en op dezelfde manier werken.
Gebruikers moeten altijd weten waar ze zijn en hoe ze bij de gewenste functies kunnen komen. Gebruik duidelijke en beknopte labels voor knoppen en menu's. Zorg ervoor dat het pad naar de belangrijkste functies nooit meer dan twee of drie klikken verwijderd is.
Stap 3: Feedback en bevestigingen
Geef gebruikers altijd feedback over hun acties. Geef bijvoorbeeld een bevestigingsbericht weer wanneer gegevens zijn opgeslagen of een waarschuwing voordat belangrijke gegevens worden verwijderd. Dit voorkomt fouten en vergroot het vertrouwen van de gebruiker in de applicatie.
Stap 4: Foutpreventie en -verwerking
Ontwerp je gebruikersinterface zo dat gebruikers alleen geldige invoer kunnen doen. Gebruik vervolgkeuzemenu's, selectievakjes en andere voorgedefinieerde keuzes om de invoer van fouten te minimaliseren. Als er een fout optreedt, geef dan duidelijke foutmeldingen en suggesties voor oplossingen.
Stap 5: Testen met echte gebruikers
Het is belangrijk om je gebruikersinterface te testen met echte gebruikers om er zeker van te zijn dat deze intuïtief en efficiënt is. Verzamel feedback en maak aanpassingen om de gebruikerservaring voortdurend te verbeteren.
gFM-Bedrijf Open Source FileMaker Basis-ERP
De software voor de spoedcursus
Gratis downloaden
Veelgestelde vragen over interactieve gebruikersinterfaces
- Hoe maak ik navigatie-elementen in FileMaker om mijn gebruikers door de toepassing te leiden?
- Je kunt navigatie-elementen maken door knoppen en knoppenbalken toe te voegen in de lay-outmodus. Hiermee kunnen gebruikers eenvoudig schakelen tussen verschillende lay-outs of functies. Je kunt knoppen koppelen aan scripts die de gebruiker naar een andere lay-out leiden, records filteren of een specifieke actie uitvoeren. De knoppenbalk is vooral handig om consistente navigatie bovenaan of aan de zijkant van de lay-out te maken.
- Hoe voeg ik een popover toe aan mijn gebruikersinterface?
- Een popover is een opmaakobject dat extra informatie of opties weergeeft wanneer de gebruiker op een knop klikt. Om een popover te maken, selecteer je de optie "Popover-knop" in de werkbalk in de lay-outmodus. Plaats de knop op je lay-out en je kunt inhoud toevoegen zoals velden, tekst of andere knoppen in het popovervenster. Popovers zijn ideaal voor contextgevoelige informatie of om geavanceerde opties te bieden zonder de gebruiker uit de huidige lay-out te halen.
- Hoe maak ik interactieve dialoogvensters in FileMaker?
- Dialoogvensters zijn handig om belangrijke informatie aan gebruikers weer te geven of om hen om input te vragen. Je kunt een aangepast dialoogvenster maken met behulp van een script. Selecteer in de scripteditor de functie "Aangepast dialoogvenster weergeven" en je kunt tot drie invoervelden en knoppen zoals "OK" en "Annuleren" toevoegen. Dit is ideaal om beslissingen van gebruikers te bevestigen of om extra gegevens in te voeren voordat een actie wordt uitgevoerd.
- Hoe kan ik interactieve workflows met knoppen maken?
- Knoppen zijn een centraal element in interactieve gebruikersinterfaces. Je kunt knoppen toevoegen en er scripts aan toewijzen die specifieke acties uitvoeren, zoals een nieuw record maken, een record verwijderen of naar een specifieke lay-out navigeren. Door voorwaarden aan de scripts toe te voegen, kun je de knoppen dynamisch aansturen, afhankelijk van de gebruikersrol of status van een gegevensrecord.
- Hoe gebruik ik tabbesturingselementen om overzicht te behouden in complexe lay-outs?
- Tabbesturingselementen zijn een geweldige manier om gegevens in tabbladachtige gebieden te organiseren en gebruikers te helpen schakelen tussen verschillende secties van een lay-out zonder de hele pagina opnieuw te laden. Je kunt een tabbesturingselement toevoegen in de lay-outmodus en tabbladen maken die elk verschillende inhoud of gegevens weergeven. Dit maakt het eenvoudiger om door complexe lay-outs te navigeren door gerelateerde informatie in een duidelijke, georganiseerde structuur weer te geven.
- Hoe kan ik de gebruiksvriendelijkheid van mijn lay-outs verbeteren?
- Om de gebruiksvriendelijkheid te verbeteren, moet je ervoor zorgen dat de lay-out duidelijk en intuïtief is. Gebruik grote, goed zichtbare knoppen, duidelijke labels en contrasterende kleuren voor belangrijke elementen. Beperk overbodige informatie en concentreer je op het toegankelijk maken van de belangrijkste functies voor de gebruiker. Tooltips (helpteksten) kunnen ook nuttig zijn om gebruikers extra informatie te geven wanneer ze de muis over een object bewegen.
- Hoe kan ik ervoor zorgen dat mijn interactieve gebruikersinterface goed werkt op verschillende apparaten?
- FileMaker ondersteunt responsive design zodat lay-outs er goed uitzien op verschillende apparaten zoals desktops, tablets en smartphones. Gebruik de ankerfuncties in de Inspector om te bepalen hoe objecten zich aanpassen aan de venstergrootte. Zorg er voor mobiele apparaten voor dat knoppen groot genoeg en gemakkelijk te gebruiken zijn. Maak lay-outs die geoptimaliseerd zijn voor mobiele apparaten met vereenvoudigde navigatie en aangepaste lettergrootte.
- Hoe stel ik voorwaardelijke opmaak in om gebruikers visuele aanwijzingen te geven?
- Met voorwaardelijke opmaak kun je velden of objecten visueel benadrukken op basis van bepaalde criteria. Je kunt bijvoorbeeld gegevensrecords met een bepaalde status automatisch in een andere kleur weergeven. In de lay-outmodus kun je een object selecteren en regels definiëren in de inspector onder "Voorwaardelijke opmaak" om het uiterlijk dynamisch te wijzigen. Dit helpt gebruikers om belangrijke informatie onmiddellijk te herkennen.
- Hoe kan ik tooltips gebruiken om mijn gebruikersinterface te verbeteren?
- Tooltips zijn kleine informatievensters die verschijnen wanneer een gebruiker de muis over een object beweegt. U kunt tooltips toevoegen aan elk veld, knop of ander object in FileMaker om aanvullende informatie of instructies te geven. In de Inspector kunt u een tooltip definiëren voor het geselecteerde object onder het eerste tabblad "Positie" onder "Tooltip". Tooltips zijn handig om gebruikers te helpen zonder dat ze de lay-out hoeven te verlaten of extra dialogen hoeven te openen.
- Hoe optimaliseer ik de gebruikersinterface voor snelle interacties?
- Om snelle interactie mogelijk te maken, moet je overbodige klikken vermijden en belangrijke acties gemakkelijk toegankelijk maken. Knoppen moeten dicht bij de relevante informatie staan en groot genoeg zijn om er gemakkelijk op te klikken. Snelkoppelingen en toetscombinaties kunnen de efficiëntie ook verbeteren. Je kunt sneltoetsen definiëren in scripts om veelvoorkomende acties toegankelijker te maken, bijvoorbeeld het opslaan van een gegevensrecord of het uitvoeren van een zoekopdracht.
- Hoe maak ik interactieve dashboards in FileMaker?
- Dashboards geven een visueel overzicht van belangrijke gegevens en KPI's. Je kunt dashboards maken door gebruik te maken van grafieken, overzichtsvelden en knoppen. Grafieken kunnen worden gegenereerd op basis van je gegevens om trends en belangrijke cijfers te visualiseren. Knoppen en pop-overs kunnen worden geïntegreerd in het dashboard om interactieve gebruikersbegeleiding mogelijk te maken, bijvoorbeeld om gegevens te filteren of gedetailleerde informatie weer te geven.
- Hoe kan ik dynamische inhoud integreren in mijn gebruikersinterface?
- Dynamische inhoud kan worden geïntegreerd met behulp van rekenvelden, voorwaardelijke zichtbaarheid en scripts. Je kunt bijvoorbeeld rekenvelden gebruiken om dynamische waarden weer te geven die veranderen afhankelijk van de invoer van de gebruiker. Met voorwaardelijke zichtbaarheid kun je opmaakobjecten tonen of verbergen afhankelijk van de huidige situatie, bijvoorbeeld de status van een gegevensrecord. Scripts maken het mogelijk om de gebruikersinterface verder te dynamiseren door te reageren op bepaalde gebruikersacties.
