Loading...
Human Centered Design
Work in Progress

Human Centered Design

Das Gestaltungsprinzip, welches die Brücke zwischen virtuellem Raum und menschlicher Interaktion schlägt. Eine nachhaltige Design Thinking Strategie

Einführung

The Norman Door

Donald Norman ist die Ikone für Human Centered Design.

Sein Buch wie seine Erklärungen laden zum verweilen ein. Sie öffnen den Weg achtsamer, kritischer und unbefangener mit der eigenen Gestaltungsarbeit umzugehen.

Fundamentale Design Prinzipien

Basics

Es gibt sieben Human Centered Design Prinzipien die helfen Designprobleme zu lösen.

Einen kurzen Überblick findest du hier.

Die sieben Design Prinzipen des Human Centred Design als kleine Icons illustriert.
© Webdesign Essentials
Die sieben Design Prinzipen des Human Centred Design als kleine Icons illustriert.
2

Refresh Link

Usability

Die Sieben Design Prinzipien

1. Discoverability

Die Entdeckungsfähigkeit für Menschen die ein Objekt begegnen ist ein zentraler Aspekt worauf im Human Centered Design geachtet wird.

Bei der Erarbeitung eines Webdesigns sollten alle Komponenten Funktionsgerecht inszeniert werden. Interaktions-Elemente sollten sich, als klickbare Flächen zu erkennen geben. Während nicht Interaktions-Elemente nicht nach Schaltflächen aussehen sollten.

Viele Usability Elemente beruhen auf der Eigenschaft von der Entdeckungsfähigkeit.

2. Feedback

Interagiert man mit einem Objekt sollte es einem eine intuitiv verständliche Rückmeldung (Feedback) geben, ob man richtig oder falsch interagiert hat. Ist das Feedback unklar oder missverständlich, so muss das Design darauf hin, optimiert werden.

Human Centered Design vertritt die Ansicht, dass es nicht die falsche Anwendung seitens des Menschen gibt, sondern dass es falsch gestaltet wurde.

3. Conceptual Model

Das Prinzip besagt, dass die Gestaltung durch ihr Layout dem Menschen bei der Betrachtung alle notwendigen Informationen präsentiert um ihm ein bestmögliches Verständnis über den bevorstehenden Prozess vermittelt. So dass ein Gefühl entsteht, das man es verstanden hat.

4. Affordances

Jedem Objekt liegt eine natürliche und sinngemässe Anwendung zugrunde. Dieser Angebotscharakter (Affordances) sollte sich im Design auszeichnen. Das Prinzip fordert eine Intuitive Bedingung des Elementes und eine Gestaltung, welche dies Unterstützt.

5. Signifiers

Auslöser von Interaktionen (Triggers/Signifiers) sollten so sachdienlich wie möglich gestaltet werden. Erfüllen sie ihre Aufgabe richtig, so ermöglichen sie eine bessere Discoverability und geben ein klares und verständliches Feedback.

6. Mappings

Die Beziehung zwischen der Bedienung und seiner Aktion folgen dem Prinzip einer guten Auslegeordnung (Mapping). Diese wird durch ein klares räumliches Layout sowie einer zeitlichen Abhängigkeit der Veränderung gewährleistet.

7. Constraints

Es gilt bei der Gestaltung die physischen, logischen, semantischen sowie kulturellen Einschränkungen und Bedingungen (Constraints) zu berücksichtigen. Sie ermöglichen eine bessere Interaktion sowie Interpretation (Conceputal Model) des Menschen mit dem Objekt.

Iteration Process

Workflow

Iterationen sind die Wiederholungen eines Prozesses. Durch die Wiederholung wird ein Produkt stetig optimiert und bessere Antworten für die Probleme gefunden.

Es gibt viele Wege sich den passenden Arbeitsprozess zu erarbeiten. Diese vier Grundpfeiler helfen dir dabei

Observe

Erkunde die Aufgabenstellung anhand der Menschen, welche dieses Produkt (z. B. Webseite) nutzen. Wie sie es nutzen und welche Fragen, Bedürfnisse und Ziele sie dabei haben.

Ideate

Erarbeite aus den Problemstellungen und Anforderungen gezielte Lösungswege. Entwerfe die bestmöglichen Ansätze.

Prototype

Gestalte und Entwickle Prototypen von rohen Wireframes über High-Fidelity Designs hin zu Webseiten.

Test

Überprüfe die Prototypen, um zu verstehen, ob dein Ansatz richtig war, wo noch Fehler oder Unstimmigkeiten bestehen und beginne den Prozess von vorne bis alles sitzt.

Kreisdarstellung mit den vier Iteration-Prozess-Schritten.
© Webdesign Essentials
Kreisdarstellung mit den vier Iteration-Prozess-Schritten.
3

Links

IDEO - Design Kit: Human Centred Design

Mindset

IDEO

Eine persönliche Haltung zum Human Centered Design ist fundamental.

Wenn man all die Anforderungen und Bedingungen als spannende Herausforderungen annimmt, eröffnen sich optimistische Wege mit den Schwierigkeiten umzugehen und Lösungen dazu zu finden.

Einfach machen

Erst wenn man fertig ist, kann man beginnen. Daher soll man nicht zu lange zuwarten, sondern einfach loslegen.

Aus Fehlern lernen

Fehler sind unvermeidbar, aber ein Lern- orientierter Umgang hilft aus Fehlern zu lernen. Fehler werden so zu Gestaltungsexperimente.

Empathie

Verständnis über Menschen, für die man arbeitet eröffnen einem ungeahnte Möglichkeiten. Es löst den Geist von den eigenen Bedürfnissen innerhalb eines Projektes. So wird man gelassener und achtsamer dem Projekt und den Anforderungen gegenüber.

Mehrdeutigkeiten charakterisieren

Es gibt nicht DIE Lösung. Trifft man auf verschiedene Optionen, wohin die Reise geht, versuche diese Wege zu verdeutlichen um ihren Kern zu finden. Der Kontrast von Optionen hilft sich zu entscheiden.

© IDEO.org

Methods

IN THE Process

Es gibt unzählige Methoden, um in einen Design Thinking Prozess einzusteigen.

Verschaffen wir uns einen Überblick über die drei Abschnitte während des Designprozesses.

Dabei gehe ich nicht auf Kreativitätstechniken oder Arbeitsprozesse im Allgemeinen ein, sondern fokussiere hier auf die Human Centered Design bezogenen Methoden.

Inspiration, Ideation und Implemetation

© IDEO.org

Inspiration

OBserve

Verschaffe dir Zugang zu unendlichen Ideen mittels der richtigen Inspiration.

Jede Aufgabe ist ein einem Kontext eingebettet. Erforsche diesen Kontext, um die zugrunde liegenden Aspekte zu erfahren.

Stelle die W-Fragen

Wer? Wann? Wo? Warum? Wie? Was? - Dies gehört zum Marketing 1x1, aber es ist sehr hilfreich den Kontext verstehen zu lernen.

Betreibe Feldforschung

Mache Interviews, Fotoreportagen, Besuche, Führungen, Beobachtungen, Audits, Inhaltsanalysen, Konkurrenzanalysen oder schlüpfe in die Rollen der Menschen und Orte, die relevant sind für ein Projekt. Es verschafft dir ungeahnte Einsichten über die Relevanz verschiedener Aspekte. Auch solchen, die dir nie aufgefallen wären.

Sammle Footage Material

Sammle Bilder, Wörter, Farben und Stimmungen. Entwerfe Ideen, Projektpläne oder Designziele um deine Inspirationen und Beobachtungen zu schärfen und an den Dingen festzuhalten, die dich überzogen haben.

Moodboards helfen gewisse Stossrichtungen zu präzisieren. Skizzen helfen erste Konkretisierungen zu erschaffen.

© Shots of Awe

Ideation

Create

In der Ideation Phase wird das Projektziel sowie mögliche Lösungswege aus all dem Material der Inspirationsphase erarbeitet.

Der Fokus dabei liegt aber auch im Aufbrechen alter Denkmuster, Annahmen und Vorurteilen, welche sich bei jedem Menschen bilden.

Daher ist der Diskurs mit Mitmenschen in der Ideation-Phase ein zentraler Aspekt.

Mind-Mapping zum Storyboard

Zuerst gilt es eine Auswahl an Ideen zu kreieren. Dafür gibt es unzählige Techniken. Diese Optionen und Lösungswege werden immer konkreter skizziert bis hin zu einer schlüssigen Geschichte.

Vorbereitung

Für die Wahl der richtigen Methoden hilft es, bereits eine Vorstellung zu haben, was in der Implementations-Phase benötigt oder gemacht wird. So kann das Resultat einer Ideation-Session auf die Weiterverarbeitung zugeschnitten werden.

Implementation

Make

In der Implementations-Phase wird eine Idee konkretisiert und immer realer konstruiert.

Prototyping

In den ersten Runden der Implementationsphase sind es noch klickbare Prototypen die erstellt werden. Von Low-Res zu Hi-Res. Also von Wireframes hin zu richtigen Designs.

Später werden Frontend-Prototypen gebaut oder gleich die echte Seite oder spezifische Module/Prozesse programmiert.

User-Feedback

Am Ende jeder Implementationsphase wird das Produkt getestet und Rückmeldungen gesammelt, die in einer nächsten Runde einfliessen.

So wird ein Produkt stets optimiert bis es «Lebensfähig» ist.

Doch Webseiten sind keine starren Konstrukte, sie werden stetig optimiert, überarbeitet und verändert. Somit ist auch nach der «Online-Schaltung» der Iterationsprozess nicht abgeschlossen.

© LinkedIn Learing Solutions
8

Da jegliche physische Form, Räumlichkeit, Mechanik oder Haptik fehlt, hat Web Design viel mehr mit Produkt-Design, Industrie-Design, Signaletik und Architektur zu tun, als mit klassischer Print-Grafik.

Ein Hauptgrund, weshalb Human Centered Design so relevant ist.

A Design Thinking Process

Zusammenfassung

Human Centered Design ist ein Design Thinking Prozess. Es umfasst viel mehr als nur die visuelle Gestaltung.

Auch wenn der Fokus dieser Webseite für Webdesign gedacht ist, gehört ein holistischer, sprich ganzheitlicher Design Ansatz zur Grundhaltung.

Diverse Design Thinking Theorien gehören zur Familie des Human Centered Design. Ein kurzer Überblick als Abschluss.

User Experience Design

UX Design

Das Zauberwort der 10er Jahre. UX (User-Experience) Design.

Die Benutzer-Erfahrungsgestaltung fokussiert auf die emotionale, intellektuelle wie rationale Erfahrungen, welche Menschen bei der Bedienung von digitalen Produkten haben.

Dabei wird der ganze Produktionsprozess auf diese User-Experience abgestimmt. 

Von Customer-Journeys, Customer Stories zu den Design- wie Programmiersprints während der Entwicklung. Der gesamte Workflow orientiert sich nach der User-Experience.

Essenziell dabei sind die Evidenz basierten Entscheidungen die anhand von User-Test Resultaten getroffen werden.

Kritik

UX-Design ist ein Hype. Somit oft missverstanden und falsch angewandt. UX-Prozesse können Projekte unnötig aufblasen (Budget/Team) oder verleiten einem zu pseudo- evidenzbasierten Lösungen.

Zudem wird der Fokus auf die Problemsuche von User*innen gesetzt. So werden problemorientierte Arbeitsprozesse entwickelt und die wirklichen Herausforderungen nicht angegangen.

Service Design Thinking

Same Same But Different.

Service Design ist ebenso Human/User Centered jedoch wird der Fokus auf die Dienstleistung (Service) gelegt.

Die Gewichtung der Gestaltungsentscheide beim Service Design liegt nicht nur auf dem User, sondern hat einen holistischen (ganzheitlichen) Designansatz, der die gesamte Produktionskette einer Dienstleistung (z. B. Verkauf von Schuhen) mit allen Menschen, die in diesem Prozess involviert sind berücksichtigt.

Beispiel

So können Designentscheide zugunsten von Webseiten-Administratoren gefällt werden, statt den Prozess ideal für den User zu machen, da die Analyse aller Argumente sich dafür entschieden hat.

Material Design Thinking

Googles Weg

Material Design ist ein Design System, aber die globale Implikation, welche Material-Design auf den Umgang mit digitalen Interfaces hatte, macht es zu mehr als das.

Material Design ist ein Umgang mit allen Aspekten von Interface Design umzugehen. 

Von der Physik der digitalen Materialität zu den Interaktionen von User*innen mit den Interfaces über all die Devices und Applikationen die damit bespielt werden, findet Material Design Antworten.

Der Fokus liegt hier auch auf der Zusammenarbeit zwischen Designer*innen und Entwickler*innen sowie den Technologien die genutzt werden.

© Google Design

Human Interface Guidelines

Apples Weg

Apple setzt seit Beginn ihren Fokus auf Human Centered Design.

Ihr starker Fokus auf ein simplifiziertes, benutzerfreundliches Design, egal ob Produkt oder Software, prägt stark die Designentwicklung der digitalen Welt.

Lange bevor UX-Design so populär war, definierte Apple ihre Designpraxis mittels Human Interface Guidelines.

Ein Fokus der Apple stets verfolgte ist das Inklusive Design. Also Design, welches Accessibility für möglichst alle Menschen unterstützt.

© Think Multiply

Biomimicry

Die Natur als Vorbild

Die Suche nach dem besten Design für Menschen endet nicht beim Menschen. Schlussendlich sind wir alles Tiere in einem Ökosystem.

Warum also die Referenz für eine Lösung für ein Gestaltungsproblem nur beim Menschen suchen, wenn man sie in der Natur findet.

Leben auf dem Planeten existiert seit rund 3.8 Milliarden Jahren. Ihre Entwicklung und Evolution sind genauso ein Iterativer Prozess. Es lohnt sich also diesen Vorsprung zu nutzen.

© VOX + 99% Invisible

Als Webdesigner*innen müssen wir diese Bedingungen mittels der visuellen Gestaltung überbrücken, damit User*innen ihre gelernten Muster aus der realen Welt in die virtuelle Welt übertragen können.

Emotional Design

Viele dieser Muster sind nicht rational

Wir sind alles Menschen. Lebewesen. Unsere Kognition ist ein komplexes System, welches nicht nur auf rationaler Logik beruht.

Als Designer kann man alle relevanten Aspekte aus der Gestaltungslehre richtig machen und doch findet es keinen Anklang bei der gewünschten Zielgruppe.

Emotionen geben dem Menschen die Möglichkeit zu entscheiden, ob sie etwas mögen oder nicht. Sie definieren eine Wertigkeit.

Somit gehört für mich die Intuition eines Designers genauso zum Repertoire seiner Werkzeugkiste wie User-Tests oder Typografie-Grundlagen.

© NNGroup
16

Links

Wikipedia: Kognitionswissenschaft

Gestalte wie Menschen denken.

Daher

Donald Norman sagt's nochmals und nochmals und nochmals.

© NNgroup

Was ist Web-Design?

Perspektivenwechsel

Web-Design hat wie gesagt viel mehr mit Industrie-Design, Signaletik und Architektur zu tun, als mit klassischer Print-Grafik.

Das ist aus meiner Sicht das grösste Missverständnis, wenn Grafiker den Schritt von Print in die Online-Gestaltung machen.

18

Zuhören. Experimentieren. Lernen

Human Centered Design fordert Gestalter*innen auf, aus ihrem eignen Käfig auszubrechen und in die Welt zu horchen. So soll man sich inspirieren und überzeugen lassen. Von Menschen, Beobachtungen und Experimenten. Lass dich beeinflussen.

Design Approaches

Viele Design-Begriffe sind von temporärer Natur und werden unterschiedlich ausgelegt.

Scroll Snap
On
Off