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