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

1. Bernd
Lohmeyer
Nutzen
zentrierte
IT-­‐Beratung
EINFACHMACHER
Ein
Tag
Usability

2. Agenda
§ Nutzen zentrierte IT-Beratung (ganz kurz)
§ Begrifflichkeit
§ Usability und der ROI
§ Grundlagen
Fußzeile
§ 4 Usability-Strategien
§ Übung
2

3. Nutzen
und
Nutzbarkeit
Erfolg
Gutes
Produkt
Nutzen
zentrierte
IT-­‐Beratung
Projektverlauf
Design
Nutzen
Nutzbarkeit
Analyse
Fachliche
Anforderungen
Menschliche
Faktoren
3

4. Phasen
übergreifend
Analyse
Design
Entwicklung
Nutzen
zentrierte
IT-­‐Beratung
Nutzen
zentrierte
IT-­‐Beratung
§ Abstrakt denken, konkret formulieren
§ Komplexe Zusammenhänge einfach
visualisieren
§ Phasen übergreifend
beraten
§ Wissen nahtlos vermitteln Nutzen
und
Nutzer
4
fest
im
Blick!

5. Und
das
leistet
die
Nutzen
zentrierte
IT-­‐
Beratung:
Ergebnisse
!
IniKalisierung
Analyse
Design
Entwicklung
• Ziele
• Anforderungen
• Wireframes
• Coaching
• Abgrenzung
• Domain
Class
• Screendesign
• Validierung
• Risikioanalyse
Model
• Styleguide
• Detail-­‐
• Stake
Holder
• GeschäVsprozesse
• Storyboards
Verfeinerung
• Use
Cases
• Prototypen
5
5

6. And
now
to
something
completely
different...
Begrifflichkeit
Was versteht man eigentlich unter Usability?
BEGRIFFLICHKEIT
6

7. Use
+
Ability
=
Usability
Begrifflichkeit
7

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

19. Grundlagen
Informationshierarchie
Suche
User Interaction
Screendesign
GRUNDLAGEN
19

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

23. Der
DirekteinsKeg:
Suchen...
Bin
nur
ich
so
Grundlagen
-­‐
Suche
dumm?
23

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.

26. Vieles
ist
möglich...
Grundlagen
-­‐
User
InteracKon
26

27. Aber
nicht
alles
ist
sinnvoll
Grundlagen
-­‐
User
InteracKon
PC
✓
✓
✓
✓
¢
¢
¢
¢
¢
TV
¢
✓
¢
✓
¢
✗
✓
¢
✓
Tablet
¢
✓
✓
✗
¢
✓
¢
¢
✗
Phone
¢
✓
¢
✗
✓
✓
¢
¢
✗
27
✓
Gut
geeignet
¢
Bedingt
sinnvoll
✗
Ungeeignet

28. Ein
Screen
sollte...
§ Navigations- Navigationsleiste,
möglichkeiten Links
anbieten
§ Orientierung geben Breadcrumb,
Grundlagen
-­‐
Screendesign
Pfad, Highlight
§ Daten anzeigen z.B. HTML-
§ Dateneingabe Ausgabe
ermöglichen Eingabefelder
28

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

30. Objektsicht
Grundlagen
-­‐
Screendesign
Container-­‐Sicht
Detailsicht
30

31. Objektsicht
Grundlagen
-­‐
Screendesign
Container-­‐Sicht
Detailsicht
31

32. Grundlagen
-­‐
Screendesign
32

33. Grundlagen
-­‐
Screendesign
33

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

41. Anforderungen
§ Atomar
§ Eindeutig
§ Messbar
4
Usability
Strategien
–
User
Stories
§ Widerspruchsfrei
§ Positiv formuliert
Anf
009
–
Benutzerrollen
Das
System
Mampf.de
unterstützt
folgende
Benutzerrollen:
• Autor
• Leser
Quelle:
Workshop
17.02.2012
Status:
Angenommen
41
Tags:
Benutzerverwaltung,
Rolle,
AdministraKon

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

50. Dialogsteuerung
;-­‐)
50

51. System
is
busy...
51

52. ...
layer3
set
visibility
=
true
;-­‐))
52

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

54. 54

55. Fußzeile
55

56. Fußzeile
56

57. Wireframes
User
Stories
Storyboards
Usability
Strategien
Kontakt
Paper
Protyping
Spaß
haben!!!
57
Bernd
Lohmeyer
+49
176
10
40
89
60
Gerhart-­‐Hauptmann-­‐Str.
101
lohmeyer@lohmy.de
22880
Wedel
www.lohmy.de