SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Downloaden Sie, um offline zu lesen
Gestaltung von
Benutzeroberflächen
Gestaltungsgrundlagen
Gestaltung

«Because every person knows what he likes, every person thinks he is an
expert on user interfaces.»
Paul Heckel

Weil jeder weiss was ihm gefällt, denkt jeder er sei ein Experte auf
dem Gebiet der Benutzeroberflächen…
Gestaltung

Es ist nicht möglich, nicht zu gestalten.

Wer gestalten will, muss sehen lernen.
Gestaltungsansätze

!  Technische Lösung
!  Gestalterische Lösung
!  Zufällige Lösung
Es gibt viele mögliche Ansätze, nicht nur ein einziger Ansatz.
Gestaltung

«… Design sollte das Produkt sozusagen zum Sprechen bringen.»
Dieter Rams
Gestaltung

«Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästhetisch.
Gutes Design macht ein Produkt verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis ins letzte Detail.
Gutes Design ist…»
Dieter Rams
Gestaltung

«Design ist innovativ.
Gutes Design macht ein Produkt brauchbar.
Gutes Design ist ästhetisch.
Gutes Design macht ein Produkt verständlich.
Gutes Design ist unaufdringlich.
Gutes Design ist ehrlich.
Gutes Design ist langlebig.
Gutes Design ist konsequent bis ins letzte Detail.
Gutes Design ist…»
Dieter Rams
Gestaltung

innovativ
brauchbar
ästhetisch
verständlich
unaufdringlich
ehrlich
langlebig
konsequent

lösungsorientiert
dem Zweck angepasst
ansprechend
einfach
kein Kitsch
prätentionslos
klassisch
durchgängig
Interface Design

Idee entwickeln
Interface skizzieren
Interface umsetzen
Interface Design

Ideen müssen einfach sein

"Most programmers spend the first 5 years of their career mastering
complexity, and the rest of their lives learning simplicity."
Buzz Andersen

Die meisten Programmierer verwenden die ersten 5 Jahre Ihrer Karriere damit die
Komplexität zu meistern, und den Rest ihres Lebens damit, Einfachkeit zu lernen.
Interface Design

“Design is not just what it looks like and feels like.
Design is how it works."
Steve Jobs
Interface Design

“That's been one of my mantras - focus and simplicity. Simple can be
harder than complex: You have to work hard to get your thinking clean
to make it simple. But it's worth it in the end because once you get
there, you can move mountains."
Steve Jobs

Das war eines meiner Mantras – Fokus und Einfachkeit. Einfach kann schwieriger
sein als komplex: Man muss harte Arbeit leisten sein Denken zu befreien um es
einfach zu machen. Aber es ist es schlussendlich wert, weil, wenn Du soweit bist,
kannst Du Berge versetzen.
Layout

Layout
Gestaltungsraster
Interpretationsrichtung
Weissraum
Hervorhebungen
Navigation

Workflow
Layout
Layout
Layout
Layout
Logo
Funktionen

Topnavigation

Inhalt
Datenmaske
Topnavigation

Logo

Liste 1

Liste 2
Ressourcen

Bücher über Typografie, Magazingestaltung, usw.
Googlen nach «Gestaltungsraster», usw.
Auch Webentwickler nutzen ähnliche Tools:
modulargrid.org
grid.mindplay.dk
gridpak.com
3x4grid.com
Typografie

Schriftgestaltung
Typografie

Schriftwahl
Schriftgrösse
Schriftfarbe
Buchstabenabstand
Zeilenabstand
Zeilenlänge (Spaltenbreite)
Auszeichnungen (Titel, Untertitel, Hervorhebungen…)
Schriftwahl

Erstelle einen Blindtext mit
mehreren Zeilen. Nutze diese
für die Texteinstellungen in
Filemaker.

Vergleiche Texte miteinander in
den gleichen Einstellungen,
sowohl auf dem Bildschirm wie
im Ausdruck.

www.blindtextgenerator.de

Die Verwendung der Schrift ist
ausschlaggebend für die Wahl
der Schrift.
Jemand musste Josef K. verleumdet haben,
denn ohne dass er etwas Böses getan hätte,
wurde er eines Morgens verhaftet. »Wie ein
Hund! « sagte er, es war, als sollte die Scham
ihn überleben.
Als Gregor Samsa eines Morgens aus
unruhigen Träumen erwachte, fand er sich in
seinem Bett zu einem ungeheueren Ungeziefer
verwandelt. Und es war ihnen wie eine
Bestätigung ihrer neuen Träume und guten
Absichten, als am Ziele ihrer Fahrt die Tochter
als erste sich erhob und ihren jungen Körper
dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der
Offizier zu dem Forschungsreisenden und
überblickte mit einem gewissermaßen
bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben,
denn ohne dass er etwas Böses getan hätte,
wurde er eines Morgens verhaftet. »Wie ein
Hund! « sagte er, es war, als sollte die Scham
ihn überleben.
Als Gregor Samsa eines Morgens aus
unruhigen Träumen erwachte, fand er sich in
seinem Bett zu einem ungeheueren Ungeziefer
verwandelt. Und es war ihnen wie eine
Bestätigung ihrer neuen Träume und guten
Absichten, als am Ziele ihrer Fahrt die Tochter
als erste sich erhob und ihren jungen Körper
dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der
Offizier zu dem Forschungsreisenden und
überblickte mit einem gewissermaßen
bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins
Boot springen können, aber der Reisende hob
ein schweres, geknotetes Tau vom Boden,
drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben,
denn ohne dass er etwas Böses getan hätte,
wurde er eines Morgens verhaftet. »Wie ein
Hund! « sagte er, es war, als sollte die Scham
ihn überleben.
Als Gregor Samsa eines Morgens aus
unruhigen Träumen erwachte, fand er sich in
seinem Bett zu einem ungeheueren Ungeziefer
verwandelt. Und es war ihnen wie eine
Bestätigung ihrer neuen Träume und guten
Absichten, als am Ziele ihrer Fahrt die Tochter
als erste sich erhob und ihren jungen Körper
dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K.
verleumdet haben, denn ohne
dass er etwas Böses getan
hätte, wurde er eines Morgens
verhaftet. »Wie ein Hund! «
sagte er, es war, als sollte die
Scham ihn überleben.
Als Gregor Samsa eines
Morgens aus unruhigen
Träumen erwachte, fand er
sich in seinem Bett zu einem
ungeheueren Ungeziefer
verwandelt. Und es war ihnen
wie eine Bestätigung ihrer
neuen Träume und guten

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.
In den letzten Jahrzehnten ist das Interesse an
Hungerkünstlern sehr zurückgegangen. Aber sie überwanden

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne
dass er etwas Böses getan hätte, wurde er eines
Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als
sollte die Scham ihn überleben.
Als Gregor Samsa eines Morgens aus unruhigen
Träumen erwachte, fand er sich in seinem Bett zu einem
ungeheueren Ungeziefer verwandelt. Und es war ihnen
wie eine Bestätigung ihrer neuen Träume und guten
Absichten, als am Ziele ihrer Fahrt die Tochter als erste
sich erhob und ihren jungen Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier
zu dem Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot
springen können, aber der Reisende hob ein schweres,
geknotetes Tau vom Boden, drohte ihnen damit und
hielt sie dadurch von dem Sprunge ab.

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Leserlichkeit =

SCHRIFT+
Schriftgrösse + Zeichenabstand + Zeilenlänge + Zeilenabstand
Leserlichkeit =

SCHRIFT+
Schriftgrösse + Zeichenabstand + Zeilenlänge + Zeilenabstand
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.
In den letzten Jahrzehnten ist das Interesse an
Hungerkünstlern sehr zurückgegangen. Aber sie überwanden

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.
In den letzten Jahrzehnten ist das Interesse an
Hungerkünstlern sehr zurückgegangen. Aber sie überwanden

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.
In den letzten Jahrzehnten ist das Interesse an
Hungerkünstlern sehr zurückgegangen. Aber sie überwanden

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Jemand musste Josef K. verleumdet haben, denn ohne dass er
etwas Böses getan hätte, wurde er eines Morgens verhaftet.
»Wie ein Hund! « sagte er, es war, als sollte die Scham ihn
überleben.
Als Gregor Samsa eines Morgens aus unruhigen Träumen
erwachte, fand er sich in seinem Bett zu einem ungeheueren
Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer
Fahrt die Tochter als erste sich erhob und ihren jungen
Körper dehnte.
»Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem
Forschungsreisenden und überblickte mit einem
gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat. Sie hätten noch ins Boot springen
können, aber der Reisende hob ein schweres, geknotetes Tau
vom Boden, drohte ihnen damit und hielt sie dadurch von
dem Sprunge ab.
In den letzten Jahrzehnten ist das Interesse an
Hungerkünstlern sehr zurückgegangen. Aber sie überwanden

Schriftgrösse
Zeilenabstand
Zeilenbreite
…
Farbe

Farbgestaltung
Farbe

Farbe
Helligkeit 
Farbkontraste
Helligkeitskontraste
Farbe

Farbe lenkt hin – oder lenkt ab
Farbe
Farbe

Hervorheben (Orientierung)
Führen (Prozesse)
Lenken (Optionen)
Wo bin ich?
Was mache ich?
Wie finde ich zurück?
Ressourcen

Harmonische Farbpaletten finden und erstellen:
kuler.adobe.com/create/color-wheel/
colorschemedesigner.com
Ressourcen
Ressourcen

Die Farbauswahl in Mac erlaubt es,
eigene Farbpaletten anzulegen.
Workflow

Interaktionsgestaltung: 
- Logischer Programmaufbau
- Weniger Felder, Funktionen, usw., dafür workflow-orientiert.
- Orientierung
- Feedback
- Optionen nur da zeigen, wo sie nötig sind
Workflow

Eine Steinskulptur eines Künstlers entsteht dadurch, dass unnötiges
Material entfernt wird.
Workflow

Was geschieht in welcher Reihenfolge?
Was gehört zusammen?
Wie lässt sich das in der Gestaltung abbilden?

Der Schlüssel zu einer besseren Benutzeroberfläche:
Fragen stellen, sehen und hören üben.
Workflow

Unser Workflow ist hier vorerst zu Ende…

Gestaltung von Benutzeroberflächen – Grundlagen
Karsten Risseeuw, www.kursiv-software.com
Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages

Weitere ähnliche Inhalte

Andere mochten auch

FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...
FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...
FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...Verein FM Konferenz
 
FMK2016 - Arnold Kegebein - User Interface: Panel Window
FMK2016 - Arnold Kegebein - User Interface: Panel WindowFMK2016 - Arnold Kegebein - User Interface: Panel Window
FMK2016 - Arnold Kegebein - User Interface: Panel WindowVerein FM Konferenz
 
FMK2016 - Holger Darjus - Das Transistor-Prinzip
FMK2016 - Holger Darjus - Das Transistor-PrinzipFMK2016 - Holger Darjus - Das Transistor-Prinzip
FMK2016 - Holger Darjus - Das Transistor-PrinzipVerein FM Konferenz
 
FMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingFMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingVerein FM Konferenz
 
FMK 2013, Suchstrategien, Martin Braendle & Volker Krambich
FMK 2013, Suchstrategien, Martin Braendle & Volker KrambichFMK 2013, Suchstrategien, Martin Braendle & Volker Krambich
FMK 2013, Suchstrategien, Martin Braendle & Volker KrambichVerein FM Konferenz
 
Präsentation winterbilder
Präsentation winterbilderPräsentation winterbilder
Präsentation winterbilderDaniel Kamm
 
FMK 2013 Entwickler Werkzeuge, Marcel Moré
FMK 2013 Entwickler Werkzeuge, Marcel MoréFMK 2013 Entwickler Werkzeuge, Marcel Moré
FMK 2013 Entwickler Werkzeuge, Marcel MoréVerein FM Konferenz
 
Portalserver Meets SOA: State of the Portal Art
Portalserver Meets SOA:  State of the Portal ArtPortalserver Meets SOA:  State of the Portal Art
Portalserver Meets SOA: State of the Portal Artadesso AG
 

Andere mochten auch (12)

FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...
FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...
FMK2015: Strukturierte Namensgebung als Basis für komplexe Programmierung by ...
 
FMK2016 - Arnold Kegebein - User Interface: Panel Window
FMK2016 - Arnold Kegebein - User Interface: Panel WindowFMK2016 - Arnold Kegebein - User Interface: Panel Window
FMK2016 - Arnold Kegebein - User Interface: Panel Window
 
FMK2016 - Holger Darjus - Das Transistor-Prinzip
FMK2016 - Holger Darjus - Das Transistor-PrinzipFMK2016 - Holger Darjus - Das Transistor-Prinzip
FMK2016 - Holger Darjus - Das Transistor-Prinzip
 
FMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - RecyclingFMK2016 - Arnold Kegebein - Recycling
FMK2016 - Arnold Kegebein - Recycling
 
FMK 2013, Suchstrategien, Martin Braendle & Volker Krambich
FMK 2013, Suchstrategien, Martin Braendle & Volker KrambichFMK 2013, Suchstrategien, Martin Braendle & Volker Krambich
FMK 2013, Suchstrategien, Martin Braendle & Volker Krambich
 
Präsentation winterbilder
Präsentation winterbilderPräsentation winterbilder
Präsentation winterbilder
 
FMK 2013 Entwickler Werkzeuge, Marcel Moré
FMK 2013 Entwickler Werkzeuge, Marcel MoréFMK 2013 Entwickler Werkzeuge, Marcel Moré
FMK 2013 Entwickler Werkzeuge, Marcel Moré
 
Pitch deck
Pitch deckPitch deck
Pitch deck
 
Portalserver Meets SOA: State of the Portal Art
Portalserver Meets SOA:  State of the Portal ArtPortalserver Meets SOA:  State of the Portal Art
Portalserver Meets SOA: State of the Portal Art
 
Technik verständlich kommunizieren - TA01-20-A
Technik verständlich kommunizieren - TA01-20-ATechnik verständlich kommunizieren - TA01-20-A
Technik verständlich kommunizieren - TA01-20-A
 
Meg 1
Meg 1Meg 1
Meg 1
 
Test
TestTest
Test
 

Mehr von Verein FM Konferenz

FMK2022 Excel und FileMaker Schittko.pdf
FMK2022 Excel und FileMaker Schittko.pdfFMK2022 Excel und FileMaker Schittko.pdf
FMK2022 Excel und FileMaker Schittko.pdfVerein FM Konferenz
 
FMK2022 Drucken über Dateigrenzen hinweg von Philipp Puls
FMK2022 Drucken über Dateigrenzen hinweg von Philipp PulsFMK2022 Drucken über Dateigrenzen hinweg von Philipp Puls
FMK2022 Drucken über Dateigrenzen hinweg von Philipp PulsVerein FM Konferenz
 
FMK2022 Custom Functions von Philipp Puls
FMK2022 Custom Functions von Philipp PulsFMK2022 Custom Functions von Philipp Puls
FMK2022 Custom Functions von Philipp PulsVerein FM Konferenz
 
FMK2022 FileMaker Fehler von Martin Schwarz
FMK2022 FileMaker Fehler von Martin SchwarzFMK2022 FileMaker Fehler von Martin Schwarz
FMK2022 FileMaker Fehler von Martin SchwarzVerein FM Konferenz
 
FMK2022 FileMaker Server unter Linux Workshop von Bernhard Schulz
FMK2022 FileMaker Server unter Linux Workshop von Bernhard SchulzFMK2022 FileMaker Server unter Linux Workshop von Bernhard Schulz
FMK2022 FileMaker Server unter Linux Workshop von Bernhard SchulzVerein FM Konferenz
 
FMK2022 FileMaker DataAPI und Java von Bernhard Schulz
FMK2022 FileMaker DataAPI und Java von Bernhard SchulzFMK2022 FileMaker DataAPI und Java von Bernhard Schulz
FMK2022 FileMaker DataAPI und Java von Bernhard SchulzVerein FM Konferenz
 
FMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam AugustingFMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam AugustingVerein FM Konferenz
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinVerein FM Konferenz
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserVerein FM Konferenz
 
FMK2022 Dokumentation - Thomas Hirt
FMK2022 Dokumentation - Thomas HirtFMK2022 Dokumentation - Thomas Hirt
FMK2022 Dokumentation - Thomas HirtVerein FM Konferenz
 
FMK2022 CustomFunctions Fuer Einsteiger - Thomas Hirt
FMK2022 CustomFunctions Fuer Einsteiger - Thomas HirtFMK2022 CustomFunctions Fuer Einsteiger - Thomas Hirt
FMK2022 CustomFunctions Fuer Einsteiger - Thomas HirtVerein FM Konferenz
 
FMK2022 FileMaker Integrated Development Environment - Russell Watson
FMK2022 FileMaker Integrated Development Environment - Russell WatsonFMK2022 FileMaker Integrated Development Environment - Russell Watson
FMK2022 FileMaker Integrated Development Environment - Russell WatsonVerein FM Konferenz
 
FMK2022 Datenschutz DSGVO Christoph Kluss
FMK2022 Datenschutz DSGVO Christoph KlussFMK2022 Datenschutz DSGVO Christoph Kluss
FMK2022 Datenschutz DSGVO Christoph KlussVerein FM Konferenz
 
FMK2022 Rechnungen Inkasso - Christoph Kluss
FMK2022 Rechnungen Inkasso - Christoph KlussFMK2022 Rechnungen Inkasso - Christoph Kluss
FMK2022 Rechnungen Inkasso - Christoph KlussVerein FM Konferenz
 
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdf
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdfFMK2022 Die Zukunft von FileMaker - Marcel Moré.pdf
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdfVerein FM Konferenz
 
FMK2019 bug off lightning talk by Russell Watson
FMK2019 bug off lightning talk by Russell WatsonFMK2019 bug off lightning talk by Russell Watson
FMK2019 bug off lightning talk by Russell WatsonVerein FM Konferenz
 
FMK2019 being an optimist in a pessimistic world by vincenzo menanno
FMK2019 being an optimist in a pessimistic world by vincenzo menannoFMK2019 being an optimist in a pessimistic world by vincenzo menanno
FMK2019 being an optimist in a pessimistic world by vincenzo menannoVerein FM Konferenz
 
FMK2019 FileMaker Performance Update 2019 by HOnza Koudelka
FMK2019 FileMaker Performance Update 2019 by HOnza KoudelkaFMK2019 FileMaker Performance Update 2019 by HOnza Koudelka
FMK2019 FileMaker Performance Update 2019 by HOnza KoudelkaVerein FM Konferenz
 
FMK2019 Hardware Integrated by HOnza Koudelka
FMK2019 Hardware Integrated by HOnza KoudelkaFMK2019 Hardware Integrated by HOnza Koudelka
FMK2019 Hardware Integrated by HOnza KoudelkaVerein FM Konferenz
 
Fmk2019 Produktentwicklung mit FileMaker by Harald Mair
Fmk2019 Produktentwicklung mit FileMaker by Harald MairFmk2019 Produktentwicklung mit FileMaker by Harald Mair
Fmk2019 Produktentwicklung mit FileMaker by Harald MairVerein FM Konferenz
 

Mehr von Verein FM Konferenz (20)

FMK2022 Excel und FileMaker Schittko.pdf
FMK2022 Excel und FileMaker Schittko.pdfFMK2022 Excel und FileMaker Schittko.pdf
FMK2022 Excel und FileMaker Schittko.pdf
 
FMK2022 Drucken über Dateigrenzen hinweg von Philipp Puls
FMK2022 Drucken über Dateigrenzen hinweg von Philipp PulsFMK2022 Drucken über Dateigrenzen hinweg von Philipp Puls
FMK2022 Drucken über Dateigrenzen hinweg von Philipp Puls
 
FMK2022 Custom Functions von Philipp Puls
FMK2022 Custom Functions von Philipp PulsFMK2022 Custom Functions von Philipp Puls
FMK2022 Custom Functions von Philipp Puls
 
FMK2022 FileMaker Fehler von Martin Schwarz
FMK2022 FileMaker Fehler von Martin SchwarzFMK2022 FileMaker Fehler von Martin Schwarz
FMK2022 FileMaker Fehler von Martin Schwarz
 
FMK2022 FileMaker Server unter Linux Workshop von Bernhard Schulz
FMK2022 FileMaker Server unter Linux Workshop von Bernhard SchulzFMK2022 FileMaker Server unter Linux Workshop von Bernhard Schulz
FMK2022 FileMaker Server unter Linux Workshop von Bernhard Schulz
 
FMK2022 FileMaker DataAPI und Java von Bernhard Schulz
FMK2022 FileMaker DataAPI und Java von Bernhard SchulzFMK2022 FileMaker DataAPI und Java von Bernhard Schulz
FMK2022 FileMaker DataAPI und Java von Bernhard Schulz
 
FMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam AugustingFMK2022 Neue Programmiertechniken von Adam Augusting
FMK2022 Neue Programmiertechniken von Adam Augusting
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam Augustin
 
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert KaiserFMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
FMK2022 Arbeiten mit SVG in FileMaker - Robert Kaiser
 
FMK2022 Dokumentation - Thomas Hirt
FMK2022 Dokumentation - Thomas HirtFMK2022 Dokumentation - Thomas Hirt
FMK2022 Dokumentation - Thomas Hirt
 
FMK2022 CustomFunctions Fuer Einsteiger - Thomas Hirt
FMK2022 CustomFunctions Fuer Einsteiger - Thomas HirtFMK2022 CustomFunctions Fuer Einsteiger - Thomas Hirt
FMK2022 CustomFunctions Fuer Einsteiger - Thomas Hirt
 
FMK2022 FileMaker Integrated Development Environment - Russell Watson
FMK2022 FileMaker Integrated Development Environment - Russell WatsonFMK2022 FileMaker Integrated Development Environment - Russell Watson
FMK2022 FileMaker Integrated Development Environment - Russell Watson
 
FMK2022 Datenschutz DSGVO Christoph Kluss
FMK2022 Datenschutz DSGVO Christoph KlussFMK2022 Datenschutz DSGVO Christoph Kluss
FMK2022 Datenschutz DSGVO Christoph Kluss
 
FMK2022 Rechnungen Inkasso - Christoph Kluss
FMK2022 Rechnungen Inkasso - Christoph KlussFMK2022 Rechnungen Inkasso - Christoph Kluss
FMK2022 Rechnungen Inkasso - Christoph Kluss
 
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdf
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdfFMK2022 Die Zukunft von FileMaker - Marcel Moré.pdf
FMK2022 Die Zukunft von FileMaker - Marcel Moré.pdf
 
FMK2019 bug off lightning talk by Russell Watson
FMK2019 bug off lightning talk by Russell WatsonFMK2019 bug off lightning talk by Russell Watson
FMK2019 bug off lightning talk by Russell Watson
 
FMK2019 being an optimist in a pessimistic world by vincenzo menanno
FMK2019 being an optimist in a pessimistic world by vincenzo menannoFMK2019 being an optimist in a pessimistic world by vincenzo menanno
FMK2019 being an optimist in a pessimistic world by vincenzo menanno
 
FMK2019 FileMaker Performance Update 2019 by HOnza Koudelka
FMK2019 FileMaker Performance Update 2019 by HOnza KoudelkaFMK2019 FileMaker Performance Update 2019 by HOnza Koudelka
FMK2019 FileMaker Performance Update 2019 by HOnza Koudelka
 
FMK2019 Hardware Integrated by HOnza Koudelka
FMK2019 Hardware Integrated by HOnza KoudelkaFMK2019 Hardware Integrated by HOnza Koudelka
FMK2019 Hardware Integrated by HOnza Koudelka
 
Fmk2019 Produktentwicklung mit FileMaker by Harald Mair
Fmk2019 Produktentwicklung mit FileMaker by Harald MairFmk2019 Produktentwicklung mit FileMaker by Harald Mair
Fmk2019 Produktentwicklung mit FileMaker by Harald Mair
 

FMK 2013, Gestaltung von Benutzeroberflächen, Karsten Risseeuw

  • 2. Gestaltung «Because every person knows what he likes, every person thinks he is an expert on user interfaces.» Paul Heckel Weil jeder weiss was ihm gefällt, denkt jeder er sei ein Experte auf dem Gebiet der Benutzeroberflächen…
  • 3. Gestaltung Es ist nicht möglich, nicht zu gestalten. Wer gestalten will, muss sehen lernen.
  • 4. Gestaltungsansätze !  Technische Lösung !  Gestalterische Lösung !  Zufällige Lösung Es gibt viele mögliche Ansätze, nicht nur ein einziger Ansatz.
  • 5.
  • 6. Gestaltung «… Design sollte das Produkt sozusagen zum Sprechen bringen.» Dieter Rams
  • 7. Gestaltung «Design ist innovativ. Gutes Design macht ein Produkt brauchbar. Gutes Design ist ästhetisch. Gutes Design macht ein Produkt verständlich. Gutes Design ist unaufdringlich. Gutes Design ist ehrlich. Gutes Design ist langlebig. Gutes Design ist konsequent bis ins letzte Detail. Gutes Design ist…» Dieter Rams
  • 8. Gestaltung «Design ist innovativ. Gutes Design macht ein Produkt brauchbar. Gutes Design ist ästhetisch. Gutes Design macht ein Produkt verständlich. Gutes Design ist unaufdringlich. Gutes Design ist ehrlich. Gutes Design ist langlebig. Gutes Design ist konsequent bis ins letzte Detail. Gutes Design ist…» Dieter Rams
  • 10. Interface Design Idee entwickeln Interface skizzieren Interface umsetzen
  • 11. Interface Design Ideen müssen einfach sein "Most programmers spend the first 5 years of their career mastering complexity, and the rest of their lives learning simplicity." Buzz Andersen Die meisten Programmierer verwenden die ersten 5 Jahre Ihrer Karriere damit die Komplexität zu meistern, und den Rest ihres Lebens damit, Einfachkeit zu lernen.
  • 12. Interface Design “Design is not just what it looks like and feels like. Design is how it works." Steve Jobs
  • 13. Interface Design “That's been one of my mantras - focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains." Steve Jobs Das war eines meiner Mantras – Fokus und Einfachkeit. Einfach kann schwieriger sein als komplex: Man muss harte Arbeit leisten sein Denken zu befreien um es einfach zu machen. Aber es ist es schlussendlich wert, weil, wenn Du soweit bist, kannst Du Berge versetzen.
  • 15.
  • 16.
  • 17.
  • 22.
  • 23.
  • 26.
  • 27. Ressourcen Bücher über Typografie, Magazingestaltung, usw. Googlen nach «Gestaltungsraster», usw. Auch Webentwickler nutzen ähnliche Tools: modulargrid.org grid.mindplay.dk gridpak.com 3x4grid.com
  • 30. Schriftwahl Erstelle einen Blindtext mit mehreren Zeilen. Nutze diese für die Texteinstellungen in Filemaker. Vergleiche Texte miteinander in den gleichen Einstellungen, sowohl auf dem Bildschirm wie im Ausdruck. www.blindtextgenerator.de Die Verwendung der Schrift ist ausschlaggebend für die Wahl der Schrift.
  • 31. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Schriftgrösse Zeilenabstand Zeilenbreite …
  • 32. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. Schriftgrösse Zeilenabstand Zeilenbreite …
  • 33. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Schriftgrösse Zeilenabstand Zeilenbreite …
  • 34. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Schriftgrösse Zeilenabstand Zeilenbreite …
  • 35. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden Schriftgrösse Zeilenabstand Zeilenbreite …
  • 36. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. Schriftgrösse Zeilenabstand Zeilenbreite …
  • 37. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. Schriftgrösse Zeilenabstand Zeilenbreite …
  • 38. Leserlichkeit = SCHRIFT+ Schriftgrösse + Zeichenabstand + Zeilenlänge + Zeilenabstand
  • 39. Leserlichkeit = SCHRIFT+ Schriftgrösse + Zeichenabstand + Zeilenlänge + Zeilenabstand
  • 40. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden Schriftgrösse Zeilenabstand Zeilenbreite …
  • 41. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden Schriftgrösse Zeilenabstand Zeilenbreite …
  • 42. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden Schriftgrösse Zeilenabstand Zeilenbreite …
  • 43. Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund! « sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzehnten ist das Interesse an Hungerkünstlern sehr zurückgegangen. Aber sie überwanden Schriftgrösse Zeilenabstand Zeilenbreite …
  • 46. Farbe Farbe lenkt hin – oder lenkt ab
  • 47. Farbe
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56. Farbe Hervorheben (Orientierung) Führen (Prozesse) Lenken (Optionen) Wo bin ich? Was mache ich? Wie finde ich zurück?
  • 57.
  • 58.
  • 59.
  • 60.
  • 61. Ressourcen Harmonische Farbpaletten finden und erstellen: kuler.adobe.com/create/color-wheel/ colorschemedesigner.com
  • 63. Ressourcen Die Farbauswahl in Mac erlaubt es, eigene Farbpaletten anzulegen.
  • 64. Workflow Interaktionsgestaltung: - Logischer Programmaufbau - Weniger Felder, Funktionen, usw., dafür workflow-orientiert. - Orientierung - Feedback - Optionen nur da zeigen, wo sie nötig sind
  • 65. Workflow Eine Steinskulptur eines Künstlers entsteht dadurch, dass unnötiges Material entfernt wird.
  • 66. Workflow Was geschieht in welcher Reihenfolge? Was gehört zusammen? Wie lässt sich das in der Gestaltung abbilden? Der Schlüssel zu einer besseren Benutzeroberfläche: Fragen stellen, sehen und hören üben.
  • 67. Workflow Unser Workflow ist hier vorerst zu Ende… Gestaltung von Benutzeroberflächen – Grundlagen Karsten Risseeuw, www.kursiv-software.com
  • 68. Vielen Dank unseren Sponsoren Danke für das Bewerten dieses Vortrages