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

1. USABILITY

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. Useability
• engl. ‚Brauchbarkeit, [Be-]Nutzbarkeit, Bedienbarkeit
• Gebrauchstauglichkeit
• Benutzerfreundlichkeit
• Benutzbarkeit eines Objektes

4. Das Netz 2007 vs 2012

5. Anzahl Top-Level Domains

6. Websites damals

7. Websites heute

8. Websites damals

9. Websites heute

10. Design damals & heute
•Bunt
•Schrill
•Animiert
•Statisch
•Baukasten
•CI Farben
•Schlicht
•Interaktiv (User
generated)
•Dynamisch (DB, CMS)
•Technisch Aufwendig
•Mehr Konkurrenz

11. http://fdp-detmold.de

12. Definition Gebrauchstauglichkeit
eines Produktes
• Normenreihe DIN EN ISO 9241Teil 11
• Leitkriterien für die Gebrauchstauglichkeit einer
Software
• Effektivität
• Effizienz
• Zufriedenheit

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. Gründe für Usability
• Hohe Konkurrenz
• Zufriedene Kunden
• Kunden, die wiederkommen
• Kunden, die weiterempfehlen
• Schwarze Zahlen

15. Ziele und Zielgruppen
• Was möchte man erreichen?
• Wen möchte man erreichen?
StatistikTools (insb.Technik)

16. „Der Wurm muss dem Fisch schmecken, nicht dem Angler.“

17. Keep it simple, stupid!
KISS-Prinzip

19. UX - Joy of Use
• Zufriedenheit
• Frust
• Scheitern
• Unterbrechung der eigentlichenTätigkeit
• Zweifel

20. Relaunch vs. Optimierung

21. 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

22. „Die Benutzer sind faul und dumm.“

23. Steve Krug
• „Don't make me think”
• „Rocket Surgery Made Easy”
• Berater u.a für Apple

24. „Wenn etwas einen hohen Zeitaufwand erfordert – oder
danach aussieht -, wird es wahrscheinlich weniger genutzt.“
(Krug 2006)

25. Usability-Qualitätskontrolle
1. Expertengutachten (Expert Review)
2. Befragung der Nutzer
3. Beobachtung der Nutzer
4. Usability-Test

26. 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.

27. 2. Befragung der Nutzer
• Fokus-Gruppen: Strukturierte
Gruppendiskussionen
• Interviews/Kontextanalyse: Offene oder
geschlossene Interviews (auch online)
• Personas (lat. Maske): Nutzermodelle anhand
von Nutzerdaten

28. 3. Beobachtung der Nutzer
• Feldbeobachtung: Wird nur ausgeführt, wenn
Einflussfaktoren der Umgebung bedeutend sind
• Nutzertagebuch: Tester erhalten Zugang zum
Produkt

29. 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

30. Nutzererfahrung
Emotionen

31. ROI - Return on Investment

32. 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

33. Online-Services
Low Budget Varianten
• http://www.usertesting.com/
• http://www.loop11.com/
• http://rapidusertests.com/

34. Usability-Test
5 SekundenTest
Use Case mit “Thinking Aloud” (keine Personas)
ggf. Beobachtung der Nutzer bei weiteren Fragen

35. 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.

36. Andere Websites im Test
http://www.youtube.com/watch?v=_uPb-CVXZAU
http://www.youtube.com/watch?v=IToZLTxas4g

37. Usability Guidelines

38. Die 4 W's
• Wer ?
• Was ?
• Wo ?
• Warum ?
Innerhalb 3 Sekunden

39. Positive Beispiele
• http://www.wufoo.com/
• https://www.tumblr.com/
• http://www.webentwicklung-berlin.de/

40. Usability Guidelines
• Intuitiv
• Selbsterklärend
• Fragezeichen eliminieren
• Nutzeranweisungen vermeiden
• Konventionen

41. NAVIGATION
Breadcrumb, DropDown, zurück

42. 3 KLICK REGEL

43. SEITENTITEL
SEO, SER, iOS 7

44. iOS 7

45. FEHLERMELDUNGEN
404, htaccess 301

46. FORMULARE
Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre

47. KONTRAST
Lesbarkeit,Animationen, Hintergründe, Barriere

48. LINKS
Kontrast, besuchte Seiten, Download, extern

49. NUTZUNGSHINWEISE
nur bei Ladezeiten

50. 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

51. DETAILS
Goldener Schnitt,Aussagen, Humor

52. Twitter

53. VERALTETE INHALTE
News, Umgang mit Löschen von Seiten

54. KONTAKT
Impressum, Mitarbeiter, Formular, Spam

55. SCROLLEN
Falz

56. EIGENE BEDIENELEMENTE
Scrollbalken, DropDown Menüs

57. BROWSER BEDIENUNG
Nicht manipulieren oder verändern
(z.B. zurück, rechte Maustaste)

58. INKONSISTENZ
Design-Guide, Farben, Schriftarten,
Spalten, Navigationen

59. W3C KONFORM
valides HTML, Doctype, CSS

60. BROWSERKOMPATIBILITÄT
auf Laptops,Tablets, PCs, Macs, Smartphones

61. PERFORMANCE
SpeedTest, Komprimierung, Bilder, Server, Mobile

62. SEO
SERP, TitleTag, Social Media, verwaiste Seiten

63. SUCHE (INTERN)
Funktion, Suchergebnisse, Sortierbarkeit

64. MICROSITES
AlsTeil der eigenen Website,
Nicht zu viele verschiedene Subdomains,
Ausnahmen

65. MULTIMEDIA
Videos, Bilder, Flash, HTML5, CSS3

66. ERMUTIGUNG ZUR
WIEDERKEHR
Newsletter, Gewinnspiele, Social Media

67. UNDER CONSTRUCTION
Nicht verwenden,
nur bei Produktvorstellungen Email Benachrichtigung aktivieren

68. POP-UP
AdBlocker, Fancybox, Lightbox

69. DON’T LOOK LIKE AN AD
keine Werbesprüche, keine boxartige bunte Darstellung

70. FAQ
Hilfetexte,Abkürzungen erklären, Glossar

71. RELATIVE GRÖßEN NUTZEN
em statt Pixel

72. CONVERSION-OPTIMIERUNG

73. Conversion-Rate
Nach einer Usability-Optimierung wurde eine
durchschnittliche Erhöhung der Conversion-Rate um
135% festgestellt.

74. Air Berlin

75. Usability Failures

76. Facebook Usability Gespräche

77. Usability Failures

78. Usability Failures

79. Usability Failures
http://www.openoffice.org/

80. Positive Usability

81. Usability Failures

82. CSS3 Generator
http://css3generator.com/

83. Bootstrap
http://getbootstrap.com/2.3.2/

84. Responsives Webdesign

85. Ethan Marcotte
Mai 2010

86. Ethan Marcotte
,,Mobile browsing is expected to outpace desktop-
based access within three to five years.”

87. Mobile First!

88. Viewport

89. <meta name="viewport" content="width=device-width, initial-scale=1”>
Viewport

90. <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

91. @media screen and (min-width: 400px) and (max-width: 700px) { … }
Weitere http://www.w3.org/TR/css3-mediaqueries/
Media Querys

92. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Media Querys

93. Breakpoints

94. Navigationen

95. Positive Beispiele
http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html
http://www.active-value.de/
http://www.abookapart.com/

96. gruene-bundestag.de

97. Responsive Viewer
http://www.active-value.de/responsive-design-viewer/

98. Adobe Edge Inspect
http://html.adobe.com/edge/inspect/

99. Barrieretest
http://www.bitvtest.eu/
http://testen.bitvtest.de/selbstbewertung/test.php

100. Barrierefreie-
Informationstechnik-Verordnung
2002

101. 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.

102. Barrierearmut

103. BITV Test
http://www.bitvtest.eu/