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 Di-Gruppe: So um 15:00Uhr
fuer die Mi-Gruppe: Mo um 09:45Uhr
fuer die Do-Gruppe: Di um 15:00Uhr

A1: Beispiele fuer gute/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.).
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 2 wesentliche Verbesserungen vor.

A1 Abgabe

Beschreibungen und persönliche Bewertungen der guten und schlechten Bedienoberflächen mit Screenshots und Quellenhinweis. (pdf, ca. 1-2 Seiten Text + Screenshots).
Bericht der heuristischen Analyse und resultierenden Verbesserungen der ausgewählten schlechten Seite/Bedienoberfläche (pdf, ca. 1-2 Seiten Text + 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%

Wichtige Informationen zu A2 und A3: Bitte denken Sie daran, dass wir Ihren Code auf Plagiarismus überprüfen werden. Wenn Sie größere Stücke Code von Ihren Mitstudierenden oder aus Online-Tutorials kopieren, wird dies auffallen. Lesen Sie dazu auch unsere Hinweise zum Thema Ehrlichkeit (Link). Laden Sie bitte den fertigen Programmcode als ZIP-Datei im Moodle hoch. Erstellen Sie ganz außen eine README-Datei mit folgender Struktur: Readme-Grundgerüst. Diese trägt maßgeblich zu unserem Verständnis Ihrer Abgabe bei. Hinweis für Cordova-NutzerInnen: Geben Sie Cordova-Projekte bitte kompiliert für iOS oder Android ab.

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.cosy.svenjas-app"). 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

A3: Mobile Programmierung einer einfach App: Citybike

=== Für InformatikerInnen ===

Ihre Aufgabe umfasst die Programmierung und Gestaltung einer einfachen Citybike-App. Ziel der App soll es sein für Städte Ihrer Wahl die Prozent von ausgeliehenen Leihrädern pro Stadt anzeigen lassen zu können.

Dazu benötigen Sie drei Komponenten:

Startseite, auf der Sie eine Stadt aus einer vordefinierten Liste auswählen können (Hinweis: Sie können gerne drei Städte Ihrer Wahl festlegen, die Liste muss nicht dynamisch geladen werden)
Abfrage der Citybike-Daten über die API von Citybik.es und anschließender Berechnung der Prozent an ausgeliehenen Rädern (Hinweis: Dies kann über das Verhältnis von „empty_slots“ und „free_bikes“ berechnet werden)
Anzeigebildschirm mit gewählter Stadt und Prozent an ausgeliehenen Rädern

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 Citybike-Webseite mit mehreren Unterseiten. Die Webseite soll graphisch (mithilfe von fiktiven Zahlen) darstellen, wie der Ausleihstatus der Leihräder in 3 verschiedenen Städten ist. Die von Ihnen getroffenen Designentscheidungen sollen dabei konsistent und nachvollziehbar sein.

Dazu benötigen Sie drei Komponenten:

Startseite, auf der Sie eine Stadt auswählen können (Hinweis: Sie können gerne drei Städte Ihrer Wahl festlegen)
Anzeigebildschirm mit gewählter Stadt und Prozent an ausgeliehenen Rädern (fiktive Zahlen)
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.)

Laden Sie bitte den fertigen Programmcode als ZIP-Datei in Moodle hoch. Erstellen Sie ganz außen eine README.md Datei mit folgender Struktur: Readme-Grundgerüst. Diese trägt maßgeblich zu unserem Verständnis Ihrer Abgabe bei.

Cordova-NutzerInnen: Geben Sie Cordova-Projekte bitte kompiliert für iOS oder Android ab (ganzes Projektverzeichnis; nicht nur die kompilierte Version)
Android: Geben Sie Ihr Android-Studio Projekt ab
iOS: Geben Sie Ihr Xcode Projekt ab

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:
Nexus 5X, Android 5.1 Lollipop, 5.2” 1080x1920 420dpi, API-Level: 22 , ABI: x86 (Android Studio 2)

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