FMK2012: Optimale Usability von Formular- und Listenlayouts in FileMaker (Go) von Markus Schall

FileMaker Konferenz2010

Optimale Usability von Formular- und
Listenlayouts in FileMaker (Go).
Gedanken zur optimalen GUI und Navigation für
FileMaker-Layouts auf Desktops und mobilen Endgeräten.

Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg
Optimale Usability von Formular- und Listenlayouts in FileMaker (Go). www.ﬁlemaker-konferenz.com


Gründe für datenbankgestützte GUI
• Deutlich schnellere Entwicklungszeiten sowohl bei neuen
Projekten als auch bei Erweiterung bestehender Projekte

> Alle Navigationselemente sind auf jedem Layout identisch

• Anforderungen wachsen durch neue Devices mit verschiedenen
Bedienkonzepten und Bildschirmauﬂösungen

• Flexiblere Steuerungsmöglichkeiten, z.B. Ausblenden von
Layouts device- oder benutzerbezogen

Optimale Usability von Formular- und Listenlayouts www.ﬁlemaker-konferenz.com


Themen dieser Session:
1. Exkurs: Möglichkeiten der Navigation in FileMaker Pro

1.1 - Statische Schaltflächen

1.2 - Grafiken und Texte als globale Felder aus der Datenbank

1.3 - Grafiken, Textelemente und Navigation aus der Datenbank

1.4 - Alternative Lösungen: FM-Explorer, jQuery-Lösung

1.5 - Vorteile und Nachteile der Lösungen, Fähigkeiten für iOS



2. Grundlagen der Entwicklung grafischer Benutzeroberflächen

2.1 - Studien zur Entwicklung von GUIs

2.2 - Tabellenaufbau für Schaltflächen und ggf. Beschriftungen

2.3 - Tabellenaufbau für eine datenbankgesteuerte Navigation

2.4 - Datenbankstruktur für eine datenbankgesteuerte Navigation

2.5 - Die Maske "scr.Navigation" für die Layoutzuordnung

2.6 - Script lay.HAUPTNAVIGATION

2.7 - Script sys.GUI_Menüaufbau



3. Die Beispiellösung „GFM_GUI“

3.1 - Bestandteile der datenbankbasierten Navigation

3.2 - Integration neuer Layouts in die Datenbanklösung

3.3 - Integration der GUI in bestehende Datenbanklösungen

3.4 - Erweiterungsmöglichkeiten der GUI und Navigation



Exkurs: Möglichkeiten der Navigation
1.1 - Statische Schaltﬂächen als Taste auf einem FileMaker-Layout



1.1 - Statische Schaltﬂächen als Taste auf einem FileMaker-Layout

Vorteile:

• Einfach zu implementieren
• Flexible Optik durch CSS-basiertes Design

Nachteile:

• Bei Änderungen muß jedes Layout angepaßt werden
>wird bei komplexen Lösungen schnell unübersichtlich
• Beschriftung ist statisch und unﬂexibel



1.2 - Textelemente und/oder Graﬁken aus Datenbank



1.2 - Textelemente und/oder Graﬁken aus Datenbank

Vorteile:

• Einfach zu implementieren
• Flexible Optik durch CSS-basiertes Design (wenn nur Text aus der
Datenbank entnommen wird)
• Flexible Beschriftungen, mehrsprachenfähig

Nachteile:

• Bei Änderungen muß jedes Layout angepaßt werden
>wird bei komplexen Lösungen schnell unübersichtlich




Vorteile:

• Flexible Optik durch Graﬁken und Beschriftungen aus Datenbank
• Buttons und Beschriftungen mit bedingter Formatierung
• Mehrsprachenfähigkeit einfach implementierbar
• Kein Plugin und nur ein Script erforderlich
• Neue Layouts sind sehr einfach zu implementieren
> Alle Navigationselemente auf jedem Layout sind identisch

Nachteile:

• Durch Scriptsteuerung etwas langsamer als statische Schaltﬂächen



1.4 - Alternative: Hierarchien mit FM-Explorer (Jens Liebelt)



1.4 - Alternative: Hierarchien mit FM-Explorer (Jens Liebelt)

Vorteile:

• Beliebig viele Hierarchien mit bis zu 100.000 Einträgen
• Bei Einsatz als Navigation ist nur ein Script erforderlich
• Kein Plugin erforderlich
• Trennung von Daten/Programm problemlos möglich

Nachteile:

• Durch Scriptsteuerung etwas langsamer als statische Schaltﬂächen
• Sinnvolle optische Darstellung nur vertikal möglich
• Theoretisches Verständnis über Root/Nodes erforderlich



1.5 - Alternative: Navigation mit JQuery im FileMaker Webviewer



1.5 - Alternative: Navigation mit JQuery im FileMaker Webviewer

Vorteile:

• Für Navigation wird auf jedem Layout nur ein Webviewer benötigt
• Große Auswahl an JQuery-Plugins verfügbar
• Trennung von Daten/Programm problemlos möglich

Nachteile:

• MBS-Plugin für Interaktion mit dem Webviewer erforderlich
• Optische Darstellung meist nur vertikal möglich
• Fachwissen zu JQuery und JavaScript erforderlich
• Nicht unter FileMaker Go lauffähig wegen MBS-Plugin



Grundlagen der Entwicklung
grafischer Benutzeroberflächen



2.4 - Tabellenstruktur einer datenbankgesteuerten Navigation

2.5 - Maske "scr.Navigation" zur Verwaltung von Layouts

2.6 - Script "lay.HAUPTNAVIGATION" und Script
"sys.GUI_Menüaufbau"



2.1 - Studie zur Entwicklung graﬁscher Benutzeroberﬂächen

• Durchgeführt von der TU Wien mit rund 28.000 Teilnehmern

• Eye Tracking via Heatmap, Gazeplot, Clusteranalyse, BeeSwarm

• Ergebnis: Reduktion auf das Wesentliche:

> Hauptnavigation am oberen Bildschirmrand

> 2-Spalten-Design mit Navigation links und Content rechts
(bei drei Spalten wurde dritte Spalte zu wenig beachtet)



Grafische Benutzeroberfläche mit
datenbankbasierter Navigation




• Benötigte Felder:

> Textfelder für Tastenbeschriftungen
> Textfelder für Scriptparameter
> Medienfelder für graﬁsches Element der Taste

• Alle Felder global, sonst keine Anzeige im Suchen-Modus

• Entweder jeweils einzelne Felder oder Wiederholfelder (global)

• Alle Felder beﬁnden sich in zentral aufrufbarer Datentabelle




• Neue Tabelle, im Beispielfall mit dem Namen <<gui>>

• Benötigte Felder:

> Schlüssel <<_Layoutname>> für Beziehung
> Textfelder für Tastenbeschriftungen
> Textfelder für Scriptparameter
> Medienfelder für graﬁsches Element der Taste

• Keine globalen Felder, da Layoutinformationen pro Datensatz

• Entweder jeweils einzelne Felder oder Wiederholfelder




• Globale Beziehung von Stammtabelle für Portal

• Stammtabelle enthält künstlichen Schlüssel _sys_Akt_Layout
> enthält Namen des aktuellen Layouts

• Beziehung von Stammtabelle zur GUI-Tabelle
> std::_sys_Akt_Layout = ln_gui::_Layoutname



2.5 - Layoutverwaltung über die Maske "scr.Navigation"



2.6 - Script "lay.HAUPTNAVIGATION"

• Pro Layout ein Script-Snipet:



2.7 - Script "sys.GUI_Menüaufbau"

• Script, das die Daten des aktuellen Layouts in die globalen
Felder der Stammtabelle schreibt.

> std::nav_z1s1-z2s8 (Medienfeld für Schaltﬂäche)
> std::txt_z1s1-z2s8 (Textfelder für Tastenbeschriftungen)
> std::par_z1s1-z2s8 (ScriptParameter für Navigationsscript)

• Diese Lösung funktioniert bei Nutzung mit einem offenen
Fenster. Um die Lösung für die Nutzung mit mehreren Fenstern
zu erweitern, wäre der Einsatz der o.g. Felder als Wiederholfelder
denkbar.



3. Die Beispiellösung „GFM-GUI“

* Praktischer Teil *



3.1 - Bestandteile der datenbankbasierten Navigation

• Bildschirmlayout für Computer: scr.Layoutname

• Bildschirmlayout für iPad: ipad.Layoutname

• Pro Layout ein Eintrag in der Tabelle „gui“

• Pro Eintrag ein Script-Snipet in lay.HAUPTNAVIGATION

• Script lay.Symbolleiste für Symbolleistenfunktionen



3.2 - Integration neuer Layouts in die Datenbanklösung

• Neues Layout erzeugen. Einfachste Lösung: Duplizieren eines
bestehenden Layouts. Name vergeben und TOC einstellen.

• Neuen Datensatz im Portal der Maske „scr.Navigation“ erstellen

• Menüpunkte, Beschriftungen und Parameter eintragen

• Layout im Script „lay.HAUPTNAVIGATION“ hinzufügen
> Script-Snipet kopieren und auf neues Layout anpassen

• Bei zusätzlichem iPad-Layout der gleiche Vorgang für das
iPad-Layout.



3.3 - Integration der GUI in bestehende Datenbanklösungen

• Bei vorhandener Stammdatentabelle in dieser neue Felder für
Aktivstatus, Menütext und Parameter erstellen

• Neue Datentabelle „gui“ erstellen, die als Schlüssel den Namen des
Layouts und Felder für Aktivstatus, Menütext und Parameter enthält

• Layout-Grundgerüst aus GFM-GUI in bestehende Lösung kopieren

• Alle Felder des Layouts den neuen Tabellennamen zuordnen

> alle weiteren Schritte wie in der Beispiellösung beschrieben



3.4 - Erweiterungsmöglichkeiten der GUI und Navigation

• Verschiedene umschaltbare Designs
> neue Tabelle, z.B. „Skins“, alle Medienfelder normal (nicht global)

• Mehrsprachigkeit
> z.B. mehrere Beschriftungsfelder pro Menüpunkt

• Navigation in mehreren Fenstern
> Fenstermanagement, z.B. mit Wiederholfeldern.
> Abfrage des aktuellen Fensters im Script lay.HAUPTNAVIGATION

• Optimierte Layouts für iPhone
> analoge Vorgehensweise wie bei optimierten iPad-Layouts



Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages

Patrick Risch FileMaker Konferenz 2012 Salzburg
101 für Switcher www.ﬁlemaker-konferenz.com

FMK2012: Optimale Usability von Formular- und Listenlayouts in FileMaker (Go) von Markus Schall

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (17)

Mehr von Verein FM Konferenz

Mehr von Verein FM Konferenz (20)

FMK2012: Optimale Usability von Formular- und Listenlayouts in FileMaker (Go) von Markus Schall