Designing Interfaces, 3. Auflage

Kapitel 4. Layout der Bildschirmelemente

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Unter Layout versteht man die besondere Art und Weise, wie Elemente angeordnet sind. Im Fall des Interface-Designs sind diese Elemente die informativen, funktionalen, rahmenden und dekorativen Teile des Bildschirms. Eine durchdachte Platzierung dieser Elemente hilft dabei, deine Nutzer zu leiten und über die relative Bedeutung der Informationen und Funktionen zu informieren.

Unabhängig von der Größe des Bildschirms, für den du dein Design erstellst - Web, Kiosk oder Handy - ist die sorgfältige Platzierung der Inhalte der Schlüssel dazu, dass der Nutzer versteht, was er wissen muss und was er tun soll.

Oft hörst du den Begriff "sauber", um ein bildschirmbasiertes Design zu beschreiben. Ein sauberes Layout folgt den Prinzipien der visuellen Informationshierarchie, des visuellen Flusses, der Ausrichtung durch ein Raster und hält sich an die Gestaltprinzipien.

In diesem Kapitel definieren wir diese Grundsätze, die deine Nutzer darüber informieren, was sie wissen und was sie tun sollen.

Die Grundlagen des Layouts

In diesem Abschnitt geht es um verschiedene Elemente des Layouts: visuelle Hierarchie, visueller Fluss und dynamische Anzeigen.

Visuelle Hierarchie

Die visuelle Hierarchie spielt bei allen Formen der Gestaltung eine Rolle. Die wichtigsten Inhalte sollten am meisten und die unwichtigsten am wenigsten hervorstechen. Ein Betrachter sollte die Informationsstruktur aus dem Layout ableiten können.

Eine gute visuelle Hierarchie gibt sofort Aufschluss über Folgendes:

• Die relative Bedeutung der Bildschirmelemente

• Die Beziehungen zwischen ihnen

• Was als nächstes zu tun ist

Visuelle Hierarchie in Aktion

Sieh dir das Beispiel in Abbildung 4-1 an. Kannst du auf einen Blick erkennen, welches die wichtigsten Informationen in Beispiel A sind? Kannst du erkennen, was die wichtigsten Informationen in Beispiel B sind? Für die meisten Menschen ist Beispiel B einfacher zu verstehen, auch wenn es nur aus Rechtecken und Quadraten besteht. Das liegt daran, dass die Anordnung der Bildschirmelemente, die relative Größe und die Proportionen der Elemente ihre Wichtigkeit andeuten und dem Betrachter zeigen, worauf er am meisten achten muss.

Abbildung 4-1. A) Beispiel für keine visuelle Hierarchie und B) Beispiel für eine visuelle Hierarchie

Was lässt die Dinge wichtig erscheinen?

Größe

Die Größe von der Überschriften und Unterüberschriften gibt dem Betrachter einen Hinweis auf die Reihenfolge und Wichtigkeit. Überschriften sind tendenziell größer und dramatischer, weil sie sich in Größe, visuellem Gewicht oder Farbe unterscheiden. Im Gegensatz dazu sagt ein kleiner Textstreifen am unteren Ende der Seite leise: "Ich bin nur eine Fußzeile" und weniger wichtig(Abbildung 4-2).

Abbildung 4-2. Beispiel für Größe

Position

Wenn du dir die Größe, Position und Farben des Layouts in Abbildung 4-3 ansiehst, kannst du die wichtigsten Elemente jedes der vier Beispiele erraten.

Abbildung 4-3. Möglichkeiten zur Unterscheidung von Bedeutung durch Position, Größe oder Farbe

Dichte

Die Dichte bezieht sich auf den Abstand zwischen den Elementen auf dem Bildschirm. Sieh dir das Beispiel in Abbildung 4-4 an. Das linke Beispiel zeigt ein dichteres Layout, bei dem die Inhalte dicht an dicht angeordnet sind. Das Beispiel auf der rechten Seite sieht offener aus und die Inhalte sind gleichmäßig verteilt. Das weniger dichte Beispiel ist auch etwas schwieriger zu lesen und für den Betrachter schwieriger zu erkennen, welche Elemente miteinander in Beziehung stehen.

Abbildung 4-4. Beispiel für mehr Dichte und weniger Dichte

Hintergrundfarbe

Wenn du einen Schatten oder eine Hintergrundfarbe hinzufügst, lenkst du die Aufmerksamkeit auf einen Textblock und unterscheidest ihn von anderem Text. Das Beispiel auf der linken Seite in Abbildung 4-5 hat einen einheitlichen Hintergrund für alle Elemente. Dies impliziert keine Unterscheidung und eine Kontinuität in der Bedeutung der Elemente. Im Vergleich dazu ziehen im Beispiel auf der rechten Seite der Abbildung der Hintergrund und die kontrastierenden Elemente in der Mitte das Auge sofort auf sich, was eine größere Bedeutung impliziert. Der Kontrast zieht die Aufmerksamkeit auf sich.

Abbildung 4-5. Beispiel für keine Hintergrundfarbe und Hintergrundfarbe

Rhythmus

Listen, Raster, Leerraum und abwechselnde Elemente wie Überschriften und Zusammenfassungen können einen starken visuellen Rhythmus erzeugen, der unwiderstehlich das Auge anzieht, wie in Abbildung 4-6 gezeigt.

Abbildung 4-6. Listen und Raster zur Schaffung eines visuellen Rhythmus

Kleine Dinge hervorheben

Um kleine Elemente hervorzuheben, platziere sie oben, an der linken Seite oder in der oberen rechten Ecke. Gib ihnen einen hohen Kontrast und visuelles Gewicht und setze sie mit Weißraum ab. Beachte aber, dass auf einem textlastigen Bildschirm, wie den meisten Websites, bestimmte Steuerelemente - vor allem Suchfelder, Anmeldefelder und große Schaltflächen - ohnehin hervorstechen. Dabei geht es weniger um die reinen visuellen Merkmale als um die Bedeutung: Wenn jemand zum Beispiel nach einem Suchfeld sucht, werden seine Augen direkt zu den Textfeldern auf der Seite gehen. (Möglicherweise lesen sie nicht einmal die Beschriftung der Textfelder.)

Eine weitere Möglichkeit, kleine Elemente hervorzuheben, ist die Verwendung von Abständen und Kontrasten, um sie zu unterscheiden, wie in Abbildung 4-7 gezeigt.

Abbildung 4-7. Techniken, um die Aufmerksamkeit auf kleine Gegenstände zu lenken

Ausrichtung und Raster

Bei der digitalen Gestaltung ist die Lesbarkeit entscheidend. Es ist wichtig, den Betrachter zu Informationen und Aktionen zu führen. Ein Design, das auf einem Raster basiert(Abbildung 4-8), ermöglicht es dem Designer, sich auf den Inhalt zu konzentrieren und sicher zu sein, dass das Layout visuell konsistent und ausgewogen ist(Abbildung 4-9). Raster helfen auch mehreren Gestaltern, an getrennten, aber verwandten Layouts zu arbeiten .

Abbildung 4-8. Rasterloses Layout (links) und ein auf einem Raster entworfenes Layout (rechts)

Abbildung 4-9. Raster über die Beispiele in Abbildung 4-8 gelegt

Raster finden sich in jedem digitalen Design und sind grundlegend für die Erstellung von Designs, die reaktionsschnell sind und dynamische Inhalte aufnehmen können, worauf wir später eingehen.

Raster bestehen aus Rändern und Zwischenräumen(Abbildung 4-10 und Abbildung 4-11). Ränder sind der Raum um den Inhalt herum und Zwischenräume sind die Zwischenräume.

Abbildung 4-10. Vertikales Gitter mit Rändern (gelb) und Rinnen (blau)

Abbildung 4-11. Horizontales Gitter mit Rändern (gelb) und Rinnen (blau)

Die Verwendung eines Rasters ist eine gute Möglichkeit, um sicherzustellen, dass der Inhalt eine visuell harmonische Komposition bildet, und hilft dabei, die kognitive Belastung deines Betrachters zu verringern.

Vier wichtige Gestaltprinzipien

"Gestalt" ist ein Begriff, der von einer psychologischen Theorie stammt, die sich in den 1920er Jahren durchsetzte . Gestalt ist ein deutsches Wort und bedeutet "Form" oder "Gestalt". Im Design beziehen wir uns oft auf die Gestaltprinzipien, die eine Reihe von Regeln beschreiben, wie Menschen visuelle Objekte wahrnehmen. Die Theorie der Gruppierung und Ausrichtung wurde Anfang des zwanzigsten Jahrhunderts von den Gestaltpsychologen entwickelt. Sie beschrieben mehrere Gestaltungseigenschaften, die in unserem visuellen System fest verankert zu sein scheinen. In den folgenden Unterabschnitten gehen wir auf jede dieser Eigenschaften ein.

Näherung

Wenn du Dinge nahe beieinander anordnest, assoziieren die Betrachter/innen sie miteinander. Dies ist die Grundlage für eine starke Gruppierung von Inhalten und Steuerelementen auf einer Benutzeroberfläche (UI). Gruppierte Elemente sehen zusammengehörig aus. Umgekehrt bedeutet Isolation eine Unterscheidung.

Abbildung 4-12. Das Gestaltprinzip der Nähe

Ähnlichkeit

Gegenstände, die sich in Form, Größe oder Farbe ähneln, werden als miteinander verwandt wahrgenommen. Wenn du ein paar Dinge "einer Art" hast und willst, dass die Betrachter sie als gleich interessante Alternativen sehen, gib ihnen eine identische (und unverwechselbare) grafische Behandlung.

Eine Liste mit vielen ähnlichen Gegenständen, die in einer starken Linie oder Spalte angeordnet sind, wird zu einer Reihe von gleichrangigen Gegenständen, die in einer bestimmten Reihenfolge angezeigt werden. Richte diese Elemente sehr genau aneinander aus, um eine visuelle Linie zu schaffen. Beispiele dafür sind Aufzählungen, Navigationsmenüs, Textfelder in einem Formular, zeilengestreifte Tabellen und Listen mit Überschrift-Zusammenfassung-Paaren.

Sind ein oder mehrere Artikel "besonderer" als die anderen? Gib ihm eine etwas andere Behandlung, z. B. eine kontrastierende Hintergrundfarbe, aber halte es ansonsten im Einklang mit seinen Kollegen (siehe das Beispiel rechts in Abbildung 4-13). Oder verwende ein grafisches Element, um die Linie, an der die Elemente ausgerichtet sind, zu unterbrechen, z. B. eine Ausbuchtung, eine Überlappung oder etwas in einem Winkel.

Abbildung 4-13. Gruppierung verwandter Peer-Elemente (links) und Unterscheidung von zwei Elementen unter Peers (rechts)

Kontinuität

Unsere Augen folgen natürlich den wahrgenommenen Linien und Kurven, die durch die Ausrichtung anderer Elemente entstehen, wie in Abbildung 4-14 gezeigt.

Abbildung 4-14. Zwei Beispiele für visuelle Kontinuität.

Schließung

Das Gehirn "schließt" auf natürliche Weise Linien, um einfache geschlossene Formen wie Rechtecke und Kleckse zu erzeugen, auch wenn sie nicht explizit für uns gezeichnet werden. In den Beispielen in Abbildung 4-15 siehst du wahrscheinlich (im Uhrzeigersinn, von oben links) ein Rechteck, einen Kreis und zwei Dreiecke. Keine dieser Formen ist tatsächlich auf dem Bild dargestellt, aber das Auge vervollständigt die Linie in deinem Gehirn.

Abbildung 4-15. Beispiel für einen Verschluss

Diese Prinzipien lassen sich am besten in Kombination miteinander anwenden. Kontinuität und Geschlossenheit erklären die Ausrichtung. Wenn du Dinge ausrichtest, bildest du eine durchgehende Linie mit ihren Kanten, und die Nutzer/innen werden dieser Linie folgen und eine Beziehung annehmen. Wenn die ausgerichteten Elemente so kohärent sind, dass sie eine Form bilden - oder eine Form aus dem Leerraum oder dem "Negativraum" um sie herum -, wird der Effekt durch die Geschlossenheit noch verstärkt.

Visueller Fluss

Beim visuellen Fluss geht es um die Spuren, denen die Augen der Leserinnen und Leser folgen, wenn sie die Seite überfliegen.

Das hängt natürlich eng mit der visuellen Hierarchie zusammen - eine gut gestaltete visuelle Hierarchie setzt dort Schwerpunkte auf der Seite, wo du die Aufmerksamkeit auf die wichtigsten Elemente lenken musst, und der visuelle Fluss leitet die Augen von diesen zu den weniger wichtigen Informationen.

Als Designer/in möchtest du den visuellen Fluss auf einer Seite so steuern, dass die Besucher/innen ihr in der richtigen Reihenfolge folgen. Mehrere Kräfte können gegeneinander arbeiten, wenn du versuchst, einen visuellen Fluss zu schaffen. Für diejenigen, die in der westlichen Kultur aufgewachsen sind, ist eine davon unsere Tendenz, von oben nach unten und von links nach rechts zu lesen. Wenn du mit einer eintönigen Textseite konfrontiert wirst, tust du das von Natur aus; aber wenn es starke Schwerpunkte auf der Seite gibt, können sie dich von der üblichen Reihenfolge ablenken, im Guten wie im Schlechten.

Brennpunkte sind die Stellen, zu denen deine Augen nicht widerstehen können. Du folgst ihnen in der Regel vom stärksten zum schwächsten Punkt, und geschickt gestaltete Seiten haben nur wenige - zu viele Brennpunkte verwässern die Bedeutung jedes einzelnen. Eine gute visuelle Hierarchie nutzt Schwerpunkte, um die Augen in der richtigen Reihenfolge auf die entsprechenden Stellen zu lenken. Wenn du das nächste Mal eine Zeitschrift in die Hand nimmst, schau dir ein paar gut gestaltete Anzeigen an und achte darauf, worauf dein Blick fällt. Die besten Werbegrafiker/innen sind Meister/innen darin, Schwerpunkte zu setzen, um zu beeinflussen, was du zuerst siehst.

Wie kannst du also einen guten visuellen Fluss erzeugen? Eine einfache Möglichkeit ist die Verwendung von angedeuteten Linien, entweder gebogen oder gerade, um Elemente auf der Seite zu verbinden. So entsteht eine visuelle Erzählung, der der Betrachter folgen kann. In dem Beispiel in Abbildung 4-16 hat der Designer, der diese ältere Uber-Homepage gestaltet hat, verschiedene Techniken eingesetzt, um das Auge über den Bildschirm zu leiten: von der Verwendung der blauen Call-to-Action-Buttons über die Verwendung eines Rasters, um die Komposition harmonisch zu gestalten, bis hin zur Größe der Überschrift im Vergleich zur Zwischenüberschrift. Achte besonders auf den Blick der jungen Frau auf dem Foto. Ihr Blick ist auf die Überschrift gerichtet, die mit angedeuteten Linien das Auge des Betrachters unbewusst durch das Layout führt, um alle wichtigen Elemente der Seite zu treffen.

Abbildung 4-16. Visuelle Hierarchie auf einer älteren Uber-Homepage

In den Beispielen in Abbildung 4-17 werden deine Augen ganz natürlich den Linien folgen. Es ist nicht schwer, ein Layout zu erstellen, das gut fließt, aber sei auf der Hut vor Layout-Entscheidungen, die dem Fluss entgegenwirken. Wenn du willst, dass die Betrachter/innen die Geschichte und das Leistungsversprechen einer Website lesen, dann ordne die wichtigen Teile der Geschichte entlang einer durchgehenden Linie an und unterbrich sie nicht mit auffälligen Extras.

Abbildung 4-17. Implizite Linien für visuellen Fluss

Wenn du ein Formular oder eine Reihe interaktiver Tools entwirfst, solltest du die Steuerelemente nicht über die ganze Seite verstreuen - das zwingt den Nutzer nur dazu, sie mühsam zu finden. Im Beispiel in Abbildung 4-18 siehst du, wo sich die Schaltfläche für die Handlungsaufforderung befindet. Sie sollte leicht zu finden sein, weil der Designer sie nach dem Text platziert hat, den der Benutzer zuerst lesen wird. Wenn es dir egal ist, ob der Nutzer diesen Text liest, kannst du die Aktionsaufrufe mit Leerzeichen abgrenzen.

Abbildung 4-18. Handlungsaufrufe

Abbildung 4-19 zeigt ein schlechtes Beispiel für visuellen Fluss und visuelle Hierarchie. Wie viele Schwerpunkte gibt es, und wie konkurrieren sie miteinander? Wohin wollen deine Augen zuerst gehen und warum? Was ist auf dieser Seite wichtig?

Abbildung 4-19. Die unübersichtliche visuelle Hierarchie von Weather Underground

Dynamische Anzeigen verwenden

Alles, was wir bisher besprochen haben, gilt auch für UIs, Websites, Poster, Plakate und Magazinseiten. Sie befassen sich mit statischen Aspekten des Layouts. Aber du hast einen dynamischen Computer, mit dem du arbeiten kannst - und plötzlich wird die Zeit zu einer weiteren Dimension des Designs.

Genauso wichtig ist, dass Computer die Interaktion des Nutzers mit dem Layout in einem Maße ermöglichen, wie es bei den meisten Druckerzeugnissen nicht möglich ist. Es gibt verschiedene Möglichkeiten, wie du dir die Dynamik von Computer- oder Handy-Displays zunutze machen kannst. Denk zum Beispiel an die Raumnutzung - selbst die größten Computerbildschirme haben weniger nutzbare Fläche als zum Beispiel ein Poster oder eine Zeitungsseite. Es gibt viele Techniken, um diesen Platz zu nutzen und mehr Inhalte zu präsentieren, als du auf einmal zeigen kannst.

Bildlaufleisten

Mit Bildlaufleisten kann sich der Benutzer nach Belieben in einer oder zwei Dimensionen bewegen (aber bitte keine horizontalen Bildläufe bei Text!). Bildlaufleisten sind eine sehr verbreitete Methode, um ein kleines "Sichtfenster" auf ein großes Objekt wie einen Text, ein Bild oder eine Tabelle darzustellen. Wenn du den Inhalt in zusammenhängende Abschnitte unterteilen kannst, hast du mehrere Möglichkeiten:Modul-Tabs, Akkordeons, zusammenklappbare Panels und bewegliche Panels sind Muster, die im Gegensatz zu den eher statischen Titled Sections die Kontrolle über das Layout in die Hände des Nutzers legen.

Die folgenden Techniken rufen die Zeit auf, indem sie dem Nutzer verschiedene Inhalte zu verschiedenen Zeiten zeigen.

Responsive Enabling

Um einen Benutzer erfolgreich durch ein Formular oder einen Prozess zu leiten oder um Verwirrung über das mentale Modell des Benutzers zu vermeiden, kann eine Benutzeroberfläche bestimmte Funktionen nur aktivieren, wenn der Benutzer eine bestimmte Aktion ausführt. Das Beispiel in Abbildung 4-20 zeigt ein typisches Beispiel für die Deaktivierung auf der Grundlage einer binären Auswahl in den Systemeinstellungen von Mac OS.

Abbildung 4-20. Mac OS Systemeinstellungen

Progressive Offenlegung

In manchen Kontexten werden Informationen erst angezeigt, nachdem der Nutzer eine bestimmte Aktion durchgeführt hat. Moo.com, eine Online-Visitenkarten- und Druckerei( )(Abbildung 4-21), verwendet diese Technik bei der Erstellung eines individuellen Produkts. In der Abbildung sieht der Kunde die Anpassungsoptionen erst, wenn er auf die bearbeitbaren Teile der Karte klickt.

Abbildung 4-21. Beispiel für progressive Offenlegung in Moo.com

UI-Regionen

Unabhängig davon, ob du ein Web-, Software- oder Mobil-Layout entwirfst, kannst du dich in der Regel darauf verlassen, dass du mit einer oder mehreren der folgenden UI-Regionen arbeiten kannst (siehe auch Abbildung 4-22):

Überschrift/Fenstertitel

Dies ist der oberste Bereich in jedem Layout. Er wird für das globale Branding und die globale Navigation Elemente im Mobil- und Webdesign verwendet, und du wirst diesen Bereich oft für Symbolleisten und die Navigation in Software sehen. Kopfzeilen sind in der Regel ein konstantes Element im Layout einer Vorlage, daher ist es wichtig, dass du sorgfältig auswählst, was du auf diesem wertvollen Bildschirmplatz platzierst.

Menü oder Navigation

Dieser befindet sich normalerweise oben oder auf der linken Seite des Bildschirms. Beachte, dass dies auch Panels sein können (siehe unten).

Hauptinhaltsbereich

Hier sollte der größte Teil der Bildschirmfläche verwendet werden. Hier befinden sich die Informationsinhalte, Formulare, Aufgabenbereiche und das Branding für Landing Experiences .

Fußzeilen

Hier befindet sich die sekundäre und globale oder redundante Navigation; sie kann auch hilfreiche Informationen wie Kontaktdaten von Unternehmen enthalten.

Paneele

Panels können sich oben, an der Seite oder unten befinden. Sie können dauerhaft oder abschaltbar sein, je nachdem, welche Funktionen du in diesem Bereich verwendest.

Abbildung 4-22. UI-Regionen, Web- und Desktop-Anwendung

Die Patterns

Die Muster in diesem Kapitel von zeigen dir konkrete Möglichkeiten, wie du all diese Layout-Konzepte in die Tat umsetzen kannst. Die ersten drei befassen sich mit der visuellen Hierarchie der gesamten Seite, des Bildschirms oder des Fensters, unabhängig von der Art des Inhalts, den du auf der Seite platzierst. Du solltest das Visual Framework schon recht früh in einem Projekt berücksichtigen, weil es alle wichtigen Seiten und Fenster einer Benutzeroberfläche beeinflusst.

Layout

Die folgenden Muster werden am häufigsten für Desktop- und Webanwendungen verwendet. Wenn du hauptsächlich Suchergebnisse anzeigst, ist ein Grid of Equals eine gute Wahl. Wenn es sich bei deiner Anwendung jedoch um eine Aufgaben- oder Produktivitätsanwendung oder ein Erstellungstool handelt, könnte Center Stage am sinnvollsten sein. Wie auch immer du dich entscheidest, achte darauf, dass die Wahl von den Inhalten abhängt, die du dem Nutzer zeigen musst, um das gewünschte Ziel zu erreichen.

• Visuelles Gerüst

• Zentrale Bühne

• Raster der Gleichen

Abbildung 4-23. Visuelles Framework (oben links), Center Stage mit einem Panel (oben rechts), Grid of Equals (unten links)

Chunking Informationen

Die nächste Gruppe von Mustern stellt alternative Möglichkeiten dar, Inhalte auf einer Seite oder in einem Fenster zu "gliedern". Das ist nützlich, wenn du mehr Inhalte hast, als du bequem auf einmal auf dem Bildschirm unterbringen kannst. Auch bei diesen Mustern geht es um die visuelle Hierarchie, aber auch um Interaktivität, und sie können dir bei der Auswahl der spezifischen Mechanismen helfen, die in UI-Toolkits verfügbar sind. Hier sind die Muster, die wir uns in diesem Abschnitt ansehen:

• Überschriebene Abschnitte

• Modul-Registerkarten

• Akkordeon

• Zusammenklappbare Paneele

• Bewegliche Paneele

Visuelles Gerüst

Was

In einer gesamten App oder Website haben alle Bildschirmmasken gemeinsame Merkmale, um ein einheitliches Layout und einen einheitlichen Stil zu gewährleisten. Jede Seite kann dasselbe Grundlayout, dieselben Ränder, Kopf- und Zwischenraumgrößen, Farben und Stilelemente verwenden, aber das Design bietet genug Flexibilität, um mit unterschiedlichen Seiteninhalten umzugehen.

Verwenden, wenn

Du baust eine Website mit mehreren Seiten oder eine Benutzeroberfläche mit mehreren Fenstern - mit anderen Worten, fast jede komplexe Software. Du willst, dass alles "zusammenhängt" und wie aus einem Guss aussieht. Du willst, dass es einfach zu bedienen und zu navigieren ist.

Warum

Wenn eine Benutzeroberfläche eine einheitliche Farbe, Schriftart und ein einheitliches Layout hat und die Titel und Navigationshilfen - die Wegweiser - immer an der gleichen Stelle stehen, wissen die Benutzer, wo sie sich befinden und wo sie etwas finden können. Sie müssen nicht jedes Mal ein neues Layout herausfinden, wenn sie von einer Seite oder einem Fenster zu einem anderen wechseln.

Ein starkes visuelles Gerüst, das sich auf jeder Seite wiederholt, trägt dazu bei, dass der Seiteninhalt besser zur Geltung kommt. Was konstant ist, tritt in den Hintergrund des Bewusstseins des Nutzers; was sich ändert, wird wahrgenommen. Wenn du dem Design des visuellen Rahmens genug Charakter verleihst, hilft das außerdem beim Branding deiner Website oder deines Produkts - die Seiten werden als deine erkennbar.

Wie

Entwirf ein allgemeines Erscheinungsbild, das für alle Seiten oder Fenster gelten soll. Startseiten und Hauptfenster sind etwas Besonderes und werden in der Regel anders gestaltet als Innenseiten, aber sie sollten dennoch bestimmte Merkmale mit dem Rest der Website teilen, z. B.:

Farbe

Hintergründe, Textfarben, Akzentfarben und andere Farben

Schriftarten

Für Titel, Untertitel, normaler Text, Aufforderungstext und Nebentext

Schreibstil und Grammatik

Titel, Namen, Inhalte, kurze Beschreibungen, alle langen Textblöcke und alles andere, was Sprache verwendet.

In einem Visual-Framework-Design wie dem von JetBlue, das in Abbildung 4-24 dargestellt ist, haben alle Seiten oder Fenster die folgenden Eigenschaften gemeinsam:

• "Sie sind hier"-Wegweiser, wie , Titel, Logos, Brotkrumenpfade, globale Navigation mit Indikatoren für die aktuelle Seite und Modul-Tabs

• Navigationsvorrichtungen, einschließlich der globalen und der Utility-Navigation , OK/Abbrechen-Schaltflächen, Zurück-Schaltflächen, Beenden- oder Beenden-Schaltflächen und Navigationsmuster wie Fortschrittsanzeige und Brotkrümel(Kapitel 3)

• Techniken zur Definition von Titelabschnitten

• Abstände und Ausrichtung, einschließlich Seitenränder, Zeilenabstände, die Lücken zwischen Etiketten und den zugehörigen Steuerelementen sowie Text- und Etikettenausrichtung

• Das Gesamtlayout oder die Platzierung der Dinge auf der Seite, in Spalten und/oder Zeilen, unter Berücksichtigung der zuvor genannten Ränder und Abstände

Abbildung 4-24. Beispiel für ein Visual Framework auf der mobilen Website von JetBlue

Die Implementierung eines Visual Frameworks sollte dich dazu zwingen, stilistische Aspekte der Benutzeroberfläche vom Inhalt zu trennen. Das ist keine schlechte Sache. Wenn du das Framework nur an einer Stelle definierst - z. B. in einem CSS-Stylesheet, einer Java-Klasse oder einer visuellen Systembibliothek -, kannst du das Framework unabhängig vom Inhalt ändern, was bedeutet, dass du es leichter optimieren und anpassen kannst. (Das ist auch eine gute Praxis in der Softwareentwicklung.)

Beispiele

Die Website von JetBlue(Abbildung 4-25) verwendet eine eingeschränkte Farbpalette, einen starken Header und eine konsequente Verwendung von Schriftarten und geschwungenen Rechtecken in ihrem Visual Framework. Sogar die Anmeldeseite und die modalen Dialoge verwenden diese Elemente; sie sehen nicht deplatziert aus. Beachte die stilistischen Ähnlichkeiten mit der mobilen Website.

Abbildung 4-25. Die JetBlue-Startseite

Auf die gleiche Weise verwendet die TED-Website(Abbildung 4-26) eine begrenzte Anzahl von Farben auf und ein Layout-Raster, um die Konsistenz zu wahren.

Abbildung 4-26. Die TED-Startseite

Zentrale Bühne

Was

Die Aufgabe, um die es geht, steht meistens im Vordergrund und im Zentrum der Benutzererfahrung. Diese Art von Layout platziert den wichtigsten Teil der Benutzeroberfläche im größten Teil der Seite oder des Fensters und gruppiert die sekundären Werkzeuge und Inhalte in kleineren Feldern um ihn herum.

Verwenden, wenn

Die Hauptaufgabe des Bildschirms besteht darin, dem Benutzer eine einzige zusammenhängende Information zu zeigen, ihn ein Dokument bearbeiten zu lassen oder ihm zu ermöglichen, eine bestimmte Aufgabe auszuführen. Andere Inhalte und Funktionen sind dem untergeordnet. Viele Arten von Benutzeroberflächen können eine Center Stageverwenden - Tabellenund Tabellenkalkulationen, Formulare und grafische Editoren sind dafür geeignet. Das gilt auch für Webseiten, die einzelne Artikel, Bilder oder Funktionen zeigen.

Warum

Das Design sollte den Blick des Nutzers sofort auf den Anfang der wichtigsten Informationen (oder Aufgaben) lenken, anstatt ihn verwirrt über die Seite wandern zu lassen. Ein eindeutiges zentrales Element verankert die Aufmerksamkeit des Nutzers. So wie der erste Satz eines Nachrichtenartikels das Thema und den Zweck des Artikels festlegt, so legt die zentrale Einheit den Zweck der Benutzeroberfläche fest.

Wenn das erledigt ist, bewertet der Nutzer die Elemente in der Peripherie danach, wie sie zu dem stehen, was in der Mitte ist. Das ist für den Nutzer einfacher, als die Seite immer wieder zu überfliegen und zu versuchen, etwas herauszufinden. Was kommt zuerst? Was ist das Zweite? Wie hängt das mit dem zusammen? Und so weiter.

Wie

Erstelle eine visuelle Hierarchie, bei der der Hauptinhalt oder das Dokument alles andere dominiert. (In der Einleitung des Kapitels wird die visuelle Hierarchie erläutert.) Bei der Gestaltung einer Center Stage solltest du die folgenden Faktoren berücksichtigen, obwohl keiner von ihnen zwingend erforderlich ist:

Größe

Der Inhalt in der Mitte der Seite sollte mindestens doppelt so breit wie die Seitenränder und doppelt so hoch wie die oberen und unteren Ränder sein. (In manchen Benutzeroberflächen kann der Nutzer die Größe ändern, aber so sollte sie sein, wenn der Nutzer sie zum ersten Mal sieht). Behalte den "Falz" im Hinterkopf - wenn ein kleiner Bildschirm verwendet wird, wo wird der Inhalt unten abgeschnitten? Achte darauf, dass die Center Stage immer noch mehr Platz einnimmt als alles andere "above-the-fold".

Schlagzeilen

Große Schlagzeilen sind ein Blickfang und können das Auge des Nutzers auf den oberen Teil der Center Stage lenken. Das passiert natürlich auch in Printmedien. Mehr dazu findest du in der Einleitung des Kapitels und in den Abschnitten mit Überschriften.

Kontext

Was ist die Hauptaufgabe des Produkts? Daraus ergibt sich, was der Nutzer erwartet, wenn er den Bildschirm öffnet. Ist es ein Grafik-Editor? Ein langer Textartikel? Eine Karte? Ein Dateisystem-Baum?

Beachte, dass ich eine traditionelle Layout-Variable nicht erwähnt habe: die Position. Es ist ziemlich egal, wo du die Center Stageplatzierst - oben, links, rechts, unten, in der Mitte -, es kann funktionieren. Wenn sie groß genug ist, landet sie sowieso mehr oder weniger in der Mitte. Beachte, dass es in etablierten Genres Konventionen darüber gibt, was an welche Ränder gehört, z. B. Symbolleisten oben in Grafikeditoren oder Navigationsleisten auf der linken Seite von Web- oder Mobilbildschirmen.

Beispiele

Der Texteditor von Google Text & Tabellen(Abbildung 4-27) widmet fast seinen gesamten horizontalen Platz dem zu bearbeitenden Dokument; das gilt auch für den Tabelleneditor von Google. Auch die Werkzeuge am oberen Rand der Seite nehmen nicht viel Platz in Anspruch. Das Ergebnis ist ein sauberer und ausgewogener Look.

Abbildung 4-27. Google Docs

Die Sketch-Desktop-Anwendung (Abbildung 4-28) verfügt über ein Center Stage Layout. Wenn du ein neues leeres Dokument oder eine neue Vorlage startest, siehst du eine Arbeitsfläche, auf der du dich ganz auf die Erstellung von Inhalten konzentrieren kannst, ohne von unnötigen Inhalten oder Funktionen behindert zu werden.

Da die meisten Produkte der Google Suite aufgabenbasiert sind, ist Center Stage ein gemeinsames Framework, das in den meisten dieser Produkte zu finden ist(Abbildung 4-29), z. B. in Google Earth, Google Slides, Google Hangout und Google Sheets.

Abbildung 4-28. Böhmische Skizze

Abbildung 4-29. Google Maps

Weitere Informationen über die Designsprache von Google findest du unter https://material.io/design.

Raster der Gleichen

Was

Ordne Inhaltselemente wie oder Suchergebnisse in einem Raster oder einer Matrix an. Jedes Element sollte einer gemeinsamen Vorlage folgen und die visuelle Gewichtung der Elemente sollte ähnlich sein. Verlinke bei Bedarf auf die Seiten der Artikel.

Verwenden, wenn

Die Seite enthält viele Inhalte, die einen ähnlichen Stil und eine ähnliche Bedeutung haben, wie z. B. Nachrichtenartikel, Blogbeiträge, Produkte oder Themenbereiche. Du möchtest dem Betrachter viele Möglichkeiten bieten, diese Artikel in der Vorschau anzuzeigen und auszuwählen.

Warum

Ein Raster, das jedem Artikel den gleichen Platz einräumt, zeigt an, dass sie gleich wichtig sind. Die gemeinsame Vorlage für die Elemente innerhalb des Rasters informiert den Nutzer darüber, dass die Elemente einander ähnlich sind. Zusammen schaffen diese Techniken eine starke visuelle Hierarchie, die mit der Semantik deines Inhalts übereinstimmen sollte.

Wie

Überlege dir, wie du die einzelnen Artikel im Raster anordnen willst. Haben sie Vorschaubilder oder Grafiken? Überschriften, Zwischenüberschriften, Zusammenfassungstext? Probiere aus, wie du alle wichtigen Informationen auf relativ kleinem Raum unterbringen kannst - hoch, breit oder quadratisch - und wende diese Vorlage auf die Elemente an, die du anzeigen musst. Ordne die Inhaltselemente in einem Raster oder einer Matrix an. Jedes Element sollte einer gemeinsamen Vorlage folgen und die visuelle Gewichtung der Elemente sollte ähnlich sein.

Ordne die Gegenstände nun in einem Raster an. Du kannst eine einzelne Zeile oder eine Matrix verwenden, die zwei, drei oder mehr Elemente breit ist. Denke bei dieser Arbeit an die Seitenbreite: Wie sieht dein Design in einem schmalen Fenster aus? Werden die meisten deiner Nutzer große Browserfenster haben oder mobile oder andere Geräte benutzen(Abbildung 4-30)?

Abbildung 4-30. Beispiel für Responsive Design: Desktop-Version (links), mobile Version (Mitte), Tablet-Version (rechts)

Du kannst die Elemente des Rasters statisch hervorheben (um ein Element gegenüber anderen hervorzuheben) oder dynamisch, wenn ein Nutzer mit dem Mauszeiger über diese Elemente fährt. Verwende Farben und andere stilistische Änderungen, aber ändere nicht die Positionen, Größen oder andere Strukturelemente der Rasterpunkte.

Beispiele

Im Hulu-Beispiel(Abbildung 4-31) ist die Größe und relative Bedeutung jedes Elements im Raster gleich und hat ein einheitliches Interaktionsverhalten.

Abbildung 4-31. Hulu-Raster

Im CNN-Layout(Abbildung 4-32) und im Layout von Apple TV(Abbildung 4-33) kennzeichnet die einheitliche visuelle Behandlung von diese Elemente als gleichrangig. Ein Vorteil der Verwendung von Rastern für die Anzeige von Listen ist, dass ein Benutzer dieser Benutzeroberfläche nur mit einem Rasterpunkt interagieren muss, um zu verstehen, wie sich alle Rasterpunkte verhalten.

Abbildung 4-32. CNNs Raster

Abbildung 4-33. Das Raster von Apple TV

Überschriebene Abschnitte

Was

Definiere separate Inhaltsabschnitte, indem du jedem einen visuell starken Titel gibst, die Abschnitte visuell trennst und sie auf der Seite anordnest.

Verwenden, wenn

Du hast viele Inhalte zu zeigen, aber du möchtest, dass die Seite leicht zu überfliegen und zu verstehen ist und dass alles sichtbar ist. Du kannst die Inhalte in thematische oder aufgabenbezogene Abschnitte gruppieren, die für den Nutzer sinnvoll sind.

Warum

Gut definierte und benannte Abschnitte strukturieren den Inhalt in leicht verdauliche "Brocken", von denen jeder auf einen Blick verständlich ist. Dadurch wird die Informationsarchitektur deutlich. Wenn der Nutzer eine Seite sieht, die sauber in solche Abschnitte unterteilt ist, wird sein Auge besser durch die Seite geführt.

Wie

Als Erstes musst du die Informationsarchitektur richtig gestalten: Teile den Inhalt in zusammenhängende Abschnitte auf (falls du das nicht schon getan hast) und gib ihnen kurze, einprägsame Namen (siehe Abbildung 4-34):

• Verwende für Überschriften eine Typografie , die sich vom Rest des Inhalts abhebt - fetter, breiter, größere Schriftgröße, kräftigere Farbe, andere Schriftfamilie, überstrahlter Text usw. Weitere Informationen zur visuellen Hierarchie findest du in der Einleitung des Kapitels.

• Versuche, den Titel gegen einen Streifen mit kontrastierender Farbe auszutauschen.

• Verwende Leerzeichen, um Abschnitte zu trennen.

• Verwende Blöcke mit kontrastierender Hintergrundfarbe hinter dem gesamten Abschnitt.

• Kästchen aus geätzten, abgeschrägten oder erhabenen Linien sind bei Desktop-UIs bekannt . Aber sie können verloren gehen (und zu visuellem Rauschen werden), wenn sie zu groß, zu nah beieinander oder tief verschachtelt sind.

Abbildung 4-34. Beispiele für betitelte Abschnitte

Wenn die Seite immer noch zu überwältigend ist, versuche es mit Modul-Tabs, einem Akkordeon oder klappbaren Panels, um einige der Inhalte zu verbergen.

Wenn du Schwierigkeiten hast, diesen Teilen vernünftige Titel zu geben, könnte das ein Zeichen dafür sein, dass die Gruppierung nicht zu den Inhalten passt. Überlege dir, ob du den Inhalt in verschiedene Gruppen einteilen willst, die leichter zu benennen und zu erinnern sind. "Verschiedene Kategorien können auch ein Zeichen dafür sein, dass die Organisation nicht ganz richtig ist, obwohl sie manchmal wirklich notwendig sind.

Beispiele

Auf der Seite zeigt Amazon(Abbildung 4-35) Titel an, die den Ebenen der visuellen Hierarchie entsprechen: den Seitentitel, die Titel der Abschnitte und die Untertitel über den Listen der Links. Beachte die Verwendung von Leerraum, Kästchen und der Ausrichtung zur Strukturierung der Seite.

Abbildung 4-35. Amazon-Kontoeinstellungen

Die Google-Einstellungen enthalten auch sogenannte "Titled Sections"(Abbildung 4-36). Einige enthalten Funktionen, andere sind mit anderen Einstellungsseiten verlinkt.

Abbildung 4-36. Google-Kontoeinstellungen

Modul-Registerkarten

Was

Lege die Module des Inhalts in kleine Bereiche mit Registerkarten, so dass immer nur ein Modul sichtbar ist. Der Nutzer klickt oder tippt auf die Registerkarten, um verschiedene Inhalte nach oben zu bringen.

Abbildung 4-37. Das Muster der Modul-Registerkarten

Verwenden, wenn

Du hast eine Menge heterogener Inhalte, die du auf der Seite zeigen willst, darunter möglicherweise Textblöcke, Listen, Schaltflächen, Formularsteuerungen oder Bilder, und du hast nicht für alles Platz. Einige der Seiteninhalte sind in Gruppen oder Modulen zusammengefasst (oder können in kohärente Gruppen sortiert werden). Diese Module haben die folgenden Eigenschaften:

• Die Nutzer müssen jeweils nur ein Modul sehen.

• Sie haben eine ähnliche Länge und Höhe.

• Es gibt nicht viele Module - weniger als 10, am besten eine kleine Handvoll.

• Der Satz von Modulen ist ziemlich statisch; neue Seiten werden nicht häufig hinzugefügt und bestehende Seiten werden nicht häufig geändert oder entfernt.

• Die Inhalte der Module können miteinander verwandt oder einander ähnlich sein.

Warum

Das Gruppieren und Ausblenden von Teilen des Inhalts kann eine sehr effektive Methode sein, um eine Oberfläche zu entrümpeln. Tabs funktionieren gut, ebenso wie Akkordeons, bewegliche Panels, zusammenklappbare Panels und das einfache Anordnen von Dingen in einem sauberen Raster von Titelabschnitten.

Wie

Sorge zunächst für die richtige Informationsarchitektur. Unterteile den Inhalt in zusammenhängende Abschnitte, wenn das nicht schon geschehen ist, und gib ihnen kurze, einprägsame Titel (möglichst ein oder zwei Wörter). Denke daran, dass die Nutzer/innen bei einer falschen Aufteilung der Inhalte gezwungen sind, zwischen den Tabs hin und her zu wechseln, um sie zu vergleichen oder nach Informationen zu suchen, die sie nicht finden können. Sei nett zu deinen Nutzern und teste die Art und Weise, wie du sie organisiert hast.

Kennzeichne die ausgewählte Registerkarte eindeutig, z. B. indem du sie an das Panel selbst anschließt. (Die Farbe allein reicht normalerweise nicht aus. Wenn du nur zwei Registerkarten hast, stelle sicher, dass klar ist, welche ausgewählt ist und welche nicht.)

Die Tabs müssen keine echten Tabs sein und sie müssen auch nicht ganz oben im Stapel der Module stehen. Du kannst sie in einer linken Spalte oder darunter anordnen oder sogar um 90 Grad gedreht, so dass der Text seitlich gelesen wird.

Wenn sie auf Webseiten eingesetzt werden, unterscheiden sich die Modulregisterkarten von den Navigationsregisterkarten (die für die globale Navigation, für einzelne Dokumente oder zum Laden neuer Seiten verwendet werden). Tabs sind natürlich auch dort nützlich, aber bei diesem Muster geht es eher darum, dem Nutzer eine einfache Möglichkeit zu geben, alternative Inhaltsmodule auf einer Seite zu sehen.

Wenn zu viele Registerkarten auf engem Raum Platz finden, hast du mehrere Möglichkeiten: Du kannst die Beschriftungen mit einer Ellipse kürzen (und damit jede Registerkarte schmaler machen) oder die Registerkarten mit karussellartigen Pfeiltasten verschieben. Du könntest die Registerkartenbeschriftungen auch in einer linken Spalte anordnen, anstatt sie oben zu platzieren. Setze die Tabs nie in zwei Reihen.

Beispiele

Das Flugsuchmodul von Expedia(Abbildung 4-38) unterteilt die verschiedenen verfügbaren Sucharten in Registerkarten. So kann Expedia die Optionen, die dem potenziellen Kunden zur Verfügung stehen, übersichtlich darstellen, ohne wertvolle Bildschirmfläche zu opfern.

Abbildung 4-38. Expedia-Suche

Die Systemeinstellungen von MacOS(Abbildung 4-39) verwenden ebenfalls Modulregisterkarten, um die Funktionen von dort hervorzuheben, wo ein Benutzer am ehesten danach suchen würde. Die Registerkarten befinden sich oben und sind mit Battery und Power Adapter beschriftet.

Abbildung 4-39. macOS Systemeinstellungen

Akkordeon

Was

Setze die Module des Inhalts in einen kollinearen Stapel von Panels, die der Nutzer unabhängig voneinander schließen und öffnen kann(Abbildung 4-40).

Abbildung 4-40. Beispiele für Akkordeons

Verwenden, wenn

Du hast eine Menge heterogener Inhalte, die du auf der Seite zeigen willst, darunter möglicherweise Textblöcke, Listen, Schaltflächen, Formularsteuerungen oder Bilder, und du hast nicht für alles Platz. Einige der Seiteninhalte sind in Gruppen oder Modulen zusammengefasst (oder können in kohärente Gruppen sortiert werden).

Diese Module haben die folgenden Eigenschaften:

• Es kann sein, dass du mehr als ein Modul auf einmal sehen willst.

• Manche Module sind viel höher oder kürzer als andere, aber sie sind alle ähnlich breit.

• Die Module sind Teil einer Werkzeugpalette, eines zweistufigen Menüs oder eines anderen kohärenten Systems von interaktiven Elementen.

• Die Inhalte der Module können ansonsten verwandt oder ähnlich sein.

• Du möchtest vielleicht die lineare Reihenfolge der Module beibehalten.

Beachte auch, dass bei großen oder vielen geöffneten Modulen die Beschriftungen am unteren Rand des Akkordeons über den Bildschirm oder das Fenster hinaus rollen können. Wenn das ein Problem für deine Nutzer ist, solltest du eine andere Lösung in Betracht ziehen.

Warum

Akkordeons sind zu einem vertrauten interaktiven Element auf Webseiten geworden, fast so vertraut wie Tabs und Dropdown-Menüs. (Allerdings sind sie nicht ganz so einfach zu bedienen.) Viele Websites verwenden Akkordeons in ihren Menüsystemen, um sehr lange Listen von Seiten und Kategorien zu verwalten.

Generell kann das Gruppieren und Ausblenden von Teilen des Inhalts eine sehr effektive Technik sein, um eine Oberfläche zu entrümpeln. Das Akkordeon-Muster ist Teil eines Werkzeugkastens, zu dem auch die Modulregisterkarten, die beweglichen Bereiche, die zusammenklappbaren Bereiche und die betitelten Abschnitte gehören, um dies zu erreichen.

Akkordeons können in Navigationssystemen für Webseiten nützlich sein, aber sie glänzen vor allem in Desktop-Anwendungen. Vor allem Werkzeugpaletten funktionieren gut mit Accordions (und aus ähnlichen Gründen auch mit Movable Panels). Da die Nutzer/innen beliebige Module öffnen und offen lassen können, helfen Accordions den Nutzer/innen, ihren "Lebensraum" so zu verändern, wie es ihnen passt. Dennoch ist es einfach, ein selten genutztes Modul wieder zu öffnen, wenn es gebraucht wird.

Wie

Lege den Titel fest, den du jedem Abschnitt geben willst. Er sollte kurz und prägnant sein, aber genug Informationen enthalten, um zu wissen, welche Informationen darunter stehen werden.

Erstelle eine visuelle Affordanz (einen Hinweis darauf, wie etwas verwendet werden soll), z. B. einen Pfeil oder ein Dreieck, um anzuzeigen, dass es Informationen gibt, die durch Anklicken oder Antippen aufgedeckt werden können.

Erlaube, dass mehr als ein Modul gleichzeitig geöffnet ist. Darüber gibt es unterschiedliche Meinungen - manche Designer bevorzugen es, wenn nur ein Modul gleichzeitig geöffnet ist, und manche Implementierungen erlauben nur ein Modul (oder haben zumindest einen Schalter, den die Entwickler einstellen können). Meiner Erfahrung nach ist es jedoch besser, wenn die Benutzer/innen mehrere Module gleichzeitig öffnen können. Das verhindert das plötzliche und unerwartete Verschwinden eines zuvor geöffneten Moduls und ermöglicht es den Nutzern, Inhalte in mehreren Modulen zu vergleichen, ohne die Module immer wieder öffnen und schließen zu müssen.

Wenn ein Accordion in einer Anwendung verwendet wird oder wenn der/die Nutzer/in auf einer Website angemeldet ist, sollte der Zustand der geöffneten und geschlossenen Module zwischen den Sitzungen erhalten bleiben. Das ist für Navigationsmenüs nicht so wichtig wie für Werkzeugpaletten.

Beispiele

Samsungs FAQs auf den Hilfeseiten verwenden Akkordeons, um die Frage anzuzeigen und die Antwort zu enthüllen, wenn du auf den Aufklapppfeil klickst(Abbildung 4-41). So kann der Nutzer die Seite schnell nach den gesuchten Informationen durchsuchen und bei Bedarf schnell zu einem anderen Thema navigieren.

Abbildung 4-41. Samsung Hilfe

Die Einstellungsseite von Google Chrome verwendet aufklappbare Akkordeons, um die detaillierten Einstellungsoptionen zu zeigen(Abbildung 4-42). So kann der Nutzer alle Optionen "above the fold" sehen und weiß besser, worauf er klicken muss.

Abbildung 4-42. Google Chrome Einstellungen

Zusammenklappbare Paneele

Was

Setze Module von sekundäre oder optionale Inhalte oder Funktionen in Tafeln, die vom Benutzer geöffnet und geschlossen werden können.

Verwenden, wenn

Du hast eine Menge heterogener Inhalte auf der Seite zu zeigen, möglicherweise mit Textblöcken, Listen, Schaltflächen, Formularsteuerelementen oder Bildern, oder wenn du Inhalte auf der mittleren Ebene hast, die visuelle Priorität haben müssen.

Diese Module haben die folgenden Eigenschaften:

• Ihr Inhalt kommentiert, verändert, erklärt oder unterstützt auf andere Weise den Inhalt im Hauptteil der Seite.

• Die Module sind vielleicht nicht wichtig genug, um standardmäßig geöffnet zu sein.

• Ihr Wert kann von Nutzer zu Nutzer sehr unterschiedlich sein. Manche wollen ein bestimmtes Modul unbedingt sehen, andere interessieren sich überhaupt nicht dafür.

• Selbst für einen Nutzer kann ein Modul manchmal nützlich sein, ein anderes Mal aber nicht. Wenn es nicht geöffnet ist, wird sein Platz besser durch den Hauptinhalt der Seite genutzt.

• Es kann sein, dass du mehr als ein Modul gleichzeitig öffnen willst.

• Die Module haben sehr wenig miteinander zu tun. Wenn Modulregister oder Akkordeons verwendet werden, gruppieren sie die Module zusammen, was impliziert, dass sie irgendwie miteinander verbunden sind.

Warum

Das Ausblenden von unkritischen Funktionen oder Inhalten trägt zur Vereinfachung der Benutzeroberfläche bei. Wenn ein Nutzer ein Modul ausblendet, das den Hauptinhalt unterstützt, wird es einfach ausgeblendet und gibt seinen Platz an den Hauptinhalt (oder an Leerraum) zurück. Dies ist ein Beispiel für das Prinzip der progressiven Offenlegung (versteckte Inhalte werden angezeigt, wenn und wo der Nutzer sie braucht). Generell kann das Gruppieren und Ausblenden von Teilen des Inhalts eine sehr effektive Technik sein, um eine Benutzeroberfläche zu entrümpeln.

Wie

Füge jedes unterstützende Modul in ein Panel ein, das der Nutzer mit einem einzigen Klick öffnen und schließen kann. Beschrifte die Schaltfläche oder den Link mit dem Namen des Moduls oder einfach mit "Mehr" und verwende ein Chevron, ein Menüsymbol oder ein rotierendes Dreieck, um darauf hinzuweisen, dass sich dort weitere Inhalte verbergen. Wenn der/die Nutzer/in das Panel schließt, solltest du den von diesem Panel belegten Platz wieder einklappen und für andere Inhalte nutzen (z. B. indem du den Inhalt darunter auf der Seite nach oben verschiebst).

Die Animation der Paneele beim Öffnen und Schließen hilft dem Nutzer, ein visuelles und räumliches Verständnis dafür zu entwickeln, wie das Ganze funktioniert und wo man es in Zukunft finden kann.

Wenn du feststellst, dass die meisten Nutzerinnen und Nutzer ein Klapp-Panel öffnen, das standardmäßig geschlossen ist, schalte auf standardmäßig geöffnet um.

Beispiele

Die Apple-Nachrichtenanwendung(Abbildung 4-43) verwendet ein linkes Panel ( ) als erweiterbare Möglichkeit für den Nutzer, Nachrichten- und Themenkanäle hinzuzufügen oder zu entfernen und durch diese Kanäle zu navigieren. Wenn du dich nur auf den Inhalt konzentrieren möchtest, kannst du auf das Panel-Symbol (links neben "Heute" in der mittleren Kopfzeile) tippen, um das Panel nach links zu verschieben.

Abbildung 4-43. Apple News, iPad-Version, mit erweitertem Navigationsbereich

Google Maps(Abbildung 4-44) ermöglicht es dem Nutzer, die Karte weiterhin zu sehen, während er eine Wegbeschreibung sucht. Sobald die Zielrichtung ausgewählt ist, wird das Panel zusammengeklappt, damit die Wegbeschreibung ungehindert angezeigt werden kann. Wenn der Nutzer eine Haltestelle ändern oder hinzufügen möchte, kann er das Seitenfenster einfach ausklappen.

Abbildung 4-44. Google Maps, iPad-Version, zeigt den linken Bereich mit Richtungsfunktion

Bewegliche Paneele

Was

Stelle die Module von Inhalt in Boxen, die unabhängig voneinander geöffnet und geschlossen werden können. Erlaube dem Nutzer, die Boxen frei auf der Seite in einer benutzerdefinierten Konfiguration anzuordnen. Du wirst bewegliche Felder im Center Stage-Layout oft in Erstellungsprogrammen wie der Adobe Suite(Abbildung 4-45) und in Produktivitäts- und Kommunikationsanwendungen wie Microsoft Excel und Skype sehen.

Abbildung 4-45. Bewegliche Panels in Adobe Illustrator

Verwenden, wenn

Du entwirfst entweder eine Desktop-Anwendung oder eine Website, bei der sich die meisten Nutzer anmelden. Nachrichtenportale, Dashboards und Canvas-plus-Palette-Anwendungen verwenden häufig Movable Panels. Der Bildschirm, den du gestaltest, ist ein wichtiger Teil der Anwendung oder Website - etwas, das die Nutzer/innen oft oder lange Zeit sehen. Du hast eine Menge heterogener Inhalte, die du auf der Seite anzeigen möchtest, darunter Textblöcke, Listen, Schaltflächen, Formularsteuerungen oder Bilder.

Module haben einige der folgenden Eigenschaften:

• Die Nutzer/innen werden mit Sicherheit mehr als ein Modul auf einmal sehen wollen.

• Ihr Wert kann von Nutzer zu Nutzer sehr unterschiedlich sein. Manche Leute wollen die Module A, B und C, während andere sie gar nicht brauchen und nur D, E und F sehen wollen.

• Die Module sind sehr unterschiedlich groß.

• Ihre Position auf der Seite ist für dich nicht besonders wichtig, aber für die Nutzer vielleicht schon. (Im Gegensatz dazu sollte eine Seite mit statischen Abschnitten mit Titeln so angeordnet werden, dass die Wichtigkeit der Seitenposition berücksichtigt wird; wichtige Dinge kommen zum Beispiel nach oben).

• Es gibt viele Module - möglicherweise so viele, dass ein Betrachter überwältigt wäre, wenn er alle auf einmal sehen würde. Entweder du oder der/die Nutzer/in sollten sich für eines der Module entscheiden.

• Du bist bereit, den Nutzern zu erlauben, einige Module ganz auszublenden (und einen Mechanismus anzubieten, um sie wieder einzublenden).

• Die Module können Teil der Werkzeugpalette oder eines anderen kohärenten Systems von interaktiven Elementen sein.

Warum

Verschiedene Nutzer haben unterschiedliche Interessen. Websites wie Dashboards und Portale sind für Menschen am nützlichsten, wenn sie die Inhalte, die sie sehen, selbst auswählen können. Wenn sie eine Weile in einer Desktop-Anwendung an etwas arbeiten, richten sie ihre Umgebung gerne so ein, dass sie zu ihrem Arbeitsstil passt. Sie können benötigte Werkzeuge in der Nähe ihres Arbeitsplatzes platzieren; sie können Dinge, die sie nicht brauchen, ausblenden; sie können ihr räumliches Gedächtnis nutzen, um sich zu erinnern, wo sie etwas abgelegt haben.

Rational gesehen helfen Movable Panels den Nutzern, ihre Arbeit effizienter und komfortabler zu erledigen (auf lange Sicht - nachdem sie Zeit damit verbracht haben, ihre Umgebung so einzurichten, wie sie es mögen). Aber diese Art der Personalisierung scheint die Menschen auch auf einer anderen Ebene anzusprechen. Sie tun dies zum Beispiel auf selten besuchten Websites, die eine Art von Unterhaltung bieten. Personalisierung kann das Engagement und die Akzeptanz erhöhen.

Und schließlich lassen sich mit Movable Panels neue Module, die von Dritten beigesteuert werden, leicht integrieren.

Wie

Gib jedem Modul einen Namen, eine Titelleiste und eine Standardgröße und ordne sie in einer vernünftigen Standardkonfiguration auf dem Bildschirm an. Lass den Benutzer die Module nach Belieben auf der Seite verschieben, wenn möglich per Drag-and-Drop. Erlaube es, jedes Modul mit einer einfachen Geste zu öffnen und zu schließen, z. B. mit einem Mausklick auf eine Schaltfläche in der Titelleiste.

Je nachdem, für welches Design du dich entschieden hast, solltest du dem Benutzer die Freiheit geben, diese Teile überall zu platzieren, auch wenn sie sich überschneiden. Oder du möchtest ein vordefiniertes Layout-Raster mit "Slots", in die Teile gezogen und fallen gelassen werden können - so bleibt die Ausrichtung des Bildschirms (und ein gewisses Maß an Würde) erhalten, ohne dass der Benutzer zu viel Zeit damit verbringt, mit Fenstern herumzufummeln. Manche Entwürfe verwenden Ghosting - großeDrop-Ziele, die dynamisch erscheinen, z. B. gepunktete Rechtecke -, um zu zeigen, wo ein gezogenes Modul landen würde, wenn es fallen gelassen wird.

Ziehe in Erwägung, den Nutzern die Möglichkeit zu geben, Module ganz zu entfernen. Eine "X"-Schaltfläche in der Titelleiste ist der bekannte Weg, ein Modul zu entfernen. Wenn ein Modul verschwunden ist, wie kann ein Nutzer es wieder zurückholen? Lass die Nutzer/innen Module - vielleicht auch ganz neue - aus einer Liste von verfügbaren Modulen hinzufügen, die durchstöbert und durchsucht werden können.