Web-Usability

usability bloß nicht nachdenken müssen

usability // martin hahn // 2010 Definition Usability Ist ein Produkt einfach zu benutzen, hat es eine hohe Usability. Benutzerfreundlichkeit besser: Gebrauchstauglichkeit

usability // martin hahn // 2010 Übersichtlich? Eindeutig? Klar?

usability // martin hahn // 2010 Wieviele Links?

usability // martin hahn // 2010 Was bekomme ich geboten? Wo bin ich gelandet? Was haben die zu bieten? Warum soll ich bleiben?

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

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.

usability // martin hahn // 2010 Effektiv & effizient? Jobs Beschäftigungsmöglichkeiten Job-o-Rama

Am Anfang war ... ein plan

usability // martin hahn // 2010

usability // martin hahn // 2010 Kenne deine Zielgruppe!

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)

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?

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

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.

informations architektur wo geht´s hier wieder raus?

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.

usability // martin hahn // 2010 Ein paar Regeln & Grundsätze 7 ± 2 Prinzip 2-Sekunden-Regel 3-Klick-Regel Banner-Blindheit

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.

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?

usability // martin hahn // 2010 Metanavigation Sitemap Startseite Kontakt Impressum Hilfe-, Suchfunktion Orientierungslinks

usability // martin hahn // 2010 Alternative Navigationsmittel Tag-Cloud Sitemap Stepping / Paging Seiteninterne Links

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.

usability // martin hahn // 2010 Reiter / Tabs Bekannte Metapher Klare Hierachie

usability // martin hahn // 2010 Navigationswording Home FAQ Sitemap Guided Tour Login / Logout Newsletter Download Über / About us Warenkorb Verständlichkeit vor Kreativität

usability // martin hahn // 2010 Suche Eine der wichtigsten Schnittstellen zwischen Besucher und Webseite. Muss sinnvolle Ergebnisse liefern. Ab ca. 200 Unterseiten notwendig.

usability // martin hahn // 2010 Formulare Keine unnötigen Felder. Pflichtfelder kennzeichnen. Eindeutige Feldbezeichnungen. Eindeutige Fehlerhinweise. Korrekt ausgefüllte Felder merken.

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.

User Interface Design form follows function?

usability // martin hahn // 2010 “Ein Ding [...] soll seinem Zweck vollendet dienen – das heißt, seine Funktion praktisch erfüllen.” (Gropius)

usability // martin hahn // 2010 Pagedesign Konventionen Zurück zur Startseite-Link Seitensuche

usability // martin hahn // 2010 Pagedesign Konventionen Interne Links Werbung / Banner

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!

usability // martin hahn // 2010 Grids are good

usability // martin hahn // 2010 Farben Ästhetische und psychologische Wirkung Informationsleitfunktion Ausreichender Kontrast zwischen Text und Hintergrund Farbenwirkung und -kontraste beachten!

usability // martin hahn // 2010 Icons als Kommunikationshilfe Ein Icon sagt mehr als tausend Worte. Erleichtern die Informationsaufnahme. Bieten Orientierung. Müssen erlernt & bekannt sein!

usability // martin hahn // 2010 Produkte sind nicht ästhetisch neutral!

usability // martin hahn // 2010 Webseiten sind nicht ästhetisch neutral!

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!

usability // martin hahn // 2010 Webseiten vermittlen immer eine Ästhetik!

readability texte im internet liest sowieso keiner…

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!

usability // martin hahn // 2010 Die Folgen…

usability // martin hahn // 2010 Headline / Claim Einführung in die Seite. Aussagekräftig, klar, verständlich!

usability // martin hahn // 2010 Abstract / Teaser Blickfang Erste Inhaltszusammenfassung. Lockmittel, um den User zum Weiterlesen zu animieren.

usability // martin hahn // 2010 Überschriften & Seitentitel Artikel mit Überschriften und Zwischenüberschriften strukturieren. Besser einfache, aussagekräftige als interessant klingende Überschriften.

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

usability // martin hahn // 2010 Content Usability

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.

usability // martin hahn // 2010 Weißraum Hilft die Seite zu strukturieren. Bietet dem User Orientierung. Zeigt inhaltliche Zusammenhänge auf.

usability // martin hahn // 2010 Textauszeichnungen Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen Lesbarkeit erhöhen Seite strukturieren Inhaltliches herausstellen

usability // martin hahn // 2010 Listen / Tabellen Schnelle Informationsaufnahme Übersichtlich “Auf den Punkt gebracht.”

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

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.

usability // martin hahn // 2010 Gut lesbarer Text

usability // martin hahn // 2010 Pageflow & Readability

usability // martin hahn // 2010 Die umgekehrte Pyramide Typischer Aufbau von Artikeln. Überschrift & wichtigste Informationen Wichtige Informationen Details

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

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.

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.

einfach für alle zugängliche webseiten

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

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.

usability // martin hahn // 2010 Gebrauchstaugliche HTML-Seiten Alternative Stylesheets (Print, mobile Geräte) Sinnvoller Seitentitel Sprechende URLs Keine Frames und Pop-Ups Individuelle Fehlerseite

usability // martin hahn // 2010 Technische Voraussetzungen der User

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.

usability // martin hahn // 2010 Warum Usability? Usability ist ein Differenzierungsmerkmal. Usability ist harte Arbeit. Die Investition lohnt sich: Return on Investment.

usability // martin hahn // 2010 Das bringt Usability Mehr Umsatz Mehr Anfragen Mehr Besucher Höhere Kundenzufriedenheit Stärkere Kundenbindung

diskussion gute seiten, schlechte seiten

usability // martin hahn // 2010 Usability – Best Case ;-)

http://praesentationen24.de	88
http://www.slideshare.net	21
http://webcache.googleusercontent.com	1
http://static.slidesharecdn.com	1

Web-Usability

by Martin Hahn on Sep 24, 2009

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 111

Statistics

Web-Usability Presentation Transcript