USABILITY
Paulina Seroczynska
B.A. hon. Web Development
Certified TYPO3 Integrator
www.webentwicklung-berlin.de
info@sitegefuehl.de
T...
Useability
• engl. ‚Brauchbarkeit, [Be-]Nutzbarkeit, Bedienbarkeit
• Gebrauchstauglichkeit
• Benutzerfreundlichkeit
• Benu...
Das Netz 2007 vs 2012
Anzahl Top-Level Domains
Websites damals
Websites heute
Websites damals
Websites heute
Design damals & heute
•Bunt
•Schrill
•Animiert
•Statisch
•Baukasten
•CI Farben
•Schlicht
•Interaktiv (User
generated)
•Dyn...
http://fdp-detmold.de
Definition Gebrauchstauglichkeit
eines Produktes
• Normenreihe DIN EN ISO 9241Teil 11
• Leitkriterien für die Gebrauchstaug...
Weitere Normen
• ISO 9126 (DIN 66272) beschreibt die Qualitätsmerkmale und den
Leitfaden zurVerwendung von Softwareprodukt...
Gründe für Usability
• Hohe Konkurrenz
• Zufriedene Kunden
• Kunden, die wiederkommen
• Kunden, die weiterempfehlen
• Schw...
Ziele und Zielgruppen
• Was möchte man erreichen?
• Wen möchte man erreichen?
StatistikTools (insb.Technik)
„Der Wurm muss dem Fisch schmecken, nicht dem Angler.“
Keep it simple, stupid!
KISS-Prinzip
UX - Joy of Use
• Zufriedenheit
• Frust
• Scheitern
• Unterbrechung der eigentlichenTätigkeit
• Zweifel
Relaunch vs. Optimierung
Jakob Nielsen
• geb. 1957 in Dänemark
• Dr. im Design von
Benutzerschnittstellen und
Informatik.
• 79 US Patente
• nngroup...
„Die Benutzer sind faul und dumm.“
Steve Krug
• „Don't make me think”
• „Rocket Surgery Made Easy”
• Berater u.a für Apple
„Wenn etwas einen hohen Zeitaufwand erfordert – oder
danach aussieht -, wird es wahrscheinlich weniger genutzt.“
(Krug 200...
Usability-Qualitätskontrolle
1. Expertengutachten (Expert Review)
2. Befragung der Nutzer
3. Beobachtung der Nutzer
4. Usa...
1. Expertengutachten
• Heuristische Evaluation: Hier überprüft der
Experte das Angebot mit anerkannten Prinzipien
der Soft...
2. Befragung der Nutzer
• Fokus-Gruppen: Strukturierte
Gruppendiskussionen
• Interviews/Kontextanalyse: Offene oder
geschl...
3. Beobachtung der Nutzer
• Feldbeobachtung: Wird nur ausgeführt, wenn
Einflussfaktoren der Umgebung bedeutend sind
• Nutze...
4. Usability-Test
• Aufgabenanalyse (Task Analysis): Use Case (eine
Aufgabe) muss gelöst werden
• Card-Sorting für benutze...
Nutzererfahrung
Emotionen
ROI - Return on Investment
Möglichkeiten der
Protokollierung
• Screen Recording: Bildschirmaufnahmen vom Test (lokal
oder online)
• Screen-Sharing: Z...
Online-Services
Low Budget Varianten
• http://www.usertesting.com/
• http://www.loop11.com/
• http://rapidusertests.com/
Usability-Test
5 SekundenTest
Use Case mit “Thinking Aloud” (keine Personas)
ggf. Beobachtung der Nutzer bei weiteren Frag...
Use-Case
Finden Sie die Finca "Buma" und finden Sie heraus, ob sie vom
10.April bis zum 15.April 2014 buchbar ist und was d...
Andere Websites im Test
http://www.youtube.com/watch?v=_uPb-CVXZAU
http://www.youtube.com/watch?v=IToZLTxas4g
Usability Guidelines
Usability Guidelines
• Intuitiv
• Selbsterklärend
• Fragezeichen eliminieren
• Nutzeranweisungen vermeiden
• Konventionen
NAVIGATION
Breadcrumb, DropDown, zurück
3 KLICK REGEL
SEITENTITEL
SEO, SER, iOS 7
iOS 7
FEHLERMELDUNGEN
404, htaccess 301
FORMULARE
Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre
KONTRAST
Lesbarkeit,Animationen, Hintergründe, Barriere
LINKS
Kontrast, besuchte Seiten, Download, extern
NUTZUNGSHINWEISE
nur bei Ladezeiten
TEXT
Realschul-Niveau, Leichte-Sprache,
Schriftart (font-face), Zeilenhöhe, Schriftgröße,
Scanbarkeit, Breite,Anzahl Absät...
DETAILS
Goldener Schnitt,Aussagen, Humor
Twitter
VERALTETE INHALTE
News, Umgang mit Löschen von Seiten
KONTAKT
Impressum, Mitarbeiter, Formular, Spam
SCROLLEN
Falz
EIGENE BEDIENELEMENTE
Scrollbalken, DropDown Menüs
BROWSER BEDIENUNG
Nicht manipulieren oder verändern
(z.B. zurück, rechte Maustaste)
INKONSISTENZ
Design-Guide, Farben, Schriftarten,
Spalten, Navigationen
W3C KONFORM
valides HTML, Doctype, CSS
BROWSERKOMPATIBILITÄT
auf Laptops,Tablets, PCs, Macs, Smartphones
PERFORMANCE
SpeedTest, Komprimierung, Bilder, Server, Mobile
SEO
SERP, TitleTag, Social Media, verwaiste Seiten
SUCHE (INTERN)
Funktion, Suchergebnisse, Sortierbarkeit
MICROSITES
AlsTeil der eigenen Website,
Nicht zu viele verschiedene Subdomains,
Ausnahmen
MULTIMEDIA
Videos, Bilder, Flash, HTML5, CSS3
ERMUTIGUNG ZUR
WIEDERKEHR
Newsletter, Gewinnspiele, Social Media
UNDER CONSTRUCTION
Nicht verwenden,
nur bei Produktvorstellungen Email Benachrichtigung aktivieren
POP-UP
AdBlocker, Fancybox, Lightbox
DON’T LOOK LIKE AN AD
keine Werbesprüche, keine boxartige bunte Darstellung
FAQ
Hilfetexte,Abkürzungen erklären, Glossar
RELATIVE GRÖßEN NUTZEN
em statt Pixel
CONVERSION-OPTIMIERUNG
Conversion-Rate
Nach einer Usability-Optimierung wurde eine
durchschnittliche Erhöhung der Conversion-Rate um
135% festges...
Air Berlin
Usability Failures
Facebook Usability Gespräche
Usability Failures
Usability Failures
Usability Failures
http://www.openoffice.org/
Positive Usability
Usability Failures
CSS3 Generator
http://css3generator.com/
Bootstrap
http://getbootstrap.com/2.3.2/
Responsives Webdesign
Ethan Marcotte
Mai 2010
Ethan Marcotte
,,Mobile browsing is expected to outpace desktop-
based access within three to five years.”
Mobile First!
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1”>
Viewport
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media=...
@media screen and (min-width: 400px) and (max-width: 700px) { … }
Weitere http://www.w3.org/TR/css3-mediaqueries/
Media Qu...
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Media Querys
Breakpoints
Navigationen
Positive Beispiele
http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
http://www.active-value.de/
http:...
gruene-bundestag.de
Responsive Viewer
http://www.active-value.de/responsive-design-viewer/
Adobe Edge Inspect
http://html.adobe.com/edge/inspect/
Barrieretest
http://www.bitvtest.eu/
http://testen.bitvtest.de/selbstbewertung/test.php
Barrierefreie-
Informationstechnik-Verordnung
2002
Seit dem 31. Dezember 2005 mussten sämtliche
öffentlich zugänglichen Webauftritte des Bundes
barrierefrei sein. Die Umsetz...
Barrierearmut
BITV Test
http://www.bitvtest.eu/
German Web Usability Training
German Web Usability Training
German Web Usability Training
Upcoming SlideShare
Loading in...5
×

German Web Usability Training

1,261

Published on

German Web Usability Training at the HU Berlin, 25. and 26. September 2013. © Paulina Seroczynska

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,261
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

German Web Usability Training

  1. 1. USABILITY
  2. 2. Paulina Seroczynska B.A. hon. Web Development Certified TYPO3 Integrator www.webentwicklung-berlin.de info@sitegefuehl.de Twitter: SiteGefuehl XING: Paulina_Seroczynska www.kochen-ohne.de
  3. 3. Useability • engl. ‚Brauchbarkeit, [Be-]Nutzbarkeit, Bedienbarkeit • Gebrauchstauglichkeit • Benutzerfreundlichkeit • Benutzbarkeit eines Objektes
  4. 4. Das Netz 2007 vs 2012
  5. 5. Anzahl Top-Level Domains
  6. 6. Websites damals
  7. 7. Websites heute
  8. 8. Websites damals
  9. 9. Websites heute
  10. 10. Design damals & heute •Bunt •Schrill •Animiert •Statisch •Baukasten •CI Farben •Schlicht •Interaktiv (User generated) •Dynamisch (DB, CMS) •Technisch Aufwendig •Mehr Konkurrenz
  11. 11. http://fdp-detmold.de
  12. 12. Definition Gebrauchstauglichkeit eines Produktes • Normenreihe DIN EN ISO 9241Teil 11 • Leitkriterien für die Gebrauchstauglichkeit einer Software • Effektivität • Effizienz • Zufriedenheit
  13. 13. Weitere Normen • ISO 9126 (DIN 66272) beschreibt die Qualitätsmerkmale und den Leitfaden zurVerwendung von Softwareprodukten. • ISO/IEC 12119 regelt die Qualitätsanforderungen und die Prüfbestimmungen für Software-Erzeugnisse • Die ISO 13407 Norm ist für einen benutzerorientierten Softwarentwicklungsprozess zuständig und die ISO 14915 beschreibt die Software-Ergonomie für Multimedia-Benutzungsschnitttstellen. • Keine Normen zu Design! • "Neuland"
  14. 14. Gründe für Usability • Hohe Konkurrenz • Zufriedene Kunden • Kunden, die wiederkommen • Kunden, die weiterempfehlen • Schwarze Zahlen
  15. 15. Ziele und Zielgruppen • Was möchte man erreichen? • Wen möchte man erreichen? StatistikTools (insb.Technik)
  16. 16. „Der Wurm muss dem Fisch schmecken, nicht dem Angler.“
  17. 17. Keep it simple, stupid! KISS-Prinzip
  18. 18. UX - Joy of Use • Zufriedenheit • Frust • Scheitern • Unterbrechung der eigentlichenTätigkeit • Zweifel
  19. 19. Relaunch vs. Optimierung
  20. 20. Jakob Nielsen • geb. 1957 in Dänemark • Dr. im Design von Benutzerschnittstellen und Informatik. • 79 US Patente • nngroup.com - Nielsen Norman Group • useit.com 79 Mio.Views pro Jahr
  21. 21. „Die Benutzer sind faul und dumm.“
  22. 22. Steve Krug • „Don't make me think” • „Rocket Surgery Made Easy” • Berater u.a für Apple
  23. 23. „Wenn etwas einen hohen Zeitaufwand erfordert – oder danach aussieht -, wird es wahrscheinlich weniger genutzt.“ (Krug 2006)
  24. 24. Usability-Qualitätskontrolle 1. Expertengutachten (Expert Review) 2. Befragung der Nutzer 3. Beobachtung der Nutzer 4. Usability-Test
  25. 25. 1. Expertengutachten • Heuristische Evaluation: Hier überprüft der Experte das Angebot mit anerkannten Prinzipien der Software-Ergonomie (Heuristiken). • Cognitive Walkthrough: Experten überprüfen das Interface und versetzen sich in die Lage eines Nutzers (z.B. mit Personas). Sie erarbeiten bestimmte Handlungsabläufe und analysieren welche Probleme bei der Bedienung auftauchen könnten.
  26. 26. 2. Befragung der Nutzer • Fokus-Gruppen: Strukturierte Gruppendiskussionen • Interviews/Kontextanalyse: Offene oder geschlossene Interviews (auch online) • Personas (lat. Maske): Nutzermodelle anhand von Nutzerdaten
  27. 27. 3. Beobachtung der Nutzer • Feldbeobachtung: Wird nur ausgeführt, wenn Einflussfaktoren der Umgebung bedeutend sind • Nutzertagebuch: Tester erhalten Zugang zum Produkt
  28. 28. 4. Usability-Test • Aufgabenanalyse (Task Analysis): Use Case (eine Aufgabe) muss gelöst werden • Card-Sorting für benutzerfreundliche Navigations- oder Menüstrukturen: Themengruppen diskutieren und benennen um • Der Fünf-Sekunden Test • Remote Usability-Test (synchron und asynchron) • Labortest • Rapid-Prototyping (iterativer Nutzertest): Funktionsfähige Prototypen werden in kurzen Abständen kontinuierlich getestet. • Eye-Tracking • Web-Controlling
  29. 29. Nutzererfahrung Emotionen
  30. 30. ROI - Return on Investment
  31. 31. Möglichkeiten der Protokollierung • Screen Recording: Bildschirmaufnahmen vom Test (lokal oder online) • Screen-Sharing: Zugriff auf den Bildschirm Ihres Testers, um die Klicks und Bedienung zu verfolgen. • Sprachaufzeichnung: Aufzeichnung per Mikrofon während des Tests. • Webcam-Aufnahme: Aufnahme von Testpersonen • Heatmap: Visualisierung der Klicks von verschiedenen Nutzern auf ihrer Website • EyeTracking: Visualisierung des Blickverlaufs von der Testperson • Analytics-Berichte: Analytischen Daten, die die Qualität der Website und der Benutzeroberfläche widerspiegeln • Usability Berichterstattung: Nutzer erläutern den Umgang mit ihrer Website
  32. 32. Online-Services Low Budget Varianten • http://www.usertesting.com/ • http://www.loop11.com/ • http://rapidusertests.com/
  33. 33. Usability-Test 5 SekundenTest Use Case mit “Thinking Aloud” (keine Personas) ggf. Beobachtung der Nutzer bei weiteren Fragen
  34. 34. Use-Case Finden Sie die Finca "Buma" und finden Sie heraus, ob sie vom 10.April bis zum 15.April 2014 buchbar ist und was die Nacht bis zu 6 Personen kosten würde.
  35. 35. Andere Websites im Test http://www.youtube.com/watch?v=_uPb-CVXZAU http://www.youtube.com/watch?v=IToZLTxas4g
  36. 36. Usability Guidelines
  37. 37. Die 4 W's • Wer ? • Was ? • Wo ? • Warum ? Innerhalb 3 Sekunden
  38. 38. Positive Beispiele • http://www.wufoo.com/ • https://www.tumblr.com/ • http://www.webentwicklung-berlin.de/
  39. 39. Usability Guidelines • Intuitiv • Selbsterklärend • Fragezeichen eliminieren • Nutzeranweisungen vermeiden • Konventionen
  40. 40. NAVIGATION Breadcrumb, DropDown, zurück
  41. 41. 3 KLICK REGEL
  42. 42. SEITENTITEL SEO, SER, iOS 7
  43. 43. iOS 7
  44. 44. FEHLERMELDUNGEN 404, htaccess 301
  45. 45. FORMULARE Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre
  46. 46. KONTRAST Lesbarkeit,Animationen, Hintergründe, Barriere
  47. 47. LINKS Kontrast, besuchte Seiten, Download, extern
  48. 48. NUTZUNGSHINWEISE nur bei Ladezeiten
  49. 49. TEXT Realschul-Niveau, Leichte-Sprache, Schriftart (font-face), Zeilenhöhe, Schriftgröße, Scanbarkeit, Breite,Anzahl Absätze,Animationen, korrekte Auszeichnungen http://www.webmasterpro.de/design/article/typografie-12-wichtige-grundlagen-fuer- den-richtigen-einsatz-von-schriften.html
  50. 50. DETAILS Goldener Schnitt,Aussagen, Humor
  51. 51. Twitter
  52. 52. VERALTETE INHALTE News, Umgang mit Löschen von Seiten
  53. 53. KONTAKT Impressum, Mitarbeiter, Formular, Spam
  54. 54. SCROLLEN Falz
  55. 55. EIGENE BEDIENELEMENTE Scrollbalken, DropDown Menüs
  56. 56. BROWSER BEDIENUNG Nicht manipulieren oder verändern (z.B. zurück, rechte Maustaste)
  57. 57. INKONSISTENZ Design-Guide, Farben, Schriftarten, Spalten, Navigationen
  58. 58. W3C KONFORM valides HTML, Doctype, CSS
  59. 59. BROWSERKOMPATIBILITÄT auf Laptops,Tablets, PCs, Macs, Smartphones
  60. 60. PERFORMANCE SpeedTest, Komprimierung, Bilder, Server, Mobile
  61. 61. SEO SERP, TitleTag, Social Media, verwaiste Seiten
  62. 62. SUCHE (INTERN) Funktion, Suchergebnisse, Sortierbarkeit
  63. 63. MICROSITES AlsTeil der eigenen Website, Nicht zu viele verschiedene Subdomains, Ausnahmen
  64. 64. MULTIMEDIA Videos, Bilder, Flash, HTML5, CSS3
  65. 65. ERMUTIGUNG ZUR WIEDERKEHR Newsletter, Gewinnspiele, Social Media
  66. 66. UNDER CONSTRUCTION Nicht verwenden, nur bei Produktvorstellungen Email Benachrichtigung aktivieren
  67. 67. POP-UP AdBlocker, Fancybox, Lightbox
  68. 68. DON’T LOOK LIKE AN AD keine Werbesprüche, keine boxartige bunte Darstellung
  69. 69. FAQ Hilfetexte,Abkürzungen erklären, Glossar
  70. 70. RELATIVE GRÖßEN NUTZEN em statt Pixel
  71. 71. CONVERSION-OPTIMIERUNG
  72. 72. Conversion-Rate Nach einer Usability-Optimierung wurde eine durchschnittliche Erhöhung der Conversion-Rate um 135% festgestellt.
  73. 73. Air Berlin
  74. 74. Usability Failures
  75. 75. Facebook Usability Gespräche
  76. 76. Usability Failures
  77. 77. Usability Failures
  78. 78. Usability Failures http://www.openoffice.org/
  79. 79. Positive Usability
  80. 80. Usability Failures
  81. 81. CSS3 Generator http://css3generator.com/
  82. 82. Bootstrap http://getbootstrap.com/2.3.2/
  83. 83. Responsives Webdesign
  84. 84. Ethan Marcotte Mai 2010
  85. 85. Ethan Marcotte ,,Mobile browsing is expected to outpace desktop- based access within three to five years.”
  86. 86. Mobile First!
  87. 87. Viewport
  88. 88. <meta name="viewport" content="width=device-width, initial-scale=1”> Viewport
  89. 89. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> @media screen { * { font-family: sans-serif } } Medienabhängige CSS
  90. 90. @media screen and (min-width: 400px) and (max-width: 700px) { … } Weitere http://www.w3.org/TR/css3-mediaqueries/ Media Querys
  91. 91. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Media Querys
  92. 92. Breakpoints
  93. 93. Navigationen
  94. 94. Positive Beispiele http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html http://www.active-value.de/ http://www.abookapart.com/
  95. 95. gruene-bundestag.de
  96. 96. Responsive Viewer http://www.active-value.de/responsive-design-viewer/
  97. 97. Adobe Edge Inspect http://html.adobe.com/edge/inspect/
  98. 98. Barrieretest http://www.bitvtest.eu/ http://testen.bitvtest.de/selbstbewertung/test.php
  99. 99. Barrierefreie- Informationstechnik-Verordnung 2002
  100. 100. Seit dem 31. Dezember 2005 mussten sämtliche öffentlich zugänglichen Webauftritte des Bundes barrierefrei sein. Die Umsetzung der Anforderungen der BITV 2.0 hat für neu gestaltete Internetseiten bis zum 22. März 2012 zu erfolgen.
  101. 101. Barrierearmut
  102. 102. BITV Test http://www.bitvtest.eu/

×