Beatsnap Usability A-Test

Usability-Test der App Beatsnap Seminar Usability für KMU SS 2016
Jette Beißer, Lascha Sochadse, Fabian Zeier Dozenten: Nils Backhaus, Anna Trapp

Agenda Schritt 1 – Heuristische Evaluation • Ausgangspunkt • Ergebnisse
• Implikationen für Schritt 2 Schritt 2 – Usability Test • Erstellung des Prototypen • Versuchsplanung und Teilnehmer • Versuchsablauf • Datenaufzeichnung • Kritik Schritt 3 – Ergebnisse 2

Schritt 1 - Heuristische Evaluation Ausgangssituation • Startup Beatsnap als
Projektpartner • Beatsnap soll von 2 Arbeitsgruppen mit dem Ziel der Verbesserung von Usability und User Experience untersucht werden • Themenschwerpunkte der Arbeitsgruppen Tutorial Hauptbildschirm/Bearbeitungsscreen 3

Schritt 1 - Heuristische Evaluation Ausgangssituation • Wichtigste Ansatzpunkte für
die weiteren Arbeitsschritte beider Gruppen durch heuristische Analyse aufdecken  Was ist eine heuristische Analyse? 4

Schritt 1 - Heuristische Evaluation Ausgangssituation  Was ist eine
heuristische Analyse? • Informelle Expertenevaluation eines User Interface Alle Evaluatoren betrachten das System unter den gleichen Gesichtspunkten  z.B. Heuristiken nach Nielsen (1995) oder Usability Guidelines nach Norman (2013) Probleme der Usability können aufgedeckt, und nach ihrer Bedeutsamkeit für die Systemnutzung geordnet werden (Schweregrad) 5

Schritt 1 - Heuristische Evaluation Ausgangssituation 10 Heuristiken nach Nielsen
• Sichtbarkeit des Systemstatus • Passung zwischen System und echter Welt • Kontrolle durch den, sowie Freiheit des Nutzers • Konsistenz und Standards • Fehlervermeidung 6

Schritt 1 - Heuristische Evaluation Ausgangssituation 10 Heuristiken nach Nielsen
• Erkennen statt Erinnern • Flexibilität und Effizienz der Nutzung • Ästhetik und minimalistisches Design • Hilfe bei Erkennen, Diagnostizieren und Beheben von Fehlern • Hilfe und Dokumentation 7

Schritt 1 - Heuristische Evaluation Ergebnisauswertung • Alle Erkenntnisse aus
den Evaluationen der beiden Gruppen zusammentragen • Dabei Sortierung nach Schweregrad  Rot (Gravierend, muss bearbeitet werden)  Orange (Problematisch, sollte bearbeitet werden)  Gelb (Ungünstig, kann bearbeitet werden)  Grün (Positive Bewertung) 9

Schritt 1 - Heuristische Evaluation 10

Schritt 1 - Heuristische Evaluation Ergebnisauswertung • Brainstorming für Lösungsmöglichkeiten
und Crashpoints mit Wünschen/Anforderungen von Beatsnap 14

Schritt 1 - Heuristische Evaluation Ergebnisauswertung • Clustern der Ergebnisse
• Entstandene Kategorien in denen Probleme Auftreten  Musikbearbeitung  Bildbearbeitung  Speichern/Exportieren/Recovery  Verständnis (Funktionen/Anzeigen) 16

Schritt 1 - Heuristische Evaluation Ergebnisauswertung • Aufteilung der identifizierten
Problemfelder nach Gruppen  Welchen Problemen kann mit einem Tutorial begegnet werden?  Welche Probleme können auf dem Hauptbildschirm zu Diashowbearbeitung angegangen werden? 18

Schritt 1 - Heuristische Evaluation Wichtigste Ergebnisse für Tutorial-Gruppe •
Tutorial als reine Anleitung ungünstig -> Interaktivität fehlt • Bearbeitungsoptionen von Musik und Bild offenlegen (z.B. Multitouch) • Verständnis für Export-Funktionen herstellen 20

Schritt 1 - Heuristische Evaluation Wichtigste Ergebnisse für Hauptbildschirm-Gruppe •
Bearbeitungsmodus für Bilder -> nur Multitouch am Bild schlecht erkennbar • Kein direktes Anwählen der Bilder zur Bearbeitung möglich • Musikbearbeitungsmöglichkeiten schwierig zu erkennen -> müssen gelernt werden • Sichtbarkeit des Cut-offs der Musik/Position des Musikausschnitts im Titel eingeschränkt • Position der Bilder im Track nicht sichtbar 21

Schritt 1 - Heuristische Evaluation Implikationen für Schritt 2 •
Veränderungen im Design entwickeln, die Einfache und umfangreichere Bearbeitung der Bilder ermöglichen Die Reihenfolge und Positionierung der Bilder im Musikausschnitt verdeutlichen Dabei das Design nicht überladen und aktuelle Bearbeitungsoptionen nicht ausschließen 22

Schritt 2 – Usability-Test

Erstellung des Prototypen • Brainstorming Quelle: https://www.flickr.com/photos/53801255@N07/8571446514/in/photostream/ 24

Erstellung des Prototypen • Pen-und Paper-Prototyping Quelle: https://upload.wikimedia.org/wikipedia/commons/2/23/Bundesarchiv_Bild_183-1983-0103-014,_Halle,_Basteln_im_Kindergarten.jpg 25

Erstellung des Prototypen 26

Erstellung des Prototypen Reihenfolge und Position der Bilder • Icons
unterhalb der Waveform • Zunächst nicht weiter spezifiziert • Sind anwählbar (Bilder auswählen) • Sind Per Drag und Drop verschiebbar • Hintergrund der Idee: • Kommentarfunktion bei Soundcloud • Messenger-“Bubbles“ bei Facebook 27

Kommentarfunktion bei Soundcloud. Quelle: Screenshot unter https://soundcloud.com/eljayofficial/no-pressure Facebook Messenger. Quelle:
http://img.wonderhowto.com/img/05/36/63539388769204/0/get-facebook-chat-head-bubbles-your-computer.w654.jpg Erstellung des Prototypen 28

Erstellung des Prototypen Bildbearbeitung • Icons überhalb des Bildes •
Erscheinen Mit Click auf Bild, ersetzen „Shake-Button“  Schlichtheit • Aktivierung eines „Bearbeitungsmodus“: Musik stoppt • Sind anwählbar • Funktionen wie Filter und Rahmen 29

Erstellung des Prototypen • Brainstorming • Pen-und Paper-Prototyping 30

Erstellung des Prototypen • Brainstorming • Pen-und Paper-Prototyping • Festlegung
der beiden neuen Funktionen • Bild-Zuordnung • Weitere Bearbeitungsoptionen • Festlegung eines grundlegenden Aufbaus 31

Erstellung des Prototypen • Brainstorming • Pen-und Paper-Prototyping • Festlegung
der beiden neuen Funktionen • Bild-Zuordnung • Weitere Bearbeitungsoptionen • Festlegung eines grundlegenden Aufbaus • Umsetzung in einen klickbaren Prototypen in Axure RP Pro 7.0 32

Einschränkungen des Prototypen • Bekannte Funktionen nicht implementiert (Zoom, Multi-Touch,
Shake..) • Nicht alle angedeuteten Funktionen implementiert • Nur die Bearbeitung eines Bildes möglich • Keine Musikwiedergabe  Eingeschränkte Fidelity  Wichtige Interaktionen dennoch testbar 46

Offene Fragen des Prototypen • Was passiert mit den Icons
bei Zoom-out? • Soll es möglich sein, während der Bearbeitung zwischen Bildern zu wechseln? 47

Usability-Test • ISO 9241: „Usability ist... das Ausmaß, in dem
ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen“ • Nutzer lösen Aufgaben mithilfe eines Produkts/ Prototypen • Beobachtung und Befragung • Ableitung von Usability-Stärken und -Schwächen (nach Moser, 2012) 48

Usability-Test • Test sowohl der App als auch des Prototypen
• Finden und verstehen Nutzer vorhandene Funktionen? • Wünschen sie sich weitere Funktionen? • Sind die Neuerungen im Prototypen wünschenswert? 49

Teilnehmer • Rekrutierung aus dem Freundes- und Bekanntenkreis sowie unter
Kommilitonen • 5 Teilnehmer (vgl. Nielsen, 2000) • Alle weiblich ♀ • Alter: 14-24, Ø 21,2 • 3 Studentinnen, 1 Schülerin, 1 Auszubildende 50

Teilnehmer Mediennutzung 0 1 2 3 4 5 Smartphone Kamera
Whatsapp Facebook Instagramm Snapchat Andere Täglich Mehrmals wöchentlich 51

Versuchsablauf Einführung Test der App Fragebogen Weiterführende Fragen zur App
Test des Prototypen Fragebogen Weiterführende Fragen zum Prototypen Puzzleaufgabe Verabschiedung 52

Einführung • Begrüßung, Einverständniserklärung • Fragen zu soziodemographischen Daten und
der Nutzung von sozialen Medien und Fotoanwendungen • Idee der App erläutern • Einführung ins Laute Denken 54

Idee der App erläutern • Ausgangssituation: Teilnehmer haben Bilder mit
dem Smartphone aufgenommen • Das einfache Teilen ist zu langweilig • Bilder in einer Diashow zusammenfassen und rhythmisch passend mit Musik unterlegen App Beatsnap 55

Methode des Lauten Denkens • Nutzer verbalisieren Gedanken, Gefühle, Absichten,
Erwartungen etc. • Instruktion „Bitte sprich alles aus, was dir bei der Bearbeitung der Aufgaben durch den Kopf geht“ • Nachfragen, wenn Funktionen ausgelassen werden oder spezifischere Infos interessant sind • Eher Gespräch als Versuch • V.a. Bei Prototypen: z.T. „Lenkung“ um alle Funktionen abzufragen 56

Test der App Lediglich der Bearbeitungsscreen wird getestet… ... da
hier die meisten User-Interaktionen stattfinden. … um Zeit zu sparen … da sich der Prototyp auch auf diesen Screen fokussiert Test der Version für Android auf einem ZTE Blade S6 (5 Zoll, Android 5.0.2 Lollipop), da Prototyp hierfür optimiert war. 59

Test der App Ausgangssituation: • Testleiter sucht Musik und Bilder
aus • Übergabe an den Probanden, sobald der Bearbeitungsscreen startet • Instruktion die Diashow zu bearbeiten 60

Test der App Aufgaben • Bilder Bearbeiten: • Shuffle der
Bilder • Bildausschnitt verändern: Drehen, Verschieben, Zoom • Musik bearbeiten: • Musikausschnitt verändern • Herauszoomen • Diashow exportieren  Wenn nötig gibt der Versuchsleiter Hinweise, um alle Icons und Funktionen zu testen 61

Weiterführende Fragen Offene Fragen wie: • Wie fandest du die
Arbeit mit der App? Allgemeiner Eindruck • Was war einfach/ schwer? • Was hat dich gefreut/ geärgert? • Würdest die App weiterempfehlen? 65

Test des Prototypen • Prototyp als „Update“ • Selbe Ausgangssituation:
Bilder und Musik bereits vorausgewählt • Hinweis auf fehlende Funktionen • Instruktion die Diashow zu bearbeiten 68

Test des Prototypen Aufgaben • Bildbearbeitung • Bearbeitungsmodus aktivieren •
Bearbeitungsart auswählen (Filter) • Filter ändern • Bestätigen/ Abbrechen • Reihenfolge der Bilder Verändern  Nachfragen bzw. Hinweise geben wenn nötig 69

Puzzleaufgabe • Hintergrund und Icons aus der App, sowie weitere
Icons zur Verfügung gestellt • Möglichkeit mit Stiften Ideen zu ergänzen • „Baue die App nun wie ein Puzzle frei nach deinen Vorstellungen auf!“ 74

Datenaufzeichnung • Audioaufnahme • Protokollierung der Antworten pro Icon und
Funktion (Skala: Gefunden – Mit Hilfe gefunden – Nicht gefunden) • Protokollierung der Richtigkeit der Interpretation • Protokollierung weiterer Aussagen: • Antworten auf weiterführende Fragen • Generelle Anmerkungen • Anmerkungen zur Puzzleaufgabe • Daten aus dem Fragebogen 77

Kritik • Nur weibliche Probanden • Auch Probanden, die nicht
zur Zielgruppe gehören • Keine inferenzstatistische Interpretation möglich • Lerneffekte beim Prototypen • Testung der Android-Version 78

Schritt 3 – Ergebnisse

App – Buttons (Verständnis) Bedeutung klar Bedeutung unklar Bedeutung nach
Hinweis klar VP Shake it! Musikauswahl Like it? Love it! 1 2 3 4 5 80

App – Buttons (Verständnis) VP Shake it! Musikauswahl Like it?
Love it! 1 2 3 4 5 Bedeutung klar Bedeutung unklar Bedeutung nach Hinweis klar 81

App – Funktionen VP Shuffle Ausschnitt bewegen Zoom Drehen Musik-
auswahl Musik Zoom Rendern Synchro- nität 1 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Bilder Musik 82

auswahl Musik Zoom Rendern Synchro- nität 1 XXXXXXXX 2 XXXXXXXX 3 XXXXXXXX 4 XXXXXXXX 5 XXXXXXXX XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert 83

App – Shuffle („ Shake it!“) (Aussagen)  Ratlos, was
passiert  Shake Funktion für Navigation?  Gefahr, dass Shake Bearbeitungen löscht  Als ärgerlich empfunden, da Resultat unklar 84 + –

auswahl Musik Zoom Rendern Synchro- nität 1 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Bildbearbeitung 85

auswahl Musik Zoom Rendern Synchro- nität 1 2 XXXXXXXX 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Bildbearbeitung 86

App – Bildbearbeitung (Aussagen)  Bearbeitung erwünscht („cool, wenn man
es findet“)  Bearbeitung intuitiv (Zoom, Drehen)  Unsicherheit bzgl. Speicherns der Änderungen  Unschöner schwarzer Hintergrund  Abrupte Bildübergänge 87 + –

auswahl Musik Zoom Rendern Synchro- nität 1 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Musik 88

auswahl Musik Zoom Rendern Synchro- nität 1 XXXXXXXX XXXXXXXX 2 XXXXXXXX 3 4 XXXXXXXX 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Musik 89

App – Musikbearbeitung (Aussagen)  Orientierung bzgl. Liedposition  „Bilder
an meine Lieblingsstelle packen“  Nicht intuitiv zu erkennen  „Fühle mich aufgeschmissen und dumm […] würde die App schon jetzt verwerfen“  Zu ungenau, da keine Zeitangabe 90 + –

auswahl Musik Zoom Rendern Synchro- nität 1 XXXXXXXX XXXXXXXX XXXXXXXX 2 XXXXXXXX XXXXXXXX XXXXXXXX 3 XXXXXXXX 4 XXXXXXXX XXXXXXXX 5 XXXXXXXX XXXXXXXX XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert Bilder Musik  Intuitive Interaktion? 91

QUESI - Fragebogen zur intuitiven Interaktion 14 Items, Likert-skaliert: 1
(trifft gar nicht zu) – 5 (trifft völlig zu) 5 Subskalen: • Wahrgenommene Kognitive Beanspruchung z. B. „Es gelang mir das System ohne Nachdenken zu benutzen.“ • Wahrgenommene Zielerreichung z. B. „Ich habe erreicht, was ich mit dem System erreichen wollte.“ • Wahrgenommener Lernaufwand z. B. „Mir war sofort klar, wie das System funktioniert.“ • Vertrautheit bzw. Vorwissen z. B. „Der Umgang mit dem System erschien mir vertraut.“ • Wahrgenommene Fehlerrate z. B. „Die Benutzung des Systems verlief reibungslos.“ 92

QUESI - Fragebogen zur intuitiven Interaktion 1 2 3 4
5 Gesamt Fehlerrate Vertrautheit/Vorwissen Lernaufwand Zielerreichung Kognitive Beanspruchung App Prototyp 93 1 2 3 4 5 Gesamt Fehlerrate Vertrautheit/Vorwissen Lernaufwand Zielerreichung Kognitive Beanspruchung App Prototyp

Abschließende Fragen (App) Was war einfach? • Bildbearbeitung (drehen/zoomen/bewegen) Was
war erfreulich? • Minimalistisches Design Was war schwierig? • Keinerlei Hinweise gegeben Was fehlt? • Filtereffekte • Bildreihenfolge & -dauer verändern, Bildübergänge • Zeitangabe für Song Was war ärgerlich? • Shake Button, da Funktion unklar 94  2/5 würden die App weiterempfehlen

Prototyp 95

Prototyp – Buttons (Verständnis) Bedeutung klar Bedeutung unklar Bedeutung nach
Hinweis klar VP Thumb- nail Filter Rahmen Smiley Abbruch OK 1 2 3 4 5 96

Prototyp – Buttons (Verständnis) Bedeutung klar Bedeutung unklar Bedeutung nach
Hinweis klar VP Thumb- nail Filter Rahmen Smiley Abbruch OK 1 2 3 4 5 97

Prototyp – Funktionen VP Bildreihenfolge ändern Bearbeitungs- modus aktivieren Bearbeitungsart
auswählen Filter swipen Abbrechen Bestätigen 1 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert 98

Prototyp – Bilderreihenfolge ändern  Freude über zusätzliche Bearbeitungsmöglichkeit 
Leichte, Intuitive Bedienung  Sinnvolle Platzierung 100  Zunächst als reine Bildauswahl/Anzeigenlänge interpretiert + –

Prototyp – Bearbeitungsfilter  Große Freude über zusätzliche (gewohnte) Bearbeitungsmöglichkeit
102  Oben-unten swipen nicht intuitiv, eher links-rechts  Pfeile auf Bild als Hinweis  Effektvorschau in Liste unter Bild  Keine Filter-Effektvorschau + –

auswählen Filter swipen Abbrechen Bestätigen 1 XXXXXXXX 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert 103

auswählen Filter swipen Abbrechen Bestätigen 1 XXXXXXXX 2 3 4 5 XXXXXXXX Gefunden Nicht gefunden Mit Hilfe gefunden Falsch interpretiert  Intuitive Interaktion? 104

QUESI - Fragebogen zur intuitiven Interaktion 1 2 3 4
5 Gesamt Fehlerrate Vertrautheit/Vorwissen Lernaufwand Zielerreichung Kognitive Beanspruchung App Prototyp 105 1 2 3 4 5 Gesamt Fehlerrate Vertrautheit/Vorwissen Lernaufwand Zielerreichung Kognitive Beanspruchung App Prototyp

Abschließende Fragen/Zusammenfassung Was war einfach? • Bildreihenfolge ändern („sehr gut“)
• Bildauswahl- & bearbeitung • Einsatz vertrauter Buttons/Funktionen Was war schwierig? • Filter durchswipen • Darbietungsdauer der Bilder ändern Was fehlt? • Textfunktion • Zeitangabe Musik • Bildübergänge bearbeiten Was war ärgerlich? • Swipen von oben nach unten (anstatt links-rechts) • Zu tauschendes Bild wich zu spät 106  5/5 würden die App weiterempfehlen (zuvor 2/5)

Puzzle 107

Handlungsempfehlungen Tutorial/How-to ergänzen  Gruppe Tutorial  Überarbeitung der Beschriftung
• „Shake it!“  „Randomize/Shuffle“ Bearbeitungsmöglichkeiten ergänzen • Filter, Rahmen, Smiley, Text • Bilderreihenfolge 108

Weitere Anregungen Bildbearbeitung • Darbietungsdauer der Bilder ändern • Effekte
der Filter als Vorschau in Leiste unter Bild • Anpassung Bildübergänge ermöglichen • Schwarzen Hintergrund vermeiden  Snap-Funktion für Bilder  Hintergrundfarbe/ Farbmuster anpassbar • Projekt (zwischen)speichern Zusammenhang Bilder-Musik • Stärker hervorheben (Tutorial?) • Zeitangabe für Musik inkl. grafischer Darstellung • Lautlos-Funktion • Beat stärker hervorheben durch z. B. pulsierende Wave-Form 109

Fragen? 110

Vielen Dank für die Aufmerksamkeit! 111

Quellen • Hurtienne, J., & Naumann, A. (2010). QUESI—A questionnaire
for measuring the subjective consequences of intuitive use. Interdisciplinary College, 536. • Moser, C. (2012). User Experience Design: mit erlebniszentrierter Softwareentwicklung zu Produkten, die begeistern. Springer-Verlag. • Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp. 249-256). New York: ACM. • Nielsen, J. (1995). 10 Usability Heuristics for User Interface Design. Verfügbar unter http://www.nngroup.com/articles/ten-usability-heuristics/ [05.06.2016]. • Nielsen, J. (2000). Why you only need to test with 5 Users. Zugriff am 30.03.2014 unter http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/ • Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. New York: Basic books. • Broschüre “Lautes Denken”, Projekt UseTree • Hurtienne, Jörn and Naumann, Anja (2010). QUESI - A questionnaire for measuring the subjective consequences of intuitive use. Interdisciplinary College 2010. Focus Theme: Play, Act and Learn. Sankt Augustin: Fraunhofer Gesellschaft, 539. 112

Beatsnap Usability A-Test

Beatsnap Usability A-Test

More Decks by jettebeisser

Featured

Transcript