50
1 Interface and Interaction Design – Übungsfragen (2012/2013) Hinweis: Selbst formulierte Übungsfragen zum Lernen; die Fragen kommen nicht in dieser Form zur Prüfung und orientieren sich auch an keinen alten Prüfungsfragen! BLOCK 2: Grundbegriffe 1. Was versteht man unter Interface and Interaction Design? Der Gesamtprozess, mit dem Art und Mittel der Interaktion zwischen Mensch und Maschine gestaltet werden. 2. Beispiele für Input und Output bei der Mensch-Maschine-Kommunikation? (Stichwort: Interaction Framework) Input: Bewegung, Sprache, Geräusche,... Output: Sehen, Hören, Fühlen,... 3. Beschreibe den Ablauf bei der Mensch-Maschine-Kommunikation. (Stichwort: Interaction Framework) - Artikulation (von Seite des Menschen) Input folgt - Durchführung (von Seite des Computers) - Präsentation (von Seite des Computers) Output folgt - Beobachtung (von Seite des Menschen) 4. Beschreibe die zwei Phasen beim Interaction Framework genauer (vgl. Frage 3) Ausführungsphase - Artikulation des Benutzers seine Absicht wird in die Eingabesprache des Systems übersetzt - Durchführung das System übersetzt die Eingabe in ausführbare Operationen - Präsentation das System stellt das Ergebnis der Operationen mittels einer Ausgabesprache für den Benutzer dar - Evaluierungsphase: - Beobachtung: der Benutzer interpretiert die Ergebnisse; vergleicht sie mit seinem ursprünglichen Ziel 5. Aspekte von gutem Interface and Interaction Design? - Dem Benutzer wird die Artikulation seiner Absichten möglichst einfach gemacht - Dem Benutzer wird die Beobachtung und Interpretation des Systemzustands klar und verständlich gemacht

Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

1

Interface and Interaction Design – Übungsfragen (2012/2013) Hinweis: Selbst formulierte Übungsfragen zum Lernen; die Fragen kommen nicht in dieser Form zur Prüfung und orientieren sich auch an keinen alten Prüfungsfragen! BLOCK 2: Grundbegriffe 1. Was versteht man unter Interface and Interaction Design? Der Gesamtprozess, mit dem Art und Mittel der Interaktion zwischen Mensch und Maschine gestaltet werden. 2. Beispiele für Input und Output bei der Mensch-Maschine-Kommunikation? (Stichwort:

Interaction Framework) Input: Bewegung, Sprache, Geräusche,... Output: Sehen, Hören, Fühlen,... 3. Beschreibe den Ablauf bei der Mensch-Maschine-Kommunikation. (Stichwort: Interaction

Framework)

- Artikulation (von Seite des Menschen) � Input folgt - Durchführung (von Seite des Computers) - Präsentation (von Seite des Computers) � Output folgt - Beobachtung (von Seite des Menschen)

4. Beschreibe die zwei Phasen beim Interaction Framework genauer (vgl. Frage 3) Ausführungsphase

- Artikulation des Benutzers � seine Absicht wird in die Eingabesprache des Systems übersetzt

- Durchführung � das System übersetzt die Eingabe in ausführbare Operationen - Präsentation � das System stellt das Ergebnis der Operationen mittels einer

Ausgabesprache für den Benutzer dar -

Evaluierungsphase: - Beobachtung: der Benutzer interpretiert die Ergebnisse; vergleicht sie mit seinem

ursprünglichen Ziel 5. Aspekte von gutem Interface and Interaction Design?

- Dem Benutzer wird die Artikulation seiner Absichten möglichst einfach gemacht - Dem Benutzer wird die Beobachtung und Interpretation des Systemzustands klar und

verständlich gemacht

Page 2: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

2

6. Was versteht man unter User Interface? Die Gesamtheit aller Mittel mit denen Menschen (die User, Benutzer) mit einer Maschine, einem Gerät, einem Computerprogramm oder einem anderen komplexen Tool (dem System) interagieren. 7. Was ist der Unterschied zwischen Tools und Interfaces? Ein Tool ist z.B. ein Drucker (also ein Gerät oder ganz allgemein gehalten: ein ‚Werkzeug’ zum Ausführen von Tätigkeiten) Ein Interface dient dazu, Tools zu bedienen (Maus, Bildschirm, Tastatur,… � selbst eigentlich auch wieder Tools??) 8. Was lässt sich über das Mentale Modell von Benutzern sagen? Benutzer entwickeln ein mentales Modell von der Funktionsweise eines Systems, wenn sie dieses sehen. Die Designer und Entwickler können Einfluss auf dieses mentale Modell nehmen, je nachdem, wie sie die Benutzerschnittstelle gestalten. Änderungen an der Benutzerschnittstelle können auch das mentale Modell der Benutzer über die Funktionsweise verändern. 9. Definition eines Computers? (der wissenschaftlich, nicht zum Auswendiglernen) Computer, noun: an electronic device which is capable of receiving information (data) in a particular form and of performing a sequence of operations in accordance with a predetermined but variable set of procedural instructions (program) to produce a result in the form of information or signals. – Oxford Dictionary 10. Beispiele für Computer im Alltag. Persönlicher Computer (z.B. Stand-PC), Spielkonsolen, Smartphones, etc. BLOCK 2: Designkonzepte 11. Was versteht man unter einem konzeptuellen Modell? Ein konzeptuelles Modell entspricht dem mentalen Modell, das jeder Benutzer von der Funktionsweise eines Systems hat. Modelle, die wir von einem System haben, erlauben es uns, seine Funktionsweise und Operationen mental durchzuspielen. Ein schlechtes Design kann zu einem falschen Modell beim Benutzer führen.

Page 3: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

3

12. Welche Designkonzepte lassen das mentale Modell eines Benutzers entstehen?

- Affordance - Constraints - Mapping - Konsistenz - Feedback

13. Wann ist ein Interface gut designed? (basierend auf einem Zitat) Wenn sich das Programm genau so verhält, wie der Benutzer es erwartet hat. 14. Eine entscheidende Schwierigkeit beim Design? (basierend auf einem Zitat) Wenn das Programmmodell des Entwicklers nicht trivial ist, entspricht es vermutlich nicht dem Modell des Benutzers. 15. Was ist Knowledge in the Head und was kann man darüber sagen? Unter ‚Knowledge in the Head’ versteht man das Erinnern an bzw. Merken von Funktionsabläufen, Dingen oder Ereignissen. z.B. Passwörter, Sozialversicherungsnummer, Geburtstage, Adressen, Telefonnummern?, Email-Adressen? Knowledge in the Head muss erlernt werden, ist dann aber sehr effizient. 16. Was versteht man unter Knowledge in the World und was kann man darüber sagen? Knowledge in the World ist Wissen, das aus der Welt abgeleitet werden kann. z.B. Terminkalender, Knoten im Taschentuch (als Erinnerung an etwas?), Labels und Zeichen, Natural Mapping (z.B. Bedienung einer Herdplatte) Knowledge in the World muss nicht erlernt werden, ist aber weniger effizient, da die externe Information gesucht und interpretiert werden muss. 17. Was ist der Unterschied zwischen Recognition und Recall? Recognition: Wir tun uns leichter, Dinge wiederzuerkennen/identifizieren, als sie uns zu merken � GUI: Dokumente, etc. werden graphisch dargestellt Recall: Man muss sich an Dinge erinnern bzw. dem Computer explizit sagen, was man will.

Page 4: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

4

18. Welche zwei Fehlerarten lassen sich unterscheiden? Slips

- treten trotz konzeptuellem Modell auf - dem Benutzer ist bewusst, was falsch gelaufen ist und wie der Fehler behoben werden

kann - Ursachen liegen in der Ausführung, z.B. überhastetes Arbeiten, Kontrollelemente

liegen zu nahe beisammen, es kam Unterbrechungen,... Mistakes

- treten wegen falschem konzeptuellem Modell auf - Benutzer weiß nicht, was falsch gelaufen ist und wie der Fehler behoben werden kann - Ursache liegt in der Planung, weil der Benutzer eine falsche Vorstellung von der

Funktionsweise hat 19. Was lässt sich über Affordance sagen? Zitat: „A situation where an object's sensory characteristics intuitively imply its functionality and use.“ Unter Affordance versteht man den Aufforderungscharakter, den ein Objekt aufweist. Das Erscheinungsbild eines Objekts sollte dem Benutzer vermitteln, wie es zu verwenden ist und welche Handlungsmöglichkeiten es gibt. z.B. Affordance von Türen: muss man drücken oder ziehen? Komplexe Dinge brauchen oft eine Anleitung, einfache Dinge sollten keine benötigen. Brauchen sie dennoch Erklärungen zu ihrer Funktion (z.B. über Labels, Instruktionen o.Ä.) ist das Design meist gescheitert. 20. Was lässt sich über Visuelle Affordance in Software sagen? Da Software Interfaces virtuell sind, weisen sie keine physische Affordance auf. Sie brauchen also eine „wahrgenommene Affordance“. Beispiele:

- Sichtbarmachen, ob ein Button geklickt werden kann. Allgemein: Buttons haben Aufforderungscharakter, gedrückt zu werden

- Sichtbarmachen, welcher Button (z.B. in einem Dialogfenster) gerade gewählt ist (OK oder Abbrechen?)

- Sichtbarmachen, ob und wie man scrollen kann - Sichtbarmachen, ob zu etwas noch mehr Information angezeigt/geladen werden kann

oder nicht (z.B. Bilder unter Google) - etc.

21. Was lässt sich über Constraints sagen? Constraints dienen dazu, mögliche Aktionen einzugrenzen, die an einem Interface ausgeführt werden können. Dadurch wird die Selektion von ungültigen Optionen verhindert.

Page 5: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

5

22. Welche drei Arten von Constraints gibt es?

- Logical Constraints - Cultural Constraints - Physical Constraints

23. Was versteht man unter Physical Constraints? Physische Objekte haben bestimmte Eigenschaften. Durch diese werden die Möglichkeiten an Bewegungen/Aktionen in der realen Welt eingeschränkt. z.B. Schlüssel kann nur auf bestimmte Weise ins Schloss gesteckt werden, ebenso kann ein USB-Stick nur auf bestimmte Weise angesteckt werden; andere Beispiele für Anschlüsse, die nur auf bestimmte Weise verwendet werden können, etc. 24. Was ist das Poka-Yoke-Prinzip? Nach dem Poka-Yoke-Prinzip wird etwas fehlersicher (in der Bedienung). Fehler werden dadurch vermieden, dass die Möglichkeiten eingeschränkt werden, wie eine Operation ausgeführt werden kann. 25. Was versteht man unter Prozess Constraints? Beispiel anhand eines Bankautomaten:

- Nach der Geldausgabe wird das Arbeitsgedächtnis gelöscht - Bankomat wirft zuerst die Karte aus und wartet, bis sie entnommen wurde. Dann erst

wird das Geld ausgegeben. � verhindert, dass Benutzer seine Karte vergisst 26. Was passiert bei mangelnden Constraints? (Beispiel) Mangelt es an Constraints, werden vermehrt Fehler möglich. Beispiel: Gibt es in einer Anwendung bei einer Datumseingabe keine Einschränkungen, kann es passieren, dass der Benutzer in einer falschen Form eingibt (2009 statt 09, 29.02.2012 statt 2012-02-29, etc.). 27. Was versteht man unter Mapping? Mapping beschreibt die Beziehung zwischen Kontrollelementen und ihrer Bewegung und den Resultaten in der Welt. z.B. Lift � welcher Knopf führt mich in welchen Stock? Herd � welcher Knopf wird welche Herdplatte anheizen? � Kontrollelemente sollen die Antwort auf solche Fragen deutlich machen z.B. beim Herd kann über korrekte Beschriftung der Knöpfe oder einer speziellen Anordnung der Herdplatten deutlich gemacht werden, welcher Knopf welche Platte steuert

Page 6: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

6

28. Was versteht man unter Konsistenz? Dinge, die gleich aussehen, sollen sich auch gleich verhalten. Dinge hingegen, die nicht gleich aussehen, sollen sich auch unterschiedlich verhalten. Vorteil von konsistenten Interfaces ist, dass sie einfacher zu erlernen und zu benutzen sind. Man unterscheidet zwischen

- Konsistenz innerhalb einer Applikation - Konsistenz innerhalb einer Plattform

29. Was sind Beispiele für Konsistenz?

- Entweder „Speicher“ oder „Sichern“, nicht beides verwendet - einheitliche Shortcuts - einheitliche Icons für gleiche Operationen (z.B. für Speichern immer das gleiche

Symbol) - einheitliche Syntax für Eingabe - einheitliche Anordnung von Elementen (z.B. in Dialogfenster OK- und Cancel-

Buttons immer gleich anordnen) 30. Was sind Beispiele für Inkonsistenz?

- Tastaturen: andere Anordnung bei z.B. (Mobil)Telefon und Fernbedienung als z.B. bei Taschenrechnern und Computertastatur

- Zweimal dieselbe Bezeichnung in einem Programm für unterschiedliche Operationen (z.B. in einem Tabellenprogramm: „Einfügen“ zum Einfügen eines kopierten Elements und „Einfügen“ zum Einfügen einer neuen Zeile)

31. Was lässt sich über Feedback sagen? Dem Benutzer sollte entsprechendes Feedback über den aktuellen Zustand des Systems geliefert werden. Unter Feedback versteht man das Zurücksenden von Information über

- das Ergebnis einer Aktion - darüber, dass eine Aktion ausgeführt wird/wurde - den aktuellen Status des Systems und welche Optionen möglich sind (Feedforward)

„Tote“ Screens führen zu Frustration beim Benutzer, da er nicht weiß, was das System macht bzw. in welchem Zustand es sich befindet. Beispiele für mögliches Feedback:

- Sound - Highlighting - Animation - etc.

Page 7: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

7

32. Welche Feedbackarten lassen sich unterscheiden?

- Feedback ergibt sich durch die physische Beschaffenheit eines Objekts, z.B. einer Tastatur: Anschlag ist hörbar und spürbar (= Geräusch und haptisch)

- Feedback kann sich aus keinen physischen Beschaffenheiten ergeben, daher muss es explizit designed werden, z.B. bei einem Touchscreen � Handytastatur: Visuelles Feedback (Tasten blinken auf), Tastenton über Lautsprecher, Vibration beim Tippen, etc.

33. Wann soll Feedback gegeben werden? Daumenregel:

- 0,1 Sekunde: kein spezieller Indikator notwendig (= es muss kein Feedback gegeben werden?)

- 1,0 Sekunde: User verliert das Gefühl von direkter, unmittelbarer Interaktion - > 10 Sekunden: User verliert Fokus, Status Indikator benutzen (= wenn eine Operation

mehr als 10 Sekunden in Anspruch nimmt, soll Feedback über den aktuellen Status gegeben werden?)

Im Endeffekt entscheidet man aber danach, „was sich richtig anfühlt“. 34. Welche Kriterien muss Feedback erfüllen?

- Feedback muss verständlich sein!

Negativbeispiele: numerische Fehlercodes, die er Benutzer nicht versteht; aussagenloses Feedback (The action could not be completed), fehlerhafte Übersetzung der Fehlermeldung in eingestellte Sprache, etc. - Feedback muss zum richtigen Zeitpunkt den Empfänger erreichen!

Negativbeispiel: Windows-Fehlermeldung an einem Bankautomaten

BLOCK 3: Usability Engineering 35. Was versteht man unter Usability? (Zitat) Usability eines Produktes ist das Ausmaß, in dem es von einem bestimmten Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zu erreichen.“ (ISO 9241-11)

Page 8: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

8

36. Was versteht man unter Usability Engineering? Usability + Software Engineering Eigenschaft, Ziel + Prozess, Methodik 37. Was sind Ansätze, um Usability in einen Software-Entwicklungsprozess zu integrieren?

- Usability-Experten in vorhandene Teams und Prozesse einbinden - Usability-Methoden zum vorhandenen Entwicklungsprozess hinzufügen - Entwicklungs-Prozess neu gestalten

38. Prozess bei Usability Engineering?

- Analyse: Konkurrenz, Requirements, Konkurrenz, Usage Data,... - Design: User Interface Design, Interaction Design, User Experience Design,... - Evaluierung: User Testing, Reviews, Experimente, Feldstudien,...

BLOCK 3: User Centered Design 39. Was lässt sich über die Kluft zwischen Designer und Benutzer sagen?

- Der Designer ist der Benutzer: Das ist dann der Fall, wenn man etwas entwirft, was man nur selbst verwenden wird. Ansonsten kann Designer nicht mit Benutzer gleichgesetzt werden, da Designer oft einen anderen Blick auf etwas haben als Benutzer.

- Der Designer versteht das Produkt: Design Team != typischer Benutzer! Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn

o Designer wissen zu viel über das Produkt o Designer sind zu geübt im Umgang mit Computern o Designer hängen zu sehr an ihren Entwürfen

- Design für eine fremde Domäne: Es kann sein, dass der Designer nicht mit der Domäne vertraut ist, für die er designed. Dabei ist zu beachten:

o User sind gut ausgebildet o Spezialisierte Aufgaben sollen ausgeführt werden o Experten-Wissen ist gefragt o es ist ein fremder Nutzungskontext gegeben

40. Was sind die Merkmale eines User Centered Design Prozesses?

- Früher Fokus auf Benutzer und deren Aufgaben

Designer müssen die Benutzer verstehen. Dabei hilft, sie zu beobachten (bei der Arbeit; schauen, was ihre Aufgaben sind, etc.). Benutzer müssen auch in den Designprozess eingebunden werden!

Page 9: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

9

- Empirische Beobachtung

Reaktion auf Szenarien und Storyboards beobachten. Später wird es wichtig, Prototypen zu erstellen und User testen zu lassen � Evaluation! - Iteratives Design Probleme tauchen überall im Designprozess auf und müssen gelöst werden. Deshalb ist iteratives (wiederholendes) Design wichtig!

BLOCK 3: Usability Engineering Prozesse 41. Schritte des Wasserfallmodells + Kritik?

- Requirements - Design - Code - Testen - Ausliefern

Kritik: Vorangehende Schritte werden wiederum durch User Feedback, Tests, etc. beeinflusst und müssen vielleicht noch mal ausgeführt werden 42. Was ist iteratives Design + Kritik?

Keine exakte Abfolge der Schritte; Schritte werden wiederholt und somit mehrmals ausgeführt. User Feedback, Testergebnisse, etc. werden somit immer wieder einbezogen. Kritik: chaotisch, nicht planbar? (Was kostet es? Wann ist es fertig? Was kommt dabei heraus?) 43. Was versteht man unter prädikativ und adaptiv?

- adaptiv: flexibel bezüglich Anforderungen; agil, iterativ, inkrementell

Page 10: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

10

- prädikativ: einfacher planbar, aber das lineare Prozessmodell muss zutreffen 44. Was lässt sich über iterative Prozesse sagen? Methoden in einem systematischen Framework; aufgeteilt in:

- Analyse - Design, Testen, Entwickeln - Installieren

Punkt 2 wird dabei immer wieder durchgeführt, man geht vom Groben ins Detail. 45. Methoden beim Planen von Software Design?

- Auswahl relevanter Disziplinen - Auswahl eines passenden Prozesses - Wahl passender Methoden

46. Was sind die Ziele / Vorteile bei Usability Engineering?

- Weniger späte Designänderungen - Weniger Trainingskosten - Weniger Aufwand für Support - Weniger Fehler der Benutzer - Mehr Produktivität der Benutzer - Positive Reviews und zufriedene Kunden

Aber: ROI (Return On Investment) ist schwer formalisierbar. 47. Was lässt sich über ROI sagen? ROI = Return On Investment

Trotzdem oft hoher Aufwand � lieber billige und einfache Methoden verwenden! 48. Was sind Discount-Methoden? Scenarios, Simplified Thinking Aloud, Heuristic evaluation

Page 11: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

11

BLOCK 3: Analyse Methoden 49. Was muss analysiert werden?

- Wer sind die Benutzer? Technik: abstrakte Benutzer Markanalyse: Wer kauft vielleicht? Design: Das beste System für konkrete Benutzer? Beachten:

o Wissen und Erfahrung potentieller Benutzer o Aufgaben potentieller Benutzer o Psychologische und physische Eigenschaften potentieller Benutzer

- Aufgaben? Technik: funktionale Requirements Marketing: „Jobs to be done“ � Kaufentscheidung Design: Bestmögliche Unterstützung für die (vielen Unter-) Aufgaben Arbeitsablauf aus Sicht der Benutzer beachten (Vokabular, Abläufe, Tacti Knowledge, Workarounds - Kontext? Art der Arbeit:

o Aufgaben und Ziele o Abläufe o Häufig oder selten?

Physischer Arbeitsplatz: o Hilfsmittel, Artefakte o Platzierung von Objekten

Selbstbild der Benutzer Sprache der Benutzer Zusammenarbeit:

o Organisation der Firma o Ziele des Unternehmens o Kulturelle Einflüsse

50. Eigenschaften von Interviews?

- Unstrukturiert o Es gibt keine vordefinierten Pfade, was oft neue Aspekte zum Vorschein bringt

Page 12: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

12

- Strukturiert o Es gibt vordefinierte Fragen und Themen, damit alles besprochen wird

In der Praxis: Mischformen!

- Explorativ o Offene Struktur; man lässt den Interviewten erzählen, stellt offene Fragen �

das fördert Spontaneität und führt zu ungewollten Endeckungen - Fokussiert

o Es gibt eine vorgegebene Struktur / Leitfaden, z.T. geschlossene Fragen � Konversation bleibt dadurch im Interesse des Beobachters

In der Praxis: Erst explorativ, dann fokussiert!

51. Welche Fragenarten gibt es?

52. Was versteht man unter Contextual Inquiry? Reale Benutzer werden direkt im Kontext der Arbeit beobachtet. Dadurch erhält man Informationen über:

- Tacit Knowledge (implizites Wissen des Benutzers) - Arbeitsabläufe und Prozesse - Problemdomäne - Arbeitskultur - physische und soziale Grenzen - Man kann Vertrauen zum Benutzer aufbauen, der möglicherweise später das Produkt

evaluiert 53. Methoden für das Erforschen und Kennlernen von Benutzern, Aufgaben und Kontext?

- Umfragen, Fragebögen - Cultural Probs - Stakeholder Meeting - Fokusgruppen - Patizipatorisches Design

Page 13: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

13

54. Welche Benutzerbeschreibungen gibt es?

- Aktoren: Technischer Ansatz, UML, Objektorientierte Software Entwicklung - Zielgruppe, Benutzerprofile: Statistisch-quantitativer Ansatz - Personas: Personen aus der Zielgruppe zusätzlich mit Kontext, Name, Gesicht

55. Was genau sind Personas? Archetypische Benutzerschreibungen, die stellvertretend für den Benutzer stehen. Sie sind statistisch repräsentativ für die Zielgruppe und dienen der Kommunikation im Team. Werden genau beschrieben: Anforderungen, Charakter, Wünsche, Bedürfnisse, Denkweise, Meinung, etc. Nicht:

- demographische Gruppe (Frauen zwischen 18 und 25) - Berufsbeschreibung (IT Manager)

Personas sind Stereotype. Sie sind Designziele, keine Verkaufsziele. 56. Was versteht man unter Szenarien? Beschreibung von Szenarien (möglichen Abläufen, Situation, etc.), die den Nutzungskontext berücksichtigen � Narrativer Ansatz 57. Wozu dienen Storyboards? Storyboards eigenen sich zur gemeinsamen Beschreibung von

- Benutzern: Personas - Tasks: Szenarien - Kontext

und sind gut für Präsentationen geeignet.

Page 14: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

14

BLOCK 3: Prototyping Methoden 58. Was versteht man unter Prototypen? (Zitat) Prototypen sind die Repräsentation eines Systems und haben verschiedene Arten von fidelity. “Prototypes are representations of a design made before final artifacts exist.” “A prototype allows stakeholders to interact with an envisioned product, to gain some experience of using it in a realistic setting, and to explore imagined uses.” 59. Was sind Prototypen konkret? (Aufzählung)

- Software - Physisches Modell - Storyboard - Video - Slideshow - Papier-Mockup

� Prototypen kommunizieren eine Idee

60. Was kann/soll man prototypen? (Aufzählung)

- Technische Aspekte - Layout am Bildschirm - Wo werden welche Informationen angezeigt? - Graphisches Design und „Look and Feel“ - Arbeitsablauf und einzelne Aufgaben - Inhalte, Bezeichnungen, Abkürzungen - Kontroversielle und kritische Aspekte

� Man kann alles prototypen!

61. Warum soll man Prototypen erstellen?

- Prototypen dienen als Denkwerkzeug - dienen der Ideenfindung - dienen dem Ausprobieren von Ideen - im Team arbeiten - man kann zwischen Alternativen wählen - man kann Konzepte kommunizieren - man kann angreifen und interagieren - man kann evaluieren und bekommt rechtzeitig Feedback - man findet Probleme - frühe Usability Tests sind möglich - Prototypen sind wichtig für User Centered Design

Page 15: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

15

o früher Fokus auf Benutzer und Aufgaben o empirische Beobachtungen o iteratives Design

- spätere Korrekturen sind teuer 62. Was ist der Unterschied zwischen Sketching (skizzieren) und Prototyping?

63. Was sind low-fidelity, was high-fidelity Prototypen? Low -fi

- Früh im Design-Prozess - Schnell und einfach, damit leichter zu verwerfen

High-fi - Spät im Design-Prozess - Detaillierter

Papier Prototypen

- Wichtigste Art von low-fi Prototypen - Von jedem machbar, „quick and dirty“, Iterationen leicht möglich - Papier, Klebstoff, Marker, Overhead Folien, Schere, Post -Its (bunt) - Simulation von dynamischen Interface Elementen

High-fidelity Prototypes Z.B. MS Office 2007 Ribbon Design

- Über 25.000 Bilder, Mockups - Hunderte klick -through Prototypen

Page 16: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

16

64. Breite und Tiefe der Funktionalität bei Prototypen? (Vertikal und horizontal)

65. Zusammenfassung zu Prototyping: Protoyping

- Low-fi - High-fi - Dimensionen der Fidelity

o Breite, Tiefe o Aussehen o Interaktion

BLOCK 3: Evaluierungs-Methoden 66. Messbare Kriterien für Usability?

- Erlernbarkeit - Effizienz (!= Effektivität ) - Erinnerbarkeit - Fehler - Zufriedenheit � User-abhängig !

Page 17: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

17

67. Was versteht man unter Usability Inspektion? Durch Experten

- Experten versetzen sich in die Rolle des Benutzers - Fehler vorhersagen - Beurteilung anhand von Erfahrungen und Richtlinien - z.B. Heuristic Evaluation, Guidelines, Cognitive Walkthrough

68. Was versteht man unter Usability Testing? Durch Testpersonen, Endbenutzer

- Fehler erfassen, die in der Praxis auftreten - Repräsentative Benutzer bearbeiten vordefinierte Aufgaben - Beobachtung durch Usability Experten - Analyse der Ergebnisse aus der Beobachtung zur Verbesserung

69. Kriterien von Usability Evaluierung?

70. Welche Arten zu Testen gibt es bei Usability Evaluierung?

- Exploratives Testen: o Sucht qualitative Ergebnisse, eher früh im Prozess, hilft bei Design-

Entscheidungen - Assessment-Testen:

o Der Benutzer soll eine Aufgabe bewältigen

Page 18: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

18

- Vergleichs-Testen o Welcher Entwurf ist besser?

- Validierungs-Tests o Z.B für die Abnahme eines Produkts durch den Kunden

71. Was sind Methoden für Discount Usability Evaluation?

- Thinking aloud - Heuristische Evaluation

72. Wie viele Testpersonen braucht man zum Testen? (Stichwort: Discount Approach) <= 5 Personen aus jeder Zielgruppe werden benötigt

- Drei Testpersonen finden ca. 50% der Fehler - Vier bis fünf Personen finden 80% - Zehn Personen finden 90%

Wenn 10 Testpersonen zur Verfügung stehen... Erst nur mit 5 Personen testen � Dann Fehler ausbessern � Dann noch einmal testen 73. Was versteht man unter Simplified Thinking Aloud?

- Informelle Form des User Testing - Potentielle Benutzer bedienen das Produkt und geben ihre Gedanken laut weiter - Entwickler sind anwesend - Keine Videokamera - Keine Experten - Daten werden vor Ort verarbeitet - Einsatz während der Entwicklung des Produkts

74. Was versteht man unter Hallway Usability Testing? (Zitat) “A hallway usability test is where you grab the next person that passes by in the hallway and force them to try to use the code you just wrote.” 75. Zusammenfassung von Usability Evaluation:

- Tests vorbereiten o Fragestellung o Testpersonen o Unterlagen

- Lieber einfach als gar nicht! o 5 Benutzer reichen o Thinking-aloud, Hallway

Page 19: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

19

76. Zusammenfassung von Usability Engineering:

- Benutzer-zentriert o Analyse: Benutzer, Tasks, Kontext o Design: Sketching, Prototyping o Evaluierung: Usability Testing & Co o

� iterativ BLOCK 4: Mobile Devices 77. Was versteht man unter Single Purpose Device? A single-purpose device is a hardware device whose functionality cannot be easily altered. Examples include unprogrammable pocket calculators, traditional telephones, walkie-talkies, pagers, fax machines, and ordinary telephone answering machines. 78. Was versteht man unter Multi-Purpose Device? A multipurpose device is "one whose functionality can be altered by the end user. 79. Konnektivität: früher und heute? früher: Anruf, SMS heute: “Always on – always connected” BLOCK 4: Mobile User Experience 80. Was versteht man unter User Experience? Definition: How a person feels about using a system.

Page 20: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

20

81. Was sind die Unterschiede, die bei Computern und Mobiltelefonen zu beachten sind? Computer:

- Relativ vorhersagbare Umgebung - Großer Bildschirm ermöglicht Multitasking - Keyboard und Maus für Input

Mobiltelefon:

- Variabler Kontext und Umgebung - Kleiner Bildschirm und begrenzte Texteingabe - UI benötigt den ganzen Bildschirm - Multitasking schwer, leicht zu unterbrechen

82. Welche Mobilen Mindsets gibt es?

- I’m mircotastik! � kurze Aktivitäten - I’m local! � Umgebung erkunden - I’m bored! � Ablenkung / Unterhaltung

83. Was sind gute Mobile Experiences?

- sind einzigartig mobil - sind kontextbezogen - sind aussagekräftig

84. Was lässt sich zu „Design Prinzipien: einzigartig mobil“ sagen?

- Fokus auf die Stärken mobiler Medien � „Know the medium you are designing for“ - Fokus auf Bedürfnisse, nicht Lösungen - Heuristiken und Technologie ändern sich häufig, nicht zu sehr damit aufhalten

85. Was sind die Vorteile davon, Kontext zu beachten? Steigerung von

- Usability o Information durch weniger Klicks verfügbar

- Relevanz o Wo ist der nächste Supermarkt?

- Interesse o Wiederverwenden der Applikation

86. Was lässt sich zu „Design Prinzipien: Kontextbezogen“ sagen?

- Design für teilweise Aufmerksamkeit und Unterbrechungen - Reduktion der kognitiven Belastung - Ideen in der realen Welt sammeln

Page 21: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

21

87. Was lässt sich zu „Design Prinzipien: aussagekräftig“ sagen?

- Inhalte herunterbrechen - „ Bite-Sized“ Junks - An Möglichkeiten, nicht an Tasks denken

88. Zwei wichtige Aspekte, um die es bei mobilen Applikationen geht?

- Bei mobilen Applikationen geht es darum, User schnell durch Informationen zu führen - Es geht darum, Möglichkeiten bereitzustellen, der User entscheidet in welcher

Reihenfolge oder zu welcher Zeit. BLOCK 4: Mobile IxD Guidelines 89. Vier Strategien für Einfachheit?

- Remove - Hi de - Organize - Displace

90. Was lässt sich über die Strategie für Einfachheit „Remove“ sagen?

- Auf „Core Use Cases“ konzentrieren - Unnötige Funktionen vermeiden - Komplexe Aufgaben aufteilen - Besser Funktionen, als die User Experience limitieren

91. Was lässt sich über die Strategie für Einfachheit

„Hide“ sagen? (Bild)

Page 22: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

22

92. Was lässt sich über die Strategie für Einfachheit „Organize“ sagen? (Bild + Stichworte)

93. Was lässt sich über die Strategie für Einfachheit „Displace“ sagen? (Bild)

94. Was muss/kann bei Konsistenz beachtet werden?

- Konsistenz innerhalb der Applikation - Konsistenz innerhalb der Plattform - Logische Inkonsistenz - Konsistenz lässt das UI in den Hintergrund treten - User können sich besser auf die Lösung ihres Problems konzentrieren

Page 23: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

23

95. Was versteht man unter Minimize Cognitive Load? Kognitive Belastung soll minimiert werden � wie viel Konzentration erfordert die aktuelle Aufgabe? Man sollte die Stärken eines Computers nutzen

- Rechnen - Merken - Vergleichen - Rechtschreibkorrektur

96. Was soll man beim Design Mobiler Geräte machen? (Leitsätze)

- Let user see and point!

- Reduce and optimize keyboard input!

Page 24: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

24

- Design for direct access!

- Prevent errors! o Funktionen deaktivieren o Passende Interaktionselemente o Klare Anweisungen o Constraints & Poka-Yoke Prinzip

- Detect errors!

o Mögliche Fehler erwarten o Sicherstellen, dass der User weiß

� Ich habe getan was ich tun wollte � Was ich getan habe war korrekt

- Offer error recovery!

o Klare Anweisungen geben, z.B. � „Zurück“ � „Rückgängig“ � „Abbrechen“

o Nicht rückgängig zu machendes vorher bestätigen lassen o Default Werte, die zu weniger Fehlern führen

- Don’t annoy the user! o Warnmeldungen reduzieren

� Wenn App nicht weiterkommt � Zur Bestätigung / Zustimmung benötigt

o Nicht für Informationen (oder Rating der App) missbrauchen o Klare verständliche Sprache o Dialoge: Default Buttons = Sicherste Option

Page 25: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

25

- Use real world metaphors!

- Leverage clear mental models! (leverage = wirksam einsetzen) o Physikalische Gesetze o Animierte Übergänge o Content vs. Interaktionselemente

- Design for real hand sizes!

- Keep gestures smart und simple!

o Globale Gesten � Systemweit verfügbar � Machen das UI einfach und intuitiv benutzbar

o Lokale Gesten � Applikationsintern � Dürfen globalen Gesten nicht widersprechen

o Zusätzliche Gestures für Expert-Users verwenden o !Aber: Funktionen müssen auch ohne Gesture durchführbar sein

- Give feedback! o Touchscreen ist nur eine glatte Oberfläche o Keine Anhaltspunkte/Orientierung o Benutzer sind oft abgelenkt o Ohne Feedback muss viel genauer auf das Interface geachtet werden o Feedback: Visuell, haptisch, akustisch

- Praxis Tipp: Challenge the client’s thinking! o Konsistenz innerhalb Plattform wichtiger als Konsistenz zwischen

Plattformen o Eigenheiten der Plattformen ausnützen o Branding (platz)sparend verwenden oder weglassen o !Nicht von Featuritis anstecken lassen

Page 26: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

26

BLOCK 4: Mobile Web 97. Unterschiede bei Mobile Web?

- Es gibt Hoch- & Querformat - Gerät bzw. Internet ist langsam (Bandbreite, Prozessor) - Hover? - Weniger Präzision – kleine “hit targets” - Gesten möglich - Nicht immer direkt im Browser - Java Applets & Flash Support? - Verbindungsunterbrechungen - …

98. Was muss bei Mobile Web beachtet werden? Inhalt:

- Kleiner Bildschirm, wenig Platz - Einfach gestalten - Bandbreite reduziert, wenige Bilder - Links herausheben

Verschiedene Displays

- Auflösung - Größe - DPI - Orientierung

99. Tipps für Mobile Web?

- Normale und mobile Version anbieten o User entscheidet o Mobile-Version kommt per Default

- In mobiler Version “Core Use Cases” gut abbilden, unnötige Funktionen weglassen o Top 20% der Funktionalität

- Normale Version für restliche Nutzung - Opera Mobile Emulator

o Ermöglicht vorab-Testen auf verschiedensten Geräten BLOCK 5: Gestaltprinzipien 100. Wie beschreibt die Gestaltpsychologie menschliche Wahrnehmung? � Als Fähigkeit, Ordnung und Strukturen aus Sinneseindrücken abzuleiten

Page 27: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

27

101. Welche Gestaltprinzipien gibt es?

- Prinzip der Nähe - Prinzip der Ähnlichkeit - Prinzip der Geschlossenheit - Prinzip der stetigen Fortsetzung - Prinzip der Prägnanz

102. Was lässt sich zum Prinzip der Nähe sagen?

- Näher zusammen liegende Elemente werden als zusammengehörig empfunden - Eines der wirksamsten Prinzipien - Eine der einfachsten Möglichkeiten, um eine enge Beziehung zwischen Elementen

auszudrücken

103. Was lässt sich zum Prinzip der Ähnlichkeit sagen?

- Gleiche oder fast gleiche Elemente werden als zusammengehörig empfunden

- Farbe gruppiert stärker als Form

Page 28: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

28

104. Was lässt sich zum Prinzip der Geschlossenheit sagen?

- Die visuelle Wahrnehmung erkennt einfache, mit den vorhandenen Erfahrungen am besten zu vereinbarende Formen

- Geschlossene Formen werden bevorzugt wahrgenommen

105. Was lässt sich zum Prinzip der stetigen Fortsetzung sagen?

- Bei mehreren Möglichkeiten wird immer die einfachste und regelmäßigste Variante bevorzugt

- Konturen mit kontinuierlichem Verlauf werden gegenüber Konturen mit gebrochenen Verlauf oder abruptem Richtungswechsel stets bevorzugt

106. Was lässt sich zum Prinzip der Prägnanz sagen?

- Figur vs. Hintergrund - Manche Objekte treten in der visuellen Wahrnehmung

in den Vordergrund - Üblicherweise kann nur eine „Interpretation“

wahrgenommen werden

Page 29: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

29

107. Welche vier Prinzipien kann man bei der Gestaltung noch beachten?

108. Was lässt sich über Alignment sagen?

- Kein Element der Seite darf beliebig platziert werden � Jedes Element muss eine visuelle Verbindung mit einem anderen Element besitzen.

- Vertikale und horizontale Ausrichtung der Elemente erzeugen kohäsive Einheit - Ausgerichtete Elemente obwohl physisch voneinander entfernt � verbunden und

verwandt - Ausrichtung an einem Grid (Grid = Netz, Koordinatennetz, Gitter,...)

109. Was lässt sich über Proximity sagen?

- Inhaltich zusammen-gehörende Elemente befinden sich in physischer Nähe o Gruppierung o Ordnung o Kohäsive Einheit � Nähe impliziert Zusammengehörigkeit

- Entfernung zu nicht zusammengehörenden Elementen groß genug und eindeutig

Page 30: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

30

110. Was lässt sich über Contrast sagen?

- Unterscheiden sich Elemente in Farbe, Form, Größe etc. entsteht Kontrast o Erweckt Aufmerksamkeit o Schafft Ordnung und Hierarchie o Kontrast muss eindeutig und erkennbar sein!

111. Was lässt sich über Repetition sagen?

- Ein grafisches Konstrukt oder eine Eigenschaft wird im gesamten Design wiederkehrend verwendet

- Wiederkehrende Elemente sowohl innerhalb einer Seite o Aussehen von Links/Navigationselementen o Elemente zur Strukturierung von Inhalt (Lightboxen)

- Als auch Seitenübergreifend o Navigation o Inhaltsbereich o Footer

BLOCK 5: Farben 112. Was lässt sich über Lichtfarben sagen?

- Additiver Farbmischung - Grundfarben

o Rot o Grün o Blau

- Photosensitive Zellen im Auge - Alle anderen Farben � Mischung - Alle drei Farben in gleicher Intensität gemischt �Weiß � Additiv

Page 31: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

31

113. Was lässt sich über Pigrmentfarben sagen?

- Reflexion bestimmter Anteile weißen Lichts - Farben reduzieren Lichtspektrum � Subtraktive

Farbmischung - Grundfarben

o Cyan o Magenta o Gelb

- Anwendung im Druck o Zusätzlich Schwarz � CMYK

BLOCK 5: Bilder 114. Was lässt sich über Bilder sagen?

- Symbolisch-emotionaler Raum - Betrachtung � physikalische Erfahrungen im Kopf des Betrachters - Verbindung zu textuell beschriebenen Erfahrungen - Leichteres Verständnis komplexer Inhalte - Wirkung des Bildes vom Kontext abhängig � Mediation

115. Darstellungmodi von Bildern.

Page 32: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

32

116. Was ist ein Symbol, was ein Icon? Symbol

- Abstrahiertes Bild - Form und physisches Aussehen hängen nicht mit der Idee oder der Bedeutung

zusammen - Sinn von der kulturellen/sozialen Umgebung abhängig – muss gelernt werden

Icon

- Optisch-abstrahierte Darstellung des Objekts BLOCK 5: Typographie 117. Wie lässt sich Typographie definieren? Typographie ist die Gestaltung von Texten für die drucktechnische Vervielfältigung (Bücher, Zeitschriften, Zeitungen, Broschüren usw.) oder die Bildschirmwiedergabe (Internet, Fernsehen, Film). 118. Wie kann bei Typographie klassifiziert werden? 1. Merkmal

- Serifen vs. Serifenlos - Strichkontrast

2. Merkmal - Formprinzip - Dynamisch - Statisch - Geometrisch

119. Was für Schriftfamilien gibt es? Schriftfamilien

- Verschiedene „Schnitte“ einer Schrift - Schriftbreite - Schriftstärke - Schriftlage

Page 33: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

33

120. Klassifizierung nach Form in der Typographie?

121. Was muss bezüglich Zeilenlänge, Zeilenabstand u.Ä. beachtet werden? Zeilenlänge

- Zu lange: Auge verliert Zeile - Optimal 40-80 Zeichen

o 30 x 10px = 300px ~ 65 Zeichen

Page 34: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

34

Zeilenabstand - Wichtiges Kriterium für die Lesbarkeit - Korrekt angewandt - Leser kann den Buchstaben folgen - Das Gesamtbild des Textes wird verbessert

- Je größer die Schrift desto geringer der Zeilenabstand - Für Fließtext im Web 125% oder mehr

Typografische Farbe

- Wichtige Faktoren - Schriftart - Schriftgröße - Schnitt - Zeichenabstand - X-Höhe

Negativsatz

- Laufweite erhöhen (Sperren) - Schriftstärke verringern

Schrift niemals verzerren! � Dafür vorgesehenen Schnitt verwenden (Condensed, Extended etc.) Korrekte Anführungszeichen

- Gänsefüßchen: 99 davor und 66 danach - Französische Anführungszeichen: Guillemets

Vertikaler Rhythmus

- Mithilfe von „Baseline-Grid“ - Definiert Zeilenhöhe und Abstand zwischen Absätzen

� konstanter vertikaler typografischer Rhythmus Typografische Größenskalierung

- Für verschiedene Textelemente: Fließtext, Auszeichnungen, Überschriften etc. - Bestimmt typografische Hierarchie - Harmonie innerhalb der Komposition

Methoden

- Traditionell (15. Jahrh.) - Fibonacci - LeCorbusier

Page 35: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

35

BLOCK 6: Evolution der Human Computer Interaction 122. Was sind die vier Perioden der Human Interface Evolution?

- Lochkarten (Mainframes, Batch-Processing) - Command Line Interface (CLI) - Graphisches User Interface (GUI, WIMP Interfaces)

WIMP = Windows, Icons, Menus, Pointer - Natural User Interfaces (Post-WIMP Interfaces)

123. 1. Periode: Wie verlief Input und Output bei Lochkarten und wann? Anfang 1950 bis 1970 Computer mit Lochkarten dienten als Input und Printer als Output. Es gab keine direkte Human Interaction. 124. 2. Periode: Wie verlief Input und Output bei Command Line Interfaces und wann? Anfang 1960 bis etwa 1990

- Mainframe und Minicomputer - Command Line Interfaces - Dialogsystem Metapher (� Befehl an System – Antwort vom System)

125. 3. Periode: Wie verlief Input und Output bei Graphischen Interfaces und wann? Anfang 1980 bis heute

- Graphische User Interfaces basierend auf Windows, Icons, Menus und einem Pointing Device ( Maus), genannt WIMP GUIs, wurden aktuell.

- Verwendung der Desktop Metapher 126. 4. Periode: Natural User Interfaces? Natural User Interfaces sind am Kommen, man weiß nicht genau, was sich noch alles entwickeln wird bzw. in welche Richtung die Entwicklung geht. Interessante Ansätze sind z.B.:

- Steuerung über Körperbewegung � Benutzer ist der Controller - Multitouch-Displays - etc.

Page 36: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

36

127. Was lässt sich noch über User Interface Evolution sagen und ihre Perioden?

128. Was ändert sich im Interactin Framework durch die Evolution von User Interfaces? Artikulation und Beobachtung (von Seite des Benutzers) wird einfacher. � Input Durchführung und Präsentation (von Seite des Computers) wird ausgereifter. � Output BLOCK 6: Desktop Metaphern 129. Was kann als Grundlage für Metaphern beachtet werden? (??) Für Metaphern können/sollen vorhandene mentale Modelle genutzt werden. (?) 130. Was sind Probleme bei Metaphern?

- Bringen Einschränkungen mit sich o ... und können Innovation hemmen

- Werden inkonsistent verwendet o ... und sorgen für Verwirrung beim Benutzer

- Sind unvollständig o ... und wecken falsche Vorstellungen

- Können veralten o ... und man wird sie oft nur schwer wieder los

131. Wann bringen Metaphern Einschränkungen?

- Unreflektierte Nachbildung von physischen Interfaces kann problematisch sein - Man vergeudet Verbesserungspotential und schränkt Innovationsmöglichkeiten ein

� Benutzer kann falsche Vorstellung über Verhalten des Systems gewinnen und übersieht daher vielleicht Funktionen und probiert weniger aus

Page 37: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

37

132. Was lässt sich zu inkonsistenten Metaphern sagen?

- Papierkorb: Erlaubt das Löschen von Dateien rückgängig zu machen

- Metaphern können problematisch sein, wenn man sie nicht konsequent einhält Beispiel: Auswurf von Wechseldatenträgern unter Mac OS

- Buch-Metapher: Scrollendes Inhaltsverzeichnis � Unsichtbare Scrollbalken: Schlechte Affordance

Zusammenfassung: Metaphern sind dann inkonsistent, wenn das Verhalten des Systems nicht so ist, wie es die Metapher suggeriert. z.B. erwartet man beim Papierkorb, dass alles gelöscht ist. Stattdessen wird es aber nur vorläufig dort abgelagert und das Löschen kann rückgängig gemacht werden. Oder Beispiel Telefonbuch: Man sucht nach dem Buchstaben „M“ und findet Einträge von Personen mit einem Nachnamen mit M, aber auch andere Einträge, wo nicht der Nachname mit M beginnt (z.B. eben das Möbelhaus). Wechselträgerbeispiel bei Mac OS: Wechselträger kann ausgeworfen werden, indem man ihn zum Papierkorb zieht (??). Schlecht, da man mit Papierkorb Wegwerfen verbindet. 133. Was lässt sich zu unvollständigen Metaphern sagen? Beispiel: „A text processor is a typewriter.“ Diese Metapher ist unvollständig, da der Benutzer so annehmen könnte, in einem Textprogramm ist nur all das möglich, was auch auf einer Schreibmaschine möglich ist. Dabei bietet ein Textprogramm viel mehr Aktionsmöglichkeiten! Ein Textprogramm ist also nicht mit einer Schreibmaschine gleichzusetzen. 134. Was lässt sich zu veralteten Metaphern sagen?

Die Diskette als Speichersymbol hat sich eingebürgert. Allerdings ist das längst veraltet, da Disketten nicht mehr benutzt werden. Das Symbol bewährt sich zwar weiterhin, hat aber keinen direkten Bezug mehr zur realen Welt, da kaum noch

jemand auf eine Diskette speichern wird und es somit neuen Generationen kein wirklicher Begriff mehr ist. BLOCK 6: WIMP User Interfaces 135. Wofür steht WIMP? Windows, Icons, Menus, Pointer / Pointing Device

Page 38: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

38

136. Was ist Overlapping, was Tiled? (Layout-Strategien)

137. Was ist MDI, was SDI?

138. Was ist TDI?

- TDI = Tabbed Document Interface - Tabs werden von Anwendung in einem

Fenster verwaltet o „Entlastet“ Window Managment

des Betriebssystems - Unterstützen meist mehrere Fenster - Unterstützen manchmal Split-/Tiled-Views - Hohe Flexibilität

Page 39: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

39

139. Wozu dienen Icons? Zur Darstellung von:

- Objekten - Operationen - Status

140. Was ist bei Icons zu beachten?

- Passender Grad der Abstraktion o Symbolische Darstellungen verwenden (keine foto-realistischen Icons) o Nicht so abstrakt, dass man es nicht versteht

- Beschriften o Labels wenn Platz ist

� Sind offensichtlich � Vergrö ßern Click-Targets

o Ansonsten Tool Tips

� Brauchen keinen Platz � Können mehr Text enthalten � Sind nicht offensichtlich � Sind langsamer zugänglich

- Konsistenz in Detailgrad, Stil, Perspektive, Licht &

Schatten... (Nicht mischen) - Es ist schwierig gute Icons zu designen, daher wenn möglich vorhandene Icon-Sets

verwenden (und auf eines beschränken) 141. Was lässt sich über Menüs sagen? Menüs dienen zur Auswahl von Befehlen und Optionen, z.B. in Form von Menüleisten, Kontext-Menüs,... Ein verbreiteter Mythos dazu ist, dass man maximal 7 +/- 2 Menü-Items haben sollte (� entspricht der maximalen Kapazität des Kurzzeitgedächtnisses) Allgemein: Tiefe Hierarchien sorgen in der Regel für größere Schwierigkeiten als bereite Strukturen. Bestehende Guidelines:

- Microsoft: maximal 3 Ebenen - Apple: maximal 2 Ebenen

Page 40: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

40

142. Wie sollen Menüs designed werden?

- Einzelne Wörter als Bezeichnung - Vorhandene Kategorien verwenden, wenn anwendbar

o Windows: File, Edit, View, Tools, Help o Mac: File, Edit, Format, View, Window, Help

- Sortierung o Best-Practices folgend o Logische Reihenfolge o Nach Häufigkeit o Items an Beginn und Ende sind besser zu finden und zu merken

- Gruppierung zur Strukturierung - Keine tiefen Hierarchien - Nicht anwendbare Befehle inaktiv setzen (nicht ausblenden)

143. Menüaufbau?

144. Was lässt sich über Kontextmenüs sagen?

- Kontextmenüs listen Operationen für ein bestimmtes Objekt - Rechts-Click, Control-Click (so werden sie erreicht) - Sehr effizient - Nicht selbst-offenbarend - Guidelines:

o Auf die wichtigsten Befehle beschränken (Shortcuts) o Befehle nicht ausschließlich in Kontextmenüs, sondern

reguläre Menü-Befehle duplizieren o Keine Default-Auswahl setzen o Nicht anwendbare Befehle ausblenden

Page 41: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

41

145. Was lässt sich über Adaptive Menüs sagen?

- Wurden in Office 2000 eingeführt - Automatische Filterung nach Häufigkeit der Verwendung - Problem: Menü ändert sich ständig

o Man kann es sich nicht einprägen - Problem: Automatische Filterung macht Fehler

o Bei Fehlern: Höherer Aufwand o Man muss zuerst das kurze Menü scannen, dann erweitern,

dann das lange Menü scannen 146. Was lässt sich über Kreismenüs sagen?

- Sind am Desktop wenig verbreitet o vermehrt bei Games, Touchscreens

- Schneller o Alle Items gleich nahe o Größere Click-Targets

- Lerneffekt o Richtung prägt sich ein � welche Gesten muss

man mache - Probleme:

o Skaliert schlecht (bis 8 Items) o Braucht viel Platz o Schwierig zu beschriften o Schwieriger zu scannen, sortieren

147. Was lässt sich über Pointer sagen? Pointing Devices dienen zur Kontrolle eines Pointers (Zeigers) am Bildschirm. Vergleich mit direkter Touch Interaction:

- Schwieriger zu erlernen - Nur ein Zeiger (vs. Multitouch) - Präzision: Pixelgenau vs. „Finger“genau - Effizienz: Zeigergeschwindigkeit, Zeigerbeschleunigung

148. Was ist Fitts’ Law? (detailliert und vereinfacht) Ein Modell des Bewegungsapparats, welches die Zeit zur Auswahl eines Zielbereichs in Abhängigkeit von Distanz zum Ziel und Größe des Ziels setzt. Vereinfacht:

- Je größer ein Ziel ist, desto schneller kann man es auswählen. - Je näher ein Ziel liegt, desto schneller kann man es auswählen.

Page 42: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

42

Detailliert:

- MT is the average time taken to acquire the target. - a and b are empirical constants determined through linear regression. - A is the distance from the starting point to the center of the target . - W is the width of the target measured along the axis of motion (how close to the target

you need to get to count as acquiring it.) - c is a constant which is either 0, .5, or 1, depending on the specific environment.

149. Beispiele und Anmerkungen zu Fitts’ Law.

„Corners are the easiest place to reach because they have infinite dimensions.“ � Menüleisten meist in den Ecken (links oben oder links unten, z.B.)

Page 43: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

43

BLOCK 7: Ubiquitous Computing 150. Was versteht man unter Ubiquitous Computing?

- Der Computer ist im Hintergrund eingebettet - Integration von Computern in Alltagsgegenständen - Unaufdringliche User Interfaces - Nicht-monopolisierend (d.h. nicht von der Umgebung abschottend) - Periphere Wahrnehmung und selektive Fokussierung - Fließender Wechsel von einem System zum nächsten

151. Was sind Tabs, Pads and Boards? Tabs: Kleinste Einheit, so groß wie ein Post-It Pads: Tablets so groß wie ein Blatt Papier Boards: Großformatige Displays BLOCK 7: The long nose of innovation 152. Zitat zu “The long nose of innovation”. „Any technology that is going to have significant impact over the next 10 years is already at least 10 years old. That doesn't imply that the 10-year-old technologies we might draw from are mature or that we understand their implications; rather, just the basic concept is known, or knowable to those who care to look.“ – Bill Buxton 153. Unterschiedliche Entwicklungen: Hypertext:

- 1945, Vannev r Bush: As We May Think, The Atlantic Monthly - ~ 1965, Ted Nelson: Erste Verwendung des Begriffs - 1968, Douglas Engelbart: The Mother of All Demos

Page 44: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

44

- 1987: HyperCard - 1990, Tim Berners-Lee : World Wide Web

Mouse:

- 1963: Erste Mouse (Douglas Engelbart, 1968 demonstriert) - 1983: Erste Microsoft Mouse - 1984: Macintosh führt zu weiter Verbreitung - 1990: Windows 3.0 erstmals Mouse-zentriert

Pen and Touch:

- 1963: Sketchpad mit Lightpen - 1972: PLATO IV Touchscreen Terminal - 1996 Palm PDAs: Stiftbasiert - 2001 Tablet PCs:

Stiftbasiert Microsoft Windows Tablet PC Edition

- 2007 iPhone : Multitouch

BLOCK 7: Zukunftsvisionen

154. Welche Zukunftsvision kann man aufzählen?

- g-speak - Gestural Interaction - Voice Interaction - Augmented Reality

- Tablets BLOCK 7: Touch- und Gesten-Interaction 155. Beispiele, wo Touch- und Gesten-Interactin umgesetzt wurde?

- Smartphones - Tablets

Page 45: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

45

- (könnte sein bei?) Desktop, Tischen, Wänden,... - Touchpads (z.B. beim Laptop) - „Freiform“ von Gesten (z.B. Wii)

156. Wie lassen sich Touchpad und Touchscreen gegenüberstellen? Touchscreen:

- Direkte Interaktion - Man kann Dinge, mit denen man

interagiert, direkt anfassen

Touchpad: - Indirekte Interaction (wie Maus) - Man kontrolliert einen Zeiger am

Bildschirm

157. Was ist besser: Finger oder Stylus? Stylus = z.B. kleiner Stifter

- Aktueller Trend geht weg vom Stylus in Richtung Bedienung mit dem Finger - Stylus bietet größere Präzision, stellt jedoch ein Problem für Multitouch-Bedienung

dar Diverses:

Page 46: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

46

158. Woher kommt die Motivation für Multi-Touch?

- Kollaboratives Arbeiten (Co-located) - Keine zusätzlichen Eingabegeräte (Maus, Stylus,...) - Direkte Interaktion - Intuitive Bedienbarkeit - Ausdrucksstarke Gesten - Effizienz?

� Wo soll Multi-Touch eingesetzt werden? � Welche Herausforderungen gibt es dabei?

159. Was sind Designaspekte und Herausforderungen bei Touch? Touch

- Präzision - Feedback - Charakteristika

Gesten - Diskret vs. Kontinuierlich - Orts(un)abhängigkeit - Affordance & Discoverability - Konsistenz - Dokumentation & Kommunikation - Accessibility

Ergonomie Multi-User Support 160. Charakteristika von Touch?

- Position o x/y-Koordinaten

Page 47: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

47

- Geometrie o Höhe & Breite o Auflagefläche (Größe, Form) o Orientierung

- Druck - Distanz

161. Diskrete Gesten vs. kontinuierliche Gesten? Diskret: Verarbeitung nach Vollendung

- z.B. einen Button drücken; einen Buchstaben schreiben - „onTouchEnd “

Kontinuierlich: Sofortige und laufende Verarbeitung - z.B. zoomen; rotieren; scrollen; eine Linie zeichnen - „onTouchStart“

Mischform : Feedback kontinuierlich, Aktivierung diskret - z.B. Blättern in iBooks

162. Ortabhängige Gesten vs. ortsunabhängige Gesten? Ortsgebunden - Geste muss an bestimmter Stelle ausgeführt werden:

- Interaktion mit einem konkreten Objekt am Bildschirm - Geste in einer bestimmten Region, z.B. Edge-Swipe

Ortsunabhängig - Geste kann an beliebiger Stelle ausgeführt werden:

- z.B. für systemweite Gesten - z.B. auf Touchpads - „Freihand“-Gesten (z.B. Kinect) - Lassen sich „blind“ ausführen

163. Schwierigkeiten bei Gesten? Affordance ist häufig mangelhaft � man weiß nicht genau, welche Gesten man ausführen kann und was passieren wird Komplexe Gesten sind meist nicht intuitiv und selbstoffenbarend Mögliche Hilfe: Konsistenz bei Gesten

- Kleine Sammlung gut etablierter Gesten (Tap to select / activate, swipe to pan / scroll, pinch to zoom, ...)

- Wenig Konsistenz bei komplexen Gesten - Inkonsistenz zwischen unterschiedlichen Plattformen

164. Wie funktioniert Kommunikation über Gesten? Textuelle Beschreibung und Abbildungen sind nur bedingt zur Vermittlung von Gesten geeignet.

Page 48: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

48

Vgl.: „You can quickly match the size of two objects on the page. You may find it easier to use both hands for this operation. 1.  Select the object you want to resize and then drag a selection handle. 2.  As you’re drag, touch and hold another object of desired size. 3.  When you see the words Match Size appear, lift your finger from the resized object (the first object) and then the other object, or lift both your fingers at the same time.” 165. Was kann man über Accessibility bei Gesten sagen?

- Mangel an taktilem Feedback - Direkte Kopplung der visuellen Darstellung und Eingabemethode bringt

Herausforderungen im Bereich Accessibility - Komplexe Gesten feinmotorisch anspruchsvoll

166. Was kann man über Multiple User Support sagen? Multi-Point: Mehrere Berührungspunkte gleichzeitig, keine Unterscheidung zwischen verschiedenen Personen Multi-User: Berührungspunkte sollten verschiedenen Personen eindeutig zugeordnet werden können Thema Ergonomie: siehe Foliensatz 7 BLOCK 1: Interface and Interaction Design - Einführung 167. Definitionen von Interaction Design. (Zitate) Interaction design is about shaping digital things for people’s use. Interaction design is about shaping digital things for people’s use. Interaction design is about shaping digital things for people’s use. Jonas Löwgren 168. Was ist der „Myth of Human Error“?

- Menschen sind unvollkommen und unvorhersehbar o Wir haben ein schlechtes Gedächtnis o Wir sehen nicht was wirklich vor unseren Augen ist

Page 49: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

49

o Wir sagen nicht das was wir wirklich meinen o Wir werden schnell verwirrt wenn zu viele Dinge auf einmal passieren o Wir werden müde, gelangweilt und unaufmerksam o Wir lassen uns leicht ablenken

- UI Designer müssen diese Dinge berücksichtigen

- Die Schuld an Bedienungsfehlern lässt sich meist (zu) einfach auf die Benutzer abwälzen, aber spätestens wenn man beobachten kann, dass sehr viele Benutzer dieselben Fehler machen, dann steht fest, dass das Design schlecht ist.

- Benutzer geben sich meist (zu unrecht) selbst die Schuld, wenn etwas nicht wie erwartet funktioniert

- Viele sogenannte „menschliche Fehler“ sind in Wirklichkeit Design-Fehler 169. Welche Design-Arten gibt es?

- Design by Accident o Design ohne Designer

- Aesthetic Design: Ästhetik und angenehmes Erscheinungsbild

o Ist das User Interface visuell ansprechend gestaltet? o Erweckt das Design einen guten ersten Eindruck? o Werden gängige Konventionen der visuellen Gestaltung eingehalten? o Entspricht das Erscheinungsbild den Erwartungen der Benutzer?

170. Zusammenhang zwischen Ästhetik und Usability? Affekt beeinflusst wie wir Probleme und Tasks lösen: „Products and systems that make you feel good are easier to deal with and produce more harmonious results“ (Donald Norman) 171. Usability Design: Was muss man sich zum Thema „Gute Benutzbarkeit“ fragen?

- Erreichen die Benutzer ihre Ziele? - Erreichen die Benutzer ihre Ziele schnell und effizient? - Ist das System intuitiv bedienbar? - Ist das System einfach zu erlernen?

Page 50: Interface and Interaction Design – Übungsfragen (2012/2013)...Ein Designer geht anders an sein Produkt heran als ein Benutzer, denn o Designer wissen zu viel über das Produkt o

50

- Machen die Benutzer wenige Fehler und können sie die Fehler leicht rückgängig machen?

- Sind die Benutzer mit dem System zufrieden?

� Usability ist (mehr oder weniger) klar definiert � Unterschiedliche Qualitätsmerkmale von Usability lassen sich beobachten und

messen, z.B. Effektivität, Effizienz, Zufriedenheit

Michaela, [email protected]