VU Human-Computer-Interaction

Einzelaufgaben

Es gibt drei Einzelaufgaben. Diese sind allein, d.h. nicht im Team zu bearbeiten. Gänzlich oder teilweise identische Abgaben werden nicht bewertet und führen zu einem X fuer die Lehrveranstaltung. Siehe Ehrlichkeit.

Deadline fuer die Abgabe ist jeweils 48h vor der nächsten VU, d.h.

fuer die Mo-Gruppe: Sa um 13:15Uhr
fuer die Mi-Gruppe: Mo um 11:30Uhr
fuer die Do-Gruppe: Di um 15:00Uhr
fuer die Fr-Gruppe: Mi um 16:45Uhr

A1: Beispiele fuer gute und schlechte Bedienoberflächen

Recherchieren Sie nach drei, aus Ihrer Sicht, guten und drei schlechten Bedienoberflächen, jeweils eine mobile App, eine Webseite, und ein anderweitiges Beispiel (wie z.B. die eines Automaten, Gerätes, einer Anlage, etc.), also abseits typischer Computer oder mobiler Geräte.
Begründen Sie aus ihrer persönlichen Sicht, warum Sie diese Bedienoberflächen als gut bzw. als schlecht einstufen und zeigen Sie dazu Photos oder Screenshots, die Ihre Begründungen untermauern.
Wählen sie ein von Ihnen als schlecht bewertete Bedienoberfläche oder Website aus. Folgende Aufgaben beziehen sich nur mehr auf diese Bedienoberfläche/Seite.
- Für die ausgewählte schlechte Seite: Analysieren sie diese Seite/Oberfläche basierend auf den in der VU durchgenommenen Nielsen Heuristiken.
- Für die ausgewählte schlechte Seite: Schlagen Sie zwei wesentliche Verbesserungen vor.

A1 Abgabe

Die Abgabe erfolgt über Gitlab in ihrem Projekt im Branch A1
Erstellen Sie bitte 3 Ordner: Dokumente, Source, App
Laden Sie Ihre Lösung in einer pdf-Datei in den Ordner Dokumente im Branch A1 hoch.
Der Abgabe Branch wird erst nach 3 Tagen gesperrt, der letzte Commit in diesem Branch zählt als Abgabedatum
Bennen Sie Ihre Abgabe bitte nach folgendem Schema: <Matrikelnummer>_<Nachname>_A1.pdf
Beschreibungen und persönliche Bewertungen der drei guten und drei schlechten Bedienoberflächen mit Screenshots und Quellenhinweis. (jeweils mind. 200, max. 250 Wörter, dazu illustrierende Screenshots).
Zu der einen, schlechten Bedienoberfläche, die Sie für die genauere Betrachtung ausgewählt haben: Bericht der heuristischen Analyse und resultierenden Verbesserungen der ausgewählten schlechten Seite/Bedienoberfläche (zusätzlich mind. 300, max. 400 Wörter, dazu illustrierende Screenshots)

Bewertungsschema A1

Bedienoberfläche mit persönlicher Begründung (gut)
- App; 10%
- Website; 10%
- sonstiges; 10%
Bedienoberfläche mit persönlicher Begründung (schlecht)
- App; 10%
- Website; 10%
- sonstiges; 10%
Heuristische Evaluierung & Verbesserungsvorschläge
- 30%
Aufbereitung: Screenshots, Quellen, etc.
- 10%

A2: Mobile Programmierung: Hello World!

=== Für InformatikerInnen ===

Installieren Sie das Programmier-Framework für das Betriebssystem Ihrer Wahl (Android, iOS, Cordova) und erstellen Sie eine erste App mit einem eindeutigen Namen (z.B. für Android "at.ac.univie.hci.MyA2App"). Die App soll eine klassische „Hello World“-App sein, welche auf einem Start-Screen Ihren Namen und Ihre Matrikelnummer anzeigt.

Punkte bekommen Sie aufgeschlüsselt nach den folgenden Kriterien:

50%: Erfolgreiche Abgabe des Codes
50%: App läuft flüssig und ohne Bugs im IDE-eigenen Emulator

=== Für Nicht-InformatikerInnen ===

Erstellen Sie eine Webseite mithilfe von HTML, welche Ihren Namen und Ihre Matrikelnummer anzeigt.

Punkte bekommen Sie aufgeschlüsselt nach den folgenden Kriterien:

50%: Erfolgreiche Abgabe des Codes
50%: Webseite wird auf einem Smartphone-Bildschirm gut lesbar dargestellt

A2 Abgabe

Die Abgabe erfolgt über Gitlab in ihrem Projekt im Branch A2
Erstellen Sie bitte 3 Ordner: Dokumente, Source, App
Geben Sie Ihr gesamtes Projekt im Source Ordner ab
Erstellen Sie eine kompilierte Version Ihrer App und geben Sie diese im Ordner App ab
Der Abgabe Branch wird erst nach 3 Tagen gesperrt, der letzte Commit in diesem Branch zählt als Abgabedatum

Erstellen Sie im Dokumente Ordner eine README.md Datei mit folgender Struktur: Readme-Grundgerüst. Diese trägt maßgeblich zu unserem Verständnis Ihrer Abgabe bei.

iOS Apps werden mit folgendem Gerät (Simulator) getestet/bewertet:
iPhone 6S, iOS 9, 4.7” 1334x750 420dpi (Xcode 7)

Android Apps werden mit folgendem Gerät (Simulator) getestet/bewertet:
Pixel 2, API-Level 24-28 Geben Sie bitte im readme bekannt für welche Version Sie entwickelt haben!

Cordova Apps werden mit dem genannten iOS (iPhone 6S) oder Android (Pixel 2) Simulator getestet/bewertet. Bitte geben Sie die App kompiliert ab und schreiben Sie Ihre Präferenz (iOS oder Android) in das Readme.

A3: Mobile Programmierung einer einfachen App: RhymR

=== Für InformatikerInnen ===

Ihre Aufgabe umfasst die Programmierung und Gestaltung einer einfachen App, die nach Inspirationen suchende Rapper*Innen dabei hilft, passende Wörter zu finden. Ziel der App ist es, zu selbstgewählten Wörtern passende andere Wörter (etwa Synonyme, Antonyme, sich reimende oder anderswie in Verbindung stehende Wörter) zu finden und dem/der Nutzer*In anzuzeigen.

Die App soll drei Komponenten haben:

Startseite, auf der Sie Nutzer*Innen ermöglichen, in einem Suchfeld ein Wort einzugeben. Die Startseite soll auch Ihren Namen und Ihre Matrikelnummer beinhalten.
Abfrage der passenden Wörter über die API von Datamuse [1]. Auf [1] finden Sie eine Liste an 15, über die API beziehbaren Arten verwandter Wörter. Wählen Sie drei dieser Arten aus (z.B. “Synonyms”, “Approximate Rhymes” und “Frequent followers”) - je nachdem, was Ihrer Meinung nach dem/der auf der Leitung stehenden Rapper*In am ehesten hilft!
Anzeigebildschirm mit den Resultaten. Dabei soll der/die Nutzer*In Ergebnisse (zusammen mit dem jeweiligen, ursprünglichen Suchbegriff) auch einfach für später speichern und diese Liste anzeigen können. (Diese “Favorite”-Liste muss für A3 nicht über das Schließen der App hinaus gespeichert werden.)

Punkte bekommen Sie aufgeschlüsselt nach den folgenden Kriterien:

10%: Erfolgreiche Abgabe des Codes
15%: Teil 1 (Start- und Endbildschirm vorhanden)
30%: Teil 2 (API-Abfrage und Berechnung)
15%: Teil 3 (Bedienoberfläche und Interaktionen sind schlüssig designt)
15%: App läuft flüssig und ohne Bugs im IDE-eigenen Emulator
15%: Lesbarkeit und Struktur des Programm-Codes (sinnvolle Klassen- und Methodennamen, Code ist kommentiert, Einrückungen etc.)

=== Für Nicht-InformatikerInnen ===

Ihre Aufgabe umfasst die Gestaltung einer einfachen Wörterbuch-Webseite mit mehreren Unterseiten. Die Webseite soll tabellarisch (mithilfe von vorher gewählten Worten) darstellen, welche möglichen (1) Synonyme, (2) sich reimenden Worte, (3) passende Phrasen es zu vorher bestimmten (vom/von der Nutzer*In nicht selbst auswählbaren) Worten gibt.

Dazu benötigen Sie drei Komponenten:

Startseite, auf der Sie ein Wort auswählen können. Sie können gerne drei Wörter Ihrer Wahl festlegen.
Anzeigebildschirm mit gewähltem Wort und Tabelle, die dazugehörige Ergebnisse auflistet. Passende Wörter können Sie z.B. über [2] finden.
Separate CSS-Datei mit einheitlichem Design für alle Unterseiten

Punkte bekommen Sie aufgeschlüsselt nach den folgenden Kriterien:

10%: Erfolgreiche Abgabe des Codes
15%: Teil 1 (Start- und Endbildschirm vorhanden)
30%: Teil 2 (Bedienoberfläche und Interaktionen sind schlüssig designt)
15%: Teil 3 (CSS-Datei für gesamte Webseite)
15%: Webseite wird auf Smartphone-Bildschirm korrekt angezeigt
15%: Lesbarkeit und Struktur des HTML- und CSS-Codes (sinnvolle Benennung, Metadaten, Einrückungen etc.)

A3 Abgabe

Die Abgabe erfolgt über Gitlab in ihrem Projekt im Branch A3
Erstellen Sie bitte 3 Ordner: Dokumente, Source, App
Geben Sie Ihr gesamtes Projekt im Source Ordner ab
Erstellen Sie eine kompilierte Version Ihrer App und geben Sie diese im Ordner App ab
Der Abgabe Branch wird erst nach 3 Tagen gesperrt, der letzte Commit in diesem Branch zählt als Abgabedatum