Links überspringen

Interaktive Benutzeroberflächen erstellen

2.3 Interaktive Benutzeroberflächen erstellen

Eine gut gestaltete interaktive Benutzeroberfläche ist entscheidend für die Benutzerfreundlichkeit und Effizienz einer FileMaker-Datenbankanwendung. In diesem Tutorial werden wir uns darauf konzentrieren, wie Sie interaktive Elemente wie Navigationselemente (Menüs und Schaltflächen), benutzerdefinierte Dialoge und Popovers erstellen können, um die Benutzererfahrung in Ihrer Datenbank zu verbessern. Zusätzlich werden wir einige bewährte Tipps zur Verbesserung der Benutzerfreundlichkeit Ihrer Benutzeroberflächen behandeln.

Erstellen von Navigationselementen (Menüs, Schaltflächen)

Schritt 1: Navigationselemente planen

Bevor Sie mit der Erstellung von Navigationselementen beginnen, ist es wichtig, sich Gedanken darüber zu machen, wie die Benutzer durch Ihre Anwendung navigieren sollen. Überlegen Sie, welche Layouts oder Funktionen häufig verwendet werden und wie Sie den Zugriff darauf so einfach wie möglich gestalten können.

  • Hauptnavigationsmenü: Überlegen Sie, ob ein zentrales Navigationsmenü sinnvoll ist, das auf jeder Seite sichtbar ist. Dieses Menü könnte Links zu den wichtigsten Bereichen der Anwendung enthalten, wie „Startseite“, „Kunden“, „Bestellungen“ und „Berichte“.
  • Kontextbezogene Navigation: Denken Sie darüber nach, kontextbezogene Navigationselemente hinzuzufügen, die sich abhängig vom Layout oder den aktuellen Daten ändern. Beispielsweise könnten Sie Schaltflächen einfügen, die nur erscheinen, wenn bestimmte Bedingungen erfüllt sind, wie das Anzeigen einer „Bearbeiten“-Schaltfläche nur bei vorhandenen Datensätzen.

Benutzerdefiniertes Menü und Navigation in gFM-Business

Mehr Informationen
Professional ERP-Software

Schritt 2: Schaltflächen erstellen

Schaltflächen sind ein wesentliches Element jeder Benutzeroberfläche und ermöglichen es Benutzern, bestimmte Aktionen auszuführen, wie das Öffnen eines anderen Layouts, das Ausführen eines Scripts oder das Speichern von Daten.

  1. Schaltfläche hinzufügen: Wechseln Sie in den Layout-Modus und wählen Sie das Tastenwerkzeug in der oberen Werkzeugleiste aus. Klicken Sie in den Layoutbereich, um eine Schaltfläche hinzuzufügen.
  2. Schaltfläche beschriften: Geben Sie der Schaltfläche eine klare und verständliche Beschriftung, wie z.B. „Speichern“, „Löschen“ oder „Weiter“. Die Beschriftung sollte kurz und aussagekräftig sein.
  3. Aktion zuweisen: Im Dialog zur Taste unter Aktion können Sie der Schaltfläche eine spezifische Aktion zuweisen, wie das Ausführen eines Scripts, das Wechseln zu einem anderen Layout oder das Ausführen einer benutzerdefinierten Funktion. Diese Aktionen werden ausgeführt, wenn der Benutzer die Schaltfläche anklickt.
  4. Schaltflächenstyling: Verwenden Sie den Inspektor, um das Aussehen der Schaltfläche anzupassen. Sie können Farben, Schriftarten und Ränder ändern, um die Schaltfläche in das Gesamtbild des Layouts zu integrieren.
Schritt 3: Menüs erstellen

Menüs bieten eine strukturierte und leicht zugängliche Möglichkeit, Benutzern verschiedene Optionen oder Funktionen anzubieten.

  1. Dropdown-Menü erstellen: Wählen Sie das gewünschte Feld mit der Maus aus und wechseln im Inspektor in das letzte Register. Verwenden Sie im Bereich „Steuerelementstil“ das Einblendmenü oder Einblendliste aus, um ein Menü zu erstellen. Wählen Sie unter „Werte von“ eine Werteliste aus, die zur Auswahl eingeblendet werden sollen.
  2. Menüpunkte definieren: Definieren Sie die Menüpunkte als Werteliste unter [Datei/Ablage > Definieren > Wertelisten]. Eine Werteliste kann statische Werte oder Werte aus Feldern oder Bezugsfeldern enthalten. gFM-Business verwendet häufig dynamische Wertelisten mit der Funktion „MagicValueList“. In diesem Fall wird als Werteliste „MagicValueList“ angegeben und dem Feld ein Script-Trigger (bei Betreten) zugewiesen, das die Werteliste dynamisch mit der Funktion [MagicValueList] erstellt. Eine auf diese Weise zugewiesene Werteliste muss nicht in FileMaker als Werteliste vordefiniert werden.
  3. Menüaktionen zuweisen: Jeder Menüpunkt kann eine Aktion auslösen, ähnlich wie bei Schaltflächen. Verwenden Sie Script-Trigger, um festzulegen, ob etwas passieren soll, wenn ein Benutzer einen Menüpunkt auswählt.
Schritt 4: Navigation testen

Nachdem Sie Ihre Navigationselemente erstellt haben, testen Sie die Navigation aus der Sicht des Benutzers. Überprüfen Sie, ob alle Links und Schaltflächen korrekt funktionieren und ob die Navigation intuitiv und flüssig ist.

Hauptmenü und Navigation in gFM-Business

Die Menüpunkte der Navigation und des Hauptmenüs in der gFM-Business ERP-Software müssen nicht einzeln auf den Layouts angepasst werden, sondern werden im Entwicklermodul „Administration“ unter den Registern [Navigation] und [Hauptmenü] vordefiniert. Für den Entwickler hat das den Vorteil, dass alle Navigationselemente auf allen Masken identisch sind und einfach aus einem vorhandenen Layout übernommen werden können. Die Professional-Version unterstützt zudem mehrsprachige Hauptmenüs und Navigationen.

Navigation, Schaltflächen und Menüs in gFM-Business
Rot: Navigation, gelb: Schaltflächen, grün: Dropdown-Menü

Benutzerdefinierte Dialoge und Popovers

Benutzerdefinierte Dialoge und Popovers sind interaktive Elemente, die zusätzliche Informationen anzeigen oder Eingaben vom Benutzer erfordern, ohne das aktuelle Layout zu verlassen.

Schritt 1: Benutzerdefinierte Dialoge erstellen

Benutzerdefinierte Dialoge sind Popup-Fenster, die Sie verwenden können, um dem Benutzer Nachrichten anzuzeigen oder Eingaben anzufordern.

  1. Script erstellen: Um einen benutzerdefinierten Dialog anzuzeigen, müssen Sie ein Script erstellen. Gehen Sie im Menü unter [Scripts] in den Scriptarbeitsbereich (Cmd/Ctrl+Shift+S) und klicken Sie auf Neues Script.
  2. Dialoge definieren: Verwenden Sie den Befehl Eigenes Dialogfeld anzeigen im Script, um den Dialog zu erstellen. Sie können Titel, Textnachricht und bis zu drei Schaltflächen definieren.
  3. Eingabefelder hinzufügen: Sie können bis zu drei Eingabefelder hinzufügen, in denen Benutzer Daten eingeben können. Diese Felder können verwendet werden, um Werte zu erfassen, die dann im Script weiterverarbeitet werden.
  4. Aktionen basierend auf Benutzereingaben: Verwenden Sie bedingte Anweisungen (If-Statements) im Script, um unterschiedliche Aktionen basierend auf den Eingaben des Benutzers oder der ausgewählten Schaltfläche auszuführen.
Schritt 2: Popovers erstellen

Popovers sind kleine Fenster, die erscheinen, wenn der Benutzer auf ein Element klickt, und zusätzliche Informationen oder Eingabefelder anzeigen. Sie sind besonders nützlich, um komplexe Benutzeroberflächen übersichtlich zu gestalten.

  1. Popover hinzufügen: Wählen Sie in der oberen Werkzeugleiste im Tastenwerkzeug den Punkt „Popover-Taste“ aus und klicken Sie in das Layout, um einen Popover-Button hinzuzufügen. Eine Popover-Taste sieht wie eine normale Schaltfläche aus, öffnet jedoch ein Popover-Fenster, wenn sie angeklickt wird.
  2. Popover-Inhalte gestalten: Sobald Sie die Popover-Taste erstellt haben, öffnet sich per Doppelklick der Popover-Editor. Hier können Sie Felder, Texte, Schaltflächen und andere Objekte hinzufügen, genau wie in einem normalen Layout.
  3. Interaktionen hinzufügen: Verwenden Sie Scripts oder direkte Aktionen, um die Interaktivität des Popovers zu steuern. Sie können z.B. festlegen, dass bestimmte Felder im Popover validiert werden, bevor der Benutzer die Änderungen speichern kann.
  4. Testen: Testen Sie den Popover im Blättern-Modus, um sicherzustellen, dass er korrekt angezeigt wird und die gewünschten Aktionen ausführt.
Popover zur Anlage einer neuen Artikelposition

Tipps zur Verbesserung der Benutzerfreundlichkeit

Schritt 1: Konsistenz wahren

Eine konsistente Benutzeroberfläche ist einfacher zu erlernen und zu benutzen. Verwenden Sie einheitliche Farben, Schriftarten und Stile über alle Layouts hinweg. Stellen Sie sicher, dass Navigationselemente wie Schaltflächen und Menüs an denselben Stellen erscheinen und gleich funktionieren.

Schritt 2: Intuitive Navigation

Benutzer sollten immer wissen, wo sie sich befinden und wie sie zu den gewünschten Funktionen gelangen. Verwenden Sie klare und prägnante Beschriftungen für Schaltflächen und Menüs. Sorgen Sie dafür, dass der Weg zu den wichtigsten Funktionen nie mehr als zwei bis drei Klicks entfernt ist.

Schritt 3: Rückmeldungen und Bestätigungen

Geben Sie Benutzern stets Feedback zu ihren Aktionen. Zeigen Sie z.B. eine Bestätigungsmeldung an, wenn Daten gespeichert wurden, oder eine Warnung, bevor wichtige Daten gelöscht werden. Dies verhindert Fehler und erhöht das Vertrauen der Benutzer in die Anwendung.

Schritt 4: Fehlervermeidung und -behandlung

Entwerfen Sie Ihre Benutzeroberfläche so, dass Benutzer nur gültige Eingaben machen können. Verwenden Sie Dropdown-Menüs, Kontrollkästchen und andere vordefinierte Auswahlmöglichkeiten, um die Eingabe von Fehlern zu minimieren. Wenn ein Fehler auftritt, zeigen Sie klare Fehlermeldungen an und bieten Sie Lösungsvorschläge.

Schritt 5: Testen mit echten Benutzern

Es ist wichtig, Ihre Benutzeroberfläche mit echten Benutzern zu testen, um sicherzustellen, dass sie intuitiv und effizient ist. Sammeln Sie Feedback und nehmen Sie Anpassungen vor, um die Benutzererfahrung kontinuierlich zu verbessern.

gFM-Business Open Source FileMaker Basis-ERP

Die Software zum Crashkurs

Gratis herunterladen
Open Source ERP auf Basis von Claris FileMaker

Häufig gestellte Fragen zu interaktiven Benutzeroberflächen

  • Wie erstelle ich Navigationselemente in FileMaker, um meine Benutzer durch die Anwendung zu führen?
    • Sie können Navigationselemente erstellen, indem Sie im Layoutmodus Schaltflächen und Schaltflächenleisten hinzufügen. Diese ermöglichen es Benutzern, leicht zwischen verschiedenen Layouts oder Funktionen zu wechseln. Sie können Schaltflächen mit Skripten verknüpfen, die den Benutzer zu einem anderen Layout leiten, Datensätze filtern oder eine bestimmte Aktion ausführen. Die Schaltflächenleiste ist besonders nützlich für die Erstellung einer konsistenten Navigation am oberen oder seitlichen Rand des Layouts.
  • Wie füge ich ein Popover in meine Benutzeroberfläche ein?
    • Ein Popover ist ein Layoutobjekt, das zusätzliche Informationen oder Optionen anzeigt, wenn der Benutzer auf eine Schaltfläche klickt. Um ein Popover zu erstellen, wählen Sie im Layoutmodus die Option „Popover-Taste“ in der Werkzeugleiste aus. Platzieren Sie die Schaltfläche auf Ihrem Layout, und Sie können Inhalte wie Felder, Text oder andere Schaltflächen im Popover-Fenster hinzufügen. Popovers eignen sich hervorragend für kontextsensitive Informationen oder zur Bereitstellung von erweiterten Optionen, ohne den Benutzer aus dem aktuellen Layout herauszuführen.
  • Wie erstelle ich interaktive Dialogfelder in FileMaker?
    • Dialogfelder sind nützlich, um Benutzern wichtige Informationen anzuzeigen oder Eingaben von ihnen anzufordern. Sie können ein Benutzerdefiniertes Dialogfeld über ein Skript erstellen. Im Skript-Editor wählen Sie die Funktion „Benutzerdefiniertes Dialogfeld anzeigen“ und können bis zu drei Eingabefelder sowie Schaltflächen wie „OK“ und „Abbrechen“ hinzufügen. Dies eignet sich gut, um Benutzerentscheidungen zu bestätigen oder zusätzliche Daten zu erfassen, bevor eine Aktion ausgeführt wird.
  • Wie kann ich mit Schaltflächen interaktive Workflows erstellen?
    • Schaltflächen sind ein zentrales Element in interaktiven Benutzeroberflächen. Sie können Schaltflächen hinzufügen und ihnen Skripte zuweisen, die spezifische Aktionen ausführen, z. B. das Erstellen eines neuen Datensatzes, das Löschen eines Datensatzes oder das Navigieren zu einem bestimmten Layout. Durch das Hinzufügen von Bedingungen in den Skripten können Sie die Schaltflächen dynamisch steuern, je nach Benutzerrolle oder Status eines Datensatzes.
  • Wie setze ich Tab-Steuerelemente ein, um den Überblick in komplexen Layouts zu behalten?
    • Tab-Steuerelemente bieten eine großartige Möglichkeit, Daten in registerähnlichen Bereichen zu organisieren und den Benutzern zu helfen, zwischen verschiedenen Abschnitten eines Layouts zu wechseln, ohne die gesamte Seite neu zu laden. Sie können im Layoutmodus ein Tab-Steuerelement hinzufügen und Registerkarten erstellen, die jeweils unterschiedliche Inhalte oder Daten anzeigen. Dies erleichtert die Navigation in komplexen Layouts, indem verwandte Informationen in einer übersichtlichen, organisierten Struktur angezeigt werden.
  • Wie kann ich die Benutzerfreundlichkeit meiner Layouts verbessern?
    • Um die Benutzerfreundlichkeit zu verbessern, sollten Sie sicherstellen, dass Layouts klar und intuitiv sind. Verwenden Sie große, gut sichtbare Schaltflächen, klare Beschriftungen und kontrastreiche Farben für wichtige Elemente. Reduzieren Sie überflüssige Informationen und konzentrieren Sie sich darauf, dem Benutzer die wichtigsten Funktionen zugänglich zu machen. Tooltips (Hilfetexte) können ebenfalls hilfreich sein, um den Benutzern zusätzliche Informationen zu geben, wenn sie mit der Maus über ein Objekt fahren.
  • Wie kann ich sicherstellen, dass meine interaktive Benutzeroberfläche auf verschiedenen Geräten gut funktioniert?
    • FileMaker unterstützt eine responsive Gestaltung, sodass Layouts auf verschiedenen Geräten wie Desktops, Tablets und Smartphones gut aussehen. Verwenden Sie im Inspektor die Ankerfunktionen, um festzulegen, wie Objekte sich an die Fenstergröße anpassen. Für mobile Geräte sollten Sie sicherstellen, dass Schaltflächen groß genug und leicht zu bedienen sind. Erstellen Sie für mobile Geräte optimierte Layouts mit vereinfachter Navigation und angepasster Schriftgröße.
  • Wie richte ich bedingte Formatierungen ein, um visuelle Hinweise für Benutzer zu geben?
    • Mit bedingter Formatierung können Sie Felder oder Objekte basierend auf bestimmten Kriterien visuell hervorheben. Zum Beispiel können Sie Datensätze, die einen bestimmten Status haben, automatisch in einer anderen Farbe anzeigen lassen. Im Layoutmodus können Sie ein Objekt auswählen und im Inspektor unter „Bedingte Formatierung“ Regeln festlegen, um das Erscheinungsbild dynamisch zu ändern. Dies hilft Benutzern, wichtige Informationen sofort zu erkennen.
  • Wie kann ich Tooltips verwenden, um meine Benutzeroberfläche zu verbessern?
    • Tooltips sind kleine Informationsfenster, die erscheinen, wenn ein Benutzer mit der Maus über ein Objekt fährt. Sie können in FileMaker jedem Feld, jeder Schaltfläche oder jedem anderen Objekt Tooltips hinzufügen, um zusätzliche Informationen oder Anweisungen bereitzustellen. Im Inspektor können Sie unter der ersten Registerkarte „Position“ unter „Quickinfo“ einen Tooltip für das ausgewählte Objekt definieren. Tooltips sind nützlich, um Benutzern zu helfen, ohne dass sie das Layout verlassen oder zusätzliche Dialoge öffnen müssen.
  • Wie optimiere ich die Benutzeroberfläche für schnelle Interaktionen?
    • Um eine schnelle Interaktion zu ermöglichen, sollten Sie redundante Klicks vermeiden und wichtige Aktionen leicht zugänglich machen. Schaltflächen sollten in der Nähe der relevanten Informationen platziert und ausreichend groß sein, um sie leicht anklicken zu können. Kurzbefehle und Tastenkombinationen können die Effizienz ebenfalls verbessern. Sie können in Skripten Tastenkombinationen festlegen, um häufige Aktionen schneller zugänglich zu machen, z. B. das Speichern eines Datensatzes oder das Ausführen einer Suche.
  • Wie erstelle ich interaktive Dashboards in FileMaker?
    • Dashboards bieten eine visuelle Übersicht wichtiger Daten und KPIs. Sie können Dashboards erstellen, indem Sie Diagramme, Zusammenfassungsfelder und Schaltflächen verwenden. Diagramme lassen sich aus Ihren Daten generieren, um Trends und Kennzahlen visuell darzustellen. Schaltflächen und Popovers können in das Dashboard integriert werden, um eine interaktive Benutzerführung zu ermöglichen, z. B. das Filtern von Daten oder das Anzeigen detaillierter Informationen.
  • Wie kann ich dynamische Inhalte in meiner Benutzeroberfläche einbinden?
    • Dynamische Inhalte lassen sich mithilfe von Berechnungsfeldern, bedingter Sichtbarkeit und Skripten einbinden. Sie können beispielsweise Berechnungsfelder verwenden, um dynamische Werte anzuzeigen, die sich je nach Benutzereingabe ändern. Mit bedingter Sichtbarkeit können Sie Layoutobjekte ein- oder ausblenden, abhängig von der aktuellen Situation, z. B. dem Status eines Datensatzes. Skripte ermöglichen es, die Benutzeroberfläche weiter zu dynamisieren, indem sie auf bestimmte Benutzeraktionen reagieren.
2.3 Interaktive Benutzeroberflächen erstellen

Diese Seite teilen:

ERP-Software so flexibel wie Ihr Unternehmen.
Wir beraten Sie gern.

Anpassbare ERP-Software für Mac, Windows und iOS.

Sie sind hier: Gestaltung und Anpassung von FileMaker Layouts | Kapitel 2.2