Analyse und Evaluation responsiver UI-Elemente von Web-Anwendungen

Responsive Design bezeichnet im Bereich des Webs die (automatische) Anpassung des User Interfaces an das aktuelle Endgerät. Spezielle Anpassungen für Smartphones, Tablets oder Desktoprechner sind mittlerweile weit verbreiteter Standard im Web und werden durch den kombinierten Einsatz von HTML(5), CSS und JavaScript erreicht. Wichtige Kriterien für die Optimierung für die unterschiedlichen Geräte sind die Anpassung des eigentlichen Contents (z.B. an die Displaygröße oder -orientierung), die Darstellungsform und Positionierung von UI-Elementen sowie die grundlegenden Interaktionsformen mit diesen (z.B. Maus vs. Touch, eingeblendete vs. externe Tastatur).

Im Rahmen dieser Arbeit soll in einem ersten Schritt analysiert werden, welche UI-Elemente von einer responsiven Gestaltung betroffen sind (z.B. Menüs, Navigation, Dropdowns, Datepicker, …) und welche verschiedenen Umsetzungen es gibt. Es sollen sowohl js-Frameworks als auch Browser analysiert werden. Im zweiten Schritt sollen Umsetzungen responsiver Elemente in einer Usability-Studie miteinander verglichen werden. Dazu soll eine einfache, browserbasierte JavaScript-Anwendung für einen realistischen Anwendungskontext (z.B. simpler Kalender- /Mail-Client/Webshop) prototypisch implementiert werden. Die Anwendung setzt unter Berücksichtigung der zu vergleichenden Frameworks bzw. Browser responsives Design für Smartphone und Desktop um. Zentrales Ziel der Arbeit ist die vergleichende Analyse und Evaluation responsiver UI-Elemente.

• Literaturrecherche (1 Woche)
• Analyse responsiver Design-Elemente verschiedener js-Frameworks und Browser (1 Woche)
• Entwurf und Implementierung einer einfachen Browser-Anwendung mit realistischem Einsatzszenario (Entwicklung eines Responsive Design für diese Anwendungen zur Interaktion auf Smartphones und Desktoprechnern) (2 Wochen)
• Evaluation der implementierten Lösungen (2 Wochen)
• Schriftliche Ausarbeitung (2 Wochen)

• Gute Programmierkenntnisse (JavaScript)
• Kenntnisse im Einsatz von js-Frameworks (react, vueJS…)
• Entwurf und Implementierung von graphischen Benutzerschnittstellen mit js-Frameworks und HTML/CSS
• Planung, Durchführung und Auswertung einer vergleichenden Usability-Studie (inkl. Vorstudie)

Nebeling, M., Norrie, M.C. (2013). Responsive Design and Development: Methods, Technologies and Current Issues. In: Daniel, F., Dolog, P., Li, Q. (eds) Web Engineering. ICWE 2013. Lecture Notes in Computer Science, vol 7977. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-642-39200-9_47

Hussain, F. (2017). Responsive web design by example. Packt, Birmingham.

Yousaf, N., Butt, W.H., Azam, F., Anwar, M.W. (2019). A Systematic Review of Adaptive and Responsive Design Approaches for World Wide Web. In: Arai, K., Kapoor, S., Bhatia, R. (eds) Advances in Information and Communication Networks. FICC 2018. Advances in Intelligent Systems and Computing, vol 887. Springer, Cham. https://doi.org/10.1007/978-3-030-03405-4_50