Web-Usability

25.056 Aufrufe

Veröffentlicht am

Web-Usability

Veröffentlicht in: Technologie, Business
1 Kommentar
8 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
25.056
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
17.768
Aktionen
Geteilt
0
Downloads
0
Kommentare
1
Gefällt mir
8
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Web-Usability

  1. 1. usability bloß nicht nachdenken müssen
  2. 2. usability // martin hahn // 2010 Definition Usability Ist ein Produkt einfach zu benutzen, hat es eine hohe Usability. Benutzerfreundlichkeit besser: Gebrauchstauglichkeit
  3. 3. usability // martin hahn // 2010 Übersichtlich? Eindeutig? Klar?
  4. 4. usability // martin hahn // 2010 Wieviele Links?
  5. 5. usability // martin hahn // 2010 Was bekomme ich geboten? Wo bin ich gelandet? Was haben die zu bieten? Warum soll ich bleiben?
  6. 6. usability // martin hahn // 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. 7. usability // martin hahn // 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. 8. usability // martin hahn // 2010 Effektiv effizient? Jobs Beschäftigungsmöglichkeiten Job-o-Rama
  9. 9. Am Anfang war ... ein plan
  10. 10. usability // martin hahn // 2010
  11. 11. usability // martin hahn // 2010 Kenne deine Zielgruppe!
  12. 12. usability // martin hahn // 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. 13. usability // martin hahn // 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. 14. usability // martin hahn // 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. 15. usability // martin hahn // 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. 16. informations architektur wo geht´s hier wieder raus?
  17. 17. usability // martin hahn // 2010 informationsarchitektur Führt den User durch die Site und ans Ziel. Sollte nachvollziehbar und transparent sein. Prägt den Eindruck. Schafft Vertrauen.
  18. 18. usability // martin hahn // 2010 Ein paar Regeln Grundsätze 7 ± 2 Prinzip 2-Sekunden-Regel 3-Klick-Regel Banner-Blindheit
  19. 19. usability // martin hahn // 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. 20. usability // martin hahn // 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. 21. usability // martin hahn // 2010 Metanavigation Sitemap Startseite Kontakt Impressum Hilfe-, Suchfunktion Orientierungslinks
  22. 22. usability // martin hahn // 2010 Alternative Navigationsmittel Tag-Cloud Sitemap Stepping / Paging Seiteninterne Links
  23. 23. usability // martin hahn // 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. 24. usability // martin hahn // 2010 Reiter / Tabs Bekannte Metapher Klare Hierachie
  25. 25. usability // martin hahn // 2010 Navigationswording Home FAQ Sitemap Guided Tour Login / Logout Newsletter Download Über / About us Warenkorb Verständlichkeit vor Kreativität
  26. 26. usability // martin hahn // 2010 Suche Eine der wichtigsten Schnittstellen zwischen Besucher und Webseite. Muss sinnvolle Ergebnisse liefern. Ab ca. 200 Unterseiten notwendig.
  27. 27. usability // martin hahn // 2010 Formulare Keine unnötigen Felder. Pflichtfelder kennzeichnen. Eindeutige Feldbezeichnungen. Eindeutige Fehlerhinweise. Korrekt ausgefüllte Felder merken.
  28. 28. usability // martin hahn // 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. 29. User Interface Design form follows function?
  30. 30. usability // martin hahn // 2010 “Ein Ding [...] soll seinem Zweck vollendet dienen – das heißt, seine Funktion praktisch erfüllen.” (Gropius)
  31. 31. usability // martin hahn // 2010 Pagedesign Konventionen Zurück zur Startseite-Link Seitensuche
  32. 32. usability // martin hahn // 2010 Pagedesign Konventionen Interne Links Werbung / Banner
  33. 33. usability // martin hahn // 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. 34. usability // martin hahn // 2010
  35. 35. usability // martin hahn // 2010 Grids are good
  36. 36. usability // martin hahn // 2010 Farben Ästhetische und psychologische Wirkung Informationsleitfunktion Ausreichender Kontrast zwischen Text und Hintergrund Farbenwirkung und -kontraste beachten!
  37. 37. usability // martin hahn // 2010 Icons als Kommunikationshilfe Ein Icon sagt mehr als tausend Worte. Erleichtern die Informationsaufnahme. Bieten Orientierung. Müssen erlernt bekannt sein!
  38. 38. usability // martin hahn // 2010
  39. 39. usability // martin hahn // 2010 Produkte sind nicht ästhetisch neutral!
  40. 40. usability // martin hahn // 2010 Webseiten sind nicht ästhetisch neutral!
  41. 41. usability // martin hahn // 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. 42. usability // martin hahn // 2010 Webseiten vermittlen immer eine Ästhetik!
  43. 43. usability // martin hahn // 2010
  44. 44. readability texte im internet liest sowieso keiner…
  45. 45. usability // martin hahn // 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. 46. usability // martin hahn // 2010 Die Folgen…
  47. 47. usability // martin hahn // 2010 Headline / Claim Einführung in die Seite. Aussagekräftig, klar, verständlich!
  48. 48. usability // martin hahn // 2010 Abstract / Teaser Blickfang Erste Inhaltszusammenfassung. Lockmittel, um den User zum Weiterlesen zu animieren.
  49. 49. usability // martin hahn // 2010 Überschriften Seitentitel Artikel mit Überschriften und Zwischenüberschriften strukturieren. Besser einfache, aussagekräftige als interessant klingende Überschriften.
  50. 50. usability // martin hahn // 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. 51. usability // martin hahn // 2010 Content Usability
  52. 52. usability // martin hahn // 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. 53. usability // martin hahn // 2010 Weißraum Hilft die Seite zu strukturieren. Bietet dem User Orientierung. Zeigt inhaltliche Zusammenhänge auf.
  54. 54. usability // martin hahn // 2010 Textauszeichnungen Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen Lesbarkeit erhöhen Seite strukturieren Inhaltliches herausstellen
  55. 55. usability // martin hahn // 2010
  56. 56. usability // martin hahn // 2010 Listen / Tabellen Schnelle Informationsaufnahme Übersichtlich “Auf den Punkt gebracht.”
  57. 57. usability // martin hahn // 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. 58. usability // martin hahn // 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. 59. usability // martin hahn // 2010 Gut lesbarer Text
  60. 60. usability // martin hahn // 2010 Pageflow Readability
  61. 61. usability // martin hahn // 2010 Pageflow Readability
  62. 62. usability // martin hahn // 2010 Die umgekehrte Pyramide Typischer Aufbau von Artikeln. Überschrift wichtigste Informationen Wichtige Informationen Details
  63. 63. usability // martin hahn // 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. 64. usability // martin hahn // 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. 65. usability // martin hahn // 2010 Aktualität Hohe Erwartungshaltung der User: Inhalte gültig und aktuell! Aktualität ist eng mit Glaubwürdigkeit und Vertrauen verbunden.
  66. 66. einfach für alle zugängliche webseiten
  67. 67. usability // martin hahn // 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. 68. usability // martin hahn // 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. 69. usability // martin hahn // 2010 Gebrauchstaugliche HTML-Seiten Alternative Stylesheets (Print, mobile Geräte) Sinnvoller Seitentitel Sprechende URLs Keine Frames und Pop-Ups Individuelle Fehlerseite
  70. 70. usability // martin hahn // 2010
  71. 71. usability // martin hahn // 2010 Technische Voraussetzungen der User
  72. 72. nutzen Wenn ein User 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. 73. usability // martin hahn // 2010 Warum Usability? Usability ist ein Differenzierungsmerkmal. Usability ist harte Arbeit. Die Investition lohnt sich: Return on Investment.
  74. 74. usability // martin hahn // 2010 Das bringt Usability Mehr Umsatz Mehr Anfragen Mehr Besucher Höhere Kundenzufriedenheit Stärkere Kundenbindung
  75. 75. diskussion gute seiten, schlechte seiten
  76. 76. usability // martin hahn // 2010
  77. 77. usability // martin hahn // 2010
  78. 78. usability // martin hahn // 2010
  79. 79. usability // martin hahn // 2010
  80. 80. usability // martin hahn // 2010
  81. 81. usability // martin hahn // 2010
  82. 82. usability // martin hahn // 2010 Usability – Best Case ;-)

×