Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

145 views

Published on

Robert Kaiser zeigt Tipps für Layoutgestaltung und Eingabemöglichkeiten in FileMaker aus der Praxis

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 1
  19. 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. 20. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 2
  21. 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. 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. 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. 24. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 4
  25. 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. 26. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 5
  27. 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. 28. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 6
  29. 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. 30. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at Bildschirmaktualisierung
  31. 31. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at DEMO 7
  32. 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. 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. 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. 35. 8. FileMaker Konferenz | Salzburg | 12.-14. Oktober 2017 GUI Tipps für mobile Lösungen | Robert Kaiser, www.karo.at Fragen?
  36. 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. 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. 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

×