Last updated
© 2024 Ramona Marti & Lea Burki
Verschiedene Arten von Tests garantieren die Korrektheit der einzelnen Funktionen und Komponenten. In manuellen Tests findet die Kontrolle der Konsistenz im UI und der Interaktion statt. Die automatisierten Code-Tests stellen sicher, dass das Aufrufen der gebotenen Funktionalität die gewünschten Änderungen ausführt. Komponenten, welche für die Erstellung des UI zuständig sind, prüfen sowohl die Existenz von Elementen als auch das Triggern der Events. Die User-Tests mit unterschiedlichen Personen gewährleisten eine gute Nutzerzufriedenheit sowie die intuitive Anwendung durch Programmierer. Die Auswahl der Nutzer fällt auf eine grosse Vielfalt, damit die Resultate unterschiedliche Sichtweisen einbeziehen.
Manuell durchgeführte Tests – in den vier aktuellen Browsern Edge, Chrome, Firefox und Safari – beweisen die Konsistenz der neuen Komponente. Als Beispiel dient die SelectComponent mit drei Spalten (Abbildung 4.17).
Diese Komponente unterzieht sich sowohl einer Prüfung auf Mac als auch Windows. In den Einstellungen sind in einem ersten Durchgang der Light-Mode und in einem Zweiten das Dark-Theme gespeichert. Die genaue Kombination zwischen Browsern und Betriebssystemen ist wie folgt:
Mac bzw. OSX: Chrome (127), Firefox (128), Safari (17.5)
Windows (10/11): Chrome (127), Firefox (128), Edge (127)
Die SelectComponent aus Abbildung 4.17 zeigt sich in den aufgezählten Kombinationen grundlegend konsistent. Es existiert nur eine kleine Abweichung. Die Scrollbars auf Windows (Abbildung 4.18) besitzen auf der rechten Seite einen grösseren Abstand als auf Mac (Abbildung 4.17).
Dabei spielt der Browser keine Rolle. Bei den Interaktionen verhält sich die Komponente ebenfalls konsistent über alle Browser. Die einzige Abweichung findet sich beim Ausführen von Aktionen. Auf Windows-PCs mit Nummernpad funktionieren die PageUp-, PageDown-, Home- und End-Keys [10] auf der Tastatur. Auf OSX verlangen die oben genannten Tasten und Delete eine Tastenkombination mit der fn-Taste.
Zusätzlich zu den im Vorfeld vereinbarten Systemen und Browsern finden noch folgende weitere Prüfungen statt:
Linux (24 LTS): Firefox (125), Chromium (127)
iOS (Simulator): Safari (17.2)
Android (Pixel Simulator): Chrome (124)
Diese Tests beweisen, dass die Komponente über die geforderten Umgebungen hinaus funktioniert. Firefox zeigt die SelectComponent auf Linux wie auf OSX an. Speziell die Scrollbar in den Spalten ist rechts anliegend. In Chromium besteht ein Abstand von der Scrollbar zum rechten Rand. Ansonsten ist die Komponente konsistent im UI und der Interaktion.
Die mobilen Geräte öffnen keine virtuelle Tastatur. Deswegen sind nur Touch-Interaktionen möglich. Zu diesen Bedienungsmöglichkeiten gehören das Scrollen und das Klicken. Auf iOS und auf Android stellen die Browser das UI meist konsistent – wie auf dem Desktop Safari – dar. Die Scrollbar ist anliegend an der rechten Seite. Das Highlight und die Cursor-Position haben keinen weiteren Nutzen. Die beiden Zustände bewegen sich mit der Selektion mit. Das Highlight verschwindet, wenn das Touch ausserhalb einer Option erfolgt. Die einzige Inkonsistenz auf iOS zeigt sich beim Klick ausserhalb der SelectComponent. Anders als Safari auf Desktop schliesst diese Interaktion den Container nicht. Wenn der Klick auf der X einen bereits selektierten Wert löscht, bleibt der Container ebenfalls offen. Auf dem Pixel Chrome reagiert der Klick auf die Detail-Ansicht abweichend. Ist das Popover bereits geöffnet, schliesst die Interaktion dieses und öffnet es gleich wieder. Trifft die Touch-Geste das X bei einer bereits getroffenen Selektion, passiert dieser Fehler nicht.
Folgende veraltete Browser finden sich in oberflächlichen Tests wieder:
Mac: Firefox Version 123 ⇒ vor Popover-API
iOS: Safari Version 16.7 ⇒ vor Popover-API
In veralteten Browsern ist die SelectComponent mit leichten Einbussen nutzbar. Der aufgelistete Firefox und auch Safari öffnen die neue Komponente normal. Im offenen Zustand ist das Toggle-Icon dasselbe wie im geschlossenen. Ein Klick ausserhalb der Komponente schliesst den Listencontainer nicht. Daher existiert die Inkonsistenz, dass mehrere Auswahlkomponenten parallel geöffnet sein können. Dies ermöglicht eine unerwünschte Darstellung von überschneidenden Listencontainer. Das restliche UI zeigt kaum Abweichungen. Die Interaktionen funktionieren alle wie in den aktuellen Browserversionen. Gewisse Zustände sind im Controller nicht konsistent mitgeführt. Ohne das Popover reagiert das Toggle-Event nicht.
Die breite Abdeckung der manuellen Tests beweist bei den anfangs genannten Browsern eine konsistente Darstellung und Interaktion. Zudem sind Nutzer mit leicht veralteten Browsern nur leicht beeinträchtigt. Eine gewisse Bedienbarkeit ist möglich.
Tests für Komponenten der SelectComponent beweisen die Stabilität des Codes. Generell befinden sich die einzelnen Komponenten nach Separation of Concern je in einer eigenen Testeinheit. Dies garantiert das schnelle Auffinden von Bugs und unerwünschtem Verhalten direkt in einer Komponente. Auf der Abbildung 4.19 ist zu sehen, dass eine breite Palette an Kontrollen stattfindet und sauber durchläuft.
Die oberen vier Zeilen auf Abbildung 4.19 zeigen Tests zu den Bausteinen aus Abbildung 4.12. Diese decken den Level der Options bis zur Column ab. Die ersten zwei Testsuites kümmern sich genauer um die Korrektheit der Models und Controller. Dabei besteht das erste File aus den Tests der Typen ValueOption und CategoryOption. Dazu gesellen sich Prüfungen der Komponenten OptionsModel und SelectedOptionModel. Der OptionsController und der SelectedOptionController finden sich in einer gemeinsamen Test-Datei wieder. Der projectColumnOptionsView-Test deckt die Kontrolle der Bindings und die Existenz der View-Elemente ab. Die Korrektheit des Zusammenspiels zwischen Projektor und Controller findet sich im ColumnOptionsComponent-Testing wieder.
Die restlichen Testbibliotheken decken die Korrektheit der auf Abbildung 4.13 sichtbaren Bausteine ab. Diese drei Dateien prüfen das Zusammenspiel der Columns sowie der allgemeinen Komponentenfunktionalitäten. In einzelnen Units prüft die SelectController-Test-Suite verschiedene Varianten der Anwendung. Im projectSelectViews-Test befinden sich – wie bereits bei der Column – die Prüfungen der Korrektheit der View-Elemente und Bindings. Die letzte Datei kümmert sich um die Kontrolle der SelectComponentByCallbacks und SelectComponentByTableValues. Die breite Abdeckung der Einzelteile garantiert die korrekte Funktion der neuen Komponente. Die Tests im nachfolgenden Kapitel sind sowohl für eine gute Anwendbarkeit im Code als auch für eine angenehme Benutzung der Auswahlkomponente im Browser notwendig.
Die Bewertung des Designs und der Benutzerfreundlichkeit ist ein wichtiger Bestandteil der Entwicklung. Die im Vorfeld definierten Personas – Anhang E – finden sich in den getesteten Usern wieder. Estrid Miller arbeitet als Webentwicklerin und stört sich an schlechter Code-Dokumentation. Sie wünscht sich eine flexible und anpassbare UI-Komponente, welche ihre tägliche Arbeit vereinfacht. Der Alltagsnutzer Love Berg ist ein typischer Webanwender und ärgert sich über umständliche und langsame Anwendungen. Er wünscht sich ein effizientes und verständliches User-Interface. Die folgenden zwei Unterkapitel decken mit den zwei Nutzergruppen Programmierer und Endanwender die Personas ab.
Die Probanden dieser User-Tests sind alle Studenten der FHNW. Deswegen haben die Testpersonen ein ähnliches Hintergrundwissen wie Estrid. Die Vorlieben der Probanden sind unterschiedlich und decken dadurch die Vorgaben durch die Persona ab.
Im Rahmen der Evaluierung der neuen Dropdown-Komponente sind Programmierer dazu eingeladen, spezifische Aufgaben zu erfüllen. Diese Aufgaben umfassen die Implementierung der Dropdown-Komponente in eine bestehende Webanwendung. Für den Erhalt eines möglichst realistischen Feedbacks sind die Teilnehmer gebeten, nach der Implementierung eine Google-Umfrage auszufüllen.
Insgesamt haben 9 Studenten an dem User-Test teilgenommen und die Aufgaben versucht zu lösen. Die Grafiken 4.20 und 4.21 zeigen, dass die Hintergründe der Probanden breit gefächert sind. Zwei der Testpersonen konnten die Aufgabe nicht korrekt lösen.
Die Aufgaben beinhalten verschiedene Szenarien. Die Entwickler sollen die neue Komponente unter anderem für das Mittagessen, eine Heimatregion oder ein Geburtsjahr einsetzen. Der bereitgestellte Code (Anhang D) dient als Basis für die Implementierung. Dabei fällt der Fokus darauf, dass die Programmierer die Einbindung in die vorhandene Infrastruktur korrekt umsetzen.
Nach der systematischen Erfassung der Umfrage-Rückmeldungen erfolgt die Analyse dieser. Programmierer bewerten die Komponente als benutzerfreundlich und ästhetisch ansprechend.
Die Umfrageergebnisse zeigen eine überwiegend positive Bewertung der Komponente (Abbildung 4.22). Sie sind in den Abbildungen D.1 bis D.7 im Anhang D illustriert. Einige Teilnehmer äussern jedoch Kritikpunkte hinsichtlich der Dokumentation. Insbesondere die Beschreibung der Rückgabewerte und die Integration von Callbacks wiesen vor der Anpassung Mängel auf. Weitere Verbesserungsvorschläge umfassen die Möglichkeit, die Komponente nach der Auswahl automatisch zu schliessen.
Personen mit nur geringen JavaScript-Kenntnissen fällt es schwer, die Komponente intuitiv zu verwenden. Die Testperson ohne jegliche JavaScript-Kenntnisse konnte die Aufgaben nicht korrekt lösen. Für einige Testnutzer ist die Verwendung von Callbacks als Service-Funktionen eine Stolperfalle.
Die Ergebnisse der Tests liefern wertvolle Erkenntnisse, welche zur Verbesserung der Dokumentation beitragen. Die Überarbeitung der Dokumentation wie auch die der Rückgabe der Komponente heben die Kritik auf. Die Erstellung des zweiten Konstruktors mit einer Tabelle von Werten ermöglicht das Umgehen des Stolpersteins der Callbacks.
Die nachfolgende Liste zählt die Verbessrungsvorschläge und Bemerkungen der Testprogrammierer zusammengefasst auf. Die originalen Feedbacks befinden sich im Anhang D.
Dokumentation & Return-Wert: Das JSDoc der SelectComponent benötigt eine detailliertere Beschreibung des Return-Arrays. Die Elemente erklären sich erst in den Anwendungsbeispielen. Tester mussten nach der Beschreibung suchen. Die Dokumentation erweist sich als verwirrend. Wenn sich die Komponente nicht im Projektordner befindet, erscheinen keine Typen-Informationen bzw. Dokumentationshinweise.
numberOfColumns: Ein Tester versuchte den Parameter falsch anzuwenden, um Fehler aufzudecken. Ist selectAttributes ⇒ numberOfColumns nötig?
selectAttributes: Der Parameter ist intuitiv anwendbar. Label, Name und numberOfColumns sind klar.
Callback: Der Parameter ist nicht intuitiv anwendbar. Callbacks sind nicht allen Programmierern klar in der Anwendung bzw. bekannt. Es ist speziell, dass – im Gegensatz zum UI – das serviceCallbacks-Array in umgekehrter Reihenfolge einzugeben ist.
Navigation: Die Tastaturnavigation ist nicht ideal. Die Verwendung der Tastatur zum Eingrenzen möglicher Kategorien/Werte – unscharfe Suche [11] – wäre eine Möglichkeit. Sonst dauert die Suche länger als in den existierenden Komponenten.
Automatisches Schliessen: Automatisches Schliessen der Komponente nach der Auswahl wäre praktisch.
Performance: Die Performance ist zu langsam. Beim Implementieren von Task 2.2 benötigt die Webseite ca. 5 Sekunden zum Laden. Dies liegt – soweit ersichtlich – am HTML-Rendering.
Leere Spalten: Wenn zwei Kolonnen sichtbar sind, aber rechts nichts selektierbar ist. Das ist ein zu erwartender Fall, aber nicht ideal für die Demo.
Im Rahmen der Usability-Tests erfolgt eine Untersuchung der Benutzerfreundlichkeit der neuen Dropdown-Komponente. Die Komponente nutzt eine mehrstufige Filterung. Dies erleichtert die Navigation innerhalb langer Listen. Die Probanden durchlaufen zwei Aufgaben. Diese zielen auf die Evaluation der Effizienz und Anwenderfreundlichkeit dieser Dropdown-Funktion ab.
Aufgabenbeschreibung :
Jahresauswahl: Testpersonen wählen das gewünschte Jahr aus einer Liste aus. Der Prozess beinhaltet die Vorauswahl eines Jahrzehnts, gefolgt von der Auswahl des spezifischen Jahres. Diese Aufgabe dient der Bewertung der Benutzerfreundlichkeit und Effizienz der Filteroption.
Stadtauswahl: Die Testpersonen wählen eine spezifische Stadt aus einer dreispaltigen Dropdown-Liste. Die Auswahl erfolgt schrittweise: Beginnend mit dem Kontinent, gefolgt vom Land, und schliesslich der Stadt. Der Fokus liegt hierbei auf der Bedienbarkeit und der Wirksamkeit der Filterfunktion.
Feedback der Testpersonen:
Allgemeine Benutzerfreundlichkeit:
Robert (Junger Alltagsbenutzer, Digital Native): Empfindet die Dropdown-Menüführung als intuitiv und zügig bedienbar. Sowohl das Jahr als auch die Stadt lassen sich mühelos finden.
Luca (Junger Alltagsbenutzer): Wenn das Resultat bereits sichtbar ist, kann die Filterfunktion ausgelassen werden. Die Vorauswahl ist optional und kann ignoriert werden, wenn es nicht notwendig ist.
Sara (Semi-aufmerksam, nicht so schnell auf der Tastatur): Beginnt mit Schwierigkeiten in der Dreispaltenansicht. Nach kurzer Einarbeitung findet sie die Filteroptionen jedoch nützlich.
Nick (Alltagsbenutzer/Student): Zeigt sich zufrieden mit der Handha- bung. Er hebt hervor, dass die Filterfunktion das Auffinden des Jahres beschleunigt.
Reto (Unternehmer, über 60 Jahre alt): Erlebt die Menüführung als etwas komplex, besonders die dreispaltige Filterung. Nach einer Eingewöhnungszeit erkennt er jedoch die Vorteile gegenüber einer langen Liste.
Regula (Lehrerin, über 60 Jahre alt): Findet die Navigation schneller, braucht jedoch Zeit, um sich daran zu gewöhnen.
Funktionalität der Filteroptionen:
Robert: Schätzt die Filteroptionen als sehr nützlich ein. Das Finden spezifischer Jahre und Städte gelingt schneller als erwartet.
Luca: Die optionale Vorselektion hat bei Nichtverwendung dieser die Auswahl nicht erschwert. Bei der Nutzung des Filters hat es die Auswahl erleichtert.
Sara: Nutzt zuerst nicht alle Filter bei der Stadtauswahl. Somit scrollt sie ein bisschen mehr.
Nick: Die Möglichkeit, zuerst das Jahrzehnt und anschliessend das spezifische Jahr auszuwählen, beschleunigt den Prozess erheblich.
Reto: Ist unsicher bei der Nutzung der Filter. Nach einiger Zeit erkennt er jedoch dessen Vorteil.
Regula: Findet die Navigation schneller, braucht jedoch Zeit, um sich daran zu gewöhnen.
Visuelle Gestaltung und Übersichtlichkeit:
Robert: Beurteilt das Design als klar und ansprechend. Die Struktur erscheint ihm logisch und nachvollziehbar.
Luca: Design ist unaufgeregt. Es ist nicht zu aufdringlich, aber klar.
Sara: Findet die visuelle Gestaltung in Ordnung. Sie vermisst jedoch eine deutlichere Hervorhebung aktiver Filteroptionen.
Nick: Ist zufrieden mit der Übersichtlichkeit und der klaren Struktur des Dropdown-Menüs.
Reto: Besonders in der Dreispaltenansicht findet er das Design zunächst verwirrend. Er gewöhnt sich jedoch daran.
Regula: Empfindet das Design klar gestaltet.
Intuitivität der Bedienung:
Robert: Erlebt die Bedienung als sehr intuitiv und benötigt keine weiteren Erklärungen.
Luca: Findet es intuitiv.
Sara: Muss sich an die Bedienung gewöhnen. Jedoch nach kurzer Zeit findet sie die Handhabung einfach.
Nick: Empfindet die Bedienung als leicht nachvollziehbar und intuitiv.
Reto: Hat anfänglich Schwierigkeiten und wünscht sich eine einfache Einführung.
Regula: Verwendet die Navigation zu Beginn wie bei herkömmlichen Jahresauswahlmenüs.
Gesamtzufriedenheit:
Robert: 10/10 – Sehr zufrieden, bewertet die Filteroptionen als hervorragend.
Luca: 9/10 – Zufrieden, lediglich bei den Jahreszahlen wäre Weiterscrollen bei einer Falschauswahl praktisch.
Sara: 7/10 – Zufrieden, dreispaltige Navigation ist ihr jedoch nicht so gängig.
Nick: 9/10 – Zufrieden, bevorzugt diese Art der Auswahl.
Reto: 8/10 – Zufrieden, jedoch mit anfänglichen Schwierigkeiten. Er mag speziell die schnelle Jahresauswahl.
Regula: 8/10 – Brauchte zwar einen Bedienungshinweis, findet es jedoch super. Das Scrollen bei ihrem Jahrgang ist in anderen Dropdown Menüs nervenaufreibend.
Verbesserungsvorschläge:
Robert: Hat keine weiteren Vorschläge.
Luca: Es wäre praktisch, wenn die Jahreszahlen nach der Selektion der Dekade nicht verschwinden. Das Weiterscrollen sollte bei der Selektion des falschen Jahrzehnts noch möglich bleiben.
Sara: Findet die dreispaltige Version nützlich. Aber leider müssen mehrere Spalten bearbeitet werden.
Nick: Schlägt eine kurze Anleitung oder Hinweistext für Erstnutzer vor.
Reto: Eventuell eine vereinfachte Variante mit weniger Informationen bei der Länderauswahl.
Regula: Eventuell eine vereinfachte Variante mit weniger Informationen bei der Länderauswahl.
Der Usability-Test zeigt, dass die neue Dropdown-Komponente insgesamt beliebt ist. Besonders die Filteroptionen nach Jahrzehnten und Kontinenten erweisen sich als hilfreich. Einige Nutzer benötigen jedoch eine Eingewöhnungszeit, um sich an die Bedienung der mehrstufigen Auswahl zu gewöhnen.
Die Entwicklung und die Implementierung der neuen Auswahlkomponente stellen eine Herausforderung dar. Dies ist durch eine strukturierte Vorgehensweise und kontinuierliche Verbesserungen erfolgreich umsetzbar. Die Usability-Tests mit Programmierern und Endanwendern liefern Einblicke in die Benutzerfreundlichkeit und Funktionalität der Komponente.
Wichtige Erkenntnisse und Erfolge: Design und Konsistenz: Die Nutzung des Kolibri-Designsystems ermöglicht eine konsistente und ansprechende Benutzererfahrung. Es ist wichtig, die Farbauswahl und den Kontrast anzupassen. Damit sind eine hohe Lesbarkeit sowie auch die Benutzerfreundlichkeit gewährleistet. Interaktion und Benutzerfreundlichkeit: Die neue Komponente bietet eine intuitive Bedienung sowohl für Maus- als auch für Tastaturbenutzer. Die Rückmeldungen aus den Tests zeigen, dass die Komponente nach einer kurzen Einarbeitungszeit gut verständlich und benutzerfreundlich ist. Die neue Dropdown-Komponente ermöglicht eine intuitive Bedienung. Diese findet sowohl bei Digital Natives als auch bei weniger geübten Nutzern Akzeptanz. Die mehrspaltigen Filteroptionen sind als besonders hilfreich hervorgehoben. Sie erleichtern die Navigation in umfangreichen Listen erheblich. Performance-Optimierungen: Durch gezielte Performance-Optimierungen – wie die Verwendung des Shadow-DOMs – reduziert sich die Ladezeit bei grossen Datenmengen erheblich. Dies trägt zu einer flüssigeren Benutzererfahrung bei. Design und Klarheit: Die visuelle Gestaltung der neuen Dropdown-Komponente bewerten die Testpersonen als klar und ansprechend. Besonders die logische Struktur und die unaufdringliche Präsentation tragen zu einer positiven Benutzererfahrung bei. Effizienzsteigerung: Die Möglichkeit, gezielt nach Jahrzehnten und Kontinenten zu filtern, beschleunigt den Auswahlprozess signifikant. Dies erkennen die Testpersonen als wesentlicher Vorteil gegenüber herkömmlichen, nicht gefilterten Dropdown-Menüs. Tastatur-Shortcuts nutzen nur zwei der Testpersonen. Eine breitere Nutzung dieser Funktion steigert die Effizienz der Bedienung weiter.
Verbesserungspotenziale: Dokumentation: Eine detailliertere Dokumentation der Rückgabewerte und der Verwendung der Komponente ist notwendig. Die Ausarbeitung des JSDoc vermeidet Missverständnisse und erleichtert die Einarbeitung. Dazu unterstützt eine Umgestaltung des Return-Werts die Verständlichkeit der Elemente. Interaktion: Die Implementierung einer automatischen Schliessfunktion nach der Auswahl eines Wertes ist als wünschenswert identifiziert. Eine verbesserte Tastaturnavigation ist ebenfalls erwünscht und findet in der verbesserten Implementation ihren Platz. Code-Komplexität: Die Reduzierung der Komplexität der Parameter vereinfacht die Komponente in der Verwendung. Die daraus resultierende Version der Komponente erhöht durch einen alternativen Konstruktor die Entwicklerfreundlichkeit. Einarbeitungszeit: Die meisten Nutzer empfinden die Komponente als benutzerfreundlich. Bei älteren Nutzern ist ein Bedarf nach einer kurzen Einführung in die Bedienung vorhanden. Weiterentwicklung: Die Tests zeigen, dass es sinnvoll sein könnte, eine Funktion zu integrieren, die eine flexiblere Navigation innerhalb der Dropdown-Menüs ermöglicht. Beispielsweise kann durch das Fortsetzen des Scrollens in Kategorien oder eine vereinfachte Variante für spezifische Nutzergruppen Abhilfe schaffen.
Die neue Auswahlkomponente erfüllt die Anforderungen an Konsistenz, Benutzerfreundlichkeit und Performance. Sie bietet gleichzeitig Raum für weitere Optimierungen. Gewisse Kritiken finden ihre Lösung in der neuen Version der Komponente. Die SelectComponent erfüllt durch die kontinuierliche Weiterentwicklung und Verbesserung die hohen Ansprüche moderner Webanwendungen.
[10] Gewisse Tastaturen besitzen die genannten Tasten doppelt – einmal im Nummernpad und einmal in der obersten Zeile [11] Elemente durch das Übereinstimmen von Zeichen oder einer Zeichenkette finden.
