Das AIDA Prinzip für Kaufentscheide erklären

UI2 ClosedBook Fragen
LE1: User Centered Requirements Engeneering
UCD „Phasen“ nach UE-Kompakt aufzählen und erklären können
-
-
-
-
Analyse
o Benutzer Beobachtung
o Workshops
o Die Anforderungen der Benutzer analysieren und aufnehmen
Modellieren
o Modellierung eines Low-Fi GUI Designs
o Erstellen der Persona
o Erstellen der Szenarios
Spezifikation
o Spezifizierung der Use Cases und der Feature List
o Erstellen des Requirements Documents
o Erstellen eines detaillierteren GUIs
Realisierung
o Erstellen des internen Designs
Evaluation
o Prüfen des GUIs
o Prüfen der Requirements mit Benutzern zusammen
UCD „Ebenen“ nach Garrett aufzählen und erklären können
-
-
-
Oberfläche
o Thematik der Schriften und Farben
o Thematik der Gestaltung der Oberflächen
Raster
o Layout und Grid des GUIs
Struktur
o Navigation
o Konzeptionelles Modell
o Informationsarchitektur
Umfang
o Definition der Features und Funktionen
Strategie
o Definition der Zielgruppe
o Definition des Wertes und der Ziele
Wie unterscheidet sich „User-Centered“ Requirements Engineering von einem
„standard“ Requirements Engineering (z.B. nach Buch „Basiswissen Requirements Engineering“)?
Das User-Centered RE ist eine spezielle Ausprägung des normalen RE. RE ist eine etablierte SoftwareEngeneering Disziplin, welche auch verschiedenste Zertifizierungen hat. User-Centered RE enthält
1
vertiefte Behandlung von Methoden zur Benutzer-zentrierten Erhebung und Modellierung von
Anforderungen. Das Management dieser Anforderungen steht dabei nicht im Fokus.
Gegebene Ermittlungstechniken für Anforderungen erklären können und deren Vor- und Nachteile
aufzählen können
-
-
-
-
Befragungstechniken
o Interview
o Fragebogen
o Es wird versucht, eine möglichst genaue Aussage über die Anforderungen des
Stakeholders zu kriegen
o Vorteile:
 Schnell
 Grosse Masse von Befragungen in kurzer Zeit möglich
 Engineer gibt Fragen vor
o Nachteile:
 Der Befragte muss sein Wissen explizit ausdrücken können
 Anliegen der Stakeholder können verdrängt / vergessen /vernachlässigt
werden
Kreativitätstechniken
o Brainstorming
o Perspektivwechsel
o Analogietechnik
o Vorteile:
 Entwicklung der innovativen Anforderungen
 Festlegung einer ersten Vision eines neuen Systems
 Ermittlung der Begeisterungsfaktoren
o Nachteile:
 Eignet sich nicht dazu, detaillierte Anforderungen an das Systemverhalten
herauszuarbeiten
Dokumentenzentrierte Techniken
o Systemarchäologie
o Perspektiven basiertes Lesen
o Wiederverwendung von Anforderungen
o Vorteile:
 Wiederverwendung von Lösungen und Erfahrungen bestehender Systeme
 Im Falle der Ablösung eines Altsystems stellt diese Technik sicher, dass die
gesamte Funktionalität des Altsystems identifiziert werden kann
o Nachteile:
 Muss mit anderen Ermittlungstechniken kombiniert werden, um die
Gültigkeit zu verifizieren
Beobachtungstechniken
o Feldbeobachtung
o Apprenticing
o Vorteile:
2

-
Gute Technik, wenn die Fachspezialisten wenig Zeit / Fähigkeiten zur
Vermittlung ihrer Anforderungen haben
 Potenzielle Fehler / Risiken in Prozessen können so aufgedeckt werden
 Das Wissen wird aktiv vermittelt
 Gut für detaillierte Anforderungen
o Nachteile:
 Prozesse sollten kritisch Hinterfragt werden, da ansonsten veraltete
Techniken weiterverwendet werden
 Eignet sich nicht für völlig neue Prozesse
Unterstützende Techniken
o Mindmapping
o Workshops
o CRC-Karten
o Audio- und Videoaufzeichnungen
o Use-Case-Modellierung
o Prototypen
o Vorteile:
 Ergänzend zu anderen Ermittlungstechniken
 Gleicht Schwächen der anderen gewählten Techniken aus
o Nachteile:
 Alleinstehend nicht aussagekräftig
Unterschiedliche Anwendungsgebiete von Workshop, Stakeholder Interview und Contextual
Inquiry an einem Beispiel erklären können
-
-
-
Workshop:
o Gut zum: Meinungen sammeln, Lücken finden, Konsens herstellen, Kreativität,
Gruppengefühl
o Gefahr: Group Thinking, Over-Powering
o Notwendig: Stakeholder einladen, vorinformieren und moderieren
Interview
o Gut zum: Datenpunkte sammeln, Champions finden
o Gefahren: Einzelfälle, Ausbilden statt lernen, Theorie statt Praxis
o Notwendig: Auswählen, vorinformieren, Fragekatalog, Hypothesen, konkrete Fälle
Contextual Inquiry
o Gut zum: Abklärung der Nutzung eines Features bzw. eines Requirements, eignet sich
um die zeitliche Nutzung darzustellen
o Gefahr: Benutzer denken immer, dass sie alles unbedingt benötgien,
Interpretationen können falsch sein
o Notwendig: Regelmässige Sitzungen und Befragungen
Phasen einer Benutzerbeobachtung aufzählen können
-
Benutzerinterview
Abgleich mit Benutzertemplates
Mit ähnlichen Persona gruppieren
3
Kategorien von Resultaten aufzählen können welche bei der Benutzerbeobachtung / Interview
erhoben werden sollte: wie strukturiert man die Resultate aus Benutzerbeobachtungen und
Interviews, welche Kategorien sind nützlich?
Schlicht weg kei ahnig… so en scheiss. Annahme:
-
Kurz-Profil
Arbeitskontext
Arbeitsstil
Verpflichtungen
Persönlichkeit
Kenntnisse & Lernverhalten
„Pain Points“
Nützliche Kategorien:
-
Arbeitskontext
Kenntnisse
„Pain Points“
Vorgehen bei der Interpretation Session erklären können und die Rolle des Affinity Diagramms
erklären können
1. Interview rekapitulieren im Team (mind. 2 Teilnehmer)
2. User-Profil erstellen (Eigenschaften, Kontext)
3. „Einsichten“ und Benutzeransichten (Zitate) auf Post-IT schreiben
Affinity Modelling
1. Einsichten Post-IT von mehreren Interview zusammentragen
2. Gruppieren nach Zielen, Ansichten, Eigenschaften, Strategien, Regeln, Rollen, Breakdowns,
Design Ideen
3. Erst nach dem zweiten Schritt die Gruppen beschriften
Rolle Affinity Diagramm: Übersicht über die verschiedenen Kategorien aufzeigen. Zusammentragen
von Ideen
Wie werden im UCD die Resultate des Affinity-Diagramms weiterverarbeitet?
-
Zur Ausarbeitung der Persona
Definition des Feature-Katalog
Definition eines groben GUI
Szenarien erstellen
Begründen können, warum die Erfassung von Benutzerzielen besonders bei der Neuentwicklung
von Systemen so zentral ist
Aufgrund der Benutzerziele werden die Soll-Szenarien definiert. Diese stellen die zentrale
Anlaufstelle für das System dar, da die Features und Funktionalitäten auf diesen Soll-Szenarien
aufbauen.
4
Begriff der „Verhaltensvariable“ (Behavioural Variable) im Kontext der Entwicklung von Personas
erklären können
Verhaltensvariablen sind Eigenschaften einer Persona. Beispiele: Alter, Krankenversicherung ja/nein,
gute Kenntnisse im Internet.
Auf diese Variablen werden die interviewten Personen abgebildet. Beispiel: Gina ist 22 Jahre alt und
wird deshalb als eher jung klassifiziert.
Diese Variablen sind eine Klassifizierung nach verschiedenen Eigenschaften
Unterschied Personas und Use Case Actors und Benutzerprofil erklären können
Ein Use Case Actor ist eine Klasse von Benutzern. Sie stellt eine Gruppe dar und enthält keine
Informationen über die Personengruppe. Eine Persona ist eine Beschreibung einer Person mit
verschiedenen Informationen wie Kenntnissen oder Pain-Points. Persona stellen eine homogene
Benutzergruppe dar.
Unterschied UCD-Szenarios und Use Cases und User Stories erklären können.
UCD-Szenarios erzählen eine Geschichte à la: Der Kunde Fredi Müller betritt den Laden und bestellt
sich ein Gipfeli und die Tageszeitung….
Ein Use-Case beschreibt eine einzelne Aktion: z.B. Gipfeli zubereiten.
User Stories sind Kurzbeschreibungen von Use Cases.
Unterschied UCD-Ist-Szenarien und UCD-Soll-Szenarien erklären können.
Ist Szenarien beschreiben wie die Situation jetzt ist, Soll Szenarien wie es sein soll
Schlechtes Frageverhalten in einem Benutzerinterview/Benutzerbeobachtung identifizieren
können und einen Verbesserungsvorschlag machen können.
- Fragen betreffen keinen konkreten Fall.
- Fragen Fokussieren sich auf Episoden welche mehr als 3 Wochen alt sind.
- Es wird nicht nach konkreten Situationen gefragt.
- Verstandene Informationen werden nicht zusammengefasst.
- Antworten des Befragten nicht schriftlich (od. Audio/Video) festgehalten.
Schritte bei der Auswertung von Benutzerinterviews aufzählen und erklären können
(Interpretation & Affinity).
Interpretations-Sitzung:
–  Interview rekapitulieren im Team (min. 2 Teilnehmer)
–  User-Profil erstellen (Eigenschaften, Kontext)
–  „Einsichten“ und Benutzeransichten (Zitate) auf Post-Its schreiben
Affinity Modelling:
–  Einsichten Post-Its von mehreren Interviews zusammentragen
–  Gruppieren nach Zielen, Ansichten, Eigenschaften, Strategien, Regeln, Rollen, Breakdowns, Design
Ideen
–  Erst im 2. Schritt Gruppen beschriften
5
Für einen gegebenen Projektkontext Stakeholder, Benutzer, Projektsponsor, Kunde identifizieren
können.
Als Stakeholder (engl.) wird eine Person oder Gruppe bezeichnet, die ein berechtigtes Interesse am
Verlauf oder Ergebnis eines Prozesses oder Projektes hat. -> Benutzer, Kunde etc. sollte klar sein…
Was sind Blue Sky und Happy Path Szenarios, sind dies Ist oder Soll Szenarien und warum genügen
diese nicht bei der Spezifikation von interaktiven Systemen?
Blue Sky Scenario: Das Blaue vom Himmel. z.B. ich drücke einen Button und es wird automatisch alles
gemacht…
Happy Path Scenario: Alles gelingt perfekt.
Wissen welche Rollen sich nach dem „Microsoft Solution Framework for Agile“ mit der Rolle „User
Experience“ nur schlecht vereinen lassen.
Schlecht:
Nicht empfohlem:
Architecture, Program Management
Development
LE2: Design for Collaboration
Warum ist es wichtig im Design Prozess in einem Betrieb „Sneaker Netze“ und menschliche Hubs
zu identifizieren?
Diese Kommunikationskanäle sind vielfach inoffiziell und oft nicht allen bekannt. Werden diese
ausser Acht gelassen so wird ein unkontrollierter Informationsfluss entstehen. Gefahr wenn
Kommunikation zu formell oder explizit sein muss.
Die zwei ersten „Grudin CSCW Challanges“ aufzählen (und erklären) können und für eine Beispiel
Anwendung mögliche Probleme ableiten können.
- Challenge 1: Disparity between who does the work and who gets the benefit:
=> In einer Gruppe müssen immer einige mehr Arbeit leisten um Informationen zur
Verfügung zu stellen, von welchen dann alle anderen Profitieren können
- Challenge 2: Critical mass
=> Die meiste Groupware ist nur nützlich wenn ein hoher Anteil Benutzer das selbe System
nutzt. So macht z.B: eine Terminfindungstool keinen Sinn wenn es fast niemand benutzt. Wenn diese
kritische Masse nicht erreicht wird, ist ein Projekt zum Scheitern verurteilt.
Was besagtdas WYSIWIS Prinzip im Zusammenhang mit Groupware? Eine Anwendung auf die
Einhaltung des WYSIWIS Prinzips analysieren.
What you see is what I see. A term used for groupware interfaces that guarantee that users see the
same thing at all times. This design principle says that it is easiest for users to coordinate when they
are using the same interface.
LE3: Hardware, Input & Output
Wie lange ist es gegangen bis sich die Maus vom Forschungsprototyp bis zum Produkteinsatz
entwickelt hat (auf 5 Jahre genau)
17 Jahre?? => Maus erfunden: 1964, Angewendet im Xerox Star: 1981 => Aber war das der erste?
6
Wie lange ist es gegangen bis sich die Gesten-Steuerung vom Forschungsprototyp bis zum
Produkteinsatz entwickelt hat?
Hr. STOLZE => Vermutlich in Jonny Lee’s Video welcher nicht mehr online ist.
Lee’s Formel nutzen können um zu erklären warum sich eine Technologie nicht durchsetzt.
Value of UX Technology = Psuccess * Benefit – Pfailure * Cost
Was war das MEMEX System und wann wurde die Idee entwickelt? (auf 10 Jahre genau)
Der Memex (Memory Extender; dt. etwa: Gedächtnis-Erweiterer) ist ein als möglichst
menschengerechtes, einfach bedienbares Wissensfindungs- und Verwertungssystem konzipierter
Kompakt-Analog-Rechner, der 1945 von Vannevar Bush im Artikel As We May Think (Atlantic
Monthly, Juli 1945, S. 101 ff.) fiktiv vorgestellt wurde. Das Prinzip lag auch der bereits 1931 in den
USA patentierten Statistischen Maschine von Emanuel Goldberg zugrunde.
Seit wann gibt es die QWERTY Tastatur? (auf 30 Jahre genau)
Seit 1878 (von der Schreibmaschine Remington No. 2)
Begriffe: WIMP; WYSIWYG erkären
-WIMP: "windows, icons, menus, pointer" => WIMPs sind GUIs welche die genannten Elemente
verwenden. So sind zwar alle WIMPs auch GUIs, aber nicht umgekehrt. (z.B. Mobiltelefone meist
keinen Pointer und Fenster)
Nenne 3 Eigenschaften von heutigen PCs, welche schon im Xerox Star unterstützt wurden. Wann
wurde das erste Xerox Star System herausgegeben?
- Maus
- WIMPs (oben beschrieben)
- Email
- Spreadsheet
- WYSIWYG Textverarbeitung
- Ethernet
Was gab es eher: Tastatur oder Bildschirm?
- Tastatur 1868
- Bildschirm PC ca in den 50er Jahren und als Schwarzweisfernseher seit 1926
Was gab es eher: Maus oder Trackball?
Trackball gab es 16 Jahre früher (Maus: Entwickelt ca. 1968 (pat. 1970); Trackball seit 1952)
Was gab es eher: Maus oder Lichtgriffel?
Lichtgriffel (Lichtgriffel: Entwickelt ca. 1949-55 Kommerziell seit ca. 1968; Maus: Entwickelt ca. 1968
(pat. 1970))
Seit wann gibt es (bezahlbare) LCD-Bildschirme; was gab es voher (Nachteile)?
Voher gab es CRTs (Röhrenbildschirme) die aber viel grösser waren und mehr Strom benötigten.
Bezahl ist definitionssache, aber zwischen 2000 und 2003, eher bei 2003.
Unterschied (aus Benutzersicht) von resistiven und kapazitiven Touch-Bildschirmen erklären
können
Resistiv
7
+ Finger und Stift, Multi Touch
- Druck notwendig
Kapazitiv
+ Angenehm in Bedienung (schnell)
- Teuer, nur kleine Displays, kein Stift
Gegebene Hand Gesten benennen können.
Pixel von HDTV nennen können.
1920 × 1080 Pixel bzw. 1280 × 720 Pixel
Was ist ein haptisches Display? (Beispiel nennen können)
Als haptische Wahrnehmung (griech.: haptόs „fühlbar“, haptikόs „zum Berühren geeignet“)
bezeichnet man das aktive Erfühlen von Größe, Konturen, Oberflächentextur, Gewicht usw. eines
Objekts durch Integration aller Hautsinne und der Tiefensensibilität.
-> evt. iPhone5 (apple hat patent eingereicht)
Was ist ein ambient? (Beispiel nennen können)
Ambient-Devices sind Geräte die Informationen anders anzeigen als ein Display. z.B. ein Armband das
beim Empfang eines Emails/SMS blink und/oder vibriert.
Beispiel: Philips Electronic Sensing Jewelry oder Nabaztag
LE4: Benutzereigenschaften: Wahrnehmen, Erinnern, Denken,
Handeln (Closed-Book-Part) [A.U.]
Erfahren haben:
Geschwindigkeiten der Pointer-Positionierung folgt Fitt’s-LAW, ach auf Touchscreens. Training und
Vorkenntnisse spielen eine grosse Rolle bei der individuellen Geschwindigkeit
Wissen/Können
Die verschiedenen Aussagen von Jeff Johnson (Designin with the Mind in Mind) erklären können
und ein konkretes Beispiel aus einem gegebenen Anwendungsbereich geben können:

We perceive what we expect
Perception = Erkenntnis / Auffassung
– Perception biased by experience
“Gewohnheitstier
– Perception biased by current context
– Perception biased by goals
–  Avoid ambiguity (Mehrdeutigkeit), be consistent, understand goals
8


Vision is optimized to see structure
Gestalt Principle: Proximity, similarity, continuity, closure, symmetry, usw…
–  Support Scanning (numbers), Visual hierarchy
–
Proximity (Nachbarschaft / Nähe) 
–
Similarity (Ähnlichkeit) 
–
Continuity 
–
Closure 
9









– Symetry 
Color vision is limited (Ability to discriminate colors; Guidelines)
– Beispiel:
Peripheral vision (Peripheres Sehen -> Man überschaut die eigentlich Elemente um sich einen
gesammteindruck zu verschaffen) (Methods of making messages visible?)
Attention is limited; Memory is imperfect (-> Folie)
– Implications of Short Term Memory Characteristics
– Implications of Long Term Memory Characteristics
Limits of Attention Shape Thoughts and Actions
– We focus on goals and pay little attention to our tools
– We use external aids to keep track of what we are doing
– We follow information "Scent"
– We prefer familiar paths
– Our thought cycle -> Norman Action Cycle video
– We often forget Cleanup steps
Recognition is Easy; Recall is hard (Implications for Authentication?)
We have three brains (implications?)
– Learning from experience is (usually) easy:
– Performing learned actions is easy
– Performing problem solving and calculation is hard
We learn faster if operation task-focused simple and consistent
– Concepts (objects) are easy to distinguish
– Object/Action matrix is simple
We learn faster when vocabilary is task-focused, familiar and consistent.
We learn faster if the risk is low
10

Real-Time Human Interaction Deadlines (-> ff)
– Hand-eye coordination tasks
– Feedback on click / display busy indicator
– Displaying progress, finishing unrequested operations
Welche Probleme in den Wahrnehmungsorganen stellen sich im Alter ein? Wie genau können
Aktionen im Alter ausgeführt werden?
 Reaktionszeiten -> Wird langsamer
 Sehen -> lässt ab 40 Jahren extrem nach (Vorallem in die Näche) / Der Lichtbedarf wird ab 30
immer höher /
 Hören -> Vor allem Probleme bei höheren Frequenzen / Ab 60 haben 27% einen Hörschaden
Andere Wahrnehmungen, die verwendet werden können





Gleichgewichts-Sinn
o Simulatoren
Geruchs-Sinn
o Olfactorcy Display
– Geruchsbücher
o z.B. Autos & Läden
Sound Design
o z.B. Auto
Touch Output
o Ultraschall Hologramm, Vibration, Spannung
Wann werden Bildfolgen zum Film? (fps)


Film 24 fps
Video meisst mir: 30 fps (NTSC = 60 Hz, Pal = 50 Hz)
Welche Update Raten sind nötig beim Maus-Tracking für gute Hand (Maus)/Augen -Koordination
Mouse tracking / Interactive Feedback: 50-150ms
Was ist Anthropometrie?
Anthropometrie ist die Lehre der Ermittlung und Anwendung der Maße des menschlichen Körpers
Hick‘s Law und Fitt’s Law: in grundlegenden Zügen erklären können

Fitt‘s Law:
11
o
Es besagt, dass die benötigte Zeit eine Zielfläche zu erreichen in einer Funktion
ausgedrückt werden kann. Analytische Vorhersage der Effizienz der
Mauspositionierung
o
o
o
o
o

a represents the start/stop time of the device  individuelle Konstante
b stands for the inherent speed of the device (slope)  individuelle Konstante
D is the distance
W is the width of the target measured along the axis of motion  Grösse des
Objekts
Hick‘s Law
o Zusammenhang zwischen Reaktionszeit und Anzahl der Wahlmöglichkeiten
o
o
o
b is a constant that can be determined empirically by fitting a line to measured data
n ist die Anzahl der Objekte, die zur Auswahl stehen.
Ein User Interface so umstrukturieren können, dass die Qualität bezüglich Fitt’s Law (oder Hick’s
Law) verbessert wird.
 Siehe LAWs oben
 In dem Objekte und Elemente besser platziert.
LE5: Evaluation, Usability Testing & Prototyping
Erfahren haben
Einen Usability Test durchgeführt haben. Hierbei die folgenden Elemente erarbeitet haben:
Definition der zu lösenden Aufgabe, bestimmen und einladen der Test-­­Personen, aufzeichnen
(Video) des Tests und Notizen, auswerten und dokumentieren des Tests, dokumentieren der Re-­­
Design Entscheide.
Wissen / Können
Einen Test entsprechend der Kriterien formativ/summativ und heuristisch/empirisch klassifizieren
können
Beschreibung der einzelnen Test unten
Drei Kriterien von Nielsen nennen können
12










Sichtbarkeit des System-Status
Enger Bezug zwischen System und realer Welt
Nutzerkontrolle und Freiheit
Konsistenz & Konformität mit Standards
Fehler-Vorbeugung
Besser Sichtbarkeit als Sich-erinnern-Müssen
Flexibilität und Nutzungseffizienz
Ästhetik und minimalistischer Aufbau
Nutzern helfen, Fehler zu bemerken, zu diagnostizieren und zu beheben
Hilfe und Dokumentation
Drei Kriterien von Schneidermann nennen können








Konsistenz
o Gleiche Schriften/Farben / Objekte an selben Orten / Einheitliche Wortwahl / usw.
Berücksichtige unterschiedliche Erfahrungen
Rückmeldungen auf Aktionen des Benutzers
o Z.B. eine MessageBox mit Dialog: OK hat geklappt.
Abgeschlossene Operationen
o Z.B. Einen „Status“ beim Einkaf. „ Artikel wählen > Warenkorb > Bestellung
Fehler verhindern
o Fehlerverhinderung ist besser als eine „kluge“ Fehlermeldung zu plotten
Einfache Rücksetzungsmöglichkeiten
o UNDO / REDO / usw.
Benutzerbestimmte Eingaben
o Der Benutzer sollte immer das Gefühl haben, die Anwendung steuern, kontrollieren
zu können. Starre Sequenzen von Aktionen, die unbedingt zu Ende geführt werden
müssen, sollten vermieden werden.
Geringe Belastung des Kurzzeitgedächtnisses
Drei Kriterien von ISO 9241--‐110 nennen können








Aufgabenangemessenheit
Selbstbeschreibungsfähigkeit
Steuerbarkeit
Erwartungskonformität
Fehlerrobustheit
Erweiterbarkeit
Individualisierbarkeit
Lernförderlichkeit
Unterschied Story Board vs. Wireframes


Story Board
o Ein Comic
o Beschriebt die Handlung/Interaktion mit einem User
Wireframes
13
o
o
Einzelne Bildchen der verschiedenen UIs der Anwendung
Beschreibt maximal die möglichen Interaktionen in diesem UI
Erklären können was bei verschiedenen Tests (Styleguide, Heuristische Evaluation, Usability Lab,
Eye Tracking, Papier Prototyping, etc.) passiert und unter welchen Umständen diese besonders
nützlich sind. Kosten, Zeiten Vorbedingungen nennen können.
 Styleguide
o Es wird (oft von einem Experten) geprüft wie weit man sich an die verscheidenen
StyleVorgaben halt.
 Heuristische Evaluation
o Überprüfen der Nielsen Kriterien (Siehe Oben)
 Usability Lab
o Ein meist video-überwachter Test, der zeigt, wie sich die DAUs angestellt haben
 Eye Tracking
o Es wird überwacht, welche Objekte und Texte das Auge angeschaut und gelesen hat.
 Papier Prototyping
Ein User muss gewisse Aufgaben im UI erfüllen. Das UI wird aber ausgedruckt. Ein Mitarbeiter legt
die verschiedenen erscheinenden Dialoge dem Tester hin.
LE 6: Visual & Web Design
Hue, Saturation, Brightness im Farb-Raum definieren können
???
Für eine gegebene Website beschreiben können, wie Benutzer beim Scannen, Skimmen und Lesen
von Web Inhalten unterstützt werden
Scannen – Akzente setzen:
 Headlines
 Schlüsselwörter, -bilder
 Links / Suchhilfen
 Wenig Fliesstext
 Menüs nach links ausrichten
Skimmen – Zusammenfassen:
 Kurze Absätze
 Listen / Tabellen
 Zwischenüberschriften
 Info-Grafik
Lesen – in die Details gehen:




Längere Seiten
Fliesstext
Format zum Ausdrucken
Font-Optimierung
o Fliesstext / Mengentext (Fokus: Lesbarkeit)
 Hohe Kleinbuchstaben
14
 Keine Serifen
 Standards nutzen: Verdana, Avenir
 Abgucken: Zeit, Instapaper, ReadLater
 Satz: Flattersatz
o Display Text / Titel (Fokus: Aufmerksamkeit, Dekoration, Brand)
 Serifen möglich
 Bold
Nicht alle Benutzer scannen und skimmen!

Relevante Information hervorheben
o Das Wichtigste zuerst
o Zwischenüberschriften
o Zusammenfassungen
o Nicht ablenken
o Schlüsselwörter
o Informative Grafiken
Die drei Methoden zur Erstellung von Farbpaletten nennen können
???
Wie viele Farben können sinnvollerweise genutzt werden, wenn eine Web-Seite auf Basis einer
monochromen Farbpalette erstellt werden soll?
Nicht mehr als 4 (gut: 2 + 1)
Was wird auf Englisch als „Display Text“ bei Web-Seiten beschrieben? Ist die Verwendung von
Serifen-Fonts hier möglich (Warum?)
Titel, Abschnittstart
Ja, Serifen-Fonts können hier verwendet werden, da die Lesbarkeit nicht zwingend gegeben sein
muss (es handelt sich ja nur um kurze „Texte“).
Bekannte Alternativen für Spaltenbreiten bei mehrspaltigen Page-Designs aufzählen können.
Der goldene Schnitt (1:1.618)
Design Grid
Fluid Design (AKA Liquid Design)
 Änderung des Layout/Font (CSS) je nach Fenstergrösse
Responsive Design (AKA Adaptive)
 Änderung des Layouts/Font (CSS) je nach Screengrösse & Orientierung
Unterschied von Fluid und Responsive Page Design. Was bedeutet Fluid und Responsive Design für
das Design Grid
Siehe vorhergehende Frage
Luc Wrobelewsky – Web Formular Best Practices: Gegebene Regeln erklären können: was ist gemeint,
warum wichtig, was passiert wenn nicht beachtet
15



Kaufen auch ohne Registrierung (Formular) ermöglichen
Form Typ beachten: New Data vs. Review
Nicht mehr als nötig fragen
o "Verschieben" von Eingaben (Optional -> später)
o “Smart" defaults
 White Space für Gruppierung
 Keine Ablenkung (besonders beim Checkout)
 Multi-Forms mit Fortschrittsanzeige, weiter und zurück
 Wenige Wechsel Maus<->Tastatur nötig
 Input Fields sichtbar
 Sinnvoller "Submit" Label (kein Clear)
Nennen Sie 4 der 12 Web-User Behavioural Variables nach Wirth
Nennen Sie 2 der 7 Web-User Typen nach McKinsey/Wirth




Surfer
Schnupperer
Schnäppchenjäger
Convenience-Orientierte
16
 Entertainment-Orientierte
 Kontakter
 Routiniers
Web Design Vokabular erklären könnnen: Fold, „Conversion Rate“, „Moderierte“ Links, Key Visuals,
Eye Catcher, Persistente Navigation, Primary Navigation, Bread Crumbs, Tagline
Fold
Teil der Webseite, welcher bei der Mehrheit der Besucher ohne zu Scrollen beim Laden dargestellt
wird
Moderierte Links
Links, welche durch Text noch beschrieben werden (nicht einfach nur eine Auflistung von Links)
Key Visuals
Schlüsselbilder, Symbole für verschiedene Inhaltsbereiche, Abgrenzung inhaltlicher Segmente,
Orientierung
Eye Catcher
Auffällige Elemente (Bewegung, Farben, etc.)
Persistente Navigation
Navigation immer am gleichen Ort, Site-ID oder Logo zeigt an, auf welcher Seite man sich befindet
und ist zugleich Link zu Home Page
Primary Navigation
Links zu den Haupt-Sektionen, Top-Level Hierarchie der Seite
Bread Crumbs
Trace Route, Weg zu Seite auf welcher man sich befindet
Tagline
Untertitel, meist ein Satz, welcher Seite beschreibt
Vorgegebene Instone Design Guideline erklären können, ein Beispiel der Nichteinhaltung in einem
Anwendungsbeispiel geben können









Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
17
 Help and documentation
Was versteht man unter Site Marketing, welche zwei grundsätzlichen Ansäte gibt es?
Bekanntheitsgrad einer Webseite steigern, Suchmaschinenoptimierung
Ansätze???
Was sind Web UI Patterns? Mindestens eine Library von Web UI Patterns nennen können.
Das AIDA Prinzip für Kaufentscheide erklären können
Das AIDA Prinzip beschreibt die Art, wie man einen Kunden dazu bringt etwas zu kaufen:
AIDA: „Attention“, „Interest“, „Desire“, „Action“
Attention
Die Aufmerksamkeit des Kunden wird angeregt.
Interest
Er interessiert sich für das Produkt. Das Interesse des Kunden wird erregt.
Desire
Der Wunsch nach dem Produkt wird geweckt. Der Besitzwunsch wird ausgelöst.
Action
Der Kunde kauft das Produkt (möglicherweise).
Richtige Moment, Vertrauen, Personalisierung, Navigation, Suche, Beschreibungen, Reviews,
Kundenreviews, Vergleiche, Coupons, Keine Ablenkung (One Click Checkout), Kein Porto, Sichere
Zahlmöglichkeiten, Persistente Shopping Cart, Wish-List, Auto-Refills/Abbo, A/B Testing
Mehr Infos unter http://de.wikipedia.org/wiki/AIDA-Modell
E-Commerce Vakabular erklären können: Was ist Up Selling / Cross Selling, Faceted Search,
Produkt-Konfiguration, Personalisierung, Collaborative Filtering? Konkrete entsprechende
Verbesserungsmassnahmen für einen Web-Shop vorschlagen können.
Up Selling
Wie bringt man den Kunden dazu mehr zu kaufen?
 Besseres Produkt
 Mehr vom gleichen (10er Pack)
 Package (2 Bücher)
 Add-Ons
 Service Vertrag
Cross Selling
Wie bringt man den Kunden dazu mehr zu kaufen?
18
 Verwandte Produkte
 Produkte welche häufig zusammen gekauft werden
Faceted Search
Der Grundgedanke von Faceted Search ist es, dem User eine Navigation durch mehrdimensionale
Kriterien zu erlauben, welche die zu durchsuchende Kollektion beschrieben. Eine Erweiterung der
klassischen Parameter-Denke, wo ich mit Drop-Down-Felder zu Beginn einschränken muss. Während
der Navigation reduziert sich die Treffermenge und kann mit einer — dann präziseren, weil
eingeschränkten — Volltextsuche verbunden werden. Dies lässt sich am besten am Beispiel von
Amazon veranschaulichen: Man sucht zuerst nach einem Buchtitel, kann dann die Suche aber auf
gewisse Themenbereiche, in welchen der Begriff auftaucht, einschränken.
Produkt-Konfiguration
???
Personalisierung




Wiedererkennen des Benutzers
Klassifikation beim Eintreffen
Session Tracking
Techniken:
o Wissensbasierte Personalisierung
 Wiedererkennen des Benutzers & Inhaltsanpassung Wunschlistenelemente,
Add-On-s, „Neu für Sie“
 Klassifikation des Besuchers & Inhaltsanpassung Produktkategorien, Preise,
Coupons
 Faceted & Feature-Based Search; Konfiguration
 Produktvergleiche aufgrund von Benutzereingaben
o Collaborative Personalisierung  Bestseller
 Ähnliche Produkte (Item to Item Recommendation)
 „Basket“ Recommendation
Collaborative Filtering
19
LE7: Darstellung und Navigation komplexer Daten: InformationsVisualisierung
Die Anwendbarkeit einer der vorgestellten Visualisierungen (Chernoff Faces Darstellung, Parallel
Coordinates, Spider Chart, Perspective Wall, Fischeye View, Hierarchical Tree Map, Sunburst) in
einem Anwendungsbereich überprüfen
Chernoff Faces (Analyse von Objekten mit n quantitativen Eigenschaften: Abbildung auf
Gesichtseigenschaften)
Die in Gesichtsform dargestellten Daten können, z. B. im Gegensatz zu Zahlentabellen, wesentlich
schneller von Menschen erfasst und verarbeitet werden. Die Ursache liegt in der beim Menschen
meist gut ausgeprägten Fähigkeit, winzige Details und Unterschiede in den Gesichtszügen (Mimik) zu
erkennen.
Parallel Coordinates (Analyse von Objekten mit n quantitativen Eigenschaften: (Poly-Line mit Werte ->
Y-Positionen)
Parallele Koordinaten (auch ||-Koordinaten; englisch parallel coordinate plot, PCP) sind eine
Methode zur Visualisierung von hochdimensionalen Strukturen und multivariater Daten. Anders als
im Streudiagramm, in dem zwei Koordinatenachsen rechtwinklig zueinander angeordnet sind,
verlaufen sie hier parallel und in gleichem Abstand. Jede Linie von links nach rechts entspricht dabei
einem Datenpunkt und wird durch einen Polygonzug mit Eckenauf den parallelen Achsen dargestellt.
Die Position der Ecke auf der i-ten Achse entspricht der i-ten Koordinate des Punktes.
20
Spider Chart
Perspective Wall
Platz sparen durch Distorsion
21
Fisheye View
Fokus wird auf Teil der Grafik gelegt.
22
Hierarchical Tree Map
Analyse hierarchischer Daten
23
Sunburst
Analyse hierarchischer Daten
24
LE8: Safety-Critical Systems
Typ-1 und Typ-2 Systeme unterscheiden können.
Typen von SCS Systemen
- Typ-0: System ohne User Interfaces
- Typ-1: Systeme mit Status-Anzeigen oder Warnung bei "Fehlfunktion"
– Bremsen, Insulinpumpe, Autopilot, ...
- Typ-2: Systeme mit "human in the loop"
– Stellwerke, Kontrollräume, Flugzeugcockpit,
Das Konzept des „Alarm Overloads“ an einem Beispiel erklären können
Z.B: werden in Eclipse oft zuviele Warnungen angezeigt. Man denkt sich ja die Warnungen sind OK.
Wenn dann aber plötzlich eine wichtige Warnung erscheint geht diese in den anderen unter. So
könnte das auch geschehen wenn im Auto dutzende Warnungen ständig angezeigt werden.
Für welche Systeme (grob) hat ma mit der FDA als Regulierungsbehörde zu tun?
FDA=>Food and Drug Administration, bei Geräten welche mit Essen und Medikamenten zu tun
haben????
25
LE9: Game Design
Was war das erste Computer-Game (in Spielsalons) und wann wurde es herausgegeben? (auf 10
Jahre genau)
1. Überhaupt auf Oszyloskop Missel Firing 1947
1. In Spielsalons „Computer Space“ Multi Directional Shooter von 1971
Was war das erste Heim-Computer Game und wann wurde es herausgegeben? (auf 10 Jahre
genau)
Atari-Pong TV 1975
Was war das erste Handheld Computer Game und wann wurde es herausgegeben? (auf 10 Jahre
genau)
Nintendo Game&Watch 1980
Erklären können: Was braucht es für ein „Flow“ Erlebnis und was ist das Resultat? Zu einem
beschriebenen Spiel das Konzept von Flow nutzen um zu erklären warum kein Spielspassaufkommt.
Beschreiben können was passieren würde wenn sich Flow einstellt.
Flow steht für das Gleichgewicht zwischen Langeweile und Überforderung.
Durch den Flow-Effekt:
- Unsere Sorgen um uns selbst verschwinden.
- Unser Gefühl für Zeitabläufe ist verändert.
- Wir haben das Gefühl von Kontrolle über unsere Aktivität.
- Intrinsische Motivation
Flow stellt sich ein wenn:
- Die Aktivität hat deutliche Ziele.
- Die Aktivität hat unmittelbare Rückmeldung.
- Wir sind der Aktivität gewachsen.
- Wir sind fähig, uns auf unser Tun zu konzentrieren.
Ebenen der Maslow Pyramide kennen und erklären können. Erfolg eines Games zur
entsprechenden Maslow Ebene zuordnen.
26
Erklären können was ein „Serious Game“ ist.
Ein “Serious Game” ist ein Spiel das primär für einen anderen Zweck als zur Unterhaltung entwickelt
wurde. z.B. ein Spiel welches Kindern spielend hilft die Zähne richtig und genügend lange zu putzen,
oder beim Wiedererlernen der Lauffähigkeit hilft.
LE10: Touch & Multitouch
Seit wann gibt es ein Multi-Touch (Forschung)?
1982
Multi-touch technology began in 1982, when the University of Toronto's Input Research Group
developed the first human-input multi-touch system. The system used a frosted-glass panel with a
camera placed behind the glass. When a finger or several fingers pressed on the glass, the camera
would detect the action as one or more black spots on an otherwise white background, allowing it to
be registered as an input. Since the size of a dot was dependent on pressure (how hard the person
was pressing on the glass), the system was somewhat pressure-sensitive as well.
Seit wann gibt es Touch und Multi-Touch Prototypen & Produkte (Auf 10 Jahre)?
Erste Touch Sensoren in 1970 (Elograph Tablet 1971, ELO AccuTouch 1977)
Multitouch Tablet 1985 (Prototyp)
Erster Multi-Touch Tisch 1991
Drei unterschiedliche Arten der Toucherkennung aufzählen können




Resistiv
o + Finger und Stift, Multi Touch
o - Druck notwendig
Akustisch
o + Grosse Displays, Preiswert
o - Kein Multi-Touch (aktuell);
o - Schlechte Lokalisierung
Optisch (IR) (FTIR, DI)
o + Grosse Flächen, Multi-Touch
o - Nur 2 Punkte, ungenau
Kapazitiv / Induktiv ( „Projected“)
o + Angenehm in Bedienung (schnell)
o - Teuer, kein Stift (noch), max 32 Zoll (3M)
27
Unterschied (und Vor/Nachteil) von resistiver kapazitiver und optischer Touch-Erkennung für eine
gegebene Anwendung beschreiben können
Vor/Nachteile siehe vorhherige Frage
Optisch:
28
Resistiv:
Kapazitiv:
Was sind die Aufgaben eines Multi-Touch Frameworks? (2 Aufgaben CB nennen können, OB alle
erklären können)






The location of the fingertip (2D vector)
Direction from the fingertip towards the palm (2D vector)
Age of the tip (integer)
Unique identifier of the fingertip (integer)
Unique identifier of the hand where this finger belongs (integer)
Fingers that are part of the hand (list of finger identifiers)
29








Palm location (2D vector)
Age of the hand (2D vector)
Unique identifier of the hand (integer)
Marker center(2D vector)
Rotation of the marker (floating-point value)
Age of the marker (2D vector)
Unique identifier of the marker (integer)
Marker code value (integer)
Zwei Gestures nennen können
30
Was ist Inertia?
Inertia ist beschreibt das Trägheitsprinzip z.b. „Noch weiter
rutschen“
LE11: Design Mobiler Anwendungen
Wichtigkeit von Mobile Design belegen können: Wie viel % der CH Bürger nutzen wöchentlich
Internet, wie viele davon mobil (2010)
Minimum Grösse von Touch Targets
Mindestens 9mm
31
Herausforderungen im Mobile Design nennen können und Lösungsansätze skizzieren können
(screen- Grösse, Erreichbarkeit mit Touch, Navigation, Gesten, Benutzer-Mobilität/Kontext,
Ressourcen-Knappheit) (CB: 2 Stück)
Screen Grösse: Platzknappheit durch eingeschränkte Erreichbarkeit verstärkt
Screen Grösse: Übersicht verbessern mit Übersichtseiten + Fokus & Kontext + 2D




Problem
o Verringerter physischer Platz soll durch erweiterten virtuellen Platz wettgemacht werden.
Lösungen
o Scrolling / Panoramic Applications
o Multiple Pages
o Hierarchische Navigation
Resultierendes Problem
o Verringerte Übersicht
Lösung
o Übersichtsseiten
o Übersichtselement (Fokus & Kontext; Halo)
o Animation (2 D Layout)
Gestensteuerung:



Wenige Gesten sind etabliert
Wie bei GUI D&D und Right-Click: Es sollte auch immer ohne Geste gehen(z.B. Swipe to Delete für
Advanced Users, sonst "Edit")
Es gibt kein "Hover" und kein "Right Click"(aber „touch-and-hold“: auch schlecht)
32
Screen Grösse: Mobilanwendungen Design „Portierung“ von „kleinen Aufgaben“







Optimale Anzahl "Features" einer Mobile App ist 1 (+2)(Achtung Validierte Szenarios für Install, Value,
Re-Use)
Statt vollständiger Portierung das Zusammenspiel von Desktop &
Mobilanwendung planen:
o Synchronisation
o „Fluid Interfaces“ (das UI zum Mitnehmen)
o Nur bestimmte Aufgaben auf dem Mobilgerät
Mobilgerät als Fernsteuerung
Mobilgerät als Recorder mit Nachbearbeitung am Desktop
Mobile Beamers & Mobile Keyboards als letzte Option
Ratschlag für Web-Design: „Mobile first“(+ Fluid / Reactive Layout)
Kontext Mobilität als Herausforderung:







Nutzer in „gefährlichen“ (Ressourcen limitiert)
Situationen
Nutzer in sehr lauten oder sehr leisen Situationen
Nutzer im hellen Licht, ohne Licht, im Regen, ...
Nutzung im „Hoppla“ Modus
o Regelmässige Erinnerung an App nötig
o Schnelles Resultat nötig
o Geringe Aufmerksamkeit und Unterbrüche
o Lange nicht gebraucht oder erstes mal(Grossteil Apps weniger als 1x pro Woche genutzt)
Sehr unterschiedliche Länge der Nutzung
Variable Datenraten
Kontext „Location Matters“: Mobilität als Chance:


Location-Based Services liefern kontextrelevante Informationen
– GPS
– WiFi Zellen
– Umgebungsgeräusche
– Bilderkennung
– Sensoren (z.B. Schrittsensoren)
Informationen über
– Points of Interest (Gebäude, Wege, …)
– Notizen (finden und machen; eigene und andere)
– Freunde (zB. FourSquare, DokoDare-Kaywa)
Ressourcen-Knappheit:





Bildschirmplatz
Power:
Batterielebensdauer für Telefon
Processing-Power
– Spracherkennung?
– Bilderkennung?
– Animation?
Netzwerkverbindung / Bandbreite
33


Wechselnde Kosten und Zeiten für Downloads
Gewicht / Zusatzgeräte
Wie kann sinnvoll der viertuelle Platz auf Mobile-Geräten vergrössert werden?



Scrolling / Panoramic Applications
Multiple Pages
Hierarchische Navigation
Was können Mobilgeräte besser als Desktops
LE12: Usage Centered Design Constantine & Lockwood
Welche Modelle werden beim Design nach Constantine eingesetzt



Role Model
Task Model
Content Model
UCD Role Model:
Alle Elemente eines UCD Role Models benennen können
34
Unterschied User Role & User Actor
The term "actor" is used in object-oriented software engineering, the Unified Process, and in UML.
An actor can be any external user, including other systems; in usage-centered design, our interest is
in just the human users. In UML and the UP, an actor is defined as a role played by a user, but this
verbal legerdemain can lead to confusion. Just as it is important not to confuse screen actors with
the characters they sometimes play, so it is vital in user interface design to distinguish the roles in
relation to a system from the actual people who may play them. To avoid confusion with UML
terminology, we call the actual person who plays a particular user role the "role occupant." We use
the term "system actor" to refer to the non-human actors interacting with a system.
Unterschied UCD User Actor zu Actors in UP-Use Cases & HCDI Personas
Personas are a variation on user roles popularized by Alan Cooper. Rather than abstracting the
essential features of a relationship, personas are described as if they were real, specific persons, with
personality, detailed history, and complete background. Although constructing the character of a
persona can be a fun exercise, the concrete detail can obscure features of the underlying role that
are essential for good design. Descriptions of actual users or representative personas can be a
starting point for role modeling, but good design is best served by first describing roles in the
abstract. Selected roles can then be "fleshed out" as personas if this is desired.
35
UCD Task Model
Alle Elemente eines UCD Task Models benennen können
36
UCD Content Model
Alle Elemente eines Content Models benennen können
37