Design made in Germany / Magazin / Ausgabe 5 Designer - Agenturen - Jobs

Die Verortung der Dinge

Über Struktur, Form & Orientierung

Artikel von Daniel Bretzmann

Sich ganz und gar zu verirren – das ist für die meisten von uns ein eher seltenes Erlebnis. Zu viele gelernte Routinen sowie Hilfsmittel unterstützen uns bei der Orientierung. Sei es in einer fremden Stadt, wo Wegweiser, Karten, Straßennamen und die Anwesenheit anderer Menschen uns helfen, uns zurecht zu finden. Oder das fremde Mobiltelefon, das wir spätestens nach zwei Klicks auch bedienen können. Alles folgt offensichtlich einer gewissen Logik und einem System, mit dem wir bewusst oder unbewusst täglich konfrontiert sind und das auch beim Thema Interfacedesign eine Rolle spielt.

Mittels einer Hierarchie werden Elemente in erfassbare und verständliche Systeme gebracht. Gemeint ist die Einteilung oder Einordnung von Objekten, die nach ihrer Wertigkeit in eine Rangfolge gebracht werden. Dabei wird von wichtig absteigend zu weniger wichtig geordnet. Ein Blick in den Wikipedia-Artikel zeigt sehr schön das breite Spektrum, in dem Hierarchien in unserem Leben in Erscheinung treten.


Bewegungsmuster

Dieser Artikel beschäftigt sich mit Hierarchien und Bewegungsmustern in Bezug auf das Thema Interfacedesign. Hierarchien helfen dem User, sich auf Websites und in anderen digitalen Anwendungen und Apps zurechtzufinden. Man kann sie auch als primäres Mittel bezeichnen, um den User zu führen – ihm zu sagen, wohin er »gehen« kann (z.B. sieh dir dieses Produkt an) oder wann er eine bestimmte Aktion ausführen soll (z.B. leg das Produkt in den Warenkorb). All dies sind einfache Dinge, die ebenso einfach erfassbar sein sollten. Die richtige Planung von Bewegungsmustern fängt bei der Informationsarchitektur an. Findet sich ein User schnell zurecht und gelangt zur gewünschten Information, wird er ein positives Erlebnis während des Besuchs und der Benutzung der Anwendung oder Website haben.

Die Planung eines Bewegungsmusters hängt primär vom Inhalt und Ziel der Seite ab. Eine Musterlösung gibt es nicht. Um beim Shop-Beispiel zu bleiben, ist ein mögliches Ziel »Verkaufen«. Von dieser Grundlage aus wird geplant, wie der Prozess in Zukunft möglichst unkompliziert ablaufen kann.

Stehen Ziele und Absicht der Seite fest, lässt sich auch herausfinden, welche Objekte hervorgehoben werden müssen, um ein Bewegungsmuster festzulegen. Hier spielt die Hierarchie der Objekte eine entscheidende Rolle. Die Objekte müssen in die richtige Ordnung gebracht werden, damit feststeht, in welcher Reihenfolge sie später vom User wahrgenommen werden, wenn er sich über die Seite bewegt. Neben Aspekten wie Abfolge und Anordnung sollte auch das eigentliche Interfacedesign berücksichtigt werden.

Lesefluss


Die Anordnung von Objekten richtet sich bei einem westlich geprägten User am natürlichen Lesefluss von links nach rechts aus. Man darf jedoch nicht davon ausgehen, dass der User die gesamte Seite so lesen oder erfassen wird. Vielmehr werden Webseiten meistens nur oberflächlich überflogen, in der Hoffnung die gewünschte Information zu finden, nach der man sucht. Visuelle Spots spielen eine wichtige Rolle, um den Besucher optisch über die Seite zu führen. Ein Logo sitzt daher beispielsweise am besten oben links auf einer Website. Dieser Teil liegt mit ziemlicher Sicherheit bei Seitenaufruf im sichtbaren Bereich eines Bildschirms und der Besucher nimmt es aufgrund des gelernten Leseflusses als erstes wahr.

Layout

In welchen Rahmen und welches Design sich Elemente einfügen, hängt vom jeweiligen Projekt oder dem Corporate Design ab. Es gibt zum Glück eine Vielzahl von möglichen Layouts, welche jedes für sich wunderbar funktionieren. Es trägt damit zur Positionierung und gleichzeitig zur Differenzierung und Unterscheidung von Marken und Unternehmen bei. Eine einfache Grundregel: Je einfacher und strukturierter ein Interface ist, desto besser wird sich der User später zurechtfinden und zur gewünschten Information finden. Google ist mit diesem Ansatz und seinen Anwendungen sehr erfolgreich. Das klare und reduzierte Konzept der Google Startseite verzichtet auf jedes überflüssige Element. Beim Layout und Design einer Website spielen der digitale Zeitgeist sowie aktuelle Trends eine große Rolle. Nichts verändert und entwickelt sich schneller weiter als das Web.

Wegweiser

Die Möglichkeit, über Hierarchie und Position Einfluss auf das Bewegungsmuster zu nehmen, kann durch eine weitere Verfeinerung der Elemente noch präzisiert werden. Gezielte Maßnahmen und Effekte, die z.B. Überschriften, Links und Buttons betreffen, führen hier zu einem schnellen Erfolg.

Der Einsatz von Farbe ist ein einfaches, aber sehr effektives Mittel, um Aufmerksamkeit auf bestimmte Objekte zu lenken. Über eine leuchtende Farbe oder dem Spiel mit Kontrasten zieht man die Aufmerksamkeit des Users auf einzelne Elemente, Flächen oder Überschriften und greift auch damit direkt in die Hierarchie und Wahrnehmung ein. Ein kleines und unwichtiges Objekt kann durch die Farbe Rot in einer ansonsten neutralen Umgebung alle Aufmerksamkeit auf sich ziehen.

Auch über die Größe von Elementen wird die Hierarchie direkt beeinflusst. Ganz natürlich wird großen Objekten mehr Aufmerksamkeit entgegengebracht als kleineren. Dieser Punkt spielt im Web gerade bei der Typografie eine wichtige Rolle. Wir gehen bei großen Schriften eher von einer Überschrift aus als bei kleineren. Eine gut ausgearbeitete Typografie kann einer Website bereits eine funktionale Hierarchie bzw. ein Bewegungsmuster geben, ohne dass ein weiteres grafisches Element notwendig ist.

Das große Ganze

Ein Designprozess verläuft selten nach einem linearen Muster. Das Layout ist in einem andauernden Wandel und entwickelt sich stetig weiter. Die Summe der Einzelteile, die den User führen, in eine ansprechende Form zu bringen, ist Aufgabe und Herausforderung für jeden Designer im Bereich digitaler Medien.

Hierarchien helfen dem User, Inhalte auf visueller Ebene schneller zu erfassen und werden durch den kommenden HTML5-Standard weiter an Relevanz gewinnen. Form und Inhalt einer Website werden damit technisch besser strukturiert und gewichtet. Der gezielte Einsatz macht eine Website erst effizient und die intuitive Benutzung einer Applikation möglich.