Bernd	  Lohmeyer	  Nutzen	  zentrierte	  IT-­‐Beratung	                                              EINFACHMACHEREin	  Ta...
Agenda	  §  Nutzen zentrierte IT-Beratung (ganz kurz)§  Begrifflichkeit§  Usability und der ROI§  Grundlagen          ...
Nutzen	  und	  Nutzbarkeit	                        Erfolg	                  Gutes	  Produkt	                              ...
Phasen	  übergreifend	           Analyse	                    Design	                Entwicklung	                          ...
Und	  das	  leistet	  die	  Nutzen	  zentrierte	  IT-­‐         Beratung:	  Ergebnisse	  !	  IniKalisierung	           Ana...
And	  now	  to	  something	  completely	  different...	                                                                   B...
Use	  +	  Ability	  =	  Usability	                                              Begrifflichkeit	                            ...
DefiniKon	  gem.	  Wiki	       Usability	  is	  the	  ease	  of	  use	  and	  learnability	  of	  a	       human-­‐made	  o...
DefiniKon	  –	  nicht	  Wiki	       Usability	  ist	  die	  Kunst	  des	  Weglassens.	                                     ...
€	  551. Nun	  kommen	  Zahlen...	  	  Keine	  Panik!	                       000,-­‐	          	   180	  *	  200	  8	  *  ...
OpKmierungspotenziale	  §  Usability-Aktivitäten müssen sich ökonomisch tragen.§  Der ROI-Analyzer schlüsselt verschiede...
Return	  On	  Investment:	  Beispiel	  §  Beispielunternehmen:  §    200 Sachbearbeiter  §    Personalkosten von € 400,...
Entwicklungskosten	  senken	  1	  §  Je früher Fehler erkannt werden, desto einfacher lassen    sie sich beheben.        ...
Entwicklungskosten	  senken	  2	  §  Fehlerkosten	  sinken	  dadurch	  von	  €	  2.160,-­‐	  auf	  €	  333,-­‐	          ...
Schulungsaufwand	  reduzieren	                                                              ✗	   Montag	     Dienstag	    ...
ProdukKvität	  pro	  Tag	                                                    OpKmierung	  von	  2%	  	                    ...
ProdukKvität	  gesamt	                                    *                         =                                     ...
ROI-­‐Potenzial	  gesamt	                                 Schulung	                                 80.000,-­‐	     Produk...
Grundlagen	  InformationshierarchieSucheUser InteractionScreendesignGRUNDLAGEN	             19	  
InformaKonshierarchie	  §  Informationen werden in Gruppen geordnet§  Maximal 7 Informationen gleichzeitig anbieten§  D...
InformaKonshierarchie	  §  Hierarchische Strukturen (Bäume) helfen bei der    Informationskategorisierung§  Aber: Eine I...
Hierarchien	  nicht	  übertreiben	  §  Maximal 3 Ebenen verwenden                                                        ...
Der	  DirekteinsKeg:	  Suchen...	      Bin	  nur	       ich	  so	                                           Grundlagen	  -...
Oder	  finden!	      Ich	  find‘	     §  Die einfache Suche ist                                                   Grundlage...
Trefferliste	  §  Nach Relevanz sortieren (Inhaltlich, Datum...)§  Der Nutzer berücksichtigt max. die ersten 10 Treffer§...
Vieles	  ist	  möglich...	           Grundlagen	  -­‐	  User	  InteracKon	  26	  
Aber	  nicht	  alles	  ist	  sinnvoll	                                                                                    ...
Ein	  Screen	  sollte...	  § Navigations-                    Navigationsleiste,   möglichkeiten                  Links   ...
FunkKonsbereiche	  §  Wichtig für die    Orientierung§  Gleiches ist immer am    gleichen Platz                         ...
Objektsicht	                                            Grundlagen	  -­‐	  Screendesign	  Container-­‐Sicht	              ...
Objektsicht	                                            Grundlagen	  -­‐	  Screendesign	  Container-­‐Sicht	              ...
Grundlagen	  -­‐	  Screendesign	  32	  
Grundlagen	  -­‐	  Screendesign	  33	  
Kontext	  Anzeige	  vs.	  Bearbeiten	                                          Anzeige	                      Bearbeiten	  ...
Radio	  Bupons	  Checkboxes	                        §  Keine,	  eine	  oder	  mehrere	  OpKonen	                         ...
Problem	  Radio	  Bupon	     Keine	                      1	  andere	     Keine	                 1	  OpKon	    Vorbe-­‐    ...
Grundlagen	  -­‐	  Screendesign	                                                                                   37	  Le...
Richtlinien	  zum	  Screendesign	  §  Klare vertikale Ausrichtung der Elemente§  Logische Einheiten räumlich zusammenfas...
InformaKon	                                        einfach	                                    strukturieren	    ROI:	  Da...
4	  Usability	  Strategien	  User StoriesWireframesStoryboardsPaper Prototyping4	  USABILITY-­‐STRATEGIEN	      40	  
Anforderungen	  §  Atomar§  Eindeutig§  Messbar                                                                        ...
User	  Stories	   §  In der Usability-Szene setzt man mehr auf User Stories     §  Rolle     §  Funktion     §  Zweck ...
Mampf.de	  –	  User	  Stories	  §  Mampf.de ist Ihr Online-Kochbuch  §  Sammeln Sie User Stories      2 Gruppen „Autor“,...
Wireframes	  §  Bleistiftskizzen, die den Screenaufbau zeigen§  Der Fokus liegt dabei auf dem Inhalt – nicht der    Schö...
Storyboards	  §  Erzählen die Geschichte, wie    der Use Case in der geplanten    Lösung abläuft                         ...
Viel	  T                          ext,	  w                                   enige                       Scrib            ...
Mehr	  Scr                                                           ibbles	  als                                         ...
Mampf.de	  –	  Der	  Entwurf	  §  Nehmen Sie Ihre User Stories als Grundlage§  Entwerfen Sie eine Software-Lösung§  Wir...
Paper	  Prototyping	  §  Paper Prototypen sind die    einfachste Form des Usability    Tests                             ...
Dialogsteuerung	  ;-­‐)	     50	  
System	  is	  busy...	     51	  
...	  layer3	  set	  visibility	  =	  true	  ;-­‐))	     52	  
Mampf.de	  –	  Der	  Test	  §  Wir wollen nun den Entwurf eines Teams testen§  Der Testteilnehmer (User) muss aus einem ...
54	  
Fußzeile	  55	  
Fußzeile	  56	  
Wireframes	  User	  Stories	                                                           Storyboards	                Usabili...
Nächste SlideShare
Wird geladen in …5
×

Usability-Schulung - msg systems ag - 2012 02 17

1.241 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.241
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Usability-Schulung - msg systems ag - 2012 02 17

  1. 1. Bernd  Lohmeyer  Nutzen  zentrierte  IT-­‐Beratung   EINFACHMACHEREin  Tag  Usability  
  2. 2. Agenda  §  Nutzen zentrierte IT-Beratung (ganz kurz)§  Begrifflichkeit§  Usability und der ROI§  Grundlagen Fußzeile  §  4 Usability-Strategien§  Übung 2  
  3. 3. Nutzen  und  Nutzbarkeit   Erfolg   Gutes  Produkt   Nutzen  zentrierte  IT-­‐Beratung  Projektverlauf   Design   Nutzen   Nutzbarkeit   Analyse   Fachliche   Anforderungen   Menschliche   Faktoren   3  
  4. 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. 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. 6. And  now  to  something  completely  different...   Begrifflichkeit  Was versteht man eigentlich unter Usability?BEGRIFFLICHKEIT   6  
  7. 7. Use  +  Ability  =  Usability   Begrifflichkeit   7  
  8. 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. 9. DefiniKon  –  nicht  Wiki   Usability  ist  die  Kunst  des  Weglassens.   Begrifflichkeit   Weniger  ist  mehr.   Nix  ist  zu  wenig.   9  
  10. 10. €  551. Nun  kommen  Zahlen...    Keine  Panik!   000,-­‐     180  *  200  8  * 20%   Return  On  Investment   Usability muss sich lohnen... RETURN  ON  INVESTMENT   10  
  11. 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. 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. 13. Entwicklungskosten  senken  1  §  Je früher Fehler erkannt werden, desto einfacher lassen sie sich beheben. Return  On  Investment   13  
  14. 14. Entwicklungskosten  senken  2  §  Fehlerkosten  sinken  dadurch  von  €  2.160,-­‐  auf  €  333,-­‐   Return  On  Investment   14  = €168.345,-
  15. 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. 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. 17. ProdukKvität  gesamt   * = Return  On  Investment   €  8,-­‐  /  Tag   180  Tage   €  1.440,-­‐  pro  Jahr   * = 2012   17   €  1.440,-­‐   200  MA   € 288.000,-
  18. 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. 19. Grundlagen  InformationshierarchieSucheUser InteractionScreendesignGRUNDLAGEN   19  
  20. 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. 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. 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. 23. Der  DirekteinsKeg:  Suchen...   Bin  nur   ich  so   Grundlagen  -­‐  Suche   dumm?   23  
  24. 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. 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. 26. Vieles  ist  möglich...   Grundlagen  -­‐  User  InteracKon  26  
  27. 27. Aber  nicht  alles  ist  sinnvoll   Grundlagen  -­‐  User  InteracKon  PC   ✓   ✓   ✓   ✓   ¢   ¢   ¢   ¢   ¢  TV   ¢   ✓   ¢   ✓   ¢   ✗   ✓   ¢   ✓  Tablet   ¢   ✓   ✓   ✗   ¢   ✓   ¢   ¢   ✗  Phone   ¢   ✓   ¢   ✗   ✓   ✓   ¢   ¢   ✗   27  ✓   Gut  geeignet   ¢   Bedingt  sinnvoll   ✗   Ungeeignet  
  28. 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. 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. 30. Objektsicht   Grundlagen  -­‐  Screendesign  Container-­‐Sicht   Detailsicht   30  
  31. 31. Objektsicht   Grundlagen  -­‐  Screendesign  Container-­‐Sicht   Detailsicht   31  
  32. 32. Grundlagen  -­‐  Screendesign  32  
  33. 33. Grundlagen  -­‐  Screendesign  33  
  34. 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. 35. Radio  Bupons  Checkboxes   §  Keine,  eine  oder  mehrere  OpKonen   wählbar   Grundlagen  -­‐  Screendesign  Radio  BuYons   §  Nur  eine  OpKon  wählbar   35  
  36. 36. Problem  Radio  Bupon   Keine   1  andere   Keine   1  OpKon   Vorbe-­‐ OpKon   OpKon   gewählt   legung   gewählt   passt   Grundlagen  -­‐  Screendesign   36  
  37. 37. Grundlagen  -­‐  Screendesign   37  Lesen  Sie  mehr  unter:    hpp://www.lohmy.de/2010/03/18/tabpages-­‐haufig-­‐falsch-­‐eingesetzt/    
  38. 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. 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. 40. 4  Usability  Strategien  User StoriesWireframesStoryboardsPaper Prototyping4  USABILITY-­‐STRATEGIEN   40  
  41. 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. 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 welleAls Koch nehmen, u Gerichte verschiedener zubereiten, uf um die KochRezept 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. 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. 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. 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. 46. Viel  T ext,  w enige Scrib   bles   4  Usability  Strategien  -­‐  Storyboards  46  
  47. 47. Mehr  Scr ibbles  als  Text  §  So  entwickle  ich  Storyboards   §  Einfach   §  Schnell   §  Billig   3  Usability  Strategien  -­‐  Storyboards   47  
  48. 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. 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. 50. Dialogsteuerung  ;-­‐)   50  
  51. 51. System  is  busy...   51  
  52. 52. ...  layer3  set  visibility  =  true  ;-­‐))   52  
  53. 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. 54  
  55. 55. Fußzeile  55  
  56. 56. Fußzeile  56  
  57. 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  

×