Schulung zu Usability und UX bei der msg systems AG in Wolfsburg. Wir haben unter anderem gelernt, dass man mit sehr einfachen Mitteln wie einem Papierprototypen in einem Usability Test sehr wertvolle Erkenntnisse sammeln kann.
Inhalt:
- Nutzen zentrierte IT-Beratung
- Begrifflichkeit
- ROI
- Grundlagen
- 4 Usability-Strategien
- Übung
8. DefiniKon
gem.
Wiki
Usability
is
the
ease
of
use
and
learnability
of
a
human-‐made
object.
Begrifflichkeit
Gebrauchstauglichkeit
(engl.
Usability)
bezeichnet
nach
DIN
EN
ISO
9241
Teil
11
das
Ausmaß,
in
dem
ein
Produkt,
System
oder
ein
Dienst
durch
besKmmte
Benutzer
in
einem
besKmmten
Anwendungskontext
genutzt
werden
kann,
um
besKmmte
Ziele
effekKv,
effizient
und
zufriedenstellend
zu
erreichen
8
9. DefiniKon
–
nicht
Wiki
Usability
ist
die
Kunst
des
Weglassens.
Begrifflichkeit
Weniger
ist
mehr.
Nix
ist
zu
wenig.
9
10. €
551.
Nun
kommen
Zahlen...
Keine
Panik!
000,-‐
180
*
200
8
*
20%
Return
On
Investment
Usability muss sich lohnen...
RETURN
ON
INVESTMENT
10
11. OpKmierungspotenziale
§ Usability-Aktivitäten müssen sich ökonomisch tragen.
§ Der ROI-Analyzer schlüsselt verschiedene Bereiche auf:
§ Entwicklungskosten
Return
On
Investment
§ Schulung
§ Produktivität
§ User Help Desk
11
12. Return
On
Investment:
Beispiel
§ Beispielunternehmen:
§ 200 Sachbearbeiter
§ Personalkosten von € 400,- pro Sachbearbeiter
§ 180 Arbeitstage pro Jahr
Return
On
Investment
§ Eine Entwicklung pro Jahr
§ 1000 Tage pro Entwicklung
§ Optimierungsansätze:
§ Senkung der Entwicklungskosten um 10%
§ Reduzierung der Schulung um 20%
§ Produktivitätssteigerung um 2%
12
13. Entwicklungskosten
senken
1
§ Je früher Fehler erkannt werden, desto einfacher lassen
sie sich beheben.
Return
On
Investment
13
14. Entwicklungskosten
senken
2
§ Fehlerkosten
sinken
dadurch
von
€
2.160,-‐
auf
€
333,-‐
Return
On
Investment
14
= €168.345,-
15. Schulungsaufwand
reduzieren
✗
Montag
Dienstag
Mipwoch
Donnerstag
Freitag
1
2
3
4
5
Return
On
Investment
20% sind sehr realistisch.
è Einsparungen von
15
= 80.000,-
16. ProdukKvität
pro
Tag
OpKmierung
von
2%
=
6
Sec
1
GeschäVsvorfall
von
5
Minuten
Return
On
Investment
€ 8,- /
Montag
MA / Tag
1
16
17. ProdukKvität
gesamt
* =
Return
On
Investment
€
8,-‐
/
Tag
180
Tage
€
1.440,-‐
pro
Jahr
* = 2012
17
€
1.440,-‐
200
MA
€ 288.000,-
18. ROI-‐Potenzial
gesamt
Schulung
80.000,-‐
ProdukKvität
User
Help
288.000,-‐
Return
On
Investment
Desk
15.000,-‐
Entwicklungskosten
168.000,-‐
= 551.000,- 18
20. InformaKonshierarchie
§ Informationen werden in Gruppen geordnet
§ Maximal 7 Informationen gleichzeitig anbieten
§ Die Beziehung zwischen Informationen erleichtert die
Grundlagen
-‐
InformaKonshierarchie
Erinnerung
§ Räumlich
§ Logisch
§ Visuell
20
21. InformaKonshierarchie
§ Hierarchische Strukturen (Bäume) helfen bei der
Informationskategorisierung
§ Aber: Eine Information kann nur in einem Ast
angeordnet sein!
Grundlagen
-‐
InformaKonshierarchie
§ Daher: Auszeichnungen (Tags) ermöglichen mehrfache
Zugehörigkeiten
§ Die Hierarchie muss dem mentalen Model der Nutzer
entsprechen. Nicht der Firmenorganisation!
§ Probieren Sie Card Sorting
21
22. Hierarchien
nicht
übertreiben
§ Maximal 3 Ebenen verwenden
Grundlagen
-‐
InformaKonshierarchie
22
Suchen
Sie
mal
nach
dem
Europäischen
Sozialfond
(ESF):
hpp://www.mw.niedersachsen.de/portal/live.php?navigaKon_id=5452&_psmand=18
24. Oder
finden!
Ich
find‘
§ Die einfache Suche ist
Grundlagen
-‐
Suche
immer
mein
einfach!
Korn.
§ Deshalb wird sie zu
98% verwendet
§ Kein logischer
Schnickschnack
24
25. Trefferliste
§ Nach Relevanz sortieren (Inhaltlich, Datum...)
§ Der Nutzer berücksichtigt max. die ersten 10 Treffer
§ Verwendete Suchkriterien anzeigen
§ Möglichkeit zur Änderung der Suchkriterien anbieten
Grundlagen
-‐
Suche
§ Treffer als aussagekräftige Synopse anzeigen
§ Im Treffer einen Link zu ihm anbieten
§ Trefferanzahl anzeigen
Listen mit 400 Treffern sind sinnlos! 25
Die können Sie sich aus dem Kopf
schlagen.
29. FunkKonsbereiche
§ Wichtig für die
Orientierung
§ Gleiches ist immer am
gleichen Platz
Grundlagen
-‐
Screendesign
§ Ein Funktionsbereich
kann verschiedene Objektsicht
Funktionen in
verschiedenen Kontexten Contai
einnehmen ner-‐
Sicht
§ Ein Funktionsbereich Detailsicht
bietet pro Kontext aber
nur eine Funktion 29
34. Kontext
Anzeige
vs.
Bearbeiten
Anzeige
Bearbeiten
Liste
der
Ordner
Liste
der
Ordner,
Grundlagen
-‐
Screendesign
Container-‐Sicht
Highlight
des
bearbeiteten
Objekts
Inhalte
des
aktuellen
KontextsensiKve
Objektsicht
Ordners
Katalogunterstützung
Übersicht
des
selekKerten
Eingabemaske
des
Detailsicht
Objekts
bearbeiteten
Objekts
Nicht
durch
deak-vierte
Eingabefelder!
34
35. Radio
Bupons
Checkboxes
§ Keine,
eine
oder
mehrere
OpKonen
wählbar
Grundlagen
-‐
Screendesign
Radio
BuYons
§ Nur
eine
OpKon
wählbar
35
36. Problem
Radio
Bupon
Keine
1
andere
Keine
1
OpKon
Vorbe-‐ OpKon
OpKon
gewählt
legung
gewählt
passt
Grundlagen
-‐
Screendesign
36
37. Grundlagen
-‐
Screendesign
37
Lesen
Sie
mehr
unter:
hpp://www.lohmy.de/2010/03/18/tabpages-‐haufig-‐falsch-‐eingesetzt/
38. Richtlinien
zum
Screendesign
§ Klare vertikale Ausrichtung der Elemente
§ Logische Einheiten räumlich zusammenfassen
§ Leerraum zur Gliederung verwenden
§ Einheitliche Benennung der Elemente
Grundlagen
-‐
Screendesign
§ Sprechen Sie die Sprache des Nutzers
§ Farbe vorsichtig einsetzen
§ Weniger ist mehr
38
39. InformaKon
einfach
strukturieren
ROI:
Das
Wie
der
Nutzer
rechnet
sich!
denken
Es
könnte
alles
so
einfach
sein...
Grundlagen
Klare
Weniger
ist
Ausrichtung
mehr
39
Bernd
Lohmeyer
+49
176
10
40
89
60
Gerhart-‐Hauptmann-‐Str.
101
lohmeyer@lohmy.de
22880
Wedel
www.lohmy.de
40. 4
Usability
Strategien
User Stories
Wireframes
Storyboards
Paper Prototyping
4
USABILITY-‐STRATEGIEN
40
42. User
Stories
§ In der Usability-Szene setzt man mehr auf User Stories
§ Rolle
§ Funktion
§ Zweck
4
Usability
Strategien
–
User
Stories
§ Man sammelt sie bspw. auf Karteikarten oder Post-Its
§ „Als <Rolle> möchte ich <Funktion>, um <Zweck>.“
Als Koch mö
ch
ch ein in der Mikro te ich Essen
möchte i m es Als Leser möchte ich welle
Als Koch nehmen, u Gerichte verschiedener zubereiten,
uf um die Koch
Rezept a er kochen zu regionaler Küchen finden, zu verkürze zeit
ied
✓
n.
später w um einen landestypischen
können.
✗
Abend zu gestalten.
✓
42
43. Mampf.de
–
User
Stories
§ Mampf.de ist Ihr Online-Kochbuch
§ Sammeln Sie User Stories
2 Gruppen „Autor“, 2 Gruppen „Leser“
§ Nutzen Sie dafür Moderationskarten
4
Usability
Strategien
–
User
Stories
10
Minu
ten
43
44. Wireframes
§ Bleistiftskizzen, die den Screenaufbau zeigen
§ Der Fokus liegt dabei auf dem Inhalt – nicht der
Schönheit
4
Usability
Strategien
-‐
Wireframes
§ Sie sind schnell gemacht
§ Und viel wichtiger: Sie sind schnell weggeworfen!
44
45. Storyboards
§ Erzählen die Geschichte, wie
der Use Case in der geplanten
Lösung abläuft
4
Usability
Strategien
-‐
Storyboards
§ Sind die konkrete Umsetzung
des Use Cases
§ Eine Kombination aus Text
und Skizzen
45
46. Viel
T
ext,
w
enige
Scrib
bles
4
Usability
Strategien
-‐
Storyboards
46
47. Mehr
Scr
ibbles
als
Text
§ So
entwickle
ich
Storyboards
§ Einfach
§ Schnell
§ Billig
3
Usability
Strategien
-‐
Storyboards
47
48. Mampf.de
–
Der
Entwurf
§ Nehmen Sie Ihre User Stories als Grundlage
§ Entwerfen Sie eine Software-Lösung
§ Wireframes
4
Usability
Strategien
–
Entwurf
§ Skizzieren Sie die drei wichtigsten Dialoge auf jeweilseinem
DIN-A4-Blatt
§ Storyboard
§ Werden Sie sich über die Abfolge klar
§ Skizzieren Sie die Dialoge ggf. nur schematisch
§ Wenig Text - nur so viel wie nötig
30
Minu
ten
48
49. Paper
Prototyping
§ Paper Prototypen sind die
einfachste Form des Usability
Tests
4
Usability
Strategien
–
Paper
Prototyping
§ Die Wireframes dienen als
Grundlage. Sie sind unser
Computer
§ Sie brauchen
§ 1 Moderator
§ 1 Kollegen als Computer
§ 1 Testteilnehmer
49
53. Mampf.de
–
Der
Test
§ Wir wollen nun den Entwurf eines Teams testen
§ Der Testteilnehmer (User) muss aus einem anderen
Team kommen
4
Usability
Strategien
–
Paper
Prototyping
§ Viel Spaß!
30
Minu
ten
53