FMK2012: Optimale Usability von Formular- und Listenlayouts in FileMaker (Go) von Markus Schall
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,472 views

Gedanken zur optimalen GUI und Navigation für FileMaker-Layouts auf Desktops und mobilen Endgeräten. ...

Gedanken zur optimalen GUI und Navigation für FileMaker-Layouts auf Desktops und mobilen Endgeräten.

Ein Vortrag im Rahmen der FileMaker Konferenz 2012 in Salzburg, Österreich.

Demo-Datei Download unter: http://www.filemaker-konferenz.com/2012/downloads.php

Statistics

Views

Total Views
1,472
Views on SlideShare
1,274
Embed Views
198

Actions

Likes
0
Downloads
60
Comments
0

1 Embed 198

http://www.markus-schall.de 198

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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.filemaker-konferenz.com
  • FileMaker Konferenz2010 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 Bildschirmauflösungen • Flexiblere Steuerungsmöglichkeiten, z.B. Ausblenden von Layouts device- oder benutzerbezogen Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Themen dieser Session: 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Themen dieser Session: 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.1 - Statische Schaltflächen als Taste auf einem FileMaker-Layout Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.1 - Statische Schaltflä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 unflexibel Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.2 - Textelemente und/oder Grafiken aus Datenbank Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.2 - Textelemente und/oder Grafiken 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.3 - Grafiken, Textelemente und Navigation aus der Datenbank Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.3 - Grafiken, Textelemente und Navigation aus der Datenbank Vorteile: • Flexible Optik durch Grafiken 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 Schaltflächen Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.4 - Alternative: Hierarchien mit FM-Explorer (Jens Liebelt) Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 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 Schaltflächen • Sinnvolle optische Darstellung nur vertikal möglich • Theoretisches Verständnis über Root/Nodes erforderlich Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 1.5 - Alternative: Navigation mit JQuery im FileMaker Webviewer Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Exkurs: Möglichkeiten der Navigation 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 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 - Tabellenstruktur einer datenbankgesteuerten Navigation 2.5 - Maske "scr.Navigation" zur Verwaltung von Layouts 2.6 - Script "lay.HAUPTNAVIGATION" und Script "sys.GUI_Menüaufbau" Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grundlagen der Entwicklung grafischer Benutzeroberflächen 2.1 - Studien zur Entwicklung von GUIs Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grundlagen der Entwicklung grafischer Benutzeroberflächen 2.1 - Studie zur Entwicklung grafischer Benutzeroberflä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) Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.2 - Tabellenaufbau für Schaltflächen und ggf. Beschriftungen Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.2 - Tabellenaufbau für Schaltflächen und ggf. Beschriftungen • Benötigte Felder: > Textfelder für Tastenbeschriftungen > Textfelder für Scriptparameter > Medienfelder für grafisches Element der Taste • Alle Felder global, sonst keine Anzeige im Suchen-Modus • Entweder jeweils einzelne Felder oder Wiederholfelder (global) • Alle Felder befinden sich in zentral aufrufbarer Datentabelle Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.3 - Tabellenaufbau für eine datenbankgesteuerte Navigation Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.3 - Tabellenaufbau für eine datenbankgesteuerte Navigation • 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 grafisches Element der Taste • Keine globalen Felder, da Layoutinformationen pro Datensatz • Entweder jeweils einzelne Felder oder Wiederholfelder Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.4 - Tabellenstruktur einer datenbankgesteuerten Navigation Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.4 - Tabellenstruktur einer datenbankgesteuerten Navigation • 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.5 - Layoutverwaltung über die Maske "scr.Navigation" Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.5 - Layoutverwaltung über die Maske "scr.Navigation" Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 2.6 - Script "lay.HAUPTNAVIGATION" • Pro Layout ein Script-Snipet: Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 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 Schaltflä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. Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 3. Die Beispiellösung „GFM-GUI“ * Praktischer Teil * Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 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. Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Grafische Benutzeroberfläche mit datenbankbasierter Navigation 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 Markus Schall • goFileMaker.de FileMaker Konferenz 2012 Salzburg Optimale Usability von Formular- und Listenlayouts www.filemaker-konferenz.com
  • FileMaker Konferenz2010 Vielen Dank unseren Sponsoren Danke für das Bewerten dieses Vortrages Patrick Risch FileMaker Konferenz 2012 Salzburg 101 für Switcher www.filemaker-konferenz.com