Creative Technologies Lab | dokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== BA: Medien Design Projekt ======

Thema heute: Grundlagen und Best Practices im User Interface Design\\ Ziel:Vermittlung der zentralen Aspekte des User Interface Designs und Anwendung auf praktische Beispiele.

Prof. Felix Beck, WMA [[https://leoniewinkelmann.de/contact|Leonie Winkelmann]]\\
Dienstag, 3. Dezember 2024

==== Prelude ====

  - Anwesenheitsliste checken
  -  Begrüßung & Überblick über das Thema
  -  Definition: Was ist User Interface Design?
    - Kurze Diskussion: "Was ist für euch ein gutes UI?"
  -  **Relevanz des Themas:**  
    * Warum gutes UI Design wichtig ist (Usability, Effizienz, Nutzerbindung).  
    * Beispiele aus dem Alltag (gute vs. schlechte Interfaces).
    * 2-3 Beispiele für bekannte Interfaces (z. B. Apps, Websites).
    * Analyse anhand der genannten Kriterien (z. B. Usability, Feedback, Barrierefreiheit).  


====== Unterschied zwischen UX und UI ======

Abgrenzung zu UX Design (User Experience Design).

^ **Aspekt**       ^ **[[teaching:ba:courses:mediadesign-project:wise24-25:user-interface-design|UI Design]]**  ^ **[[teaching:ba:courses:mediadesign-project:wise24-25:user-experience-design|UX Design]]**                                ^
| **Fokus**         | Visuelle Gestaltung und Interaktion            | Ganzheitliche Nutzererfahrung               |
| **Dimension**     | Ästhetik und Funktionalität der Oberfläche     | Emotionale und funktionale Nutzerbedürfnisse|
| **Zeithorizont**  | Meist im Entwicklungsprozess eines Produkts    | Von der Idee bis zur Nachnutzung            |
| **Methoden**      | Design-Systeme, Prototyping, Styleguides       | Nutzerforschung, Usability-Tests, Wireframes|


=== Zusammenhang ===
UI Design ist ein Teil des UX Designs. Während UX die gesamte Nutzererfahrung umfasst, fokussiert sich UI auf die Gestaltung der visuellen und interaktiven Schnittstelle. Ein gutes UI Design trägt zu einer positiven UX bei, aber eine gute UX erfordert mehr als nur ein gutes UI.

**Vergleichsbild:**  
  * UX ist das **Gesamterlebnis einer Reise**, z. B. die Auswahl eines Hotels, die Reiseplanung und die Ankunft.  
  * UI ist das **Design des Hotelzimmers**, z. B. die Anordnung der Möbel und das Farbschema.

Beide Disziplinen ergänzen sich und sollten eng zusammenarbeiten.

====== Wichtige Punkte im User Interface Design ======

Gutes User Interface Design ist eine interdisziplinäre Aufgabe, die Ergonomie, Psychologie, Design und Technologie miteinander verbindet. Der Nutzer und dessen Anforderungen stehen dabei immer im Zentrum des Entwicklungsprozesses.

=== Usability (Benutzerfreundlichkeit) ===

  * Was bedeutet Benutzerfreundlichkeit?  
  * Beispiele für intuitive vs. komplizierte Interfaces.

  * **Intuitive Bedienbarkeit**: Die Oberfläche sollte leicht verständlich und ohne Anleitung nutzbar sein.
  * **Konsistenz**: Einheitliche Gestaltungselemente und Interaktionsmuster erhöhen die Benutzerfreundlichkeit.
  * **Effizienz**: Aufgaben sollten mit minimalem Aufwand erledigt werden können.

=== User-Centered Design (UCD) ===
  * **Zielgruppenanalyse**: Die Bedürfnisse und Erwartungen der Benutzer stehen im Mittelpunkt. (Wie verstehen wir Nutzerbedürfnisse?)
  * **Personas und Szenarien**: Fiktive Charaktere und Nutzungskontexte helfen, die Anforderungen zu verstehen.
  * **Usability-Tests**: Iterative Tests mit echten Nutzern gewährleisten die Optimierung der Benutzeroberfläche.

=== Visuelles Design ===
  * **Ästhetik**: Ein ansprechendes Design erhöht die Attraktivität und das Vertrauen der Nutzer.
  * **Typografie**: Gut lesbare Schriftarten, ausreichende Kontraste und eine klare Hierarchie sind essenziell.
  * **Farbschema**: Farben sollten zugänglich (Barrierefreiheit beachten) und konsistent sein.

=== Interaktivität ===
  * **Feedback**: Benutzeraktionen sollten sofort sichtbare Reaktionen auslösen (z. B. Ladeindikatoren).
  * **Responsiveness**: Oberflächen müssen auf verschiedenen Geräten und Bildschirmgrößen gleich gut funktionieren.
  * **Fehlertoleranz**: Klare Fehlermeldungen und die Möglichkeit, Aktionen rückgängig zu machen, verbessern die Nutzererfahrung.

=== Barrierefreiheit (Accessibility) ===
  * **Inklusion**: Das Design sollte auch für Menschen mit Einschränkungen zugänglich sein.
  * **Standards**: Einhaltung von Richtlinien wie WCAG (Web Content Accessibility Guidelines).

=== Technische Umsetzung ===
  * **Performance**: Schnelle Ladezeiten und flüssige Interaktionen sind entscheidend.
  * **Kompatibilität**: Sicherstellung der Funktionalität auf verschiedenen Plattformen und Browsern.

=== Emotional Design ===
  * **Emotionale Bindung**: Nutzer sollen sich durch das Interface unterstützt und wertgeschätzt fühlen.
  * **Branding**: Das Design sollte die Markenidentität widerspiegeln.

=== Zukunftsfähigkeit ===
  * **Skalierbarkeit**: Das Interface sollte mit den Anforderungen wachsen können.
  * **Trends**: Berücksichtigung aktueller Designtrends und Technologien (z. B. Dark Mode, AR/VR).




===== Gruppenarbeit (20 Minuten) =====
  - Die Studierenden analysieren die eigenen User-Interfaces auf Basis der vorgestellten Kriterien => Identifikation von Stärken und Schwächen im eigenen UI Design.  
  - Ergebnispräsentation: Jeweils 2 Minuten pro Person.  

=== Diskussion und Ausblick ===
**Offene Diskussion (10 Minuten):**  
  * Was haben die Studierenden aus der Analyse gelernt?  
  * Gibt es persönliche Erfahrungen mit guten/schlechten UIs?  

**Abschließender Input (10 Minuten):**  
  - Trends im UI Design: Dark Mode, AR/VR, KI-gestützte Interfaces.  
  - Wichtigkeit von iterativem Design und lebenslangem Lernen.  

**Q&A (10 Minuten):**  
  - Beantwortung von Fragen der Studierenden.