4. ENTWURF UND PROTOTYPING

Sie beeinflusst, wie Nutzer mit Produkten interagieren.

• Wichtige Sinne: Sehen, Hören, Tasten.

• Fehlende Berücksichtigung führt zu schlechter Usability und mehr Fehlern.

1. Stäbchen: Erfassen Helligkeit, besonders empfindlich für Hell-Dunkel-Kontraste.

2. Zapfen: Erfassen Farben (Rot, Grün, Blau).

• In der Mitte der Netzhaut gibt es mehr Zapfen für Farbwahrnehmung.

• Am Rand gibt es mehr Stäbchen, daher sieht man dort unschärfer und nur Hell-Dunkel-Kontraste.

Schnelle Augenbewegungen, mit denen das Sichtfeld gescannt wird.

• Sie helfen, verschiedene Punkte im Blickfeld zu fokussieren.

1. Farbe-an-sich-Kontrast: Unterschiedliche Farben nebeneinander.

2. Helligkeitskontrast: Unterschiedliche Helligkeit von Farben.

3. Sättigungskontrast: Intensität der Farbe variiert.

4. Kalt-Warm-Kontrast: Warme (Rot/Gelb) vs. kalte (Blau/Lila) Farben.

5. Komplementärkontrast: Stärkster Kontrast mit Farben aus gegenüberliegenden Farbkreisen.

6. Simultankontrast: Die gleiche Farbe wirkt anders, je nachdem welche Farben sie umgeben.

• Sie lenken die Aufmerksamkeit auf wichtige Elemente.

• Starker Kontrast verbessert die Lesbarkeit (z. B. Text auf Hintergrund).

• Zu viele Signalfarben oder extreme Kontraste können Nutzer überfordern.

Regeln, die beschreiben, wie unser Gehirn visuelle Reize ordnet und interpretiert.

• Entwickelt von Max Wertheimer als Teil der Gestaltpsychologie.

• Helfen dabei, Muster und Zusammenhänge in Bildern zu erkennen.

1. Figur-Grund-Trennung: Das Gehirn unterscheidet zwischen Vordergrund und Hintergrund.

2. Gesetz der Nähe: Objekte, die nahe beieinander liegen, werden als Gruppe wahrgenommen.

3. Gesetz der Ähnlichkeit: Ähnliche Objekte werden als zusammengehörig interpretiert.

• Schallwellen bewegen das Trommelfell und werden ins Innenohr geleitet.

• Unterschiede in Lautstärke und Geschwindigkeit helfen bei der räumlichen Orientierung.

• Kurze Wörter kann man sich besser merken als lange.

• Signaltöne helfen bei der Bedienung (z. B. Warnsignale, Benachrichtigungen).

• Sprachsteuerung ermöglicht Interaktionen ohne Bildschirm.

• Hörgewohnheiten beeinflussen, wie Nutzer auf akustische Signale reagieren.

• Motorik umfasst alle Bewegungen, die durch Muskeln gesteuert werden.

• Hand-Auge-Koordination ist zentral für die Bedienung von Bildschirmen und Touchscreens.

• Zwei-Hände-Interaktion:

  • Nichtdominante Hand: Stabilisiert ein Gerät.

  • Dominante Hand: Führt die Bedienung aus

1. Sensorische Register: Speichern Wahrnehmungen kurzfristig.

2. Kurzzeitgedächtnis (Arbeitsgedächtnis): Speichert begrenzt Informationen.

3. Langzeitgedächtnis: Enthält dauerhaft gespeichertes Wissen.

Chunks sind Informationsblöcke, die das Kurzzeitgedächtnis besser verarbeiten kann.

• Beispiel: Beim Lesen nehmen wir ganze Wörter statt einzelne Buchstaben wahr.

• Gruppierung von Informationen erleichtert das Lernen.

1. Learning by Doing: Durch Ausprobieren lernen.

2. Lernen in Teilaufgaben: Schrittweises Lernen komplexer Abläufe.

3. Lernen durch Beispiele: Nutzung von Anwendungsfällen oder Tutorials.

1. Selektive Aufmerksamkeit: Nutzer wählen bewusst, worauf sie sich konzentrieren.

2. Fokussierte Aufmerksamkeit: Unbewusste Wahrnehmung störender Reize (z. B. laute Geräusche).

3. Geteilte Aufmerksamkeit: Konzentration auf mehrere Dinge gleichzeitig.

Kognitive Belastung = mentale Anstrengung bei der Nutzung eines Systems.

• Wird erhöht durch:

  • Zeitdruck.

  • Emotionale Belastung.

  • Mehrere Aufgaben gleichzeitig (Multitasking

1. Multimodalität: Nutzung mehrerer Sinne (z. B. Text + Audio).

2. Prozedurales Wissen: Automatisierte Handlungen erleichtern die Nutzung.

Die Vorstellung eines Nutzers darüber, wie ein System oder Interface funktioniert.

• Oft eine vereinfachte Version der tatsächlichen Abläufe.

• Fehler entstehen, wenn das mentale Modell zu stark von der Realität abweicht.

Konzeptionelles Modell:

Wird so gestaltet, dass es für Nutzer logisch verständlich ist.

Implementiertes Modell:

Die tatsächliche technische Umsetzung eines Systems.

Ziel: Das konzeptionelle Modell sollte das mentale Modell der Nutzer unterstützen.

Die Bewegung oder Aktion im Interface entspricht einer realen physischen Bewegung.

• Beispiel: Beim Scrollen auf dem Handy bewegt sich die Seite nach oben oder unten, als würde man Papier verschieben.

Elemente zeigen durch ihre Gestaltung an, wie sie benutzt werden können.

• Beispiel: Ein Button sieht aus, als könnte man ihn klicken (z. B. Schatten, 3D-Effekt).

Constraints = Einschränkungen, die falsche Nutzereingaben verhindern.

• Beispiel: Ein deaktivierter Button ist grau und kann nicht geklickt werden.

• Ziel: Verhindern von Fehlbedienung und verbessern der Nutzerführung

• Physische Objekte haben natürliche Hinweise (z. B. ein Griff zeigt an, dass man ihn ziehen kann).

• Digitale Interfaces brauchen bewusste Design-Entscheidungen, um Nutzern Orientierung zu geben.

• Metaphern und Symbole helfen, die Bedienung intuitiver zu machen.

• Neben mentalen Modellen sind klare Navigation, Informationsarchitektur und Bedienkonzepte wichtig.

• Evaluationsmethoden helfen, die Nutzerfreundlichkeit zu testen und zu verbessern.

• Eine Methode, um Inhalte und Navigation einer Benutzeroberfläche zu strukturieren.

• Nutzer ordnen Begriffe nach eigener Logik in Gruppen ein.

• Hilft, eine benutzerfreundliche Informationsarchitektur zu entwickeln.

1. Offenes Card Sorting: Teilnehmer erstellen selbst Kategorien → hilfreich für neue Designs.

   
   

2. Geschlossenes Card Sorting: Begriffe werden vorgegebenen Kategorien zugeordnet → überprüft bestehende Strukturen.

• 4–10 Teilnehmer aus der Zielgruppe.

• Karten mit bis zu 50 Schlüsselbegriffen, die strukturiert werden sollen.

• Durchführung als Einzel-, Paar- oder Gruppensitzung.

• Online-Tools ermöglichen Remote Card Sorting.

1. Teilnehmer erhalten Kartenstapel.

2. Sie gruppieren Begriffe nach eigener Logik.

3. Sie benennen die Gruppen (z. B. mit Klebezetteln).

4. Gruppen können weiter zusammengefasst werden.

5. Ergebnisse werden fotografisch dokumentiert.

6. Teilnehmer können ihre Gedanken laut äußern → gibt Einblick in ihre Entscheidungsprozesse.

Online-Version von Card Sorting über spezielle Software.

• Besonders hilfreich für geschlossenes Card Sorting mit vielen Teilnehmern.

• Hilft, Nutzerverhalten statistisch auszuwerten und Muster zu erkennen.

1. Informelle Auswertung → Vergleich aller Gruppierungen auf einem Whiteboard.

   
   

2. Formelle Auswertung (Clusteranalyse) → Statistische Analyse mit Software zur Identifikation von Mustern.

Alle Sortierungen der Teilnehmer werden nebeneinander sichtbar gemacht.

• Ziel: Muster und Unterschiede in der Gruppierung erkennen.

• Wichtige Fragen:

  • Welche Begriffe waren schwer zuzuordnen?

  • Welche Begriffe tauchen in mehreren Gruppen auf?

  • Welche Namen haben die Teilnehmer für Gruppen gewählt?

Statistische Methode, die die Ähnlichkeit von Gruppierungen mathematisch berechnet.

• Ergebnisse werden in einer Baumstruktur dargestellt.

• Wird oft mit Software durchgeführt, um komplexe Strukturen zu erkennen.

• Zeigt, wo Nutzer Informationen erwarten.

• Hilft, Haupt- und Unterkategorien für eine Website oder App logisch zu strukturieren.

• Verbessert die Navigation und erleichtert die Nutzung.

Ein Cluster ist eine Gruppe von Objekten, die sich ähnlich sind.

• Zum Beispiel kann man Menschen in Gruppen einteilen, die ähnliche Interessen oder Eigenschaften haben.

• So kann man sie besser vergleichen, ohne nur auf ein einzelnes Merkmal zu achten.

• Helfen, Ideen visuell darzustellen und zu konkretisieren.

• Erleichtern die Kommunikation im Team.

• Sind schnell und einfach zu erstellen, ohne künstlerische Perfektion.

• Kostengünstig und flexibel.

• Ermöglichen viele Design-Varianten in kurzer Zeit.

• Helfen, schlechte Ideen früh zu verwerfen.

• Gut für Team-Workshops geeignet.

• Bilder: Kästen mit einem Kreuz als Platzhalter.

• Fließtext: Horizontale Linien.

• Überschriften: Dickere Linien oder Kästen mit Wellenlinien.

• Buttons/UI-Elemente: Kästen, Linien oder Balken.

• Schnellere Erstellung und Anpassung.

• Fokus auf Grundstruktur statt auf Details.

• Farben werden nur bei Bedarf für Präsentationen genutzt.

• Zwei verschiedene Layout-Skizzen vergleichen.

• Einzelne Interface-Elemente am Rand detailliert skizzieren.

• Mini-Animationen oder Bewegungspfeile nutzen.

• Ermöglichen den Vergleich mehrerer Varianten auf einer Seite.

• Verhindern, dass zu früh zu viele Details gezeichnet werden.

• Helfen, sich auf das Gesamtbild zu konzentrieren.

• Vereinfachte Skizzen einer Benutzeroberfläche.

• Zeigen, welche Elemente wo auf dem Bildschirm platziert werden.

• Meist schwarz-weiß und ohne detailliertes Design.

• Helfen, die Struktur eines Interfaces zu planen.

• Erlauben schnelle Änderungen und Feedback.

• Unterstützen die Zusammenarbeit zwischen Designern und Entwicklern.

• Handgezeichnete Wireframes: Schnell und einfach, ideal für erste Ideen.

• Digitale Wireframes: Detaillierter, können interaktiv verknüpft werden.

• Skizzen: Erste grobe Ideen, oft ohne Maßstab.

• Wireframes: Strukturierte Layouts, meist in Originalgröße.

• Prototypen: Interaktive Versionen zur Simulation der Nutzung.

• Testen die Informationsarchitektur (Seitenstruktur, Navigation).

• Zeigen, ob das Layout für Benutzer verständlich ist.

• Identifizieren Probleme frühzeitig, bevor das Design fertig ist.

• Handgezeichnet: Grobe Skizzen zur ersten Ideenfindung.

• Digital: Detaillierte Darstellung mit genauen Größen und echten Inhalten.

• Erklärt die Bedeutung und Funktion der Elemente.

• Unterstützt die Zusammenarbeit im Team.

• Methoden: Nummern/Zahlen (Erklärung am Rand) oder Callouts (Verbindungslinien).

1. Struktur-Wireframes: Zeigen die Grundstruktur eines Interfaces.

2. Handlungspfad-Wireframes: Detaillierte Darstellung eines wichtigen Workflows.

3. Element- und Sequenz-Wireframes: Zeigen die Anordnung von Interface-Elementen.

• Digitale Wireframes können verlinkt werden.

• Erstellen von klickbaren Prototypen für Benutzertests.

• Abhängig von der Software, die für Wireframes verwendet wird.

Blindtext ist ein Platzhalter für echten Text in einem Layout, wenn der richtige Inhalt noch fehlt. Er besteht aus zufälligen Wörtern oder Zeichen und hilft, das Design zu testen.

• Sie zeigen die Struktur und kritische Elemente eines Interfaces.

• Sie visualisieren Funktionen, nicht das endgültige Design.

• Besonders nützlich in der frühen Konzeptphase von Websites oder Apps.

1. Übergeordnete Struktur: Zeigt die Grundstruktur eines Interfaces.

2. Handlungspfade: Stellt wichtige Abläufe und Funktionen dar.

3. Anordnung & Sequenz: Zeigt, wie Inhalte strukturiert sind

• Um klickbare Prototypen zu erstellen.

• Ermöglicht erste Benutzertests mit Navigation.

• Zeigt, wie sich das Interface in realen Nutzungsszenarien verhält.

• Schnelligkeit & einfache Zusammenarbeit im Team.

• Zu komplizierte Programme nehmen zu viel Zeit in Anspruch.

• Software sollte den Workflow unterstützen, nicht verlangsamen.

Ein Task-Flow-Diagramm zeigt Schritt für Schritt, wie eine Aufgabe mit einer Benutzeroberfläche erledigt wird.

• Es stellt Abläufe und Entscheidungen in einer klaren Reihenfolge dar, ähnlich wie ein Flussdiagramm

Als mentales Modell bezeichnet man die vereinfachte Vorstellung der Funktionsweise eines Objekts, die die Benutzerin sich zur Vorhersage seines Verhaltens macht. Das mentale Modell muss nicht mit der tatsächlichen Funktionsweise übereinstimmen.

Das Kurzzeitgedächtnis dient der Speicherung kurzfristiger Informationen, das Langzeitgedächtnis enthält die Gesamtheit des Wissens einer Person.

Das Kurzzeitgedächtnis verfügt nur über eine begrenzte Kapazität.Man unterscheidet drei Arten von Aufmerksamkeit: 1. selektive Aufmerksamkeit, 2. fokussierte Aufmerksamkeit, 3. geteilte Aufmerksamkeit.

Zur Vorbereitung des Card Sorting werden alle Begriffe auf identische Karten notiert. Die Teilnehmer werden gebeten, diese zu gruppieren und übergeordnete Kategorien zu notieren.

Die Gruppierungen können wiederum in übergeordnete Kategorien zusammengefasst und benannt werden. Die Ergebnisse des Card Sorting werden anschließend fotografiert.

Zur Auswertung eines Card Sorting gibt es ein formelles und ein informelles Verfahren.

Bei der informellen Auswertung werden alle Ergebnisse auf wiederkehrende Muster verglichen und hieraus eine einheitliche Informationsarchitektur erstellt.

Bei der formellen Auswertung, der sogenannten Clusteranalyse, wird die Ähnlichkeit zwischen den unterschiedlichen Kategorisierungen mithilfe einer Software numerisch bestimmt.

Bei der Erstellung von Skizzen für Bildschirmlayouts werden Bilder häufig in Form von durchgekreuzten Boxen dargestellt und Text in Form von horizontalen Linien.

Der konkrete Inhalt der Layoutelemente wird in Annotationen am Rand erklärt.

Skizzen eignen sich, um schnell und einfach Ideen zu visualisieren und dadurch zu konkretisieren. Sie geben abstrakten Konzepten eine konkrete kommunizierbare Form.

Mithilfe von Wireframes lassen sich Aspekte der Informationsarchitektur und des Seitenlayouts darstellen und evaluieren.

Die Verbindung mehrerer Wireframes eignet sich hierbei, um zu testen, ob die Interaktion für eine bestimmte Aufgabe erfolgreich abläuft.

Die Anordnung und Auswahl von Elementen auf einzelnen Wireframes eignet sich dazu zu prüfen, ob die richtigen Elemente für die Aufgabe ausgewählt wurden und ob sie verständlich platziert sind.

Die gezeichnete oder interaktive Verknüpfung mehrerer zusammenhängender Wireframes wird auch Wireflow genannt.

Wireframes zur Darstellung der übergeordneten Struktur eignen sich gut, um die Grundstruktur eines User Interface zu testen.

Wireframes zur Darstellung kritischer Handlungspfade zeichnen einzelne Handlungssequenzen von Anfang bis Ende nach.

• Prototypen testen bestimmte Teile eines Interfaces auf Funktionalität und Wirksamkeit.

• Sie helfen, Designoptionen zu vergleichen und die beste Variante auszuwählen.

• Anders als im Produktdesign sind UX-Prototypen oft frühe Testversionen und nicht für die Serienproduktion gedacht.

• Skizzen: Schnelle Visualisierung von Ideen.

• Prototypen: Werden getestet, um Designentscheidungen zu validieren.

• Papierprototypen und Wireframes: Nutzen oft einfache Zeichnungen für frühe Tests.

• Fortgeschrittene Prototypen: Detailliertere und interaktive Modelle, z. B. Videoprototypen oder programmierte Prototypen.

• Visuelle Mockups: Gut zum Testen des Designs.

• Papierprototypen: Hilfreich zur frühen Überprüfung der Interaktion.

• Niedrige Fidelity: Schnelle, einfache Tests (z. B. Papierprototypen).

• Hohe Fidelity: Realistische, detaillierte Tests (z. B. programmierte Prototypen).

• Horizontale Prototypen: Viele Bildschirmansichten, aber wenig echte Funktionalität (z. B. Klickprototypen).

• Vertikale Prototypen: Weniger Oberflächen, aber tiefere technische Funktionen.

• Mischformen: Kombination aus beidem, z. B. bei programmierten Prototypen.

• Niedrige Darstellungstreue: Grobe Skizzen und einfache Drahtmodelle.

• Hohe Darstellungstreue: Detaillierte Mockups, realistische Designs.

  
  

• Interaktivität:

  • Reicht von statischen Bildern bis zu funktionalen Simulationen.

  • Papierprototypen können trotz einfacher Technik hohe Interaktivität haben.

• Eine Methode zur schnellen Erstellung von Interface-Prototypen mit Papier.

• Nutzer testen das Interface, indem sie mit Papier-Elementen interagieren.

• Ein „menschlicher Computer“ verändert das Papier, um das Interface zu simulieren.

• Kostengünstig: Papier ist billig und leicht verfügbar.

• Schnell & flexibel: Änderungen können sofort vorgenommen werden.

• Einfache Iteration: Unfertiges Design erleichtert Anpassungen.

• Fokus auf Konzept: Testet Navigation, Inhalte und Layout.

• Komplexe Interaktionen wie Drag & Drop sind schwer darzustellen.

• Keine Animationen oder Übergänge möglich.

• Bessere Eignung für klassische Interface-Elemente wie Buttons & Formulare.

• Ein kurzer Film, der zeigt, wie ein Interface im Anwendungskontext genutzt wird.

• Kann realistische Nutzungsumgebungen darstellen.

• Eignet sich besonders für ortsabhängige oder teambasierte Anwendungen.

1. Visionäre Videoprototypen: Zeigen Zukunftstechnologien (oft aufwendig).

1. Holistische Videoprototypen: Zeigen reale Anwendungsszenarien mit einfachen Mitteln.

• Zeigt Interaktion im echten Nutzungskontext.

• Verdeutlicht soziale und physische Aspekte der Nutzung.

• Einfach zu verstehen und emotional ansprechend.

• Vergleichsweise hoher Aufwand in der Produktion.

• Nicht geeignet für schnelle Änderungen und Tests.

• Eher für fortgeschrittene UX-Tests gedacht.

Das Konzept der Darstellungstreue besagt, wie nah ein Prototyp an der finalen Umsetzungsform orientiert ist.

-> Es ist irreführend, weil ein Prototyp eine Reihe an Aspekten aufweist, die unterschiedlich weit in der Entwicklung sein können.

-> Dazu gehören unter anderem die Funktionsbreite und -tiefe, die Darstellung und Interaktion, der Inhalt sowie das Branding.

Bei Videoprototypen kann man visionäre und holistische Prototypen unterscheiden.

Erstere eigenen sich zur Darstellung neuer Technologien, die nur schwer zu implementieren wären. Letztere sind besonders geeignet für die partizipative Entwicklung von Benutzerschnittstellen.

Ein Prototyp, der scheinbar automatisch funktioniert, aber im Hintergrund von einer Person gesteuert wird.

• Nutzer glaubt, dass das System eigenständig reagiert.

• Testen von nicht existierenden oder schwer umsetzbaren Technologien (z. B. Sprachsteuerung).

• Spart Entwicklungskosten, da keine vollständige Programmierung erforderlich ist.

• Hilft, die Benutzerfreundlichkeit früh zu bewerten.

• Höherer Aufwand als bei einfachen Prototypen.

• Visuelle Gestaltung muss detailliert sein, damit das System echt wirkt.

• Wird erst in einer späteren Projektphase genutzt, wenn grundlegende Designfragen geklärt sind.

• Eine digitale Version eines Interfaces mit begrenzter Funktionalität.

• Wird programmiert, um das spätere Produkt realistisch darzustellen.

• Präsentationen für Management und Kunden.

• Formale Usability-Tests.

• Marketing & Produktbewerbung.

• Können als Basis für die finale Software dienen, wenn sie in derselben Technologie entwickelt wurden.

• Hoher Zeit- und Kostenaufwand.

• Sollten erst eingesetzt werden, wenn grundlegende Designfragen geklärt sind.

• Dokumentieren Designprinzipien und Spezifikationen für Benutzeroberflächen.

• Unterstützen eine einheitliche Gestaltung und erleichtern die Zusammenarbeit

• Guidelines: Allgemeine Regeln mit mehr Flexibilität.

• Styleguides: Konkrete Anweisungen für Farben, Schriftarten und UI-Elemente.

Eine umfassende Dokumentation, die Styleguides, Interface-Guidelines und Corporate Identity kombiniert.

• Sammlungen von wiederverwendbaren Designmustern mit passenden Code-Beispielen.

• Beschreiben, wie UI-Elemente funktionieren und eingesetzt werden.

• Sie prägen die Erwartungen der Nutzer (z. B. Platzierung von Menüs und Buttons).

• Strikte Einhaltung sorgt für Konsistenz, während kreative Abweichungen neue Innovationen ermöglichen können

• Detaillierte Regeln: Einheitliches Design, aber wenig flexibel und schnell veraltet.

• Allgemeine Prinzipien: Langfristig aktuell, aber Interpretation kann zu inkonsistentem Design führen.

• Das Selbstbild eines Unternehmens.

• Wird durch Corporate Design sichtbar (z. B. Logos, Farben, Schriftarten).

• Regeln und Prinzipien zur Gestaltung von Benutzeroberflächen.

• Stellen sicher, dass das Design einheitlich und benutzerfreundlich ist.

• Werden von großen Unternehmen wie Apple, Google und Microsoft veröffentlicht.

• Kontrollelemente: Links, Drop-down-Menüs, Auswahlboxen.

• Steuerelemente: Werkzeugleisten, Menüs.

• Ansichtselemente: Sidebars, Spaltenansichten.

• Darstellungselemente: Fortschrittsbalken, Cursor-Anzeigen.

• Nachrichten: Fehlermeldungen, Warnungen, Bestätigungen.

• Eingabemöglichkeiten: Maus, Tastatur, Drag & Drop.

• Fensterelemente: Dialogfenster, Assistenten.

• Dokumentiert das visuelle Erscheinungsbild einer Benutzeroberfläche.

• Wird verwendet, um das Design über alle Anwendungen hinweg einheitlich zu halten.

• Muss regelmäßig aktualisiert werden.

• Typografie: Schriften, Größen, Formatierungen.

• Farben: Farbpaletten und ihre Nutzung.

• Elemente: Logos, Bilder, Menüs, Texte.

• Layout: Pixelgenaue Raster und Anordnung der Elemente.

• Branding: Corporate Identity und Designrichtlinien.