Screendesign Einführung, Goldener Schnitt, Drittel Regel, Raster, Usability Design Fehler. Dipl. Ing. Dr. Alexander Berzler

Transkript

1 Screendesign Einführung, Goldener Schnitt, Drittel Regel, Raster, Usability Design Fehler Dipl. Ing. Dr. Alexander Berzler

2 Screendesign Screen + Design : Als Screendesign werden Layouts verstanden, die speziell auf die Präsentation von Inhalten auf Monitoren ausgerichtet sind. Arbeitsfelder: 1. Screendesign einer Software: Betriebssystemsoftware, Computer /Videospiele, Website, CD ROM / DVD Produktion etc. 2. Screendesign für Hardware Produkte: Displays, Handys, Automaten, Haushaltsgeräte und weiteren Informations und Steuerungssysteme (wie Kiosksysteme, Fahrgastinformationssysteme, Personenleitsysteme) 2

3 Screendesign Im Screendesign vermischen sich Technik & Gestaltung nach dem Prinzip Form follows function. Die Herausforderung jedes Screendesigns muss darin liegen, Design und Interaktion zu einem funktionalem Ganzen zu formen. Abbildung: Ein Interface kann aus mehreren Elementen bestehen bzw. auf mehreren Ebenen eine Einflussnahme bieten. Am Ende erhält man Inhalte und Ereignisse bzw. Ergebnisse. 3

4 Screendesign Screendesign ist eine Herausforderung: Der Designer / die Designerin muss sowohl gestalterisch/künstlerisch mit Formen und Farben umgehen können (Gespür nur bedingt erlernbar), das technische Know How (Umsetzung der Ideen bedingt technische Fähigkeiten im DTP Bereich) und Wissen über das Funktionieren von Interaktionssystemen (Usability, Human Computer Interaction) mitbringen. Dies bedingt auch das Wissen über die Zielgruppe. Screendesigner sind somit Spezialisten für Benutzerführung, Navigation und zielgruppenspezifisches Design (z.b. nach Einsatzzweck, Alter der User, für Sehbehinderte, Analphabeten etc.). Sie erstellen oder setzen einen Styleguide um, legen Farbwahl und Fonts fest. 4

5 Screendesign Gestaltung Grundsätzliches über das Layout für Screens: Das Layout gliedert die Oberfläche in Aktions, Informations & Inhaltsbereiche. Diese Gliederung schafft Struktur, Übersicht und Ordnung (häufig basierend auf einem Raster). Durch das Layout wird der optische Gesamteindruck bestimmt. Wichtig ist daher nicht nur der Blick aufs Detail, sondern besonders auf das große Ganze. Das Screendesign muss auf allen Ebenen stimmig sein ein wichtiges Design Ziel ist daher Konsistenz! Eine Studie hat ergeben, dass Nutzer von Internetseiten ihr Urteil über das Design der Seiten bereits nach 50 Millisekunden fällen (=halb so lang wie ein Augenblinzeln!). Daher: Der erste Eindruck ist entscheidend! 5

6 Screendesign Gestaltung Design schafft Orientierung: Die Überschriften im Textbereich und die Menüs sollten so eingerichtet werden, dass der Anwender jederzeit feststellen kann, in welchem Kapitel er sich befindet. Im Bereich Webdesign hat sich zu Visualisierung der aktuellen Hierarchieebene die so genannte Breadcrumb Navigation (Brotkrümelnavigation) etabliert. Es sollte außerdem jederzeit erkennbar sein, wie viele Hauptkapitel bzw. Unterkapitel es insgesamt gibt. Neben der Organisation der Inhalte spielen auch Anforderungen der Barrierefreiheit eine Rolle für gutes Screendesign. 6

7 Screendesign Gestaltung Wie erreicht man ein klares und INTUITIVES Design? Verwendung von Grids / Gestaltungsrastern Die einfachste Lösung wählen Reduktion auf das grafische Minimum. Erklärung: Wo nicht viel ist, muss nicht viel geordnet werden das ist aber in den meisten Fällen nicht möglich, weil eine Fülle an unterschiedlichen Informationen visuell verpackt werden müssen) Fokus auf Benutzerfreundlichkeit. 7

8 Screendesign Gestaltung Herausforderung: die Besucher müssen das Design als natürlich, klar, harmonisch und ansprechend empfinden! Welche Strategien bieten sich hier? Der Goldene Schnitt, die Drittel Regel & die Anwendung der Gestaltgesetze Gelb: Der Goldene Schnitt, Rot: Die Drittel Regel Grün: Gestaltgesetze Blau: F Muster 8

9 Screendesign Der Goldene Schnitt Der Goldene Schnitt Seit der Renaissance proportionieren Künstler und Architekten ihre Werke, um sie dem Goldenen Schnitt anzunähern, insbesondere mit Hilfe des Goldenen Rechtecks, bei dem das Verhältnis der langen Seite zur kürzeren den Goldenen Schnitt darstellt (siehe Abb. rechts). Hintergrund ist der Glaube, dass dieses Verhältnis natürlich, universell, harmonisch und ästhetisch ansprechend ist. Der Goldene Schnitt, der auch göttliche Proportion oder kurz Φ (Phi) genannt wird, ist überall im Universum zu finden (Anordnung von Blättern im goldenen Winkel, Blütenstände mancher Pflanzen, Wachstumsmuster usw.). Der Goldene Schnitt ist wahrscheinlich das bekannteste Gesetz der Proportionslehre. 9

10 Screendesign Der Goldene Schnitt Der Goldene Schnitt Die Komposition ist eines der Schlüsselelemente in der Kommunikation. In der Designausbildung wird die Komposition als etwas gelehrt, das man eher fühlen als logisch herbeiführen soll. Was ist nun der Goldene Schnitt? Grundsätzlich ist es das Verhältnis zwischen Objekten im selben Zusammenhang ( 5:3). Mit dem Goldenen Schnitt kann man dem Design Struktur und ein natürliches Gleichgewicht geben und es einfacher erfassbar machen. Aufteilung für das Webdesign: Die Breite des Hauptbereiches wurde mit 960PX festgelegt. Der Content Bereich hat eine Breite von 593PX zu 367PX für die rechte Spalte. Diese Aufteilung ist auch für flexible und skalierbare Layouts möglich! 10

11 Screendesign Beispiele Der Goldene Schnitt Layout müssen natürlich nicht dem Goldenen Schnitt entsprechen! In manchen Fällen kann es aber das Design vervollkommnen! Das Beispiel rechts ist zwar nicht exakt nach dem Goldenen Schnitt angeordnet, aber beinahe. Das Design ist visuell ansprechend, bietet ruhige Farben und ist schön arrangiert. Das Design ist schön, weil es ausgewogen ist! 11

12 Screendesign Drittel Regel Die Drittel Regel Die Drittel Regel ist die vereinfachte Variante des Goldenen Schnitts und ist daher eine mehrteilige Faustregel. Eine Bildkomposition zu dritteln ist ein einfacher Weg, ohne jede Berechnung den Goldenen Schnitt anzuwenden. Hervorzuhebende Elemente können in der Nähe der Linien Schnittpunkte platziert werden, damit sie eine hervorgehobene oder dominante Position im Design einnehmen. Ein Komposition mit der Drittel Regel anzuordnen erzeugt mehr Spannung, Energie und Interesse als es einfaches Zentrieren vermag. 12

13 Screendesign Drittel Regel Die Drittel Regel In den meisten Fällen ist es weder möglich noch sinnvoll, alle vier Schnittpunkte zum Hervorheben von Website Funktionen oder Navigationselementen zu nutzen. Man kann aber einige Punkte (üblicherweise ein oder zwei) verwenden, um die wichtigste Aussage oder Funktion einer Seite zu platzieren. Der Punkt links oben ist normalerweise der beste, weil Nutzer Websites visuell in Form eines F erfassen. 13

14 Screendesign Beispiele Die Drittel Regel Ein Beispiel Beispiel rechts: Wenn man die Effektivität des Designs untersucht, stellt man fest, dass es perfekt ausbalanciert ist. Es wendet die Drittel Regel fast perfekt an. An zwei der vier Schnittpunkte (rosa Blöcke im folgenden Bild) sind die Informationen platziert, die das Unternehmen besonders hervorheben will nämlich, worum es auf der Website überhaupt geht. Beachtet auch, dass die Hauptbereiche genau entlang der zweiten horizontalen Achse platziert sind. 14

15 Screendesign Die Gestaltgesetze Über die Gestaltgesetze Die Wahrnehmung unserer Umwelt geschieht nach der Gestaltpsychologie durch die Wahrnehmung von Formen. Wesentlich ist dabei die so genannte Figur Grund Beziehung der Betrachter teilt bei der Wahrnehmung sein Wahrnehmungsfeld in Figur und Grund bzw. Hintergrund auf. Die Gestaltpsychologie hat verschiedene Gesetze zur Wahrnehmungsorganisation formuliert. Diese so genannten Gestaltgesetze beschreiben die Ergebnisse der Wahrnehmung der Formen und ihre Beziehung zueinander und sind Ergebnisse der Forschung. 15

16 Screendesign Die Gestaltgesetze Gesetz der Nähe Dinge, die sich nahe beieinander befinden, werden als Gruppe bzw. zusammengehörig wahrgenommen. Die Grenze der Gruppe liegt dort, wo die Abstände größer werden. 16

17 Screendesign Die Gestaltgesetze Gesetz der Nähe In der Praxis der Mediengestaltung kommt dieses Gesetz vor allem bei der Gliederung und Strukturierung zur Anwendung. Verschiedene Menüpunkte, die zu einer Kategorie gehören, werden auf einer Internetseite jeweils in eigenen Menüs zusammengefasst. Aufzählungen oder Gruppen werden mit diesem Gesetz gegliedert: Abb: Regelverletzung! Die Orientierung wird erschwert. Abb: Gut: Die vertikalen Abstände zwischen den Kategorien (z.b. Finanzen, Sport) sind größer als die Abstände innerhalb einer Kategorie 17

18 Screendesign Die Gestaltgesetze Gesetz der Nähe Beispiel für die Platzierung der Menüpunkte und von zusammengehörenden Elementen durch das Gesetz der Nähe: 18

19 Screendesign Die Gestaltgesetze Gesetz der Ähnlichkeit / Gleichheit Das menschliche Auge fasst ähnlich aussehende Objekte (auch auf Grund der Helligkeit, des Farbtons, der Größe, Orientierung usw.) zu einer Gruppe zusammen. Mehrere Merkmale z.b. Form und Farbe verstärken die Gruppenbildung. In den Grenzbereichen überwiegt das Gesetz der Gleichheit gegenüber dem Gesetz der Nähe (Bsp. links). 19

20 Screendesign Die Gestaltgesetze Gesetz der Ähnlichkeit / Gleichheit Das Gesetz der Ähnlichkeit kann ganz direkt auf das Webdesign übertragen werden. Auf einer Website (oder einem Interface) werden Elemente, die gleich aussehen und sich eindeutig von den anderen unterscheiden zu einer Gruppe zusammengeschlossen. Man kann dies sehr schön an den Shopping Buttons auf amazon.com zeigen: 20

21 Screendesign Die Gestaltgesetze Gesetz der Ähnlichkeit / Gleichheit Die Buttons In den Einkaufswagen und Auf meinen Wunschzettel haben die gleiche prägnante Form, und durch die Farbgebung werden sie von den anderen Elementen der Seite eindeutig abgesetzt. Trotz der großen Distanzen zwischen den Buttons erkennt unsere Wahrnehmung diese Ähnlichkeiten mühelos und fasst die Buttons zu einer funktionellen Gruppe zusammen was in diesem Beispiel auch gewünscht und sinnvoll ist! Auch wenn ein Benutzer noch niemals einen Shop bedient hat, wird sie/er intuitiv erkennen, dass diese Elemente etwas gemeinsam haben müssen. 21

22 Screendesign Die Gestaltgesetze Gesetz der Ähnlichkeit / Gleichheit Die Navigation einer Website ist durchgängig auf den Seiten aufgebaut Die Menüelemente (Main und Sublevels) sind jeweils einheitlich und gleichbleibend gestaltet. Auch in den Boxen werden die Gestaltgesetze angewandt (Nähe & Ähnlichkeit)! 22

23 Screendesign Die Gestaltgesetze Gesetz der Erfahrung Wahrnehmen ist auch Wiedererkennen. Wir können bekannte Formen, Zeichen oder Körper auch bei recht starker Transformation noch erkennen. Praxis Tipp: Nutzt die Erfahrung der Internetuser bei der Gestaltung der Navigationselemente einer Website: ein stilisiertes Briefkuvert steht für den Mail Link, ein Icon mit einem Fragezeichen steht für Hilfe und das Haus führt zurück zur Startseite usw. 23

24 Screendesign Gestaltung mit Rastern Das Gestaltungsraster = ein wichtige Gestaltungshilfe: definiert die Platzierung der Designelemente fördert die einheitliche (konsistente & konsequente) Gestaltung der verschiedenen Inhaltselemente Erleichtert bei präziser Anwendung die Responsive Umsetzung der Website (=dynamische Anpassung an unterschiedliche Displays). 24

25 Screendesign Gestaltung mit Rastern 25