![usability // martin hahn // 2010
“Ein Ding [...] soll seinem Zweck vollendet dienen –
das heißt, seine Funktion praktisch erfüllen.”
(Gropius)](https://image.slidesharecdn.com/vorlesungusability09-090924114452-phpapp01/85/Web-Usability-30-320.jpg)
Hochgeladen vonMartin Hahn
Web-Usability
Das Dokument von Martin Hahn definiert Usability als die Benutzerfreundlichkeit von Produkten, die entscheidend ist, um Ziele effektiv, effizient und zufriedenstellend zu erreichen. Es beleuchtet die wesentlichen Aspekte der Gestaltung benutzerfreundlicher Webseiten und betont die Bedeutung von Benutzerbedürfnissen, Informationsarchitektur sowie Textlesbarkeit für eine positive Nutzererfahrung. Zudem wird die Glaubwürdigkeit, Aktualität und Barrierefreiheit als wichtige Faktoren angeführt, die zur Verbesserung der Usability beitragen.
Web-Usability
- 1.
- 2. usability // martinhahn // 2010 Definition Usability Ist ein Produkt einfach zu benutzen, hat es eine hohe Usability. Benutzerfreundlichkeit besser: Gebrauchstauglichkeit
- 3. usability // martinhahn // 2010 Übersichtlich? Eindeutig? Klar?
- 4. usability // martinhahn // 2010 Wieviele Links?
- 5. usability // martinhahn // 2010 Was bekomme ich geboten? Wo bin ich gelandet? Was haben die zu bieten? Warum soll ich bleiben?
- 6. usability // martinhahn // 2010 DIN EN ISO 9241-11 Anforderungen an die Gebrauchstauglichkeit Richtlinien der Interaktion zwischen Mensch und Computer “Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”
- 7. usability // martinhahn // 2010 Effektivität, Effizienz und Zufriedenheit Effektivität Dem User gelingt die Zielerreichung wie geplant. Effizienz Zielerreichung möglichst schnell und mit möglichst wenig Aufwand. Zufriedenheit Erledigung der Aufgabe bereitet Freude.
- 8. usability // martinhahn // 2010 Effektiv effizient? Jobs Beschäftigungsmöglichkeiten Job-o-Rama
- 9. Am Anfang war... ein plan
- 10. usability // martinhahn // 2010
- 11. usability // martinhahn // 2010 Kenne deine Zielgruppe!
- 12. usability // martinhahn // 2010 Benutzerbedürfnisse Bedürfnisse, Interesse und Verhalten der User in den Mittelpunkt des Entwicklungsprozesses „Konzentriere dich auf den Benutzer, der Rest kommt von allein.” (Google)
- 13. usability // martinhahn // 2010 Definition der Anforderungen Wer sind die Anwender? Erfahrungsgrade der Anwender Funktionalität – Was soll das System können? In welcher Umgebung wird das System benutzt? Technologien – Welche technischen Anforderungen werden verlangt? Gibt es technischen Grenzen?
- 14. usability // martinhahn // 2010 Surfweisheiten* Wir lesen keine Seiten, wir überfliegen sie. Wir treffen keine optimale Wahl. Wir befassen uns nicht damit, wie etwas funktioniert, sondern wursteln uns durch. Wir sind ungeduldig und nicht tolerant. Wir schätzen Qualität und Glaubwürdigkeit. Wir sind eigenützig. * nach Steve Krug
- 15. usability // martinhahn // 2010 Inhalte Relevante Inhalte sind das erste und nicht selten das Einzige, worauf User achten! Inhalte müssen nicht nur gut sein. Sie müssen auch adäquat präsentiert und gezielt positioniert werden.
- 16. informations architektur wo geht´s hierwieder raus?
- 17. usability // martinhahn // 2010 informationsarchitektur Führt den User durch die Site und ans Ziel. Sollte nachvollziehbar und transparent sein. Prägt den Eindruck. Schafft Vertrauen.
- 18. usability // martinhahn // 2010 Ein paar Regeln Grundsätze 7 ± 2 Prinzip 2-Sekunden-Regel 3-Klick-Regel Banner-Blindheit
- 19. usability // martinhahn // 2010 Konventionen der Webnavigation Navigationselemente werden auf allen Unterseiten in gleicher Weise verwendet. Hauptnavigation / Metanavigation Navigation am oberen oder linken Seitenrand. Links müssen immer als solche erkennbar sein. Zurück-Button muss funktionieren. Besuchte Links kennzeichnen. Footer als Zusatznavigation.
- 20. usability // martinhahn // 2010 Navigation Wo bin ich? Wohin kann ich gehen? Wie kann ich dorthin kommen? Wie kann ich dahin zurück gehen, wo ich herkomme?
- 21. usability // martinhahn // 2010 Metanavigation Sitemap Startseite Kontakt Impressum Hilfe-, Suchfunktion Orientierungslinks
- 22. usability // martinhahn // 2010 Alternative Navigationsmittel Tag-Cloud Sitemap Stepping / Paging Seiteninterne Links
- 23. usability // martinhahn // 2010 Breadcrumbs Zeigen die aktuelle Position relativ zur Gesamtstruktur. Nur ein Klick zu höheren Ebenen. Einfach und unmissverständlich zu bedienen. Braucht wenig Platz.
- 24. usability // martinhahn // 2010 Reiter / Tabs Bekannte Metapher Klare Hierachie
- 25. usability // martinhahn // 2010 Navigationswording Home FAQ Sitemap Guided Tour Login / Logout Newsletter Download Über / About us Warenkorb Verständlichkeit vor Kreativität
- 26. usability // martinhahn // 2010 Suche Eine der wichtigsten Schnittstellen zwischen Besucher und Webseite. Muss sinnvolle Ergebnisse liefern. Ab ca. 200 Unterseiten notwendig.
- 27. usability // martinhahn // 2010 Formulare Keine unnötigen Felder. Pflichtfelder kennzeichnen. Eindeutige Feldbezeichnungen. Eindeutige Fehlerhinweise. Korrekt ausgefüllte Felder merken.
- 28. usability // martinhahn // 2010 Kontakt Ausreichend Kontaktmöglichkeiten bieten. Physikalische Adresse E-Mail / Kontaktformular User muss jederzeit mit dem Unternehmen oder einzelnen Personen in Kontakt treten können.
- 29.
- 30. usability // martinhahn // 2010 “Ein Ding [...] soll seinem Zweck vollendet dienen – das heißt, seine Funktion praktisch erfüllen.” (Gropius)
- 31. usability // martinhahn // 2010 Pagedesign Konventionen Zurück zur Startseite-Link Seitensuche
- 32. usability // martinhahn // 2010 Pagedesign Konventionen Interne Links Werbung / Banner
- 33. usability // martinhahn // 2010 Konvention vs. Innovation Konventionen sind hilfreich für den User Start- und Unterseiten können sich unterscheiden. Konventionen sind nicht zwangsläufig langweilig! Innovationen nur dann, wenn die Idee besser ist!
- 34. usability // martinhahn // 2010
- 35. usability // martinhahn // 2010 Grids are good
- 36. usability // martinhahn // 2010 Farben Ästhetische und psychologische Wirkung Informationsleitfunktion Ausreichender Kontrast zwischen Text und Hintergrund Farbenwirkung und -kontraste beachten!
- 37. usability // martinhahn // 2010 Icons als Kommunikationshilfe Ein Icon sagt mehr als tausend Worte. Erleichtern die Informationsaufnahme. Bieten Orientierung. Müssen erlernt bekannt sein!
- 38. usability // martinhahn // 2010
- 39. usability // martinhahn // 2010 Produkte sind nicht ästhetisch neutral!
- 40. usability // martinhahn // 2010 Webseiten sind nicht ästhetisch neutral!
- 41. usability // martinhahn // 2010 Webseitenästhetik „Keine zweite Chance für den ersten Eindruck.” Der User fühlt sich angesprochen oder eben nicht. Gefallen oder Nicht-Gefallen passieren unbewusst. Der User fällt sein Urteil in Sekundenbruchteilen. “Schöne” adäquate Ästhetik unterstützt die Ziele der Webseite und erhöht das Vertrauen des Users!
- 42. usability // martinhahn // 2010 Webseiten vermittlen immer eine Ästhetik!
- 43. usability // martinhahn // 2010
- 44. readability texte im internetliest sowieso keiner…
- 45. usability // martinhahn // 2010 Wir lesen keine Webseiten, wie überfliegen sie! Lesen am Monitor ist anstrengend und um ca. 25% langsamer als auf Papier. Der User braucht optische Anhaltspunkte zur Orientierung. Text scannbar machen. Umfangreiche Konsequenzen für die Gestaltung!
- 46. usability // martinhahn // 2010 Die Folgen…
- 47. usability // martinhahn // 2010 Headline / Claim Einführung in die Seite. Aussagekräftig, klar, verständlich!
- 48. usability // martinhahn // 2010 Abstract / Teaser Blickfang Erste Inhaltszusammenfassung. Lockmittel, um den User zum Weiterlesen zu animieren.
- 49. usability // martinhahn // 2010 Überschriften Seitentitel Artikel mit Überschriften und Zwischenüberschriften strukturieren. Besser einfache, aussagekräftige als interessant klingende Überschriften.
- 50. usability // martinhahn // 2010 Texte Sprache – Content Usability Inhalt kürzen, Inhalt kürzen, Inhalt kürzen. Nutzlose Wörter weglassen. Objektive, einfache Sprache verwenden. Schlüsselwörter benutzen. Keine Rechtschreib- Grammatikfehler
- 51. usability // martinhahn // 2010 Content Usability
- 52. usability // martinhahn // 2010 Bilder sagen mehr… als tausend Worte, ersetzen aber keine inhaltlichen Details! Sorgen für Aufmerksamkeit. Ergänzen und erweitern die inhaltliche Aussage. Der Inhalt bleibt mit Bildern besser in Erinnerung.
- 53. usability // martinhahn // 2010 Weißraum Hilft die Seite zu strukturieren. Bietet dem User Orientierung. Zeigt inhaltliche Zusammenhänge auf.
- 54. usability // martinhahn // 2010 Textauszeichnungen Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen Lesbarkeit erhöhen Seite strukturieren Inhaltliches herausstellen
- 55. usability // martinhahn // 2010
- 56. usability // martinhahn // 2010 Listen / Tabellen Schnelle Informationsaufnahme Übersichtlich “Auf den Punkt gebracht.”
- 57. usability // martinhahn // 2010 Gut lesbarer Text , Teil I Nicht mehr als 8 - 10 Wörter pro Zeile. Linksbündig Serifenlose Schriften wie Arial, Verdana und Tahoma für Fließtext. Zeilenabstände nicht zu eng. Schriftgröße ≥ 10 Punkt
- 58. usability // martinhahn // 2010 Gut lesbarer Text, Teil II Klarer Text/Hintergrund-Kontrast. Unterstreichungen NUR für Links. Auszeichnungen nutzen. Selten Großschreibung benutzen. Text in Absätze gliedern.
- 59. usability // martinhahn // 2010 Gut lesbarer Text
- 60. usability // martinhahn // 2010 Pageflow Readability
- 61. usability // martinhahn // 2010 Pageflow Readability
- 62. usability // martinhahn // 2010 Die umgekehrte Pyramide Typischer Aufbau von Artikeln. Überschrift wichtigste Informationen Wichtige Informationen Details
- 63. usability // martinhahn // 2010 Glaubwürdigkeit Glaubwürdigkeit ist ein Erfolgsfaktor einer Webseite. Texte auf dem Bildschirm sind weniger glaubwürdig, und schwerer zu verstehen sind als Texte auf Papier. Glaubwürdige Webseiten: Hohe wahrgenommene Vertrauenswürdigkeit Hohe wahrgenommene Fach- oder Sachkenntnis
- 64. usability // martinhahn // 2010 Glaubwürdigkeit steigern Zeigen, dass ein reales Unternehmen oder Person für den Auftritt verantwortlich ist. Einfache Interaktion zwischen Unternehmen und dem User. Professionelles Aussehen und leicht nachvollziehende Navigation. KEINE Vermischung von Inhalt und Werbung. Testimonials.
- 65. usability // martinhahn // 2010 Aktualität Hohe Erwartungshaltung der User: Inhalte gültig und aktuell! Aktualität ist eng mit Glaubwürdigkeit und Vertrauen verbunden.
- 66. einfach für alle zugänglichewebseiten
- 67. usability // martinhahn // 2010 Barrierefreie Webseiten Webseiten so gestalten, dass sie JEDER lesen kann! BITV WCAG Logische Struktur der HTML-Seiten Kontrastreiche Gestaltung Grafiken mit Alternativ-Text Text-Alternativen für Multimedia-Angebote Tastatursteuerung Skalierbarkeit von Schriften
- 68. usability // martinhahn // 2010 Gebrauchstaugliche HTML-Seiten Suchmaschinenoptimiert Endgeräteunabhängig Korrekte Seitenhierachie HTML für Informationen, CSS für das Layout und JavaScript / AJAX für die Verbesserung der Usability.
- 69. usability // martinhahn // 2010 Gebrauchstaugliche HTML-Seiten Alternative Stylesheets (Print, mobile Geräte) Sinnvoller Seitentitel Sprechende URLs Keine Frames und Pop-Ups Individuelle Fehlerseite
- 70. usability // martinhahn // 2010
- 71. usability // martinhahn // 2010 Technische Voraussetzungen der User
- 72. nutzen Wenn einUser sich auf einer Website nicht zurechtfindet und er sie nicht steuern kann, verlässt er sie. Die nächste Website ist nur einen Mausklick entfernt. Dass er jemals wiederkommt, ist unwahrscheinlich.
- 73. usability // martinhahn // 2010 Warum Usability? Usability ist ein Differenzierungsmerkmal. Usability ist harte Arbeit. Die Investition lohnt sich: Return on Investment.
- 74. usability // martinhahn // 2010 Das bringt Usability Mehr Umsatz Mehr Anfragen Mehr Besucher Höhere Kundenzufriedenheit Stärkere Kundenbindung
- 75.
- 76. usability // martinhahn // 2010
- 77. usability // martinhahn // 2010
- 78. usability // martinhahn // 2010
- 79. usability // martinhahn // 2010
- 80. usability // martinhahn // 2010
- 81. usability // martinhahn // 2010
- 82. usability // martinhahn // 2010 Usability – Best Case ;-)