Ziel des Projekts ist die Entwicklung der App ERIKA, die als digitale Begleiterin für klimabewusstes Handeln im Alltag fungiert. Die App soll dazu beitragen, klimafreundliches Verhalten zu fördern und regionale Aktivitäten in der Region Waidhofen a/d Ybbs sichtbar zu machen. Dabei liegt der Fokus nicht nur auf nachhaltigen Inhalten, sondern auch auf nachhaltigen Aspekten bei der Entwicklung und dem Design der App, um das Konzept der Nachhaltigkeit ganzheitlich zu implementieren.

Die Umsetzung

Während meiner Tätigkeit im Forschungsprojekt ERIKA habe ich umfassend recherchiert, welche Faktoren für die Entwicklung einer nachhaltigen Website entscheidend sind.

Darüber hinaus war ich an der Recherche und Ausarbeitung von Forschungsfragen beteiligt, die sich mit klimafreundlichem Handeln im Alltag, den Auswirkungen verschiedener Maßnahmen, der Rolle der Digitalisierung und der Anwendung von Gamification zur Unterstützung nachhaltigen Verhaltens beschäftigen.

Ich habe Umfrageergebnisse ausgewertet und aufbereitet sowie einen klickbaren Prototypen der App erstellt.

Nachhaltiges Web- & Appdesign

In allen Lebensbereichen bemühen wir uns um Nachhaltigkeit, doch selten wird bedacht, wie stark das Internet unseren Planeten belastet. Die Kohlenstoffemissionen des Internets entsprechen denen der Luftfahrtindustrie und machen etwa 2 % der globalen Emissionen aus.

Bei meiner Recherche zu nachhaltigem Web-, App- und E-Mail-Design bin ich auf zahlreiche Aspekte gestoßen, die zur Nachhaltigkeit beitragen können. Dazu gehören grünes Hosting, SEO, Design, UX und Performance-Optimierung. Beispielsweise tragen die Wahl von Farben und Schriftarten, effizienter Code, minimierte HTTP-Anfragen, optimierte Bilder und die Reduzierung von Drittanbieter-Einbettungen zur Reduktion des CO₂-Fußabdrucks bei.

Nachhaltiges Webdesign ist nicht nur aus ökologischer Sicht sinnvoll, sondern verbessert auch die Benutzer*innenerfahrung, das Suchmaschinen-Ranking und die Zugänglichkeit, insbesondere in Regionen mit eingeschränktem Internetzugang. Webseiten, die weniger Ressourcen verbrauchen, laden schneller und bieten eine bessere Performance, was die Zufriedenheit der Nutzer*innen erhöht und die Reichweite steigert.

Die Ergebnisse meiner Recherchen habe ich schließlich in einem Blogartikel zusammengefasst.

Blogartikel ansehen

Prototyping

Darüber hinaus habe ich einen Figma-Prototypen für eine User Story des ERIKA Services erstellt. Dieser Klickdummy visualisiert, wie der Service im Alltag genutzt werden kann, um die Benutzer*innen über aktuelle nachhaltige Initiativen zu informieren.

Der Prototyp beinhaltet ein Formular, über das Nutzer*innen eigene Initiativen einreichen können. Nach Prüfung und Freigabe erscheinen diese Initiativen in der Kalender- und Kartenansicht. So können Nutzer*innen nicht nur an Veranstaltungen teilnehmen, sondern auch eigene Ideen einbringen, um ihren ökologischen Handabdruck zu vergrößern.

In der Kalender- und Kartenansicht können Nutzer*innen alle bevorstehenden Initiativen und Events, wie zum Beispiel den Wochenmarkt oder den bevorstehenden Flohmarkt, einsehen. Jedes Event verfügt über eine Detailansicht mit einer Beschreibung sowie Informationen zu den Terminen und dem Veranstaltungsort. Bei aktivierter GPS-Funktion erhalten Nutzer*innen Benachrichtigungen, wenn sie sich in der Nähe eines Events befinden.

The post ERIKA | Forschungsprojekt – TFG appeared first on Mobile USTP MKL.

Projektbeschreibung, Funktionalitäten

Konzept

Als Gruppenprojekt für das zweite Semester der Masterklasse haben wir uns zu fünft entschieden, unsere Web-App, die den Namen „Bevry“ trägt, aus dem ersten Semester weiterzuentwickeln. Bevry richtet sich an alle Cocktail-Liebhaber, die gerne mit neuen Getränkekreationen experimentieren und ihre Rezepte teilen wollen.

Bestehende Funktionalitäten

Die bereits im letzten Semester umgesetzten technischen Funktionen der App bestanden primär auch dem Erstellen, Teilen, und Entdecken von Cocktail-Rezepten aller Art. Es können nur registrierte und angemeldete Nutzer:innen die Rezeptsammlung sehen. Rezepte sind in Kategorien unterteilt, die ein zielgerichtetes Filtern ermöglichen. Mithilfe einer Suchleiste können Nutzer:innen ihre Suche zusätzlich verfeinern.
Rezepte können von den Nutzer:innen, die sie erstellt haben, bearbeitet oder auch gelöscht werden. Ebenfalls können Nutzer:innen Rezepte liken und so alle Lieblingsrezepte – ob es die eigenen sind oder von anderen Nutzer:innen erstellt – in einer Favoritenliste sammeln. Eine Bewertungsfunktion erlaubt es, Rezepten sowohl eine Sternebewertung zu verleihen als auch ein öffentliches Kommentar zu posten. Alle dieser bestehenden Ansichten erhielten dieses Semester ein ansprechenderes Design.

Neu umgesetzte Funktionalitäten

Im Rahmen des 2. Semesters haben wir unsere Web-App um zahlreiche neue Funktionalitäten erweitert, um das Nutzererlebnis noch besser zu gestalten. Mit der neuen Bar Inventory Funktion behalten die Nutzer:innen stets den Überblick über ihre vorhandenen Zutaten. Die Shopping List erleichtert das Einkaufen, indem fehlende Zutaten bereits vom Rezept aus hinzugefügt werden können. Für den Unterhaltungsfaktor bei Party sorgen unsere beiden neu integrierten Minigames. Einerseits gibt es das Turn-Based Multiplayer Minigame “Spin the Wheel” und andererseits noch das Singleplayer Minigame “Mix it Up”.

Zudem können Nutzer:innen nun eigene Zutaten anlegen und Substitutes hinzufügen, um Rezepte noch individueller anzupassen als je zuvor. Die neue Save Draft Funktion ermöglicht es, während des Erstellens eines Rezeptes die View zu verlassen und später an dem Rezept weiterzuarbeiten. Das Design der App hat ebenfalls ein frisches und benutzerfreundliches Designupdate erhalten.

Zusätzlich wird nun die E-Mail-Adresse verifiziert, die Einstellungen wurden erweitert, eine Ladeanimation wurde ergänzt, und Empfehlungen basierend auf den aktuell im Barbestand vorhandenen Zutaten wurden hinzugefügt. Die Empfehlungen werden gemäß der übereinstimmenden Barbestand-Zutaten mit den für das Rezept benötigten Zutaten absteigend angeordnet (siehe Chip-Komponente links neben dem Like-Button).

Diese Erweiterungen machen unsere Web-App zu einem unverzichtbaren Tool für alle Cocktail-Liebhaber und Hobby-Barkeeper.

Technologien

Bestehende Technologien

Alle Technologien aus dem letzten Semester haben wir beibehalten. Hier nochmal zur Erinnerung:

• Vue.js: Unser Frontend-Framework
• Vuetify: Unser UI-Framework
• Pinia: Unsere State Management Library
• NestJS: Unser Backend-Framework

Zusätzlich verwenden wir im Backend:

• TypeORM: Für die Datenbankverwaltung
• JWT: Für die Authentifizierung
• bcrypt: Für die Passwortverschlüsselung
• OpenAPI: Für die API-Dokumentation mit Swagger

Erweiterungen

Außerdem haben wir als neues Paket lottie-web installiert, um die Ladeanimation und die “Spin the Wheel”-Animation anzeigen zu können. Diese wurden von Elisa, unserer Animationsdesignerin, im Lottie-Format angefertigt. Mit Lottie-web können wir Adobe After Effects-Animationen, die als JSON exportiert wurden, problemlos anzeigen. Nachdem es mit den Paketen vue-lottie und vue3-lottie nicht geklappt hat, sind wir bei lottie-web geblieben. Nach anfänglichen Schwierigkeiten mit der korrekten Anzeige der Animationen ging es dennoch recht gut. Es war cool zu sehen, dass es dann doch relativ einfach ist, Animationen anzuzeigen, nachdem uns das Lottie-Format vorher nicht geläufig war.

Für die E-Mail-Verifizierung haben wir die Pakete nodemailer und maildev benutzt. Maildev war super, um das Senden der E-Mails lokal testen zu können, da es als SMTP-Server fungiert. Es bietet eine webbasierte Benutzeroberfläche, über die Entwickler die gesendeten E-Mails einsehen und testen können, ohne dass diese tatsächlich über das Internet versendet werden müssen.

Während Maildev als lokaler SMTP-Server dient, um E-Mails zu empfangen und zu testen, wird Nodemailer verwendet, um E-Mails zu generieren und an einen SMTP-Server (wie Maildev oder einen echten E-Mail-Server) zu senden. Es ist ein Node.js-Modul, das es ermöglicht, E-Mails einfach aus Node.js-Anwendungen heraus zu versenden. Somit konnten wir das E-Mail-Versenden dann schließlich über den echten E-Mail-Server bei world4you laufen lassen.

Minigames

Grundlegendes

Um das Mischen von Cocktails noch spaßiger zu machen, haben wir Bevry um den Games Hub erweitert. Dieser Bereich der App ist den Minigames gewidmet. Wir haben uns dazu entschieden, zwei Spiele zu entwickeln, die in unterschiedlichen Kontexten zur Geltung kommen können. Da Bevry den gemeinsamen Spaß an Cocktails hervorheben soll, musste eines der Spiele ein Party-Game sein, das mit mehreren Spieler:innen gespielt werden sollte. Dieses Minigame verwendet das neue Bar Inventory und damit Zutaten, die die Spieler bereits bei der Hand haben. Auf technischer Seite basiert es auf auf Timeouts und Zufallswerten.

Andererseits soll der Cocktail-Spaß auch abseits der Cocktail-Party nicht aufhören müssen – daher entschieden wir uns dazu, aus dem zweiten Minigame zu ein Singleplayer-Game zu machen, mit dem Spieler:innen jederzeit den Spaß am Cocktails mischen genießen können, ohne tatsächlich Zutaten zu benötigen. Gleichzeitig bedient sich dieses Minigame an echten Rezepten aus Bevrys Rezeptesammlung. Damit können Spieler:innen neue Rezepte spielerisch entdecken und die Cocktails bei Interesse auch selbst machen. Für die Umsetzung dieses Spiels wurde die HTML Canvas API verwendet.

Spin The Wheel

Im Minigame Spin The Wheel geht es vor allem um Schnelligkeit und Spaß in der Gruppe. Zu Beginn werden zufällige Zutaten zusammengesucht und bereit gestellt, die dann im Spiel zu einer wilden Mischung werden. Der Reihe nach müssen die Spieler:innen ein “Rad drehen”, um eine Zutat zu wählen, die in ein Glas in der Mitte gefüllt werden muss. Sobald das erledigt ist, wird das Handy an die nächste Person weitergegeben. So geht es weiter, bis der versteckte Timer abläuft und die letzte Person, die das Rad dreht, das Gemisch trinken muss. Je nach Zutaten kann diese Spieler:ien also Gewinner:in oder Verlierer:in des Spiels sein.

Das Spiel besteht aus einem Setup, in dem die zufälligen Zutaten aus dem Barbestand (mit oder ohne alkoholische Zutaten) ausgewählt und angepasst werden können. Dann müssen alle Zutaten und ein Glas in der Mitte platziert werden, bevor das Spiel gestartet werden kann. Zusätzlich ist es möglich eine Anleitung zu lesen, die den Spielablauf erklärt.

Bei Spielstart wird ein zufälliger Timer in einem vorgegebenen Zeitraum gestartet, der das Spielende vorgibt. Nach Ablauf des Timers kommt man zum Endscreen, der die letzte Spieler:in dazu auffordert, das Gemisch zu trinken. Es ist möglich ein Spiel mit denselben Einstellungen nochmals zu starten oder zurück zum Setup zu navigieren, um eine neue Runde mit anderen Zutaten zu beginnen.

Mix It Up

Das Minigame Mix It Up ist ein Singleplayer Spiel, in dem die Spieler:innen Rezepte der App besser kennenlernen sollen. Das Ziel ist es alle richtigen Zutaten eines Rezeptes mit einem Glas einzusammeln. Dabei sollen falsche Zutaten vermieden werden, um möglichst keine Leben zu verlieren. Sobald ein Rezept fertig ist, kommt man zum nächsten Level mit dem nächsten Rezept. Das passiert so lange, bis man keine Leben mehr hat und der erreichte Punktestand in einem Highscore Board gespeichert wird.

In diesem Fall wird im Setup nur ein zufällig vorausgewähltes Rezept angezeigt. Bei Bedarf können die zugehörigen Zutaten nachgelesen werden, ansonsten kann man sich das Spiel etwas schwieriger machen und es ohne diese probieren. Bei Bedarf kann eine Anleitung durchgelesen werden, bevor das Spiel gestartet wird. Im Spiel fallen zufällige Zutaten herunter, die eingesammelt oder vermieden werden sollen. Jede Zutat, die für das Rezept benötigt ist, muss von dem:der Spieler:in zumindest ein Mal eingesammelt werden, um den Level abzuschließen. Falls es nochmal eingesammelt wird, werden Bonuspunkten gesammelt, die für den Highscore am Ende herangezogen werden. Falsche Zutaten führen dazu, dass eines von insgesamt 5 Leben abgezogen wird. Bis der:die Spieler:in alle Leben verliert sollen so viele Punkte gesammelt und Level abgeschlossen werden, wie möglich. Am Endscreen wird der erreichte Rang und Punktestand angezeigt, gemeinsam mit dem Highscore Board, dass die besten Punktestände aller Spieler:innen inkludiert.

Zusammenarbeit

Scrum

Von der Zusammenarbeit im letzten Semester nahmen wir einige Learnings im Bezug auf Zeit- und Projektmanagement in dieses Semester mit. Wir nahmen uns von Anfang an vor, Scrum für unseren Arbeitsprozess in diesem Semester zu verwenden, um eine bessere Kontrolle über Deadlines, Arbeitsteilung, und To-Dos zu haben.

Wir starteten am Donnerstag, dem 7. März, mit unserem ersten zweiwöchigen Sprint. Das Sprint Planning und Sprint Review passierte demnach immer alle zwei Wochen während unserem wöchentlichen Meeting am Donnerstag.

Wir nutzten Jira, um Tickets zu erstellen und deren Status auf dem Kanban-Board zu verfolgen. Dieser Prozess erwies sich als äußerst hilfreich, nicht nur um unsere anfangs gesetzten Deadlines für individuelle Features einzuhalten, sondern auch in Bezug auf Kommunikation. Da nun auf einen Blick klar war, wer gerade woran arbeitete, konnten wir untereinander abhängige To-Dos besser abstimmen und Blockaden schnell an die richtige Person kommunizieren.

Außerdem erstellten wir Akzeptanzkriterien für die individuellen Tickets, um Missverständnisse dahingehend zu vermeiden, wann ein To-Do als abgeschlossen gelten konnte. Dieses Verfahren erwies sich als äußerst nützlich, auch um Details zu einzelnen Requirements festzuhalten (z.B. wie mit der Groß- und Kleinschreibung von Benutzernamen umgegangen werden sollte), sodass wir nicht versehentlich aneinander vorbeiarbeiteten. Auch die Organisation der Tickets in einzelne Epics war hilfreich, um schnell einen Überblick zu bekommen und zu behalten.

Die wöchentlichen Meetings nutzten wir, um einander zu unserem jeweiligen Stand zu informieren und um aktuelle Probleme und nächste Schritte zu besprechen. Außerdem nutzten wir die Meetings, um aktuelle Aufgaben zu besprechen, welche die Ausschreibungen betrafen, und trafen gemeinsame Entscheidungen zu gelieferten Designvorschlägen, Entwürfen, und mehr.

Ausschreibungen

Im Rahmen der Lehrveranstaltung Tun/Forschen/Gründen erstellten wir Ausschreibungen zu verschiedenen Aufgabenbereichen für Bevry. Diese umfassten Fotografie für Cocktail-, Marketing- und Portfoliofotos; Design zur Überarbeitung aller Screens für ein einheitliches visuelles Erscheinungsbild und Interaktionskonzept sowie für den Entwurf von Custom Icons; Sound Design für die Erstellung von Soundtracks und Sound Effects, vor allem für die Minigames; und Animation für eine Ladeanimation sowie für Animationen innerhalb der Minigames.

Um die Kommunikation für die Auftragnehmenden einfach zu gestalten, definierten wir die jeweiligen Auftraggeberinnen der Ausschreibung als primäre Kontaktperson für die Auftragnehmenden. Zusätzlich wurden alle Auftragnehmenden zum Jira-Projekt hinzugefügt und Tickets für ihre einzelnen Aufgaben erstellt, sodass alle einen Überblick über den aktuellen Stand des Projekts behalten konnten.

Anna: Fotografie

Die Zusammenarbeit mit Anna, unserer Fotografin, war insgesamt positiv. Mit ihr wurden Fotos von Cocktails für die App und Portfoliofotos der Gruppe erstellt.

Wir arbeiteten nur bei den Fotoshootings mit Anna in Person gemeinsam, während die Besprechung restlicher Anforderungen größtenteils online verlief. Dies führte manchmal zu Kommunikationsschwierigkeiten.

Ein großes Hindernis waren die Deadlines. Ursprünglich geplante Termine mussten verschoben werden und die Fotos wurden teilweise sehr verspätet zur Auswahl bereitgestellt, was wiederum zu spätem Erhalt der bearbeiteten Bilder führte. Trotz Schwierigkeiten gelang es uns, die notwendigsten Fotos bis zur Abgabe einzubinden.

Paul: Audio

Auch die Zusammenarbeit mit Paul für die Soundeffekte, verlief erfreulich. Paul hielt uns regelmäßig auf dem Laufenden, informierte über neue Entwicklungen und bat um Feedback, was den Prozess sehr transparent gestaltete.

Es gab jedoch einige chaotische Momente, besonders hinsichtlich der Deadlines und des Endprodukts. Diese waren größtenteils auf Verzögerungen bei den Minigames und anfängliche Unklarheiten in unserer Gruppe zurückzuführen. Wir waren uns zu Beginn nicht sicher, ob wir auch Sounds außerhalb der Games benötigen und welche das sein sollten.

Die Kommunikation erfolgte teilweise auch mit Elisa, die für die Animationen zuständig war. Besonders bei der Abstimmung zur “Spin the Wheel”-Animation und dem dazugehörigen Sound mussten wir eng zusammenarbeiten. Trotz der anfänglichen Herausforderungen haben die Soundeffekte und die Musik gut zu unseren Vorstellungen sowie den Animationen gepasst, und sie tragen erheblich zum gewünschten Spielgefühl bei.

Julia: Design

Die Zusammenarbeit mit Julia, unserer Grafikdesignerin, war sehr erfreulich. Sie hielt alle Deadlines ein und zeigte sich äußerst flexibel, um unseren Anforderungen gerecht zu werden.

Julia gestaltete sowohl die Screendesigns als auch die Icons für die App. Sie lieferte uns drei Entwürfe für die Screendesigns, aus denen wir einen Vorschlag auswählten. Anschließend designte sie alle Screens basierend auf unserem Feedback. Auch bei den Icons für die Gläser gab es Besprechungen und Änderungen, die schnell und zuverlässig eingearbeitet wurde.

Dank ihrer Pünktlichkeit und Anpassungsfähigkeit konnten wir die Grafiken rechtzeitig in die App integrieren.

Elisa: Animation

Dank Elisas Mitwirkung konnten wir die App mit einer Ladeanimation sowie mit Animationen für die Minigames aufwerten. Elisa lieferte für jede dieser Animationen mehrere Entwürfe und Designvorschläge, die zur Markenidentität von Bevry und zum bestehenden Erscheinungsbild passten.

Bezüglich grafischer Assets (vor allem für die neuen Gläser-Icons) und Abstimmung mit dem Sound Design für diese Animationen arbeitete sie auch mit Julia und Paul zusammen, was ohne Probleme funktionierte.

Elisa war über die gesamte Zusammenarbeit hinweg verlässlich, pünklich, und lieferte qualitativ hochwertige Arbeit. Auch als die Zeit vor der Projektevernissage knapp wurde und bei den Dateiexporten einige händische Korrekturen notwendig waren, konnten die fertigen Animationen dank der Flexibilität seitens Elisa noch rechtzeitig eingebunden werden.

Hürden und Schwierigkeiten

Organisation

Die Organisation gestaltete sich manchmal knifflig, vor allem wenn es darum ging, mit den Tun/Forschen/Gründen-Mitgliedern zusammenzuarbeiten. Wir mussten geeignete Deadlines finden, die sowohl mit ihren Ergebnissen als auch mit unseren eigenen Projekten harmonierten. Außerdem war es wichtig, klar abzustimmen, welche Aufgaben priorisiert werden sollten, bevor wir neue beginnen konnten. Die Kommunikation zwischen Backend und Frontend war ebenfalls entscheidend und erforderte eine genaue Koordination.

Umsetzung

Bei der Umsetzung stießen wir auf verschiedene Herausforderungen. Zum Beispiel machten uns die Minigames im Canvas einige Kopfschmerzen, insbesondere das Stoppen der GameLoop beim Verlassen der Seite und die richtige Anzeige von Animationen und Bildern. Auch das Timing und der Einbau von Animationen und Sound waren nicht immer einfach. Die Einrichtung des Mail-Servers für die E-Mail-Verifizierung erwies sich ebenfalls als komplex. Die Verwendung von Vuelidate zur Formularverifizierung erforderte genaue Aufmerksamkeit, ebenso wie das korrekte Positionieren von Stylingelementen aus den Screendesigns.

Teamwork

Im Teamwork gab es auch einige Herausforderungen zu bewältigen. Die Zusammenarbeit mit den Mitgliedern von Tun/Forschen/Gründen erforderte eine klare Kommunikation und eine klare Ansprechperson. Das regelmäßige Aktualisieren, wenn Aufgaben abgeschlossen waren, erwies sich als nützliche Praxis. Es war wichtig, die Aufgaben fair aufzuteilen und sicherzustellen, dass jedes Teammitglied die Möglichkeit hatte, an Aufgaben zu arbeiten, die sie interessierten. Wir mussten auch darauf achten, dass es keine Überschneidungen im Code gab, was eine kontinuierliche Kommunikation und die Nutzung von Branches im Versionskontrollsystem erforderte.

Personal Learnings

Sara

Ich arbeitete an verschiedenen Aufgaben im Frontend wie der Entwicklung von Filtern, der Implementierung des Barbestands und anderen Funktionen. Auch bei der Gestaltung der Minigames konnte ich ein wenig mitwirken.

Dieses Semester verwendeten wir Jira und Confluence, was das Projektmanagement erheblich erleichterte. Diese Tools halfen uns, Aufgaben effizient zu verteilen und den Überblick zu behalten. Obwohl es gegen Ende des Projekts etwas stressig wurde, konnten wir dank der guten Organisation die Arbeitsprozesse gut koordinieren.

Laura

Ähnlich wie im letzten Semester habe ich wieder am Backend mitgearbeitet und mein Wissen in diesem Bereich ausweiten können. Zusätzlich habe ich sehr viel an den Minigames mitgearbeitet, diese konzipiert, Spielregeln überlegt und schließlich umgesetzt. Bei der Umsetzung war ich besonders an der Game Logik und dem Setup beteiligt. Außerdem habe ich die Musik und Soundeffekte in der App eingebaut und mich darum gekümmert, dass diese an den richtigen Stellen abgespielt und pausiert werden. Durch das Benutzen von Jira und Confluence habe ich auch noch mehr im Punkt Organisation mitnehmen können. Unser Workflow war auch durch zusätzliche wöchentliche Meetings (Bevry Weekly) um einiges strukturierter und hat mir das Entwickeln neuer Skills im Bereich des Teamworks ermöglicht.

Sophia

Ich konnte in diesem Semester meine Programmierkenntnisse weiter vertiefen. Abgesehen von Frontend-Entwicklung war ich vor allem im Game Design und -Development involviert. Hier konnte ich auf meinen Game-Design-Kenntnissen aus dem Bachelorstudium aufbauen. Laura und ich nutzten häufig Pair Programming bei der Entwicklung der Minigames, wodurch ich ebenfalls meine Programmierkenntnisse verbessern und von ihr lernen konnte. Die Verwendung von Scrum war für mich zwar nicht komplett neu und war mir ein großes Anliegen für dieses Semester, aber erforderte eine gewisse Disziplin und Kommunikationsfähigkeiten, die mir für zukünftige Projekte von Nutzen sein werden. Die Tatsache, dass wir durch die Verwendung von Scrum so effizient waren und so viel umsetzen konnten, hat für mich bestätigt, wie wertvoll die Zeit ist, die in Projektmanagement investiert wird. Auch die Organisation und Koordination mit Elisa für die Animationen stellten sich als äußerst lehrreich heraus, und ich konnte viel über die Implementierung von Animationen im Webbereich dazulernen.

Vanessa

Durch meine Rolle im Projekt habe ich wertvolle persönliche Lernerfahrungen gesammelt, insbesondere im Bereich Frontend-Entwicklung und Designimplementation. Ich habe meine Fähigkeiten in Javascript und der Kommunikation mit dem Backend deutlich erweitert und gelernt, wie wichtig ein benutzerfreundliches und ansprechendes Design für den Erfolg einer Web-App ist. Die Umsetzung der neuen Features hat mir gezeigt, wie man komplexe Anforderungen in eine intuitive Benutzeroberfläche integriert. Darüber hinaus habe ich erneut auch gute Einblicke in die Sprint Planung gewonnen, was uns als Team dieses Semester sehr geholfen hat, die Arbeitsprozesse effizienter zu gestalten und die Teamarbeit zu koordinieren. Diese Erfahrungen haben nicht nur meine technischen Fähigkeiten gestärkt, sondern auch meine organisatorischen und kommunikativen Kompetenzen verbessert.

Katharina

Dieses Semester haben wir deutlich strukturierter gearbeitet, indem wir alle zwei Wochen Aufgaben zugewiesen haben. Das hat die Arbeit erleichtert und dafür gesorgt, dass kontinuierlich am Projekt gearbeitet wurde. Auch die wöchentlichen Treffen haben geholfen, den Fortschritt zu verfolgen und Probleme frühzeitig zu erkennen. Mit dem Deployment gab es gegen Ende einige Probleme, das hätten wir deutlich früher angehen sollen, um den Stress am Ende zu vermeiden. Dabei stellten wir fest, dass es Unterschiede zwischen der lokalen Entwicklung und der Live-Version auf unserer Domain bevry.app gab. Zum Beispiel funktionierten manche Backend-Calls plötzlich nicht mehr, Bilder wurden nicht angezeigt, und die Ladeanimation auf dem iPhone funktionierte nicht richtig. Auch für das Testing hätten wir mehr Zeit einplanen müssen, da dabei einige unerwartete Probleme auftraten.

Dennoch konnte ich in diesem Semester mehr Erfahrung in der Backend-Entwicklung sammeln und war auch in die Frontend-Entwicklung involviert. Ich half beispielsweise dabei, Julias Designs umzusetzen, die Glasicons einzubinden und kümmerte mich um die Ladeanimation. Backendseitig habe ich mich um die Shoppinglist, Substitutes und Ingredients gekümmert. Auch das Usermanagement habe ich ausgebaut und die E-Mail-Verifizierung ergänzt.

Alles in allem bin ich zufrieden mit dem, was wir erreicht haben, besonders da wir uns sehr viel vorgenommen hatten. Das haben wir vor allem der guten Kommunikation und Organisation während des Semesters zu verdanken. Jeder war motiviert und gab sich Mühe, seine persönlichen Sprintziele zu erreichen.

The post Bevry | Semesterprojekt SoSe24 appeared first on Mobile USTP MKL.

Übersicht

1. Einleitung
2. Tools
3. Vorteile
4. Grünes Hosting
5. SEO
6. Design und UX
7. Performance-Optimierung
   • Programmierpraktiken
   • Code Komprimierung
   • JavaScript
   • Bilder
   • Drittanbieter-Einbettungen und Videos
   • Schriftart
8. Apps
9. E-Mails
10. Checkliste für nachhaltiges Web-/Appdesign
11. Checkliste für nachhaltiges E-Mail-Design
12. Forschungsprojekt “ERIKA”
13. Literatur
14. Bildquellen

Einleitung

Tatsächlich machen die Kohlenstoffemissionen des Internets zwischen etwa 1,8 und 3,2 % der globalen Gesamtemissionen aus [2]. Diese Zahl entspricht ungefähr dem Ausstoß der gesamten Luftfahrtindustrie, was etwa 2 % beträgt [3].

Wenn das Internet ein Land wäre, würde es weltweit den sechstgrößten Umweltverschmutzer darstellen, mit jährlichen Emissionen, die mit denen Japans vergleichbar sind (vgl. Abbildung 1). Somit wäre das Internet stand 2020 hinter China, USA, Indien, Russland und Japan einzuordnen [1].

Nicht nur E-Mails, Videostreams oder Bitcoin-Transaktionen haben einen signifikanten Einfluss auf den CO₂-Fußabdruck (siehe Abbildung 2), sondern auch die Nutzung künstlicher Intelligenz. Neben dem Training von KI-Modellen verursachen auch Suchanfragen erhebliche CO₂-Emissionen. Zum Beispiel produziert jede Suchanfrage mit ChatGPT 4,3 g CO₂ [4], was etwa dem CO₂-Ausstoß einer E-Mail ohne Anhang entspricht [1]. Bevor also intuitiv auf ChatGPT zurückgegriffen wird, ist es sinnvoll zu überlegen, ob die Suchanfrage nicht besser über eine herkömmliche Suchmaschine wie Google gestellt wird, da hierbei nur 0,2 Gramm CO₂ emittiert werden [1].

Tools zur Bewertung der Nachhaltigkeit von Webseiten

Auch das Design nachhaltiger Webdienste und -infrastrukturen wird immer wichtiger, um den CO₂-Fußabdruck des Internets zu reduzieren. Zum Beispiel ermöglicht es der Website Carbon Calculator, die CO₂-Emissionen der Landingpage einer Website zu testen und zeigt zusätzlich an, ob das Hosting erneuerbare Energien nutzt. Die mfg-Website hat beispielsweise ein Carbon Rating von A (Ranking: A+ bis F; pro Seitenbesuch 0,14 g CO₂), was bedeutet, dass sie besser als 87 % aller Webseiten weltweit ist (vgl. Abbildung 3). Allerdings wird das Hosting nicht als “grün” oder nachhaltig bewertet. Die Website vergleicht nämlich den verwendeten Hosting-Provider mit den Daten, die in der Datenbank der Green Web Foundation (TGWF) hinterlegt sind. Wenn festgestellt wird, dass der Hosting-Provider im Verzeichnis der TGWF zu finden ist, wird der CO₂-Fußabdruck entsprechend reduziert. Jedoch war dies im Beispiel der mfg-Website nicht der Fall.

Ein weiteres Tool zur Bewertung der Nachhaltigkeit einer Website ist Beacon, das der mfg-Website die Note B bezüglich des CO₂-Fußabdrucks zuweist. Dieses Tool bietet eine detaillierte Aufschlüsselung der CO₂-Emissionen pro Aufruf und pro Kategorie (z. B. Document, Script, Stylesheet, Image, Font), was Hinweise darauf geben kann, wo Verbesserungspotenzial besteht.

Ein letztes Tool, das ich zum Überprüfen der Website vorstellen möchte, ist der Ecograder, er analysiert und bewertet die Website in drei Hauptkategorien (Seitengröße, UX-Design, Hosting). Der Ecograder liefert auch auf die Website zugeschnittene Tipps:

• Seitengröße: Skalieren Sie Bilder (hier werden z.B. die Bilder aufgeführt die optimiert werden könnten) und entfernen Sie unnötigen Code, etc.
• UX-Design: Verbessern Sie die Darstellung und Accessability Ihrer Website, nutzen Sie Caching und reduzieren Sie Serveranfragen, etc.
• Green Hosting

Jeder Punkt wird mit einer Punktzahl (bis zu 100) bewertet und mit konkreten Verbesserungsvorschlägen versehen. So erkennt man sofort, wo das Optimierungspotenzial liegt.

Nicht nur für die Umwelt von Vorteil

Möchte man eine Website mit geringerem Kohlenstoffausstoß erstellen, so geht dies oft Hand in Hand mit einer verbesserten Web-Performance. Die Grundidee besteht darin, dass eine optimierte Leistung zu kürzeren Ladezeiten führt, was wiederum den Server und das Netzwerk weniger belastet und somit die Energieeffizienz verbessert. Durch die Optimierung der Website lässt sich der Daten- und Energieverbrauch der Nutzer*innen reduzieren und gleichzeitig die Lebensdauer ihrer Geräte verlängern, was wiederum den Bedarf an Upgrades und Ersatz verringert [5].

Mit der verbesserten Performance gehen folgende weitere Vorteile einher [6]:

• Verbesserte Benutzer*innenerfahrung: Eine schlanke Website mit optimierten Bildern und Code lädt schneller und bietet ein flüssigeres Erlebnis für alle Nutzer*innen.
• Höheres Suchmaschinen-Ranking: Google und andere Suchmaschinen bevorzugen Websites, die schnell laden und ressourcenschonend sind.
• Bessere Zugänglichkeit: Eine performante Website kann die digitale Teilhabe im globalen Süden fördern, da sie für Menschen mit eingeschränkter Internetverbindung oder teuren Datenpaketen besser nutzbar ist.
• Geringere Hosting-Kosten: Eine umweltfreundliche Website benötigt weniger Ressourcen und kann daher auf einem günstigeren Hosting-Paket betrieben werden.

Eine nachhaltige Website ist demnach ein Gewinn in vielerlei Hinsicht – für Nutzer*innen, Unternehmen und die Umwelt.

Doch nun stellt sich die Frage, mit welchen Mitteln man eine umweltfreundlichere Webseite erstellen kann. Hier gibt es verschiedene Ansätze, die ich im Folgenden erläutern werde. Gemäß Frick [7] lässt sich nachhaltiges Webdesign in vier Kategorien unterteilen: Green Hosting, Suchmaschinenoptimierung (SEO), Design und UX sowie Performance-Optimierung.

Grünes Hosting

Die Gewährleistung, dass der Webhost erneuerbare Energien verwendet, ist ein wichtiger Schritt zur Reduzierung der Kohlenstoffemissionen der Website. “Grünes Hosting” bedeutet, dass der Hosting-Provider seine Server hauptsächlich oder idealerweise vollständig mit erneuerbaren Energien betreibt. Es ist jedoch nicht immer einfach, echte “grüne” Hosting-Referenzen von Greenwashing und reinen Marketingansprüchen zu unterscheiden. Das Hosting-Verzeichnis der Green Web Foundation listet Unternehmen auf, die entweder erneuerbare Energien verwenden oder ihre Emissionen kompensieren. Ein weiteres hilfreiches Instrument ist “Are my third parties green?“, ein Tool, das die Kohlenstoffauswirkungen von Drittanbieterabhängigkeiten überprüft, einschließlich der Frage, ob sie umweltfreundliches Hosting nutzen [5].

Die Nutzung eines Content Delivery Networks (CDN) trägt ebenfalls zur Nachhaltigkeit einer Website bei. Ein CDN ermöglicht die Speicherung und Bereitstellung von Website-Inhalten auf Servern in verschiedenen Regionen, wodurch Ladezeiten verkürzt und der Energieverbrauch reduziert wird. Durch die Bereitstellung von Inhalten näher am*an der Endnutzer*in verbessert sich die Effizienz der Datenübertragung [8].

SEO

Tracking-Skripte wie Google Analytics können die Leistung einer Website beeinträchtigen, da sie geladen werden müssen, um Daten zu erfassen, die anschließend an das Datacenter übermittelt und dort dauerhaft gespeichert werden. Je weniger solche Skripte verwendet werden, desto besser für die Performance, die Umwelt und den Datenschutz. Wenn Tracking-Skripte benötigt werden, gibt es auch Optionen ohne Cookies und mit geringerer Dateigröße als Google Analytics (vgl. Tabelle). Es ist ratsam, im Voraus zu überlegen, welche Funktionalitäten benötigt werden. Für diejenigen, die nicht alle Funktionen von Google Analytics benötigen, gibt es leichtgewichtigere Tools wie Fathom, Plausible oder andere Alternativen [6].

Design und UX

Nachhaltigkeit sollte bereits in der Designphase eine zentrale Rolle spielen. Ein minimalistisches Design verbessert nicht nur die Benutzer*innenerfahrung (UX), sondern reduziert auch den Energiebedarf für Datenübertragung und -verarbeitung. Ein umweltfreundlicher Ansatz könnte beispielsweise die Verwendung weniger energieintensiver Farben einschließen, da Blau mehr Energie verbraucht als Rot oder Grün (vgl. Abbildung 4). Auf OLED-Bildschirmen kann ein dunkles Farbschema Energie sparen, da schwarze Pixel “aus” sind. Die Farbwahl hat somit Auswirkungen auf die Nachhaltigkeit der Website [9].

Google [10] fand heraus, dass die Verwendung des Dark Modes je nach überprüfter App 30% bis 65% weniger Energie verbraucht als der Light Mode. Darüber hinaus verbraucht Blau 25% mehr Energie als Grün oder Rot. Die Nutzung energieeffizienter Farbpaletten kann somit die Akkulaufzeit verlängern.

Doch neben der Energieeffizienz ist auch die Barrierefreiheit entscheidend. Es ist wichtig, beispielsweise keinen weißen Text auf schwarzem Hintergrund und umgekehrt zu verwenden, da diese Kombination negative Auswirkungen auf die Augenbelastung, Ermüdung und Lesbarkeit hat. Stattdessen sollten weichere Töne bevorzugt werden. Ein Cremeweiß anstatt strahlendem Weiß kann nicht nur sanfter für die Augen sein, sondern auch weniger Energie verbrauchen [11].

Auch responsives Design ist von entscheidender Bedeutung, da es den Ressourcen- und Energieverbrauch minimiert, indem es verschiedene Versionen derselben Inhalte für verschiedene Bildschirmgrößen und Geräte überflüssig macht [18]. Anstatt also separate Websites oder Apps für Smartphones, Tablets und Desktops zu erstellen, passt sich die Website automatisch an die Bildschirmgröße des jeweiligen Geräts an.

Die User Experience spielt ebenfalls eine Rolle [5]: Wie viel Zeit verbringen Benutzer*innen damit, auf Ihrer Website zu navigieren, und laden dabei mehr Ressourcen, als sie benötigen, weil sie nicht finden, wonach sie suchen? Daher sollten Suchfunktionen, intuitive Designmuster, eine optimierte Informationsarchitektur und klare Navigation berücksichtigt werden [8].

Performance-Optimierung

Je mehr Daten übertragen werden, desto mehr Energie wird in Rechenzentren, Telekommunikationsnetzen und Endgeräten verbraucht. Faktoren wie Seitengewicht, HTTP-Anfragen und DOM-Größe spielen dabei eine entscheidende Rolle [12].

• Seitengewicht: Das Seitengewicht ist die Summe der Übertragungsgröße in Kilobyte (KB) aller Ressourcen, die von der Webseite angefordert werden. Laut dem Httparchive-Bericht [21] betrug das Median-Seitengewicht für “Desktop” März 2024 2.566 KB und für “Mobile” 2.277 KB (vgl. Abbildung 5). Die Gewichte der Desktop-Webseiten stiegen seit November 2010 um 428 %, während die der mobilen Webseiten um 1.413 % zunahmen.
  Bilddateien machen mehr als die Hälfte des Gesamtdatentransfers aus (vgl. Abbildung 6). Daher ist es wichtig, dass das Design einer nachhaltigen Website das Gewicht der Webseiten begrenzt, beispielsweise durch die Komprimierung von Bildern.

• HTTP-Anfragen: Eine HTTP-Anfrage wird von einem Client an einen Host auf einem Server gesendet, um auf eine Ressource zuzugreifen. Die Reduzierung der Anzahl von Anfragen pro Seite ist entscheidend, um die Anzahl der benötigten HTTP-Server zur Ausführung der Website zu reduzieren [12].

• DOM-Größe: Beim Laden einer Webseite erstellt der Browser ein Document Object Model (DOM), das eine hierarchische Sammlung von Knoten darstellt, die jedes HTML-Element, Attribut und eingebetteten Text als Baumstruktur darstellen. Ein großes DOM kann die Leistung der Webseite stark beeinträchtigen, da der Browser die Position und das Styling der Objekte ständig neu berechnen muss. Die Vereinfachung der DOM-Größe von Webseiten durch Begrenzung der Anzahl von Knoten reduziert das Gewicht der übertragenen Daten [12].

Programmierpraktiken

Effizienter und sauberer Code führt zu schnelleren Ladezeiten und geringerer Serverbelastung. Es ist wichtig, überflüssigen Code wie Schleifen oder unnötige Abfragen zu vermeiden. Eine bewährte Methode besteht zudem darin, CSS- und JavaScript-Dateien in externe Dateien auszulagern. Dadurch lädt der Browser die Dateien nur einmal herunter, wenn ein Benutzer die Website zum ersten Mal besucht. Bei allen weiteren Besuchen muss der Browser die Dateien nicht erneut herunterladen, was die Ladezeit der Website verkürzt und Energie spart [13].

Code Komprimierung

Ähnlich wie bei Bildern, Videos und Schriftarten ist es sinnvoll, über die Komprimierung von Code und anderen textbasierten Inhalten nachzudenken, um die Dateigröße zu verringern und die Leistung zu verbessern. Die Komprimierung von HTTP-Antworten kann die Ladezeit verkürzen, die Seitengröße reduzieren und die Leistung verbessern, was wiederum die Suchrangfolge beeinflussen kann.

Dies gilt insbesondere für textbasierte Inhalte wie:

• HTML
• CSS
• JavaScript
• JSON
• SVG
• Webfonts (woff, ttf)
• Icons (ico)

Medieninhalte wie Bilder, die bereits komprimiert sind, profitieren hingegen nicht von der HTTP-Komprimierung [6].

Gzip und Brotli sind die zwei gängigsten Methoden zur Komprimierung von HTTP-Antworten. Die Komprimierung kann vorab für statische Inhalte oder dynamisch für jede Anfrage durchgeführt werden.
Wie aus Abbildung 7 hervor geht, ist Brotli in der Regel effizienter als Gzip und erreicht eine bessere Komprimierungsrate. Allerdings benötigt Brotli etwas mehr Rechenleistung für die Komprimierung und Dekomprimierung. Die meisten modernen Browser unterstützen Gzip und Brotli. Brotli ist jedoch in älteren Browsern und einigen mobilen Browsern noch nicht verfügbar. Die optimale Wahl zwischen Gzip und Brotli ist situationsabhängig und sollte von den spezifischen Anforderungen der Webseite oder Anwendung abhängen [6, 14].

Das Verkleinern, Komprimieren und Entfernen unnötiger Teile des Codes tragen dazu bei, den Datentransfer zu reduzieren. Darüber hinaus sollte man so viel wie möglich zwischenspeichern, Caching sollte man vor allem bei Seiten benutzen, die sich nicht besonders ändern [5].

JavaScript

JavaScript ist ressourcenintensiver als HTML und CSS und die meisten Websites sind übermäßig darauf angewiesen. Deshalb sollten JavaScript-Frameworks bedacht eingesetzt werden, also nur wenn sie wirklich benötigt werden. Mit Tools wie z.B. Bundlephobia können diese Abhängigkeiten bewertet werden, möglicherweise kann stattdessen eine native API verwendet werden. Dynamische Imports können dazu beitragen, die Größe des anfänglichen JavaScript-Bundles zu reduzieren und verhindern, dass Benutzer*innen Code herunterladen, der erst viel später benötigt wird [5].

Bilder

Bilder machen einen erheblichen Teil des Seitengewichts aus und tragen fast die Hälfte des Datenverkehrs im Web bei. Es wird empfohlen, SVGs anstelle von Fotos zu verwenden und bei der Verwendung von Bildern sollte darauf geachtet werden, sie zu optimieren und zu komprimieren, um die Dateigröße zu reduzieren. Je einfacher ein Bild ist – mit weniger Farbvariationen und Details – desto kleiner ist die Dateigröße. Techniken wie Hintergrundblur, das Blurren der Ecken oder die Umwandlung in ein Schwarz-Weiß-Bild können helfen, die Dateigröße weiter zu verringern [6].

Durch die Verwendung von srcset und <picture> kann das am besten geeignete Bild für das Gerät bereitgestellt werden. Dabei werden moderne (kleinere) Bildformate wie WebP für Geräte verwendet, die diese unterstützen, um sicherzustellen, dass Geräte mit geringerer Auflösung nicht unnötig große, hochauflösende Bilder herunterladen müssen.
Hiermit kannst du ein WebP-Bild mit einem Fallback zu einem jpg-Bild anzeigen, um sicherzustellen, dass das Bild korrekt angezeigt wird, selbst wenn das WebP-Format nicht unterstützt wird:

<picture>
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung des Bildes">
</picture>

Um zu verhindern, dass Bilder heruntergeladen werden, bevor der*die Nutzer*in zu dem Punkt scrollt, an dem sie benötigt werden, kann das lazyload-HTML-Attribut verwendet werden [5].

Drittanbieter-Einbettungen und Videos

Drittanbietercode wie Chat-Widgets, Analyse-Skripte, Social-Media-Einbettungen und Videos sind oft die schlimmsten Übeltäter, wenn es um Seitengewicht und Datenübertragung geht. Es ist ratsam, den Einsatz von Videos zu minimieren, insbesondere durch das Vermeiden von Autoplay-Videos.
Wenn es jedoch unvermeidlich ist, solche Einbettungen zu verwenden, sollte das Muster “Import On Interaction“ in Betracht gezogen werden, bei dem das Laden der Einbettungen verzögert wird, bis der*die Nutzer*in mit ihnen interagiert [5].
Ein Beispiel dafür ist das WordPress-Plugin “Lazy Embed”, das eingebettete Inhalte wie Videos und Social-Media-Beiträge nur bei aktiver Betrachtung durch den*der Nutzer*in oder bei einem Klick darauf lädt. Dadurch wird die Seitenladezeit verbessert und Bandbreite gespart, da die Inhalte erst bei Bedarf geladen werden [6].

Schriftart

Schriftarten können das Seitengewicht erheblich beeinflussen. Systemfonts, die bereits auf den Geräten der Nutzer*innen vorhanden sind, sollten bevorzugt werden, um zusätzlichen Ladeaufwand zu vermeiden. Systemfonts sind beispielsweise Open Sans (Google Font), Segoe UI (Windows Systeme), San Francisco Pro (Mac Systeme) und Roboto (Android Handys) [15].
Falls individuelle Schriftarten verwendet werden, ist es ratsam, weniger individuelle Schriftstärken einzubeziehen und die Schriftarten in moderne Formate wie Web Open Font Format 2.0 (WOFF2) zu konvertieren. Es kann auch sinnvoll sein, Schriftarten zu unterteilen, indem eine begrenzte Sammlung von Glyphen bereitgestellt wird, insbesondere wenn nur eine Sprache auf der Website benötigt wird [5]. Dies kann mithilfe von Subsetting-Tools erfolgen, die es ermöglichen, die Font-Datei hochzuladen, die gewünschte Sprache auszuwählen und dann ungenutzte Glyphen zu entfernen [6].

Apps

Neben den allgemeinen Prinzipien der nachhaltigen Softwareentwicklung, die sowohl für Web-Anwendungen als auch für mobile Apps gelten, gibt es einige weitere Aspekte, die bei der App-Entwicklung im Hinblick auf Nachhaltigkeit beachtet werden können [22]:

• Gerätespezifische Optimierung: Berücksichtige die unterschiedlichen Hardware-Ressourcen und Leistungsfähigkeiten von Mobilgeräten. Optimiere den Code und das Design speziell für die Zielplattformen wie Android und iOS, um unnötigen Energieverbrauch zu vermeiden.
• Effiziente Sensordatennutzung: Greife nur auf Sensordaten zu, wenn sie für die App tatsächlich benötigt werden. Deaktiviere Sensoren, die nicht aktiv verwendet werden, um den Akkuverbrauch zu reduzieren.
• Modulare Architektur: Modularer Code und Microservices ermöglichen einfachere Updates und Fehlerbehebungen einzelner Komponenten, ohne die den Großteil der App neu entwickeln zu müssen. Dadurch wird der Ressourcenverbrauch reduziert.
• Regelmäßige Updates: Regelmäßige Updates und Fehlerbehebungen sind wichtig, da veraltete Apps aufgrund von Ineffizienzen oder Sicherheitslücken mehr Energie verbrauchen können. Durch regelmäßige Wartung wird eine optimale Leistung und Sicherheit gewährleistet.
• Energiesparfunktionen: Integriere Optionen in die App, mit denen Benutzer*innen den Energieverbrauch aktiv reduzieren können, z.B. Darkmode, Energiesparmodus oder die Möglichkeit, Hintergrundaktivitäten zu begrenzen.
• Bewusstseinsschaffung: Zusätzlich kann man dem*der Nutzer*in Tipps für eine nachhaltige Nutzung der App geben oder energieeffizientes Verhalten, beispielsweise durch Einsatz von Gamification, belohnen.

E-Mails

Wie aus Abbildung 2 hervorgeht, tragen auch E-Mails zur CO₂-Bilanz bei. Angesichts dieser Erkenntnis ist es von Bedeutung, nicht nur bei der Entwicklung von Websites und Apps, sondern auch beim Umgang mit E-Mails ökologisch verantwortungsbewusst zu handeln. Viele Aspekte des Web- und E-Mail-Designs überschneiden sich, wie zum Beispiel die Reduzierung von Bildern, Webfonts, Videos, Tracking-Skripten und Animationen, um die Ladezeit zu verkürzen. Die Verwendung eines dunklen Designs trägt ebenfalls zur Reduzierung des CO₂-Fußabdrucks bei. Zusätzlich empfiehlt es sich, CDNs und E-Mail-Service-Provider (ESP) zu nutzen, die mit grüner Energie betrieben werden [16].

Außerdem ist es ratsam, E-Mails regelmäßig zu überprüfen und zu löschen, insbesondere Spam, Newsletter und große E-Mails. Diese E-Mails füllen den Posteingang unnötig und verbrauchen Speicherplatz. Es ist auch wichtig, die Anzahl der Empfänger*innen zu reduzieren, den Papierkorb regelmäßig zu leeren, Spamfilter einzurichten und nicht verwendete Newsletter sowie unerwünschte Werbung abzubestellen. Zusätzlich sollten automatische Benachrichtigungen von sozialen Medien ausgeschaltet werden [17].
Verwende klare und präzise Formulierungen und vermeide redundante Informationen. Responsives Design ist zudem auch bei E-Mails wichtig, da es die optimale Darstellung auf allen Geräten ermöglicht und somit übermäßiges Scrollen und lange Ladezeiten verhindert [19].

Wenn Buttons verwendet werden, ist es empfehlenswert, diese programmatisch als Code zu integrieren, anstatt als Bilder einzufügen. Dadurch wird in der Regel weniger Speicherplatz benötigt [20].
Statt Anhänge zu verwenden, sollte man auf Datenübertragungsplattformen wie Google Drive oder Dropbox zurückgreifen. Alternativ sollten Fotos und Dateien (z.B. als Zip-Datei) komprimiert werden [17]. Wenn Bilder in E-Mails eingefügt werden sollen, ist es ratsam, nur auf die Quelle auf einem Server zu verweisen, anstatt das Bild direkt einzubetten. Auf diese Weise wird das Bild nur heruntergeladen, wenn die Empfänger*innen die E-Mail öffnen [20].

Checkliste für nachhaltiges Web-/Appdesign

Die folgende Checkliste fasst zusammen, welche Aspekte beim Design einer nachhaltigen Website oder App berücksichtigt werden können:

Hosting: Nutze grünes Hosting und ein CDN.

Design:

• Verwende minimalistische Designs: Sind großflächige Bilder/Videos notwendig?
• Nutze responsives Design.
• Verwende energieeffiziente Farbpaletten und den Darkmode.
• Minimiere den Einsatz von Videos, insbesondere von Autoplay-Videos.
• Verwende energieeffiziente Systemfonts.
• Bei individuellen Schriftarten:
  • Verwende das Format WOFF2.
  • Reduziere die Anzahl der Font Weights.
  • Optimiere die Schriftart mithilfe eines Subsetting-Tools.

UX/Usability:

• Integriere Suchfunktionen: Sind Informationen schnell auffindbar?
• Verwende intuitive Designmuster und Navigationselemente.
• Verwende eindeutige Beschriftungen.
• Verwende eine barrierefreie Gestaltung.

Performance:

• Erfasse das Seitengewicht (Durchschnitt liegt bei 2,5 MB [21])
• Verwende ressourcenschonende Alternativen zu Tracking-Skripten.
• Vereinfache die DOM-Größe durch Begrenzung der Anzahl von Knoten.
• Reduziere die Anzahl von HTTP-Anfragen.
• Komprimiere die HTTP-Antworten (z.B. mittels Gzip oder Brotli).
• Entferne unnötige Code-Teile.
• Lagere CSS- und JavaScript-Dateien aus.
• Verwende Caching für statische Inhalte.
• Setze JavaScript-Frameworks und -Abhängigkeiten bedacht ein.
• Verwende SVGs anstelle von Fotos (wenn möglich).
• Optimiere und komprimiere Bilder (vorzugsweise webp + Fallback jpg/png).
• Nutze Lazy Loading, um das Herunterladen von Bildern zu verzögern.
• Verwende dynamische Imports, um die Größe des initialen JavaScript-Bundles zu reduzieren.
• Verwende das Muster “Import On Interaction”, um das Laden von Einbettungen zu verzögern.

App-Spezifisch:

• Optimiere den Code und das Design gezielt für die Zielplattformen (z.B. Android, iOS).
• Beschränke den Zugriff auf Sensordaten auf das Minimum.
• Nutze eine modulare Architektur.
• Halte die Anwendung durch regelmäßige Updates und Fehlerbehebungen auf dem neuesten Stand.
• Integriere Optionen zur aktiven Reduzierung des Energieverbrauchs.
• Biete Tipps für eine nachhaltige Nutzung an und belohne energieeffizientes Verhalten.

Checkliste für nachhaltiges E-Mail-Design

Designer/Entwickler:

• Entscheide dich für einen umweltfreundlichen CDN und ESP.
• Wähle energieeffiziente Farbpaletten.
• Nutze responsives Design.
• Vermeide Bilder, Webfonts, Videos, Tracking-Skripte und Animationen.
• Integriere Buttons programmatisch als Code, anstatt sie als Bilder einzufügen.
• Komprimiere Bilder und Dateien.
• Nutze Datenübertragungsplattformen, anstatt Anhänge zu verwenden.
• Verweise auf die Quelle auf einem Server, anstatt das Bild direkt einzubetten.

Allgemein:

• Formuliere deine Nachrichten klar und präzise, um Redundanzen zu vermeiden.
• Lösche regelmäßig Spam, Newsletter und große E-Mails aus deinem Postfach.
• Reduziere die Anzahl der Empfänger*innen deiner E-Mails.
• Leere deinen Papierkorb regelmäßig.
• Richte Spamfilter ein.
• Melde dich von unerwünschten Newslettern und Werbemails ab.
• Schalte automatische Benachrichtigungen aus.

Forschungsprojekt “ERIKA”

Dieser Artikel wurde im Rahmen des Moduls “Tun / Forschen / Gründen” im zweiten Mastersemester verfasst. Im Forschungsbereich haben Studierende die Möglichkeit, an einem Forschungsprojekt des dem Studiengang angeschlossenen Forschungsinstituts mitzuarbeiten. Die Grundlage für diesen Artikel bilden Recherchen, die im Rahmen des Forschungsprojekts „ERIKA“ durchgeführt wurden.
Ziel des Projekts ist die Entwicklung der App ERIKA, die als digitale Begleiterin für klimabewusstes Handeln im Alltag fungiert. Die App soll dazu beitragen, klimafreundliches Verhalten zu fördern und regionale Aktivitäten in der Region Waidhofen a/d Ybbs sichtbar zu machen. Dabei liegt der Fokus nicht nur auf nachhaltigen Inhalten, sondern auch auf nachhaltigen Aspekten bei der Entwicklung und dem Design der App, um das Konzept der Nachhaltigkeit ganzheitlich zu implementieren.

Literatur

 [1] So viel Energie verbraucht das Internet: https://de.statista.com/infografik/26873/co2-vergleich-dsl-und-glasfasernetz/

[2] Our Digital Carbon Footprint: What’s the Environmental Impact of the
Online World? https://en.reset.org/our-digital-carbon-footprint-environmental-impact-living-life-online-12272019/

[3] Tracking Aviation: https://www.iea.org/energy-system/transport/aviation

[4] A Closer Look at the Carbon Footprint of ChatGPT: https://piktochart.com/blog/carbon-footprint-of-chatgpt/

[5] Introduction to web sustainability: https://developer.mozilla.org/en-US/blog/introduction-to-web-sustainability/

[6] How to make your website more sustainable: https://digitalculturenetwork.org.uk/knowledge/webinar-recording-how-to-make-your-website-more-sustainable/

[7] Frick, Tim (2016): Designing for Sustainability: A Guide to Building Greener Digital Products and Services Sebastopol, Kalifornien, USA, ISBN: 978-1491935774

[8] 6 steps to building a more sustainable website: https://www.youtube.com/watch?v=1TlBgfsgIdI

[9] The dark side of green web design: https://www.wholegraindigital.com/blog/dark-colour-web-design/

[10] Google: Here’s why dark mode massively extends your OLED phone’s
battery life: https://www.zdnet.com/article/google-heres-why-dark-mode-massively-extends-your-oled-phones-battery-life/

[11] Energy efficient color palette ideas: https://greentheweb.com/energy-efficient-color-palette-ideas/

[12] Lacom, Pauline & Sagot, Sylvain. (2022). A Research Framework for B2B Green Marketing Innovation: the Design of Sustainable Websites. 10.1109/ICE/ITMC-IAMOT55089.2022.10033239.

[13] 10 Tipps für die nachhaltige Umsetzung von Websites und Apps: https://www.visuellverstehen.de/insights/10-tipps-fuer-die-nachhaltige-umsetzung-von-websites-und-apps

[14] Compression methods for different content types: https://almanac.httparchive.org/en/2021/compression#fig-1

[15] System Fonts als Google Fonts Alternative: https://www.webtimiser.de/system-fonts/

[16] How to design climate-friendly emails: https://uxdesign.cc/sustainable-email-design-fa9eb58610d8

[17] Eine E-Mail ist so schädlich wie eine Plastiktüte: https://www.adesso.de/de/news/blog/eine-e-mail-ist-so-schaedlich-wie-eine-plastiktuete.jsp

[18] Sustainable UI Design: https://medium.com/@JakubWojciechowskiPL/sustainable-ui-design-reducing-the-environmental-footprint-of-digital-interfaces-afe3c9dfe738

[19] Grün mailen: Dein Guide für nachhaltiges E-Mail-Marketing im
Mittelstand: https://www.cleverelements.com/gruen-mailen-dein-guide-fuer-nachhaltiges-e-mail-marketing-im-mittelstand/

[20] 7 Tipps für CO₂-freundliches E-Mail Marketing: https://www.brevo.com/de/blog/co2-freundliches-email-marketing/

[21] Report: Page Weight: https://httparchive.org/reports/page-weight?start=2017_04_15&end=latest&view=list

[22] Sustainable App Development Practices: https://corewave.io/Blogs/sustainable-app-development-practices

Bildquellen

Beitragsbild von Freepik

[A] Abb. 1, 2: https://cdn.statcdn.com/Infographic/images/normal/26873.jpeg

[B] Abb. 3: Screenshot von https://www.websitecarbon.com/website/mfg-fhstp-ac-at/

[C] Abb. 4: https://cdn.shortpixel.ai/spai3/w_1240+q_glossy+ret_img+to_auto/www.wholegraindigital.com/wp-content/uploads/2022/03/Capture.jpg

[D] Abb. 5: Screenshot von https://httparchive.org/reports/page-weight?start=2017_04_15&end=latest&view=list 

[E] Abb. 6: https://blog-img.speedcurve.com/img/page-bloat-2-2011-to-2017.png

[F] Abb. 7: https://almanac.httparchive.org/en/2021/compression#fig-1

The post Sustainable Webdesign appeared first on Mobile USTP MKL.

Rollenverteilung

• Sara: Design, Frontend, Usertests
• Laura: Backend
• Sophia: Design, Frontend, Dokumentation, Usertests
• Vanessa: Design, Frontend, Organisation
• Katharina: Backend

Umgesetzte Funktionalitäten

Die technischen Funktionen der App drehen sich primär um das Erstellen, Teilen, und Entdecken von Cocktail-Rezepten aller Art. Grundsätzlich können nur registrierte und angemeldete Nutzer:innen die Rezeptsammlung sehen. Rezepte sind in Kategorien unterteilt, die ein zielgerichtetes Filtern ermöglichen. Mithilfe einer Suchleiste können Nutzer:innen ihre Suche zusätzlich verfeinern, indem sie nicht nur nach Kategorie, sondern auch nach Rezeptnamen oder Zutaten suchen können. Rezepte können von den Nutzer:innen, die sie erstellt haben, bearbeitet oder auch gelöscht werden.

Ebenfalls können Nutzer:innen Rezepte liken und so alle Lieblingsrezepte – ob es die eigenen sind oder von anderen Nutzer:innen erstellt – in einer Favoritenliste sammeln. Eine Bewertungsfunktion erlaubt es, Rezepten sowohl eine Sternebewertung zu verleihen als auch ein öffentliches Kommentar zu posten.

Sollte das Mischen eines Getränks mehrere Schritte umfassen, können diese einzeln gespeichert und in einer Step-by-Step Anleitung durchgeklickt werden. So können Nutzer:innen einem Rezept leicht folgen, ohne zwischendurch den Faden in seitenlangem Anleitungstext zu verlieren. Falls ein Rezept nur für die eigenen Augen bestimmt sein soll, kann es auch privat geschaltet werden.

Abgesehen von ihren geposteten Rezepten können Nutzer:innen auch ihr Profil anpassen und so ihre Individualität zum Ausdruck bringen. Dies beinhaltet das Hochladen und Ändern des Profilbilds sowie die Aktualisierung des Benutzernamens. Falls Nutzer:innen sich dafür entscheiden, Bevry nicht mehr zu nutzen, haben sie auch die Option, ihren Account zu löschen.

Geplante Funktionalitäten

Alle genannten Funktionen wurden für das Wintersemester geplant und auch umgesetzt. Als Ergänzung im nächsten Semester steht die Ausweitung von sozialen Features im Raum — von Umfragen und Multiplayer-Minispielen bis hin zu geteilten Einkaufslisten und Event-Planung (vgl. Wireframes). Auch der eigene Barbestand soll künftig festgehalten werden können. Darauf basierend sollen Nutzer:innen passende Rezeptvorschläge bekommen, deren Zutaten bereits vorhanden sind. Um die Benutzeroberfläche zusätzlich zu beleben, sind auch Animationen geplant, die beispielsweise beim Laden der Anwendung gezeigt werden sollen.

Technologien

Frontend

Zu Beginn unseres Projektes entschieden wir uns für die Nutzung von Vue.js als Frontend-Framework. Diese Entscheidung basiert auf der Flexibilität, Leistung und Einfachheit von Vue.js, was eine effiziente Entwicklung ermöglicht. Des Weiteren konnten wir in der LV “Advanced Web Programming” erste Einblicke in die Arbeit mit dem Framework gewinnen, was unsere Entscheidung unterstützte, Vue.js zu erlernen.

Die Integration von Vuetify als UI-Framework wurde aufgrund seiner ansprechenden und responsiven Komponenten getroffen. Durch die vorgegebenen Komponenten erleichterte uns Vuetify die Entwicklung einer konsistenten Benutzeroberfläche, wodurch wir insgesamt Zeit einsparen konnten.

Für das Zustandsmanagement wählten wir Pinia, eine State Management Library speziell für Vue.js. Pinia verwenden wir für unser gesamtes User Management (Login, Registrieren, Logout), um den Status des Nutzers abzuspeichern. Vue.js, Vuetify und Pinia bildeten insgesamt für uns eine leistungsstarke Kombination, die uns zu einem bislang erfolgreichen Projekt geführt hat.

Backend

Im Backend haben wir mit NestJS gearbeitet. Nachdem wir von Armin bereits eine Einführung bekommen haben, wollten wir uns mehr im Detail mit den Möglichkeiten von Nest auseinandersetzen und ein umfangreicheres Backend damit umsetzen.

Zusätzliche Packages, die wir benutzt haben, inkludieren TypeORM, um mit den Datenbank-Entities umzugehen, JWT und bcrypt für die Sicherheit bei Login und Registrierung und Swagger um OpenAPI zu nutzen. Mit OpenAPI konnten wir unsere Endpoints automatisch in Swagger anzeigen und die Zusammenarbeit zwischen Back- und Frontend Entwicklung up to date halten.

Hürden und Schwierigkeiten Frontend/Backend

Frontend

Im Frontend konnten wir zu Beginn unser bestehendes Projekt aus der LV “Advanced Web Programming” zur Hilfe nehmen, was das Aufsetzen erleichterte. Zuerst haben wir das Frontend ohne die Einbindung von Vuetify und Pinia aufgesetzt, in der Annahme, dass dies auch im Nachhinein noch funktionieren würde, diese hinzuzufügen. Leider hat das nicht ganz geklappt, und daher mussten wir das Frontend noch einmal neu aufsetzen. Dabei haben wir direkt ausgewählt, dass wir das Advanced Paket mit Vuetify, Routing und Pinia inkludiert haben möchten.

Die größte Herausforderung bestand im stetigen Herumprobieren und Durchtasten der Funktionalitäten und der Logik von Vue. Da das gesamte System für uns noch unbekannt war, war es notwendig, durch Probieren zum Ziel zu kommen. Wir haben die Views im Frontend-Team aufgeteilt und konnten daher alle separat arbeiten. Das war einerseits positiv, da man selbst für etwas verantwortlich war und selbst zum Ziel finden musste. Andererseits war es etwas schwierig, da dadurch nicht immer ein konsistentes und zusammenpassendes User Interface vorhanden war. Hinzu kam, dass uns lange nicht bewusst war, dass das Styling der einzelnen Views standardmäßig übergreifend auf alle Views Auswirkungen hat, wodurch wir uns manchmal in die Quere kamen.

Eine weitere Herausforderung bestand im Arbeiten mit den REST-Endpoints. Leider schafften wir es aus Zeitgründen nicht immer, dass das Backend-Team weit genug voraus war. Daher mussten wir des Öfteren die Anbindung und Verwendung der Endpoints überarbeiten, da es im Backend Änderungen gab, die nicht mehr zu unserem Stand im Frontend passten. In Zukunft werden wir definitiv darauf achten, dass Frontend und Backend nicht genau zeitgleich erstellt werden.

Backend

Bezogen auf das Backend, gab es im Laufe des Projekts einige Hindernisse. Beim Aufsetzen hatten wir ein paar Probleme die Verbindung mit der Datenbank herzustellen, was sich nach einer Umstellung auf einen anderen Server lösen ließ. Außerdem funktionierte die Verbindung mit dem Frontend nicht, bis wir ein Proxy einstellten, beziehungsweise beim späteren Deployment CORS aktiviert haben.

Um bereits am Anfang Rezepte, Kategorien, Zutaten und Glastypen zur Verfügung zu haben, wollten wir Daten aus einer API beziehen, was wir für die Zutaten umsetzen konnten. Da uns die Kategorien und Glastypen der API nicht gefallen haben und der Aufbau der Rezepte jedoch zu unterschiedlich zu unserem war (vorallem bezogen auf die Maßangaben), haben wir uns entschlossen diese nicht zu inkludieren, da sie mit unseren implementierten Features nicht wie gewollt funktioniert hätten.

Ansonsten mussten wir einiges in Bezug auf authorization, error handling und http codes lernen, was wir unserer Meinung nach schlussendlich gut bewältigen konnten. Abgesehen davon, gab es ein paar Bugs, die im lokalen Development nicht aufgefallen sind, jedoch im build vorkamen und noch bearbeitet werden mussten.

Usability Test Ergebnisse & Nächste Schritte

Ergebnisse der User Tests

Die Ergebnisse der Umfrage zeigen, dass die Mehrheit der Befragten eine positive Erfahrung beim Suchen und Posten von Cocktailrezepten in der App hatte.

• Beim Suchen gaben 3 Personen an, dass es “gut” war, während 7 Personen es als “sehr gut” bewerteten.
• Beim Posten eines Rezepts empfanden 6 Personen die Erfahrung als “gut“, während 4 Personen sie als “sehr gut” bezeichneten.

Die positiven Aspekte der App, die besonders gut ankamen, waren die Drink-Kategorien und das Design. Fünf Personen lobten die strukturierte Organisation mit Kategorien, die große Auswahl und die saisonalen Kategorien hervor. Andererseits betonten fünf Personen das Design, das als simpel, modern und mit ansprechenden Bildern beschrieben wurde.

Die Überraschungsfaktoren, die von den Befragten genannt wurden, umfassten eine positive Benutzererfahrung, die übersichtliche Gestaltung sowie das Lob für ein wunderschönes und “cooles” Logo.

Während der Tests wurden jedoch auch einige Bereiche identifiziert, die möglicherweise verbessert werden könnten:

Leere Input-Felder im Create Drink View sind leicht zu übersehen, und es gibt kein sichtbares User Feedback, wenn ein Formularfeld nicht ausgefüllt ist. Ein Verbesserungsvorschlag besteht darin, automatisch nach oben zu den leeren Feldern zu scrollen, damit Nutzer:innen den dort angezeigten Hilfstext sehen können. Zudem könnte die Markierung aller Pflichtfelder mit Asterisken eine klarere Orientierung bieten.

Der Like-Button in der Rezeptansicht ist schwer aufzufinden. Eine mögliche Verbesserung wäre, den Like-Button zu vergrößern oder prominenter zu platzieren, um die Nutzung zu erleichtern.

Es wurde beobachtet, dass Nutzer:innen zuerst versuchen, den Nutzernamen im Profile View durch Tippen zu bearbeiten. Um diese Handlung intuitiver zu gestalten, könnte das Edit-Icon direkt bei den Nutzernamen angezeigt werden, sodass Nutzer:innen nicht zuerst in den Settings-View wechseln müssen.

Einige Nutzer:innen meldeten, dass die Step-Anzahl ab dem ersten Step im Create Drink View vereinzelt nicht korrekt ist. Als mögliche Verbesserung könnte die Step-Anzahl beim Posten immer automatisch zurückgesetzt werden.

Ein weiterer identifizierter Punkt ist ein Serverfehler, der auftritt, wenn Nutzer:innen versuchen, einen Feedback-Kommentar mit Emojis zu posten. Als Lösung könnte eine Anpassung erfolgen, um die korrekte Codierung von Emojis zu ermöglichen.

Net Promoter Score (NPS)

Im Laufe der User Tests fragten wir außerdem den Net Promoter Score (NPS) ab. Das ist die Kennzahl, die die Kundenloyalität gegenüber einem Produkt, einer Dienstleistung oder einer Marke misst. Er wird durch eine einfache Umfrage ermittelt, bei der die Teilnehmer gebeten werden, auf einer Skala von 0 bis 10 anzugeben, wie wahrscheinlich es ist, dass sie das Produkt, die Dienstleistung oder die Marke an Freunde oder Kollegen weiterempfehlen würden.

Die Berechnung des NPS erfolgt durch die Klassifizierung der Teilnehmer in drei Gruppen:

1. Promotoren (Bewertung 9-10): Personen, die das Produkt oder die Dienstleistung sehr positiv bewerten und wahrscheinlich weiterempfehlen würden.
2. Indifferent (Bewertung 7-8): Personen, die neutral sind und nicht besonders begeistert oder enttäuscht von dem Produkt oder der Dienstleistung.
3. Detraktoren (Bewertung 0-6): Personen, die das Produkt oder die Dienstleistung negativ bewerten und es wahrscheinlich nicht weiterempfehlen würden.

Der NPS wird dann berechnet, indem der Prozentsatz der Detraktoren von dem Prozentsatz der Promotoren subtrahiert wird. Im Falle unserer User Tests:
NPS = (Prozentsatz der Promotoren) – (Prozentsatz der Detraktoren) = 70% – 10% = 60%

Ein NPS von 60 wird als “gut” bewertet und deutet darauf hin, dass die Mehrheit der Teilnehmer das Produkt oder die Dienstleistung positiv wahrnimmt und wahrscheinlich bereit ist, es weiterzuempfehlen. Ein höherer NPS deutet in der Regel auf eine stärkere Kundenloyalität und Zufriedenheit hin.

Nächste Schritte

Auf dem Weg zur Weiterentwicklung unserer App stehen einige praktische Schritte an. Basierend auf den User Tests liegt die höchste Priorität bei den nächsten Schritten zur Verbesserung unserer App in zwei zentralen Bereichen:

Rezepte Posten

• Implementierung eines verbesserten Bild Upload Feedbacks, um die Benutzererfahrung beim Hochladen von Rezeptbildern zu optimieren.
• Entwicklung einer effizienteren Suchfunktion für Zutaten, um das Anlegen von Rezepten zu erleichtern.
• Klare Anpassung der Bezeichnung von “Servings” zu “Number of Servings” für transparentere Rezeptangaben.
• Vergrößerung der Abstände oben und unten im Rezept-Posting-Bereich, um die Sichtbarkeit der Buttons am Rand des Bildschirms zu verbessern.
• Besseres und leichter Sichtbares Feedback, beim Ausfüllen und Fehlender Eingabe der Input Felder.
• Anpassung um die korrekte Codierung von Emojis.

User Management

• Deutliche Verbesserung der Sichtbarkeit und Unterscheidung zwischen dem Delete Account- und dem Logout-Button durch erhöhten Abstand.
• Integration von zusätzlichem Feedback während des Registrierungsvorgangs, um einen transparenten und unterstützenden Prozess für neue Benutzer:innen zu gewährleisten.
• Benutzernamen ändern intuitiver machen, indem User den Namen direkt im Profil ändern können.

Abgesehen von den Ergebnissen der User Tests nehmen wir uns vor, das Styling zu vereinheitlichen, Filter-Funktion zu integrieren, eine Umrechnungsmöglichkeit für die Einheiten zu implementieren und den Code aufzuräumen. In der Hektik der Abgabe haben wir einige Dinge vielleicht etwas eilig erledigt, und es gibt Raum für Verbesserungen.

Weitere Funktionen für die Zukunft

Wir haben bereits einige weitere Ideen für zukünftige Funktionen skizziert. Wir wollen vor allem den sozialen Aspekt der App durch verschiedenste Gruppenfeatures ausbauen. Darunter Multiplayer-Minispiele, einen Eventplaner, Abstimmungsmöglichkeiten für Rezepte und Sammlungen.

Weitere Ideen im Design Bereich wäre die Einbindung von Animationen und Custom Icons, um der App mehr Dynamik zu verleihen – wie zum Beispiel bei einem Ladebildschirm.

Außerdem beabsichtigen wir fest, eine Reporting-Funktion zu implementieren, die es den Nutzern ermöglicht, bestimmte Inhalte zu melden.

Personal Learnings

Sara

Ich konnte jede Menge Erfahrungen im Bereich Frontend mit Vue und Vuetify sammeln. Mein Fokus lag dabei vor allem auf den Seiten für Login, Registrierung, Dashboard und den Kategorien sowie der Suchleiste. Die Herausforderungen während der Entwicklungsphase waren nicht zu unterschätzen. Frontend-Umsetzung verlangte nicht nur Verständnis für Design, sondern auch technisches Know-how.

Die Projektvernissage war ein Highlight für mich. Direktes Feedback von externen Personen zu bekommen gab wertvolle Einblicke für mögliche Verbesserungen. Sophia und ich führten außerdem Nutzertests mit vereinzelten Personen am Stand durch und konnten somit die Verbesserungen noch genauer definieren. Die App durch die Augen potenzieller Nutzer:innen zu sehen, half uns, sowohl Stärken als auch Schwächen zu erkennen und zukünftige Entwicklungen zu optimieren.

Die Erfahrung mit Bevry hat definitiv meine Programmier-Fähigkeiten verbessert und auch wenn es teilweise stressig war am Projekt zu arbeiten, freue ich mich die App in den nächsten Semestern weiter auszubauen.

Laura

Da meine Aufgabe im Backend Development war, habe ich mich besonders viel mit NestJS auseinandergesetzt. Hierbei habe ich nicht nur den Umgang mit Decorators vertieft, sondern auch besonders viel Zeit in das richtige Error Handling gesteckt. Zum Anfang des Projektes hatte ich keine Ahnung von http Codes und in welchen Fällen, man welche einsetzt, was sich im Laufe des Projektes stark geändert hat. Auch wenn ich sicher noch kein Experte bin, kann ich behaupten Fehlercodes jetzt viel besser zu verstehen und für mich persönlich einen logischen Aufbau gefunden zu haben.

Außerdem habe ich mich tiefer mit der API beschäftigt. Nach anfangs händisch geschriebenen Endpoints, die ich auch mehrmals überarbeitet habe, habe ich mich außerdem mit OpenAPI beschäftigt und dem automatischen Generieren von Swagger, was im Laufe der Entwicklung sehr nützlich war, um Echtzeit-Änderungen im Code auch so fürs Frontend darzustellen.

Obwohl das Projekt damit angefangen hat, dass ich vor allem nur Teil des Backend-Developments geworden bin, da ich es mir von unseren Mitgliedern noch am ehesten vorstellen konnte, bin ich nun sehr froh die Verantwortung dafür übernommen zu haben. Ich habe mich technisch sehr weiterbilden können und auch einiges im Bereich des User Managements und der Authentifizierung lernen können.

Auch wenn der Start, nicht nur für mich, sondern ich denke für die ganze Gruppe, nicht der leichteste war, freue ich mich, dass wir so eine gute Grundbasis bilden konnten, an der wir im nächsten Semester gut aufbauen können.

Sophia

Im Rahmen dieses Projekts war ich hauptsächlich für das Frontend der Rezeptdetailansicht, der Rezeptanleitung, der Einstellungen-Übersicht und der Seite zum Bearbeiten des Profilbilds und Benutzernamens zuständig. Ich hatte zuvor nur oberflächliche Erfahrung mit Vue und konnte dahingehend meine Kenntnisse deutlich vertiefen. Mit Vuetify hatte ich zuvor noch nie gearbeitet, aber ich konnte mich schnell damit anfreunden. Da ich meinen persönlichen Fokus im Laufe des Bachelorstudiums vorrangig auf UX/UI-Design gesetzt hatte, fühlte ich mich in Sachen Programmierung etwas „aus der Übung“, konnte aber nun wieder in Schwung kommen. Ich konnte sowohl meine Programmierkenntnisse verbessern als auch tiefergehende Erfahrungen im Umgang mit Gitlab und Git sammeln, da ich zuvor nie mit so vielen Gruppenmitgliedern an einem Repository gearbeitet hatte.

Ich kümmerte mich außerdem darum, ein Ticketsystem und einen zentralen Ort zur Dokumentation aufzusetzen. Wir nutzten Jira, um unsere Aufgaben aufzuteilen und den Fortschritt zu verfolgen. In Confluence dokumentierten wir unter anderem Aufgabenaufteilungen und Testdesign und -auswertung für eine erste Runde von Usability-Tests.

Sara und ich führten während der Projektevernissage Usability-Tests durch, wodurch wir wertvolles Feedback und frische Perspektiven zu unserem Projekt sammeln konnten. Während sich einige unserer Hypothesen und bekannten Probleme bestätigten, war es zudem spannend, auch neue Themen aufzudecken, an die wir noch gar nicht gedacht hatten. Die Auswertung zeigte aber im Großen und Ganzen ein sehr positives Bild von den gesammelten Eindrücken.

Im Großen und Ganzen bin ich zufrieden mit dem, was wir in der Zeit, die wir hatten, erreicht haben. Der Projektstart war mit Beginn des Masterstudiums etwas verzögert, aber wir konnten dennoch in kurzer Zeit ein umfangreiches Projekt auf die Beine stellen, und ich bin schon gespannt darauf, wie wir im nächsten Semester darauf aufbauen können.

Vanessa

Ich habe mich bislang nur einmal intensiv mit einem Framework auseinandergesetzt, und das war im Projektsemester des Bachelors mit Angular. Damals beschränkten sich meine Hauptaufgaben auf HTML und CSS. In diesem Projekt war ich Teil des Frontend-Teams, und mein Fokus lag vor allem auf den Seiten für das Anzeigen aller Rezepte, das Anzeigen der favorisierten Rezepte, das Anlegen und Bearbeiten von Rezepten sowie dem Benutzerprofil. Nebenbei kümmerte ich mich auch um organisatorische Aufgaben wie das Vereinbaren von Sync-Meetings und das Setzen von Meilensteinen.

In Bezug auf das Programmieren war vor allem das Anlegen und Bearbeiten von Rezepten für mich eine riesige Herausforderung. Ich hatte noch keine Erfahrung mit der Verwendung von Vue oder REST-Endpunkten, und meine JavaScript-Kenntnisse beschränkten sich auf das Notwendigste. Am Ende dieses Semesters kann ich jedoch stolz sagen, dass ich sehr viel Neues dazulernen konnte und mittlerweile ein viel größeres Verständnis in der Frontend-Entwicklung habe.

Mein Highlight stellte die Projektvernissage dar, die am Ende viel schneller kam, als wir anfangs dachten. Zwischenzeitlich bangten wir alle, ob wir es schaffen würden, alle geplanten Funktionalitäten umzusetzen. Am Ende schafften wir es jedoch, unser Ziel am Tag der Vernissage zu erreichen, und das Feedback von den Besuchern unseres Projektstandes hat uns definitiv gezeigt, dass der Aufwand es wert war. Ich freue mich, dass ich durch dieses Projekt so viel Neues dazulernen konnte und bin schon gespannt, wie wir dieses Projekt im kommenden Semester weiter ausbauen werden.

Katharina

Ich war mit Laura für die Backend-Programmierung zuständig und habe mich um die Umsetzung der Rezepte gekümmert. Da ich vorher noch keine Erfahrung mit NestJS hatte und meine Backend-Kenntnisse überschaubar waren, wollte ich mich der Herausforderung stellen, meine Komfortzone im Frontend zu verlassen und mich mit der Backendentwicklung auseinander zu setzen.

Meine bisherigen Erfahrungen beschränkten sich auf PHP und das manuelle Verfassen von SQL-Anfragen. Es war interessant zu sehen, wie unterschiedlich NestJS im Vergleich zu PHP ist. So konnte ich mittels TypeORM viel komfortabler und weniger Fehleranfällig Datenbankoperationen erstellen. Bei künftigen Backend-Projekten würde ich definitiv wieder NestJS in Betracht ziehen.

Vor dem eigentlichen Programmierbeginn erstellten wir ein Entity-Relationship-Diagramm und dokumentierten die Endpunkte in Swagger. Diese Erfahrung war neu für mich, da ich zuvor noch nie eine Datenbankstruktur geplant oder mit Swagger gearbeitet hatte. Armin wies uns darauf hin, dass wir mithilfe von OpenAPI die Swagger-Dokumentation automatisch generieren können, was sich als äußerst hilfreich erwies, um einen klaren Überblick über alle Endpunkte zu behalten. Insbesondere für die Frontend-Entwickler, um stets auf dem neuesten Stand zu sein. In diesem Semester war es leider nicht immer möglich, den Frontendentwicklern vorauszusein. Teilweise mussten sie mit Beispieldaten arbeiten oder Änderungen aufgrund sich ändernder Endpoints vornehmen. Wir streben an, dieses Problem in Zukunft zu verbessern, insbesondere da das Grundgerüst nun endlich steht.

Das Projekt war meine erste Gelegenheit, mich intensiver mit Backend-Entwicklung auseinanderzusetzen und eine Anwendung von Grund auf mit sowohl Frontend als auch Backend zu entwickeln. Das Projekt hat mir neues Selbstvertrauen gegeben, indem es mir gezeigt hat, dass man mit dem richtigen Team innerhalb kurzer Zeit schon einiges schaffen kann.

Abschließende Gruppenreflexion

Jedes Mitglied unseres Teams konnte individuelle Lernerfahrungen sammeln – sei es durch die Vertiefung von Frontend-Kenntnissen oder die erfolgreiche Bewältigung von Backend-Herausforderungen. Diese Vielfalt an Erfahrungen hat nicht nur unsere technischen Fähigkeiten verbessert, sondern auch die Stärkung der Teamarbeit. Neben der Entwicklung einer funktionsfähigen Webanwendung haben wir gelernt, wie entscheidend klare Kommunikation und effektive Teamkoordination sind. Die enge Zusammenarbeit ermöglichte es uns, Schwierigkeiten zu überwinden und auf das Erreichte stolz zurückzublicken. Die positiven Rückmeldungen aus den User-Tests, wie auch der gute Net Promoter Score stärken unsere Motivation für künftige Entwicklungen. Wir freuen uns darauf, Bevry im nächsten Semester weiter zu verbessern, zusätzliche Funktionen zu integrieren und hoffen, viele unserer Ideen, insbesondere im Bereich der sozialen Features, erfolgreich umzusetzen.

The post Bevry | Semesterprojekt WS23 appeared first on Mobile USTP MKL.

Voila Jones Algorithmus und seine Rolle

Der Viola-Jones-Algorithmus wurde im Jahr 2001 von den Computer-Vision-Forschern Paul Viola und Michael Jones entwickelt und speziell für die Gesichtserkennung konzipiert. Dieser Algorithmus nutzt Haar-like Features und einen Kaskadenklassifikator, um Gesichter in Echtzeit effizient zu identifizieren.

Der Viola-Jones-Algorithmus besteht aus vier grundlegenden Schritten:
1. Auswahl von Haar-like Features
2. Erstellung eines Integralbildes
3. Durchführung des AdaBoost-Trainings
4. Erstellung von Klassifikator-Kaskaden

Eine der besten Demonstrationen, wie die Erkennung funktioniert, stammt von einem ehemaligen ITP-Studenten, Adam Harvey, der in seinem Video “OpenCV Face Detection: Visualized” zeigt, wie ein Entscheidungsbaum mit Threshold-Filtern in verschiedenen Bildbereichen auf verschiedene Skalen ausgewertet werden kann, um ein Objekt zu erkennen. Hier kannst du es dir ansehen:

Wie funktioniert Gesichtserkennung mit OpenCV?

OpenCV bietet eine Vielzahl von Funktionen, die es ermöglichen, den Viola-Jones-Algorithmus für die Gesichtserkennung zu nutzen. Hier sind die Schritte, um es selbst auszuprobieren:

1. Installation von OpenCV: Um mit Gesichtserkennung in Python zu beginnen, musst du OpenCV installieren:

pip install opencv-python

2. Code für einfache Gesichtserkennung: Speichere diesen Code nun in einer Datei, z.B. faceDetection.py:

import cv2
from matplotlib import pyplot as plt
import glob

COLOR_FACE = (255, 0, 255)  # Farbe für Rahmen ums Gesicht (Magenta)

image_files = glob.glob("*.jpg")  # Alle jpg-Dateien im aktuellen Verzeichnis in Liste speichern

# Für jedes Bild Gesichtserkennung machen
for file in image_files:
    img_bgr = cv2.imread(file, cv2.IMREAD_COLOR)  # Die Bilddatei farbig einlesen
    b, g, r = cv2.split(img_bgr)  # Die Farbwerte auslesen (cv2 erstellt BGR-Bild)
    img_rgb = cv2.merge([r, g, b])  # Aus den BGR-Farbwerten ein RGB-Bild machen
    img_gray = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2GRAY)  # Ein Graustufenbild für die Erkennung machen

    # Gesichts-Klassifikatoren aus Datei laden
    face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + "haarcascade_frontalface_default.xml")

    # Eigentliche Gesichtserkennung ausführen
    faces = face_cascade.detectMultiScale(img_gray, scaleFactor=1.2, minNeighbors=5)

    print("Anzahl erkannte Gesichter:", len(faces))  # Anzahl erkannte Gesichter ausgeben

    # Erkannte Gesichter durchgehen.
    # Die erkannten Gesichter werden durch ein umrahmendes Rechteck gegeben:
    # (x, y, w, h) stellen Koordinaten, Breite und Höhe des Rechtecks dar
    for (x, y, w, h) in faces:
        # das Gesicht durch ein farbiges Rechteck im Bild markieren
        cv2.rectangle(img_rgb, (x, y), (x + w, y + h), COLOR_FACE, 2)

    plt.axis('off')  # Diagramm-Achsen ausblenden
    plt.imshow(img_rgb)  # Dem Diagramm das Bild hinzufügen
    plt.title(file)  # Titel des Diagramms setzen
    plt.show()  # Diagramm anzeigen

exit()

3. Ausführung: Speichere nun ein oder mehrere Bilder in das gleiche Verzeichnis ab, in der die faceDetection.py Datei liegt. Wähle ein Bild, bei dem das Gesicht / die Gesichter frontal zu sehen sind, sonst wird es vermutlich nicht einwandfrei funktionieren. In dem Codebeispiel verwende ich den haarcascade_frontalface_default.xml-Classifier, er ist darauf spezialisiert, frontal ausgerichtete Gesichter zu erkennen. Wenn die Gesichter in den Bildern seitlich oder in anderen Ausrichtungen erscheinen, kann dies zu geringerer Erkennungsgenauigkeit führen. In solchen Fällen könnte es sinnvoll sein, einen spezifischeren Gesichts- oder Kopf-Classifier zu verwenden, der auf die speziellen Anforderungen der Bilder zugeschnitten ist.
OpenCV bietet verschiedene vordefinierte Haarcascade-Classifier, die sich auf unterschiedliche Ausrichtungen und Kontexte spezialisieren. Hier sind zwei Beispiele:

• haarcascade_profileface.xml: Erkennt seitlich ausgerichtete Gesichter (Profilansicht).
• haarcascade_fullbody.xml: Erkennt den gesamten menschlichen Körper.

Wenn du dich für einen passenden Classifier für dein Bild entschieden hast, führe anschließend in deinem Verzeichnis folgenden Befehl aus:

python faceDetection.py

4. Ausgabe: Im Terminal solltest du dann sehen, wie viele Gesichter erkannt wurden (“Anzahl erkannte Gesichter: xy”), außerdem öffnet sich ein Fenster mit dem jeweiligen Bild. Die erkannten Gesichter sollten Magentafarben umrahmt sein.

Limitationen des Viola-Jones-Algorithmus

Obwohl es keine wesentlichen Nachteile dieses Algorithmus gibt, die dazu führen, dass er weiterhin sehr beliebt ist, weist er einige Einschränkungen auf. Diese umfassen die Unfähigkeit, Gesichter in bestimmten Szenarien zu erkennen, in denen das Gesicht einer Person beispielsweise mit einer Maske bedeckt ist. Auch kann der Algorithmus Schwierigkeiten bei nicht korrekt ausgerichteten Gesichtern haben.

Fazit

Insgesamt bietet die Gesichtserkennung mit Python und OpenCV eine effiziente Möglichkeit, visuelle Daten zu analysieren. Die bereitgestellten Codebeispiele ermöglichen eine einfache Umsetzung der Gesichtserkennung, wobei die Auswahl des Haarcascade-Classifiers für die Ausrichtung der Gesichter entscheidend ist. Trotz der Leistungsfähigkeit des Viola-Jones-Algorithmus sollten seine Limitationen, insbesondere bei nicht konventionellen Ausrichtungen der Gesichter, berücksichtigt werden.

Quellen:
https://github.com/kylemcdonald/AppropriatingNewTechnologies/wiki/Week-2
https://iq.opengenus.org/face-detection-using-viola-jones-algorithm/
https://medium.com/@Andrew_D./computer-vision-viola-jones-object-detection-d2a609527b7c
https://www.h-brs.de/sites/default/files/20171215_fbinf_mclab_ss15_gesichtserkennung_malz_nawid_msmk.pdf

The post Gesichtserkennung mit Python und OpenCV appeared first on Mobile USTP MKL.

1 EINLEITUNG

Die Gesundheit der Bevölkerung steht vor Herausforderungen, insbesondere im Hinblick auf Ernährungsgewohnheiten und Übergewicht. Gemäß Selbstangaben aus den Jahren 2019/2020 konsumieren nur 35 % der Erwachsenen in Deutschland täglich Obst und Gemüse. Gleichzeitig zeigt sich, dass ein erheblicher Anteil von Frauen (47 %) und Männern (60 %) an Übergewicht leidet [1]. Viele Menschen scheitern aufgrund mangelnder Motivation daran, gesundheitsfördernde Maßnahmen kontinuierlich durchzuführen. Hier setzen mHealth-Apps an, die das Ziel haben, die Gesundheit der Benutzer*innen zu verbessern. mHealth, kurz für mobile Gesundheit, bezieht sich auf Anwendungen auf mobilen Geräten wie Smartphones, Tablets und Wearables, Geräte, die am Körper getragen werden. Gamification, die Integration von Spielelementen zur Steigerung von Spaß und Engagement, erweist sich als wirksames Werkzeug, um Nutzer*innen zu motivieren und positive Gesundheitsverhaltensänderungen zu fördern. Die zunehmende Verbreitung und Weiterentwicklung mobiler Technologien befördert die Gamification als potenzielle Lösung für Gesundheitsprobleme und steigert die Effektivität digitaler Gesundheitsinterventionen [2].
Die Verbreitung von Gesundheitsanwendungen unterstreicht die Bedeutung dieses Sektors. Laut einer Umfrage aus dem Jahr 2022 nutzen 19 % der Befragten in Deutschland ein oder mehrmals pro Woche solche Anwendungen [3]. Diese Anwendungen decken eine breite Palette von Bereichen ab, darunter Meditation, Ernährung, Stress, Fitness, Diabetes, Schlaf, Wellness und Gewichtsverlust.
Bis 2028 wird der weltweite Umsatz im Bereich mHealth voraussichtlich etwa 410,4 Milliarden US-Dollar erreichen [4]. Obwohl der Umsatz allein keine direkten Schlüsse auf positive Gesundheitsergebnisse zulässt, verdeutlicht die weitverbreitete Nutzung von mHealth-Apps, besonders solcher mit Gamification, die Bedeutung eines fundierten Verständnisses dieser Methoden.

2 GAMIFICATION-DESIGNPRINZIPIEN

Gamification umfasst den Prozess, bei dem Designelemente aus dem Bereich des Game-Designs außerhalb traditioneller Spielumgebungen integriert werden, um eine spielerische Erfahrung zu erzeugen. Es handelt sich um einen methodischen Ansatz, bei dem Spielmechaniken und -elemente gezielt eingesetzt werden, um bestimmte Verhaltensweisen zu motivieren oder bestimmte Ziele zu erreichen [5].
Miller et al. [6] betonen die Bedeutung einer detaillierten Kenntnis dieser Mechanismen. Die zugehörigen Design- und Entwicklungsüberlegungen, veranschaulicht durch Beispiele aus dem Gesundheitsbereich, sind entscheidend für eine effektive Entwicklung von gamifizierten mHealth-Anwendungen.

2.1 Abzeichen

Abzeichen, Errungenschaften, Trophäen und ähnliche Konzepte dienen dazu, individuelle Erfolge zu identifizieren und zu belohnen. Es existieren zwei Hauptarten von Abzeichen. Absolute Abzeichen werden durch das Erreichen vordefinierter Meilensteine oder Leistungsbenchmarks erworben. Relative Abzeichen hingegen können sich Nutzer*innen im Vergleich zu den Leistungen der anderen Mitstreiter*innen verdienen. Diese werden für spezifische, oft anspruchsvolle Ziele vergeben, die nicht von allen erreicht werden können [7].
Gemäß Zichermann und Cunningham [8] sollten Abzeichen sorgfältig und zielgerichtet eingesetzt werden. Es ist wichtig, dass sie nicht übermäßig gratulieren oder routinemäßige Aufgaben belohnen. Die Vergabe von Abzeichen sollte für den*die Nutzer*in eine Bedeutung haben und bewusst sowie antizipierend erfolgen, anstatt zufällig und ohne klaren Grund. In Gesundheitsanwendungen sollten Benutzer*innen demnach nicht für schlechtes Verhalten oder das Nichterreichen von Zielen belohnt werden. Abzeichen sollten vielmehr sorgfältig auf die Ziele der Anwendung abgestimmt sein. In der Lauf-App Adidas Running [9] besteht beispielsweise die Möglichkeit, durch bestimmte Aktivitäten Rekorde aufzustellen und Abzeichen zu erhalten. Ebenso kann man durch die Teilnahme an Herausforderungen wie „1 Monat, 30 Kilometer“ sogenannte Badges verdienen. Die Fitness-App Strava [10] setzt ebenfalls auf Auszeichnungen, wobei Medaillen für schnelle Fahrtzeiten auf bestimmten Streckenabschnitten, wie zum Beispiel dem Bergsprint, vergeben werden.

2.2 Ranglisten

Bestenlisten bewerten dynamisch den individuellen Fortschritt und die Errungenschaften im Vergleich zu anderen. Sie zeigen Nutzer*innen ihre Position relativ zu anderen an und vermitteln ihnen ein Gefühl dafür, wie gut sie die Anwendung im Vergleich zu ihren Mitnutzenden nutzen [11]. Dabei können Benutzer*innen ihre Position im Kontext ihrer lokalen und globalen Netzwerke sehen und zwischen verschiedenen Filtern wechseln, um ihren Fortschritt genauer zu betrachten [6].
RunKeeper [12], eine Fitnessmanager-App mit GPS-Unterstützung, verwendet beispielsweise eine einfache, aber ansprechende Rangliste, die monatlich aktualisiert wird und befreundete Personen nach abgeschlossenen Aktivitäten sortiert. Die Position wird durch eine Zahl und eine Farbskala dargestellt, die dem*der Nutzer*in visuellen Kontext zu seinem Aktivitätsniveau bietet. Verschiedene Symbole, wie eine Schleife oder ein Sofa, werden verwendet, um die relative Aktivität oder Inaktivität der Benutzer*innen humorvoll zu kennzeichnen [6].

2.3 Punkte-, Levelsysteme und Fortschrittsbalken

In mHealth-Apps können fünf verschiedene Punktesysteme verwendet werden, um die Grundlage für die Benutzer*innenerfahrung zu schaffen. Die Wahl des geeigneten Systems hängt von den Zielen der App ab. Die wichtigsten Punktesysteme für mHealth-Apps sind [8]:

• Erfahrungspunkte: Diese dienen dazu, das Gesundheitsverhalten zu beobachten, zu bewerten und zu lenken. Sie können nicht eingelöst werden, sondern steigen kontinuierlich an und dienen langfristig der Lenkung des Benutzer*innenverhaltens. Das System könnte beispielsweise in regelmäßigen Abständen Erfahrungspunkte vergeben oder verfallen lassen, um langfristige Motivation und Engagement zu fördern.
• Einlösbare Punkte: Einlösbare Punkte werden üblicherweise im System für Belohnungen oder Rabatte eingelöst. Diese bilden oft die Grundlage einer virtuellen Wirtschaft und könnten in mHealth-Apps für gesundheitsfördernde Aktivitäten eingelöst werden.
• Fähigkeitspunkte: Sie werden bestimmten Aktivitäten zugeordnet und ermöglichen es den Nutzenden, Erfahrung und Belohnungen für zusätzliche Aufgaben zu erhalten. Diese könnten den Fortschritt in der Entwicklung gesundheitsfördernder Fähigkeiten widerspiegeln, zum Beispiel in Bezug auf Fitnesstraining oder gesunde Ernährung.
• Karma-Punkte: Karma-Punkte werden vergeben, um altruistisches Verhalten zu fördern. Sie werden beispielsweise für soziale Interaktionen, regelmäßiges Einchecken oder gegenseitige Unterstützung in Communities vergeben.
• Rufpunkte: Diese Punkte bilden das komplexeste Punktesystem und werden benötigt, wenn Vertrauen zwischen den Teilnehmenden wichtig ist. Sie könnten den Ruf der betreffenden Person in der mHealth-Community widerspiegeln.

Punkte- und Levelsysteme in Gesundheits-Apps zeigen den Benutzer*innen ihr Erfahrungsniveau, belohnen kontinuierliche Nutzung und fördern soziale Interaktion. Der schnelle Erwerb des ersten Levels, gefolgt von zunehmend anspruchsvolleren Stufen, spiegelt den Ansatz wider, anfängliche gesundheitsfördernde Verhaltensänderungen zu erleichtern und mit der Zeit herausforderndere Ziele zu setzen. Fortschrittsbalken visualisieren den Punktestand, motivieren zur fortgesetzten Nutzung und betonen den Beitrag der Nutzenden zur eigenen Gesundheit [6].

2.4 Challenges und Quests

Durch kontinuierliche Herausforderungen, die auch als Challenges bezeichnet werden, sowie durch Abenteuer, auch als Quests bekannt, können Benutzer*innen dazu motiviert werden, eHealth-Anwendungen fortlaufend zu nutzen. Dies geschieht insbesondere dann, wenn diese Herausforderungen ihr Verständnis der Anwendungsziele bestätigen. Es wird empfohlen, dass Herausforderungen für die Benutzer*innen flexibel gestaltet und leicht zugänglich sind. Dies erfüllt gleichzeitig eine erzieherische Funktion, indem sie den Benutzer*innen dabei helfen, die Anwendung effektiv zu nutzen. Unterschiedliche Herausforderungen für verschiedene Erfahrungsstufen sind wichtig und in der Regel erfolgreicher, da sie sicherstellen, dass Nutzer*innen entsprechend ihrem Kenntnisstand und ihrer Fähigkeit angemessene Aufgaben bewältigen können. Dies fördert eine stufenweise Steigerung der Schwierigkeit, optimiert
die Nutzungserfahrung und erhöht die Wahrscheinlichkeit, dass die Nutzer*innen motiviert bleiben und sich kontinuierlich weiterentwickeln [8].
Ein Beispiel in diesem Kontext ist die Diabetesmanagement-Anwendung mySugr [13]. Hier können Benutzer*innen Punkte sammeln, indem sie Aufgaben wie das Fotografieren ihrer Mahlzeiten und
das Eingeben von Blutzucker- und Stimmungsdaten abschließen. Das Abschließen täglicher Herausforderungen trägt dazu bei, das mySugr-Diabetes-Monster zu zähmen und bietet effektives Feedback über die Schritte im Diabetesmanagement der Nutzer*innen. Diese Gamification-Elemente fördern die kontinuierliche Nutzung und aktive Teilnahme an der Gesundheitspflege [6].

2.5 Soziale Interaktion und Onboarding

Die Integration von Social-Media-Plattformen in Gesundheits-Apps ermöglicht den Austausch von Gesundheitsdaten und fördert die Interaktion der Benutzer*innen in der Gemeinschaft. Durch diese Interaktion können Nutzer*innen Erfolge teilen und Verbindungen aufbauen, was die Motivation und langfristige Benutzer*innenbindung steigert. Ebenso spielen Onboarding-Maßnahmen, insbesondere gamifizierte Anleitungen, eine entscheidende Rolle in den ersten Minuten der App-Nutzung und beeinflussen maßgeblich die langfristige Bindung. Durch die erfolgreiche Anwendung dieser Konzepte könnten Nutzer*innen ermutigt werden, ihre Erfolge in sozialen Medien zu teilen und individuelle Herausforderungen zu erstellen, um ihr persönliches Netzwerk einzubeziehen und die Interaktion aufrechtzuerhalten. In einer Fitness-App könnten beispielsweise Funktionen integriert werden, die es den Nutzer*innen ermöglichen, ihre Facebook-, WhatsApp- oder E-Mail-Kontakte hinzuzufügen. Nutzer*innen könnten Fitness-Herausforderungen an befreundete Personen senden, von ihnen erhalten und deren Fortschritt in persönlichen Leaderboards vergleichen. Darüber hinaus könnte die Implementierung eines Feeds dazu führen, dass Nutzer*innen ihre Fortschritte teilen und einen gemeinschaftlichen Austausch fördern [6].

3 GAMIFICATION AM BEISPIEL DER FITBIT-APP

Fitbit [14] ist ein Hersteller von Fitness-Trackern und Smartwatches. Die erfassten Gesundheits- und Aktivitätsdaten können über eine begleitende App eingesehen werden. Im September 2022 führte die Fitbit-Appweltweit den Umsatz unter den Fitness- und Gesundheits- Apps im Google Play Store an, gefolgt von Strava und anderen Anwendungen, darunter Fitness-, Menstruations- und Meditations-Apps [15]. Fitbit überzeugt nicht nur finanziell, sondern motiviert auch durch geschickte Gamification-Integration Menschen zu einem aktiveren Lebensstil.
Die Fitbit-App beinhaltet verschiedene Gamification-Elemente. Darunter lassen sich die folgenden identifizieren [16].

• Challenges: Die App bietet verschiedene Herausforderungen wie „Get Fit Bingo“ und „All for One“, bei denen Nutzer*innen Badges und Punkte verdienen. Diese virtuellen Herausforderungen fördern
  den Wettbewerb und soziale Interaktion. Die Möglichkeit, gegen andere zu konkurrieren, Belohnungen zu erhalten und in Ranglisten aufzusteigen, erhöht die Motivation erheblich.
• Solo-Abenteuer: Nutzer*innen können virtuell durch verschiedene Strecken laufen und dabei Meilensteine erreichen, um Belohnungen zu erhalten. Die Verbindung von physischen Herausforderungen mit virtuellen Erlebnissen führt zu einer besonders motivierenden Erfahrung.
• Wettkämpfe: Multiplayer-Rennen, bei denen bis zu 30 Personen gegeneinander antreten, um virtuelle Strecken abzuschließen. Die soziale Interaktion, die Möglichkeit, sich gegenseitig Nachrichten zu senden und die Rennatmosphäre steigern die Motivation.
• Belohnungen und Badges: Nutzer*innen erhalten Badges, Punkte und virtuelle Auszeichnungen für ihre Erfolge und Fortschritte. Die psychologische Belohnung durch visuelle Auszeichnungen stärkt das positive Verhalten und fördert die Kontinuität.
• Anreize und Boni: Die App implementiert Boni als kleine Anreize, um die Motivation zur Bewegung zu steigern. Dadurch sollen die Nutzer*innen dazu ermutigt werden, ihre Fitnessziele zu erreichen. Die Kombination von Wettbewerb, sozialer Interaktion, physischen Aktivitäten und virtuellen Erlebnissen hat Fitbit geholfen, eine engagierte Gemeinschaft zu schaffen und Menschen dazu zu inspirieren, aktiver zu sein.

Die Kombination von Wettbewerb, sozialer Interaktion, physischen Aktivitäten und virtuellen Erlebnissen hat Fitbit geholfen, eine engagierte Gemeinschaft zu schaffen und Menschen dazu zu inspirieren, aktiver zu sein.

4 WIRKUNG UND HERAUSFORDERUNGEN

Die University of Cape Town führte eine Studie mit Studierenden durch, um die Auswirkungen von Gamification in mHealth- Anwendungen auf das Gesundheitsverhalten zu untersuchen. Die Ergebnisse zeigen, dass Gamification-Elemente, insbesondere Abzeichen und Punktesysteme, einen positiven Einfluss auf die Veränderung von Gesundheitsgewohnheiten haben [2].
Eine andere Untersuchung, die einen Überblick über 50 Studien zur empirischen Forschung zu Gamification-Interventionen im Bereich körperlicher Aktivität bietet, betont die Wirksamkeit dieser Maßnahmen und die mögliche Effektivität einer Kombination verschiedener Spielelemente [17].
Die Anwendung von Gamification zeigt auch in der psychischen Gesundheitspflege von Kindern und Jugendlichen Potenzial, besonders bei der Bewältigung von Stimmungs- und Angstsymptomen. Dies könnte in mHealth-Apps für junge Betroffene integriert werden, um Therapieansätze spielerischer und ansprechender zu gestalten [18]. Es ist jedoch zu beachten, dass weitere Forschung mit größeren Stichproben erforderlich ist, um die statistische Signifikanz genauer zu bestimmen.
Der erfolgreiche Einsatz von Gamification hängt stark vom Kontext ab, in dem die Gamification implementiert wird, sowie von den persönlichen Eigenschaften der Benutzer*innen, die sie verwenden [19]. Eine systematische Literaturübersicht ergab, dass gamifizierte Gesundheitsinterventionen und die Erforschung von ihnen, am besten durch ein umfassendes Verständnis der kontextuellen Faktoren verbessert werden könnten. Demnach ist die Analyse des Kontexts entscheidend, um effiziente Gamification in verschiedenen Aspekten des Gesundheitswesens zu verstehen [20].
Verschiedene Nutzungsgruppen könnten Gamification unterschiedlich erleben. In einer Studie zur Gamification im Kontext von körperlicher Betätigung wurden die demografischen Unterschiede in den wahrgenommenen Vorteilen der Gamification untersucht. Die Daten basierten auf einer Umfrage mit 195 Personen, die die Fitocracy App [21] nutzen, eine Anwendung, die sich auf die Gamification von körperlicher Betätigung konzentriert. Die Studie ergab, dass Frauen offenbar eine höhere Wertschätzung für die sozialen Aspekte der Gamification zeigen als Männer, insbesondere in Bezug auf Anerkennung und soziale Verbindungen. Auch der Einfluss des Alters wird deutlich, dieser zeigt sich in der abnehmenden Benutzungsfreundlichkeit der Gamification bei älteren Personen. Dies deutet darauf hin, dass diese möglicherweise unterschiedliche Anforderungen an die Benutzungsfreundlichkeit haben. Des Weiteren wurde festgestellt, dass die wahrgenommene Freude und Nützlichkeit der Gamification mit der Nutzungsdauer abnimmt, was darauf hinweist, dass Nutzer*innen möglicherweise von den anfänglichen Effekten der Neuheit der Anwendung beeinflusst werden [22].
Diese letzte Erkenntnis wird als Novitätseffekt oder Neuheitseffekt bezeichnet, was darauf hinweist, dass Gamification-Techniken Benutzer*innen im Laufe der Zeit auch langweilen können. Die Ergebnisse einer Langzeitstudie über Gamification deuten ebenfalls darauf hin, dass der anfängliche Reiz und Enthusiasmus für Gamification-Elemente mit der Zeit nachlässt. Allerdings wurde auch beobachtet, dass nach dieser Phase ein Gewöhnungseffekt einsetzt, bei dem Benutzer*innen Anpassung und Vertrautheit mit den Gamification-Elementen entwickeln, was langfristiges Engagement fördert. Dies legt nahe, dass die Berücksichtigung von Strategien zur Anpassung der Gamification-Elemente im Laufe der Zeit sinnvoll ist. Durch diese strategische Variation könnte der Gewöhnungseffekt genutzt werden, um die Aufmerksamkeit und das Interesse der Nutzer*innen aufrechtzuerhalten und gleichzeitig die langfristigen positiven Auswirkungen der Gamification zu unterstützen [23].
Auch der zuvor in Abschnitt 3 erwähnte Fitness-Tracker von Fitbit wurde auf Langzeitnutzung untersucht. Die Ergebnisse zeigen, dass die Neuheitsperiode für die meisten Teilnehmenden etwa 3 Monate dauerte. Nach diesem Zeitraum kann die Nutzung des Geräts abnehmen und einige Benutzer*innen könnten es sogar ganz aufgeben. Die Analyse zeigte, dass persönliche Motivationen, wie zum Beispiel das intrinsische Interesse an körperlicher Aktivität und soziale Unterstützung, Benutzer*innen dazu veranlassen, ihre Fitbit-Geräte auch nach der Neuheitsperiode weiterzunutzen. Die Studie zeigt, dass der Erfolg von Aktivitätstracking-Geräten nicht nur von den Gerätefunktionen abhängt, sondern eng mit persönlichen, sozialen und intrinsischen Motivationen der Benutzer*innen verknüpft ist. Designentscheidungen sollten diese Faktoren berücksichtigen, um langfristige Partizipation zu fördern [24].
Gamification-Strategien, die auf den*der Endnutzer*in zugeschnitten werden können, haben demnach das Potenzial erfolgreicher zu sein. Das könnte beispielsweise mittels Profiling, das Integrieren von Hinweisen zu bestimmten Uhrzeiten oder durch Erhöhen des Schwierigkeitsgrads entsprechend den Fähigkeiten der Benutzer*innen erreicht werden [25].
Auch Korn et al. [26] betonen, dass der Erfolg von Gamification-Anwendungen durch die Berücksichtigung des Anwendungskontexts und der Eigenschaften der Nutzer*innen beeinflusst wird. Eine Analyse der Persönlichkeiten der Nutzer*innen ermöglicht die gezielte Auswahl und situationsbezogene Anpassung von Gamification-Elementen für maximalen Erfolg. Somit wird auch vermieden, dass Elemente wie beispielsweise Bestenlisten kontraproduktiv wirken, da sie für manche Zielgruppen motivierend, für andere jedoch demotivierend oder sogar stressauslösend sein können.

5 SCHLUSSFOLGERUNG

Die Arbeit betont die Rolle der Gamification in mHealth-Apps für positive Gesundheitsveränderungen. Erfolgsbeispiele wie die Fitbit-Produkte und wissenschaftliche Erkenntnisse unterstreichen das Potenzial von Gamification. Forschungsergebnisse zeigen, dass der Einfluss von Gamification nicht nur kurzfristig durch den Novitätseffekt, sondern auch durch den Gewöhnungseffekt langfristig geprägt wird. Die Ergebnisse legen nahe, dass eine fortlaufende Anpassung und Variation der Gamification-Elemente im Laufe der Zeit entscheidend ist, um den Erfolg von Gamification aufrechtzuerhalten. Weitere Schlüsselfaktoren sind die Analyse des Kontexts und die Berücksichtigung individueller Nutzer*innenprofile. Geschlechts- und altersabhängige Unterschiede in der Wahrnehmung von Gamification-Elementen sowie der Einfluss persönlicher und sozialer Kontexte auf die Langzeitnutzung unterstreichen die Notwendigkeit einer individualisierten Herangehensweise. Obwohl vielversprechende Ergebnisse vorliegen, bedarf es weiterer Forschung, insbesondere unter Verwendung umfangreicherer Stichproben über einen längeren Zeitraum und in verschiedenen Kontexten, um die besten Praktiken der Gamification im Gesundheitswesen besser zu verstehen und sicherzustellen.

LITERATUR

[1] Robert Koch-Institut. 2022. Dashboard zu Gesundheit in Deutschland aktuell – GEDA 2019/2020. Robert Koch-Institut. letzter Zugriff am 18.11.2023 von https://public.tableau.com/app/profile/robert.koch.institut/viz/Gesundheit_in_Deutschland_aktuell/GEDA_20192020-EHIS

[2] Goldhill Jason und Roodt Sumarie. 2018. Gamification in m-Health Applications and its Effects on Health Behavioural Changes in Net Generation Students. In 2018 International Conference on Intelligent and Innovative Computing Applications (ICONIC). 1–7. https://doi.org/10.1109/ICONIC.2018.8601206

[3] Initiative D21. 2023. Umfrage in Deutschland zur Nutzung von Gesundheit oder Fitnessanwendungen im Jahr 2022. letzter Zugriff am 19.11.2023 von https://de.statista.com/statistik/daten/studie/1190312/umfrage/nutzung-vongesundheit-oder-fitnessanwendungen-in-deutschland

[4] The Insight Partners. 2021. Weltweiter Umsatz mit Mobile Health (mHealth) in den Jahren von 2017 bis 2028 (in Milliarden US-Dollar). letzter Zugriff am 19.11.2023 von https://de.statista.com/statistik/daten/studie/387489/umfrage/weltweiter-umsatz-mit-mobile-health-mhealth

[5] Werbach Kevin. 2014. (Re)Defining Gamification: A Process Approach. In Persuasive Technology, Spagnolli Anna, Chittaro Luca, and Gamberini Luciano (Eds.). Springer International Publishing, Cham, 266–272. https://doi.org/10.1007/978-3-319-07127-5_23

[6] Miller Aaron, Cafazzo Joseph und Seto Emily. 2016. A game plan: Gamification design principles in mHealth applications for chronic disease management. Health Informatics Journal 22, 2 (2016), 184–193. https://doi.org/10.1177/1460458214537511

[7] Easley David und Ghosh Arpita. 2013. Incentives, gamification, and game theory: an economic approach to badge design. In Proceedings of the 14th ACM Conference on Electronic Commerce, EC 2013, Philadelphia, PA, USA, June 16-20, 2013. ACM, 359–376. https://doi.org/10.1145/2492002.2482571

[8] Zichermann Gabe und Cunningham Christopher. 2011. Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps (1st ed.). O’Reilly Media, Inc.

[9] adidas Running. 2023. adidas Running – Lauf App. letzter Zugriff am 19.11.2023 von https://www.runtastic.com

[10] Strava. 2023. Strava – Laufen & Radfahren. letzter Zugriff am 19.11.2023 von https://www.strava.com

[11] Yefeng Liu, Todorka Alexandrova und Tatsuo Nakajima. 2011. Gamifying Intelligent Environments. In Proceedings of the 2011 International ACM Workshop on Ubiquitous Meta User Interfaces (Scottsdale, Arizona, USA) (Ubi-MUI’11). Association for Computing Machinery, New York, NY, USA, 7–12. https://doi.org/10.1145/2072652.2072655

[12] Runkeeper. 2023. Runkeeper – Together, we run. letzter Zugriff am 22.11.2023 von https://runkeeper.com

[13] MySugr. 2023. MySugr – Diabetes Tagebuch. letzter Zugriff am 19.11.2023 von https://www.mysugr.com

[14] Fitbit. 2023. Fitbit – Gesundheit & Fitness. letzter Zugriff am 24.11.2023 von https://www.fitbit.com

[15] Airnow. 2022. Ranking der erfolgreichsten Gesundheits- und Fitness-Apps im Google Play Store nach Umsatz weltweit im September 2022 (in Millionen US-Dollar). letzter Zugriff am 19.11.2023 von https://de.statista.com/statistik/daten/studie/689468/umfrage/gesundheitsund-fitness-apps-im-google-play-store-nach-umsatz-weltweit

[16] Wysopal Julia. 2020. Gamification through Fitbit – Playing to exercise or playing to win? https://arno.uvt.nl/show.cgi?fid=152433

[17] Xu Linqi, Shi Hongyu, Shen Meidi, Ni Yuanyuan, Zhang Xin, Pang Yue, Yu Tianzhuo, Lian Xiaoqian, Yu Tianyue, Yang Xige und Li Feng. 2022. The Effects of mHealth-Based Gamification Interventions on Participation in Physical Activity: Systematic Review. JMIR Mhealth Uhealth 10, 2 (3 Feb 2022), e27794. https://doi.org/10.2196/27794

[18] Xie Huiting. 2022. A scoping review of gamification for mental health in children: Uncovering its key features and impact. In Archives of Psychiatric Nursing. 132–143. https://doi.org/10.1016/j.apnu.2022.07.003

[19] Hamari Juho, Koivisto Jonna und Sarsa Harri. 2014. Does Gamification Work? – A Literature Review of Empirical Studies on Gamification. In 2014 47th Hawaii International Conference on System Sciences. 3025–3034. https://doi.org/10.1109/HICSS.2014.377

[20] Alahäivälä Tuomas und Oinas-Kukkonen Harri. 2016. Understanding persuasion contexts in health gamification: A systematic analysis of gamified health behavior change support systems literature. International Journal of Medical Informatics 96 (2016), 62–70. https://doi.org/10.1016/j.ijmedinf.2016.02.006

[21] Fitocracy. 2023. Fitocracy – A Stronger You in 2023. letzter Zugriff am 22.11.2023 von https://www.fitocracy.com

[22] Koivisto Jonna und Hamari Juho. 2014. Demographic differences in perceived benefits from gamification. Computers in Human Behavior 35 (2014), 179–188. https://doi.org/10.1016/j.chb.2014.03.007

[23] Rodrigues Luiz, Pereira Filipe, Toda Armando, Palomino Paula, Marcela Pessoa, Carvalho Leandro, Fernandes David, Oliveira Elaine, Cristea Alexandra und Isotani Seiji. 2022. Gamification suffers from the novelty effect but benefits from the familiarization effect: Findings from a longitudinal study. International Journal of Educational Technology in Higher Education (2022). https://doi.org/10.1186/s41239-021-00314-6

[24] Shin Grace, Feng Yuanyuan, Jarrahi Mohammad Hossein und Gafinowitz Nicci. 2018. Beyond novelty effect: a mixed-methods exploration into the motivation for long-term activity tracker use. JAMIA Open 2, 1 (12 2018), 62–72. https://doi.org/10.1093/jamiaopen/ooy048

[25] Vella Kellie, Peever Nikki, Klarkowski Madison, Ploderer Bernd, Mitchell Jo und Johnson Daniel. 2018. Using Applied Games to Engage MHealth Users: A Case Study of MindMax. In Proceedings of the 2018 Annual Symposium on Computer-Human Interaction in Play (Melbourne, VIC, Australia) (CHI PLAY ’18). Association for Computing Machinery, New York, NY, USA, 511–522. https://doi.org/10.1145/3242671.3242686

[26] Korn Oliver, Schulz Annika und Hagley Belinda. 2022. Gamification: Grundlagen, Methoden und Anwendungsbeispiele. 43–63. https://doi.org/10.1007/978-3-658-35059-8_4

The post SOTA – Gamification im Gesundheitswesen: Designprinzipien und Langzeitwirkungen in mHealth-Anwendungen appeared first on Mobile USTP MKL.

Die Idee und das Konzept

Die Idee war, jeden Tag im Dezember eine neue Information oder einen hilfreichen Tipp zum Thema Veganismus zu präsentieren. Dabei habe ich bewusst darauf verzichtet, den aktuellen Tag zu überprüfen, damit die Inhalte der Webseite im Rahmen des ‘Print to Mobile’ Projekts immer zugänglich sind. Mein Ziel ist es, nicht nur Rezepte zu teilen, sondern auch das Bewusstsein für die Vorteile eines veganen Lebensstils zu stärken.

Wie der Adventskalender letztlich verwendet wird, liegt im Ermessen des Nutzers oder der Nutzerin

• Auf dem Poster sind insgesamt 24 QR-Codes abgebildet. Jeden Tag wird einer der nummerierten QR-Codes gescannt. Das Poster eignet sich ideal für das Wohnzimmer und sollte entweder im DIN A3- oder A2-Format vorliegen. Dadurch wird gewährleistet, dass die QR-Codes trotz ihrer engen Anordnung problemlos eingescannt werden können.
• Alternativ besteht die Möglichkeit, die 24 QR-Codes auszuschneiden und jeden QR-Code in einem eigenen Adventskalender zu platzieren, zusammen mit einem Geschenk oder einer süßen Leckerei.
• Eine weitere Option besteht darin, sich bis zum 24. Türchen durchzuklicken, ohne den QR-Code jeden Tag einzuscannen.

Die Umsetzung und Technologien

Für die Erstellung der Webapplikation habe ich React und Tailwind CSS verwendet. Das interaktive Säulendiagramm in Türchen 2 habe ich mit ApexCharts erstellt. Die QR-Codes wurden mithilfe von QR Batch generiert, da man dort mehrere QR-Codes auf einmal erstellen kann.
Um eine einheitliche Benutzeroberfläche zu gewährleisten, habe ich eine Basiskomponente erstellt, in die die verschiedenen Inhalte geladen werden. Zusätzlich habe ich die Funktionalität implementiert, um zwischen dem Light Mode, Dark Mode und dem im Betriebssystem hinterlegten Anzeigemodus umzuschalten. Der ausgewählte Modus wird im Local Storage gespeichert. Dank der useEffect-Hook von React aktualisiert sich der Systemmodus bei Änderungen im Betriebssystem automatisch, ohne dass die Seite neu geladen werden muss. Nicht nur die Hintergrund- und Textfarben passen sich dem ausgewählten Modus an, sondern auch die Farben des SVGs auf der Startseite.

Mögliche Erweiterungen

Dieses Projekt bietet zahlreiche Möglichkeiten zur Erweiterung. In Zukunft könnte man interaktive Elemente hinzufügen, wie beispielsweise ein Quiz zum Thema Veganismus oder die Möglichkeit, eigene vegane Rezepte oder Feedback beizutragen. Natürlich würde es sich auch anbieten, die Inhalte des Adventskalenders jedes Jahr zu aktualisieren und zu erweitern, um eine ständig wachsende Wissensquelle zu schaffen. Darüber hinaus könnte man nach Kooperationspartnern suchen, wie zum Beispiel Veganuary. Dieser hat viele Unterstützer, die Rabattcodes und ähnliches bereitstellen könnten, um das Projekt noch attraktiver zu gestalten.

The post Print to Mobile – vegan advent appeared first on Mobile USTP MKL.