Recherche

Zu Beginn sah ich mir unterschiedliche UX/UI-Design- und Entwickler-Portfolios an. Dabei sammelte ich einerseits Inspirationen für Gestaltungsmöglichkeiten und analysierte andererseits, welche Merkmale ein großartiges Portfolio ausmachen.

Ein weiterer Schritt in der Vorbereitung war es, mich mit WordPress vertraut zu machen. Da ich zuvor noch nie so richtig mit WordPress gearbeitet hatte, war die Fülle an Informationen, Plattformen, Plugins, und Erweiterungsmöglichkeiten zunächst regelrecht überwältigend. Ich entschied mich basierend auf verschiedenen Ratgebern dazu, das WordPress Theme Astra in Kombination mit Elementor zu verwenden, um dessen ausgeprägten Support für Responsiveness und Mobile auszunutzen. Für die lokale Entwicklung entschied ich mich für das LocalWP Tool, das eine nutzerfreundliche und unkomplizierte lokale Nutzung von WordPress ermöglichte. Für die Versionierung erstellte auch ein GitHub Repository.

Design

Beim Design der Website mit Figma entwarf ich gemäß des Mobile-First-Ansatzes zunächst die mobilen Varianten der Seiten. Nachdem ich einen Styleguide erstellt hatte, um den gewünschten Look & Feel festzulegen, startete ich mit dem Design von Layout und Komponenten. Dabei stellte es sich als schwierig heraus, dass ich noch nicht so recht wusste, mit welchen technischen Einschränkungen ich es bei den Gratisversionen von Astra und Elementor zu tun haben würde. Daher erstellte ich zunächst eine Testseite, um mir einen Überblick über die mir tatsächlich verfügbaren Möglichkeiten zu machen. In weiterer Folge passte ich das Design entsprechend an.

Umsetzung

Nachdem ich den Content in Figma aufbereitet hatte, war es nicht allzu kompliziert, diesen in WordPress einzupflegen. Obwohl dieser Prozess relativ unkompliziert war, stellte er sich doch schnell als mühsam heraus. Am meisten machte mir zu schaffen, dass ich keinen Weg fand, richtige Komponenten für einzelne Elemente zu erstellen, die sich mit einer globalen Bearbeitung auch über alle Instanzen selbst aktualisieren würde. Abgesehen von dem Footer, dem Header, und einzelnen Basiselementen wie Headings und Buttons war ich hierbei auf Copy-Paste beschränkt. Custom CSS stellte sich ebenfalls als umständlich heraus, und oft suchte ich in Elementor vergebens nach Möglichkeiten nach Einstellungen für bestimmte CSS-Properties wie etwa einer einfachen max-width.

Für das Hosting nutzte ich Cloudflare Pages. Da in der Gratisversion nur statische Seiten gehostet werden, verwendete ich zunächst das WordPress-Plugin WP-Optimize, um die Dateigröße und -formate der eingebetteten Medien zu optimieren. Danach generierte ich eine statische Version der Website mit dem Plugin Simply Static für das Deployment über Cloudflare Pages.

Fazit

Insgesamt bin ich zufrieden mit dem Endresultat und bin froh darüber, die Gelegenheit genutzt zu haben, um mich mit WordPress vertraut zu machen. Ein Learning, dass ich auf jeden Fall für zukünftige Projekte mitnehmen werde, ist, dass eine gründliche Vorarbeit im Theme Customizer und in der sorgfältigen Erstellung von Templates viel Frust und Zeit bei der Arbeit mit WordPress ersparen kann. Besonders positiv herausgestochen ist für mich das LocalWP-Tool, das die Erstellung und Wartung eines lokalen Development Servers für WordPress-Seiten wirklich einfach und unkompliziert gemacht hat.

Da die Zeit leider nicht reichte, um ausreichend detaillierte Case Studies für alle Projekte, die ich auf dem Portfolio ausstellen möchte, auszuarbeiten, beschränkte ich mich auf die vier, die für mich am Wichtigsten und am Relevantesten waren. Alle weiteren Case Studies, die ich demnächst ergänzen möchte, sind in Preview-Form angeteasert. Eine weitere geplante Verbesserung der Portfolio-Website ist eine custom Domain, die ich auch für eine eigene Email-Adresse für die Kontaktaufnahme nutzen möchte.

The post Portfolio-Website | Projekt WS24 appeared first on Mobile USTP MKL.

Das Semesterprojekt selbst wurde gemeinsam von allen Mitgliedern der Masterklasse AVE, mit Unterstützung von Mitgliedern aus den Masterklassen 3D Audio & Sound Design sowie Grafikdesign für einzelne Arbeitspakete, umgesetzt. Dabei handelt es sich um einen 3D-Animationsfilm, der eine Länge von ungefähr zwei Minuten haben sollte. Thema des Animationsprojektes war es, eine Intro-Animation für eine fiktive Serie zu erstellen, die von einem Rüsselkäfer handelt, der zwar ein Bösewicht sein möchte, aber viel zu süß aussieht, um als solcher ernstgenommen zu werden. Der Titel des Projekts lautet sinngemäß „The Root of all Weevil“.

Vorgaben

Die Vorgaben für die Portfolio-Website umfassten einen kurzen Überblick über das Projekt, eine Einbettung des fertigen Animationsfilms als YouTube-Video, eine Vorstellung aller Mitwirkenden inklusive relevanter Social-Media-Links und Kontaktdaten, sowie Einblicke in den Produktionsprozess des Animationsfilms anhand einer Bildergalerie. Eine weitere Voraussetzung war ein responsives Design und Optimierung der Website für Mobilgeräte. Das visuelle Design der Website sollte außerdem das im Rahmen des Animationsfilms herausgearbeitete Markendesign weiterführen und so die Bildsprache und Farbenwelt der Animation unterstreichen.

Prozess & Ergebnis

Der Entwurf des Screen-Designs wurde von einer Studentin aus der Masterklasse Grafikdesign übernommen. Das Screen-Design durchlief parallel zum Beginn des Semesterprojekts mehrere Feedbackrunden, sowohl mit dem Animationsteam als auch mit mir, sodass ich ebenfalls Feedback bei Fragen zur technischen Umsetzung geben konnte.

Da ich mich nicht um das Design kümmern musste, nutzte ich die Zeit und Gelegenheit, um mich mit React vertraut zu machen, da ich dieses Framework zuvor noch nie verwendet hatte und dieses Projekt sich als Einstieg gut anbot. Ende April wurde das fertige Screen-Design vom Animationsteam abgenommen. Ich konnte in einem Meeting mit der Koordinatorin für die externen Auftragnehmer:innen weitere Fragen abklären und schließlich mit der Umsetzung mit React und Vite beginnen. Da die Website statisch ist, war kein Backend notwendig. Mit WhatsApp als primären Kommunikationskanal erhielten alle Auftragnehmer:innen regelmäßig Updates zum aktuellen Stand des Projektes und relevanten Deliverables aus den Arbeitspaketen sowie deren Deadlines. Im Juni waren alle Anforderungen für die Website umgesetzt. Nach einer weiteren Feedbackrunde wurden noch einige Ergänzungen wie grafische Illustrationen hinzugefügt und eine eigene Domain gekauft. Zum Zeitpunkt der Fertigstellung der Website ist der Animationsfilm noch nicht fertiggestellt, weswegen vorläufig ein Platzhaltervideo auf der Website eingebunden ist, sodass nur noch der Link ausgetauscht werden muss.

Retrospektive

Dieses Projekt war insgesamt eine lehrreiche Erfahrung für mich. Ich konnte mich erstmals mit React befassen und mir erste Kenntnisse zu diesem Framework aneignen. Besonders herausstechend war für mich die (durchaus herausfordernde) Erfahrung, die Rolle der Designerin komplett zu verlassen und den Entwicklungsprozess rein aus Entwicklersicht zu durchlaufen. Dies bot mir einige interessante Einblicke dazu, welche Informationen und Ressourcen man als Entwicklerin zu einem Design benötigt, wenn man selbst überhaupt nicht in diesen Schritt involviert ist. Auch die Zusammenarbeit mit einem größeren Team in der Rolle als externe Auftragnehmerin war sehr lehrreich im Hinblick darauf, wie in der Zusammenarbeit mit und für Kunden vorzugehen ist. Ausschlaggebend ist jedenfalls eine offene beidseitige Kommunikation und häufige, konstruktive Feedbackzyklen sowie ein respektvolles und wertschätzendes Klima, was in diesem Projekt insgesamt gut funktioniert hat.

Link zur Portfolio-Webseite

The post TFG | Animationsfilm Portfolio-Website 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.

Figma as the Bridge to Development

According to Figma, more developers than designers currently have active accounts with paid plans. This shows that Figma, despite primarily being a design tool, is also extensively used by developers. However, as much as Figma has made collaboration between designers and developers easier, developers still face obstacles when it comes to the tool. Figma aims to reduce these hindrances with its recently added features. These features encourage a design workflow that involves developers actively and continuously in the process. From new Figma features such as Dev Mode to integrations with code editors, these tools bridge the gap between design and development in order to turn the creation of digital interfaces into a simple and seamless process.

The Road to Dev Mode

As far back as 2019 with the launch of the auto layout feature, Figma has made efforts to blur the lines between design and code. The auto layout functionality allows designers to create responsive layouts that simulate flexbox behavior—this was enhanced further with the May 2022 update that also added the functionality to wrap overflowing content dynamically.

Figma’s Config conference in June of 2023 saw the announcement of many new features that all revolved around making design easier to translate into code. The conference was followed by the launch of variables, which allows designers to save variables of several different data types—these types are color, number, string, and Boolean. Variables can also be extended by modes, which make it possible to return different values based on the mode of a frame or section. Modes make it easy to translate designs into different languages with string variables, create responsive components and layout with the number variables used in spacing slots, and, of course, color themes such as light and dark modes. Moreover, conditional prototyping was introduced. Using all these variable types, prototypes now support conditional logic, which reduces the number of variations needed for any given screen.

What is Dev Mode?

The most important update from a developer point of view, however, was the introduction of Dev Mode. Its beta version was launched right after the conference and instantly made many existing Figma plugins for design-to-code conversion redundant.

Removing Barriers

At its core, Dev Mode is an entirely new viewing mode for Figma that allows users to view a design through the eyes of a developer. It is intended to work like a browser inspector tool, but for Figma files. This brings the familiar into unfamiliar territory, as Figma’s interface, with all its design features, may be overwhelming for developers who do not need to use any of these functionalities. The philosophy behind Dev Mode therefore is to create the basis for a better, more direct communication between designers and developers by removing barriers for the latter. Dev Mode comes with a variety of features: for communication, it supports the commenting functionality like all other Figma modes. It also offers ready-for-development markers, which allow designers to mark individual frames, screens, or entire sections as ready for development, so that developers know at first glance what is relevant for them.

Iterate, Iterate, Iterate

To empathize the iterative design process, the mode also comes with comparison functionalities. Thanks to version control, developers can compare the current designs with previous versions to quickly find the areas that need adjustment.

The Dev Mode Inspector

Dev Mode comes with all the handy inspection tools that one might expect from a browser inspector. Measurements and spacings can be visualized via hover and keyboard shortcuts; component variants and their usage are documented to provide a simple overview. Variables and their values are listed for selected elements. Color values can be copied to the clipboard with a single click—users can also choose the format, such as HEX, RGB, HSL, and more. For spacing, paddings and borders are visualized in the familiar box model diagram. Individual frames or other assets such as images and icons can be exported in different file types such as PNG, SVG, and JPG.

To streamline implementation, the Dev Mode toolbox also provides code snippets that are generated from the designs. These code snippets support a wide selection of languages and frameworks, and for those that do not come with Dev Mode out of the box, there is likely a community plugin. Languages include:

• CSS and HTML (Web)
• SwiftUI or UIKit (iOS)
• Compose or XML (Android)

However, designs need to be clean (i.e., use auto layout, variables, and appropriate layer structure) for the generated code to be of usable quality, so responsibility lies in the hands of the designer to make the developer’s job easier in that regard.

Everything in One Place

To further integrate Figma into the workflow, external tools such as GitHub, Jira, Storybook, and more can be linked in the Dev Mode view. This also includes VS Code links that integrate with the official Figma for VS Code extension.

Figma for VS Code

The Figma for VS Code extension does what it says on the tin: it brings Figma into the developer’s domain. It allows developers to open and view Figma design files, get updates and see comments in real time, and connects specific code files to their respective design components. By selecting a component in the design, developers can easily view their properties. Moreover, the extension also provides autocomplete code suggestions that are generated based on the Figma designs. Conversely, developers also have access to code snippets like in Dev Mode. The extension also provides the functionality to download assets from the Figma file to the repository with just one click. Finally, development resources such as documentation can be linked to have everything at hand.

Code Connect: Support for Design Systems

Dev Mode moved out of its beta phase with the start of 2024—while the beta version was available for all users regardless of payment plan, Dev Mode is now only available for paid plans. As an upside, there is the option for a separated Dev Mode seat, meaning that the plan only covers Dev Mode and Figma’s viewing mode for a cheaper price, without edit access.

However, Figma continues to add new features to make Dev Mode worth the price. In April 2024, one such new feature was announced at Framework, Figma’s global design system event: Code Connect. This feature was designed to improve the adoption of design systems by making the relevant code more accessible for developers. This comes in handy especially for large component libraries where maintaining patterns and rules becomes harder and harder the more the system and its applications evolve.

Code Connect integrates production-ready code directly into Figma. This allows developers to easily find the necessary code for each component without having to look through pages of documentation and without having to worry about inconsistencies. At the moment, Code Connect supports several frameworks and platforms, including React and SwiftUI. Code Connect can be installed through npm for Javascript and Typescript projects and through the swift package manager for SwiftUI projects. By simply clicking on a screen design, developers receive approved, maintained code samples from the design systems team. This reduces the need to rewrite components, copy code, and risk deviating from the design. Instead, Code Connect enhances efficiency and ensures that implementations of components adhere to the design system for better consistency across applications and platforms.

Currently, Code Connect’s beta version is available for Organization and Enterprise plans.

Figma Plugins

While Figma already strives to meet developers where they are, there are always cases where these new features may fail to deliver. In that case, Figma’s community plugins may be of interest. For developers, the following plugins may be useful:

Figma to code (HTML, Tailwind, Flutter, SwiftUI)

This free plugin for code generation has been available since long before Dev Mode was released, and despite Dev Mode’s features, it’s still a well-loved and well-supported plugin for design-to-code functionality.

Figma to code

Anima – Figma to Code: React, HTML, Vue, CSS, Tailwind

Similarly to the first plugin, this is another popular code generation plugin for a wide selection of languages and platforms that has been around pre-Dev Mode. It is continuously being updated and comes with many handy features to streamline the development process for these frameworks.

Anima

Builder.io – AI-Powered Figma to Code (React, Vue, Tailwind, & more)

This plugin uses AI to power its code generation and supports a large collection of frameworks. The generated code is responsive and requires no previous setup with auto layout like other tools (even Dev Mode) would need for the same result.

Builder.io

Figma Developers Platform

Anyone can create their own plugins for Figma, which can range from simple one-task features to full applications and integrations with other platforms. Figma’s Plugin API supports read and write access to Figma’s editors, which allows developers to view, create, and modify the contents of files in every possible way. Therefore, even if you cannot find the perfect plugin for your needs, you can always write your own. The Figma Developers platform provides all the necessary documentation for the API and its possibilities.

Conclusion

Figma is more accessible and approachable than ever for developers and continues to revolutionize designer-developer collaboration. As Figma grows into its role as the new industry standard for UX/UI design, it is all the more important for developers to get familiar with Figma and use all it has to offer to their advantage. Figma’s tools for developers take many of the pains out of implementing designs and turn it into a joyful and efficient process instead. One thing is certain: we will continue to see more features that bring design and code closer together than ever before.

References

Banús, O. (2023, January 12). Using Figma’s auto layout. LogRocket Blog. https://blog.logrocket.com/ux-design/using-figma-auto-layout/

Dev Mode: Design-to-Development. (n.d.). Figma. Retrieved June 6, 2024, from https://www.figma.com/dev-mode/

Figma Developers. (n.d.). Figma. Retrieved June 6, 2024, from https://www.figma.com/developers

Figma for VS Code. (n.d.). Figma Learn – Help Center. Retrieved June 6, 2024, from https://help.figma.com/hc/en-us/articles/15023121296151-Figma-for-VS-Code

@figma/code-connect. (2024, May 15). Npm. https://www.npmjs.com/package/@figma/code-connect

Guide to Dev Mode. (n.d.). Figma Learn – Help Center. Retrieved June 6, 2024, from https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode

Introduction | Plugin API. (n.d.). Retrieved June 6, 2024, from https://www.figma.com/plugin-docs/

Rasmussen, K. (2023, June 21). Introducing Figma’s New Dev Mode | Figma Blog. Figma. https://www.figma.com/blog/introducing-dev-mode/

Sjölander, E. (2024, April 16). The Right Code for Your Design System | Figma Blog. Figma. https://www.figma.com/blog/introducing-code-connect/

The post Figma Tools for Developers in 2024 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.

Rolling out a mobile application on the international market will inevitably bring up the question of localization. At first, the solution may seem simple, maybe even obvious. Offering local language translations must be enough, right? It may even seem tempting (not to mention cost-efficient) to use machine translation—AI is getting so reliable these days, after all.

However, this approach is likely to fail, especially in global markets that do not subscribe to Western cultures and philosophies. These values are ingrained into user experience design more deeply than it may seem at first glance. Something as seemingly universal as a burger menu icon may be misunderstood in markets that follow different UX conventions; white space, which is an essential staple of good design in the West, may be seen as a waste of space in the East. This divergence between Eastern and Western UX design offers valuable insights to be explored. Large companies such as Amazon, Mozilla, and Airbnb have all realized the divide in UI/UX design practices and employ specialized localization teams all over the world. Their job is not simply to translate language but the user experience as a whole.

Western UX

Western UX design is ruled by principles of simplicity and minimalism. The emphasis lies on including only the most essential elements and information to provide a sleek and seamless user experience. Cognitive overload is to be avoided at all costs. Search functionalities and recommendation systems cater to the user with tailored precision. The white space that makes this reduction to the cognitive load possible not only serves an aesthetic, but also a practical function—and it does not exist in the interface alone. Western UX designers also practice a sort of functional white space: applications are typically designed for singular purposes. They do one thing really well. This allows users to mix and match the applications on their devices according to the functionalities they would like to use on a highly individual basis.

Eastern UX

With the key features of Western UX in mind, the world of Eastern UX seems like a complete contradiction. Design patterns that are shunned in the West are considered best practice instead. In order to dive deeper into these differences, I will focus on UX Design that is common in China. However, it is important to note that for the sake of comparison, some generalization may occur. There are as many design trends in China as there are in Europe, for instance, and designs that are tailored to the preferences of Chinese users may have significant differences to those aimed at Japanese, Korean, or Vietnamese users.

Use of Space

One of the most striking differences in Chinese UX is the use of white space—or rather, the lack of it. Instead of perceiving information overload as a drawback, Chinese users view a crowded interface as an efficient use of space. This is in part due to the difference in cultural philosophy. To Chinese users, it is important to get high amounts of contextual information before they make decisions, while ambiguity and potential risk are factors that can decrease the user experience.

Differences in Language

Why such a high concentration of information is possible is because of the way the written language works. Chinese characters convey a lot of information while using very limited space in comparison to Western scripts such as the Latin alphabet, which chains representations of phonetic sounds to form words, which then form sentences. Chinese script, in contrast, makes it possible to express entire concepts in a single character. In addition, there are no spaces between words, not to mention the fact that Chinese script can be written both left to right as well as top to bottom. All these characteristics make Chinese an incredibly flexible language, and it makes reading much more efficient as well. Chinese speakers are able to parse heaps of information at just a glance.

Chinese script has even more differences to most Western scripts. For one, Chinese fonts do not have bold or italic variations, which is why Chinese UX designers instead resort to using color, saturation, and contrast to emphasize text. This leads to interfaces that can quickly seem colorful and loud to eyes that are used to Western UI. This colorful UI landscape is not a negative thing by any means—bright, contrasting colors such as red, yellow, and blue have positive connotations in Chinese culture and can be found in Chinese design everywhere. Furthermore, digital fonts are more limited for Chinese than they are for Latin scripts, as each font needs to encompass thousands of characters. Designing a new font can easily take many years and many designers. Therefore, many Chinese UIs may seem quite similar, as they tend to use the same few font faces that are available to a wide range of devices.

Navigation Patterns

Another significant difference lies in navigation patterns. While Western navigation is based on search, recommendation, and limited CTAs per page, Chinese UX leans towards a much heavier use of links. This is, again, because of the Chinese writing system. Although the nature of Chinese characters makes reading them easy and efficient, it makes writing them less so. This is especially true on digital devices, where keyboards only have a limited number of keys. The focus of user behavior when navigating an application or website therefore lies on browsing rather than searching to find the desired content. Pages often have extensive menus and multiple CTAs to help users find what they are looking for without the need for textual input.

Super Apps

This wealth of information and content also comes in at the functional level of application design. Most Chinese internet users access the internet on their mobile phones, which makes QR codes extremely popular and a daily occurrence for users. And while Western users were primarily introduced to the internet via the desktop computer, the Chinese market has a strong mobile-first approach. Western applications tend to focus on singular key features; the Eastern app market has seen the emergence of so-called super apps. Apps such as WeChat, developed by Tencent, combine a multitude of services and platforms through a web of integrated partnerships, making it possible to do all online activities in one place. Super apps can cover everything from social media, e-commerce, and entertainment to banking and transportation. To illustrate how prevalent these apps are: in 2016, Chinese mobile users already spent over a third of their phone time on WeChat alone. Super apps also allow developers to create extension apps: these are apps that are specifically built for and then integrated and used within the super app. In WeChat, these are called mini programs. They do not need to be installed, as they already come with the whole package.

Recognizing the Importance of Cross-Cultural UX

Beyond recognizing the differences in design practices, we can look at Chinese UX design as an opportunity to learn and enrich our own work. With the continual advance of globalization, it seems prudent to take a look at how other cultures approach the design of mobile applications. In addition, the global market power of countries such as China, Japan, and India continues to grow. This makes having an understanding of how cultural perspectives influence UX imperative for successful localization. It is, in some way, a matter of cultural accessibility to ensure that applications are localized properly and thoroughly. They should provide a seamless and positive experience that is tailored to the user’s culture, language, and the philosophies they bring with them. All these aspects affect the way design is understood on a profound level that should not be underestimated. Misunderstandings, misinterpretations, and overall negative user experiences can all be avoided if localization is done right.

Conclusion

In summary, the divergence in UX philosophies between the East and the West transcends cultural mannerisms and differences in language. Taking a deeper look presents opportunities for cross-cultural learning, market expansion, and enhanced accessibility. By acknowledging and incorporating these differences, designers and developers can create applications that resonate with users regardless of cultural background. Bridging the UX divide involves more than linguistic considerations; it demands an understanding of the many factors that shape user interactions worldwide.

References

Cheng, Y., & Nielsen, J. (2016, August 21). Nielsen Norman Group: UX Research, Training, and Consulting. Nielsen Norman Group. https://www.nngroup.com/articles/wechat-integrated-ux/

Lau, Z. (2023, July 17). Bridging the Cultural UX Divide: Why China’s Approach Matters. Digital Creative Asia. https://digitalcreative.cn/blog/how-china-ux-is-different

Liu, F. (2018, September 9). Apps Within Apps: UX Lessons from WeChat Mini Programs. Nielsen Norman Group. https://www.nngroup.com/articles/wechat-mini-programs/

Ng, M. (2022, March 5). A few UI differences between Chinese and English apps. Medium. https://uxdesign.cc/a-few-ui-differences-between-chinese-and-english-apps-e72400bb08da

Persson, I. (2024, January 4). Less is not more: Designing for people and for the planet. Medium. https://uxdesign.cc/less-is-not-more-designing-for-people-and-for-the-planet-998f0fbc9ff0

Shen, J. (n.d.). Cross-cultural Design and the Role of UX | Toptal®. Toptal Design Blog. Retrieved January 13, 2024, from https://www.toptal.com/designers/web/cross-cultural-design

Wallet, B. (2023, December 21). The deeper meaning behind Japan’s unique UX design culture. https://newsletter.uxdesign.cc/p/the-deeper-meaning-behind-japans?publication_id=240203&utm_medium=email&utm_campaign=email-share&triggerShare=true&r=1pbvyn

Zhong, Y. (2021, October 7). Key differences between designing for China and the West. Medium. https://uxdesign.cc/key-differences-between-designing-for-china-and-the-west-dad2c5132521

Zhong, Y. (2018, September 18). Content or white space? Chinese vs. Western design aesthetics. Medium. https://uxdesign.cc/content-or-white-space-chinese-vs-western-design-aesthetics-2eef79e12844

Cover Image by starline on Freepik.

The post Cross-Cultural UX: The Differences in Eastern and Western Design Perspectives appeared first on Mobile USTP MKL.

1. Introduction

Overuse of digital media, and social media applications in particular, has been a topic of some concern for the past several years [1], [2]. More recently, efforts to reduce screen time have become more sought after [3]. These digital wellbeing measures, as they are often called, have even started to become integrated in mobile operating systems [4], [5]. However, the extent to which these applications can actually give users more control over their social media consumption is still under discussion [3]. With that in mind, this paper aims to give an overview of innovative design approaches for digital intervention targeting excessive social media use.

1.1 Between Habit and Compulsion

Compulsive phone use has been studied extensively [3], [6]. The phenomenon is typically associated with feelings of frustration and lack of control on the users’ side [6], [7]. Tran et al. [7] call this the “30-minute ick factor”, which describes the sensation of becoming abruptly aware of the extended amount of time one has been spending on their phone without meaning to, which is typically accompanied by a feelings of disgust, regret [7] and disorientation [6]. This kind of unintentional and prolonged use has been compared to disassociation [6]. While research has also shown that occasional meaningless phone use can have positive effects on one’s mood by providing a space to “escape” to [8], this exact effect, once it becomes habitual and unintentional, can lead to struggles with self-control, procrastination, and overall feelings of guilt [6]. In their study of the correlation between social media app design and users entering a state of normative disassociation, Baughan et al. [6] have found a direct link that suggests design can both facilitate or interrupt disassociation during social media use.

2. The Fight for User Attention

Today, social media companies try to keep users on their apps for as long as possible by employing different methods to capture and retain user attention. Unfortunately, some of these methods can be categorized as what is known in user experience design as “dark patterns” [9]. Dark patterns are functionalities and design patterns that trick the user into doing something that they would not do willfully or if they were fully informed [10]. Importantly, there is a difference between dark patterns in the traditionally understood sense and dark patterns that aim to exploit user attention [9]. These so-called attention-capture dark patterns do not directly influence user interaction—in fact, many claim to improve usability by decreasing the cognitive and/or physical effort that it takes to remain on an app for longer periods of time. The difference, therefore, lies in the intention. If the primary goal behind implementing such an improvement is to keep users on the platform for as long as possible—and in doing so the user’s control over their experience is undermined [8]—the feature may qualify as an attention-capture dark pattern [9]. Roffarello & De Russis [9] identify five such design patterns which can capture the user’s attention in malicious ways:

1. Recommendations. Recommendation systems can undoubtedly have their benefits, as they can provide the user with content that is more relevant to them. Utilized as a dark pattern, however, they can also create a content loop that essentially traps the user in a current session, seemingly with no end [8].
2. Autoplay. Video content that is played automatically without the need for user interaction can easily keep the user on a service for much longer than they intend to. While it can have its uses, for example for continued playback of music, Lukanoff et al. [8] have found that this type of functionality frequently undermines the user’s agency.
3. Pull-to-refresh. Researchers have frequently compared the functionality to refresh content at any time with just a micro-interaction to slot machines, i.e. gambling mechanisms, as it depends on the exact same psychological susceptibility [11], [12].
4. Infinite scrolling. As with the pull-to-refresh mechanism, the infinite scrolling functionality also promises unlimited unpredictable and variable rewards [9] while promoting passive and mindless use [13].
5. Social investment. Social metrics such as likes, followers, reactions, comments, and views are the building blocks of social media. Nevertheless, they are sometimes implemented in ways that reward users for increased usage of the app and/or give the impression that users may “lose” the social momentum they have gained if they do not continue interacting with the platform [12]. The latter effect is also observable in YouTube creators, for instance, who may feel compelled to continuously post content and to increase their views and subscriber count [9].

3. Digital Wellbeing Strategies

Digital wellbeing refers to measures that encourage a more mindful, balanced use of digital technologies with the objective of bettering one’s quality of life [14]. As cited in Burr et al., Floridi has also defined the term as “the impact of digital technologies on what it means to live a life that is good for a human being in an information society”  [15, p. 1]. Tech companies such as Google [4], [16] and Apple [5] have also embraced digital wellbeing and have started to integrate usage monitoring features into their operating systems and applications.

3.1 External Interventions

As digital wellbeing has risen in popularity both in research and industry circles, app stores have become populated with hundreds of applications that promise a more balanced phone use by providing usage metrics for self-monitoring purposes, imposing timers, reminders, and lock-out restrictions on apps or on the phone as a whole [14]. However, this approach of using external mechanisms relies on the user’s ability to practice the necessary self-control and discipline to make any kind of change. Moreover, these types of applications show a decrease in effectiveness in the long term [9]. In their review of common features in digital wellbeing apps and their effectiveness, Roffarello & De Russis [14] have examined which features are employed and how well they work. They conclude that the majority of features is aimed at breaking existing habits through self-monitoring behavior on the user’s part by providing the user with metrics of their phone or app usage. Unfortunately, any progress in usage reduction can revert to previous levels once the monitoring by the digital wellbeing app is paused. Interventions such as timers, reminders, and app locks also promise improvement but often do not deliver. They can be snoozed, paused, or deleted all too easily, which counteracts any positive effects they may have [14]. These types of interventions have also been found to decrease and undermine users’ sense of agency [17]. Interestingly, Roffarello & De Russis [14] have also found that users themselves do wish for solutions to help them limit their excessive phone use, and that they think these types of external monitoring mechanisms are not effective enough to do so.

3.2 Redesigns

In light of the ineffectiveness of external mechanisms, researchers have turned to alternative approaches. One such approach is to utilize internal mechanisms. Roffarello & De Russis [9] suggest redesigning offending apps in such a way that features which use dark patterns (such as YouTube Autoplay) are removed while still retaining the benefits of these features for the user. In this regard, they refer to the work of Lukoff et al. [8], who identify a spectrum of possibilities to redesign attention-capture dark patterns on YouTube in such a way that they no longer undermine the user’s agency. Autoplay, for example, could be redesigned to simply showing the next queued video and requiring the user’s active consent before playing it [8]. In their study, Roffarello & De Russis [9] found that reducing and removing social metrics (such as the number of likes and comments) from Facebook via a browser extension led to a “more active and less intense” [9, p. 4] usage of the platform. Additionally, the redesign lowered the participants’ overall daily amount of time on Facebook. In another study by Roffarello & De Russis [1], the authors redesigned Facebook and YouTube in such a way that recommendation feeds are moved from the homepage to a separate, isolated page while placing the primary tasks (such as searching for videos) front and center on the home screen. Their results illustrate a significantly lowered number of scrolls per minute as well as time spent on both platforms, and also suggested a more mindful usage [1].

3.3 Implicit Interventions

A third approach among researchers is what Terzimehić et al. [3] call implicit interventions. These are centered around minimalist design, like setting the phone’s display to grayscale, which decreased the daily screen time by almost 40 minutes on average in one study [18]. Another promising method is to prompt users on the context of what they are currently doing when they check their phone, which promotes a higher awareness of the outside world and reduces absent-minded phone usage [19].

3.4 Nudging

Okeke et al. [2] approach the problem from the angle of the nudge theory, which “refers to an intervention that steers people in a particular direction without eliminating their freedom of making the final choice” [2, p. 1]. With this theory in mind, they designed and tested a digital intervention that would make the phone vibrate periodically after the user has exceeded the daily usage limit for Facebook as an example app. Their results show a significant reduction in usage time for participants who would receive these vibration nudges. However, the vast majority participants also perceived the vibrations as irritating, and Facebook usage rose again after the intervention was removed, suggesting that the intervention failed in building a long-term habit. Another nudging approach was introduced in the aforementioned study by Roffarello & De Russis [1], comparing redesign and nudging strategies with Facebook and YouTube. Their nudging strategy was to progressively darken the background on the pages that implemented the infinite scroll pattern. This approach was proven to decrease usage time as well as scrolls per minute especially on Facebook [1].

4. Conclusion

In recent years, the growing concern about the overuse of digital media, particularly social media, has led to a boom of digital wellbeing measures. This paper provides a comprehensive overview of innovative design approaches for digital interventions that go beyond the strategies most commonly represented on app stores.

The core of the problem that these digital wellbeing tools try to solve lies in the strategies that social media companies use to capture user attention, including the use of dark patterns such as recommendations, autoplay, pull-to-refresh, infinite scroll, and social investment. The standardization of these design patterns begets the need to tackle the issues they cause and to promote a more reflective and balanced use of social media.

Four main approaches are explored: external interventions, redesigns, implicit interventions, and nudging. The limitations of external mechanisms such as timers and reminders are highlighted, which have also led researchers to explore internal redesigns that eliminate dark patterns while retaining user benefits. Implicit interventions, including grayscale displays and usage context prompts, offer minimalist solutions. Furthermore, nudging strategies show promise in reducing screen time, although challenges persist in matters of user experience and building long-term habits.

In navigating the complex landscape of digital wellbeing, this paper highlights the importance of phone use interventions. The findings contribute insights to the ongoing discourse on promoting healthier and more mindful interactions with social media platforms. Most importantly, external interventions, which are currently most common, do not address the root problem: the malicious twist on standardized design patterns employed by many platforms. Therefore, it may be better to focus on approaches that increase mindfulness and awareness, which can have better long-term effects on habit formation [1]. In that regard, researchers and user experience designers can work together to improve these intervention approaches in order to ensure a healthier phone-life balance for users.

References

[1]            A. Monge Roffarello and L. De Russis, “Nudging Users or Redesigning Interfaces? Evaluating Novel Strategies for Digital Wellbeing Through inControl,” in Proceedings of the 2023 ACM Conference on Information Technology for Social Good, in GoodIT ’23. New York, NY, USA: Association for Computing Machinery, Sep. 2023, pp. 100–109. doi: 10.1145/3582515.3609523.

[2]            F. Okeke, M. Sobolev, N. Dell, and D. Estrin, “Good vibrations: can a digital nudge reduce digital overload?,” in Proceedings of the 20th International Conference on Human-Computer Interaction with Mobile Devices and Services, in MobileHCI ’18. New York, NY, USA: Association for Computing Machinery, Sep. 2018, pp. 1–12. doi: 10.1145/3229434.3229463.

[3]            N. Terzimehić, F. Draxler, M. Ahsanpour, and A. Schmidt, “Implicit Smartphone Use Interventions to Promote Life-Technology Balance: An App-Market Survey, Design Space and the Case of Life-Relaunched,” in Proceedings of Mensch und Computer 2023, in MuC ’23. New York, NY, USA: Association for Computing Machinery, Sep. 2023, pp. 237–249. doi: 10.1145/3603555.3603578.

[4]            “Digital Wellbeing,” Android. Accessed: Nov. 18, 2023. [Online]. Available: https://www.android.com/intl/de_de/digital-wellbeing/

[5]            “iOS 12 introduces new features to reduce interruptions and manage Screen Time,” Apple Newsroom (United Kingdom). Accessed: Nov. 19, 2023. [Online]. Available: https://www.apple.com/uk/newsroom/2018/06/ios-12-introduces-new-features-to-reduce-interruptions-and-manage-screen-time/

[6]            A. Baughan et al., “‘I Don’t Even Remember What I Read’: How Design Influences Dissociation on Social Media,” in Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems, in CHI ’22. New York, NY, USA: Association for Computing Machinery, Apr. 2022, pp. 1–13. doi: 10.1145/3491102.3501899.

[7]            J. A. Tran, K. S. Yang, K. Davis, and A. Hiniker, “Modeling the Engagement-Disengagement Cycle of Compulsive Phone Use,” in Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, in CHI ’19. New York, NY, USA: Association for Computing Machinery, Mai 2019, pp. 1–14. doi: 10.1145/3290605.3300542.

[8]            K. Lukoff et al., “How the Design of YouTube Influences User Sense of Agency,” in Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, in CHI ’21. New York, NY, USA: Association for Computing Machinery, Mai 2021, pp. 1–17. doi: 10.1145/3411764.3445467.

[9]            A. Monge Roffarello and L. De Russis, “Towards Understanding the Dark Patterns That Steal Our Attention,” in Extended Abstracts of the 2022 CHI Conference on Human Factors in Computing Systems, in CHI EA ’22. New York, NY, USA: Association for Computing Machinery, Apr. 2022, pp. 1–7. doi: 10.1145/3491101.3519829.

[10]          C. M. Gray, Y. Kou, B. Battles, J. Hoggatt, and A. L. Toombs, “The Dark (Patterns) Side of UX Design,” in Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems, in CHI ’18. New York, NY, USA: Association for Computing Machinery, Apr. 2018, pp. 1–14. doi: 10.1145/3173574.3174108.

[11]          C. Burr, N. Cristianini, and J. Ladyman, “An Analysis of the Interaction Between Intelligent Software Agents and Human Users,” Minds Mach., vol. 28, no. 4, pp. 735–774, Dec. 2018, doi: 10.1007/s11023-018-9479-0.

[12]          P. Nontasil and S. J. Payne, “Emotional Utility and Recall of the Facebook News Feed,” in Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, in CHI ’19. New York, NY, USA: Association for Computing Machinery, Mai 2019, pp. 1–9. doi: 10.1145/3290605.3300252.

[13]          T. Mildner and G.-L. Savino, “Ethical User Interfaces: Exploring the Effects of Dark Patterns on Facebook,” in Extended Abstracts of the 2021 CHI Conference on Human Factors in Computing Systems, in CHI EA ’21. New York, NY, USA: Association for Computing Machinery, Mai 2021, pp. 1–7. doi: 10.1145/3411763.3451659.

[14]          A. Monge Roffarello and L. De Russis, “The Race Towards Digital Wellbeing: Issues and Opportunities,” in Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, in CHI ’19. New York, NY, USA: Association for Computing Machinery, Mai 2019, pp. 1–14. doi: 10.1145/3290605.3300616.

[15]          C. Burr, M. Taddeo, and L. Floridi, “The Ethics of Digital Well-Being: A Thematic Review,” Sci. Eng. Ethics, vol. 26, no. 4, pp. 2313–2343, Aug. 2020, doi: 10.1007/s11948-020-00175-8.

[16]          “Digital Wellbeing through technology | Google,” Google Digital Wellbeing. Accessed: Nov. 19, 2023. [Online]. Available: https://wellbeing.google/

[17]          M. R. Zhang, K. Lukoff, R. Rao, A. Baughan, and A. Hiniker, “Monitoring Screen Time or Redesigning It? Two Approaches to Supporting Intentional Social Media Use,” in Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems, in CHI ’22. New York, NY, USA: Association for Computing Machinery, Apr. 2022, pp. 1–19. doi: 10.1145/3491102.3517722.

[18]          A. J. Holte and F. R. Ferraro, “True colors: Grayscale setting reduces screen time in college students,” Soc. Sci. J., vol. 60, no. 2, pp. 274–290, Apr. 2020, doi: 10.1080/03623319.2020.1737461.

[19]          N. Terzimehić, L. Haliburton, P. Greiner, A. Schmidt, H. Hussmann, and V. Mäkelä, “MindPhone: Mindful Reflection at Unlock Can Reduce Absentminded Smartphone Use,” in Proceedings of the 2022 ACM Designing Interactive Systems Conference, in DIS ’22. New York, NY, USA: Association for Computing Machinery, Jun. 2022, pp. 1818–1830. doi: 10.1145/3532106.3533575.

The post SOTA – Design Approaches to Digital Wellbeing Interventions for Mindful Social Media Use appeared first on Mobile USTP MKL.