1.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
www.filemaker-konferenz.com
Ein Vortrag von Robert Kaiser
GUI Tipps für mobile Lösungen

2.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Robert Kaiser
• zertifizierter FileMaker Entwickler (ab Version 10)
• FBA Mitglied
• Werbegrafiker seit 1993
• FileMaker Entwicklung seit 1996
• Autor für FileMaker Magazin
• Sprecher auf FileMaker Konferenz
2012, 2013, 2016
Robert Kaiser – karo.at

3.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
karo productions
• individuelle Lösungen auf der Basis von
FileMaker Pro/Go/WebDirect
• DTP-Workflow-Optimierung
• Schulungen (Adobe InDesign, Photoshop, u.a.)
• Focus auf mobile Lösungen
• FMM Award 2014, Beste FileMaker Lösung
Robert Kaiser – karo.at

4.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
GUI Tipps für mobile Lösungen
inkl. Tipps für FileMaker Pro und FileMaker WebDirect

5.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
In diesem Vortrag werden…
Design
Design Patterns
Farbenlehre
goldener Schnitt
Raster
CSS-Hacks
MagicValueList
Themes und Styles
UX & Workflow
NICHT explizit behandelt, …

6.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
sondern:
Praktische Erfahrungen / Erkenntnisse
bei Aufbau von GUI für Lösungen
• FileMaker Go / Pro / WebDirect
• am besten mit Standard Bordmittel

7.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Erkenne die Möglichkeiten –
kenne die Limits

8.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Kenne Möglichkeiten / kenne Limits
Auszug aus dem FileMaker Baukasten für Layouterstellung:
• Tasten-Objekte (Gruppen), Tasten und Tastenleisten
• Felder vs. Texte mit <<Platzhalter>> vs. Platzhalter in Felder
• Seiten- vs. Registersteuerelement
• Karten vs. Popover
• „Bedingte Formatierung“ vs. „Objekt ausblenden, wenn“
• $Variablen vs. $$Variablen vs. global gespeicherte Felder

9.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Kenne Möglichkeiten / kenne Limits
Hier gibt es Unterschiede beim Verhalten:
• Limit (z.B. Tasten vs. Tastenleisten)
• Kontext (z.B. Popover vs Karten)
• Zeitpunkt der Berechnung (z.B. $$Variablen vs. globale Felder)
• Performance

10.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Wann setze ich was ein?
Was ist die Aufgabe der Lösungen?
Auf welcher Plattform soll die Lösung laufen?
• Reduziere Objekte insbesonders für WebDirect
Wer ist die Zielgruppe?
• Ist schnelle Eingabe nötig (Erfassung bei „Kassa“)
• „Einfacher“ oder „Power-User“

11.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
„Don’t let me think“ (Steve Krug)
Für alle Lösungen sollte gelten:

12.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Wann setze ich was ein?
Nicht von eigenen Vorlieben auf den End-Anwender schliessen!
• Navigations (z.B. Modulwechsel) Menü, Maus, Tastatur?
• Suche über FileMaker Suche, Schnellsuche, oder vordefinierte
Mengenabfrage?
• Slider -> oder Pfeile?
• Macht Datensatzwechsel per Wisch-Geste in der App Sinn?

13.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Wann setze ich was ein?
• Ein bestimmtes Feature sollte nie zum Selbstzweck eingesetzt werden
• Es muss für den aktuellen Workflow nötig oder brauchbar sein
• Die gesamte Oberfläche der Lösung sollte konsistent sein
(Popover Dialog vs. Karten)
• Auch den Aufwand für Wartung oder Erweiterung der Lösung sollte
berücksichtigt werden
• Performance berücksichtigen

14.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Wann setze ich was ein?
Focus auf das Wesentliche!
• „Hintergrundrauschen“ entfernen („Objekt ausblenden, wenn“)
• Gilt für mobile Lösungen um so mehr
• In welchem Modus befindet sich der Anwender
(Informationen anzeigen oder bearbeiten?)
• Den Anwender bei der Eingabe unterstützen
• Bei mobiler Eingabe -> immer virtuelle Tastatur berücksichtigen

15.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
in FileMaker

16.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Verwende Design und Stile
• Zentraler Verwaltung von Objekten
• Performance Vorteil
• Vorteil bei Wartung und Anpassungen

17.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Verwende Status Zustände der Buttons und Elemente
• ist wichtiges Feedback für den Anwender
• Gestaltungselement

18.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 1

19.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Verwende Raster
• Optisch, für die Qualität der Layouts (das Auge sucht nach Muster)
• um die Erstellung und Wartung von Layouts zu vereinfachen

20.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 2

21.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
• Symbole
• Berechnete Formeln
DEMO 3
• Symbole
• Formatierter Text
• <<Platzhalter>>
Tasten vs Tastenleiste

22.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Tasten vs Tastenleiste
Werkzeuge für Layouterstellung
• Symbole
• Formatierter Text
• <<Platzhalter>>
• Symbole
• Berechnete Formeln
• Zeichenformatierung per
Berechnung möglich!
• Rahmen und Trennlinien werden
anders berechnet
• Tastensegmente passen sich der
Gesamtgröße an

23.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Platzhalter vs Tastenleiste
Werkzeuge für Layouterstellung
• keine Symbole
• Berechnete Formeln
• Zeichenformatierung per
Berechnung möglich! (mit
Einschränkung)
• Symbole
• Berechnete Formeln
• Zeichenformatierung per
Berechnung möglich!
• Rahmen und Trennlinien werden
anders berechnet
• Tastensegmente passen sich der
Gesamtgröße an

24.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 4

25.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Markierungsfelder und Optionsfelder
• Gestaltungsmöglichkeiten in FileMaker eingeschränkt (Rahmenabstand)
• Alternative sind Tasten mit SVG Symbole

26.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 5

27.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Popover
• Vielfältig einsetzbar z.B. als
• Auswahlfenster (Artikel, Positionen)
• Darstellung detaillierter Information (Fotogrossansicht, PDF Ansicht)
• lässt sich auch modal einsetzen
Beachten:
• Immer im Kontext des Ursprungsfenster (Tabellenauftreten)
• Ist Erweiterung des Layoutbereichs, daher können keine Portale in Portal
angezeigt werden

28.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 6

29.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Werkzeuge für Layouterstellung
Fenstertyp Karten
• Vielfältig einsetzbar z.B. als
• Auswahl- und Suchelement (für Artikel, Positionen)
• Darstellung detaillierter Information (Fotogrossansicht, PDF Ansicht)
• Dialog
• Werteliste
• Statusinformation oder Fortschrittsbalken, etc.
Beachten:
• Verlässt Kontext des Ursprungsfenster
• Ist nur modal gegenüber des Ursprungsfenster
• Kann nicht transparent sein und ist immer rechteckig

30.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Bildschirmaktualisierung

31.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
DEMO 7

32.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Bildschirmaktualisierung
Objekteigenschaften und Berechnungen werden zu unterschiedlichen
Zeitpunkten aktualisiert, das betrifft u.a.
• Berechnung der bedingten Formatierung
• Berechnung „Objekt ausblenden, wenn“
• Berechnung Platzhalter
• Berechnung in Abhängigkeit von $$Variable
• Berechnung in Abhängigkeit von $Variable
• Berechnung in Abhängigkeit von Feldern
• Berechnung in Seitenansicht

33.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Bildschirmaktualisierung
Möglichkeiten der Bildschirmaktualisierung der Oberfläche
• Scriptschritt „Fenster aktualisieren“ (nicht zu empfehlen)
• Scriptschritt „Objekt aktualisieren“
• Scriptschritt „Ausschnitt aktualisieren“
• Verwendung von global gespeicherten Feldern anstatt von $$Variablen

34.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Beispiel Lösungen
aus der Praxis

35.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Fragen?

36.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Weiterführende Links

37.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Weiterführende Links
Weiterführende Links
• Human Interface Guidelines
https://developer.apple.com/design/
• FileMaker Developer Conference 2017 Videos
https://www.youtube.com/user/filemakerinc/playlists
Bücher
• Steve Krug: Don’t make me think! Web Usability
• Theresa Neil: Mobile Design Pattern Gallery

38.
8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017
GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at
Vielen Dank unseren Sponsoren