Bevor es im Thema Redaxo Workshop weitergeht möchte ich erst einmal ein Thema dazwischen schieben, was sich hier meiner Meinung nach am besten macht. Wir stellen uns einmal die Frage ob Usability für SEO zwingend nötig ist.

Was ist überhaupt Usability?

Wikipedia referenziert Usability folgendermaßen: Benutzerfreundlichkeit bezeichnet die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System (Quelle: wikipedia.de)

Was sagt uns dieser Satz? Wir wollen unserem Besucher ein Gefühl geben, dass er unsere Seite wieder besucht. Wir möchten seinem Gedächtnis einen kleinen Schub geben sich an uns zu erinnern. Dazu zählen Farben, Funktionen, Einizigartigkeiten und vieles mehr. Auf einige Punkte möchte ich in diesem Post eingehen.

Warum kümmern wir uns überhaupt um Usability?

Um es kurz zu fassen - um besser zu sein als andere und Besuchern einen gemütlichen und professionellen Eindruck von uns und unserer Seite zu geben. Halten wir das mal an einem "Real"-Beispiel fest. Stellen wir uns eine kleine Bäckerei vor. Die nette Dame hinter den Tresen steht zwar recht ansehnlich vor uns und erwartet unsere Bestellung, kann aber nicht genau sagen was in dem Produkt XY alles verarbeitet wurde. Dieselbe Bäckerei noch einmal, nur mit "geschultem" Personal. Hier wird uns direkt weitergeholfen, wir werden beraten und bekommen noch andere Sachen empfohlen, die uns schmecken könnten. Jetzt stellen wir uns das ganze noch einmal im Web-Format vor. In vielen Shop spricht man hier von Cross-Selling (um bei obigen Beispiel zu bleiben). Der (zum Beispiel ein xt:Commerce) Shop empfiehlt uns Dinge, die uns auch gefallen könnten. Das ist ein Schritt in Richtung Usability. Wir bieten unserem Besucher einen Mehrwert mit unserer Seite. Das ist aber nur eine Facette der Usability. Stellen wir uns einmal vor, ein blinder Besucher kommt auf unsere Seite. Dieser möchte natürlich dieselben Informationen bekommen wie andere auch. Hier fällt unter anderem auch das Stichwort "Barrierefreiheit". Hierüber hat Martin Mißfeldt, Betreiber des Blogs tagseoblog.de einen interessanten Bericht geschrieben in welchem dargestellt wird, wie eine blinde Person eine Webseite wahrnimmt.

Welche Formen gibt es nun in Sachen Usability?

Hier wird das Thema erst richtig interessant. Es ist alles erlaubt, was hilft die Webpräsenz interessanter und userfreundlicher zu gestalten. Gute Mittel sind zunächst solide Kenntnisse in HTML und CSS. Allein durch diese zwei Grundfaktoren im Webdesign lassen sich viele Sachen userfreundlich realisieren. Man stellt sich z. B. folgende Situation vor:

Wir betreiben einen Blog bzw. eine Webseite zum Thema Kochen, auf welchem wir viele Downloads anbieten, wie z. B. Kochrezepte, Tipps, Verarbeitungshinweise usw. Sagen wir, die Download-Seite umfasst ca. 80 Links. Ist viel oder? Davon abgesehen das das SEO-technischer Murks ist, bleibt aber die Tatsache bestehen dass die Seite sehr lang wird und übersichtlich in welcher Zeile man gerade den Titel des Downloads liest. Jetzt geht der gewiefte SEO oder Webseiten-Betreiber her und verpackt das ganze schon einmal in eine zweispaltige Tabelle - linke Spalte der Datei- bzw. Downloadname und Rechts ein Download-Button (Urzeit-Web lässt grüßen ). Jetzt haben wir das ganze schon einmal Code-Technisch einmal aufgeräumt - sieht auch aufgeräumt aus. Zwar schon super soweit aber immer noch nicht wirklich benutzerfreundlich. Nun kommen unsere Profi-mäßigen CSS-Kenntnisse an die Reihe. Wir vergeben für die einzelnen Zeilen extra Klassen (z.B. jede gerade Zeile Weiß, ungerade Grau). Schon wirkt das wieder etwas professioneller. Um das ganze jetzt noch hervorzuheben, dass wir uns in Zeile XY bewegen, ergänzen wir unseren CSS-Code noch mit einer :hover-Klasse für die Zeile. Jetzt haben wir den Effekt, dass die aktuelle Zeile in der sich unser Cursor befindet farblich hervorgehoben wird.

Erinnern wir uns einmal an Martins Blogeintrag. Um das ganze wirklich barrierefrei und seo-technisch fit zu machen müssen bzw. sollten wir alle Möglichkeiten des Codes nutzen um der Seite genug Informationen zukommen zu lassen. So bietet das Tag "Table" beispielsweise die Option unserer Tabelle eine Zusammenfassung zukommen zu lassen. In diesem Fall heißt der Zauber "summary". Summary ist also für eine Tabelle eine Zusammenfassung, welche auch von Google und Screenreadern gelesen wird. Gar nicht so schwer bisher, oder?

Etwas für das Auge darf es auch sein

Nun ist Usability nicht nur eine Ansammlung von HTML-Code. Mit neuen Methoden wie javascript-Frameworks wie jQuery oder Mootools können wirklich viele Sachen realisiert werden, die einen kleinen Mehrwert für unsere Besucher darstellen. Nehmen wir auch hier wieder ein kleines Beispiel aus der realen Welt. Wir betreiben jetzt statt einer Bäckerei beispielsweise eine kleine Werbeagentur. Die Agentur läuft gut - wir verkaufen Webdesign, Logos und sonstige Printsachen. Da wir von unserer Arbeit überzeugt sind, möchten wir diese auf unserer Webseite werbe-effektiv anbringen in Form eines Portfolios. Anfangs genügt es für jede dieser drei Sparten eigene Seiten bzw. Unterseiten mit Portfolio - Bildern anzuzeigen sowie eine Navigation erstellen zu lassen.

Jetzt zieht einige Zeit ins Land und unsere Agentur wird bekannter. Unser Leistungsspektrum im Web teilt sich nun in Blog-/Shopdesign, Content Management Systeme und statische HTML Seiten. Natürlich können wir jetzt noch mehr Unterseiten anlegen, was unsere Struktur wieder durcheinanderbringt und mit Mehraufwand verbunden ist. Nachteil für den Besucher - er muss mindestens 1x mehr klicken um an gewünschte Informationen zu kommen. Im Falle eines Shops bedeutet dies wieder eine geringere Chance auf einen erfolgreichen Verkauf. Zurück aber zur Agentur. In diesem Fall könnte man mittels jQuery die Ausgabe sortieren, wie Jeffrey Way (Betreiber der Seite nettuts.com) im Screencast "Quick and Easy Filterung with jQuery"zeigt. Jetzt kann unser Besucher gemütlich die Ausgabe nach seinen Wünschen filtern lassen.

Womit kann man die eigene Webseite noch benutzerfreundlicher gestalten?

Jetzt stellt man sich die Frage wo die Vorstellungskraft hier aufhören kann. Ihr könnt mir glauben, je weiter die Technik geht desto mehr Möglichkeiten gibt es. Man muss nur die Idee haben und dies dann umsetzen. Usability bedeutet nicht nur die Erweiterung sondern auch das optimieren von seitentypischen Funktionen. Nehmen wir z. B. die von Apple bekannte Suche. Viele Seiten bieten als Ausgabe eine Ergebnisseite an. Wer die Webseiten von Apple kennt weiß, dass die Suchergebnisse direkt im bzw. unter dem Suchfeld angezeigt werden. Der Besucher muss also nicht erst die Ergebnisseite anschauen. Diese Funktionen gibt es auch für normale Webseiten. Wie man das einbaut ist natürlich die andere Sache.

Warum machen wir das ganze und was hat das mit SEO zu tun?

Mittlerweile haben wir eine gute Vorstellung davon was Wikipedia mit der Erklärung zur Usability uns mitteilen möchte. Webseiten werden für Menschen gemacht. Maschinen bzw. Suchmaschinen ist es egal ob die Seite nun das geile Plugin für dynamische Suchergebnisse oder das Plugin mit der kann-man-kaum-beschreiben-so-geil-ist-das-Funktion. Für eine Suchmaschine wird eine Webseite (jedenfalls in der nächsten Zeit) Code bleiben. Nicht mehr und nicht weniger. Bei einer nett aufbereiteten Seite wird unser Werk aber in die Suchergebnisse einfließen und uns Besucher bescheren. Diese wiederum können etwas mit unserem Angebot an Usability-Funktionen anfangen. Wenn diese jetzt noch super eingesetzt sind haben wir eventuell wieder einen Stammbesucher. Was will man mehr?

Abschließendes

Wie gesagt habe ich das Thema Usability nur knapp angekratzt. In Zukunft wird sicher noch einiges zum Thema Usability und SEO folgen. Das Thema ist wirklich schier unerschöpflich. Nicht zuletzt tragen tolle Blogs dazu bei, dass gutes Wissen sehr schnell verbreitet wird. Einige gute Links findet Ihr im Anhang des Beitrags. Das war es für heute

Edit: Landingpage Optimierung genauso wichtig wie SEO selber

Tameco hat heute einen Beitrag veröffentlicht, der inhaltlich perfekt das widerspiegelt und vertieft was ich in diesem Beitrag über SEO-Usability versucht habe zu erklären. Wer wissen möchte, warum die Optimierung von Landing Pages wichtig auch in Bezug auf SEO ist, dem empfehle ich den folgenden Beitrag Landingpage Optimization so wichtig wie SEO.Wie ich finde ein sehr gelungener Beitrag von Tameco, was wieder einmal zeigt wie wichtig Usability heutzutage ist.

Weiterführende Links

• Nettuts.com - Jeffrey Way - Screencasts, Beiträge und mehr
• Usability Tutorials für Mootools und jQuery
• Chris Coyier - der Mann für alle (CSS)-Fälle, aber auch jQuery.