Webusability – Was muss ich beachten?

Webusability ist wichtig für deine Homepage. Lese hier warum.

Das Internet ist längst ein fundamentaler Bestandteil im Leben vieler Menschen geworden. Die Masse an Internetusern steigt und die technischen Möglichkeiten die Betreibern von Webseiten im Internet zur Verfügung gestellt werden, werden von Tag zu Tag besser. Doch, je mehr Technik die Webseitenbetreiber benutzen, desto mehr muss ein Webmaster darauf achten, dass er nicht Besucher seiner Seiten ausgrenzt. Nicht jeder Besucher verfügt über die nötigen Plugins und Einstellungen, die zum Betrieb technisch versierter Internetseiten notwendig sind und so kommt es immer wieder vor, das einige Besucher vor verschlossene Tore gestellt werden – Was für den Webmaster auch automatisch den Verlust eines potentiellen Kunden bedeuten kann.

Oft gehen die Vorlieben und Wünsche (was die Gestaltung einer Seite angeht) zwischen Nutzer und Anbieter einer Internetseite erheblich auseinander. Die Anbieter von Webseiten bestehen auf aufwendige Grafiken und ein Design, mit dem Sie ihre Besucher „beeindrucken“ können. Besucher wollen hingegen eine Seite die schnell lädt, übersichtlich und leicht zu verstehen ist.

User wollen Content und User wollen die Seite im vollen Umfang nutzen können. In diesem Bericht soll es darum gehen, einmal kurz zu Hinterfragen wie eine Webseite eigentlich aus Sicht des Besuchers gestaltet werden soll – Den schließlich sind die Besucher es, die für den Erfolg oder das Scheitern einer Webseite verantwortlich sind ...


1). Grundlegendes zum Aufbau einer Internetseite.

Das wichtigste was es bei einer Internetseite zu betrachten gibt, ist der Aufbau! User wünschen sich hier ein intuitives Design, das den ergonomischen Gegebenheiten angepasst ist und das nach „unausgesprochenen Grundsätzen“ angelegt ist. So ist es in der westlichen Welt üblich, von links nach rechts zu lesen und Dinge von oben nach unten zu betrachten. Diese wesentlichen Koordinaten sollte der Webmaster immer im Hinterkopf behalten und sein Design sollte sich an diesen Gegebenheiten orientieren.

Ein anderer interessanter Aspekt ist, dass unsere Blicke als erstes eher in die Mitte einer Webseite wandern. Wir zentrieren unseren Blick, versuchen Ordnung in das zu bringen was dort auf dem Monitor aufgebaut wird und dies geschieht oft vom Mittelpunkt der Seite aus. HTML stellt ein Mittel zur Verfügung, das diese Einteilung des Bildschirms erleichtern soll, so genannte „Frames“. Allerdings sind Frames (in meinen Augen) nur semioptimal – zwar lässt sich die Aufteilung des Bildschirms erreichen, doch haben vor allem ältere Browser Probleme damit, sie anzuzeigen. Setze ich Frames ein, kann es sein, dass mein Browser einige Teile der Webseite abschneidet und durch andere Frames verdeckt oder der Benutzer hat die Freiheit die Höhe und Breite von Frames zu verändern, was sich auf das Aussehen aller anderen Bereiche einer Webseite auswirkt. Auch der (immer wichtiger werdende) Suchmaschinen – Aspekt darf nicht aus den Augen gelassen werden ...

Wer ein gutes Ranking in den Suchmaschinen haben will, kann mit Frames auf die Dauer Probleme kriegen, da Suchmaschinen jede HTML-Seite (die sich hinter einem Frame versteckt) einzeln aufnimmt und die Benutzer der Suchmaschinen so auf Seiten gelangen, die vollkommen aus dem Kontext gerissen sind und zum Beispiel keine Navigation aufweisen.

Ich tendiere daher eher zu statischen Seiten, die nur aus jeweils einer Webseite bestehen und den Bildschirm eher indirekt aufteilen. Solche Seiten sind für unerfahrene Nutzer intuitiver und einfacher zu handhaben. Außerdem erlauben sie eine bessere Möglichkeit zur Optimierung in Suchmaschinen. Wenn Frames eingesetzt werden, sollten diese über einen entsprechenden <noframe> - Tag verfügen, der Nutzern (deren Browser keine Frames unterstützen) anzeigt, dass sie diese Seite nicht laden können und einen Link gibt, wo sie Rat finden.


2). Das „Wo bin ich eigentlich?“

Wir haben nun schon etwas über den technischen Aufbau und über die ergonomische Gestaltung von Webseiten gelernt, nun müssen wir dem Besucher noch einen „Ankerpunkt“ geben. Einen Punkt, an dem seine Blicke verweilen können und der ihm sagt: „Du bist hier“! Mit dem Wissen aus dem letzten Absatz vereint, scheint es sinnvoll ein Logo zu positionieren, dass sich nicht ändert und auf allen Seiten und Unterseiten immer an genau der gleichen Stelle erscheint. Dieses Logo sollte am Besten in der oberen linken Ecke platziert sein – Hier würden wahrscheinlich auch sie am ehesten danach suchen, oder? Neben einem Logo scheint es (vor allem bei großen und umfangreichen Seiten, wie Webkatalogen etc.) sinnvoll einen „Linkpath“ zu liefern der dem User zeigt, wo er relativ zur Startseite steht.

Das heißt, welchen weg er von der Startseite gemacht hat um zu dieser Seite zu kommen. Viele Große Seiten nehmen dieses Prinzip auf und so findet man auf den einzelnen Unterseiten dann oft solche Konstrukte: Sie sind hier: MeineSeite.de -> Katalog -> Autos -> Ferarri -> F340

Wobei die einzelnen Teile dieses Linkpaths jeweils mit einem entsprechendem Link unterlegt sind. Der User wird so an die Hand genommen und wenn er sich verlaufen hat, kann er schnell an einen Platz zurückkehren, der ihm vertraut ist und auf der er allgemeinere Informationen findet.

Und wenn ich doch mal nicht weiter weiß? Selbst routinierten Internetnutzern kommt es hin und wieder vor, dass Sie nicht den Inhalt finden, den Sie suchen und dass Sie sich in größeren Seiten etwas verlaufen. Ist hier kein Linkpath vorhanden, sollte der Benutzer auf jeden Fall einen Link finden, der ihn zurück zur Startseite bringt. Von hier aus kann der Besucher dann erneut seinen Weg durch die Seite suchen. Der Link zur Startseite sollte immer an der gleichen Stelle zu finden sein, damit der Besucher nicht erst lange gucken muss „wo ist denn dieser blöde Link zur Startseite“ ...

Als letztes Aspekt des „wo bin ich“ sollten Webmaster sich über einen grafisch intuitiven Seitenaufbau Gedanken machen. So ist es absolut wichtig, ein Design über alle Seiten bei zu behalten. Behalten Sie die grundlegenden Design- und Aufbauelemente bei. Wechseln Sie nicht in Farben und selbst bei Wechseln in der Schriftart oder in der Schriftform sollten Sie aufpassen. Für die Schriftart und die Schriftform, sowie für das äußere Erscheinen von Texten, empfiehlt es sich die Möglichkeiten von CSS-Sheets in Betracht zu ziehen, die es erlauben Vorlagen für die Ausgestaltung von Texten zu definieren. So zeigen Sie ihrem Besucher immer wieder „Ja, du bist noch auf meiner Seite“.


3). Click, Click: Die Navigation.

Das Kernelement einer jeden Seite ist die Navigation. Hier beginnt die Suche nach Inhalten (und oft endet Sie hier auch schon)! Die Navigation orientiert sich extrem an den in 1. genannten Koordinaten. Die wichtigsten Punkte (inkl. einem Link zur Startseite) sollten Sie in einer „Top-Navigation-Bar“ im oberen Bereich der Seite verpacken. Die eigentlich Navigationsleiste sollten Sie auf die Linke Seite setzen und hier sollte Sie sich soweit oben wie möglich befinden (aber unter der „Top-Navigation-Bar“). Die Navigation bildet eine Einheit und alle Elemente die zur Navigation gehören sollten hier mit reingepackt werden. Wichtige Links gehören nicht an das Ende einer Seite oder auf die rechte Seite. Suchformulare haben in der Navigation nichts zu suchen: Trennen Sie den Navigationsbestandteil klar von anderen Bestandteilen Ihrer Seite. Webmaster können Besucher an die Hand nehmen, in dem die Unterseiten (auf denen der User gerade aktiv ist) im Navigationsmenü hervorgehoben werden (zum Beispiel durch andere Hintergrundfarben).


4). Alles so schön bunt! Bilder, Farben und was ist mit den Ladezeiten?

Roter Hintergrund, grüner Text und zwischen drin ein cyan-farbendes, blinkendes Männchen! Wir alle kennen solche Fehlgriffe. Manche Webmaster scheinen ganz einfach farbenblind zu sein und wissen gar nicht, was Sie ihren Besuchern antun. Kein Besucher wird sich lange auf so einer Seite aufhalten. Wenn ihm die Augen wehtun wird er die Seite verlassen, da können die Informationen noch so interessant sein. Achten Sie daher auf eine dezente Farbgebung.

Wenn man sich große Seiten anguckt stellt man fest, dass diese oft auf wenige Farben setzen. Der Text setzt sich deutlich vom Hintergrund ab (oft wird eine Schwarz/weiß Kombination verwendet). Farbe kommt oft nur durch ein „Rahmenlayout“ ins Spiel, wo zum Beispiel die Hintergründe der Navigation eingefärbt sind.

Benutzen Sie Farben also dezent nicht nur um die Augen Ihrer Besucher zu schonen, sondern auch um die Seite einfach zu halten! Farben dienen nicht nur als Designmittel, sondern auch als Abgrenzungsmittel. So kann sich die Farbe ändern wenn sich der Inhalt eines Textabschnittes ändert oder wenn der Besucher in einen Inhaltlich anderen Bereich der Seite gerät. Viele verschiedene Farben (auch wenn Sie zusammen passen) verwirren den Besucher unnötig. Das gilt auch für die Form des Textes – fahren Sie „klare Linie“.

Das Problem bei Bildern besteht vor allem in der Größe. Immer mehr gerät in Vergessenheit, dass es auch noch Nutzer mit Modemanschluss gibt. Ich zum Beispiel surfe immer noch über mein gutes, altes, Modem. Es tut schon seit 6 Jahren seine Pflicht und große Alternativen bieten sich mir nicht. Aufwendige Grafiken bergen leider lange Wartezeiten und das bekommen Modemnutzer immer deutlicher zu spüren.

Wenn Sie eine Grafik einsetzen, dann optimieren Sie diese für das World Wide Web. Da gibt es zum Beispiel Grafiksoftware mit der Sie den benötigten Speicherplatz und somit die Ladezeiten von Grafiken (ohne merkliche Verluste) reduzieren können. Eine andere Alternative geht ganz ohne Software: Wählen Sie schon beim Erstellen der Grafik die Höhe und Breite, mit der die Grafik später auf der Webseite erscheinen soll. Je größer eine Grafik ist, desto mehr Speicher braucht sie und desto länger dauert es sie zu laden. Wenn Sie also eine große Grafik anfertigen und diese auf der Webseite verkleinern (über die HTML-Tags), so ist hier mit längeren Wartezeiten zu rechnen als wenn Sie die Grafik gleich in Originalgröße angelegt hätten.

Andererseits können auf Webseiten vergrößerte Objekte zu positiveren Ladezeiten führen – allerdings sinkt hier die Qualität der Grafik oft merklich. Die Ladezeit ist ein wesentliches Kriterium beim Ausgestalten einer Webseite. Früher habe ich mal in irgendeinem Bericht den Hinweise gelesen „Maximal 100 kb. für die Startseite, sonst dauert das Laden einer Seite zu lange und der Besucher klickt sich weg“. Heute wird sich diese Zahl sicher etwas nach oben geändert haben, denn man muss immer den Kompromiss zwischen DSL-Usern und Modemnutzern im Hinterkopf haben.
User haben bei Ladezeiten größer als 1 Sekunde das Gefühl, dass die Seite nicht ohne „ruckeln“ lädt. Der Aufbau läuft verzögert ab und das wirkt negativ auf das „Gefühl“ beim Nutzer. Lädt die Seite sogar länger als 10 Sekunden werden die ersten Besucher die Seite verlassen, weil Sie noch keine Inhalte zu Gesicht bekommen haben.

Animierte Grafiken ziehen die Blicke von Besuchern an. Die Werbung hat dieses Mittel sehr schnell für sich entdeckt und so verfügt jede große Seite über animierte Werbebanner. Doch, Vorsicht beim Einblenden animierter Grafiken. Setzen Sie diese bewusst und sorgfältig ein. Nicht nur das animierte Grafiken um ein vielfaches mehr an Speicher verwenden als herkömmliche (was längere Ladezeiten zur Folge hat), sie lenken auch vom Inhalt ab. Wenn Sie also ein Interesse daran haben, dass sich Besucher für Ihre Inhalte interessieren, dann sollten Sie sich den Einsatz von animierten Bannern anderer Webseiten überlegen.

Andererseits, sollten Sie daran interessiert sein möglichst viele Werbeclicks zu erzielen (da Sie einen Werbepartner haben, der Sie nach Klicks bezahlt) sind animierte Grafiken natürlich ein tolles Feature.

Auch hier gilt: Dezent eingesetzt können animierte Grafiken hilfreich sein und den Benutzer an die Hand nehmen. Werden solche Grafiken allerdings im Übermaß eingesetzt, fühlt sich der Benutzer schnell hilflos und verloren und verliert den Überblick über die Seite.


5). Wie präsentiere ich Inhalte?

Das ist ein Punkt, über den man wahrscheinlich ganze Bücher füllen könnte (und es gibt viele Menschen, die haben das auch schon getan ;))! Hier daher nur einige, wenige grundsätzliche Aspekte dazu, wie Webinhalte gestaltet werden sollten. Auch hier erinnere ich wieder an unsere Koordinaten aus dem 1. Absatz. Texte und Inhalte sollten eine zentrale Position auf der Webseite einnehmen. Sie sind der Grund, warum die Besucher kommen und sie gehören ins Zentrum der Seite.

Texte formen grundsätzlich ein „äußeres Aussehen“. Die verschiedenen Formatierungs- und Ausrichtungsmöglichkeiten (Zentriert, Rechtsbündig ...) führen dazu, dass Texte für uns eine Gestalt ergeben. Diese Gestalt kann übersichtlich sein oder unübersichtlicher. Menschen haben es dabei natürlich einfacher Texte zu lesen, die in einer klar strukturierten Form auftreten. Am Besten merkt man das, wenn man sich mal von den Inhalten eines Textes lossagt und einfach mal auf den Monitor guckt, welche Form eigentlich die Buchstaben zusammen ergeben ...

Übrigens, es bleibt fraglich ob dieser Bericht durch den gewählten „Blocksatz“ einfacher oder schwerer zu lesen ist. Auf jeden Fall wirkt der Text aufgeräumter und das ist für mich persönlich ein wichtiges Kriterium beim Lesen eines Textes. Achten Sie also darauf, dass Sie nicht mit verschiedenen Formatierungsmöglichkeiten spielen und dass Sie ein einheitliches Bild und Aussehen Ihrer Texte und Inhalte erreichen.

Das Zusammenspiel von mehreren Objekten miteinander ist ein zentraler Bestandteil in multimedialen Inhalten. So werden Texte zum Beispiel durch entsprechende Bilder ergänzt. Hier muss man darauf achten, das Objekte die nahe beieinander liegen eine Beziehung verkörpern. Findet der Nutzer ein Bild in der Nähe eines Textes, so wird er das Bild mit dem Text in Verbindung bringen. Achten Sie darauf und fügen Sie Bilder zum besseren Verständnis ein – denken Sie dabei an den Spruch „Ein Bild sagt mehr als 1000 Worte“.

Viele Nutzer haben sicher gar keine Zeit und keine Lust einen langen Text zu lesen – Ein Bild kann dann das Lesen erheblich vereinfachen und die Kerninformationen in leicht verständlicher Form präsentieren.

Grundsätzlich gibt es eine Hand voll Dinge, die uns dazu bewegen einige Objekte gegenüber anderen vorzuziehen. Der Einsatz dieser Dinge ist für erfahrene Webmaster sehr wichtig und er kann die Usability einer Seite entscheidend verbessern (aber leider auch verschlechtern). Der wichtigste Punkt ist Bewegung. Bewegungen auf einer Webseite ziehen unsere Blicke magisch an. Wir sind neugierig und wollen wissen, was sich hinter dieser Bewegung verbirgt.

Auch die Größe spielt eine Rolle. Größere Objekte werden uns schneller ins Auge springen als kleinere und größere Objekte sind oft einfacher zu „verstehen“ und einfacher anzugucken als kleinere – daher verweilen unsere Augen für einen Moment an größeren Objekten. Weiterhin sorgen helle Farben dafür, dass wir diese Objekte eher anschauen.

Durch geschickte Überschriften und Sub-Überschriften wird der Besucher an die Hand genommen werden. Überschriften sollten die Kerninformationen enthalten, aber trotzdem kurz und knackig sein. Anstatt „Hier sind die Kernelemente der Webusability zusammengefasst“ kann eine Überschrift auch „Kernelemente der Webusability“ heißen. Der Benutzer sollte alleine durch das Lesen der Überschriften und durch Bilder auf einer Seite wissen, worum es im Allgemeinen geht!


6). Technik, Auflösung und was stört den Besucher am Meisten?!

Kommen wir nun zum letzten Punkt, den ich unbedingt noch erwähnen wollte. Hier geht es wieder um technische Sachen ... Der Richtige Einsatz von Techniken kann ein Wohlgefühl im Benutzer hervorrufen und für eine gute Webusability sorgen. Doch denken Sie immer an die User, die vielleicht kein Flash – Plugin haben oder bei denen Java(Script) deaktiviert ist. Sorgen Sie immer dafür, dass Sie Ausweichmöglichkeiten zur Verfügung stellen.

Es gibt nun mal User, die kein Flash installiert haben. Wenn ein Besucher eine Seite nicht benutzen kann, weil Sie eine Flashnavigation verwendet und er keine Ausweichmöglichkeit hat wird er von der Seite verschwinden und diese Seite wahrscheinlich so schnell nicht wieder besuchen. Gleiches gilt für JavaScripts und Applets.

Wenn Sie also solche Sachen verwenden sollen, denken Sie an eine HTML-Variante, die Sie ihren Besuchern deutlich über einen HTML-Link anbieten. Denken Sie bei der Verwendung solcher Techniken auch immer an die Ladezeiten und an die User, die nicht all zu schnelle Datenleitungen haben.

Beim Gestalten einer Webseite sollten Sie mal über den Tellerrand hinaus schauen. Nicht jeder Benutzer benutzt die gleiche Auflösung wie Sie! Viele Benutzer surfen sogar noch mit einer Auflösung von 800 x 600. Ihre Seite sollte bis hin zu dieser Auflösung abwärtskompatibel sein und User sollten auch mit dieser Auflösung noch alle Informationen erhalten und die Navigation im vollen Umfang nutzen können. Die Auflösung, welche die meisten User benutzen ist 1024 x 768. Hier sollte also die Seite optimal präsentiert werden. Machen Sie also vor dem Upload den Test und gehen Sie alle Auflösungsstufen durch. Ist Ihre Seite nutzbar?

Ein letzter wichtiger Punkt ist die Browserkompatibilität! Vor allem zwischen Netscape Navigator und Internet Explorer gibt es viele Unterschiede. Frames, Tabellen und vieles andere werden unterschiedlich dargestellt und auch zwischen den einzelnen Versionen der Browser gibt es Unterschiede in den Darstellungsformen. Wenn Sie die Möglichkeit haben, gehen Sie also verschiedene Browser durch und gucken Sie wie die Seite aussieht. Fragen Sie Freunde und Bekannte, was sie von der Seite halten und ob sie von Ihnen richtig genutzt werden kann.

Die meisten Benutzer verlassen eine Seite übrigens, wenn Unterseiten nicht gefunden werden können (der berühmte Fehler 404), auch zu langsame Ladezeiten und ein schlecht organisierter Content führen dazu dass Besucher die Seite verlassen und sicherlich nicht zu schnell wieder kommen. Halten Sie ihre Besucher – Treue Besucher sind die besten Kunden! Sorgen Sie für ein ansprechendes Aussehen, das zugleich benutzerfreundlich ist und lassen Sie ihren Besucher nicht im Regen stehen.

Zu guter letzt: Denken Sie an die Sicherheit! User haben Angst um persönliche Daten. Denken Sie also über verschlüsselten Datentransfer nach und machen sie einen seriösen Eindruck. Dies geschieht im Wesentlichen über klaren, geordneten und qualitativen Content, schnelle Ladezeiten und ein seriöses Design!

Viel Glück mit Ihrer Webseite!