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
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
• Sichtbarkeit des Systemstatus • Passung zwischen System und echter Welt • Kontrolle durch den, sowie Freiheit des Nutzers • Konsistenz und Standards • Fehlervermeidung 6
• 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
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
Problemfelder nach Gruppen Welchen Problemen kann mit einem Tutorial begegnet werden? Welche Probleme können auf dem Hauptbildschirm zu Diashowbearbeitung angegangen werden? 18
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
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
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
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
Erscheinen Mit Click auf Bild, ersetzen „Shake-Button“ Schlichtheit • Aktivierung eines „Bearbeitungsmodus“: Musik stoppt • Sind anwählbar • Funktionen wie Filter und Rahmen 29
der beiden neuen Funktionen • Bild-Zuordnung • Weitere Bearbeitungsoptionen • Festlegung eines grundlegenden Aufbaus • Umsetzung in einen klickbaren Prototypen in Axure RP Pro 7.0 32
Shake..) • Nicht alle angedeuteten Funktionen implementiert • Nur die Bearbeitung eines Bildes möglich • Keine Musikwiedergabe Eingeschränkte Fidelity Wichtige Interaktionen dennoch testbar 46
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
dem Smartphone aufgenommen • Das einfache Teilen ist zu langweilig • Bilder in einer Diashow zusammenfassen und rhythmisch passend mit Musik unterlegen App Beatsnap 55
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
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
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
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
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 + –
(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
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
102 Oben-unten swipen nicht intuitiv, eher links-rechts Pfeile auf Bild als Hinweis Effektvorschau in Liste unter Bild Keine Filter-Effektvorschau + –
• 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)
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
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
jettebeisser
axbom
cassininazir
jnunemaker
.png){kind=avatar}
helenjbeal
frankvandijk
lara
mraible
speakerdeck
marcduiker
tonyrice
khoart
marktimemedia
