German Web Usability Training
4 gefällt mir2,273 aufrufe
Das Dokument behandelt die Bedeutung und Entwicklung der Usability im Webdesign, definiert Gebrauchtauglichkeit anhand von Normen und erläutert Methoden zur Qualitätskontrolle und Usability-Tests. Zudem werden die Herausforderungen und Ziele von Usability im Kontext einer wettbewerbsorientierten Online-Welt thematisiert. Es werden Tipps und Richtlinien für eine benutzerfreundliche Gestaltung von Webseiten gegeben, um die Nutzererfahrung zu optimieren.
![Useability
• engl. ‚Brauchbarkeit, [Be-]Nutzbarkeit, Bedienbarkeit
• Gebrauchstauglichkeit
• Benutzerfreundlichkeit
• Benutzbarkeit eines Objektes](https://image.slidesharecdn.com/2013-09-25-prasentation-131002035037-phpapp02/85/German-Web-Usability-Training-3-320.jpg)
German Web Usability Training
- 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
- 10. Design damals & heute •Bunt •Schrill •Animiert •Statisch •Baukasten •CI Farben •Schlicht •Interaktiv (User generated) •Dynamisch (DB, CMS) •Technisch Aufwendig •Mehr Konkurrenz
- 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
- 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
- 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
- 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
- 42. 3 KLICK REGEL
- 44. iOS 7
- 46. FORMULARE Fehlermeldungen, Pflichtfelder, Länge, Privatsphäre
- 48. LINKS Kontrast, besuchte Seiten, Download, extern
- 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
- 52. Twitter
- 53. VERALTETE INHALTE News, Umgang mit Löschen von Seiten
- 55. SCROLLEN Falz
- 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
- 69. DON’T LOOK LIKE AN AD keine Werbesprüche, keine boxartige bunte Darstellung
- 71. RELATIVE GRÖßEN NUTZEN em statt Pixel
- 73. Conversion-Rate Nach einer Usability-Optimierung wurde eine durchschnittliche Erhöhung der Conversion-Rate um 135% festgestellt.
- 74. Air Berlin
- 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
- 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