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