fmk 2013, gestaltung von benutzeroberflächen, karsten risseeuw

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

“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.

Interface Design

Layout

Layout Gestaltungsraster Interpretationsrichtung Weissraum Hervorhebungen Navigation

Workflow

Layout

Layout

Layout

Layout

Topnavigation

Funktionen Inhalt Datenmaske

Logo

Topnavigation

Liste 1 Liste 2 Logo

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.

www.blindtextgenerator.de

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

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 Boot springen können, aber der Reisende hob

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

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

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

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 sich, umdrängten den Käfig und wollten sich gar nicht

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 sich, umdrängten den Käfig und wollten sich gar nicht

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 sich, umdrängten den Käfig und wollten sich gar nicht

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 sich, umdrängten den Käfig und wollten sich gar nicht

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 sich, umdrängten den Käfig und wollten sich gar nicht

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

Danke für das Bewerten dieses Vortrages

Vielen Dank unseren Sponsoren