Evaluation and Usability
Produzent:
Angelina Barkschat & Eva Kç«Żhn
Betreuung:
Prof. Frank Jacob, Dipl. Des. Jens Ewald & Dr. Nicole Busch Muthesius Kunsthochschule | WS 2014/15
Library 04 - 57 Expertenreview 58 - 77 Usability Test 78 - 109 Evaluation and Usability
Evaluation and Usability
Expertenreview Angelina Barkschat und Eva Kç«Żhn Interface Design Diving into UX/UI WS 2014/15
Expertenreview
Darstellung und Bewertung
sehr gut gut ausreichend mangelhaft
6
Installation
Homepage
Software
Expertenreview
Homepage
Selbstbeschreibungsfähigkeit Übersichtliches und zurückhaltendes Layout
Erwartungskonformität Inhalte an gewohnter Stelle
8
Expertenreview
Installation unter OSX
Erwartungskonformit채t Download wie gewohnt Programmausf체hrung ohne Installation
Steuerbarkeit automatischer Download aller relevanten Daten
10
Expertenreview
Installation unter Windows Steuerbarkeit lange Installationszeit (15 Minuten) .exe-Datei l채dt Installationsinhalte aus Internet Auswahl: Herunterladen und sp채ter installieren
12
Expertenreview
Software Gestaltung gleicht der Homepage Erwartungskonformität Navigation bekannt
erwartete Bearbeitungsfunktionen fehlen Kundenservice mit Telefonnummer und Ä‚–ffnungszeiten sofort ersichtlich
14
Expertenreview
Software 2 Wege die Fotobuchgestaltung zu starten: Navigationsleiste, oranger Button Selbstbeschreibungsf채higkeit orangener Button auf Startseite leitet den User ungenau (Menu der Formate nicht sofort offensichtlich) Navigationsleiste leitet User genauer
16
Expertenreview
Software Auswahl zur Art der Erstellung Steuerbarkeit Schritt zurück nicht möglich
Fehlertoleranz Format nicht änderbar
Selbstbeschreibungsfähigkeit Auswahlmöglichkeiten
18
Expertenreview
Software Navigation durch „Vorschlag gestalten“ Fehlertoleranz
minimale Seitenzahl: 26
„Zurück“ nicht möglich
zu „ohne Assistenten gestalten“ wechseln
Selbstbeschreibungsfähigkeit
Erwartungskonformität
Ăśbersicht, wie viele Bilder, Seiten, etc
externe Speichermedien erfordern Pro-
Fotowahl in Seitenleiste
grammneustart
Steuerbarkeit automatischer Zugriff auf Systemordner „Bilder“ (Programm steuert User)
20
Expertenreview
Software Navigation durch „Vorschlag gestalten“ Steuerbarkeit Auswahl der Bilder
Erwartungskonformität Mehrfachauswahl mit Shortcut und Maus
Selbstbeschreibungsfähigkeit
wie gewohnt
Icons zur Auswahl der Bilder Anzeige der Seitenzahl
hohe Aufgabenangemessenheit
Anzahl der ausgewählten Fotos
„zurück“-Button inaktiv - es gibt kein
„weiter“-Button wird aktiv, sobald
ZurĂĽck
Bilder ausgewählt
22
Expertenreview
Software Navigation durch „Vorschlag gestalten“ Selbstbeschreibungsfähigkeit Auswahlmöglichkeit der Bilderanordnung
Erwartungskonformität Auswahl ist größer als erwartet
Fehlertoleranz Möglichkeit einen Schritt zurück
24
Expertenreview
Software Navigation durch „Vorschlag gestalten“ Selbstbeschreibungsfähigkeit Anzeige der möglichen Bindungen
26
Expertenreview
Software Gestaltung des Fotobuchs Erwartungskonformität
Fehlertoleranz
Ăśbersichtlichkeit des Interfaces
Einband, Seitenzahl, Größe, Papier
Tool Leiste ist an erwarteter Stelle
änderbar
groĂźe Ansicht der aktiven Seite
Ăśbersicht durch Thumbnails
Preis ist dargestellt
Steuerbarkeit Überblick über Fotos im ausgewählten Ordner
28
Expertenreview
Software Gestaltung des Fotobuchs Erwartungskonformität Taskleiste bei Windows nicht vorhanden Taskleiste bei OSX bietet gleiche Handlungsmöglichkeiten wie die von PIXUM angebotene Taskleiste
Aufgabenangemessenheit Darstellung Shortcuts fĂĽr OSX im Programm fehlerhaft
30
Expertenreview
Software Gestaltung des Fotobuchs Individualisierbarkeit Bedienoberfl채che ist an Bed체rfnisse des Anwenders anpassbar Seitenleiste mit Ordnerinhalt in Breite ver채nderbar
32
Expertenreview
Software Austausch von Bildern Erwartungskonformit채t Austaus von Bildern intuitiv
Selbstbeschreibungsf채higkeit Feedback, wenn man Bild austauscht
34
Expertenreview
Software Bilderreihenfolge Erwartungskonformit채t Bilder nicht chronologisch eingef체gt
Steuerbarkeit Anschnitt der Bilder frei w채hlbar
36
Expertenreview
Software Icons Selbstbeschreibungsf채higkeit Icons Mouse-Over Texte sind zu lang
38
Expertenreview
Software Icons geringe Selbstbeschreibungsf채higkeit Icons
40
Expertenreview
Software Vergrößerung von Bildern Selbstbeschreibungsfähigkeit kein Feedback zu Fehlersymbol kein erkennbarer Zusammenhang zum Icon in der Taskleiste Smileys
Fehlertoleranz User kann über Qualität des Fotos entscheiden
42
Expertenreview
Software Fotobearbeitung Aufgabenangemessenheit groĂ&#x;e Auswahl an Fotobearbeitung
- Filter
- Einfärbung
44
Expertenreview
Software Anwendung der Filter Erwartungskonformität (Aufgabenangemessenheit) Unterschied in Ergebnis des Filters „Sprüheffekt“
46
Expertenreview
Software Gestaltung des Fotobuchs Selbstbeschreibungsf채higkeit Hinweisfenster hat keine eindeutige Aussage viel Lesarbeit
48
Expertenreview
Software Verschieben von Fotos Fehlertoleranz keine R체ckg채ngig im Dialogfeld
Aufgabenangemessenheit Magnetsymbol arbeitet sehr ungenau
Selbstbeschreibungsf채higkeit kein Hinweis, dass Magnetsymbol aktiv Warnhinweise beim Verschieben von Bildern ohne Aussage 체ber Mindestabstand sein muss.
50
Expertenreview
Software Hilfe LernfÜrderlichkeit Erwartungskonformität User muss ausgiebig nach Hilfe suchen
52
Expertenreview
Software Text einf체gen Aufgabenangemessenheit Programm greift auf Systemschriften zu Standardfarben und gesamtes Farbspektrum
Erwartungskonformit채t Pipettenwerkzeug zeigt RGB-Werte an
Fehlertoleranz Rechtschreibkorrektur in deutsch und englisch
54
Expertenreview
Fazit
Das Programm weist Fehler auf - Objekte (Fotos, Textfelder,...) ließen sich manchmal nicht löschen
UngenĂĽgende Selbstbeschreibung - wichtige Informationen muss man
56
- Tutorials sind auf Homepage zur Verfügung gestellt und sind sehr zeitaufwändig (ca. 45 Min pro Tutorial)
Verborgene Icons - I cons werden (trotz viel Freiraum) nicht in der Symbolleiste angezeigt
suchen
Steuerbarkeit
- Lernbedarf des Programms ist sehr hoch
- Öffnen zweier Fotobücher nicht möglich
- Icons (z.B. intelligente Hiflslinien) sind bereits aktiv
Erwartungskonformität
- chronologische Reihenfolge der Bilder wird nicht
Steuerbarkeit
eingehalten
Aufgabenangemessenheit Selbstbeschreibungsfähigkeit
Bedienung
Fehlertoleranz
- teilweise intuitiv (z.B. scollen um Bildgröße zu
Individualisierbarkeit
verändern)
Lernförderlichkeit
Evaluation and Usability
Usability Test Angelina Barkschat und Eva Kç«Żhn Interface Design Diving into UX/UI WS 2014/15
Usability Test
Vorbereitung Ziel des Tests
Fällt die Ähnlichkeit der Icons mit den
oder mĂĽssen die User nach ge-
der Microsoft Office Icons auf? Ist die
wĂĽnschten Funktionen suchen?
Ă„hnlichkeit hilfreich?
Reichen die Mouse-Over-Texte als
Sind die Icons so selbstbeschreibend,
Hilfestellungen aus?
dass man mit ihnen einfach arbeiten kann? Sind sie so selbsterklärend, dass man sieht, was man alles machen kann,
60
Fazit der Expertenreview Erwartungskonformität Steuerbarkeit Aufgabenangemessenheit Selbstbeschreibungsfähigkeit Fehlertoleranz Individualisierbarkeit Lernförderlichkeit
Usability Test
Vor- und Nachbereitungen
Vor dem Test Beschreibe der Testperson folgendes •
WillkommenheiĂźen der Testperson
•
Klarstellung wichtiger Punkte:
•
fĂĽhrung:
•
> Testperson kann keine Fehler machen
PIXUM bearbeiten.
> Gedanken und Ideen laut aussprechen.
•
Beschreibung der Funktionen des Moderators und des Beobachters
62
> Die Aufgaben werden Schritt fĂĽr Schritt gestellt.
Erklären, was die Testperson beachten soll:
> Bearbeitung eines leicht vorkonfektioniertes Fotobuchs mit der Software von
> Nicht Testperson, sondern das System getestet wird
Beschreiben des Testaufbaus und der Durch-
> Moderator und Beobachter werden nicht helfen.
> Es ist okay, wenn die Aufgabe nicht gelöst werden kannt.
Angaben zur Testperson
Nach dem Test
•
Name
•
•
Geschlecht
•
Alter
•
Was hat sie besonders gestört?
•
Erfahrungen mit Fotografie, Foto-
•
Was haben sie nicht sofort verstanden?
bearbeitung, Office-Software und
•
Welche Bereiche unserer Software mĂĽs-
Grafiksoftware
Was hat der Testperson ĂĽberhaupt nicht/besonders gut gefallen?
sen Ihrer Meinung nach am dringendsten ĂĽberarbeitet werden?
Usability Test
Aufgaben Aufgabe 1 1 / Textbearbeitung und Bilder einfügen • • •
Wandle den Text auf Seite 2 in einen zwei-
Suche aus der Seitenleiste ein Seitenlay-
spalltigen Blocksatz um
out fĂĽr vier Fotos aus und wende es auf
Verändere die Schriftart, Schriftfarbe und
die Seite 3 so an, dass es auf alle rechten
Schriftgröße
Seiten angewandt wird
FĂĽge auf Seite 3 vier Bilder vom Meer aus der Seitenleiste ein
64
•
•
Verschiebe die Textfelder so, dass sie mit den Fotos oben bĂĽndig sind
Usability Test
Aufgaben Aufgabe 2 2 / Bildausschnitte und -auflösung •
Ziehe das Bild auf Seite 4 so groĂź, dass es ĂĽber die ganze Seite geht
•
auf Seite 5 sollen vier Bilder zu sehen sein, die jeweils ein Gesicht der Statuen auf dem linken Bild im Detail darstellen
•
Achte auf die Auflösung der Detaildarstellungen
66
Usability Test
Aufgaben Aufgabe 3 3 / Bildkorrekturen und -bearbeitung
•
•
FĂĽge eine Doppelseite nach Seite 1 ein
•
•
Füge das Bild mit dem Mädchen auf Seite
•
und Breite FĂĽge das Bild mit dem jungen Mann auf Seite 3 ein
2 ein
•
Lösche die überflüssigen Bildfelder
Lösche auf Seite 2 das überflüssige Bild-
•
Verwende das Bild des jungen Mannes als
feld •
FĂĽhre eine Rote-Augen-Korrektur durch
•
Drehe das Bild so, dass der Kopf des Mädchen ungefähr gerade ist
68
Füge einen Farbrand zu und ändere Farbe
Hintergrundbild •
FĂĽhre eine Korrektur von Helligkeit und Kontrast durch
Usability Test
Begleitzettel
70
Usability Test
Steckbriefe
Jutta Hansen 59 Jahre Soziologin
Fotografiert gern keine Erfahrung in Fotobucherstellungen Keine Erfahrung mit Paint viel Erfahrung mit MS Office
72
Stefan Koch
Pia Balfanz
31 Jahre
19 Jahre
wissenschaftlicher Mitarbeiter Latinistik
Studentin (Biologie und Anglistik)
keine Erfahrung mit Fotografie
geringe Erfahrungen mit Fotografie
keine Erfahrung mit Bildbearbeitung
geringe Fotobucherfahrungen
viel Erfahrung MS Office und Open Office
Erfahrungen mit MS Office geringe Painterfahrungen
Usability Test
Testaufnahmen
74
Usability Test
Fazit
76
Fällt die Ähnlichkeit der Icons mit den
Sind sie so selbsterklärend, dass man
der Microsoft Office Icons auf? Ist die
sieht, was man alles machen kann,
Ă„hnlichkeit hilfreich? JA
oder mĂĽssen die User nach ge-
Sind die Icons so selbstbeschreibend,
wĂĽnschten Funktionen suchen? NEIN
dass man mit ihnen einfach arbeiten
Reichen die Mouse-Over-Texte als
kann? NEIN
Hilfestellungen aus? TEILWEISE
Programmoberfläche
KontextmenĂĽ
Frames neu arrangieren
Inhalt
bessere Ăśbersicht ĂĽber die Funktionen
Sortierung des Inhalt
der Software
Fehlermeldungen Icons
exakter formulieren
Anordnung
Erwartungskonform
Größe Gestaltung
Evaluation and Usability
Angelina Barkschat und Eva Kç«Żhn Interface Design Diving into UX/UI WS 2014/15
Evaluation and Usability
Fazit Usability Test
Programmoberfläche
KontextmenĂĽ
Frames neu arrangieren
Inhalt
bessere Ăśbersicht ĂĽber die Funktionen der Software
Icons Anordnung Größe Gestaltung
80
Sortierung des Inhalt
Fehlermeldungen exakter formulieren Erwartungskonform
Evaluation and Usability
Redesign 1 Foto
82
Evaluation and Usability
Redesign 2 Startbildschirm
84
Foto
Layout
Fotos
Text
Hintergrund
Grafik
Effekte Bearbeiten
Drehen
Anordnen
Fotos suchen
Warenkorb
Größe und Qualität
40,67€
... / Pictures
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Fotos suchen
86
Foto
Layout
Text
Hintergrund
Fotos
Grafik
Effekte Bearbeiten
Drehen
Anordnen
Fotos suchen
Warenkorb
Größe und Qualität
40,67€
... / Pictures / 141109 Tag am Meer Schreibtisch Bilder Calpe 2014 Erinnerungen 2014 Friedrich Kiel 2014 Dokumente Downloads Filme Filme
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Fotos ausw채hlen
88
Foto
Layout
Text
Hintergrund
Fotos
Grafik
Effekte Bearbeiten
Drehen
Anordnen
Fotos suchen
Warenkorb
Größe und Qualität
40,67€
... / Pictures / 141109 Tag am Meer
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Layout
90
Foto Seitenlayout
Layout
Text
Hintergrund
Grafik
Effekte Layoutgenerierung
Anordnung
Ausrichtung
Seiten hinzufügen und löschen
Warenkorb 40,67€
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Layout
92
Foto
Layout
Text
Hintergrund
Grafik
Seitenlayout
1
Effekte Layoutgenerierung
Anordnung
Ausrichtung
Warenkorb
Seiten hinzufügen und löschen
10+ Fotos
40,67€
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Layout
94
Foto
Layout
Text
Hintergrund
Grafik
Seitenlayout
1
Effekte Layoutgenerierung
Anordnung
Ausrichtung
Warenkorb
Seiten hinzufügen und löschen
40,67€
10+ Fotos
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Text
96
Foto Schriftart
Layout
Text
Hintergrund
Grafik
Effekte Schrift
Schrift
Warenkorb
Ausrichtung
40,67â‚Ĺą
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Text
98
Foto Schriftart
Layout
Text
Hintergrund
Grafik
Effekte Schrift
Warenkorb
Ausrichtung
40,67â‚Ĺą
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Effekte
100
Foto Filter
Layout
Text
Hintergrund
Grafik
Effekte Spiegeln
Drehen
Skalieren und Zuschneiden
Warenkorb
Rote-Augen-Korrektur
40,67â‚Ĺą
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Redesign 2 Effekte
102
Foto
Layout
Filter
Text
Hintergrund
Grafik
Effekte Spiegeln
Drehen
Skalieren und Zuschneiden
Warenkorb
Rote-Augen-Korrektur
Farbanpassung
40,67â‚Ĺą
Standardfilter Kunstfilter
Verzerren
Seite 1
Seite 2 + 3
Seite 4 + 5
Seite 6 + 7
Evaluation and Usability
Usability Test des neuen Konzepts Papierprototyp
104
Evaluation and Usability
Usability Test des neuen Konzepts Layout Doppelseite einfç«Żgen Text bearbeiten Rote - Augen - Korrektur
106
Evaluation and Usability
Ergebnisse des Usabilty Tests
Positiv:
Fazit vom Tester:
- intuitiver Umgang
- einfachere Bedienung
-B efehle werden schnell gefunden, auch
- leichteres Finden der Icons
mithilfe der Unterteilung
Negativ: -d ie Bedienung der Anzahl der Bilder pro Seite im Seitenlayout
108
Vielen Dank fç«Żr eure Aufmerksamkeit