FMK2017 - GUI Tipps für mobile Lösungen by Robert Kaiser

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

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

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

GUI Tipps für mobile Lösungen
inkl. Tipps für FileMaker Pro und FileMaker WebDirect

In diesem Vortrag werden…
Design
Design Patterns
Farbenlehre
goldener Schnitt
Raster
CSS-Hacks
MagicValueList
Themes und Styles
UX & Workflow
NICHT explizit behandelt, …

sondern:
Praktische Erfahrungen / Erkenntnisse
bei Aufbau von GUI für Lösungen
• FileMaker Go / Pro / WebDirect

• am besten mit Standard Bordmittel

Erkenne die Möglichkeiten –

kenne die Limits

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

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

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“

„Don’t let me think“ (Steve Krug)
Für alle Lösungen sollte gelten:

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?

• 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

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

Werkzeuge für Layouterstellung  
in FileMaker

Werkzeuge für Layouterstellung
Verwende Design und Stile
• Zentraler Verwaltung von Objekten

• Performance Vorteil

• Vorteil bei Wartung und Anpassungen

Verwende Status Zustände der Buttons und Elemente
• ist wichtiges Feedback für den Anwender

• Gestaltungselement

DEMO 1

Verwende Raster
• Optisch, für die Qualität der Layouts (das Auge sucht nach Muster)

• um die Erstellung und Wartung von Layouts zu vereinfachen

DEMO 2

• Symbole

• Berechnete Formeln
DEMO 3
• Symbole

• Formatierter Text

• <<Platzhalter>>
Tasten vs Tastenleiste

Tasten vs Tastenleiste
• Symbole

• Formatierter Text

• <<Platzhalter>>
• Symbole


• Zeichenformatierung per
Berechnung möglich!
• Rahmen und Trennlinien werden
anders berechnet

• Tastensegmente passen sich der
Gesamtgröße an

Platzhalter vs Tastenleiste
• keine Symbole


Berechnung möglich! (mit
Einschränkung)

• Symbole


Berechnung möglich!
• Rahmen und Trennlinien werden
anders berechnet

• Tastensegmente passen sich der
Gesamtgröße an

DEMO 4

Markierungsfelder und Optionsfelder
• Gestaltungsmöglichkeiten in FileMaker eingeschränkt (Rahmenabstand)

• Alternative sind Tasten mit SVG Symbole

DEMO 5

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

DEMO 6

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

Bildschirmaktualisierung

DEMO 7

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

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

Beispiel Lösungen

aus der Praxis

Fragen?

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

Vielen Dank unseren Sponsoren

FMK2017 - GUI Tipps für mobile Lösungen by Robert Kaiser

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to FMK2017 - GUI Tipps für mobile Lösungen by Robert Kaiser

Similar to FMK2017 - GUI Tipps für mobile Lösungen by Robert Kaiser (20)

More from Verein FM Konferenz

More from Verein FM Konferenz (20)

FMK2017 - GUI Tipps für mobile Lösungen by Robert Kaiser