Nutzungschnittstelen

Storyboards

Paper prototypes

Flow Diagrams

1. Einfache, grobe Darstellung von Ideen (z.B. Skizzen, Wireframes).

2. Fokus auf Funktion statt auf Design oder Details.

3. Schnell und kostengünstig herstellbar.

4. Geringe Interaktivität (meist statisch oder nur einfache Abläufe).

5. Einsatz: frühe Ideenfindung, Nutzerfeedback, Teamabstimmung.

6. Vorteil: Änderungen sind leicht und schnell möglich.

Types of high fidelity prototypes

● Web – FrontPage, GoLive, Dreamweaver,…

● Screen mockups – Illustrator, Photoshop, PowerPoint,….

● Click throughs – Flash, PowerPoint, Figma, Invision, Adobe XD…

● Graphic toolkits – Java JFC/Swing, TCL/TK, Prefuse,

High-Fidelity-Prototypen

• Sehr realistische Darstellung des finalen Produkts.

• Detailreiches Design: Farben, Typografie, Grafiken und Inhalte ausgearbeitet.

• Hohe Interaktivität: Funktionen, Übergänge und Benutzerfluss sind simuliert.

• Wird oft mit spezialisierten Tools (z.B. Figma, Adobe XD) erstellt.

• Einsatz: Nutzer-Tests, Präsentationen für Stakeholder, letzte Validierungen vor der Entwicklung.

• Vorteil: Nutzererlebnis und Design können fast wie im echten Produkt getestet werden.

Medium-Fidelity-Prototypen

• Detaillierter als Low-Fidelity, aber noch nicht final.

• Klarere Struktur und Layout, oft schon am Computer erstellt.

• Teilweise interaktiv (z.B. klickbare Menüs, Navigation).

• Design und Inhalt sind teilweise ausgearbeitet, aber noch nicht perfekt.

• Einsatz: Benutzerfluss testen, Usability-Tests, frühes Nutzerfeedback.

• Vorteil: Realistischere Darstellung, trotzdem noch flexibel anpassbar.

Menschliche Wahrnehmung ist auf natürliche Umgebungen optimiert, nicht auf künstliche Systeme → UI-Design muss diese Limitierungen berücksichtigen (z.B. eingeschränktes Sichtfeld, langsame Anpassung).

Wahrnehmung muss schnell UND genau sein – beides gleichzeitig ist schwer.→ Im UI-Design Priorität setzen: Wichtige Infos klar und schnell erfassbar machen.

1. Nutzer nehmen nur einen kleinen Ausschnitt wahr.

2. UI muss wichtige Informationen herausheben.

3. Hypothesenbildung nutzen: Erwartungen der Nutzer unterstützen (z.B. bekannte Icons, Layouts).

1. Scharfes Sehen nur auf 2° Sichtfeld → zentrale Infos dort platzieren.

2. Peripherie nutzt Bewegungs- und Helligkeitsänderungen → geeignet für dezente Hinweise.

1. Interfaces so gestalten, dass Fixationen sinnvoll gesteuert werden.

2. Wichtige Elemente dort platzieren, wo Nutzer wahrscheinlich fixieren (z.B. Bildschirmmitte, gewohnte Scanrichtungen).

1. Peripherie erkennt Bewegungen schnell.

2. Bewegte Elemente (Blinken, Animationen) nur sparsam einsetzen → sonst Ablenkung!

3. Bewegte Hinweise gezielt nutzen, z.B. bei Benachrichtigungen.

1. Animationen sollten weich und vorhersagbar sein.

2. Keine endlosen Loops → sie belasten die Informationsverarbeitung.

3. Fokus auf einzelne, relevante Bewegungen.

1. Prä-attentive Merkmale (z.B. Farbe, Formunterschiede) nutzen, um sofort Aufmerksamkeit zu lenken.

2. Einheitliches Grunddesign nötig, damit Auffälliges überhaupt als relevant wahrgenommen wird.

1. Nutzer interpretieren Größe, Form, Helligkeit stabil trotz veränderter Bedingungen.

2. UI-Elemente sollten in sich konsistent bleiben, z.B. gleiche Größenrelationen, Lichtannahmen beachten.

1. Menschen erwarten Licht von oben → Schattierungen, Beleuchtung und 3D-Effekte sollten dem folgen.

2. Fehlerhafte Lichtquellen wirken irritierend und unnatürlich.

1. Kräftige Farben, hohe Helligkeit und Kontrast holen Elemente in den Vordergrund.

2. Matte, dunkle, kontrastarme Flächen wirken wie Hintergrund → gezielt einsetzen für Strukturierung.

1. Sanfte Farb- und Helligkeitsverläufe deuten auf Tiefe und Kontinuität.

2. Plötzliche Änderungen wirken wie Objektgrenzen → nützlich für Trennung von UI-Bereichen.

1. Wahrnehmungsphysiologie zwingt uns, Interfaces einfach, erwartungskonform und aufmerksamkeitsfreundlich zu gestalten.

2. Störungen (z.B. hektisches Blinken) vermeiden, Hypothesenbildung der Nutzer unterstützen.

○ Aesthetic-Usability Effect

○ Fitt’s Law

○ Hick’s Law

○ Doherty Threshold

○ Jakob’s Law

○ Miller’s Law

○ Peak End Rule

○ Postel’s Law

○ Tesler’s Law

○ Von Restorff Effect

○ Goal-Gradient Effect

○ Parkinson’s Law

○ Zeigarnik Effect

Card sorts are useful to organize information to help

people find what they are looking for & also use a

language they understand

User Interface Design Patterns

User Interface Design patterns are recurring solutions that solve common design

problems.

They are not too general --> Adapt to each design project.

Think of them as design rules with flexibility.

Pattern libraries are a hub of UI patterns

that are used to build an interface

The most important content should stand out the most, and the least important should

stand out the least.

Tiny Screen Sizes

Variable Screen Width

●Scrolling down is not terrible → height is not important.

● Design needs to use the available screen width intelligently.

→ later: adaptive vs responsive design

Touch Screens

● Most mobile devices come with touch screens.

● Keypad devices should be served, too, but you might want to bias your design

towards the touch screen experience.

● Make your links and buttons large enough to easily touch.

→ Which law of UX?

Difficulty of Typing Text

● No one likes typing text on a touch screen.

● Typing should be unnecessary or very limited.

● Use “Auto Completion” whenever possible.

● Prefill form fields whenever you can.

● Numbers are much easier to type than text.

Challenging Physical Environments

● Outside in the bright sun, in dark theaters, in conference rooms, cars, buses, trains,

planes, stores, bathrooms, and in bed.

● Ambient light and noise differences.

● Motion: tiny text is difficult to read and type.

● Design for “fat fingers”.

● Design so that mistakes are easily corrected.

Location Awareness

● Devices are able to locate where exactly they are being used.

● Information specific to the location can be served up.

Social Influences and Limited Attention

● Mobile users will be distracted a lot: walking, riding in a vehicle, talking with other

people, or sitting in a meeting.

● Make the task sequences easy, quick, and reentrant.

● Make everything self-explanatory.

● Mobile devices are used in social interaction:

→ People pass around devices.

→ People look over their shoulder.

→ Sound has to be turned off or up.

1. What Do Users in a Mobile Context Actually Need?

They do not have the same needs that a user of the full site will have.

2. Strip the Site or App Down to its Essence

● Relevant content should appear high on the screen.

● Reduce the form of the site to its minimum.

→ Put a link to the full site in an obvious place.

● Possible to create two “separate and parallel” designs.

● For mobile devices, the hierarchy of the site should be narrower and deeper.

3. If You Can, Use the Device’s Hardware

● Features that mobile devices offer?

→ Location

→ Camera

→ Voice Integration

→ Gestural Input

→ Haptic Feedback (e.g. bumps and vibrations)

→ Multitasking (app can be running in background)

4. Linearize Your Content

● Width problem.

● Not enough space for interesting side-by-side layouts.

● Order content vertically.

5. Optimize the Most Common Interaction Sequences

● Try to make tasks as easy as possible:

→ Eliminate or reduce typing.

→ Use as few screen loads as possible.

→ Reduce scrolling and sideways dragging (except where it eliminates screen loads

and typing).

→ Reduce number of taps (though tapping large hit targets is better than typing).

Six Principles

1. Make It Direct

2. Keep It Lightweight

3. Stay on the Page

4. Provide an Invitation

5. Use Transitions

6. React Immediately

Usability vs Utility

Utility = Does it do what users need?

Usability = How easy and pleasant are these features to use?

Usefulness = Usability + Utility

● Heuristics – without users

● Surveys

● Observational methods

● Co-design

Was ist Barrierefreiheit? Barrierefreiheit (oder "Accessibility") bedeutet, digitale Inhalte und Technologien so zu gestalten, dass sie für alle Menschen nutzbar sind, insbesondere für Menschen mit Behinderungen. Dies umfasst die Gewährleistung, dass Inhalte wahrnehmbar, bedienbar, verständlich und robust sind.

Warum ist Barrierefreiheit wichtig? Sie fördert Chancengleichheit und soziale Inklusion, da der Zugang zu Informations- und Kommunikationstechnologien ein grundlegendes Menschenrecht ist. Barrierefreiheit kommt zudem allen Nutzern zugute, beispielsweise bei der Nutzung mobiler Geräte, im Alter oder in schwierigen Situationen. Unternehmen profitieren von größerer Marktreichweite, besserer Kundenzufriedenheit und Innovationen.

Intersektionalität: Identitäten sind vielschichtig. Faktoren wie Geschlecht, sozioökonomischer Status, Ethnizität, sexuelle Orientierung, Religion und Bildung beeinflussen die Zugänglichkeit zusätzlich und können Diskriminierung verstärken.

Was ist es? Web-Zugänglichkeit bedeutet, Websites und digitale Tools so zu gestalten, dass sie für alle Menschen, insbesondere für Menschen mit Behinderungen, nutzbar sind. Dies umfasst die Fähigkeit, Inhalte wahrzunehmen, zu verstehen, zu navigieren und zu interagieren.

Warum ist es wichtig? Es gewährleistet Chancengleichheit und soziale Inklusion, da der Zugang zu Technologie ein grundlegendes Menschenrecht ist. Zudem profitieren alle Nutzer davon, z.B. bei der Handynutzung, im Alter oder unter schwierigen Umgebungsbedingungen. Auch wirtschaftliche Vorteile wie höhere Marktreichweite und Innovationen sind gegeben.

Intersektionalität: Neben Behinderungen beeinflussen weitere Faktoren wie Geschlecht, sozioökonomischer Status und Bildung die digitale Zugänglichkeit und können Diskriminierung verstärken

Drive Innovation

Corporate Social Responsibility (CSR)

Market Reach

Förderung von Innovation:

Zugänglichkeit beseitigt Barrieren und fördert menschzentriertes Design, was zu neuen Innovationen führen kann (z.B. Text-to-Speech).

Stärkung der CSR:

Ein Engagement für Zugänglichkeit verbessert das Markenimage, steigert den Umsatz, die Kundentreue und fördert die Vielfalt der Belegschaft.

Erhöhte Marktreichweite:

Zugänglichkeit führt zu mehr Traffic, verbesserter Nutzererfahrung und besserer Suchmaschinenindexierung

1. Definition: Der Zugang zu Informations- und Kommunikationstechnologien, einschließlich des Webs, ist als grundlegendes Menschenrecht definiert.

2. Mitgliedsstaaten: 193 Mitgliedsstaaten, darunter Deutschland, haben die Konvention ratifiziert.

3. Ziel: Staaten sollen Maßnahmen ergreifen, um Menschen mit Behinderungen gleichberechtigten Zugang zu Informationen und Kommunikationstechnologien zu ermöglichen.

1. Inhalt: Dies ist eine europäische Norm, die Barrierefreiheitsanforderungen für IKT-Produkte und -Dienstleistungen definiert.

2. Status: Sie gilt als verbindlicher Standard für Information und Kommunikationstechnologie im öffentlichen Sektor.

3. Relevanz für Deutschland: Das Behindertengleichstellungsgesetz (BITV 2.0) in Deutschland verweist auf die EN 301 549.

1. Ziel: Dient der Schaffung und Gewährleistung einer umfassend barrierefreien Gestaltung moderner Informations- und Kommunikationstechnik.

2. Anwendungsbereich: Gilt für Websites, mobile Anwendungen, elektronisch unterstützte Verwaltungsabläufe und grafische Programmoberflächen öffentlicher Stellen.

3. Anforderungen: Angebote müssen wahrnehmbar, bedienbar, verständlich und robust gestaltet sein. Bei Nutzerinteraktion soll ein höchstmögliches Maß an Barrierefreiheit angestrebt werden.

1. Überwachungsstelle: Veröffentlicht regelmäßig aktuelle Informationen zu Standards, Konformitätstabellen und Empfehlungen zur Barrierefreiheit.

2. Barrierefreiheitserklärung: BITV 2.0 fordert eine "Barrierefreiheitserklärung" mit der Möglichkeit für Nutzer, Feedback zu geben.

3. Beispiel (Universität Paderborn): Die Website der Universität Paderborn ist nicht vollständig konform mit den neuesten Standards, obwohl die Hauptmerkmale von 2014 die damaligen Anforderungen erfüllten.

1. Definition: WCAG sind Web Content Accessibility Guidelines.

2. Entwicklung: Sie wurden von der AG WG der W3C Web Accessibility Group entwickelt.

3. Standard: WCAG ist als ISO-Standard ISO/IEC 40500:2012 anerkannt.

4. Empfehlungen: Sie bieten eine breite Palette von Empfehlungen, um Webinhalte zugänglicher zu machen.

5. Ziel: WCAG stellt sicher, dass Inhalte für möglichst viele Menschen direkt zugänglich sind und in verschiedenen Formen dargestellt werden können, um eine vielfältige Bandbreite von Fähigkeiten zu berücksichtigen.

6. Struktur: WCAG besteht aus Erfolgskriterien und 4 Schlüsselprinzipien.

7. Prinzipien: Die 4 Kernprinzipien für zugängliche Webinhalte sind: Wahrnehmbar (Perceivable), Bedienbar (Operable), Verständlich (Understandable) und Robust (Robust).

8. Konformitätsstufen: WCAG enthält Erfolgskriterien, die in drei Stufen unterteilt sind (A, AA, AAA), wobei A wesentlich ist, AA ideal und für viele Regierungs- und öffentliche Websites erforderlich ist (wie EN 301549), und AAA spezialisierte Unterstützung bietet, aber nicht als allgemeine Richtlinie für ganze Websites empfohlen wird.

1. Definition: "A11y" ist ein Numeronym für "Accessibility".

2. Ziel: The A11y Project ist ein gemeinschaftsgetriebenes Projekt, das darauf abzielt, digitale Barrierefreiheit zu erleichtern.

3. Ressourcen: Es ist eine Open-Source-Website mit Ressourcen und Beiträgen über Best Practices zur Verbesserung der Technologiezugänglichkeit. Diese Ressourcen umfassen Software, Bücher, Blogs, ein Glossar und Online-Tools, sowie eine WCAG-Checkliste. Alle Inhalte werden getestet und geprüft.

4. Engagement: Der Hashtag #a11y wird oft von der Accessibility-Community auf Plattformen wie Twitter verwendet, und viele Fürsprecher und Forscher nutzen ihn, um ihre Zugehörigkeit und Unterstützung zu zeigen.

1. Wer ist betroffen? Personen mit Farbblindheit, vollständiger Blindheit oder anderen Sehschwächen (z.B. zentralem Gesichtsfeldverlust, Kontrastempfindlichkeit). Auch unterschiedliche Lichtverhältnisse können die Nutzung beeinträchtigen.

2. Nutzerinteraktion: Die Navigation erfolgt typischerweise mit Tastatur und Screenreadern, da Mausbewegungen schwierig sind oder Monitore nicht genutzt werden. Alle Funktionen müssen daher ausschließlich per Tastatur bedienbar sein.

1. Navigation & Anpassung: Implementierung von Tabbing und Skip Links ist essenziell. Tastenkürzel erleichtern die Navigation. Nutzern sollte die Anpassung von Schriftarten, Farben und Abständen ermöglicht werden.

2. Inhalte optimieren: Text- und Bildvergrößerungen bis zu 1200% müssen ohne Informationsverlust funktionieren. Hoher Kontrast zwischen Vordergrund und Hintergrund ist entscheidend, um die WCAG-Anforderungen zu erfüllen. Bei großen Bildern/Tabellen horizontales Scrollen implementieren.

3. Bilder & Formulare: ALT-Texte für funktionale Bilder/Icons sind unerlässlich und sollten beschreibend sowie spezifisch sein. Bei Formularen sollten zusätzliche Informationen für Screenreader bereitgestellt und Fehler in direkter Nähe des Elements angezeigt werden.

Was ist CVD? Farbenblindheit betrifft viele Menschen und entsteht durch eine Funktionsstörung der Zapfen im Auge, was die Unterscheidung von Farben erschwert. Häufig sind Rot-Grün- und Blau-Gelb-Schwächen.

Probleme & Lösungen: Im Alltag können farbbasierte Darstellungen (z.B. Diagramme, Formulare, Spiele) unklar sein. Designs sollten daher zusätzliche visuelle Hinweise wie Text, Symbole oder Muster nutzen. Ein hoher Kontrast (z.B. WCAG-Konformität) und farbenblindenfreundliche Paletten sind essentiell. Tools zur CVD-Simulation helfen, Designprobleme zu erkennen.

Tools für Farbenblindheit (CVD)

Farbblindenfreundliche Paletten:

• Es gibt spezielle Farbpaletten (z.B. IBM, Bang Wong, Paul Tol), die Farben so auswählen, dass sie auch für Menschen mit CVD einen guten Kontrast behalten.

WCAG-Farbkontrast:

• WCAG 2.0/2.1 Level AA fordert spezifische Kontrastverhältnisse für Nutzer mit CVD/Sehschwäche: 4.5:1 für normalen Text und 3:1 für großen Text sowie Grafiken/UI-Komponenten. Tools wie der WebAIM-Kontrastprüfer helfen bei der Überprüfung.

Rekoloring- & Simulations-Tools:

• Forschung entwickelt Methoden, um Bilder für CVD neu einzufärben, z.B. durch Hinzufügen von Blau-/Gelbtönen bei Rot-Grün-Schwäche.

• Verschiedene Tools (z.B. Chrome-Erweiterungen wie Colorblindly, Python-Bibliotheken wie DaltonLens) simulieren CVD, um Empathie zu fördern und Designern zu helfen, passende Farbpaletten zu wählen.

Wer ist betroffen?

• Nutzer mit dauerhaften körperlichen Behinderungen wie Amputationen, Muskeldystrophie, Parkinson oder teilweiser/totaler Lähmung.

• Auch Personen mit temporären Verletzungen, z.B. Knochenbrüchen.

• Diese Nutzer benötigen oft mehr Zeit, machen mehr Fehler und müssen ggf. andere Körperteile zur Interaktion mit Geräten nutzen.

Nutzerbedürfnisse:

• Feine Mausbewegungen sind oft schwierig.

• Die primäre Navigation erfolgt über die Tastatur oder andere Hilfsmittel; alle Aufgaben sollten per Tastatur ausführbar sein.

• Manchmal ist die Nutzung anderer Körperteile zur Interaktion mit Geräten erforderlich.

• Nutzer benötigen mehr Zeit zum Klicken und Tippen und machen dabei mehr Fehler.

Interaktionsmethoden:

• Hände frei: Sprach-, Augen- und Kopfbewegungs-Tracking (z.B. On-Screen-Tastaturen).

• Spezial-Keyboards/-Mäuse: Ergonomische, hochsichtbare, erweiterte Tastaturen sowie Braille-Displays und Akkord-Tastaturen.

• Schalter: Fuß-, Schulter-, Saug- und Blas-Schalter, oft mit Sensoren (z.B. Blinzel-Sensor).

• Zeigegeräte: Trackballs, Joysticks und Touchpads ersetzen Mausbewegungen.

• Kopf-/Mund-Steuerung: Mundstäbe und Kopfzeiger/Wands ermöglichen die Interaktion.

• Software: Beschleuniger-Software unterstützt die Interaktion.

1. Tabbing & Skip Links: Skip-Links sind wichtig für Nutzer mit eingeschränkter Mobilität. Nutzer sollten TAB und Skip-Links nutzen können, um repetitive oder irrelevante Inhalte zu überspringen. Die Tab-Reihenfolge sollte logisch (oben nach unten, links nach rechts) dokumentiert werden.

2. Sichtbarer Fokus-Zustand: Es muss ein sichtbarer Fokus-Zustand für jedes per Tabulator erreichbare Element auf der Seite gewährleistet sein, um die Orientierung der Nutzer zu erhalten. Dies kann durch das Einrahmen oder Hervorheben der aktuellen (fokussierten) Position geschehen.

3. Tastaturfallen vermeiden: Es sollten keine Tastaturfallen eingebaut werden, bei denen der Nutzer ein Feld nicht verlassen oder zurückgehen kann, z.B. durch automatisches Tabben, das das Zurückgehen verhindert. Auch die Unfähigkeit, auf wichtige Inhalte zuzugreifen, aufgrund von JavaScript-Code sollte vermieden werden. Vollständige Tastaturunterstützung für eingebettete Medien ist bereitzustellen.

4. Tastenkürzel: Tastenkürzel sollten implementiert werden, da Nutzer mit eingeschränkter Mobilität davon profitieren. Standardmäßige oder personalisierte Tastenkürzel für häufig genutzte Funktionen können angeboten werden. Da einige Nutzer nicht in der Lage sind, zwei Tasten gleichzeitig gedrückt zu halten, sollten Alternativen angeboten und solche Tastenkürzel vermieden werden.

1. "Digitale Klaustrophobie" vermeiden: Nutzer mit eingeschränkter Mobilität können keine feinen Mausbewegungen ausführen und tippen möglicherweise auf den falschen Link oder Button. Daher sollten überladene Website-Designs vermieden werden. Es sollte keine hohe Präzision gefordert werden, indem Ziele verteilt, logisch angeordnet und Interaktionsobjekte über alle Bildschirmgrößen hinweg größer gemacht werden.

2. Einfache Navigationsmenüs: Für Nutzer mit Tremor, die Schwierigkeiten beim Navigieren durch Menüleisten haben, die Präzision oder Hovering erfordern, sollten übermäßig komplizierte Navigationen und Kaskaden-Dropdown-Menüs, die Hovering erfordern, vermieden werden.

3. Suchfunktion hinzufügen: Eine Suchfunktion auf der Website hilft Nutzern mit eingeschränkter Mobilität, relevante oder spezifische Inhalte mit weniger Bewegung zu finden. Dabei ist sicherzustellen, dass die Seiten indexiert sind und die Sortierung relevanter Suchergebnisse hilfreich oder anpassbar ist.

Fehlerkorrektur für Motorische Zugänglichkeit

• Hilfen beim Tippen: Rechtschreibprüfung, Autovervollständigung und Autofill sind wichtig, da Nutzer mit Mobilitätseinschränkungen langsamer tippen und eher Fehler machen.

• Eingabeprüfung: Formulare sollten Fehler sichtbar hervorheben und Eingaben überprüfen, um Nutzer beim Korrigieren zu unterstützen.

• Zeitlimits: Ausreichende und konfigurierbare Zeitlimits sind entscheidend, da diese Nutzer mehr Zeit für Aufgaben und Korrekturen benötigen.

Gehörlosenkultur und -gemeinschaft

• Gehörlosen-Community: Umfasst Gehörlose und Schwerhörige (DHH), Hörende, die sich engagieren, Gebärdensprachdolmetscher und CODA (Kinder gehörloser Erwachsener). Sie teilen Gebärdensprache, Erbe und Werte der Gehörlosenkultur.

• Gehörlosenkultur: Basierend auf dem Glauben, dass Gehörlosigkeit eine andere Art des Lebens ist, verwurzelt in einer visuellen Welt. Gemeinsame Lebenserfahrungen, Überzeugungen und Werte manifestieren sich in der Kultur.

• Gebärdensprache: Hauptkommunikationsmittel, mit eigener Grammatik und Bewegungen der Hände/Gesicht. Nicht universell, verschiedene Sprachen existieren (z.B. ASL, DGS).

• Terminologie: "Deaf people" (mit großem 'D') wird von der Community bevorzugt, da sie sich als Kultur versteht; die Forschung spricht von "Deaf and Hard of Hearing People (DHH)".

1. ebärdensprachdolmetscher: Diese bieten die Interpretation von gesprochener Sprache in Gebärdensprache und umgekehrt, oder zwischen zwei Gebärdensprachen. Die Gehörlosen-Community unterscheidet zwischen "Signern" (konversationelle Kommunikation) und "Gebärdensprachdolmetschern" (fließend und qualifiziert).

2. Video-Relay-Dienste: Ermöglichen Personen mit Hörbehinderungen, die Gebärdensprache nutzen, die Kommunikation mit sprechenden Telefonnutzern über Videogeräte anstelle von getipptem Text. DHH-Personen nutzen dies für Telefonate, Jobgespräche oder Authentifizierungen.

3. Optische/Vibrations-Benachrichtigungen: Da DHH-Personen Geräusche schlecht hören, nutzen einige Apps und Geräte physische oder visuelle Alarm- oder Benachrichtigungstöne. Beispiele sind vibrierende Wecker, Benachrichtigungen mit Lichtern statt Tönen oder Brandmelder mit Blitzlichtern.

4. Wörterbücher für Gebärdensprachübersetzung: Die "Hand Talk App" ist ein häufig genutztes Taschenwörterbuch zur Übersetzung von Text oder Audio in die entsprechende Gebärdensprache.

UI Design für Audio-Zugänglichkeit

• Audio-Inhalte: Sicherstellen, dass Audio hörbar und von hoher Qualität ist, mit korrekten Dezibel-Pegeln und ohne Ablenkungen. Nutzer sollten die Lautstärke anpassen und stummschalten können.

• Untertitel & Transkripte (CC): Geschlossene Untertitel (CC) oder Transkripte für alle Medieninhalte anbieten, idealerweise von Menschen erstellt und synchronisiert. Neue Forschung versucht, Tonhöhe, Nuancen und Emotionen in Untertiteln durch Stil und Farbkodierung zu visualisieren.

• Sprache: Einfache Sprache in schriftlichen Texten verwenden, da Gebärdensprache oft die Muttersprache ist. Journalistischer Stil mit kurzen Sätzen (7-10 Wörter pro Zeile) ist zu bevorzugen.

• Gebärdensprache in Videos: Kleine Videos mit Gebärdensprachdolmetschern in Medien integrieren, besonders für Live-Informationen oder archivierte Inhalte.

• Benachrichtigungen: Physische oder visuelle Alternativen zu reinen Audio-Benachrichtigungen bieten, z.B. Vibrationen, Pop-ups, rote Markierungen oder Blitze.

• Kontakt- & Authentifizierungsmethoden: Mehrere Kommunikationsformen (Live-Chat, Video-Chat, E-Mail, Textnachricht) als Kontaktmethoden anbieten, da DHH-Nutzer nicht immer telefonisch kommunizieren können. Textuelle Authentifizierungsmodi (z.B. Chat, E-Mail, Biometrie, OTP) sollten als Alternativen zu Sprachauthentifizierung angeboten werden, um Autonomie zu fördern und auf Sicherheitsbedenken zu reagieren.

Design für kognitive Barrierefreiheit – Übersicht

Layout & Navigation

• Konsistent sein: Gleiche Beschriftung, Funktionalität und Muster auf der gesamten Seite verwenden.

• Klare Struktur: Logischer Aufbau mit Überschriften und linearem Inhalt.

• Suchfunktion anbieten: Als Alternative zur hierarchischen Navigation.

Inhaltsdarstellung

• Einfache Sprache: Keinen Fachjargon oder Akronyme verwenden. Beschreibende Links statt "hier klicken".

• Unterstützende Medien: Bilder, Icons und Grafiken nutzen, um Text verständlicher zu machen.

• Progressive Disclosure: Inhalte schrittweise aufdecken, um Nutzer nicht zu überfordern (z.B. durch Akkordeons, "Mehr anzeigen"-Buttons).

Interaktion & Eingabe

• Formulare: Intuitiv gestalten mit klaren Fehlermeldungen, Hilfetexten und Korrekturmöglichkeiten (z.B. Rechtschreibprüfung). Bewegliche Labels vermeiden.

• Zeitlimits: Ausreichend Zeit geben, Limits abschaltbar machen oder zumindest davor warnen.

• Mediensteuerung: Kein Autoplay von Audio/Video. Nutzer müssen die Wiedergabe von Videos, GIFs und Karussells steuern und pausieren können.

Zugang & Hilfe

• Sicherheit vereinfachen: Gast-Zugänge ermöglichen (keine Account-Pflicht). Komplexe Passwörter und ReCaptcha vermeiden, Alternativen wie Passkeys anbieten.

• Alternative Kontaktmethoden: Nicht nur Telefon, sondern auch Online-Chat oder E-Mail bereitstellen.

Erscheinungsbild

• Light- & Dark-Mode: Einen Hell- und Dunkelmodus sowie eine automatische Umschaltung anbieten.

Design für Fotosensibilität – Übersicht

Generelle Prinzipien

• Blitzen & Flackern vermeiden: Halte dich an die WCAG-Grenzwerte: nicht mehr als 3 allgemeine Blitze (oder 3 rote Blitze) pro Sekunde.

• Vorsicht bei Bewegung: Sich schnell bewegende oder flackernde Elemente können Anfälle oder Unwohlsein auslösen.

Spezifische Elemente & Effekte

• Animationen: Prozesse müssen auch ohne Animationen nutzbar sein. Biete eine Option, alle Animationen (Blinken, Flackern) abzuschalten.

• Parallax-Scrolling: Kann desorientierend wirken. Nur mit Vorsicht einsetzen und Nutzern die Kontrolle geben, den Effekt abzuschalten.

• Ladeindikatoren: Sanfte Ladebalken sind besser als schnell flackernde "Spinner".

Riskante visuelle Muster

• Farben: Vermeide die Farbe Rot, besonders in Kombination mit Blitzen. Übergänge zu oder von gesättigtem Rot sind riskant.

• Kontrastreiche Muster: Muster wie Streifen oder Schachbretter können auch ohne Bewegung Anfälle auslösen. Reduziere den Kontrast, wenn solche Muster verwendet werden.

Wichtigste Maßnahme

• Abschalt-Option anbieten: Gib Nutzern eine zentrale Einstellungsmöglichkeit, um alle potenziell fotosensitiven Inhalte (z.B. Animationen, Video-Effekte) zu deaktivieren.

1. Nachteile von Spracherkennung:

   • Nutzer müssen trotzdem oft auf den Bildschirm schauen.

   • Erhöht die kognitive Last (man muss sich Befehle merken, statt sie zu sehen).

   • Funktioniert oft schlecht mit Apps von Drittanbietern.

2. Reduzierung der kognitiven Last:

   • Unnötige Wörter und lange Texte vermeiden.

   • Informationen schrittweise anzeigen, nicht alles auf einmal.

   • Klare Hierarchien und eindeutige Buttons verwenden.

1. Gute Standardeinstellungen:

   • Reduzieren die Interaktionskosten und beschleunigen Aufgaben.

   • Passen sich dem Kontext an (z.B. Google Maps: andere Restaurant-Vorschläge im Stehen als beim Fahren).

2. Glanceable Typography:

   • Ziel: Text muss mit einem kurzen Blick verständlich sein.

   • Reduziert die Zeit, die der Nutzer auf das Handy schaut, um Unfälle zu vermeiden.

1. Forschungsergebnisse:

   • Größere Schrift ist besser als kleine.

   • Normale Schriftweite ist besser als schmale.

   • Großbuchstaben sind schneller lesbar als Kleinbuchstaben.

2. Prinzipien:

   • Große Schriftgrößen für Überschriften & Benachrichtigungen nutzen.

   • Texte, die nur aus Kleinbuchstaben bestehen, vermeiden.

   • Schmale (condensed) Schriftarten vermeiden, besonders in ablenkenden Umgebungen (z.B. Navi).

1. Grundsatz: Psychologische Tricks nur moderat und ethisch einsetzen, um Nutzer zu positivem Verhalten zu bewegen.

2. Zu entfernende Features:

   • Übermäßige Gamification (spielerische Elemente).

   • Ständige, unnötige Benachrichtigungen.

   • Mentale Belohnungssysteme, die zu suchthaftem Verhalten führen.

Inclusive Design zielt darauf ab, alle Menschen und Gruppen einzubeziehen und zu integrieren, insbesondere jene, die benachteiligt sind, Diskriminierung erfahren haben oder mit Behinderungen leben. Es berücksichtigt die gesamte Bandbreite menschlicher Vielfalt (Fähigkeiten, Sprache, Kultur, Geschlecht, Alter etc.)

1. Accessibility (Zugänglichkeit) und Usability (Benutzerfreundlichkeit) sind Teilbereiche des Inclusive Design.

2. Accessibility konzentriert sich darauf, Produkte für jeden nutzbar zu machen.

3. Inclusive Design ist eine umfassendere Denkweise, die das Verständnis für die Vielfalt der Nutzer in den Mittelpunkt stellt. Das gesamte Konzept ist Teil des Human-Centered Designs.

1. Exklusion erkennen (Recognize exclusion): Ausschlüsse erkennen, die durch Diskrepanzen zwischen Menschen und einem Produkt entstehen, oft basierend auf den eigenen Vorurteilen der Designer.

2. Von Vielfalt lernen (Learn from diversity): Diverse Perspektiven von Menschen in den Mittelpunkt des Prozesses stellen, um echte Einblicke zu gewinnen.

3. Für eine Person lösen, auf viele erweitern (Solve for one, extend to many): Lösungen, die für Menschen mit permanenten Behinderungen entwickelt werden, kommen oft allen Nutzern zugute.

Intersektionalität ist ein von Kimberlé Crenshaw entwickeltes Konzept. Es beschreibt, wie verschiedene Identitätsmerkmale (z.B. Hautfarbe, Geschlecht, Behinderung) zusammenwirken und einzigartige Erfahrungen von Diskriminierung und Privilegien schaffen. Für das Design bedeutet dies, zu verstehen, wie sich Machtsysteme überschneiden und marginalisierte Gruppen beeinflussen

Algorithmen sind nicht neutral, sondern von gesellschaftlichen Vorurteilen geprägt. Sie können diskriminierende Stereotype verstärken, indem sie bestimmte Gruppen marginalisieren oder falsch darstellen. Beispiel: Google-Autovervollständigung verband "black women" mit negativen Adjektiven (angry, lazy), während "white women" mit positiven assoziiert wurden

Eine Studie von Koenecke et al. fand heraus, dass die ASR-Systeme von fünf großen Tech-Firmen (Apple, Google etc.) erhebliche rassische Ungleichheiten aufweisen. Die durchschnittliche Wortfehlerrate (WER) war für "schwarze Sprecher" fast doppelt so hoch wie für "weiße Sprecher" (0.35 vs. 0.19). Der Grund liegt oft in nicht-diversen Trainingsdatensätzen.

1. Beispiel 1: Google Vision Cloud stufte ein Bild einer dunkelhäutigen Person, die ein Fieberthermometer hält, als "Waffe" ein, während das gleiche Szenario mit einer hellhäutigen Person als "Monokular" bezeichnet wurde.

2. Beispiel 2: Googles Foto-App markierte 2015 ein schwarzes Paar fälschlicherweise als "Gorillas"

1. Diverse Trainingsdatensätze: Datensätze verwenden, die verschiedene Personengruppen gleichberechtigt enthalten.

2. Inklusiver Entwicklungsprozess: Technologie von Anfang an unter Einbeziehung verschiedener Gruppen und Gemeinschaften entwerfen.

Sie können exklusiv sein, da sie von kulturellen Annahmen ausgehen, die nicht universell gelten.

• Beispiel 1: Die Frage nach dem Mädchennamen der Mutter ist in Kulturen nutzlos, in denen Frauen nicht den Namen ihres Mannes annehmen.

• Beispiel 2: Fragen nach Straßennamen funktionieren nicht in Regionen, in denen es keine offiziellen Straßennamen gibt

Statt einer binären Auswahl (männlich/weiblich) sollten mehrere Optionen angeboten werden:

• Frau

• Mann

• Nicht-binär

• Möchte keine Angabe machen (Opt-out)

• Möchte mich selbst beschreiben (Freitextfeld)

Solche Features können von feindselig gesinnten Akteuren missbraucht werden, um gezielte Angriffe zu planen. In Ländern, in denen bestimmte Identitäten kriminalisiert werden, kann eine solche öffentliche Kennzeichnung gefährlich sein und zu Strafverfolgung führen.

Der "Digital Divide" ist die Kluft zwischen denjenigen mit und ohne Zugang zu neuen Technologien. Er basiert oft auf sozioökonomischem Status oder geografischer Lage. Drei Ebenen:

1. Gerätezugang (Device Access): Unterschiedlicher Zugang zu Geräten wie PCs vs. nur mobilen Endgeräten.

2. Internetzugang (Internet Access): Unterschiede in der Verfügbarkeit und Qualität der Internetverbindung.

3. Digitale Kompetenz (Digital Literacy): Unterschiedliches Niveau an Fähigkeiten im Umgang mit Technologie.

Apps schließen Nutzer aus, indem sie von stereotypischen oder zu engen Annahmen über deren Identität, Beziehungen und Lebensziele ausgehen.

• Beispiel Etsy (Folie 44): Die App sendete eine Valentinstags-Benachrichtigung mit dem Text: "We've got what hewants". Diese Formulierung geht von einer heterosexuellen Beziehung aus und schließt alle Nutzer aus, deren Partner kein Mann ist, wodurch sie sich entfremdet fühlen können.

  
  

• Beispiel Glow (Folien 45 & 46): Die Perioden-Tracking-App zwang Nutzer, einen "Weg" zu wählen, der sich ausschließlich auf Schwangerschaft bezog (z.B. "Schwangerschaft vermeiden", "Versuch, schwanger zu werden"). Dies ignoriert alle anderen Gründe für das Tracking des eigenen Zyklus und macht die falsche Annahme, dass die Nutzerin sexuell mit jemandem aktiv ist, der sie schwängern kann. Zudem wurde durch die Verwendung von Begriffen wie "girls" und "hookups" ein exkludierender Tonfall erzeugt.

Eine Persona ist eine fiktive Repräsentation oder ein Archetyp eines Nutzers eines Produkts. Personas helfen Unternehmen, ihre Zielgruppe besser zu verstehen und sich in sie hineinzuversetzen. Sie enthalten typischerweise demografische Daten, Ziele, Bedürfnisse und kontextbezogene Informationen über den fiktiven Nutzer.

1. Recherche (Research): Daten von der Zielgruppe sammeln, z. B. durch Interviews oder Umfragen.

2. Muster erkennen (Identify patterns): In den Daten nach wiederkehrenden Verhaltensweisen und Bedürfnissen suchen, um Nutzergruppen zu identifizieren.

3. Personas erstellen (Create personas): Die gefundenen Muster zu konkreten, fiktiven Charakteren ausarbeiten. Dabei Stereotype vermeiden.

4. Iterieren (Iterate): Personas bei Bedarf anpassen, wenn sich Ziele ändern oder neue Erkenntnisse gewonnen werden.

Eine Heuristik ist eine einfache, aber nützliche Methode zur Problemlösung oder Entscheidungsfindung. Sie wird oft als "mentale Abkürzung" oder "Faustregel" bezeichnet. Ihr Hauptzweck ist es, die Komplexität eines Problems zu reduzieren, indem ein Teil der verfügbaren Informationen ignoriert wird.

1. System 1 (Schnelles Denken): Funktioniert schnell, automatisch, unbewusst und ist fehleranfällig. Es nutzt Heuristiken für alltägliche, intuitive Entscheidungen (z. B. 2+2 rechnen).

2. System 2 (Langsames Denken): Arbeitet langsam, bewusst, anstrengend und logisch. Es wird für komplexe Entscheidungen genutzt, die Konzentration erfordern (z. B. 223 x 98 rechnen).

Eine Heuristische Evaluation ist eine Usability-Methode, bei der eine kleine Gruppe von Experten (Evaluatoren) eine Benutzeroberfläche überprüft. Sie bewerten die Einhaltung anerkannter Usability-Prinzipien ("Heuristiken"), um offensichtliche Usability-Probleme zu identifizieren.

1. Sie ist schnell und kostengünstig durchzuführen.

2. Sie benötigt keine echten Endnutzer zum Testen.

3. Sie hilft, die offensichtlichsten Probleme in einer Benutzeroberfläche frühzeitig zu identifizieren

Weil jeder Evaluator unterschiedliche Probleme findet. Mehrere Evaluatoren finden zusammen eine größere Anzahl an Usability-Problemen und decken eine breitere Perspektive ab.

1. Sie findet oft nur einen Teil (30-50 %) der tatsächlichen Usability-Probleme.

2. Evaluatoren übersehen häufig Probleme, die von echten Nutzern identifiziert werden.

3. Die Ergebnisse sind anfällig für die Voreingenommenheit (Bias) und Subjektivität der Evaluatoren.

4. Manche identifizierten Probleme sind möglicherweise keine echten Usability-Probleme.

1. Sichtbarkeit des Systemstatus: Den Nutzer immer über den aktuellen Zustand informieren.

2. Übereinstimmung zwischen System und realer Welt: Eine für den Nutzer verständliche Sprache verwenden.

3. Benutzerkontrolle und Freiheit: Dem Nutzer die Möglichkeit geben, Aktionen leicht rückgängig zu machen (z.B. "Undo").

4. Konsistenz und Standards: Einheitliche Konventionen verwenden, damit Nutzer nicht raten müssen, was Elemente bedeuten.

5. Fehlervermeidung: Ein Design bevorzugen, das Fehler von vornherein verhindert.

1. Planung (Planning): Ziele definieren, System und Nutzer verstehen und die Experten instruieren.

2. Durchführung (Evaluation): Experten bewerten die Oberfläche (oft in zwei Durchgängen) und vergeben Schweregrade ("Severity Ratings") für gefundene Probleme.

3. Auswertung (Reviewing): Die Ergebnisse aller Evaluatoren werden zusammengefasst, Duplikate entfernt und eine finale Liste der Usability-Probleme erstellt.