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 für die Lehrveranstaltung. Siehe Ehrlichkeit.

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

• fuer die Mo-Gruppe 1: Sa um 13:15 Uhr
• fuer die Mo-Gruppe 2: Sa um 15:00 Uhr
• fuer die Di-Gruppe: So um 16:45 Uhr
• fuer die Mi-Gruppe: Mo um 11:30 Uhr
• fuer die Do-Gruppe: Di um 16:45 Uhr

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

• Laden Sie Ihre Lösung in einer pdf-Datei hoch.
• Bennen Sie Ihre Abgabe bitte nach folgendem Schema: <Matrikelnummer>_<Nachname>_A1.pdf
• 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.

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.

Bennen Sie Ihre Abgabe bitte nach folgendem Schema: <Matrikelnummer>_<Nachname>_A<2/3>.zip

• 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 9)

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 die Readme-Datei.

---

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

---

A3: Mobile Programmierung einer einfachen App: YAWA (Yet Another Weather App)

=== Für InformatikerInnen ===

Ihre Aufgabe umfasst die Programmierung und Gestaltung einer einfachen App zur Wettervorhersage. Ziel der App soll es sein, für Städte Ihrer Wahl die 5-Tages-Vorhersage anzuzeigen.

Die App soll drei Komponenten haben:

• 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). Die Startseite soll auch Ihren Namen und Ihre Matrikelnummer beinhalten.
• Abfrage der Wettervorhersage-Daten über die API von OpenWeatherMap [1], Mapping der im 3-stündigen Abstand über einen Zeitraum von 5 zukünftigen Tagen beziehbaren Daten auf eine 5-tägige Wettervorhersage: täglich jeweils (1) Tagesmittelwert, (2) Tageshöchstwert, (3) Tagestiefstwert.
• Anzeigebildschirm mit gewählter Stadt und Wettervorhersage.

Punkte bekommen Sie aufgeschlüsselt nach den folgenden Kriterien:

• 10%: Erfolgreiche Abgabe des Codes
• 15%: Teil 1 (Startbildschirm 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 Wettervorhersage-Webseite mit mehreren Unterseiten. Die Webseite soll graphisch (mithilfe von fiktiven Zahlen) darstellen, wie die 5-tägige Wettervorhersage in drei 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 Tabelle, die einen 5-tägigen Wetterbericht darstellt: Täglich jeweils Tagesmittelwert, Tageshöchstwert, Tagestiefstwert
• 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 (Startseite 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.)

[1] https://www.openweathermap.org/forecast5

---