Ethical design is about creating products, services, or experiences that align with your personal values, the principles of your organization, and the well-being of your users. Everything you design—whether it’s a website, a marketing campaign, or a digital product—impacts real people, and that impact can have lasting consequences.

In an ideal world, designers would take full responsibility for the ethical implications of their work. But in reality, these responsibilities are often blurred or passed on to others. Social norms, cultural changes, and shifting political landscapes constantly redefine what is considered “ethical” or “acceptable.” So how can designers stay grounded and create meaningful, responsible work in such a dynamic environment? That’s where the principles of ethical design come into play.

Ethical Design Principles in UX

The Role of Ethics in UX Design

When it comes to user experience (UX) design, ethics serve as a moral compass, guiding designers and product teams to create experiences that are transparent, fair, and safe for users. Unlike laws, which are rigid and universal, ethical practices are more nuanced—they often involve complex dilemmas that require thoughtful solutions.

At its core, ethical UX design focuses on avoiding harm and prioritizing the well-being of users. It promotes transparency in how products work, protects users from exploitation, and fosters authenticity throughout the design process. For example, while business goals may push for higher conversion rates, resorting to manipulative tactics like dark patterns might achieve short-term results but erode trust and damage your brand in the long run.

How to Make Your Design More Ethical

The simplest way to create ethical designs is to incorporate ethical principles right from the start. Instead of scrambling to add accessibility features or privacy statements at the end of the process just to protect the company, begin with a clear agreement and intention from the outset.

1. Start With Mission and Values

Familiarize yourself with the mission and values of the organization you’re designing for. Use these to shape your design, ensuring they align with ethical principles. This is also an opportunity to challenge the organization or clients to uphold their promises. As a designer, you play a pivotal role in helping them fulfill their mission.

2. Question Your Assumptions

Assumptions can lead to problems—especially when there’s no direct interaction with the product’s end users. It’s easy to speculate about how people will use the product, but design based on assumptions often excludes the very people it’s meant to serve. This exclusion can lead to risks and unintended consequences for users, the company, or even society at large. By actively monitoring your assumptions, you remain aware of the limitations of your design and remind yourself to test and adapt it as needed.

3. Use the Socratic Method

The first step toward ethical design is asking the tough questions to uncover weaknesses and potential consequences of your product. This process, known as the Socratic Method, stems from the Greek philosopher Socrates and involves stress-testing concepts through probing questions.

Tools like Artefact’s Tarot Cards of Tech can help prompt thought-provoking questions such as:

• What is the lifespan of your product?
• What happens if it’s used by millions of people?
• What are the long-term effects on the economy, society, and the environment?
• Who benefits from your design? Who loses? Who is excluded?
• How could your design be misused?

This approach helps identify potential flaws and areas that need refinement, ensuring the design better serves both the users and the broader society.

Ethical User Research: Respecting Your Participants

A key part of ethical UX design is user research, which helps identify problems and shape solutions that improve users’ lives. However, user research depends on real people. These participants provide invaluable insights, and in return, they deserve to have their rights, dignity, and well-being protected.

This is the foundation of user research ethics. As defined by the Nielsen Norman Group, user research ethics involve “the careful consideration of the rights, well-being, and dignity of people involved in research activities.” In other words, it’s about creating a safe, respectful, and comfortable environment for participants.

The 5 Key Ethical Principles in UX Research

Ethical UX research is built on these five core principles:

1. Transparency and Informed Consent
   Always be upfront with participants so they fully understand what they’re agreeing to. This includes explaining the purpose of the research, what they’ll need to do, how long it will take, and how their data will be used.
   • Never mislead or trick participants into taking part.
   • If audio or video recording is planned, ask for explicit permission beforehand.
2. Privacy, Confidentiality, and Data Protection
   Most UX research involves gathering user data, such as interview recordings, survey responses, or basic details like names and email addresses. Handling this data responsibly is crucial.
   • Develop clear protocols for data storage, access, and disposal after the research is complete.
   • Protect participants’ identities, ensuring anonymity unless they’ve explicitly agreed otherwise.
   • Be mindful of how findings are shared to avoid causing distress or breaching confidentiality.
3. Do No Harm
   Consider all potential risks to participants and work to mitigate them.
   • If the research touches on sensitive topics, prepare strategies to support participants emotionally if needed.
   • Use inclusive and accessible language in surveys and interviews to ensure participants feel respected and valued.
   • Empathy is key: design the research process with participant well-being at the forefront.
4. Neutrality
   As a researcher, strive for impartiality by:
   • Avoiding leading questions that hint at a preferred answer.
   • Being conscious of how your tone, body language, and facial expressions might influence participants.
   • Recruiting a diverse sample to prevent bias and ensure the results are representative.
5. Honest and Accurate Interpretation of Results
   Ethical UX research requires objective analysis and reporting:
   • Don’t cherry-pick data to fit your assumptions or hypotheses.
   • Include both positive and negative feedback to provide a balanced perspective.
   • Present results honestly to draw fair and meaningful conclusions.

By adhering to these principles, UX researchers can ensure their work is ethical, trustworthy, and respectful to all participants.

The Risks of Unethical UX

Understanding the principles of ethical UX research and design is crucial. But why does it truly matter? Let’s explore the risks associated with unethical practices.

1. Harm to Participants

Disregarding research ethics can directly harm participants. Unethical research may involve discriminatory practices, lack of inclusivity, or actions that leave participants feeling uncomfortable, emotionally distressed, or even psychologically harmed. Such outcomes are the worst-case scenario and must be avoided at all costs.

2. Biased Results and Poor Design Decisions

Unethical research often leads to skewed or unreliable data. For instance, failing to remain neutral during user interviews—such as asking leading questions or reacting visibly to participants’ responses—can result in participants withholding their honest opinions. The consequence? You base your design decisions on inaccurate data, leading to poorly informed designs. Not only does this diminish the value of genuine user research, but it also risks creating products that are ineffective or undesirable.

3. Damage to Reputation

Unethical practices can tarnish your professional credibility and the reputation of your company. Participants who feel exploited or uncomfortable may share their negative experiences, and news of unethical practices can spread quickly through word of mouth or media coverage. When trust erodes, customers may lose faith in your brand, product, or service—leading to a potential PR crisis that could have been avoided.

Examples of Unethical UX Research

Facebook’s “Emotional Contagion” Study (2012)

Facebook manipulated the news feeds of almost 700,000 users for one week, showing some users more positive content and others more negative content. The goal was to determine whether this influenced users’ emotions, as reflected in their status updates. While the findings suggested an “emotional contagion” effect, the study sparked outrage because users were not informed or asked for consent. If participants experienced negative emotional impacts, this would violate the ethical principle of “do no harm.”

LinkedIn’s Five-Year Social Experiment (2015-2019)

LinkedIn experimented with its “People You May Know” algorithm, testing whether weak ties (loose acquaintances) or strong ties (close contacts) were more effective in helping users find jobs. Over 20 million users were unknowingly assigned to different groups, with some shown weaker ties and others stronger ties. The findings supported the “weak ties” theory, but users shown stronger ties may have missed out on job opportunities. Additionally, the study raises questions about fairness and the lack of informed consent.

Both examples highlight the fine line between innovative research and ethical violations. Manipulating user experiences without consent, especially in ways that could have a significant emotional or professional impact, is unethical—even if the intentions behind the research seem justifiable.

How to Ensure Ethical UX Research

To create a more ethical UX research culture, organizations must establish clear protocols and foster accountability. Here are some actionable steps:

1. Provide Ethics Training
   Ensure that all team members involved in user research understand what ethical UX research looks like. Workshops, online courses, and tailored training sessions can be effective tools for building awareness.
2. Create a UX Research Code of Conduct
   Develop a formal document outlining the golden rules of ethical UX research, including transparency, data protection, participant safety, and neutrality. This guide should be accessible and updated regularly.
3. Standardize Processes with Templates and Guidelines
   From consent forms to data security protocols, standardizing processes ensures ethical practices are consistently followed throughout the research lifecycle.
4. Regularly Reflect and Evaluate
   Continuously assess whether the research processes remain ethical, and seek feedback from participants and stakeholders to identify areas for improvement.

Conclusion

Ethical design and research are integral to creating meaningful, responsible UX. As designers and researchers, we have an ethical responsibility to protect users, minimize harm, and build trust. By embracing ethical principles, questioning assumptions, and fostering transparency, we can create experiences that enhance lives—rather than exploit them.

When organizations and designers combine ethical design principles with ethical research, they ensure that products, services, and experiences reflect care, respect, and inclusivity. Let’s prioritize people in all our design and research efforts and lead the way toward a more responsible future in UX.

Sources

• https://medium.com/design-bootcamp/ethics-in-ux-ui-design-a-comprehensive-guide-71a954371c9f
• https://www.uxdesigninstitute.com/blog/what-are-user-research-ethics/
• https://usabilitygeek.com/ethics-in-user-experience-design/
• https://designlab.com/blog/ethical-considerations-in-ux-design
• https://tarotcardsoftech.artefactgroup.com/?_ga=2.4812275.1755881389.1737457937-1246108544.1737457937
• https://99designs.de/blog/design-tipps/ethisches-design/
• https://www.ramotion.com/blog/ethics-in-ux-design/

The post Ethical UX Design and Research appeared first on Mobile USTP MKL.

Einleitung/Überblick

Als Gruppenprojekt für das dritte Semester der Masterklasse haben wir uns zu dritt entschieden, eine App speziell für Freund:innen zu entwickeln, um das Planen und Organisieren von gemeinsamen Aktivitäten zu erleichtern. Die Idee hinter Amity ist es, Freund:innen näher zusammenzubringen, indem sie auf einfache Weise miteinander in Kontakt bleiben und ihre Zeit besser koordinieren können.

Rollenverteilung

• Sara: Design, Frontend, Backend
• Laura: Design, Frontend, Backend
• Vanessa: Design, Frontend, Backend, Organisation

Umgesetzte Funktionalitäten

Die App Amity bietet eine Vielzahl an Funktionen, die speziell darauf ausgelegt sind, das Planen und Organisieren von Aktivitäten unter Freund:innen so einfach wie möglich zu gestalten.

Im Zentrum steht der gemeinsame Kalender, der auf einen Blick alle geplanten Events sichtbar macht und die Planung gemeinsamer Treffen erheblich vereinfacht. Zusätzlich können Events erstellt und direkt mit ausgewählten Freund:innen geteilt werden, wodurch die Organisation noch effizienter wird. Diese Funktionen stellen sicher, dass selbst im hektischen Alltag keine Verabredung in Vergessenheit gerät.

Eine weitere Kernfunktion ist die Geburtstagsübersicht, die automatisch alle bevorstehenden Geburtstage anzeigt und so sicherstellt, dass kein wichtiger Anlass übersehen wird.

Ergänzt wird dies durch die Möglichkeit regelmäßiger Check-Ins, bei denen Nutzer:innen Push-Benachrichtigungen an Freund:innen verschicken können, um sich schnell und unkompliziert bei ihnen zu melden.

Amity fördert außerdem die Verbindung zwischen Freund:innen durch das Erstellen von geteilten Vorhersage-Listen. Damit können Nutzer:innen gemeinsam Prognosen über z. B. das kommende Jahr oder die Winterzeit erstellen und nach Ablauf markieren, ob sie „zutreffend“ oder „nicht zutreffend“ waren.

Durch diese durchdachten Features bietet Amity eine moderne und benutzerfreundliche Lösung, um die Koordination und den Austausch im Freundeskreis zu verbessern und Freundschaften aktiv zu pflegen.

Technologien

Frontend

Für Amity wurde Angular als Frontend-Framework gewählt. Angular bietet eine stabile Struktur, viele nützliche Tools und eine große Community. Diese Eigenschaften machten es zu einer guten Wahl für die Entwicklung einer dynamischen und skalierbaren Webanwendung. Die Arbeit mit TypeScript, das von Angular direkt unterstützt wird, half dabei, den Code übersichtlich und gut wartbar zu halten.

Für die Gestaltung der Benutzeroberfläche wurde Angular Material und Bootstrap genutzt. Angular Material stellt eine große Auswahl an Komponenten bereit, die die Entwicklung erleichterten und ein einheitliches Design ermöglichten. Bootstrap wurde genutzt, um das Layout weiter anzupassen und spezifische Designanforderungen flexibel umzusetzen.

Zusätzlich wurde die Anwendung als Progressive Web App (PWA) umgesetzt. Dadurch kann die App auf Mobilgeräten installiert werden.

Backend

Im Backend kam Node.js zum Einsatz, und als Framework wurde NestJS genutzt. Diese Technologien wurden von uns bereits in dem Projekt “Bevry” im WS23 und SS24 verwendet, die Vorerfahrungen erleichterten die Umsetzung im Backend bei Amity deutlich.

Zusätzlich wurden folgende Packages verwendet:

• TypeORM: Für die Verwaltung der Datenbank-Entities und die Kommunikation mit der Datenbank.
• JWT: Für die Authentifizierung der Nutzer.
• bcrypt: Für die sichere Verschlüsselung von Passwörtern.

Hürden und Schwierigkeiten

Frontend

Die größte Herausforderung, die sich beim Frontend Development ergab, war das Planen der verschiedenen Komponenten. Dadurch, dass wir mit Angular arbeiteten, war der Code sehr modular aufgebaut, was wir bspw. von Vue nicht in diesem Ausmaß gewohnt waren. Es war wichtig zu überlegen welche Seiten wie unterteilt werden konnten und vor allem welche Komponenten global verfügbar sein mussten (z.B. die Snackbar und Dialoge).

Eine weitere Hürde, war der richtige Umgang mit Datentypen. Da wir sowohl im Backend, als auch im Frontend, mit TypeScript arbeiteten, mussten wir darauf achten, dass die verwendeten Klassen in beiden Teilen vorhanden waren und angepasst wurden. Besonders bei den Datumsformaten mussten wir diesbezüglich aufpassen, damit keine Information bei der Übertragung ins Backend verloren ging. Außerdem ermöglichen wir das Uploaden von Bildern, was wiederum das richtige Umwandeln der Formate mit sich brachte.

Zu guter Letzt war eine Schwierigkeit das Umwandeln unserer Web App zu einer Progressive Web App (PWA). Glücklicherweise hatte unser Teammitglied Vanessa bereits Vorerfahrung zu diesem Thema und konnte den Großteil dieser Aufgabe übernehmen. Allerdings brachte das Einrichten und Testen der dafür benötigten Funktionalitäten großen Zeitaufwand mit sich.

Backend

Im Backend war das größte Problem die vielen Abhängigkeiten zwischen Klassen und Entitäten. Das Planen der Struktur war hierbei das wichtigste und anspruchsvollste. Da wir jedoch alles vorab genau geplant und beschrieben hatten, konnte die Implementierung recht schnell durchgeführt werden. Durch verschiedene Cascade und Loading Einstellungen, kam es jedoch trotzdem zu Recursive Errors und anderen Fehlern, die wir bewältigen mussten.

Besonders zu kämpfen hatten wir auch mit dem Versenden und Anzeigen von Push-Benachrichtigungen. Da die User:innen benachrichtigt werden sollten, sobald andere User:innen ein Check-In sendeten, musste der Befehl zuerst von einem Gerät abgesendet und dann von einem anderen empfangen werden. Da die Funktionen hinter diesem Problem recht komplex und verschachtelt sind benötigten wir ein paar Anläufe damit alles funktionierte.

Eine weitere Herausforderung war, dass das Backend dem Frontend immer einen Schritt voraus sein musste. Wie bereits erwähnt brachte das Backend einiges an Planungsaufwand mit sich, weshalb wir im Frontend darauf achten mussten zuerst die Dinge umzusetzen, die für sich alleine funktionieren konnten. Im Weiteren Verlauf der Umsetzung legten wir den Fokus darauf zumindest einen Sprint im Vorhinein das Backend für eine Komponente vorzubereiten.

Personal Learnings

Vanessa Hofer

Im Rahmen der Entwicklung von Amity habe ich erstmals mit NestJS gearbeitet und konnte dabei ein grundlegendes Verständnis für das Framework und seine modularen Konzepte gewinnen. Besonders das Erstellen von Push-Benachrichtigungen war eine wertvolle Lernerfahrung, da ich dabei sowohl die serverseitige Logik als auch die Integration ins Frontend umsetzen musste.

Auch in Angular konnte ich mein Wissen erweitern, da ich zuvor nur geringe Vorkenntnisse hatte. Durch das Arbeiten mit Komponenten, Datenbindung und Routing habe ich ein besseres Verständnis für die Entwicklung von Single-Page-Applications bekommen.

Die Arbeit an Amity hat mir gezeigt, wie wichtig es ist, sich schnell in neue Technologien einzuarbeiten und diese gezielt in einem Projekt einzusetzen.

Sara Ladner

In diesem Projekt habe ich viel dazugelernt, weil wir alle sowohl am Frontend als auch am Backend gearbeitet haben. Für mich war es das erste Mal, dass ich aktiv im Backend mitgearbeitet habe. Dabei konnte ich ein besseres Verständnis dafür entwickeln, wie die Kommunikation zwischen Frontend und Backend funktioniert und welche Prozesse im Hintergrund ablaufen. Besonders spannend war es, zu sehen, wie die einzelnen Teile des Projekts zusammengefügt werden, um eine funktionierende Anwendung zu erstellen.

Weiters habe ich zum ersten Mal mit Angular gearbeitet. Anfangs war das eine Herausforderung, da ich mich erst an die Struktur und Arbeitsweise des Frameworks gewöhnen musste. Mit der Zeit habe ich mich aber gut eingearbeitet und konnte sogar selbstständig neue Funktionen umsetzen. Durch diese praktischen Erfahrungen habe ich viel über die Entwicklung moderner Webanwendungen gelernt, und ich fühle mich jetzt sicherer im Umgang mit neuen Technologien.

Laura Kainzbauer

Für mich war dieses Projekt vor allem dadurch lehrreich, dass wir alle am Front- und Backend beteiligt waren und uns gegenseitig etwas beibringen konnten. Einerseits konnte ich meinen Kolleginnen beim ersten Arbeiten mit NestJS helfen, andererseits halfen sie mir mit Schwierigkeiten im Frontend. Ich finde diese Aufteilung hat es uns ermöglicht verschiedene Funktionalitäten vom Buttonklick bis zum Abrufen aus der Datenbank komplett durchzudenken und den gesamten Prozess noch besser zu verstehen.

Besonders das Arbeiten mit Angular war für mich spannend, da ich seit dem Bachelor nicht mehr damit gearbeitet hatte und mit Amity zum ersten Mal richtig damit umgehen konnte. Am meisten konnte ich dazulernen in der Arbeit mit den verschiedenen Komponenten und Services und dem Zusammenhang zwischen ihnen. Der Kalender war meine größte persönliche Errungenschaft, da ich in meinem ersten Angular Projekt bereits an ein einem Kalender arbeitete und seitdem nie wieder etwas damit zu tun haben wollte. In diesem Projekt konnte ich mein “Trauma” jedoch gut überwinden und bin sehr froh mit dem fertigen Ergebnis.

The post Amity | Semesterprojekt WS24 appeared first on Mobile USTP MKL.

Screenshots des Küken Chatbots: Landing Page

Was ist der KÜKEN Chatbot?

Der Chatbot dient als zentrale Kommunikationsschnittstelle des Projekts und steht bereit, um Fragen zur Mülltrennung, Infos zum Projekt, Fragen zur Organisation und weiterem zu beantworten. Der Chatbot nutzt vorgefertigte Dialoge, die in Flussdiagrammen visuell entworfen und mit Natural Language Processing (NLP) trainiert und verknüpft wurden. So ist es möglich präzise Antworten zum Thema Abfallwirtschaft zu erhalten, ohne dass der Chatbot in andere Themen abschweift.

Screenshots des Küken Chatbots: Start der Konversation

Technische Umsetzung

Für die technische Umsetzung des Chatbots wurde im Backend mit Node.js gearbeitet und im Frontend mit Vue.js und Vuetify. Die Dialoge des Chatbots wurden mit Fabble.io geschrieben (Fabble.io ist seit dem nicht mehr in Betrieb) und anschließend exportiert und mit NLP trainiert.

Wie funktioniert es?

Der Chatbot wird im nächsten Testlauf des Forschungsprojektes “KüKeN” durch scannen eines QR-Code am Kübel mit dem Handy erreichbar sein. Es gibt zwei Optionen zur Interaktion mit dem Chatbot:

• “Bubbles” auswählen: Wähle vordefinierte Begriffe am unteren Bildschirmrand aus.
• Freie Texteingabe: Stelle spezifische Fragen direkt an den Chatbot.

Unser Ziel ist es, interessierten und motivierten Personen schnell und präzise die nötigen Informationen rund um das KüKeN-Projekt zur Verfügung zu stellen.

Screenshots des Küken Chatbots: Freitexteingabe

Retrospektive

Dieses Projekt war eine wertvolle Lernerfahrung für mich. Besonders faszinierend war es, mehr über die Gestaltung von Dialogen und die Funktionsweise von Chatbots zu lernen. Die Herausforderung, präzise und nutzerfreundliche Interaktionen zu entwickeln, hat mir neue Einblicke in die Verbindung von Technologie und Kommunikation gegeben.

Link zur KüKeN Projektseite

The post KÜKEN Chatbot: Der sprechende Mistkübel! 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.

Getting started with chatbot UI design can be challenging, but it is crucial for ensuring user satisfaction and retention. This article will cover the definition, role, and expectations of chatbot UIs.

What is a Chatbot User Interface?

A chatbot user interface (UI) consists of graphical and language elements that facilitate human-computer interaction. Unlike traditional interfaces such as buttons or menus, chatbots often use natural language processing (NLP) to understand and respond to user input in text or voice form.

Types of Chatbots

There are two main types of chatbots: rule-based and AI-driven. Rule-based chatbots work with predefined scripts and respond to specific keywords or commands. In contrast, AI chatbots use advanced technologies like machine learning and natural language processing to conduct complex conversations and adapt to user input over time.

Choosing Between Rule-Based and AI Chatbots

Chatbots have become an integral part of modern business processes, offering efficient customer service and automation solutions. When deciding between AI-driven and rule-based chatbots, it’s important to consider the strengths and weaknesses of each option.

Rule-Based Chatbots

Advantages:

• Cost-Effective: Budget-friendly and quick to implement.
• Ease of Implementation: Simple setup without extensive training.
• Time Savings: Automate routine tasks and inquiries.

Disadvantages:

• Lack of Personalization: Limited ability to adapt to user preferences.
• Limited Use Cases: Constrained by predefined scripts.
• Poor Fit for Complex Issues: Not suitable for larger businesses with sophisticated support needs.

AI-Driven Chatbots

Advantages:

• Intelligence and Adaptability: Understand user intent and handle complex inquiries.
• Enhanced User Experience: Provide natural, conversational interactions.
• Advanced Data Protection: Operate securely on internal servers.

Disadvantages:

• Longer Setup Time: Requires extensive training and coordination.
• User Hesitation: Some users may be reluctant to interact with AI systems.
• Resource Intensive: Initial investment in training and implementation.

The choice between AI-driven and rule-based chatbots depends on various factors, including the size of the business and the customer base. It’s important to choose the right option to improve customer service and streamline business operations.

The Benefits of an Engaging Chatbot Avatar

In the digital age, the desire to express one’s personality is stronger than ever. Online, an avatar reflects individual interests, views, and principles. With chatbot avatars, efficiency is improved, the user experience is enhanced, and branding is effectively represented.

Chatbot Avatars – What Are the Options?

Avatars come in all shapes and sizes. Traditionally, avatars are known from video games, where they represent the player’s virtual likeness. Players have complete freedom to design their avatar to resemble themselves or adopt an entirely different appearance.

In the realm of chatbots, the possibilities for creating an avatar are nearly limitless. However, there are some common types to consider, including:

• The company’s logo
• An image of a person
• A cartoon or illustration
• A geometric shape
• A video recording
• An animation
• Just text

These avatars are generally classified as:

• Human
• Non-human
• Abstract

When designing a chatbot avatar, there are numerous possibilities. Here is an overview of static avatar types for chatbots. The right type of avatar for a chatbot depends on the bot’s personality and the company’s values.

Strengthening the Chatbot’s Personality with an Avatar

A well-designed avatar enhances the chatbot’s persona, reflecting the brand’s identity in every aspect. This involves fundamental decisions like how the chatbot addresses users and crafting humorous responses. An avatar visually represents this persona, making interactions feel more personal and human, thereby increasing engagement. Users feel they have a direct contact, giving them the sense of undivided attention from the chatbot.

Immersive Storytelling Through Avatars

Storytelling is a crucial marketing tool to promote a brand or product innovatively. It allows the branding to have an engaging identity and tell an authentic, creative, and inspiring story to the target audience. A chatbot avatar helps users immerse themselves in the world created by the brand, playing various roles in the company’s narrative.

Teamwork – Reaching Goals Together with the User

The goal of most chatbots is to guide customers to a specific objective, such as answering a service question or finding a new apartment. It’s essential that users feel the chatbot is collaborating with them to reach the desired goal, not hindering or sabotaging them.

Avatars play a significant role here, taking users by the hand and staying with them until the goal is achieved. This can be particularly helpful for tasks that users regularly complete via the chatbot. The avatar becomes a familiar face, associated with the task, whose assistance is appreciated after multiple successful interactions.

At a Glance: What to Consider When Developing an Avatar

An avatar that aligns with the developed persona and the company’s branding is a valuable addition to any chatbot. It makes the dialogue with the user feel more personal, guides them effectively, and quickly becomes a trusted advisor. An avatar allows users to immerse themselves in the brand’s world and helps tell immersive stories. It perfectly embodies the brand’s identity and becomes a standout representative in the digital space.

Best Practices for Implementing a Chatbot User Interface

Implementing an effective chatbot UI requires careful planning and consideration. Here are some best practices to keep in mind:

1. Choose the right chatbot platform that meets the requirements and technical expertise.
2. Define the chatbot’s personality and tone to create a consistent brand experience.
3. Write dialogues that mimic natural conversations and evoke positive emotions in users.
4. Design a conversational flow that guides users through interactions and efficiently resolves their queries.
5. Integrate visual elements such as images and GIFs to enhance the chatbot experience and convey information effectively.
6. Educate users on bot commands and functionalities to streamline interactions and improve user satisfaction.
7. Strike a balance between proactive and reactive engagement to offer timely assistance without overwhelming users.
8. Enable seamless escalation to human support when needed by facilitating smooth transitions from bot to agent interactions.

Conclusion

Chatbots are a powerful tool to improve customer interactions and increase the efficiency of business processes. By following best practices in designing and implementing chatbot user interfaces and selecting the right chatbot solution for your needs, the full potential of this technology can be realized.

Literature

[1] 5 Examples of Fantastic Chatbot UI Link

[2] All You Need to Know to Use Chatbots in Business. Complete Guide 2024 Link

[3] Warum Ihr Chatbot unbedingt einen Avatar haben sollte Link

[4] Rule-Based vs. AI Chatbots: Key Differences Link

[5] What if you endowed your chatbot with an avatar? Link

[6] AI Chatbot vs Rule-based Chatbot: Which is the Smarter Choice for Your Business? Link

Images

Headerimage by pch.vector

[A] Difference between Rule-based and AI Chatbot Image

[B] Example of possible cartoon and non-human avatars Image by freepik

The post Designing a Chatbot: From Simple Interfaces to Engaging Avatars 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.

This paper explores the use of voice interaction on mobile devices and other Voice User Interfaces (VUIs). It addresses challenges in current VUI designs, emphasizing the need for effective communication of system capabilities. The advantages and challenges of voice interaction on mobile devices are discussed, including various voice recognition methods. Guidelines for enhancing VUIs are introduced, focusing on tailoring conversations, addressing turn-taking challenges and prioritizing personalization.

1 INTRODUCTION

Interacting with a device via our voice has become common and Voice User Interfaces (VUIs) have been seamlessly integrated into our daily lives, driven by the widespread adoption of voice assistants like Google Home and Amazon Alexa. We tell phones, cars or even household devices, what we want them to do. As a result, voice assistants are experiencing rapid commercial growth in recent years [1].

If used right, voice interaction has the possibility to enhance user experience with different devices, this is also true for mobile applications. However, due to the complexity of designing accurately understanding flexible natural language commands it is not always easy to implement [2]. In what ways can we refine the voice interaction experience on mobile devices and Voice User Interfaces, overcoming current design obstacles and ensuring seamless communication of system capabilities?

2 VOICE USER INTERFACE (=VUI)

The general term for speech recognition technology that allows people to interact with a computer, smartphone or other device through voice is called Voice User Interface. In the last five years, users’ attitudes towards VUIs have improved, with increasing recognition of their diverse applications, such as hands-free interaction and a natural communication with technology [3].

Currently, there is no established software architecture standard for voice assistants. Nonetheless, there are two fundamental operations involved in the processing of user utterances. First, the user’s spoken words are transcribed into text using automated speech recognition (ASR). This step is crucial for converting spoken language into a format that can be further analysed and understood by the system. Then, the transcribed text undergoes Natural Language Understanding (NLU), which aims to extract the user’s intent from the processed language. NLU systems analyse the text to understand the meaning, context, and specific commands or queries conveyed by the user [4].

3 VOICE INTERACTION ON MOBILE DEVICES

Voice interaction has several advantages, like expressive communication, easy learning, and hands-free usability. Employing voice commands to automate smartphone tasks enhances the interaction on mobile apps. However, creating voice interfaces for specific tasks is challenging due to the difficulty of accurately understanding flexible natural language commands. Developers often need extensive data, handwritten rules, or machine learning models, making efforts grow with the increasing number of tasks. This limitation results in only a few tasks having voice interfaces. Nevertheless, there is a strong desire, especially among non-programmers, to create voice interfaces for various tasks [2].

3.1 Voice Recognition

Nearly every mobile operating system includes access to at least one conversational user interface, typically in the form of an interactive personal agent [5]. Various acoustic signals are received by a microphone during the operation of the voice recognition system on the device, aiming to distinguish human voice from non-voice signals like background noise. Detecting voices accurately is important for the system to work well and understand emotions correctly. Among various methods to find voices, the energy-based one is chosen for mobile devices because it needs less computing power and gives reliable results. This method continuously checks the strength of sounds in fixed-length parts. If the strength of consecutive parts is louder than a certain level, it marks the beginning and end of voice signals [4].

3.2 Detection of emotions

Identified voice signals from the initial stage undergo processing to extract acoustic features that reveal emotional characteristics. Different types of acoustic features can illustrate human emotions, with certain spectral features like pitch, log-energy, and Mel-Frequency Cepstral Coefficient (MFCC) — a representation capturing the spectral content of the voice — being particularly valuable for distinguishing between emotion types. These features, extracted from each frame in the voice region, form a sequence of feature vectors [6].

4 SYSTEM FEEDBACK AND CHALLENGES

Voice User Interfaces are becoming increasingly popular in homes, yet users often underutilize available features. Researchers have identified that the learnability of VUIs poses a significant challenge for users, with the primary hurdle being errors in understanding and responding to natural language. This field involves the interaction between computers and humans using everyday language. Both new and frequent users face difficulties in comprehending and navigating through VUI features and commands, making it challenging to keep up with the introduction of new functionalities [7].

It seems that current VUI designs don’t make it easy for users to adjust to how the machines work during a conversation. The designs lack proper feedback and information about what the system can do, making it challenging for users to try new tasks. Instead, users often use shorter sentences or simpler language with repeated phrases to make sure the VUIs understand them. These interactions can be frustrating, with users struggling to accomplish their intended tasks [8].

5 GUIDELINES AND IMPROVEMENTS

5.1 Task Domains and Context

Designing conversations for voice interfaces should be tailored to the task domain, ensuring comprehensive coverage of knowledge within that domain. Handling a wide range of topics in the task domain enhances usefulness and accommodates diverse user preferences. It is crucial for the system to possess sufficient knowledge in the specified task domains to satisfy user needs effectively. Immediate communication of the reason for task failure is essential, and considering user inferences based on the task domain can contribute to a more effective interaction [9].

Furthermore, a study about the transition from GUI (Graphical User Interface) to VUI conducted by Murad et al. (2021, S. 7), found that GUI experts had concerns about the inability of a lot of VUI devices to retain memory or context of previous requests, impacting interaction continuity. Devices lack memory of prior requests, hindering the ability to build on or refer to earlier queries. The absence of an undo capability was also highlighted, causing frustration due to the lack of contextual memory [10].

5.2 Turn-Taking

Phukon et al. (2022) discuss the significance of turn-taking in spoken interactions and the challenges of automating this process in human-computer conversational systems. Turn-taking involves the exchange of speech and silence between participants, and while researchers have developed solutions like silence-based models, which focus on recognizing and managing periods of silence in speech, and continuous models, designed to transcribe speech seamlessly without explicit word segmentation, finding the right settings for these methods remains a challenge. Overall, automating turn-taking in conversational systems is an ongoing area of research with specific challenges, including avoiding awkward silences or overlapping speech [8].

5.3 Importance of personalizing

It is important to take users’ background knowledge and inferences into consideration to tailor conversations according to users’ needs and capabilities. There are various methods for achieving this, from learning and adjusting conversations based on user responses, to utilizing the task domain to establish a common ground. The need for adjustment arises from the potential lack of understanding or unpredictable remarks by users, such as questions for clarification, which the system may struggle to comprehend or answer [9].

Once a common ground is established, the guidelines recommend that voice systems should further adapt to each user. Personalization is key, involving the learning of user behaviors, language usage, and specific needs. The goal is to tailor the interaction to individual users, as highlighted by the suggestion to adapt the agent’s style based on who the user is, how they speak, and even their emotional state. Creating user profiles is presented as one effective method to achieve this level of personalization [9].

5.4 Transparency

A VUI should distinctly communicate its capabilities and limitations to effectively manage user expectations. Providing this transparency is crucial for establishing accurate mental models and expectations during interactions. Presenting the system’s abilities at the beginning and utilizing prompts helps convey the user’s potential actions [9].

5.5 Clear Feedback

Clear feedback is paramount for user understanding, encompassing processing status and error notifications. Delivery should be swift and efficient to eliminate uncertainty about the system’s comprehension and actions. Non-verbal feedback enhances user interaction. Visibility is key, ensuring the user is always aware of the system’s status, especially during various functions. Comprehensive feedback on system failure, including reasons, is essential. User notification during processing or listening phases is vital, with progress indications being specific and unambiguous. The goal is to instill confidence in users regarding the accurate processing of conveyed information [9].

Building on the principles of clear feedback highlighted in usability guidelines and referring to the study from Murad et al. (2021, S. 7), GUI experts assessed two display-less devices, shedding light on usability concerns related to audio and visual feedback. These experts observed the use of colored indicators for actions such as volume adjustments and signaling when the interface was actively listening or processing user input. However, they encountered challenges with both visual and audio feedback, underscoring the imperative for enhanced clarity in the design. Some test participants expressed a preference for a design that minimizes the need for active observation of visual indicators, aligning with the goal of providing swift, efficient, and unambiguous feedback for optimal user confidence, as emphasized in established usability principles [10].

5.6 Make it “real”

Designing conversational interaction in VUIs that align with real-world conversational norms and dialogue patterns makes a VUI seem “realer”. Utilizing well-known conversational norms and allowing users to employ natural speech are essential. Key points include:

1. Speech: The importance of appropriate prosody, clear pronunciation, and user control over speech aspects, such as speed and tone. Non-verbal forms of auditory feedback are also recommended.
2. Realism: Matching interaction to real-world conversation models, user language structure, and incorporating familiar terms. However, realism should be balanced, considering the system’s use case.
3. Conversation: Following natural turn-taking, brief responses, and using conversation to guide interaction. Repairing breakdowns collaboratively and incorporating questions for guidance and common ground.
4. Dialogue: Designing dialogue trees, allowing for response variations, rephrasing prompts for better understanding, accepting a variety of user responses, and handling interruptions appropriately. The system should not interrupt users during input.

The overall goal is to create a VUI interaction that is natural, user-friendly, and aligned with users’ expectations of conversation [9].

CONCLUSION

Several challenges with current VUI designs were identified, including difficulties in user adjustment during conversations, lack of proper feedback, and limited information about system capabilities. Users tend to simplify their language to ensure understanding, leading to frustration. This paper emphasizes the need for effective communication of the system’s intelligence and capabilities to users. The advantages and challenges of voice interaction on mobile devices are discussed, highlighting the benefits of expressive communication and hands-free usability.

Guidelines for improving VUIs are presented, focusing on tailoring conversations to the task domain, addressing turn-taking challenges, and emphasizing the importance of personalization. Transparency in communicating system capabilities and limitations is underscored, along with the significance of clear and informative feedback to enhance user understanding. In conclusion, there is an ongoing need to persistently enhance VUIs by tackling current challenges and applying guidelines that emphasize user experience, transparency, and efficient communication.

REFERENCES

[1] Luger, E., Sellen, A. (2016). “Like Having a Really bad PA”: The Gulf between User Expectation and Experience of Conversational Agents (p. 1).  ACM Digital Library: https://dl.acm.org/doi/10.1145/2858036.2858288

[2] Pan, L., Yu, C., Li, J., Huang, T., Bi, X., & Shi, Y. (2022, May 6). Automatically Generating and Improving Voice Command Interface from Operation Sequences on Smartphones (p. 1-2).  ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3491102.3517459

[3] Murad, C., Tasnim, H., & Munteanu, C. (2022, July 26-28). “Voice-First Interfaces in a GUI-First Design World”: Barriers and Opportunities to Supporting VUI Designers On-the-Job (p. 2).  ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3543829.3543842

[4] Tarakji, A. B., Xu, J., Colmenares, J. A., & Mohomed, I. (2018, June 10-15). Voice enabling mobile applications with UIVoice (p. 1-2).ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3213344.3213353

[5] Jaber, R., & McMillan, D. (2020, July 22-24). Conversational User Interfaces on Mobile Devices: Survey (p. 1). ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3405755.3406130

[6] Park, J.-S., & Jang, G.-J. (2015, October 21). Implementation of Voice Emotion Recognition for Interaction with Mobile Agent (p. 1). ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/2814940.2815004

[7] Myers, C. M., Pardo, L. F., Acosta-Ruiz, A., Canossa, A., & Zhu, J. (2021, July 21). “Try, Try, Try Again:” Sequence Analysis of User Interaction Data with a Voice User Interface (p. 1).  ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3469595.3469613

[8] Phukon, M., Shrivastava, A., & Balentine, B. (2022, November 9-11). Can VUI Turn-Taking Entrain User Behaviours? (p. 1). ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3570211.3570215

[9] Murad, C., Candello, H., & Munteanu, C. (2023, July 19-21). What’s The Talk on VUI Guidelines? A Meta-Analysis of Guidelines for Voice User Interface Design (p. 1-11).  ACM Digital Library: https://dl-acm-org.ezproxy.fhstp.ac.at:2443/doi/10.1145/3571884.3597129

[10] Murad, C., Munteanu, C., Cowan, B.R., Clark, L. (2021, July 27-29). “Finding a New Voice: Transitioning Designers from GUI to VUI Design (p. 7).  ACM Digital Library: https://dl.acm.org/doi/10.1145/3469595.3469617

The post SOTA – Voice Interaction On Mobile Devices And Ways To Ensure Better User Experience. appeared first on Mobile USTP MKL.