TU Wien:Interface und Interaction Design VU (Cauchard)

Daten

Zuordnungen

Bachelorstudium Informatik	Modul Interface und Interaction Design (Enge Wahl)
Bachelorstudium Wirtschaftsinformatik	Modul SPF/INT - Schwerpunkt Informationstechnologie (Gebundenes Wahlfach)
Bachelorstudium Medieninformatik und Visual Computing	Modul Interface & Interaction Design (Pflichtfach)
Bachelorstudium Medizinische Informatik	Modul Interface & Interaction Design (Gebundenes Wahlfach)
Bachelorstudium Software & Information Engineering	Modul Interface und Interaction Design (Pflichtfach)

Inhalt

Der Kurs befasst sich mit allem möglichen bezüglich gutem Interface Design, von Techniken zur Ideenentwicklung über erste Skizzen, Konzeptfindung und am Ende User-Evaluationen und Testing.

Die Vorlesungseinheiten sind wie folgt aufgeteilt (offizielle Titel der Vorlesungen):

- Introduction to Interaction Design

- Foundations of Interface Design: Principles and Paradigms

- Human-Centered Design: Crafting Interfaces with Empathy and Insight

- Ideation and Brainstorming: From Concept to Interface

- Prototyping and Wireframing: Transforming Concepts into User-Testable Interfaces

- Heuristic Evaluation

- Bridging between human perception and UI modalities

- Design Principles - Crafting Interfaces with Clarity, Consistency, and Impact

- Evaluating User Interfaces #1: Study Design, Quantitative Data, Statistical Analysis

- Evaluating User Interfaces #2: Qualitative Data: Questionnaires, Data Analysis and Visualization

Dabei geht es teils um spezifische Konzepte / Techniken und teils mehr um allgemeines zu den Themen. Da es keine Klausur gibt, muss man aber nicht einzelne Konzepte exakt auswendig lernen, sondern es reicht diese in der Übung anzuwenden. Hierfür werden eigens in der Übung nochmal Materialien bereit gestellt. Die Vorlesung liefert also eher allgemeines Verständnis + ist für Interessierte interessant.

Ablauf

Wöchentlich gibt es eine Vorlesung. Parallel wird c.a. alle 2-3 Wochen eine neue Übungsaufgabe veröffentlicht. Die Aufgaben finden alle im Rahmen eines großen Projektes statt und bauen aufeinander auf (siehe Übungen).

Benötigte/Empfehlenswerte Vorkenntnisse

keine

Es ist von Vorteil schon einmal mit figma gearbeitet zu haben, sofern man im Projekt eine App gestaltet (was 90% der Leute tun) oder diese halt ausprogrammieren zu können (was für den Kurs aber wahrscheinlich zu viel ist, da es ja nur um das Interface geht (siehe Übungen)).

Wer weiß wie man ein Video schneidet spart auch noch ein paar Minuten :)

Vortrag

SS25:

Wöchentlicher Vortrag mit Stream und Aufzeichnungen. Im SS25 gab es auch einen Gastvortrag.

Die LVA Leitung wünscht sich, dass möglichst viele Studenten in Präsenz kommen, was natürlich meistens nicht klappt, da die VO im Informatik Hörsaal stattfindet, der leider schlecht belüftet ist und schlechte Akustik hat. Da es einen Stream gibt ist es also viel angenehmer von zuhause zu schauen. Da der Vortrag eigentlich super interessant und spaßig gestaltet ist, an dieser Stelle eine kleine Entschuldigung an die Vortragenden!

Es werden zusätzlich zur Theorie auch ein paar Fallbeispiele angesprochen und gute/schlechte Interfaces diskutiert. C.a. in der Hälfte jeder Vorlesungen werden Fragen zu Themen beantwortet (man konnte auch online fragen stellen).

Alles in allem ist die Vorlesung zwar nett zu besuchen aber nicht wirklich nötig um die LVA zu bestehen. Definitiv auf der angenehmeren Seite für eine LVA auf der TU.

Übungen

SS25:

Die Übung wird in 5er Gruppen abgehalten. Am Anfang des Semesters wurde als Thema "Accessibility at TU Wien" gewählt und als Gruppe musste man im Laufe des Semesters dazu ein Interface entwickeln. 90% der Studierenden wählen natürlich eine App zu entwerfen. Es ist aber im Grunde alles erlaubt, womit ein Nutzer interagieren kann, man dürfte also z.B. auch einen Roboterarm entwerfen (Zu diesem müsste man dann nur irgendwie einen Prototyp bauen können; z.B. aus Pappe und die Bewegung wird durch einen Studenten simuliert.). Das Ganze wird als durchgehendes Projekt behandelt, wobei man auch dazu aufgefordert wird lieber so früh wie möglich eine andere Richtung einzuschlagen (falls man drauf kommt, dass etwas keinen Sinn macht oder man am Thema vorbei zieht) bevor man das Projekt gegen die Wand fährt. In jeder Aufgabe baut man seinen Prototyp weiter aus.

Die 5 Übungsaufgaben sind:

• UE1: SCAMPER, Affinity Diagraming, Storyboarding, Personas, Research
• UE2: Low-Fidelity Prototype, Verplank Sketching (Concept Design)
• UE3: Mid-Fidelity Prototype (Wireframes oder Hardware), Heuristic Evaluation
• UE4: Evaluation Plan fürs User Testing
• UE5: Durchführung User Testing, Auswertung der Ergebnisse Zusätzlich musste zu jeder Abgabe ein kurzes Video gedreht werden welches die Inhalte der erarbeiteten Übungsaufgabe widerspiegelt.

Hier die genauen Angaben:

Exercise 1 – Analysis of the problem scenario​/spaceAufgabe

Step 1 – Spend some time really thinking and narrowing down the motivation/problem space

• Use "SCAMPER" to ideate
• Narrow it down to three potential ideas  
• Vote for your favorite idea as a group

Step 2 - Perform Affinity Diagramming to structure your findings (for your favorite idea)

• Desk Research: explore data from existing works (e.g., existing products, previous research) to gather information on the topic.
• Evaluate the collected data via affinity diagramming
• Refine your idea considering the novelty and impact based on your findings
• Create a list of functional requirements

Create (For the shortlisted idea):

• One Application Scenario (Storyboard)
• One persona
• 3 tasks
• A collection of key themes relevant to the application (Affinity Diagram results)
• A list of functional requirements​

Upload a pdf file containing:​

• A 3-page document with: storyboard (~1/2 page), persona (~1/2 page), 3 tasks (~1/2 page), key themes from primary research (~1 page), list of functional requirements (~1/2 page)​
• Include in the pdf a link to a 3-minute video documenting your process (on the platform of your choice: Youtube, sharepoint, GoogleDrive, etc.) ​
• A readable SCAMPER image (1-page Appendix)

Exercise 2 - Brainstorm and initial prototypes

Assignment details:

•    Building upon the work done for Exercise 1 and incorporating the feedback received: create, expand, and shortlist the 3 main tasks for your scenario, focusing on supporting accessibility needs at TU Wien. This is part of the focus and flare process.

(Note: Do refine (i.e., improve) your scenario and tasks, even if you have received positive feedback on them.)

•    Brainstorm ideas for a mobile or tangible interface that would fulfill your three tasks and pick your favorite one.

•    In parallel, sketch a Concept Design (see example below) using Verplank's sketching framework.

•    Create a low-fidelity prototype

•    Describe how your persona would perform the tasks in the scenario using your low-fi prototype in a 3-min video (mp4).

Upload a pdf file containing:​

• A 3-page document with: the refined scenario and tasks (~1/2 page), the Concept Design (Verplank's sketching) with a description of the sketches (~1 page), screenshots of the low-fidelity prototype (~1.5 pages)​

• Include in the pdf a link to the 3-minute video (on the platform of your choice: Youtube, Sharepoint, GoogleDrive, etc.)

Exercise 3 – Build a Mid-fidelity prototype​

Step 1: Expanding on the progress made in Exercise 2, delve into the feedback received for the low fidelity prototype. Refine and modify your project idea, scenario, and tasks (x3) if needed.

Step 2: Create a mid-fidelity prototype:

•    Option 1: Wireframes   

o    Create a minimum of 5 UI screens per task (wireframes)

o    Describe what each screen does and how users should interact with it in caption

o    Use a prototyping tool, such as Figma or others presented in class.

•    Option 2: Hardware prototype (if your idea is tangible and cannot be well represented by an app/ screen)

o    Use whatever you like to “make your idea alive” that enables you to simulate your 3 tasks

o    Glue things together, use Lego or cardboards for instance

o    Describe each task by taking pictures of your hardware prototype

The number of wireframe screens you need to create depends on your specific project, so there's no maximum amount. You must focus on explaining your ideas and how users interact as clearly as you can with enough details.

If your ideas involve sound, tangible, or physical objects beyond typical screens, tablets, or phones, incorporating materials can enhance clarity and communication, and must be considered for this submission.

Utilize any means useful to make your idea alive.

You are not allowed to use an existing template for your wireframes (this is YOUR interface).

Step 3: Run a heuristics evaluation following Jakob’s Ten Usability Heuristics (see resources section). You have to report on each of the ten heuristics criteria in the Heuristic Evaluation Workbook. If no usability issues are found, justify how this aligns with the heuristic.

Step 4: Create a video describing your mid-fidelity prototype and how users will interact with it (3 min. maximum).

Upload a pdf file containing:

•  Your product name and scenario of use (~1/2 page).

•  3 Wireframes (i.e., 1 per task) or hardware prototype with photos, along with a brief description - Maximum 3-pages - Each task needs to be described. Note that a wireframe consists of a minimum of 5 UI screens.

OR: pictures of the tangible hardware prototype (as above), describing a sequence of events happening during the interaction (for each task).

•  Heuristic Evaluation Workbook (5 pages - use template): Provide one workbook aggregating the findings of each of your evaluators including the initials of the evaluator(s) who found each item.

•  Include in the pdf a link to the 3-minute video (on the platform of your choice: Youtube, Sharepoint, GoogleDrive, etc.)

Exercise 4 – Implement an Experience Prototype and Plan a User Study

Step 1: Refine your Mid-fidelity Prototype

Based on the prototypes created in the previous exercise:

• Use the results of your heuristics evaluation to define a list of improvements needed for your prototype.
• Develop an interactive interface (or hardware system) that emulates a realistic user experience that can be evaluated with users.

• Refine the design: Improve the design elements, visual aesthetics, and interactive features to closely simulate the actual behaviour of your UI or hardware system.

Note: Consider how to effectively evaluate your prototype. Also, think about accessibility features and color contrast. How intuitive and easy-to-use is your prototype for potential users?

Step 2: Develop an Evaluation Plan

Think about your three tasks: What are the main features? Do they need to be refined, adjusted, or fine-tuned for an effective evaluation? Consider utilizing the Wizard-of-Oz technique.

• What are the features you want to evaluate?
  • Which dimensions do you want to assess (e.g. Usability, User Acceptance, Trust)?
  • How will you assess each dimension?
    • What type of data are you gathering (e.g., number of clicks, task completion time, success rate).
    • How will you gather that data and under which format?
• Outline the methodology of a study to simulate system responses and gather user feedback.
  • What is your study setup?
    • Where will the study take place?
    • What type of device will you use?
  • How will the study be performed?
    • How many experimenters do you need?
    • What role does each experimenter have?
    • What instructions will you give to the user?
• Create a consent form and an interview protocol.

Upload a pdf file containing:

•  Your product name and scenario of use (~1/2 page).

•  A one-page report (can be two pages if needed) describing all changes made to the mid-fidelity prototype.

•  A two to three-page evaluation plan, following the Evaluation Plan Template (see template document)  

•  Include in the pdf a link to a max 3-minute video showing each task of your prototype (on the platform of your choice: Youtube, Sharepoint, GoogleDrive, etc.)

Exercise 5 – Evaluate the prototype in an experiment

Test your prototype

In this assignment, you will execute your user study. You can use a Wizard of Oz protocol (if needed).

Step 1: Refine your evaluation plan based on the feedback you received for Assignment 4.

Step 2: Recruit at least 5 participants (who are not students from the class and not family members -- your participants need to be impartial).

Step 3: Conduct your user study (i.e., test your prototype) following your protocol.

Step 4: Analyze your data in the most fitting way (based on the type of data collected).

Step 5: Write your key findings from the evaluation process.

Upload a pdf file containing:

•  Your product name and scenario of use (~1/2 page).

•  Describe the changes and updates made to your evaluation plan (~1/2 page).

•  A 2 to 3-page document which includes:

• participants' table
• at least one photograph of the study set up with faces blurred to protect anonymity
• description of data analysis
• graphs representing the data
• study findings (in writing)
• Include in the pdf a link to a max 3-minute video showing one person performing the user study (edit the footage if needed to fit in 3 minutes).

Final Presentation - Project Expo

Die finale Präsentation wiegt 50% der Note (in der Nachbesprechung wurde bereits diskutiert ob das angepasst wird).

Ihr müsst in eurer Gruppe ein Poster machen und einen kurzen Pitch vorbereiten.

Am Expo Tag kommen alle Gruppen in einer Halle zusammen, jeder hat seinen "Stand" und die Jury läuft rum und hört sich die Vorträge an.

Im SS25 war dies leider etwas chaotisch, da es zum einen der heißeste Tag im Jahr war und zum anderen die Halle so laut und überfüllt war, dass die eigentlich ultra coole Idee nicht ganz so gut angekommen ist. Grundsätzlich aber ein sehr tolles Konzept. Lediglich die Bewertung müsste ggf. angepasst werden, da die 10min Präsentation doch sehr kurz ist um ein ganzes Projekt zu repräsentieren und man weder Prototype noch Poster zu Bewertung abgibt.

Offizielle Angabe SS25:

This is your opportunity to present your project! Feel free to invite friends and family!

Bring your final prototype of your semester project to the Project Expo and be ready to demo it to visitors!

Bring in a poster (minimum A3 size) representing your project.

• Include idea/problem
• Sketches and prototypes
• Experiment
• Findings

Create a “pitch” (approx. 3 min)

• Explaining all the information from the project
• Initial idea/ problem
• How the solutions improve the scenario of the persona
• Information about the experiment and the findings
• Make it exciting !

The presentation has mandatory attendance on June 26th from 1-3pm. All group members need to attend. Virtual attendance is possible if facilitated by other members of YOUR group.

A jury will come to visit your booth around the time of the selected timeslot. They will introduce themselves as jury members and will listen to and grade your pitch, poster, and demo.

A no-show when the jury comes by your booth will lead to a 0 grade.

Prüfung, Benotung

SS25:

Die Benotung der Übungen macht ein einzelner Tutor, wobei je ein Tutor über das Semester ein paar Gruppen betreut. Man kann also zwischen den Abgaben Fragen stellen.

Bei der Abschlusspräsentation bewerteten je 2 Jury Mitglieder, wobei die meisten wieder Tutoren waren.

Meine Gruppe erhielt überwiegend positives Feedback, auch wenn ich gehört habe, die Bewertung sei zwischen den verschiedenen Tutoren teilweise recht unterschiedlich streng ausgefallen.

5 Übungen und 1 Abschlusspräsentation, gewichtet:

• UE1 (10%)
• UE2 (10%)
• UE3 (10%)
• UE4 (10%)
• UE5 (10%)
• Abschlusspräsentation (50%)

Anmerkung: Es wurde bereits im Nachgang darüber diskutiert, ob die Bewertung angepasst wird, da die 10min Präsentation in keinem Verhältnis zu der Arbeit des ganzen Semesters steht und außerdem nur einzelne Tutoren die gesamte Bewertung machen.

Dauer der Zeugnisausstellung

ca. 2 Wochen

SS25

Präsentation war am 26.6.

Zeugnis kam am 10.7.

Zeitaufwand

SS25: Ich hab pro UE wahrscheinlich so 3-4h reingesteckt und für die Abschlusspräsentation auch ca. so viel.

Zweite Meinung: der Zeitaufwand hängt sehr davon ab, wie viel einem das Projekt wert ist und was man für Gruppenmitglieder hat. Wer nur bestehen will, braucht wahrscheinlich nur 3h pro Aufgabe reinstecken. Auch für eine gute Note kann das reichen, wenn man es schlau macht. Am meisten Zeit frisst am Ende der Prototype. Hierzu muss man schlau abwägen, was man wirklich implementieren muss und was nicht. Meine Gruppe hat z.B. sehr viel Zeit in den Figma-Prototype gesteckt (c.a. 60h), um eine voll klickbare App zu simulieren, da es in der Angabe heißt, man braucht einen "fully-clickable" prototype. Da man diesen Prototype aber nicht abgeben muss und in den Videos sowie der Präsentation ja nur die Stellen zeigt, die man selber auswählt, müssen ja eigentlich auch nur diese klickbar sein. Wir haben daher wahrscheinlich 50 klickbare Seiten umsonst implementiert, da Video und Präsi ehzu kurz waren, um die alle durchzuklicken. Für die User-Evaluation muss man dann halt den Testpersonen sagen, was clickable ist. Daher: Wenn man sich genau überlegt, was man wirklich braucht, kann man viel zeit sparen.

Wenn dann alle Gruppenpartner mitmachen, kann man sich die restlichen Aufgaben (Sketches, Pläne, PDF erstellen, Video) gut aufteilen.

Unterlagen

Es wird eine riesige Menge von gutem Material von der LVA-Leitung zu den Themen bereitgestellt, wenn man sich das kurz mal durchliest spart man sich eigentlich auch die Vorlesungen.

Tipps

Mit verlässlichen Leute in eine Gruppe gehen und sich einen Zeitplan festlegen bis wann etwas fertig/reviewed sein muss.

Highlights / Lob

SS25: Die Möglichkeit auch online Fragen zu stellen fand ich nett für Leute die (bspw. wegen Arbeit) nicht im Hörsaal anwesend sein können.

Ich finde die LVA generell sehr schön gemacht und die Grundidee mit dem immer weiter laufenden Projekt auch toll! Auch wenn die Organisation der finalen Präsentation noch teils ausbaubar ist bzw. es manchmal Unklarheit mit den Angaben gab, denke ich ist dies für eine erste LVA gut gelungen. Meines Wissens nach ist dies die erste Abhaltung der LVA durch Prof. Cauchard, also finde ich es total okay, wenn noch nicht alles perfekt eingespielt ist und ich finde sie macht es durch einen außerordentlichen Enthusiasmus und Begeisterung für das Thema wieder wett!

Verbesserungsvorschläge / Kritik

2025SS The grading of the Course is very imbalanced, the 5 assigments are worth 50 points, and so is the Final Expo. The Expo itself was also almost unbearable, it was super crowded in a hall with basically no ventillation/air conditioning.

SS2025: the organization is a joke, the final expo was held in a room with rats and extremely high temperature, no measures were taken to protect students, the extreme heat made it impossible to hold focus.

Note: I do understand the anger of the last review, but want to add that the LVA can't help that its 35 degree at the end of june with the expo date having to be scheduled 3 month in advance. For the rats I didn't see any though I did think the hall was not the prettiest (then again I don't know how easy it is to find a free hall for 400 Students).

Materialien

Diese Seite hat noch keine Anhänge, du kannst aber neue hinzufügen.