German Web Usability Training
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

German Web Usability Training

on

  • 1,283 views

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

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

Statistics

Views

Total Views
1,283
Views on SlideShare
1,277
Embed Views
6

Actions

Likes
2
Downloads
11
Comments
0

1 Embed 6

https://twitter.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

German Web Usability Training Presentation Transcript

  • 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
  • 18. UX - Joy of Use • Zufriedenheit • Frust • Scheitern • Unterbrechung der eigentlichenTätigkeit • Zweifel
  • 19. Relaunch vs. Optimierung
  • 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. „Die Benutzer sind faul und dumm.“
  • 22. Steve Krug • „Don't make me think” • „Rocket Surgery Made Easy” • Berater u.a für Apple
  • 23. „Wenn etwas einen hohen Zeitaufwand erfordert – oder danach aussieht -, wird es wahrscheinlich weniger genutzt.“ (Krug 2006)
  • 24. Usability-Qualitätskontrolle 1. Expertengutachten (Expert Review) 2. Befragung der Nutzer 3. Beobachtung der Nutzer 4. Usability-Test
  • 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. 2. Befragung der Nutzer • Fokus-Gruppen: Strukturierte Gruppendiskussionen • Interviews/Kontextanalyse: Offene oder geschlossene Interviews (auch online) • Personas (lat. Maske): Nutzermodelle anhand von Nutzerdaten
  • 27. 3. Beobachtung der Nutzer • Feldbeobachtung: Wird nur ausgeführt, wenn Einflussfaktoren der Umgebung bedeutend sind • Nutzertagebuch: Tester erhalten Zugang zum Produkt
  • 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. Nutzererfahrung Emotionen
  • 30. ROI - Return on Investment
  • 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. Online-Services Low Budget Varianten • http://www.usertesting.com/ • http://www.loop11.com/ • http://rapidusertests.com/
  • 33. Usability-Test 5 SekundenTest Use Case mit “Thinking Aloud” (keine Personas) ggf. Beobachtung der Nutzer bei weiteren Fragen
  • 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. Andere Websites im Test http://www.youtube.com/watch?v=_uPb-CVXZAU http://www.youtube.com/watch?v=IToZLTxas4g
  • 36. Usability Guidelines
  • 37. Die 4 W's • Wer ? • Was ? • Wo ? • Warum ? Innerhalb 3 Sekunden
  • 38. Positive Beispiele • http://www.wufoo.com/ • https://www.tumblr.com/ • http://www.webentwicklung-berlin.de/
  • 39. Usability Guidelines • Intuitiv • Selbsterklärend • Fragezeichen eliminieren • Nutzeranweisungen vermeiden • Konventionen
  • 40. NAVIGATION Breadcrumb, DropDown, zurück
  • 41. 3 KLICK REGEL
  • 42. SEITENTITEL SEO, SER, iOS 7
  • 43. iOS 7
  • 44. FEHLERMELDUNGEN 404, htaccess 301
  • 45. FORMULARE Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre
  • 46. KONTRAST Lesbarkeit,Animationen, Hintergründe, Barriere
  • 47. LINKS Kontrast, besuchte Seiten, Download, extern
  • 48. NUTZUNGSHINWEISE nur bei Ladezeiten
  • 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. DETAILS Goldener Schnitt,Aussagen, Humor
  • 51. Twitter
  • 52. VERALTETE INHALTE News, Umgang mit Löschen von Seiten
  • 53. KONTAKT Impressum, Mitarbeiter, Formular, Spam
  • 54. SCROLLEN Falz
  • 55. EIGENE BEDIENELEMENTE Scrollbalken, DropDown Menüs
  • 56. BROWSER BEDIENUNG Nicht manipulieren oder verändern (z.B. zurück, rechte Maustaste)
  • 57. INKONSISTENZ Design-Guide, Farben, Schriftarten, Spalten, Navigationen
  • 58. W3C KONFORM valides HTML, Doctype, CSS
  • 59. BROWSERKOMPATIBILITÄT auf Laptops,Tablets, PCs, Macs, Smartphones
  • 60. PERFORMANCE SpeedTest, Komprimierung, Bilder, Server, Mobile
  • 61. SEO SERP, TitleTag, Social Media, verwaiste Seiten
  • 62. SUCHE (INTERN) Funktion, Suchergebnisse, Sortierbarkeit
  • 63. MICROSITES AlsTeil der eigenen Website, Nicht zu viele verschiedene Subdomains, Ausnahmen
  • 64. MULTIMEDIA Videos, Bilder, Flash, HTML5, CSS3
  • 65. ERMUTIGUNG ZUR WIEDERKEHR Newsletter, Gewinnspiele, Social Media
  • 66. UNDER CONSTRUCTION Nicht verwenden, nur bei Produktvorstellungen Email Benachrichtigung aktivieren
  • 67. POP-UP AdBlocker, Fancybox, Lightbox
  • 68. DON’T LOOK LIKE AN AD keine Werbesprüche, keine boxartige bunte Darstellung
  • 69. FAQ Hilfetexte,Abkürzungen erklären, Glossar
  • 70. RELATIVE GRÖßEN NUTZEN em statt Pixel
  • 71. CONVERSION-OPTIMIERUNG
  • 72. Conversion-Rate Nach einer Usability-Optimierung wurde eine durchschnittliche Erhöhung der Conversion-Rate um 135% festgestellt.
  • 73. Air Berlin
  • 74. Usability Failures
  • 75. Facebook Usability Gespräche
  • 76. Usability Failures
  • 77. Usability Failures
  • 78. Usability Failures http://www.openoffice.org/
  • 79. Positive Usability
  • 80. Usability Failures
  • 81. CSS3 Generator http://css3generator.com/
  • 82. Bootstrap http://getbootstrap.com/2.3.2/
  • 83. Responsives Webdesign
  • 84. Ethan Marcotte Mai 2010
  • 85. Ethan Marcotte ,,Mobile browsing is expected to outpace desktop- based access within three to five years.”
  • 86. Mobile First!
  • 87. Viewport
  • 88. <meta name="viewport" content="width=device-width, initial-scale=1”> Viewport
  • 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. @media screen and (min-width: 400px) and (max-width: 700px) { … } Weitere http://www.w3.org/TR/css3-mediaqueries/ Media Querys
  • 91. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Media Querys
  • 92. Breakpoints
  • 93. Navigationen
  • 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. gruene-bundestag.de
  • 96. Responsive Viewer http://www.active-value.de/responsive-design-viewer/
  • 97. Adobe Edge Inspect http://html.adobe.com/edge/inspect/
  • 98. Barrieretest http://www.bitvtest.eu/ http://testen.bitvtest.de/selbstbewertung/test.php
  • 99. Barrierefreie- Informationstechnik-Verordnung 2002
  • 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. Barrierearmut
  • 102. BITV Test http://www.bitvtest.eu/