Autor: Rüdiger Alte – im April 2015 URL - Teil 1: http://www.imarketinx.de/artikel/ohne-web-usability-ist-alles-andere-nichts-teil-1-16-04-2015.html URL - Teil 2: http://www.imarketinx.de/artikel/ohne-web-usability-ist-alles-andere-nichts-teil-2-29-04-2015.html Ohne Web-Usability ist alles andere nichts – Teil 1 Entscheidend für den Erfolg jeder Website: Benutzerfreundlichkeit Kurz und knapp auf einen Blick Usability bedeutet Benutzerfreundlichkeit oder Gebrauchstauglichkeit z. B. eines technischen Gerätes oder einer Website. Userinnen und User suchen im Internet gezielt nach Informationen. Sie wissen, was sie erfahren möchten. Nur wissen sie nicht immer, wie sie an diese Informationen kommen. Benutzerfreundlich gestaltete Websites erleichtern den Besucherinnen und Besuchern einer Internet-Präsenz das Auffinden von Informationen. Gut durchdachte Usability führt die Nutzerinnen und Nutzer einer Website wie von allein zu ihren Zielen. Usability bietet gute Erfahrungen und Zufriedenheit. Web-Usability bringt mehr BesucherInnen, mehr KundInnen und mehr Umsatz. Was ist Usability Usability heißt wörtlich übersetzt Gebrauchstauglichkeit, Benutzerfreundlichkeit. Beispiele: Ein Telefon ohne Lautsprecher ist nicht gebrauchstauglich; ein Fernseher ohne Fernbedienung ist nicht benutzerfreundlich (und nicht jede Fernbedienung ist benutzerfreundlich!). Elemente guter Usability Eine gut durchdachte Usability weist folgende Merkmale auf: einfach übersichtlich selbsterklärend zuverlässig (robust) zielführend Web-Usability befasst sich nicht nur mit der Navigationsstruktur einer Website, sondern umfasst zugleich auch die Strukturierung der Inhalte, die Aufbereitung von Texten, die farbliche und formale Gestaltung (Kontraste, Hintergrund, Texte, Grafiken und Bilder). Frustration – Folgen schlechter Usability-Erfahrungen Wir alle haben schon Erfahrungen gemacht, wie mangelhafte Usability auf uns wirkt: Wir werden frustriert, ärgerlich, fragen uns: liegt das nun an mir oder an der Website? Wir konnten nicht das finden, was wir suchten, obgleich die Informationen irgendwo vorhanden sein mussten. Eine unübersichtliche und nichtssagende Navigation lässt uns im Regen stehen. Wir können die Schrift kaum lesen aufgrund des fehlenden Kontrastes. Unaufgefordert einfliegende Empfehlungsfenster und aufdringliche Werbung lenken uns von unserem Vorhaben ab. Unzureichende Usability bewirkt vor allem eins: Wir werden diese Website nie wieder besuchen. Warum Usability für jede Website wichtig ist Web-Usability ist das A&O einer Website, Grundlage und durchgängiges Programmierungsprinzip. Ohne durchdachte und gute Web-Usability ist alles andere Nichts. Da kann das Design noch so schön und inspirierend sein, der Inhalt noch so neu und einzigartig – wenn wir uns nicht zurechtfinden oder permanent gestört werden, wenden wir uns einer anderen Website zu. Usability spart Kosten und bringt mehr Besucherinnen und Besucher Wird Usability von vornherein in die Konzeption und Programmierung einer Website einbezogen, führt das zu Kostensenkung: Entwicklungskosten und -zeit für die Website werden reduziert; nachträgliche Anpassungen werden größtenteils vermieden; die Kosten für die Wartung der Website werden minimiert. Besuchszahlen einer Website lassen sich durch gute Web-Usability enorm steigern, da Informationen leicht und schnell gefunden werden; die Zufriedenheit der BenutzerInnen steigt, wenn die Website sich einfach bedienen lässt; Erfolgserlebnisse vermeiden Stress und Ärger – die UserInnen kommen wieder. Usability ist ein Dialog mit den Kunden Usability ist ein Dialog zwischen dem Betreiber einer Website und den Userinnen und Usern der Homepage mittels Software (Website) in einer bestimmten Umgebung (Browser, PC, Bildschirm). Gute Usability sorgt dafür, dass die Userinnen und User diesen Dialog fast nicht bemerken, sondern wie von Geisterhand durch die Website geführt werden – intuitiv. Hinter diesem „Intuitiv“ steckt jedoch jede Menge Vorarbeit und Planung: Wer sind die Userinnen und User meiner Website? Welche Informationen suchen diese Userinnen und User? Wie strukturiere ich diese Informationen? Welche Navigationen sind dafür sinnvoll? Wie bereite ich die Informationen auf? Welche Techniken sind dafür notwendig? Mangelnde Usability hat zur Folge: Frustration Ärger Abwendung Gute Usability hat zur Folge: Zufriedenheit Freude Wiederkehr Lesen Sie in Web-Usability Teil 2: Wie funktioniert Usability? – Performance und Usability. – Dos and Don‘ts. Ohne Web-Usability ist alles andere nichts – Teil 2 Entscheidend für den Erfolg jeder Website: Benutzerfreundlichkeit Wie Web-Usability funktioniert Seh- und Anwendungsgewohnheiten der NutzerInnen werden bei der Entwicklung einer Website von Anfang an berücksichtigt. Beispiel: Die Hauptnavigation ist entweder links (vertikal) oder oben (horizontal). Sehgewohnheiten sind kein Dogma. Benutzerfreundliche Neuerungen sorgen für angenehme und erhellende Überraschungen und nicht für Frustration und Ärger. Beispiel: Gewohntes wird in einen anderen Kontext gestellt und damit klarer und einleuchtender – z. B. überraschend andere Navigation, die übersichtlicher sind und sich leichter bedienen lassen. Nur das wird verwendet, was die NutzerInnen zum Ziel führt; alles Überflüssige wird ausgesondert. Beispiel: Grafiken und Bilder werden nur zur Illustration oder zur Erläuterung von Inhalten verwendet. Die eingesetzte Technik funktioniert selbsterklärend und intuitiv und wird auf Gebrauchstauglichkeit geprüft. Beispiel: Navigationen, Slider, Bildergalerien, Carousels, alles wird getestet auf Zugänglichkeit (Accessibility) und Funktionalität, in jeder Phase der Entwicklung einer Website, bis sie online geht. Jede Wiederholung hat einen bestimmten Zweck; unnötige Wiederholungen werden vermieden. Beispiel: Eine Seitenübersicht im Footer und auf einer Extraseite – (Sitemap) – wiederholt die Navigationsstruktur der Website, damit sich die Userinnen und User leichter orientieren können. Worauf Sie bei Web-Usability achten sollten Eine gut durchdachte Usability beantwortet folgende Fragen: Welche Problemlösung sucht die Nutzerin meiner Website Wie sieht ein User die Webseite Was darf ich an Wissen und Können bei meinen Besuchern voraussetzen Welche Technik unterstützt meine Kundinnen bei der Lösung seines Problems Welche Qualität muss ich liefern und welche Qualität kann ich liefern Welche Inhalte (Content) biete ich in welcher Verpackung (Design) an Beispiel für schlechten Kontrast zwischen Schriftfarbe und Hintergrund. Wie lange können sie den Text auf mietauto-vergleich.de lesen? Ich habe es nach zehn Sekunden aufgegeben. Die Website folgt einer zurzeit modischen Vorliebe von WebdesignerInnen. Was man für Web-Usability tun sollte … Web-Usability wird gefördert durch übersichtliche Seitenstruktur verständliche Menüpunkte schnellen Seitenaufbau leichtes Auffinden von nützlichen Informationen kurze und lesbare Texte Verwendung von Überschriften funktionierende Links zum Produkt und zu den Kunden passendes Design kontraststarke Farbgestaltung Die Website unternehmer.de bittet darum, erst zu liken und dann zu lesen. Solche Seiten klicke ich sofort weg. … und was man lassen sollte Vermeiden Sie folgende Web-Usability-Fehler: Fehler im Code (HTML, CSS, JavaScript) zu kleine Schrift und mangelnder Schrift-Hintergrund-Kontrast (grau-in-grau) starres Layout (nicht-responsive Website) Blockade der Webseite durch Popups, Layer Ads oder Interstitials Verkleinerung des Viewports durch Sticky Ads oder Sticky Banner zu tiefe Schachtelung der Navigation Links, die ins Nirwana führen Testen Sie Ihre Website Sie können Ihre Website einem kurzen Test unterziehen, der Ihnen erste Eindrücke darüber vermittelt, wie die Seite bei NutzerInnen ankommt. Beachten Sie bitte, dass dieser Test lediglich erste Hinweise auf die Usability Ihrer Website gibt. Bitten Sie zwei bis fünf Bekannte, Freunde und Kollegen, sich eine halbe Stunde Zeit zu nehmen, um Ihre Website zu testen. Diese Personen kennen natürlich Ihre Website bislang nicht. Die Testpersonen sollten sich strikt an das folgende Test-Schema halten. Die Testpersonen schildern Ihnen ihre gewonnenen Eindrücke, die Sie dann zur Verbesserung der Web-Usability Ihrer Website verwenden können. Die Testpersonen werden überwiegend schweigend vorgehen. Fordern Sie Ihre Testpersonen daher dazu auf, ihr Vorgehen auf der Website und ihre Eindrücke zur Usability ständig zu kommentieren. Vergessen Sie nicht, Ihren Testpersonen eine kleine Belohnung zukommen zu lassen („Buy me a beer“). Kurzer Usability-Test Anweisungen an die Testpersonen 1. Rufen Sie bitte die Website "http://www.IhreDomain.de" auf. Betrachten Sie genau sechs (6) Sekunden diese Website. Schauen Sie nun bitte weg und erzählen Sie, was Ihnen von der Website in Erinnerung geblieben ist. 2. Bitte beschreiben Sie kurz, wie die Website im ersten Augenblick (nach den sechs Sekunden) auf Sie gewirkt hat: Was haben Sie gefühlt, was assoziiert? Wie wirken die Farben und das Design auf Sie? Könnten Sie sich vorstellen, auf dieser Webseite zu bleiben? Ist Ihre Neugier geweckt worden? 3. Bitte rufen Sie erneut die Website "http://www.IhreDomain.de" auf. Versuchen Sie bitte, die Information XYZ zu finden. Schilden Sie bitte währenddessen Ihre Gedanken und Gefühle. 4. Versuchen Sie nun, sich anhand der Navigationselemente (Menüs) durch die Website zu bewegen. Schilden Sie bitte währenddessen wiederum Ihre Gedanken und Gefühle, ob Sie sich gut zurechtfinden: Ist die Website übersichtlich? Kommt man leicht dorthin, wo man hin will? Findet man leicht wieder zurück? 5. Schauen Sie bitte jetzt auf den Inhalt. Wird schnell deutlich, worum es auf dieser Website geht, was angeboten wird? Sind die Texte verständlich und übersichtlich? Erfahren Sie rasch, was Sie wissen wollen? 6. Wie passen Inhalt und Design zueinander? Gibt es Widersprüche? Was passt, was passt nicht? 7. Wie wirkt die Website jetzt auf Sie, nachdem Sie sich ein wenig mit ihr beschäftigt haben? Wie reagieren Sie auf die Farben, Bilder, das Design? 8. Was würden Sie ändern, was anders machen? 9. Vielen Dank für Ihre Unterstützung! Performance – ein wichtiges Kriterium für Usability Ohne eine gute Performance Ihrer Website werden Ihre Inhalte und Ihr schönes Design vielleicht gar nicht erst wahrgenommen. Wenn Ihre Website langsam lädt, werden die Userinnen und User mit großer Wahrscheinlichkeit abspringen, bevor die Inhalte der Webseite sichtbar werden – die Geduld der NutzerInnen ist sehr begrenzt. Rechnen Sie nicht mit mehr als drei Sekunden. Auch für Google ist die Ladezeit ("page speed") ein wichtiges Kriterium zur Bewertung von Websites. Die Latenzzeit zwischen Auslösen eines Vorgangs (z. B. durch klicken eines Buttons) und der spürbaren Reaktion darauf darf sich nicht zu einer Wartezeit ausdehnen, die mehr als zwei bis drei Sekunden dauert. Der HTTP-Request ist so gering wie möglich zu halten. Bei jedem Bild (natürlich komprimiert), bei jeder Video-Einbindung und sonstigen Erweiterungen sollte man gut überlegen: Benötige ich das wirklich? Hilft das meinen Besucherinnen und Besucher weiter? Geht das nicht auch auf anderem Wege? Tipps für eine gute Website-Performance Halten Sie Ihren Code schlank (HTML, CSS, JavaScript). Machen Sie aus mehreren CSS-Dateien eine. Gehen Sie genauso bei JavaScript-Dateien vor. Platzieren Sie die Einbindung der JavaScript-Dateien ans Ende Ihrer HTML-Datei – vor den body-End-Tag (). Binden Sie JavaScript-Dateien nur auf den HTML-Seiten ein, auf denen diese Scripte auch benötigt werden. Komprimieren Sie Ihre CSS- und JavaScript-Dateien. Komprimieren Sie Ihre JPEG-Bilder und PNG-Grafiken. Vermeiden Sie jeglichen Ballast.