Skip to main content
Category

Information Design

Wissen– Information Design

Gestaltgesetze

Gestaltgesetze UX Heuristik

Gestaltgesetze

Gutes Design ist so wenig Design wie möglich. Dieter Rams

Gestaltgesetze UX Heuristik

Die Anwendung der Gestaltgesetze helfen der Designerin bei der Strukturierung des Layouts und der Anordnung der einzelnen User Interface Elemente

Warum brauchen wir Gestaltgesetze?

Die Gestaltgesetze spielen im Zusammenhang mit der Gestaltung digitaler Produkte eine wichtige Rolle. Ohne Beachtung dieser Regeln kann es leicht passieren, dass beispielsweise zusammengehöriger Inhalt nicht als solcher erkannt wird, und sich die Benutzenden nicht orientieren können.

Wir Menschen orientieren uns an unbekannten Orten indem wir nach Vertrautem suchen, um daraus weitere Informationen abzuleiten. Aus Erfahrung wissen wir beispielsweise, dass die Dorfkirche im Zentrum des Ortes steht. So können wir uns am Kirchturm orientieren, um das Zentrum zu finden. Auch in der virtuellen Welt orientieren wir uns an vertrauten Mustern und erwarten, dass bekannte User Interface Elemente an einer bestimmten Stelle im Layout positioniert sind.

Um die richtigen Entscheide fällen zu können, muss die Interface Designerin die Erwartungen der Benutzenden kennen und wissen, wie ihr Blickverhalten ist. Mit diesen Kenntnissen, und einem Set an Gestaltungsregeln ausgerüstet, kann die Struktur des digitalen Produkts entwickelt werden.

Die Gestaltgesetze basieren auf der Erkenntnis, dass die menschliche Wahrnehmung in ihrem Effizienzstreben bei der Verarbeitung von Informationen auf vorhandene Erfahrungen zurückgreift.

Dabei wählt unser Gehirn die Interpretationsmöglichkeit aus, welche die kleinste kognitive Anstrengung verursacht. Automatisch reduzieren wir die Anzahl der zu verarbeitenden Objekten, indem wir ähnliche Bildbestandteile zu Einheiten zusammenfassen. Ein gutes User Interface beachtet die Regeln der Gestaltgesetze und bricht diese bewusst, damit eine spannende und zugängliche Benutzeroberfläche entsteht.

Gesetz der Ähnlichkeit

Das Grundgesetz der Gestaltpsychologie ist das Gesetz der Ähnlichkeit. Dies besagt, dass die menschliche Wahrnehmung zusammengehörende Elemente durch Ähnlichkeiten erkennt. Somit werden einander ähnliche oder gleiche Elemente eher als zusammengehörig erlebt, als einander unähnliche. Umgekehrt nehmen wir Elemente, die sich in wichtigen Merkmalen unterscheiden, als voneinander unabhängig wahr.

Ähnlichkeit lässt sich mittels

  • Form
  • Farbe
  • Textur
  • Position
  • Orientierung
  • Grösse

ausdrücken.

Design Basics:

Gestalten Sie Interface Elemente mit ähnlichen oder gleichen Inhalten / Funktionen immer gleich

Gesetz der Nähe

Elemente mit geringen Abständen zueinander nehmen wir als zusammengehörig wahr. In digitalen Produkten kann das Gesetz der Nähe angewendet werden, um strukturelle Zusammenhänge (beispielsweise ein Bild mit dazugehörendem Text) abzubilden, und damit die Informationsdichte zu reduzieren.

Design Basics:

Stellen Sie zusammengehörende Interface Elemente immer möglichst nah beieinander dar

Gesetz der Prägnanz (guten Gestalt)

Ein zentrales User Interface Element, das sich deutlich vom Rest abheben soll, kann mittels prägnanter Gestaltung in den Fokus gerückt werden. Wesentliche Gestaltungsmittel sind Farbe, Grösse, Form. Die menschliche Wahrnehmung bevorzugt Gestalten, die sich von anderen durch ein bestimmtes Merkmal abheben.

Design Basics:

Priorisieren Sie die unterschiedlichen User Interface Elemente. Welches Element soll am prägnantesten sein? Tipp: Dieses erkennen Sie, wenn Sie mit zugekniffenen Augen «unscharf» das User Interface betrachten.

Gesetz der Geschlossenheit

Unsere Wahrnehmung ist bestrebt, mehrere Objekte möglichst als Einheit zu sehen. Dabei identifizieren wir einfache und bekannte Formen schneller als komplexe und unbekannte. Das Gesetz der Geschlossenheit wird sehr häufig angewendet (z.B. Umrandung der Schaltfläche mit Konturlinien, Gliederung des Bildschirms durch Farbflächen, um hier zwei zu nennen). Eine vollständige Geschlossenheit ist nicht immer notwendig. Unser Gehirn ergänzt bei bekannten Formen automatisch die fehlenden Linien durch erdachte Linien.

Design Basics:

Nutzen Sie das Gesetz der Geschlossenheit, um ähnlich gestaltete Informationen / Funktionen voneinander zu trennen, wenn diese nicht zusammen gehören. Fassen Sie mittels realen, oder kognitiv ergänzten Linien, zusammengehörende Informationen / Funktionen zu einer Einheit zusammen.

Gesetz der Kontinuität

Das Gesetz der Kontinuität beschreibt, dass wir Menschen dazu neigen, einzelne Elemente so zu gruppieren, dass sie die erdachte Linie oder Kurve in Sinne ihrer bisherigen Linienführung fortsetzen. Selbst wenn sich in einem Diagramm zwei Linien schneiden, führen wir im Kopf automatisch den «natürlichen» Verlauf fort, und nehmen nicht an, dass die Linien an dieser Stelle einen Knick machen.

Design Basics:

Wenden Sie die die Wirkung dieses Gesetztes zum Gliedern einzelner Hierarchiestufen an. Inhalte auf der gleichen (erdachten) Fluchtlinie gehören zur gleichen logischen Ebene. Dies ist zum Beispiel bei einer komplexen Navigation hilfreich.

Gesetz des gemeinsamen Schicksals

Auch sehr unterschiedliche Elemente, die sich in die gleiche Richtung oder im gleichen Rhythmus bewegen, werden als zusammengehörige Gruppe wahrgenommen. Die Ähnlichkeit im Verhalten kann mittels Bewegung und Animation erzeugt werden. Einblenden, ausklappen, verschieben und andere. Auch akustische Signale, wie Geräusche oder Klänge, helfen dem Benutzenden bestimmte Ereignisse oder Meldungen einordnen zu können.

Design Basics:

Wenden Sie das Gesetz an, um Grundelemente (ruhend) und Figuren (bewegt) zu verdeutlichen.

Gesetz der gemeinsamen Regionen

Elemente in abgegrenzten Gebieten werden als zusammengehörig wahrgenommen. Das Gesetz der gemeinsamen Region hat vor allem Bedeutung, wenn mehrere Elemente (Gruppen) gleichzeitig auf einem Screen vorhanden sind.

Design Basics:

Grenzen Sie Elemente, die zusammengehörig sind, mittels hinterlegter Farbfläche oder Konturline, von den anderen Elementen ab.

Gesetz der Verbundenheit

Miteinander verbundene Formen werden als Einheit wahrgenommen. Unter Umständen kann das Gesetz der Verbundenheit andere Gestaltgesetze, wie z.B. das Gesetz der Nähe oder das Gesetz der Ähnlichkeit, übersteuern.

Design Basics:

Wenden Sie das Gesetz der Verbundenheit an, um Elemente, die zusammen eine Einheit bilden, miteinander zu verbinden.

Weitere Beiträge zum Thema

designsensor infografik designaudit

Designaudit

| Beyond Interface, Brand Design, Design Strategy, Designmethoden, Designsensor, Expertise Design Strategy, Wissen | No Comments
Designmethode – Designaudit Wie Sie Markenrichtlinien konsistent auf den Punkt bringen Beim Designaudit werden Einsatz und Wirkung von Design intern in der Organisation und extern (zum Beispiel in Produkten, Dienstleistungen,…
designsensor infografik experience principles erlebnisprinzipien

Experience Principles

| Beyond Interface, Brand Design, Designmethoden, Designsensor, Expertise, Expertise Design Strategy, Expertise Human Machine Interface, User Experience Design, Wissen | No Comments
Designmethode – Experience Principles Wie Sie mit Erlebnisprinzipien Kundenbedürfnisse und Markenpersönlichkeit in Einklang bringen Experience Principles (deutsch: Erlebnisprinzipien) beschreiben wie Kundinnen und Kunden einer Marke deren Produkte und Dienstleistungen konsistent…
Zurück zur Übersicht

Weitere Beiträge

designsensor infografik designaudit

Designaudit

| Beyond Interface, Brand Design, Design Strategy, Designmethoden, Designsensor, Expertise Design Strategy, Wissen | No Comments
Designmethode – Designaudit Wie Sie Markenrichtlinien konsistent auf den Punkt bringen Beim Designaudit werden Einsatz und Wirkung von Design intern in der Organisation und extern (zum Beispiel in Produkten, Dienstleistungen,…
designsensor infografik experience principles erlebnisprinzipien

Experience Principles

| Beyond Interface, Brand Design, Designmethoden, Designsensor, Expertise, Expertise Design Strategy, Expertise Human Machine Interface, User Experience Design, Wissen | No Comments
Designmethode – Experience Principles Wie Sie mit Erlebnisprinzipien Kundenbedürfnisse und Markenpersönlichkeit in Einklang bringen Experience Principles (deutsch: Erlebnisprinzipien) beschreiben wie Kundinnen und Kunden einer Marke deren Produkte und Dienstleistungen konsistent…
Zurück zur Übersicht

Kontakt

Haben Sie ein spannendes Projekt oder brauchen Sie Unterstützung beim Lösen einer Herausforderung?

Wir freuen uns auf Ihre Kontaktaufnahme!

Kommen Sie uns besuchen, laden Sie uns ein oder rufen Sie uns an unter +41 31 970 30 90

Kontaktformular









    Informationsarchitektur

    informationsarchitecture ia

    Informationsarchitektur – Bauplan der Designstruktur

    Die Informationsarchitektur bildet das Rückgrat jeder digitalen Anwendung

    informationsarchitecture ia

    Die Informationsarchitektur (IA) organisiert, strukturiert und kennzeichnet Inhalte. Die IA hat zum Ziel, den Benutzenden relevante Informationen zur Erledigung ihrer Aufgaben zur Verfügung zu stellen.

    Wir Menschen haben uns daran gewöhnt, die Inhalte und Funktionalität der digitalen Produkte so zu erleben, wie viele von ihnen sind: gut strukturiert und einfach zu bedienen. Dies passiert nicht zufällig.

    Was ist Informationsarchitektur?

    Informationsarchitektur ist eine Wissenschaft der Organisation und Strukturierung von Inhalten für Websites, Mobile Apps, Social Media und Softwareoberflächen. Die IA ist kein Bestandteil des User Interfaces (UI) – viel mehr versorgt die IA das UI mit Informationen. Die IA wird in Tabellen und Diagrammen dokumentiert, nicht aber in Wireframes, umfassenden Layouts oder Prototypen. Auch wenn die IA selbst nicht im UI zu sehen ist, hat sie Auswirkungen auf die User Experience (UX). Eine gute IA vermittelt den Nutzern das gute Gefühl, Inhalte entsprechend ihren Anforderungen und Erwartungen zu bekommen.

    Die IA ist der Bauplan der Designstruktur. UX-Designer verwenden die IA als Basismaterialien, um das Navigationssystem zu planen

    Der Zweck der IA besteht darin, den Benutzenden die richtigen Informationen zu geben, damit diese verstehen, wo sie sich befinden und welche Informationen sie gefunden haben. Die IA beeinflusst einerseits die Content-Strategie, durch die Verwendung der passenden Begriffe, und andererseits versorgt  sie das User Interface mit Informationen, die eine zentrale Rolle beim Prototyping und Gestalten der Interaktion spielen.

    Hauptkomponenten der Informationsarchitektur sind:

    Organisationsschemata und Strukturen

    Wie werden Informationen kategorisiert und strukturiert?

    Es können drei Hauptorganisationsstrukturen unterschieden werden:

    • hierarchisch
    • sequentiell
    • matrix

    Weiter können Inhalte

    • chronologisch
    • alphabetisch
    • thematisch
    • nutzerspezifisch

    • strukturiert werden,

    Beschriftungssysteme

    Wie werden zusammengehörende Informationen effektiv vereint und dargestellt?

    Ein Beispiel: Hinter dem Label «Kontakt» erwarten Benutzende alle relevanten Informationen und Funktionalitäten zu erhalten, um mit dem betreffenden Menschen in Kontakt treten zu können.

    Navigationssystem

    Wie bewegen sich die Benutzenden durch die Informationen?

    Das Navigationssystem im Sinne der IA beinhaltet die Art und Weise, wie sich Benutzer durch den Inhalt bewegen und besteht aus einer Vielzahl an Mustern und Komponenten.

    Suchsysteme

    Wie können Benutzende mit der Suche Informationen finden?

    Informationsreiche Produkte sollten eine Suchfunktion mit Filtern und erweiterten Tools anbieten, die die Benutzenden beim Finden unterstützen.

    Vorgehen

    Content Inventar

    Bestehende Inhalte und Funktionalitäten lokalisieren und identifizieren

    Content Audit

    Inhalte auf Nützlichkeit, Richtigkeit, Artikulation und Gesamteffektivität prüfen

    Informationsgruppierung

    Nutzerzentrierten Beziehungen zwischen den Inhalten definieren

    Entwicklung der Taxonomie

    Namenskonvention (kontrolliertes Vokabular) definieren, um diese überall anzuwenden

    Erstellen von Informationsbeschreibungen

    Nützliche Metadaten definieren (die genutzt werden können, um Navigationselemente, die das Entdecken in Inhalten erleichtert, zu generieren)

    Weitere Beiträge

    designsensor infografik designaudit

    Designaudit

    | Beyond Interface, Brand Design, Design Strategy, Designmethoden, Designsensor, Expertise Design Strategy, Wissen | No Comments
    Designmethode – Designaudit Wie Sie Markenrichtlinien konsistent auf den Punkt bringen Beim Designaudit werden Einsatz und Wirkung von Design intern in der Organisation und extern (zum Beispiel in Produkten, Dienstleistungen,…
    designsensor infografik experience principles erlebnisprinzipien

    Experience Principles

    | Beyond Interface, Brand Design, Designmethoden, Designsensor, Expertise, Expertise Design Strategy, Expertise Human Machine Interface, User Experience Design, Wissen | No Comments
    Designmethode – Experience Principles Wie Sie mit Erlebnisprinzipien Kundenbedürfnisse und Markenpersönlichkeit in Einklang bringen Experience Principles (deutsch: Erlebnisprinzipien) beschreiben wie Kundinnen und Kunden einer Marke deren Produkte und Dienstleistungen konsistent…
    Zurück zur Übersicht

    Kontakt

    Haben Sie ein spannendes Projekt oder brauchen Sie Unterstützung beim Lösen einer Herausforderung?

    Wir freuen uns auf Ihre Kontaktaufnahme!

    Kommen Sie uns besuchen, laden Sie uns ein oder rufen Sie uns an unter +41 31 970 30 90

    Kontaktformular