Human-Computer Interaction

Transkript

1 Human-Computer Interaction Masterstudiengang Medieninformatik WS 2013 / 2014 Prof. Dr. Robert Strzebkowski Kluger Zitat... Statement... 4&

2 Agenda! Infos zum Dozenten! Zum Fach HCI! Ziele des Seminars! Inhalte! Ablauf und Struktur! Übungsideen! Bewertungskriterien! Termine! Fragen, Anmerkungen, Wünsche... %& 1. Kurzvorstellung des Dozenten Prof. Dr. Robert Strzebkowski!!!! Studium der Kommunikations.Wiss. und Informatik an der TU Berlin, wissenschaftliche Professionalisierung im Bereich der mediendidaktischen Gestaltung und Umsetzung von E-Learning Applikationen an der FU Berlin Seit 2002 Professor für interaktive Multimedia-Systeme an der Beuth Hochschule für Technik Berlin Projekte vor allem im Bereich interaktiver Rich Media/Multimedia Systeme und interaktiven TV / WebTV, Interactive Streaming Multimedia Forschungsprojekte zur Nutzung interaktiver Medien für Informationsund Bildungs-/Lernprozesse! Gründung des Deutschen IPTV Verbandes 2008! Mitarbeit als Organisator bei der größten int. Konferenz für interakt. TV TVX2014.org, bis jetzt als EuroITV.org bekannt

3 2. Zum Fach HCI User Interface and User Experience decide about a Product! A& 2. Zum Fach HCI B&

4 2. Zum Fach HCI "& 2. Zum Fach HCI Wenn die Nutzer einen Gegenstand weder nutzen möchten noch können, bräuchte er eigentlich gar nicht zu existieren. - Jakob Nielsen - C&

5 2. Zum Fach HCI Human computer interaction (HCI) beinhaltet Analyse, Planung und Design der Interaktionsformen und Interaktionstechniken zwischen Menschen und Computerbasierten Systemen und auch zwischen anderen Menschen, die solche Systeme für Kommunikationszwecke nutzen. D& 2. Zum Fach HCI! Diese Disziplin basiert auf Erkenntnissen vieler weiteren Fachdisziplinen, wie Ergonomie, Psychologie, Soziologie, Computerwissenschaften, Design, usw...!$&

6 2. Zum Fach HCI EFG+H& I1G0F-./& JH-./+KL1H& =1M?+/.& P,./& 2. Zum Fach HCI User Experience - UX!4&

7 2. Zum Fach HCI User Experience - UX!%& 2. Zum Fach HCI!6&

8 !A& 3. Ziele des Seminars! Aktuelle / moderne Strömungen in Bereichen des Interaktions-, Usability- und User Experience Designs und der damit zusammenhängenden Technlogien kennen lernen! Für die wesentlichen Aspekte der Usability & UX Designs sensibilisieren! Anwendung von Usability- und UX-Regeln üben!b&

9 4. Inhalte und Themen für Kurzreferate! Aktuelle Trends & Formen des Web-Designs! Usability-Grundsätze! User Experience (Erlebnis) Design! Intuitive User Interface! Simplicity! Mobile First,...! Interaktivität, Interaktionsformen & Interaction Design Grundsätze! Evaluationsmethoden für User-Interfaces & Vorgehensweisen und Techniken der UI Modellierung!"& 4. Inhalte und Themen für Kurzreferate! Barrierefreiheit Grundsätze und Anforderungen! Entwurfs-, Strukturierungs und MockUp-Tools! Information 'Architecture', Structure and Navigation Approaches! Multi-Device & Responsive Design! Gesture & Multi-Touch Based Interaction! Interaction & Navigation bei Games! Immersive 3D! 2D! Sprachbasierte Interfaces!C&

10 4. Inhalte und Themen für Kurzreferate! Softwaretechniken und Tools für User-Interface Design! CSS 2.1 3, CSS Werkzeuge Frameworks, wie z.b. Bootstrap,! Möglichkeiten & Beschränkungen der CMS-Systeme Wordpress, Joomla,...! Interaktion in AR-Umgebungen und mit Google Glasses! Biegsame und Durchsichtige/halbdurchsichtige Bildschirme! Wearable Interfaces! Interactive Home! Webfonts! itv / HybridTV UI - Interaktionsstufen! Interfaces für ältere Menschen und Kinder (insb. itv, 2nd Screen oder Steuerung mit Smartphones )!D& 5. Aufgaben / 'Projekte'! Im Rahmen der Aufgaben sollen zum einen vorhandene und entstehende Systeme auf Ihre Usability- und Experience-Aspekte und Qualitäten untersucht werden.! Zum anderen sollen Interaktions- und Usability- Entwürfe für neu angedachte interaktive Mediensysteme erstellt werden.! Zwei neue Webseiten auf Basis von CMS sollen möglichst erarbeitet werden. 4$&

11 5. Projektvorschläge das UX-Tagebuch... Wir führen ein wöchentliches (oder auch tägliches) Tagebuch vor allem über schlechtes User Experience V1GG.H-+/.H&1W./& V1GG.H-+/.H& 4!& 5. Projektvorschläge! Webseite für schlechtes Interaction- und Produkt- Design- basierend auf einem CMS, z.b. Wordpress...!! Bad Usability Experience & Interaction Design -> baduei.com! Webseite für internationale Zeichen & Schilder (Verkehrsschilder, Schilder in den Gebäuden z.b. Toliletten, Ampeln..)! geotypische und kulturelle Unterschiede... 44&

12 Projektvorschläge mein RBB 4%& Projektvorschläge NG09.XQFHO,&FHW& 46&

13 Projektvorschläge 'mein RBB' 'mein RBB' eine innovative Interactive TV, Touristik und Social Applikation 4A& Projektvorschläge mein RBB `/1<.&=R,-.G) 4B&

14 Projektvorschläge ZDF 1st / 2nd Screen 4"& Projektvorschläge ZDF 1st / 2nd Screen 4C&

15 Projektvorschläge! Analyse des UI des neuen CMS der beuthbox 4D& Projektvorschläge! Konzeption für das P5 livebox-portal / VIRPA Q@[.bcd& %$&

16 Projektvorschläge neues beuthbox Interface Neues HTML5-basiertes + responsive User Interface für die beuthbox!! Vorlagen, Daten, Back-End ist alles da! %!& Beuth Interactive Information Terminal B2IT %4&

17 1. Motivation %%& 1. Motivation Attraktivität? Aufmerksamkeit? Motivation? Orientierung? %6&

18 4. Wesentliche Inhalte & Funktionen Studium- und Campusbezogen! Infos zur Studienverwaltung! Stunden- und Raumpläne! Verzeichnis der Profs und Dozenten! Lehrkraftnews! Semester- und Jahrestermine! Mensaplan! Campusplan und Öffnungszeiten der Gebäude! Infos zur Bibliothek %A& 4. Wesentliche Inhalte & Funktionen Hochschulebezogen! Veranstaltungs- und Vortragskalender! Aktuelle Presseinformationen / News! Aktuelle amtliche Mitteilungen! Video-Livestreams %B&

19 1. Motivation Zeitgemäße Präsentationsform %"& 1. Motivation Zeitgemäße Präsentationsform %C&

20 1. Motivation Zeitgemäße Präsentationsform %D& 3. Anforderungen Z.B. Bestimmte Reihenfolge bestimmter Inhalte 6$&

21 3. Anforderungen Z.B. Templatebeasierte Erstellung von aufmerksamkeitserregenden Informationspräsentationen 6!& 3. Anforderungen Z.B. Fokussierung auf bestimmte Inhalte 64&

22 Projektvorschläge 2nd Screen Doku 6%& Projektvorschläge 2nd Screen Kinder + Wissen 66&

23 Projektvorchläge Mobile Video Production Für das FuE-Projekt 'Viwitra' sollte ein Konzept für ein Templatebasiertes mobiles Videoaufnahmetool entstehen =-+HW9af.&H+KX&/.KX-,&FHW& 6A& Projektvorchläge Mobile Video Production Für das FuE-Projekt 'Viwitra' sollte ein Konzept für ein Templatebasiertes mobiles Videoaufnahmetool entstehen 6B&

24 6. Technische Aspekte 6"& Termine! Projekt- und Referateentscheidungen: ! Aufgaben-Einarbeitungen & Analyse-Phase: ! Liste der Mängel und kritische Punkte: ! Wire-Frame Entwürfe / Konzepte: !! Zwischen-Präsentation! Interaktive Endkonzepte / Applikationen: C&

25 Bewertungskriterien keine Klausur, da:! 60 % Analyse- und Konzeptarbeiten sowie interaktive MockUps! 20 % Kurzreferat gemeinsam mit dem Dozenten! 20% Tagebuchbeiträge! Anwesenheits 6D& Danke für die Aufmerksamkeit Prof. Dr. Robert Strzebkowski mail: [email protected] web: