Was sind Microinteractions?

Microinteractions sind kleine, intuitive Reaktionen einer Anwendung auf Nutzeraktionen. Sie informieren den Anwender in Echtzeit darüber, was gerade passiert, und tragen dazu bei, dass er sich immer gut abgeholt fühlt. Zu den klassischen Beispielen gehören:

• Animierte Buttons: Die visuelle Rückmeldung beim Hover oder Klick, die dem Nutzer signalisiert, dass eine Aktion registriert wurde.

• Slider: Dynamische Übergänge und Anpassungen, die eine flüssige Bedienung ermöglichen.

• Feedback-Animationen: Kurze visuelle Effekte, die beispielsweise den erfolgreichen Abschluss einer Aktion bestätigen.

• Haptische und auditive Signale: Vibrationseffekte oder dezente Soundeffekte, die das Feedback multisensorisch verstärken.

Warum sind Microinteractions wichtig?

Studien, etwa von der Nielsen Norman Group, haben gezeigt, dass durchdachte Microinteractions das emotionale Erleben und die Zufriedenheit der Nutzer maßgeblich beeinflussen können. Die Bedeutung von Microinteractions lässt sich an mehreren Punkten festmachen:

• Verbesserung der Usability: Durch kontinuierliche, intuitive Rückmeldungen fühlt sich der Nutzer sicher und gut betreut.

• Erhöhung des User-Engagements: Kleine Animationen und Effekte machen die Interaktion lebendiger und motivieren den Anwender, sich intensiver mit der Anwendung auseinanderzusetzen.

• Stärkung des Nutzervertrauens: Wenn Nutzer sofort visuelles, haptisches oder auditives Feedback erhalten, steigt das Vertrauen in die Funktionsweise der Anwendung – ein entscheidender Faktor für den Erfolg moderner Softwarelösungen.

Umsetzungsmöglichkeiten

Für die Implementierung von Microinteractions stehen zahlreiche Techniken und Bibliotheken zur Verfügung:

1. CSS-Animationen

CSS bietet mit transition und @keyframes eine niedrigschwellige Möglichkeit für viele Standard-Effekte. Diese Technik ist leichtgewichtig und läuft in allen modernen Browsern sehr performant. Beispielsweise kann ein Button durch leichte Veränderungen beim Hover sofort ins Auge fallen:

.button {
  transition: transform 0.2s ease, background-color 0.3s;
}
.button:hover {
  transform: scale(1.05);
  background-color: #007bff;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.button.active {
  animation: pulse 1s infinite;
}

Diese Methode ist besonders effektiv für schnelle Prototypen und statische Webseiten.

2. Framer Motion (React) https://motion.dev

Für React-basierte Projekte bietet Framer Motion eine deklarative API, die das Erstellen flüssiger und komplexer Animationen ermöglicht. Mit wenigen Codezeilen lassen sich reaktive und interaktive Elemente gestalten.

Im folgenden Beispiel wird ein React-Button animiert, der beim Hover und Tap skaliert:

import { motion } from "framer-motion";

function AnimatedButton() {
  return (
    <motion.button
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      Klick mich
    </motion.button>
  );
}

Mit Framer Motion kannst du Variants definieren, um verschiedene Zustände zu modellieren, und Transitionskonfigurieren, um Dauer, Verzögerung und Typ (Spring vs. Tween) zu steuern. Dank Tree-shaking bleiben deine Bundles klein. Außerdem funktioniert Framer Motion sowohl client- als auch serverseitig (SSR) und verfügt über eine aktive Community und zahlreiche Beispiele.

3. GSAP (GreenSock Animation Platform) https://gsap.com

GSAP ist eine leistungsstarke JavaScript-Animation-Bibliothek, die besonders für komplexe und präzise gesteuerte Animationen geeignet ist. Sie unterstützt TimeLines, Plugins wie ScrollTrigger für Scroll-basierte Animationen und kann mit DOM-, Canvas- oder SVG-Elementen arbeiten.

Folgendes Beispiel demonstriert eine Hover-Animation auf einem Element mit der Klasse .box:

import { gsap } from 'gsap';

document.querySelector('.box').addEventListener('mouseenter', () => {
  gsap.to('.box', { duration: 0.3, scale: 1.1, ease: 'power2.out' });
});
document.querySelector('.box').addEventListener('mouseleave', () => {
  gsap.to('.box', { duration: 0.3, scale: 1, ease: 'power2.in' });
});

Erklärung:

1. document.querySelector('.box') wählt das Element mit der Klasse box aus.
2. Bei mouseenter wird gsap.to(...) ausgeführt und skaliert das Element mit einer weichen Beschleunigung.
3. Bei mouseleave wird es wieder auf scale: 1 zurückgesetzt.

Brauche ich GSAP dafür?

Für diesen einfachen Effekt genügt auch eine CSS-Lösung ohne zusätzliche Bibliothek:

.box {
  transition: transform 0.3s ease-in-out;
}
.box:hover {
  transform: scale(1.1);
}

Mit CSS erhältst du oft ausreichend Performance und musst keine externe Abhängigkeit einbinden. GSAP ist besonders dann sinnvoll, wenn du detaillierte Kontrolle über Sequenzen brauchst oder Animationen orchestrieren willst, die auf Scroll-, Audio- oder anderen externen Events basieren. Die Performance bleibt dabei dank optimierter Rendering-Loops hoch, auch bei vielen gleichzeitig laufenden Animationen.

4. Haptisches Feedback 

Haptisches Feedback schafft ein taktiles Erlebnis und verstärkt die Wahrnehmung von Interaktionen. Auf mobilen Geräten kann die Vibration API genutzt werden, um kurze Vibrationseffekte zu erzeugen.

So fügst du bei einem Button-Klick auf unterstützten Geräten eine Vibration hinzu:

Browser (Web Vibration API):

if ('vibrate' in navigator) {
  navigator.vibrate(200); // Vibrationsdauer in Millisekunden
}

Native Android (Kotlin):

val vibrator = getSystemService(Context.VIBRATOR_SERVICE) as Vibrator
vibrator.vibrate(VibrationEffect.createOneShot(200, VibrationEffect.DEFAULT_AMPLITUDE))

Native iOS (Swift):

let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()

Zu beachten wäre dabei, dass haptisches Feedback in den Systemeinstellungen deaktiviert sein kann. Daher sollte vor dem Auslösen solcher Effekte geprüft werden, ob sie gewünscht sind. Haptische Effekte sollten sparsam und nur bei zentralen Interaktionen eingesetzt werden.

4. Auditive Rückmeldungen

Dezente Soundeffekte, beispielsweise bei Bestätigungen, können über HTML5-Audio-Elemente oder spezialisierte JavaScript-Plugins eingebunden werden.

<audio id="clickSound" src="click.mp3"></audio>
<button onclick="document.getElementById('clickSound').play()">Click me</button>

Für komplexere Szenarien bietet die Web Audio API oder Bibliotheken wie Howler.js  fortgeschrittene Features:

• Audio-Sprites: Laden mehrerer kurzer Sounds in eine Datei, um Ladezeiten zu reduzieren.
• Dynamische Steuerung: Lautstärke, Panning und Effekte in Echtzeit anpassen.

Auch hier wäre zu beachten, dass Nutzer nicht mit dauerhaftem Audiofeedback überflutet werden. Empfehlenswert ist es, in den Einstellungen eine Option zur Deaktivierung oder Abschwächung von Tönen bereitzustellen.

Fazit

Microinteractions sind ein mächtiges Mittel, um Nutzererlebnisse zu verfeinern und den Eindruck einer reaktionsschnellen, konsistenten Anwendung zu vermitteln. Durch den Einsatz von visuellen, haptischen und auditiven Feedback-Mechanismen wird die Interaktion intuitiver und ansprechender. Ganz gleich, ob man einfache CSS-Animationen, spezialisierte Bibliotheken wie Framer Motion oder GSAP oder plattformspezifische APIs nutzt — gut gestaltete Microinteractions können mit relativ geringem Entwicklungsaufwand eine große Wirkung erzielen und die User Experience signifikant verbessern.

The post Blog | Microinteractions: Kleine Details mit großer Wirkung appeared first on Mobile USTP MKL.

Was sind Lottie-Animationen?

Die Technologie hinter Lottie basiert auf einem JSON-Format, das komplexe Animationen in hoher Qualität darstellt. Das Besondere daran ist, dass Designer diese Animationen direkt aus Adobe After Effects mit dem Bodymovin Plugin exportieren können. Auf diese Weise entstehen detailreiche und skalierbare Animationen, ohne dass man sich in aufwendigen Code oder pixelbasierte Formate einarbeiten muss.

Warum Lottie – und was ist mit Alternativen?

Es gibt durchaus verschiedene Wege, wenn es um die Implementierung von Animationen geht, wie zum Beispiel CSS- oder SVG-Animationen sowie andere JavaScript-Bibliotheken. Doch meine bewusste Entscheidung für Lottie beruht auf folgenden Faktoren:

• Einfache Nutzung: Die Integration dieser Animationen ist unkompliziert und erfordert nur wenige Zeilen Code.
• Responsive und performant: Die erzeugten Animationen passen sich nahtlos an unterschiedliche Bildschirmgrößen an und bieten eine hohe Performance, was besonders in modernen Web- und Mobile-Anwendungen essenziell ist.
• Große Community und zahlreiche Ressourcen: Der breite Support und die umfangreiche Dokumentation erleichtern den Einstieg und die Weiterentwicklung von Projekten.
• Plattformübergreifende Einsatzmöglichkeiten: Diese Animationstechnologie kann in verschiedensten Technologien und Frameworks verwendet werden, was sie vielseitig und zukunftssicher macht.

Einsatzmöglichkeiten und unterstützte Technologien

Die vielseitigen Animationen lassen sich in zahlreichen unterschiedlichen Umgebungen einsetzen:

• Webseiten: Mit dieser Technologie lässt sich eine ansprechende Animation in HTML/JavaScript-basierte Projekte einbinden. Bibliotheken wie lottie-web ermöglichen die Nutzung direkt im Browser.
• Mobile Apps: Sowohl für iOS als auch für Android gibt es offizielle Lottie-SDKs, die eine native Integration erlauben.
• Frameworks: In modernen Frameworks wie React, Angular oder Vue gibt es spezielle Komponenten (z. B. react-lottie), die das Einbinden der Animationen vereinfachen.
• Hybrid Apps: Auch in Ionic-Projekten können diese JSON-basierten Animationen problemlos integriert werden, wodurch hybride Apps visuell ansprechender werden.

Kosten und potenzielle Nachteile

Ein großer Vorteil der Lottie-Technologie ist, dass sie als Open-Source-Lösung keine zusätzlichen Lizenzkosten verursacht. Dennoch gibt es ein paar Aspekte, die bedacht werden sollten. Professionelle Lottie-Animationen entstehen traditionell in Adobe After Effects – einer kostenpflichtigen, aber leistungsstarken Software für komplexe visuelle Effekte. Das Bodymovin-Plugin ermöglicht dabei den Export ins JSON-Format.

Glücklicherweise bieten sich mittlerweile auch benutzerfreundlichere Alternativen an: Sowohl Figma als auch Canva unterstützen durch spezielle Erweiterungen den Export in dasselbe Format. Diese Werkzeuge haben eine deutlich flachere Lernkurve und eignen sich besonders für Einsteiger ohne tiefgehende Animationskenntnisse.

Möchte man allerdings besonders detaillierte und präzise Animationen erschaffen, bleibt After Effects trotz längerer Einarbeitungszeit die erste Wahl. Bei allen Werkzeugen gilt: Eine sorgfältige Optimierung ist wichtig, damit auch komplexere Animationen flüssig und ohne Performanceprobleme laufen können.

Praktische Implementierung

So könnte der praktische Ablauf bei der Integration dieser Animation aussehen:

1. Erstellung der Animation:
   • Estellung : Entwickle die gewünschte Animation in Adobe After Effects, Figma oder sogar Canva! Nutze dabei das Bodymovin Plugin, um die Animation als JSON-Datei zu exportieren.
   • Lizenzfreie Vorlagen: Alternativ könnt ihr lizenzfreie Animationen von Websites wie LottieFiles herunterladen und bei Bedarf anpassen.
     
     
2. Einbindung in das Projekt: Lade die JSON-Datei in dein Projekt und integriere sie mit einer geeigneten Lottie-Bibliothek.
   • Für React: Installiere beispielsweise das Paket react-lottie und binde die Animation als Komponente ein.
   • Für Ionic oder andere Frameworks: Nutze die entsprechenden Lottie-SDKs oder Plugins, die speziell für diese Plattformen entwickelt wurden.
     
     
3. Anpassung und Optimierung: Passe die Animationseinstellungen (wie Loop, Autoplay, etc.) an und teste die Performance auf verschiedenen Geräten und Bildschirmgrößen.
   
   
4. Einbindung in das UX-Design: Integriere die Animation an den passenden Stellen in deiner Anwendung, z. B. als animierte Buttons, Ladeanimationen oder Erfolgsmeldungen, um das Nutzererlebnis zu verbessern.

Wertvolle Links und Ressourcen

• LottieFiles

Eine umfangreiche Plattform, auf der ihr sowohl lizenzfreie als auch Premium-Lottie Animationen finden könnt. Hier könnt ihr Animationen herunterladen, anpassen und direkt in eure Projekte einbinden.

• lottie-web GitHub Repository

Das offizielle Repository für die Lottie-Bibliothek im Web. Es bietet ausführliche Dokumentation und den Quellcode, sodass ihr tief in die technische Implementierung eintauchen könnt.

• Bodymovin Plugin

Das Plugin, mit dem ihr Animationen in Adobe After Effects erstellt und als Lottie-kompatible JSON-Dateien exportiert. Essentiell für den Export von Animationen, wobei neuere Alternativen wie Figma und Canva ebenfalls unterstützen.

Fazit

Für mein Semesterprojekt habe ich mich für Lottie Animationen entschieden, da sie das Nutzererlebnis spürbar verbessern und mein Projekt sowohl visuell als auch funktional bereichern können. Ein weiterer Vorteil ist die Verfügbarkeit vieler lizenzfreier Animationen, die sich leicht anpassen lassen – so kann man auch ohne umfangreiche Designkenntnisse ansprechende visuelle Elemente einbauen.

The post Blog | Lottie: Lebendige Animationen einfach implementieren appeared first on Mobile USTP MKL.

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.

Das Hauptziel des Forschungsprojekts “Smart Communities – IoT4LAC” besteht darin, den Datenaustausch zwischen verschiedenen regionalen LPWAN-Serviceanbietern zu ermöglichen und den Nutzer*innen durch aussagekräftige visuelle Darstellungs- und Interaktionsmethoden einen tieferen Einblick in die komplexen Daten von Sensornetzwerken zu bieten. Es wird ein System-of-Systems-Konzept entwickelt, das verschiedene Anbieter und Anwendungsfälle integriert und als Grundlage für die Realisierung von Smart Services für Gemeinden, Verbände und das Land dient.

Zielsetzung

Im Rahmen meiner Mitarbeit im Projekt bestand die Aufgabe darin, eine Visualisierung als Grafana-Plugin zu entwickeln. Dieses Plugin sollte es ermöglichen, zwei Attribute in Kombination miteinander über einen definierten Zeitraum darzustellen, sodass die Nutzer*innen einen Überblick über historische Daten erhalten. Darüber hinaus sollten Usability-Tests durchgeführt und umfassend evaluiert werden, um die Benutzerfreundlichkeit des gesamten Dashboards, das im Forschungsprojekt erstelltet wurde, zu bewerten.

Vorgehensweise

Zunächst wurde das Plugin unter Verwendung von Javascript und D3.js umgesetzt und in das Dashboard integriert. D3.js wurde dabei genutzt, um interaktive und dynamische Visualisierungen zu erstellen. Anschließend mussten verschiedene Interaktionsmöglichkeiten implementiert und mit den bestehenden Plugins verknüpft werden. Nach der technischen Umsetzung wurde ein Testdesign entwickelt und potenzielle Testpersonen kontaktiert. Für die Usability-Tests wurde ein Fragebogen mit sechs spezifischen Aufgaben sowie einem Visualisierungs-Literacy-Test erstellt. Die Testpersonen haben diesen im Rahmen der Evaluierung ausgefüllt. Schließlich wurden die Ergebnisse der Tests analysiert und ausgewertet.

Ergebnisse

Im Rahmen meiner Mitarbeit lieferte ich eine detaillierte Beschreibung des entwickelten Plugins und seiner Interaktionen sowie eine umfassende Auswertung der Usability-Tests. Diese beinhaltete eine Beschreibung der Methodik, die Durchführung der Tests sowie die wichtigsten Erkenntnisse aus panel-spezifischem und panel-übergreifendem Feedback. Der berechnete SUS-Score von 60,625 liegt dabei unter dem Durchschnitt, was auf Verbesserungspotenzial hinsichtlich der Usability hinweist.

Retrospektive

Durch meine Mitarbeit im Forschungsprojekt “Smart Communities” konnte ich meine Fähigkeiten in den Bereichen Programmierung und Evaluierung weiterentwickeln. Besonders wertvoll war die Möglichkeit, eine Kombination aus technischen und benutzerzentrierten Aufgaben zu bearbeiten. Die Umsetzung des Plugins sowie meine Beteiligung an der Entwicklung anderer Plugins ermöglichten mir, umfassende Usability-Tests durchzuführen und die Ergebnisse mit meiner vorherigen Arbeit zu verknüpfen. Dies gab mir wichtige Einblicke in die Benutzerfreundlichkeit und die Verbesserungspotenziale von interaktiven Visualisierungen in Dashboards.

The post TFG | Smart Communities – IoT4LAC appeared first on Mobile USTP MKL.

The Rise of Dark Mode

Dark mode’s rise in popularity can be attributed to its aesthetic appeal and functional benefits. It provides a visually striking alternative to traditional light modes, often perceived as more elegant and modern. Users increasingly seek customizable experiences, and dark mode offers a personalized touch, allowing for a more tailored user experience. This customization aligns with broader trends in user interface design, where personalization is key to enhancing user engagement and satisfaction. The ability to switch between light and dark themes allows users to adapt the interface to their preferences and environmental lighting conditions, further enhancing the user experience.

Benefits for Usability

Reduced Eye Strain

One of the most significant advantages of dark mode is its potential to reduce eye strain, especially in low-light conditions. According to research from the Nielsen Norman Group (NNG), darker interfaces can decrease the overall brightness and glare from screens, making it easier on the eyes during prolonged use. This is particularly beneficial for users who spend long hours on their devices, as it can reduce discomfort and eye fatigue. By reducing the amount of blue light emitted from screens, dark mode can help mitigate some of the adverse effects associated with longer screen time, such as digital eye strain and disrupted sleep patterns. This makes dark mode an attractive feature for users seeking a more comfortable and health-conscious digital experience.

Battery Efficiency

Another key benefit is improved battery life for devices with OLED or AMOLED screens. These screens can turn off individual pixels to display black, thereby consuming less power compared to light pixels. This results in significant energy savings when using dark mode, which is a considerable advantage for mobile users looking to extend their device’s battery life. By conserving battery life, dark mode not only enhances the user experience by reducing the frequency of charging but also supports the growing emphasis on energy efficiency and sustainability in technology design. This aspect of dark mode appeals to environmentally conscious users and those who prioritize long-lasting device performance.

Design Considerations

Contrast and Readability

Implementing dark mode effectively requires careful attention to contrast and readability. Poorly executed dark mode designs can lead to insufficient contrast between text and background, making it difficult for users to read content comfortably. The Nielsen Norman Group points out that suitable contrast ratios are crucial for readability and accessibility. Ensuring that text remains legible in dark mode involves selecting appropriate colors that provide enough contrast without causing eye strain. This often means using off-white or light grey text instead of pure white to reduce glare. Properly addressing these contrast issues is vital to maintain accessibility standards and ensure that all users, including those with visual impairments, can comfortably use the application.

Visual Hierarchy

Maintaining a clear visual hierarchy is essential in dark mode design. Designers must select color palettes that not only provide adequate contrast but also enhance the overall user interface. This involves careful use of color to differentiate between various UI elements and ensure that important information stands out. For example, lighter shades can be used for primary actions and highlights, while darker tones can serve as backgrounds to support visual separation. This thoughtful use of color can help guide the user’s attention to critical elements and actions, improving overall usability. A well-defined visual hierarchy also aids in creating an intuitive and efficient user experience, which is particularly important in complex applications where users need to navigate through multiple layers of information.

Implementation Challenges

Implementing dark mode is not without its challenges. Designers must ensure that all elements of the user interface, including icons, images, and interactive components, are optimized for dark backgrounds. This often involves creating alternative assets and conducting thorough testing across different devices and lighting conditions to ensure consistency. For instance, images with transparent backgrounds or drop shadows may need adjustments to look right in dark mode. Additionally, developers must address potential issues with text readability and contrast, ensuring that interactive elements remain visually distinct and accessible. Overcoming these challenges requires a comprehensive approach to design and development, incorporating feedback from user testing to refine the dark mode experience continually.

User Preferences and Adaptation

Despite its benefits, dark mode is not universally preferred. Some users find dark backgrounds less readable, particularly for text-heavy tasks. Therefore, it’s essential to provide options for users to switch between dark and light modes. Persistence of user preferences is also crucial; settings should be saved across sessions to ensure a seamless experience. Providing users with control over their visual environment is key to accommodating different needs and preferences. For instance, offering a scheduled dark mode that automatically activates based on the time of day can enhance usability and satisfaction. By allowing users to tailor their experience, applications can better meet individual preferences and situational requirements.

Context-Specific Usage

Dark mode may be particularly beneficial in specific contexts, such as during nighttime use or in dark environments where a bright screen can be disruptive. Users can appreciate the flexibility to adapt the interface to their current context, which can enhance their overall experience. For instance, using dark mode in a low-light environment can reduce screen glare and prevent eye strain, making it easier to focus on content. Additionally, dark mode can be advantageous for users who are sensitive to light or suffer from migraines, as it provides a more comfortable viewing experience. By understanding the various contexts in which dark mode can be beneficial, designers can create more user-centric and adaptable interfaces.

Conclusion

Dark mode offers numerous benefits, including reduced eye strain and improved battery efficiency, making it a valuable feature for enhancing mobile app usability and user experience. However, its successful implementation requires careful consideration of contrast, readability, and visual hierarchy to avoid potential errors. By addressing these challenges and incorporating user-centric design principles, designers can create inclusive and effective dark mode experiences that cater to a diverse range of user preferences.

Ultimately, the success of dark mode in enhancing usability and user experience relies on thoughtful design and a deep understanding of user needs. As mobile applications continue to evolve, dark mode stands out as a feature that, when implemented correctly, can significantly enhance the user experience in various contexts. By prioritizing user comfort, readability, and energy efficiency, designers can ensure that dark mode remains a valuable and well-loved feature in the ever-changing landscape of mobile app design.

References

Budiu, R. (2020, February 2). Dark Mode vs. Light Mode: Which Is Better? Nielsen Norman Group. https://www.nngroup.com/articles/dark-mode/

Kohler, T., & Zhang, A. (2023, August 27). Dark Mode: How Users Think about It and Issues to Avoid. Nielsen Norman Group. https://www.nngroup.com/articles/dark-mode-users-issues/

Dark Mode. (n.d.). Apple Developer Documentation. https://developer.apple.com/design/human-interface-guidelines/dark-mode

Material Design. (n.d.). Material Design. https://m2.material.io/design/color/dark-theme.html

Dark Mode: All the Pros and Cons to Consider. (2021, August 3). Linearity Blog. https://www.linearity.io/blog/dark-mode/

Trawiński, W. (2024, May 24). Dark mode — beyond basics. JavaScript Everyday. https://medium.com/javascript-everyday/dark-mode-beyond-basics-2651bfc6c1a7

Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript. (2024, March 25). Smashing Magazine. https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/

Implementing Dark Mode in Web Applications. (2024, January 28). DEV Community. https://dev.to/bartzalewski/implementing-dark-mode-in-web-applications-4h31

‌

The post The Impact of Dark Mode on Mobile Usability and User Experience 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.

Bei diesem Projekt ging es vordergründig um das Erlernen, Testen und Bewerten von Quant-UX. Daher wurde der erstellte Prototyp einfach gehalten und die Tasks, die von den Usern während des Tests zu erfüllen waren, leicht durchführbar gemacht. Quant-UX bietet im Vergleich zu anderen Prototyping Tools wie Figma oder Adobe XD Zusatzfunktionen um das Designen, Testen und Analysieren zu erleichtern. 

Quant-UX

Prototyping: Die Plattform bietet eine intuitive Benutzeroberfläche, mit der interaktive Prototypen erstellt werden können. Es stehen verschiedene Widgets, Icons und Textwerkzeuge zur Verfügung.

Usability-Tests: Quant-UX ermöglicht es, Benutzerstudien durchzuführen, um die Benutzerfreundlichkeit eines Produkts zu bewerten. Es können Aufgaben und Szenarien erstellt werden, die von den TestteilnehmerInnen durchgeführt werden. Die Plattform zeichnet die Interaktionen der BenutzerInnen auf und ermöglicht es, ihre Aktionen und eventuelles Feedback zu analysieren.

Datenanalyse: Quant-UX bietet Funktionen zur Analyse der gesammelten Daten. Es können Benutzerstatistiken angezeigt werden und Heatmaps erstellt werden, um die Aufmerksamkeit der BenutzerInnen zu visualisieren. Es können ebenfalls Benutzerpfade verfolgt werden, um zu verstehen, wie Benutzer durch die Website oder Anwendung navigieren.

Kollaboration: Die Plattform ermöglicht eine leichte Zusammenarbeit mehrerer DesignerInnen an einem Projekt. Teammitglieder können ihre Forschungsdaten und Designentwürfe teilen, Feedback geben und gemeinsam an der Verbesserung der Benutzererfahrung arbeiten.

Verwendete Design Funktionen

• Design Grundfunktionen
• Scripting
• Data binding
• A/B testing
• Screen segment
• Form validation
• Animation
• Logic flows
• Components

Verwendete Testing Funktionen

• Tasks
• Screen Recordings
• Dashboards (Testzeit, Interaktionen)
• Heat Map
• Rating
• NPS-Score

Learnings (bezogen auf Quant-UX)

Während des Projekts, bei dem ein Prototyp mit Quant-UX erstellt wurde, traten einige Herausforderungen auf, die wertvolle Erkenntnisse lieferten. Ein Problem bestand in der Verwendung der A/B Testing Funktion, die eingesetzt wurde, um zwei unterschiedliche Designs zu validieren. Der Grundgedanke, jedem User eines der zwei Designs für einen spezifischen Screen zuzuweisen funktioniert gut, jedoch nur solange der User diesen Screen nur einmal besucht. Kommt ein User erneut auf den Screen wird wieder eine zufällige Auswahl getroffen und es kann passieren, dass ein anderes Design als zuvor gezeigt wird. Dies kann zu Verwirrung und Unsicherheit seitens des Users führen. Diese Funktion des A/B Testing kann meiner Meinung nach nur verwendet werden, wenn sicher ist, dass der User während des Testens nur einmal auf diesen Screen kommt (Z.B. Login).

Leider kam es auch aufgrund von einem Fehler der Website zu Komplikationen mit dem Prototyp, was dazu führte, dass ich bereits nach einigen investierten Stunden von vorne beginnen musste, da der Zugriff auf den Prototyp nicht mehr möglich war. Der Gründer von Quant-UX, Klaus Schaefers, mit dem ich in Emailkontakt war, war bei diesem Vorfall sehr hilfsbereit und versuchte mein Problem zu lösen, konnte jedoch schlussendlich nichts bewirken. Bei einem kleinen Projekt wie meinem, ist dies noch verkraftbar, hat man jedoch einen umfangreichen Prototyp und dazu bereits Testergebnisse wäre ein solcher Vorfall katastrophal.

Ein weiteres Learning war, dass die Anzahl der Testteilnehmer für aussagekräftige Ergebnisse ausreichend sein muss. Es wurde schnell klar, dass zu wenig Testpersonen die Repräsentativität der Ergebnisse beeinträchtigt. Außerdem sollten alle Screens, Widgets und Icons sinnvoll benannt werden, um sich bei der Auswertung der einzelnen Elemente leichter zu tun. Ein weiteres Learning bezieht sich auf die Ausformulierung der Einleitung des Usertests. Es wäre sinnvoll passend zur Intension der Durchführung die bevorzugte Verwendung des Endgerätes zu erwähnen. Besteht der User Test aus anspruchsvollen und vielen Tasks die zu erledigen sind, ist es besser den Test am PC durchzuführen, da in dieser Ansicht während des gesamten Tests die Tasks am Seitenrand angezeigt werden. Geht es jedoch darum eine realistische Situation für eine App zu kreieren und die User müssen keine schwierigen Tasks erledigen, ist die Durchführung am Handy zu empfehlen.

Es kann gesagt werden, dass die Erkenntnisse aus den Benutzertests mit Quant-UX sich als praktisch erweisen, um Design- oder Logikfehler zu erkennen und darauf entsprechend zu reagieren. Das Open Source Tool Quant-UX bietet als Prototyping-Tool viele Vorteile. Speziell in Situationen, in denen man schnell ein Schwarz-Weiß Wireframe oder auch einen Prototyp braucht, um eine Idee vor einem Entwicklungsteam zu präsentieren, ist das Tool perfekt. Auch um Designs im frühen Stadium mit wenig Geld und Aufwand zu testen, eignet sich dieses Prototyping Tool. Bereits in Figma erstellte Designs können auch in Quant-UX importiert werden, um nur die Testing Tools zu nutzen.

Ein ausführlicherer Bericht mit allen Ergebnissen zu diesem Projekt kann im angehängten PDF gefunden werden.

The post Prototyping und User Testing mit Quant-UX appeared first on Mobile USTP MKL.