Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Cäcilie Helbig Geändert vor über 10 Jahren
1
Einführung in Benutzungsschnittstellen
20 Juni
2
Beispiel: Herbst 2004 Projekte
2005 Einführung in Benutzerschnittstellen
3
Einführung in Benutzerschnittstellen
2005 Einführung in Benutzerschnittstellen
4
Einführung in Benutzerschnittstellen
2005 Einführung in Benutzerschnittstellen
5
Hall of Fame oder Hall of Shame?
Change this example as the site doesn’t exist anymore 2005 Einführung in Benutzerschnittstellen
6
Einführung in Benutzerschnittstellen
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 Ask the audience what is wrong with this! 2005 Einführung in Benutzerschnittstellen
7
Hall of Fame oder Hall of Shame?
2005 Einführung in Benutzerschnittstellen
8
Einführung in Benutzerschnittstellen
Für welche Benutzer? Ärzte im Krankenhaus Zur Bewältigung welcher Aufgabe? Schneller Überblick bei der Visite 2005 Einführung in Benutzerschnittstellen
9
Einführung in Benutzerschnittstellen
Hall of Shame! Benutzerstudie: Ärzte brauchen die graphische Darstellung nicht nutzen den Platz lieber fü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) 2005 Einführung in Benutzerschnittstellen
10
Einführung in Benutzerschnittstellen
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 2005 Einführung in Benutzerschnittstellen
11
Einführung in Benutzerschnittstellen
Lehrinhalte HCI := 1. Entwurf Entwerfen Rapid Prototyping Evaluation … 2. Implementierung Html Frontpage/Dreamweaver GUI toolkits, visual builder Macromedia/Adobe Flash, Director Phidgets 2005 Einführung in Benutzerschnittstellen
12
Einführung in Benutzungsschnittstellen
& Mensch-Maschine Kommunikation 20 Juni
13
Mensch-Maschine-Kommunikation (HCI)
die Benutzer des Programms andere Personen in der Organisation Maschine der Computer auf der des Programm läuft oft auf Clients & Servern verteilt So far you have probably studied lots about Computers, but little about Humans and Interaction. This course will concentrate on how these three areas come together. Kommunikation (Interaction) Benutzer teilen dem Computer mit was sie wollen der Computer kommuniziert Resultate 2005 Einführung in Benutzerschnittstellen
14
HCI Ansatz zum Design von Benutzerschnittstellen
Benutzerschnittstelle := Teil der Anwendung der es Benutzern erlaubt mit dem Computer zu interagieren Aufgabe/Ziel Design Give Examples of Tasks: high level: - writing a paper - drawing a picture low level: - copying a word from one paragraph to another - coloring a line Technologie Mensch 2005 Einführung in Benutzerschnittstellen
15
Einführung in Benutzerschnittstellen
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) Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software Nearly 25% of all applications projects fail. Why? overrun budgets & management pulls plug others complete, but are too hard to learn/use Solution is user-centered design. Why? easier to learn & use products sell better can help keep a product on schedule finding problems early makes them easier to fix! training costs reduced 2005 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 In this course you will wear the hats of many of these specialists. 2005 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 2005 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ührung Implementierung Kunden: - Rollen (wer) - Ziele (was) - Kontext (Szenarien) Marketing: - Business Prioritäten - Botschaft Technologie - Produkte - Architektur Design: - Führende/Konkurrenz Technologien Teamarbeit zur Umsetzung des Designs Evaluation mit dem Kunden Storyboard Beurteilen & Iterieren Design Definition: - Design Problemstellung - Zielbenutzer Rollen (wer) - Zielbenutzer Ziele (was) - Designkonzept Proposal: Demos/ Lo Fi Prototypen (wie) Spezifikation: Hi Fidelity, Verfeinertes Design - Basierend auf Benutzerfeedback - basiert auf Produkt Realitaet - Verbesserte Designbeschreibung basierend auf Folie von Sara Redpath, IBM & Thyra Trauch, Tivoli 2005 Einführung in Benutzerschnittstellen
19
Einführung in Benutzerschnittstellen
Iteration In jeder Phase! Design Prototype Evaluieren 2005 Einführung in Benutzerschnittstellen
20
Einführung in Benutzerschnittstellen
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 high-level Ideen… 2005 Einführung in Benutzerschnittstellen
21
Web Design Representationen
Site Maps Storyboards Designers create representations of sites at multiple levels of detail Web designs are iteratively refined at all levels of detail Schema Mock-ups 2005 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 2005 Einführung in Benutzerschnittstellen
23
Benutzbarkeit Anforderungen
Anforderungen früh abstecken, dienen später um Fortschritt zu bewerten Anforderungen haben tradeoffs priorisieren Beispielziele Erlernbar mit oder ohne Anleitung Effizient Aufgabe schnell bewältigen Robust minimale Fehlerrate Benutzer beim Weitermachen helfen Angenehm hohe Zufriedenheit 2005 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 ` 2005 Einführung in Benutzerschnittstellen
25
Aufgabenanalyse & Contextual Inquiry
Beobachte existierende Arbeitspraxis Erzeuge Beispiele and Benutzungsszenarien ? 2005 Einführung in Benutzerschnittstellen
26
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… Fantasy Basketball 2005 Einführung in Benutzerschnittstellen
27
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 ESP 2005 Einführung in Benutzerschnittstellen
28
Lehrinhalte Programming
Toolkits und Widget Bibliotheken UI Builders Eventmodelle Input / Output Modelle Model-View Controller etc. Here we will focus on understanding the constraints of development 2005 Einführung in Benutzerschnittstellen
29
Einführung in Benutzerschnittstellen
Kursformat HCI 1 HCI 1 Vorlesung Praktikum & Hausübungen 2005 Einführung in Benutzerschnittstellen
30
Einführung in Benutzerschnittstellen
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 Benutzertest Abschließende Präsentation 2005 Einführung in Benutzerschnittstellen
31
Einführung in Benutzerschnittstellen
Mehr Beispiele vom Herbst 2004 2005 Einführung in Benutzerschnittstellen
32
Einführung in Benutzerschnittstellen
Verkehrsinfo Stau-Information (Ampelmetapher) Alarm Icons Lautstärke Scrollen Hörbare Benachrichtigungen Zoom Auf Fahrer zentrieren Position des Fahrers Voreinstellungen (Radiometapher) 2005 Einführung in Benutzerschnittstellen
33
Einführung in Benutzerschnittstellen
Verkehrsinfo TabletPC Phidgets Kartenmaterial Farbe, Klebstoff, Holz, Hammer Viele Stunden programmieren / Einatmen giftiger Dämpfe = 2005 Einführung in Benutzerschnittstellen
34
Einführung in Benutzerschnittstellen
Prototyp 2005 Einführung in Benutzerschnittstellen
35
Einführung in Benutzerschnittstellen
2005 Einführung in Benutzerschnittstellen
36
OTTO: Ortsbasierte Photoverwaltung
Hierarchische Navigation (AKA bread crumbs) Vorwärts and Rück- Navigation Kartenansicht Albumsansicht 2005 Einführung in Benutzerschnittstellen
37
Einführung in Benutzerschnittstellen
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 2005 Einführung in Benutzerschnittstellen
38
Bus buddy—Design Evolution
2005 Einführung in Benutzerschnittstellen
39
Einführung in Benutzerschnittstellen
2005 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 2005 Einführung in Benutzerschnittstellen
41
Zusammenfassung: Lerninhalte
Programmierung von Benutzerschnittstellen... ...und die vielen Schritte davor Entwurf Rapid Prototyping Benutzerstudien Iteration Ergebnisse präsentieren Teamarbeit 2005 Einführung in Benutzerschnittstellen
42
Einführung in Benutzerschnittstellen
ENDE 2005 Einführung in Benutzerschnittstellen
43
Einführung in Benutzerschnittstellen
Backup slides 2005 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 2005 Einführung in Benutzerschnittstellen
45
Einführung in Benutzerschnittstellen
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 2005 Einführung in Benutzerschnittstellen
46
Einführung in Benutzerschnittstellen
Benotung Kombination aus Mittelklausur (15%) Endklausur (20%) Einzelprojekt (20%) Gruppenprojekt (40%) Demos/Präsentation (Gruppenanteil) Projektreport and Übungen Mitarbeit (5%) 2005 Einführung in Benutzerschnittstellen
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.