4. Entwurf und Prototyping

Im User Experience Design sollten folgende Eigenschaften beachtet werden:

• Visuelle Wahrnehmung: Klare Kontraste, Gestaltgesetze (Nähe, Ähnlichkeit, Einfachheit).

• Auditive Wahrnehmung: Klare Signaltöne, kurze Feedbacks.

• Kognition: Reduzierte kognitive Belastung, Nutzung von Chunks, Automatisierung.

• Aufmerksamkeit: Hervorhebung wichtiger Inhalte, Minimierung von Ablenkungen.

• Mentale Modelle: Orientierung an Benutzererwartungen und intuitive Designs.

1. Skizzen und Scribbles:

   • Leistung: Schnelle Visualisierung von Ideen, grober Detailgrad.

   • Anwendung: Frühe Phase des Designs, um viele Varianten zu entwickeln.

2. Wireframes:

   • Leistung: Darstellung der Struktur und Platzierung von Interface-Elementen.

   • Anwendung: Klärung von Layout und Navigation ohne Fokus auf visuelle Details.

3. Prototyping:

   • Leistung: Testen von Funktionen, Interaktionen und Usability.

   • Anwendung: Von Papierprototypen (frühe Phase) bis zu programmierten Prototypen (späte Phase).

4. Guidelines und Styleguides:

   • Leistung: Festlegung von Regeln für Gestaltung und visuelles Erscheinungsbild.

   • Anwendung: Sicherstellung von Konsistenz und Orientierung für Entwickler und Designer.

Die Auswahl einer sinnvollen Prototyping-Methode hängt von folgenden Kriterien ab:

1. Projektphase: Frühe Phasen nutzen einfache Methoden (z. B. Papierprototypen), späte Phasen detaillierte Prototypen (z. B. programmierte Prototypen).

2. Ziel: Konzepttests (Papierprototypen) oder detaillierte Funktionstests (digitale Prototypen).

3. Komplexität: Niedrige Fidelity für grobe Ideen, hohe Fidelity für realistische Simulationen.

4. Interaktivität: Benötigte Simulation von Benutzerinteraktionen (z. B. Wizard-of-Oz-Prototypen).

5. Ressourcen: Verfügbarer Zeit-, Kosten- und Technikaufwand.

6. Testzielgruppe: Art der Nutzer, die den Prototyp testen sollen.

1. Papier-Prototyping: Für schnelle und kostengünstige Tests von Layout, Navigation und Terminologie in frühen Phasen.

2. Digitale Wireframes: Für detailgenaue Darstellung von Elementen und Struktur, oft als Grundlage für Prototypen.

3. Videoprototypen: Zur Visualisierung der Nutzung im Anwendungskontext, besonders bei komplexen Szenarien.

4. Wizard-of-Oz-Prototypen: Zur Simulation von Funktionen, die noch nicht entwickelt sind (z. B. Sprachsteuerung).

5. Programmierte Prototypen: Für realistische Tests, Management-Präsentationen und spätere Wiederverwendung des Codes.

• Grundlage der Mensch-Maschine-Interaktion.

• Fehlendes Verständnis führt zu schlechter Usability und mehr Fehlern.

• Berücksichtigung steigert User Experience und verbessert Bedienbarkeit.

1. Antwort

   • Seh-, Hör- und Tastsinn.

   • Hand-Auge-Koordination und Gedächtnis (Kurz- und Langzeitgedächtnis) ergänzen die Interaktion.

2. Antwort

   • Beschreiben, wie das Gehirn Reize gruppiert und interpretiert.

   • Relevanz: Erleichtern die Wahrnehmung von Strukturen in User Interfaces.

• Stäbchen: Erkennen Helligkeitsunterschiede, sehr empfindlich.

• Zapfen: Erkennen Farben (Rot, Grün, Blau).

• Verteilung: Zapfen in der Netzhautmitte (scharfes, farbiges Sehen); Stäbchen in der Peripherie (Hell-Dunkel-Kontraste).

1. Farbe-an-sich-Kontrast.

2. Helligkeitskontrast.

3. Sättigungskontrast.

4. Kalt-Warm-Kontrast.

5. Komplementärkontrast.

6. Simultankontrast.

1. Figur-Grund-Trennung: Trennung von Figur und Hintergrund; Fokus liegt auf der Figur.

2. Gesetz der Nähe: Nahe Objekte werden als Gruppe wahrgenommen.

3. Gesetz der Ähnlichkeit: Ähnliche Objekte wirken zusammengehörig.

1. Antwort:

   • Funktion: Schallwellen bewegen Flimmerhärchen im Innenohr (Frequenzerkennung).

   • Design-Anwendung: Nutzung von Signaltönen und Sprachinterfaces zur Benutzerführung.

     
     

2. Antwort:

   • Kurzzeitgedächtnis: Begrenzte Kapazität, speichert Chunks.

   • Langzeitgedächtnis: Enthält gesamtes Wissen, Übertragung durch Erinnern oder Wiedererkennen.

Antwort:

• Kombiniert visuelle und haptische Wahrnehmung.

• Nichtdominante Hand legt Referenz, dominante Hand führt Aktion aus.

• Design-Tipp: Optimierung für beidhändige Bedienung.

1. Selektive Aufmerksamkeit: Fokus auf bestimmte Aspekte.

2. Fokussierte Aufmerksamkeit: Wahrnehmung störender Reize.

3. Geteilte Aufmerksamkeit: Konzentration auf mehrere Aufgaben.

1. Antwort:

   • Definition: Vereinfachte Erklärung eines Interfaces durch den Benutzer.

   • Relevanz: Reduziert Fehler, wenn mentale Modelle mit dem Interface übereinstimmen.

     
     

2. Antwort:

   • Mapping: Bewegung entspricht visueller Änderung im Interface (z. B. Scrollen).

   • Affordance: Wahrgenommene Handlungsmöglichkeiten eines Objekts.

   
   

   
   

   
   

   
   

1. Antwort:

   • Nutzung mehrerer Sinneskanäle gleichzeitig.

   • Vorteil: Verbesserte Wahrnehmungsleistung und reduzierte kognitive Belastung.

2. Antwort:

   • Verständnis der menschlichen Wahrnehmung und Kognition.

   • Kombination mit Gestaltungs- und Evaluationsmethoden für Navigation, Informationsarchitektur und Bedienkonzepte.

1. Multimodale Darstellungen.

2. Automatisierte, vertraute Abläufe.

3. Klare visuelle und auditive Struktur.

Mapping:

Mapping bedeutet, dass eine Bewegung eine sichtbare Veränderung im Interface bewirkt, ähnlich wie bei physischen Objekten. Beispiel: Scrollen, das das Verschieben einer Ebene nachahmt.

Affordance:

Affordance beschreibt wahrgenommene Handlungsmöglichkeiten eines Objekts, z. B. ein Button, der wie eine Aufforderung zum Klicken wirkt.

• Eine Methode zur Organisation von Interface-Inhalten aus Nutzersicht.

• Dient der Erstellung oder Evaluierung von Informationsarchitekturen, Kategorien und Navigation.

• Ermöglicht benutzerzentrierte Strukturen und intuitive Interfaces.

• Generatives Card Sorting: Erstellen neuer Informationsarchitekturen.

• Evaluierendes Card Sorting: Überprüfung bestehender Strukturen auf Verständnisprobleme.

• Remote Card Sorting: Online-Variante für größere Teilnehmerzahlen.

• Schnell und einfach durchzuführen.

• Bietet Einblicke in die Denkweise der Nutzer.

• Grundlage für eine benutzerfreundliche Informationsarchitektur.

1. Zielgruppe auswählen (4–10 Teilnehmer aus der Nutzergruppe).

2. Karten erstellen: Inhalte, Begriffe oder Kategorien auf robuste Karten schreiben.

3. Begriffe mit gleichem Detaillierungsgrad verwenden (max. 50 Karten).

1. Sortieren: Teilnehmer organisieren Karten in Gruppen.

2. Benennen: Gruppen werden benannt (optional Untergruppen).

3. Dokumentation: Ergebnisse fotografisch festhalten.

4. Tipp: Teilnehmer sollten laut denken, um Einblicke in ihre Entscheidungsprozesse zu geben.

1. Antwort:

   • Offenes Card Sorting: Teilnehmer erstellen eigene Gruppen und Namen.

   • Geschlossenes Card Sorting: Karten werden vorgegebenen Kategorien zugeordnet.

1. Antwort:

   • Online-Variante von Card Sorting, meist für geschlossene Ansätze.

   • Geeignet für größere Teilnehmerzahlen und räumlich entfernte Nutzer.

1. Ergebnisse aller Teilnehmer nebeneinander visualisieren.

2. Muster und Abweichungen erkennen (z. B. schwer einzuordnende Karten).

3. Gruppennamen und Begriffe analysieren, um Missverständnisse zu identifizieren.

• Statistisches Verfahren zur Analyse der Gruppierungen.

• Ergebnis: Baumstruktur, die Untergruppen und deren Beziehungen visualisiert.

• Präzise Analyse komplexer Informationsstrukturen.

• Sie zeigen, wo Nutzer Informationen erwarten und wie Kategorien benannt werden sollten.

• Grundlage für Haupt- und Unterkategorien in der Informationsarchitektur.

• Optimieren Navigation und Benutzerfreundlichkeit.

1. Antwort:

   • Eine Sitzung dauert ca. 1 Stunde pro Teilnehmer.

   • Mit 4–10 Teilnehmern lassen sich aussagekräftige Ergebnisse erzielen.

     
     

2. Antwort:

   • Gibt Einblicke in die Entscheidungsprozesse.

   • Zeigt, wo Unsicherheiten oder Verständnisprobleme auftreten.

Antwort:

• Problem: Begriffe schwer einzuordnen → Lösung: Begriffe klarer definieren.

• Problem: Uneinheitlicher Detaillierungsgrad → Lösung: Alle Karten auf gleiche Ebene bringen.

Bei sogenannten Clustern handelt es sich um Gruppen von Objekten mit ähnlichen Eigenschaften.

• Cluster ermöglichen es z. B., Personen aufgrund einer Vielzahl an Merkmalen miteinander zu vergleichen, statt auf einzelne Merkmale beschränkt zu sein

• Visuelle Darstellung von Ideen, um sie zu konkretisieren und kommunizieren zu können.

• Helfen, abstrakte oder mehrdeutige Sachverhalte verständlich darzustellen.

• Sind einfach, schnell erstellt und oft grob gehalten, um Flexibilität zu gewährleisten.

Antwort:

• Ursprünglich zur Planung großer Bauprojekte (z. B. Kathedralen, Schiffe) genutzt.

• Erlaubten die Auslagerung von Versuch und Irrtum.

• Beschleunigten die Produktion und ermöglichten Arbeitsteilung.

Antwort:

• Schnelle und kostengünstige Erstellung.

• Unterstützen die Entwicklung vieler Variationen von Benutzerschnittstellen.

• Ermöglichen einfache Änderungen ohne großen Ressourcenverlust.

Antwort:

• Geringer Detailgrad, Fokus auf allgemeine Gestaltung und Benutzerführung.

• Meist schwarz-weiß, um Geschwindigkeit bei der Erstellung zu fördern.

• Dienen oft als interne Dokumente und abstrahieren Details.

Antwort:

• Bilder: Rechtecke mit einem Kreuz.

• Fließtext: Horizontale Linien.

• Überschriften: Breitere Linien oder Kästen.

• Interface-Elemente: Kästen, Linien oder Balken.

• Notizen am Rand für zusätzliche Details (z. B. Schriftgröße).

Antwort:

• Schnell und einfach umsetzbar.

• Ergebnisse können in Teamsitzungen direkt geteilt und verändert werden.

• Fördert kreative Zusammenarbeit durch gemeinsames Skizzieren.

Antwort:

• Ergebnisse sind sofort digital verfügbar.

• Erleichtert das Speichern, Teilen und Überarbeiten.

• Allerdings kein einfacherer Prozess als das Skizzieren auf Papier.

Antwort:

• Visualisierung von abstrakten Zusammenhängen.

• Entwicklung von grafischen Benutzeroberflächen und 3D-Objekten.

• Basis für detaillierte Wireframes und Interaktionsdetails.

Antwort:

• Unterschiedliche Zustände von Interface-Elementen separat darstellen.

• Mikro-Animationen durch Serien von Skizzen visualisieren.

• Mehrere Varianten auf einer A4-Seite, um den Fokus auf den Gesamteindruck zu lenken.

1. Antwort:

   • Fördert die Konzentration auf allgemeine Gestaltung und Benutzerführung.

   • Verhindert, dass in frühen Phasen zu viel Zeit in Details investiert wird.

     
     

2. Antwort:

   • Meist nur für interne Präsentationen, um professioneller zu wirken.

   • Widerspricht oft dem schnellen und flexiblen Charakter des Scribblings.

1. Antwort:

   • Skizzen sind die Grundlage für formalisierte Wireframes.

   • Wireframes bieten höhere Details und dienen der Entwicklung von Interaktionsdetails.

1. Antwort:

   • Schnelligkeit und Flexibilität bei der Entwicklung von Ideen.

   • Förderung von Teamarbeit und Visualisierung abstrakter Konzepte.

   • Basis für spätere, detaillierte Entwürfe und Entscheidungen.

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.

1. Zur Vorbereitung des Card Sorting werden alle Begriffe auf identische Karten notiert.

2. Die Teilnehmer werden gebeten, diese zu gruppieren und übergeordnete Kategorien zu notieren.

3. Die Gruppierungen können wiederum in übergeordnete Kategorien zusammengefasst und benannt werden.

4. Die Ergebnisse des Card Sorting werden anschließend fotografiert.

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

Informellen

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

Formellen

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

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.