Skip to main content
Category

Interaction Design

Wissen – Interaction Design

Interaction Design

designsensor infografik interaction design principles interaktionsdesign prinzipien

Interaction Design – Interaktion zwischen Menschen, Dingen und Räumen

Digitale Produkte und Services sollten sich wie ein hilfsbereiter Mensch verhalten

designsensor infografik interaction design principles interaktionsdesign prinzipien

Interaction Design ist die Gestaltung von Parametern, die eine Interaktion zwischen Menschen, Dingen und Räumen ermöglichen. Während bei statischen Medien mittels Form und Inhalt eine Botschaft übermittelt wird, kommt bei digitalen Produkten die Interaktion zwischen Mensch und Maschine hinzu. Damit diese Interaktion gelingt und das digitale Produkt das Denken und Handeln der Nutzenden optimal unterstützt, braucht es Interaction Design.

Diese sechs Interaction Design Prinzipien verbessern die Mensch-Maschine-InteraktionPrinzip

1: Kontext kennen

Gutes Interaction Design ist dem jeweiligen Kontext angepasst. Das Bewusstsein, für wen und für welche Situation gestaltet wird, ist sehr wichtig. Es ist zum Beispiel ein grosser Unterschied, ob man für Anfänger oder Experten gestaltet. Als weiteres Beispiel spielt auch der Ort der Nutzung eine wichtige Rolle. Fragen, ob das Produkt sitzend im Büro oder stehend unterwegs genutzt wird, müssen geklärt sein.

Prinzip 2: Konsistenz

Interaktive Produkte werden intuitiv bedienbar und einfach erlernbar, wenn das Design konsistent ist. Bezogen auf Interaction Design bedeutet dies, dass sich das Produkt in einer bestimmten Situation immer gleich verhalten sollte. Zum Beispiel, dass auf einem Smartphone die Navigation immer auf dieselbe Art eingeblendet wird.

Prinzip 3: Die Nutzenden führen

Besonders bei komplexen Anwendungen ist es wichtig, dass die Nutzenden durch gutes Interaction Design immer wissen, wo sie sich befinden und wie sie weiter navigieren können. Elemente, über die Interaktionen ausgelöst werden können (z.B. Buttons), müssen so gestaltet werden, dass sie einen klaren Aufforderungs-Charakter haben. Es muss für die Nutzenden klar sein, welche Elemente klickbar sind und welche nicht.

Prinzip 4: Informatives Feedback

Damit die Interaktion zwischen Mensch und digitalem Produkt gelingt, muss das Produkt informatives und verständliches Feedback bieten. Technische Meldungen müssen so übersetzt werden, dass Nutzende ohne technische Kenntnisse wissen was zu tun ist.

Prinzip 5: Fehler vermeiden

Dieses Prinzip besagt, dass ein System so aufgebaut sein soll, dass technische Vorkehrungen zur Fehlervermeidung getroffen werden und Fehler unmittelbar selbst erkannt werden können. Dies beinhaltetet den Einbau von geeigneten Einschränkungen. Ein Formularfeld zur Eingabe der Telefonnummer sollte beispielsweise nur Zahlen als Eingabe ermöglichen.

Prinzip 6: Erlernbarkeit

Interaktive Produkte sollten so gestaltet sein, dass sie einfach erlernt werden können. Die Leistung und der Nutzen des Produkts muss für die Nutzenden sofort ersichtlich sein. Wenn Elemente, Verhaltensweisen und Stile im Produkt konsistent gestaltet sind, kann der Nutzende diese einmal lernen, und sich dann auf seine Ziele konzentrieren.

Weitere Beiträge

designsensor infografik interaction design principles interaktionsdesign prinzipien

Interaction Design

| Beyond Interface, Designsensor, Expertise Holistic UX- und UI-Design, Human Centered Design, Interaction Design, Usability Accessibility, Wissen | No Comments
Interaction Design – Interaktion zwischen Menschen, Dingen und Räumen Digitale Produkte und Services sollten sich wie ein hilfsbereiter Mensch verhalten Interaction Design ist die Gestaltung von Parametern, die eine Interaktion…
navigation design

Navigation

| Beyond Interface, Designsensor, Expertise Holistic UX- und UI-Design, Interaction Design, Wissen | No Comments
Navigation Navigation bezeichnet den Akt des Bewegens zwischen den Bildschirmen einer App, um bestimmte Aufgaben zu erledigen Navigieren wird durch unterschiedliche Navigationskomponenten und die Einbettung des Navigationsverhaltens in den Inhalt…
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








    Navigation

    navigation design

    Navigation

    Navigation bezeichnet den Akt des Bewegens zwischen den Bildschirmen einer App, um bestimmte Aufgaben zu erledigen

    navigation design

    Navigieren wird durch unterschiedliche Navigationskomponenten und die Einbettung des Navigationsverhaltens in den Inhalt ermöglicht. Dabei gilt es die unterschiedlichen Plattformeigenheit von Google und Apple zu beachten.

    Was ist Navigationsdesign?

    Die Informationsarchitektur (IA) und das Navigationsdesign hängen eng miteinander zusammen und müssen in der Praxis klar unterschieden werden. Während die IA die Struktur des digitalen Produkts definiert und die Gestaltung der Navigation mitbestimmt, setzt sich die Navigation des digitalen Produkts aus verschiedenen User Interface-Komponenten und deren Verhalten zusammen.

    Menschen neigen dazu, sich der Navigation einer App nicht bewusst zu sein, bis sie ihre Erwartungen nicht erfüllt. Ihre Aufgabe ist es, die Navigation so zu implementieren, dass sie die Struktur und den Zweck Ihrer App unterstützt, ohne die Aufmerksamkeit auf sich zu ziehen. Die Navigation sollte sich natürlich und vertraut anfühlen und sollte nicht die Oberfläche dominieren oder den Fokus vom Inhalt ablenken. Apple, Human Interface Guidelines

    Google unterscheidet in den material.io Guidelines die «Seitliche Navigation», die «Vorwärtsnavigation» und die «Rückwärtsnavigation». Ergänzt wird das Thema durch die direkte Navigation mittels Suche. Apple unterscheidet in den Human Interface Guidelines die «Hierarchische Navigation», «Flache Navigation» und die «Inhaltsgesteuerte oder erlebnisorientierte Navigation».

    Seitliche Navigation (Apple: Flache Navigation)

    bezieht sich auf das Navigieren zwischen Bildschirmen auf derselben Hierarchieebene. Die primäre Navigationskomponente sollte den Zugriff auf alle Ziele auf der obersten Hierarchieebene ermöglichen.

    UI-Komponenten für die seitliche Navigation sind

    • Global Header
    • Side-Bar, Navigation Drawer, Navigation Rail

    Vorwärtsnavigation (Apple: Hierarchische Navigation)

    bezieht sich auf das Bewegen

    • zwischen Screens auf aufeinanderfolgenden Hierarchieebenen
    • auf Schritte in einem Ablauf / Flow
    • über eine App hinweg

    Bei der Vorwärtsnavigation wird das Navigationsverhalten in folgende UI-Komponenten eingebunden:

    • Container (wie z.B. Listen, Bilder, Grafiken)
    • Buttons
    • Links
    • Suche

    Rückwärtsnavigation

    bedeutet, sich rückwärts durch Bildschirme zu bewegen, entweder

    • chronologisch (innerhalb einer App oder zwischen verschiedenen Apps)
    • hierarchisch (innerhalb einer App)

    Vom Bildschirm «xyz» aus können Benutzende auf eine von zwei Arten rückwärts navigieren:

    • aufwärts in der Hierarchie zum übergeordneten Bildschirm (z.B. mittels Breadcrumb)
    • chronologisch, zu einem Suchergebnisbildschirm, aber nur, wenn der Benutzer von diesem Bildschirm aus navigiert hat

    Weiter Anmerkungen und Hinweise zum Thema Rückwärtsnavigation

    Umgekehrt chronologisch

    Die umgekehrte chronologische Navigation bezieht sich auf das Navigieren in umgekehrter Reihenfolge durch die Historie der zuletzt angezeigten Bildschirme eines Benutzenden.

    Benutzende können sich zwischen Bildschirmen innerhalb einer App (oder über mehrere Apps hinweg) bewegen. Beispielsweise ist die Schaltfläche «Zurück» in einem Webbrowser eine Form der umgekehrten chronologischen Navigation. Diese Art der Navigation wird normalerweise vom Betriebssystem oder der Plattform bereitgestellt. Diese definieren das Rückwärtsverhalten und wie Benutzende auf diese Funktionalität zugreifen können.

    Aufwärtsnavigation

    Die Aufwärtsnavigation ermöglicht es Benutzenden, innerhalb der Hierarchie einer einzelnen App eine Ebene nach oben zu navigieren, bis der Start- oder Top-Level-Bildschirm der App erreicht ist.

    Der Pfeil nach oben in der oberen App-Leiste ist zum Beispiel eine Form der Aufwärtsnavigation. Die Aufwärtsnavigation sollte für alle untergeordneten Bildschirme in einer App implementiert werden und den Plattformrichtlinien folgen.

    Aus der Praxis

    5 Fragen, die in jedem Projekt beantwortet werden müssen:

    • Welches Navigationskonzept erwarten die Nutzenden bei dieser Art von Produkt?
    • Welche Navigation müssen wir immer anbieten (Suche, Filter, Themen)?
    • Wo im Seitenlayout erwarten die Nutzer die Navigationskomponente?
    • Können wir das Navigationssystem für Untermenüs auf dem Handy vertikal teilen?
    • Benötigen wir wirklich eine tief verschachtelte Navigation (>3 Ebenen)?

    Definieren Sie die IA bevor Sie mit dem Design der Navigation beginnen

    Die IA muss nicht unbedingt vollständig fertig sein, damit Sie mit Wireframes und ersten Prototypen starten können – aber es ist zwingend notwendig zu wissen, wie komplex und umfangreich das geplanten digitale Produkt wird. Treffen Sie Entscheide für bestimmte Navigationskomponenten nicht nach dem Aussehen und ihren persönlichen Präferenzen. Setzen Sie Navigationskomponenten ein, die den Bedürfnissen und Erwartungen der Nutzenden und den Inhalten des digitalen Produkts dienen.

    Links zum Thema Accessibility

    Weitere Beiträge

    designsensor infografik interaction design principles interaktionsdesign prinzipien

    Interaction Design

    | Beyond Interface, Designsensor, Expertise Holistic UX- und UI-Design, Human Centered Design, Interaction Design, Usability Accessibility, Wissen | No Comments
    Interaction Design – Interaktion zwischen Menschen, Dingen und Räumen Digitale Produkte und Services sollten sich wie ein hilfsbereiter Mensch verhalten Interaction Design ist die Gestaltung von Parametern, die eine Interaktion…
    navigation design

    Navigation

    | Beyond Interface, Designsensor, Expertise Holistic UX- und UI-Design, Interaction Design, Wissen | No Comments
    Navigation Navigation bezeichnet den Akt des Bewegens zwischen den Bildschirmen einer App, um bestimmte Aufgaben zu erledigen Navigieren wird durch unterschiedliche Navigationskomponenten und die Einbettung des Navigationsverhaltens in den Inhalt…
    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