Edition PRAXIS.WISSEN Tobias Martin, André Richter Was gute Webseiten ausmacht Erfolgreiche Onlineauftritte planen und betreuen BusinessVillage Update your Knowledge!
Inhaltsverzeichnis 1 Über die Autoren...3 1. Einleitung... 5 2. Ziele definieren... 7 Zusammenfassung... 9 3. Struktur...11 Orientierung am Nutzer...11 Bewährtes Nutzen... 13 Anforderungen an die Navigation... 13 Navigationskonzepte... 16 Zusammenfassung... 16 4. Gestaltung... 17 Wiedererkennungswert... 17 Auflösung... 18 Kontraste... 22 Gestaltung der Navigation... 23 Linkauszeichnung... 26 Exkurs: Mobile Endgeräte... 28 Zusammenfassung... 29 5. Inhalte... 31 Aktualität ist Trumpf... 31 Kontaktaufnahme erleichtern... 31 Inhalte richtig darstellen... 32 Bilder fürs Web... 35 Auflösungen für Bilder im Web... 37 Bildformate im Internet... 38 Videos und Animationen... 44 Benennung von Dateien... 48 Web 2.0 alles Beta?... 49 Zusammenfassung... 53 6. Technik... 55 Browser Kompatibel bleiben... 55 Grundlagen von HTML... 56 Warum sind meine Internetseiten langsam?... 57 Welche Techniken sollten vermieden werden?... 57 Content-Management-Systeme... 62 Komfortfunktionen... 66 Zusammenfassung... 69
2 Inhaltsverzeichnis 7. Barrierefreiheit... 71 Grundlagen der Barrierefreiheit... 71 Barrierefreiheit im Internet... 71 Kriterien der Barrierefreiheit... 74 Zusammenfassung... 77 8. Bekanntmachung... 79 Wie Suchmaschinen funktionieren... 80 Exkurs: Suchmaschinenoptimierung... 81 Google AdWords... 83 Zusammenfassung... 84 9. Erfolge messbar machen... 85 Ziele überprüfen... 85 Statistiken deuten... 88 Zusammenfassung... 90 10. Vorsicht Falle: Die häufigsten Rechtsfehler in Websites... 91 von Carsten Föhlisch, Trusted Shops GmbH Impressum... 91 Marken- und Urheberrecht... 93 Wettbewerbsrecht... 93 Unwirksame AGB-Klauseln... 94 Abmahnung erhalten Was tun?... 98 11. Schlusswort... 107 12. Anhang... 109 Linkverzeichnis... 109 Wichtige Abkürzungen und Begriffe... 109 Literaturverzeichnis...113
Struktur 11 3. Struktur Ein Internetauftritt, oder auch eine Website, besteht nicht nur aus einer einzelnen Seite, sondern in der Regel aus einem ganzen Geflecht an verschiedenen Dokumenten. In dieses Geflecht eine nachvollziehbare Ordnung zu bringen, ist die Aufgabe einer durchdachten Struktur und Nutzerführung. Dabei gibt es mehrere Strategien, die Inhalte, die Sie für die Nutzer im Internet bereitstellen möchten, sinnvoll zu gliedern und zu gruppieren. Orientierung am Nutzer Wenn Sie surfen, möchten Sie schnell und unkompliziert die Sachen finden, die für Sie in diesem Moment relevant sind. Nicht anders ergeht es den Nutzern Ihrer Internetseiten. Überlegen Sie sich also bereits im Vorfeld, aus welchen Nutzern sich Ihre Zielgruppe zusammensetzt und welche Ansprüche diese an Ihre Internetseite stellen. Dabei ist natürlich der Unterschied zwischen einer inhaltsorientierten Nachrichtenseite und einer Unternehmensdarstellung relativ deutlich, dennoch erfüllen beide im Idealfall jeweils die Bedürfnisse des Nutzers. Im ersten Fall möchte man schnell die aktuellen Themen überfliegen und erwartet zusätzlich vertiefende Angebote zu einzelnen Aspekten. Bei einer Unternehmensdarstellung geht es vor allem darum, die Firma mit ihren Produkten und Leistungen im Internet zu präsentieren und eventuell Pressevertretern einen einfachen Zugang zu Pressematerialien zu ermöglichen. Auch die Anzeige von offenen Stellen oder ein interner Bereich für Partner und Kunden ist denkbar. Für beide Angebote gibt es unterschiedliche Zielgruppen und dementsprechend auch eine jeweils geeignete Struktur. Beginnen Sie also mit der Analyse, was Sie Nutzern auf Ihren Internetseiten anbieten wollen und müssen. Bereiten Sie die Struktur dann so auf, dass die unterschiedlichen Bedürfnisse mit klaren, kurzen und verständlichen Wegen erreicht werden können. Sie erhöhen dadurch die Zufriedenheit der Besucher und steigern den Wert Ihres Internetangebotes. Sie müssen dazu nicht das Rad neu erfinden. Ein Blick auf verschiedene Unternehmenswebsites zeigt, dass dies sogar hinderlich sein kann. Was aufgrund firmeninterner Zusammenhänge noch nach einer geeigneten Struktur zur Gliederung der Inhalte aussieht, wird bei näherem Hinsehen den Ansprüchen der eigentlichen Nutzer nicht gerecht. Ein einfaches Beispiel soll dies verdeutlichen: In einem großen Produktionsbetrieb für Möbel gibt es verschiedene Fachabteilungen, die sich jeweils als Gliederungspunkt auf der Webseite wiederfinden wollen (oder sollen). So entsteht eine Struktur, in der es Navigationspunkte wie Holzverarbeitung, Stahlkonstruktionen, Glasarbeiten und ähnliche gibt. Die Abbildung dieser Struktur entspricht den Abteilungen und wird für alle Mitar-
12 Struktur beiter des Betriebes nachvollziehbar sein. Kommt nun ein Nutzer und will sich über die Produkte informieren, ist die für ihn effektivere Kategorisierung die nach Möbelgruppen, wie zum Beispiel Stühle, Tische oder Regale. Ob die jeweiligen Produkte aus dem Werkstoff Holz oder aus einem Metall bestehen, interessiert den normalen Nutzer erst nach der vorher getroffenen Auswahl. Um solche klassischen Konflikte zu vermeiden, ist es ratsam, bereits während der Konzeption einer Internetseite Personen einzubeziehen, die nicht unmittelbar zur Firma oder zum Betrieb gehören. Auf diese Weise gewinnen Sie wertvolle Erkenntnisse darüber, wie Otto Normal die Gliederung der Seite auffasst und ob für ihn die Struktur schlüssig und zielorientiert ist. Dabei stehen zwei Fragen im Vordergrund. 1. Erkenne ich, welche unterschiedlichen Teilbereiche der Internetseite es gibt? 2. Ist der Weg zu einem konkreten Ziel logisch und ist das Ziel mit einer möglichst geringen Anzahl an Klicks zu erreichen? Die Antworten auf beide Fragen geben deutlich über die Qualität eines Internetangebotes Aufschluss: Ist die Seite nicht nutzerorientiert oder ist sie zu tief gegliedert, verlieren Sie schnell potenzielle Kunden und sorgen für einen bitteren Nachgeschmack. Bei der Benennung der unterschiedlichen Bereiche sollten Sie sich ebenfalls an der Zielgruppe orientieren und möglichst konkret die Inhalte beschreiben. Vermeiden Sie Fachbegriffe und Abkürzungen, die Ihnen geläufig sind, von Ihren Abbildung 2: Beispiel für eine zielgruppenorientierte Navigation. Die Inhalte sind auf den ersten Blick nicht nur nach Produkten gegliedert, sondern auch nach Lebensphasen und Situationen.
Struktur 13 Besuchern aber unter Umständen nicht verstanden werden. Oft ist es hilfreich, für einen gesuchten Begriff einen adäquaten Oberbegriff oder ein Synonym zu verwenden. aber auch spezifische Elemente sein, die besonders charakteristisch für Ihr Angebot sind. Ein Verkehrsverbund etwa wird an geeigneter Stelle eine Verlinkung auf die Fahrplanauskunft platzieren. Tipp Stellen Sie sich drei konkrete Aufgaben eines fiktiven Nutzers Ihrer Seite vor: Beispielsweise soll er ein bestimmtes Produktblatt finden, einen Teil der Firmenhistorie suchen und die aktuellste Pressemeldung als PDF von der Seite herunterladen. Überprüfen Sie anhand dieser Vorgaben, wie viele Klicks der Nutzer benötigt und ob die vorgefundene Struktur schlüssig ist. Bewährtes Nutzen Zusätzlich zu den Inhalten, die Sie von Ihrem Wettbewerber unterscheiden und damit spezifisch für die Struktur Ihres Internetangebotes sind, gibt es natürlich auch eine Reihe von Funktionen, die den Service eines Online-Angebotes wirkungsvoll ergänzen und den Funktionsumfang kundenorientiert abrunden. Dazu gehört bei umfangreichen Seiten eine Inhaltsübersicht, die sich auf einen Blick erfassen lässt. Ein Kontaktformular gibt dem Nutzer die Möglichkeit, ohne den Umweg eines E-Mail- Programms dem Betreiber Fragen zu stellen oder Anregungen zu äußern. Zusätzlich sollten ein Link auf die Startseite und das bei einer gewerblichen Internetseite vorgeschriebene Impressum jederzeit aufrufbar sein. Für diese Funktionen, die unabhängig von der eigenen Position in der Internetseite immer sichtbar sind, hat sich der Begriff Metanavigation etabliert. Teil dieser Metanavigation können Bei der Wahl der Begriffe für diese Seiten sollten Sie Bewährtes nutzen. Ist der englische Begriff Sitemap als Bezeichnung besser geeignet, oder sollte Inhalts- beziehungsweise Seitenübersicht verwendet werden? Egal, wie Sie sich bei der Benennung entscheiden, die Wahl sollte auf einen der gebräuchlichen Begriffe fallen. Auch unter Kontakt, Startseite und Impressum können sich die meisten Nutzer die entsprechenden Funktionen vorstellen. Nutzen Sie also dieses voraussetzbare Wissen, um die Bedienung Ihres Internetangebotes so einfach wie möglich zu gestalten. Anforderungen an die Navigation Die Abbildung der Struktur als anklickbare Menüpunkte auf der Internetseite wird als Navigation bezeichnet. Sie ist das zentrale Element, da nur mit ihrer Hilfe die Inhalte erschlossen werden können. Für den Aufbau der Navigation gibt es Grundsätze, die sich aus der menschlichen Wahrnehmung und Informationsverarbeitung ergeben. Die wenigen Regeln, die sich hieraus gebildet haben, bieten einen wertvollen Anhaltspunkt für die Erarbeitung der Navigation: 1. Verwenden Sie soweit möglich nicht mehr als fünf bis sieben Navigationspunkte auf jeder Ebene.
14 Struktur 2. Benutzen Sie nicht mehr als vier Ebenen. 3. Machen Sie die momentane Position in der Struktur für den Nutzer deutlich. 4. Benutzen Sie klare und kurze Begriffe. 5. Berücksichtigen und integrieren Sie sinnvolle Querverweise über besonders gekennzeichnete Anreißflächen. auf einer Ebene in Gruppen zusammenzufassen. Auch die Tiefe der Navigation stellt Webdesigner und Nutzer vor eine Herausforderung. Um die Orientierung zu erleichtern, sollten einerseits bereits wenige Mausklicks zu den wesentlichen Inhalten führen, andererseits sollte aber auch die Position im Webauftritt jederzeit deutlich werden. Es handelt sich hierbei um Empfehlungen, die nicht in jedem Fall umsetzbar sind, deren Anwendung sich aber in der Praxis bisher bewährt hat. Das hat psychologische Gründe. Die Anzahl der Navigationspunkte sollte demnach so gewählt sein, dass man diese mit einem Blick erfassen und als Gruppe wahrnehmen kann. Das ist bei einer Anzahl von fünf bis sieben unterschiedlichen Menüpunkten möglich. Eine größere Anzahl wird jedoch unbewusst vom Gehirn in einzelne Gruppen aufgeteilt. Sollte es dennoch nötig sein, eine größere Anzahl an Navigationspunkten in einer Ebene darzustellen, ist es wichtig, die Elemente Aus diesen Überlegungen lassen sich die beiden wichtigsten Faktoren für eine nützliche und nutzbare Navigation klar ableiten. Kurze Navigationswege Im Internet sind Nutzer immer nur einen Mausklick von der nächsten Website entfernt. Ist die Bedienung des Internetangebotes nicht logisch oder führt sie nicht schnell genug zum gewünschten Ziel, wird der Besucher nicht lange zögern, die Seite wieder zu verlassen. Orientierungshilfe: Brotkrumennavigation Bei umfangreichen Internetseiten bieten Sie Ihren Besuchern mit Hilfe einer Brotkrumennavigation engl. Bread Crumb Navigation eine zusätzliche Orientierungsmöglichkeit. Die Brotkrumennavigation zeigt dem Besucher an, in welcher Ebene der Webseite er sich gerade befindet. Durch direkte Verlinkung der übergeordneten Seiten ist eine schnelle Navigation durch das Angebot möglich. Abbildung 3: Beispiel einer Brotkrumennavigation
Struktur 15 Um zu vermeiden, dass Nutzer das Angebot fluchtartig wieder verlassen, gilt es, die Hürde zum Erreichen der wesentlichen Inhalte so gering wie möglich zu gestalten. Das bedeutet, dass die Navigationswege kurz und logisch nachvollziehbar sein müssen. Übersichtliche Navigation Zusammen mit den möglichst kurzen Wegen zu den gesuchten Inhalten ist die Übersichtlichkeit das zweite Qualitätsmerkmal, das eine Bewertung einer Navigation und damit der Internetseite zulässt. Berücksichtigen Sie hierbei die Vor- und Nachteile der im Folgenden erläuterten horizontalen beziehungsweise vertikalen Navigation. Alter- Eine horizontale Navigation ist ideal für wenige Inhaltsseiten. Mit einer vertikal angeordneten Navigation lassen sich umfangreiche Inhalte im Internet darstellen. Beispiel einer Kombination aus vertikaler und horizontaler Navigation. Ideal für sehr große Websites.