1 / 46

Einführung in Benutzungsschnittstellen

Einführung in Benutzungsschnittstellen. 20 Juni. Beispiel: Herbst 2004 Projekte. Hall of Fame oder Hall of Shame?. Hall of Shame!. Hilft Benutzern nicht ihre Ziele zu erledigen Braucht zu lange die meisten Benutzer werden an dieser Stelle abbrechen und nicht zurückkommen

kavindra-gaurhari
Download Presentation

Einführung in Benutzungsschnittstellen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Einführung in Benutzungsschnittstellen 20 Juni

  2. Beispiel: Herbst 2004 Projekte Einführung in Benutzerschnittstellen

  3. Einführung in Benutzerschnittstellen

  4. Einführung in Benutzerschnittstellen

  5. Hall of Fame oder Hall of Shame? Einführung in Benutzerschnittstellen

  6. Hall of Shame! • Hilft Benutzern nicht ihre Ziele zu erledigen • Braucht zu lange • die meisten Benutzer werden an dieser Stelle abbrechen und nicht zurückkommen • Ausnahme: Kann ok sein für Unterhaltungs-, Kunst-, Markenseiten Einführung in Benutzerschnittstellen

  7. Hall of Fame oder Hall of Shame? Einführung in Benutzerschnittstellen

  8. Für welche Benutzer? • Ärzte im Krankenhaus • Zur Bewältigung welcher Aufgabe? • Schneller Überblick bei der Visite Einführung in Benutzerschnittstellen

  9. Hall of Shame!  • Benutzerstudie: Ärzte • brauchen die graphischeDarstellung nicht • nutzen den Platz lieberfür mehr Information • Aber… • Ärzte sagen es könnte interessant sein, um Resultate Patienten zu erklären • (aber nicht sicher, dass teilnehmende Ärzte wissen, was Patienten wollen) Einführung in Benutzerschnittstellen

  10. Implikationen • Benutzbarkeit nur durch Benutzer definiert • Machmal können wir Benutzbarkeit bewerten, wenn wir selbst zur Zielgruppe gehören • HCI: Kunst Benutzerschnittstellen für eine Zielgruppe zu erstellen zu der man nicht selbst gehört Einführung in Benutzerschnittstellen

  11. HCI := Lehrinhalte • 2. Implementierung • Html Frontpage/Dreamweaver • GUI toolkits, visual builder • Macromedia/Adobe Flash, Director • Phidgets • 1. Entwurf • Entwerfen • Rapid Prototyping • Evaluation • … Einführung in Benutzerschnittstellen

  12. Einführung in Benutzungsschnittstellen & Mensch-MaschineKommunikation 20 Juni

  13. Mensch-Maschine-Kommunikation (HCI) • Mensch • die Benutzer des Programms • andere Personen in der Organisation • Maschine • der Computer auf der des Programm läuft • oft auf Clients & Servern verteilt • Kommunikation (Interaction) • Benutzer teilen dem Computer mit was sie wollen • der Computer kommuniziert Resultate Einführung in Benutzerschnittstellen

  14. Aufgabe/Ziel Design Technologie Mensch HCI Ansatz zum Designvon Benutzerschnittstellen • Benutzerschnittstelle :=Teil der Anwendung der es Benutzern erlaubt mit dem Computer zu interagieren Einführung in Benutzerschnittstellen

  15. Warum ist HCI wichtig? • Hauptteil der Entwicklungsarbeit für “echte” Programme • ungefähr 50% • Schlechte Benutzerschnittstellen kosten • Geld: 5% Zufriedenheit -> bis zu 85%Profit • Leben (Therac-25) Einführung in Benutzerschnittstellen

  16. Wer erstellt Benutzerschnittstellen? • Ein Team von Spezialisten (im Idealfall) • Graphikdesigner • Interaktions-/Benutzerschnittstellendesigner • Dokumentationsschreiber • Marketingleute • Tester • Usability Ingenieure • Software Ingenieure • Benutzer Einführung in Benutzerschnittstellen

  17. Design und Implementierung von UIs • Entwicklungsprozess • Benutzbarkeitsziele • Benutzerzentriertes Design (user-centered design) • Aufgabenanalyse (task analysis)& contextual inquiry • Rapid Prototyping • Evaluation • Implementierung Einführung in Benutzerschnittstellen

  18. User Interface Entwicklungsprozess Kunden, Produkte, Firma, Marketing Kunden, Produkte, Firma, Marketing Kunden, Produkte, Firma, Marketing Design Entdeckung Design Exploration Evaluation AusführungImplementierung Kunden: - Rollen (wer) - Ziele (was) - Kontext (Szenarien) Marketing: - Business Prioritäten - Botschaft Technologie - Produkte - Architektur Design: - Führende/Konkurrenz Technologien Teamarbeit zurUmsetzung desDesigns Evaluation mit dem Kunden Storyboard Beurteilen & Iterieren Design Definition: - Design Problemstellung - Zielbenutzer Rollen (wer) - Zielbenutzer Ziele (was) - Designkonzept Spezifikation: Hi Fidelity, Verfeinertes Design - Basierend auf Benutzerfeedback - basiert auf Produkt Realitaet - Verbesserte Designbeschreibung Proposal: Demos/ Lo Fi Prototypen (wie) basierend auf Folie von Sara Redpath, IBM & Thyra Trauch, Tivoli Einführung in Benutzerschnittstellen

  19. Design Prototype Evaluieren Iteration In jeder Phase! Einführung in Benutzerschnittstellen

  20. Design/Entwerfen • Design • geleitet durch Anforderungen Zweck • nicht durch seine Implementierung • Bsp: PDA nicht so wichtig wie “mobile” App. • Ein Entwurf repräsentiert das Artefakt • für Benutzerschnittsellen das beinhaltet • Entwürfe oder storyboards • Ablaufdiagramme die zeigen,wie die Aufgabe bewältigt wird • ausführbare Prototypen Aufsatz schreiben starte Textverarbeitungsprg. Schreibe Outline Fülle Outline Starte Textverarbeitung finde Textverarbeitungsicon Doppelklicke das Icon Schreibe Outline Schreibe high-level Ideen… Einführung in Benutzerschnittstellen

  21. Web Design Representationen Site Maps Storyboards Schema Mock-ups Einführung in Benutzerschnittstellen

  22. Benutzbarkeit (Usability) Definition der ISO:Die Effektivität, Effizienz and Zufriedenheit mit der bestimmte Benutzer bestimmte Aufgaben bewältigen in bestimmten Umgebungen • Das heißt nicht, dass man nur “langweilige” Benutzerschnittstellen nur für Anfänger designen darf—alles hängt von den Zielen ab Einführung in Benutzerschnittstellen

  23. Erlernbar mit oder ohne Anleitung Effizient Aufgabe schnell bewältigen Robust minimale Fehlerrate Benutzer beim Weitermachen helfen Angenehm hohe Zufriedenheit Benutzbarkeit Anforderungen • Anforderungen früh abstecken,dienen später um Fortschritt zu bewerten • Anforderungen haben tradeoffs  priorisieren • Beispielziele Einführung in Benutzerschnittstellen

  24. Benutzerzentriertes Design(User-centered Design) • Mantra = “Kenne Deine Benutzer” • Benutzer einbeziehen während des gesamten Prozesses • Designer & Programmierer arbeiten mit Benutzern aus Zielgruppe • Verstehe kognitive Fähigkeiten der Benutzer (Sehvermögen, Farbsehen…, Job-Bedingte Fähigkeiten und Fertigkeiten) • Verstehe den Arbeitsprozess • Denke über die Welt mit den Begriffe der Benutzer •  Werde Teil der Zielgruppe • Nicht Technologie/Feature-zentriertes Design Einführung in Benutzerschnittstellen

  25. ? Aufgabenanalyse & Contextual Inquiry • Beobachte existierende Arbeitspraxis •  Erzeuge Beispiele and Benutzungsszenarien Einführung in Benutzerschnittstellen

  26. Fantasy Basketball Rapid Prototyping:“mock-up”, um testen zu können • Low-fidelity Techniken • Papier Sketches • Schneiden, kopieren,& kleben • Interaktive Prototyping werkzeuge • HTML, Visual Basic, HyperCard, Director, Flash, etc. • UI builders • Visual Studio .NET, JBuilder… Einführung in Benutzerschnittstellen

  27. ESP Folge von Evaluationstechniken • Teste mit echten Benutzern (Teilnehmern) • Interaktiver Prototyp • low-fi mit Papier “Computer” • Low-cost Techniken • Experten Evaluierung • online Tests • Benutzerstudie • Hypothese • harte, übertragbare Resultate Einführung in Benutzerschnittstellen

  28. Lehrinhalte Programming • Toolkits und Widget Bibliotheken • UI Builders • Eventmodelle • Input / Output Modelle • Model-View Controller • etc. Einführung in Benutzerschnittstellen

  29. Kursformat HCI 1 • HCI 1 • Vorlesung • Praktikum & Hausübungen Einführung in Benutzerschnittstellen

  30. Praktikumsübersicht • Benutzerschnittstellenidee vorschlagen • Gruppen à 4 Studenten, unterschiedliche Fertigkeiten • Anforderungsanalyse und & “sketches” (kann und wird sich ändern) • Erstelle “Low fidelity” Prototypen • Testen mit der Gruppe • Erstelle ersten interaktiven Prototypen • Präsentation vor dem Kurs & Kritik • Heuristische Evaluation (individuell) • Heuristische Evaluation aggregieren • Erstelle zweiten interaktiven Prototypen • Präsentation vor dem Kurs & Kritik • Benutzertest • Abschließende Präsentation Einführung in Benutzerschnittstellen

  31. Mehr Beispiele vom Herbst 2004 Einführung in Benutzerschnittstellen

  32. Verkehrsinfo Stau-Information (Ampelmetapher) Alarm Icons Lautstärke Scrollen Hörbare Benachrichtigungen Zoom Auf Fahrer zentrieren Position des Fahrers Voreinstellungen (Radiometapher) Einführung in Benutzerschnittstellen

  33. Verkehrsinfo TabletPC Phidgets Kartenmaterial Farbe, Klebstoff, Holz, Hammer Viele Stunden programmieren / Einatmen giftiger Dämpfe = Einführung in Benutzerschnittstellen

  34. Prototyp Einführung in Benutzerschnittstellen

  35. Einführung in Benutzerschnittstellen

  36. OTTO: Ortsbasierte Photoverwaltung Hierarchische Navigation (AKA bread crumbs) Vorwärts and Rück- Navigation Kartenansicht Albumsansicht Einführung in Benutzerschnittstellen

  37. Otto: Evolution Low Fidelity Interaktiv Benutzertest Heuristische Evaluation Implementiert mit Implementiert mit C# unter .NET Zweiter Prototyp bereinigt heuristische Verstösse • Pappe • Folie • Post-its Einführung in Benutzerschnittstellen

  38. Bus buddy—Design Evolution Einführung in Benutzerschnittstellen

  39. Einführung in Benutzerschnittstellen

  40. HCI 2: Aktuelle Themen der HCI • Ubiquotous Computing • Computer-supported cooperative work • Interfaces für Internetsuche • Informationsvisualisierung • Interaktionstechniken • Mobile Computing • Social Computing Einführung in Benutzerschnittstellen

  41. Zusammenfassung: Lerninhalte • Programmierung von Benutzerschnittstellen... • ...und die vielen Schritte davor • Entwurf • Rapid Prototyping • Benutzerstudien • Iteration • Ergebnisse präsentieren • Teamarbeit Einführung in Benutzerschnittstellen

  42. ENDE Einführung in Benutzerschnittstellen

  43. Backup slides Einführung in Benutzerschnittstellen

  44. Bezug zum Informatik Curriculum • Software Engineering im Bezug auf die Benutzerschnittstelle • ähnliche Inhalte: • Wiederverwendung, Modifizierbarkeit, Toolkits… • “Design patterns” für bekannte Anwendungen wie Webseiten • Unterschied: Validierung • Software Engineering : Korrektheitsbeweise • HCI: Validierung ohne Benutzer nicht möglich • Berufsbildend: • Hunderte von Usability Engineers, z.B. bei Microsoft Einführung in Benutzerschnittstellen

  45. Literatur • The Design of Sites by van Duyne, Landay, & Hong • Lehrbücher • Human-Computer Interaction by Alan Dix, et. al., 3rd edition, 2003 • Developing User Interfaces by Dan Olsen, 1998 • Ben Shneiderman: Designing the User Interface Einführung in Benutzerschnittstellen

  46. Benotung • Kombination aus • Mittelklausur (15%) • Endklausur (20%) • Einzelprojekt (20%) • Gruppenprojekt (40%) • Demos/Präsentation (Gruppenanteil) • Projektreport and Übungen • Mitarbeit (5%) Einführung in Benutzerschnittstellen

More Related