Heute gibt es mal wieder einen etwas aufwändigeren Beitrag, welcher sich mit erfolgreichen Webseiten beschäftigt. Ich habe mir ein paar Webseiten herausgesucht und so ein paar Merkmale einer erfolgreichen Website zusammengetragen.

Sicherlich muss eine Website nicht zwingend alle der hier genannten Merkmale aufweisen, um erfolgreich zu sein. Vielmehr wollte ich euch ein paar Ideen bieten.

Viel Spaß mit diesem umfangreichen Beitrag. Wie immer freuen mich Kommentare, Social Bookmarks und Backlinks sehr!

1. Konzentration auf das Wesentliche

Perfektion ist nicht, wenn man nichts mehr hinzufügen kann, sondern wenn man nichts mehr entfernen kann. Es ist wichtig, unnötige Sachen wegzulassen, damit der Nutzer einfacher findet was er sucht. Das sind die wichtigen Sachen.

Nur das Wesentliche bei Google

Unglaublich, wie einfach die Oberfläche von Google ist. Google hat gemerkt, warum die Besucher die Website besuchen: Um die großartige Suche zu benutzen. Warum sollte man weitere Informationen hinzufügen und dadurch das Design unübersichtlicher machen und die Ladezeit verlängern?

2. Benutzerfreundlich

Wenn man darauf hofft, dass viele Leute sich registrieren, sollte man möglichst wenig Infos verlangen. Wenn man Straße, Plz, Telefonnummer usw. haben will, sollte man dem Nutzer auch ganz klar sagen, WARUM man diese Infos benötigt.
Jede Beteiligung sollte für den Nutzer möglichst einfach sein und auch der dümmste Besucher sollte mit jedem Formular klar kommen.

Das super Formular von Twitter

Twitters Erfolg kommt nicht von ungefähr. Das Anmelde-Formular ist eines der Besten, die ich kenne. Erstens wird der Nutzer durch die Hinweise unterstützt und zweitens fordert Twitter wirklich nur sehr wenige Informationen.

3. JavaScript

Die Technik bietet, sparsam und gezielt eingesetzt, einen echten Mehrwert und ist mehr als nur Spielerei. Sie verbessert das Erlebnis auf der Seite. Einige große Seiten machen von dieser Technik aber keinen Gebrauch, weil die Seite nicht neu lädt. Das bringt weniger PageViews.

faz.net steht auf JavaScript

JavaScript hat sich durchgesetzt. Es bietet dem Besucher viel mehr Content und trotzdem wird die Internetseite nicht unübersichtlicher. Bilder können Text nicht ganz ersetzen. Daher erscheinen bei einigen Bildern auf FAZ.net ein paar Infos, wenn man mit der Maus darüber fährt. Ebenso praktisch sind die Tabs, welche sich vor allem bei den Aktienkursen als sehr nützlich erweisen, da man schnell und OHNE die Seite neu zu laden zwischen Dax, Dow Jones Index usw. hin und her springen kann.

Tipps zur Verwendung von Javascript

• Nicht übertreiben - JavaScript muss man nicht immer und für jeden Zweck verwenden. Vor allem solltet ihr wichtige Informationen nicht hinter Tabs verstecken.
• Effekte müssen nicht sein - Kleine Effekte, ok. Aber großartiges Einblenden, dass fünf Minuten dauert, ist nicht unbedingt der Sinn von JavaScript.

4. Kleine Extras

Solche kleinen Extras findet man bei einer so schlichten Seite wie Google. Das zeigt, dass sich die Gestalter richtig Gedanken gemacht haben.

Einfach, aber genial

Jeder von euch war schon mal auf Google, aber wer hat schon das nette kleine Extra bemerkt? Google teilt die Ergebnisse bekanntlich in Seiten auf und je mehr Seiten vorhanden sind, desto mehr Os sind auch vorhanden. Dabei bekommt die aktive Seite das rote O. So kann man ein Firmenlogo wirklich klasse integrieren.

Tipps zu kleinen Extras

• Extras mit Mehrwert -Die Extras sollten nicht völlig sinnlos sein. Bei Google seht ihr, was ich damit meine.
• Klein, nicht groß - Es geht nicht darum, plötzlich einen Hasen auf den Bildschirm springen zu lassen. Viel mehr sind es die kleinen Extras, die das Besondere ausmachen.

5. Ästhetisch anspruchsvolles aber nicht überladenes Design

Der erste Eindruck ist entscheidend und dafür ist eine hübsche Optik natürlich von Vorteil. Außerdem fühlen sich Nutzer auch nach dem ersten Eindruck auf einer gut gestalteten Internetseite immer noch wohler, als auf hässlichen Seiten.

Hübsche Optik bei last.fm

Last.fm zeigt sich modern. Sehen wir den Tatsachen ins Auge: Flaches Design ist langweilig. last.fm benutzt daher mehrere Mittel, um das Ganze etwas plastischer wirken zu lassen. Verläufe, kleine Grunge Effekte und weitere Details sorgen für ein ästhetisch anspruchsvolles Design, dass aber trotzdem total aufgeräumt wirkt. Achtet auch auf die pixelgenaue Arbeit bei den Buttons.

Tipps zur Optik

• Design is in the Details -Großflächige Effekte sind nicht immer die Kunst. Gutes Design erkennt man häufig an den kleinen Details, wie sie bei last.fm zusehen sind.
• Der Inhalt steht immer im Mittelpunkt - Effekte usw. sollten den Nutzer nicht vom Inhalt ablenken, sondern ihn, wenn es optimal läuft, eher unterstützen.
• Die Zielgruppe ist der Nutzer - Es muss nicht euch gefallen, sondern dem Nutzer. Wenn die Zielgruppe goldene, glänzende Effekte liebt, ihr sie aber hasst, solltet ihr trotzdem damit arbeiten.

6. Raster

Rasterbasiertes Design ist eine essentielle Fähigkeit von Webdesign. Raster sind die beste Möglichkeit, Informationen organisiert darzustellen. Umso mehr Inhalt eine Website hat desto wichtiger wird auch ein Raster.

Raster bei der New York Times

Die New York Times hat extrem viel Content online. Um diesen zu gliedern ist ein gutes Raster nötig, dass die Inhalte ordnet. Man kann sehen, wie flexibel so ein Raster ist. Es ist eine extrem schwierige Aufgabe, so viel Inhalt gut zu ordnen. Durch das Raster wurde es möglich.

Raster bei derstandard

Auch wenn ich von Frames nicht viel halte, ist doch ein klares Raster zu erkennen, das konsequent durchgezogen wird. Das mag ein wenig langweilig daherkommen, ist aber höchst effektiv und der Leser findet sich sehr gut zurecht.

7. Augen lenken

Webdesigner haben die Möglichkeit das Auge des Betrachters zu lenken und den natürlichen “Betrachtungsfluss” zu verändern. Die wichtigsten Mittel sind Größe, Kontrast, Größe und Farbe, aber auch andere grafische Tricks wie Out of the Border Elemente oder extrem aufwändige Eye-Catcher sind eine Möglichkeit. Gute Webdesigner müssen so gestalten können, dass die Augen von 98% der Nutzer den gleichen Weg nehmen.

last.fm zeigt, wie es geht

last.fm bemüht sich, den Besucher möglichst zu beeinflussen. Auf Grund der Signalfarbe rot fällt der Blick meistens zu erst auf die Navigationsleiste. Es werden große Schriften benutzt, um eine Hierarchie zu schaffen und ein Out of the Border Element um eine neue Funktion hervorzuheben.

8. Icons

Icons können gut aussehen, aber sie können tatsächlich auch dafür sorgen, dass der Nutzer schneller zu seinem Ziel kommt. Er kann Bilder bzw. Symbole nämlich viel schneller verarbeiten als Text. Allerdings ist es nötig, dass er das Icon auch erkennt und es zu ordnen kann. Andernfalls sind Icons zwar nett anzusehen, aber absolut sinnlos.

Icons bei Apple

Apple nutzt Icons von ihren Programmen und auch um die Informationen auf der Seite visuell darzustellen und so den Nutzer zu unterstützen und das Surfen, falls der Nutzer die Icons zu ordnen kann, effizienter zu machen und natürlich auch, um Markenzeichen zu verbreiten.

Icons bei xing

Auch xing setzt auf Icons. Ich stehe diesen Icons ehrlich gesagt mit gemischten Gefühlen gegenüber. Klar, die Lupe ist eindeutig, die Programmoberfläche aber eher nicht. Das Straßenschild finde ich hingegen recht gelungen.

Tipps zu Icons

• Icons müssen eindeutig sein - Wenn ihr eigene Icons gestaltet, haltet sie einfach und eindeutig. Sie sollen etwas schnell kommunizieren und das ist ihr einziger Zweck. Unnütze Elemente sind fehl am Platz.
• Icons müssen sich an die Standards halten - Für die Suche solltet ihr immer eine Lupe als Icons verwenden. Das gilt auch für alle anderen Sachen, für die es bereits Standards geben, die sich durchgesetzt haben.

9. Viele verschiedene Medien

Das Internet hat viele Vorteile und einer davon ist es, dass man viele verschiedene Medien auf einer Seite anbieten kann. So kann man News in Texte verfassen, Videos veröffentlichen oder per Audio Podcast kommunizieren.

Audio und Video bei der ARD

Die ARD bietet nicht nur viele News aus aller Welt, sondern auch Video und Audio Podcasts sowie viele einzelne Clips, die den Lesern einen Mehrwert bieten.

10. Interaktion

Wenn ihr euch mal umschaut, werdet ihr feststellen, dass die Nutzer auf den meisten erfolgreichen Seiten mehr machen können, als von Seite zu Seite zu surfen. Wenn man Nutzer binden will und eine Website interessanter machen will, sollte man versuchen, ihnen die Möglichkeit zu geben, sich irgendwie zu beteiligen.

Allseits bekannt: Digg

Digg gibt nicht nur eine Liste mit Links aus, sondern ermöglicht den Nutzern auch, diese Links zu bewerten, selber welche einzustellen und zu kommentieren.

Transfergerüchte und Abstimmungen bei transfermarkt.de

Transfermarkt.de bietet seinen Lesern nicht nur viele Informationen zum Thema Fußball. Es gibt auch Abstimmungen und etliche Foren. Die Nutzer können untereinander Diskutieren und selber Gerüchte einstellen.

11. Primäre horizontale Navigation über dem Content

Horizontale Navigationen sieht man eigentlich auf fast jeder Website. Häufig gibt es auch noch eine zweite vertikale Navigation. Das ist eine klare Hierarchie und horizontale Navigationen brauchen auch nicht so viel Platz nach unten. Zudem sollten Navigationen immer über dem Inhalt sein. Das erfüllt eine horizontale Navigation komplett.

Horizontale Navigation beim mdr

Tipps zur Navigation

• Aufteilen - Falls ihr zu viele Navigationspunkte anbieten wollt, solltet ihr die Navigation sinnvoll in verschiedene Ebenen gliedern.
• Rad nicht neu erfinden - Navigationen gehören über den Content oder Links vom Content. Wer sich abheben will, kann sie auch rechts vom Content platzieren. Fest steht aber, dass die Navigation immer möglichst weit oben sein sollte und das man bewährte Strukturen in diesem Fall nicht neu erfinden sollte.
• Verschiedene Wege anbieten - Ihr könnt Sitemaps und Breadcrumb Navigationen verwenden, um euren Usern mehrere Möglichkeiten zur Navigation zu verwenden.

12. Leserfreundlich

Der Sinn einer Website ist Kommunikation und eine Hauptaufgabe von Webdesignern ist, diese Informationen so zu verpacken, dass Internetnutzer sie möglichst perfekt lesen können. CSS bietet einige Möglichkeiten, um die Typographie einer Website deutlich zu verbessern.

Leserfreundlich - SmashingMagazine

Die Überschriften erschaffen eine sehr angenehme und vor allem sehr leicht zu verstehende Hierarchie . Die Liste tut das Übrige. Außerdem benutzt der Autor mehrmals fette Schrift, um besonders wichtige Infos hervorzuheben. Das erleichtert das Überfliegen enorm.

Tipps für eine leserfreundliche Seite

• Nutzt die Möglichkeiten von CSS - Das Smashingmagazine zeigt hier ganz einfach Wege, um die Typographie auf Internetseiten deutlich zu verbessern
• Hierarchie -Mit Überschriften und Zwischenüberschriften solltet ihr eure Text unbedingt sinnvoll gliedern, damit das Überfliegen leichter fällt und der Leser auch mal unterbrechen kann und wenn er weiterlesen möchte wieder zurückfindet.
• Kontrast -Schwarz auf weiß oder andersrum ist auf Monitoren nicht zu empfehlen. Der Kontrast ist für viele Displays zu stark. Dunkelgrau auf weiß bietet die beste Lesbarkeit.
• Konstanz - Damit sich eure Leser auf jeder Unterseite gut zurechtfinden, solltet ihr darauf achten, Hierarchie, Schriftfarbe, Linkfarbe usw. nie zu verändern.
• Kurze Texte - Im Internet sollte man Texte prägnant formulieren. Unnötiges muss man weglassen, da niemand gerne überlange Texte am Bildschirm ließt.
• Schlüsselstellen hervorheben - Ihr könnt Text fett und kursiv darstellen. Nutzt diese Möglichkeiten, um euren Lesern Orientierung zu bieten und Schlüssenstellen zu markieren.

13. Erfolgreiches Aussehen

Wer erfolgreich sein will, muss erst mal erfolgreich aussehen. Tatsächlich bleiben Nutzer lieber auf Seiten, die ihnen vermitteln, dass sie groß sind und viele Nutzer und Kunden haben. Mittel dafür sind zum Beispiel viele Kommentare und Werbeanzeigen.

Smashing Magazine

Das smahingmagazine zeigt seinen Erfolg mit vielen verschiedenen Mitteln. In der Sidebar gibt es die verschiedensten Formen von Werbung. Ein deutliches Zeichen für viele Besucher. Unterstützt wird dieser Eindruck durch die Zahl der Feedleser. 75 Kommentare zeigen, dass die Leser das Blog und den Inhalt mögen.

Wie sieht man erfolgreich aus?

• Skelliewag erklärt es hier

14. Mobiles Interface

Viele gehen heute mobil ins Internet. Deswegen ist es für erfolgreiche Webseiten unerlässlich, eine Version ihrer Website anzubieten, die auf mobile Endgeräte zugeschnitten ist.

Mobile Version von Netvibes

Auch Netvibes bietet eine mobile Version an, mit der man seine Feeds bequem von unterwegs aus lesen kann.

Tipps zu Erstellung einer mobilen Version

• Ihr müsst Werbung dafür machen - Zeigt euren Besuchern, dass ihr diese Möglichkeit anbietet. Optimal ist es, wenn mobile Endgeräte direkt auf die entsprechende Version umgeleitet werden.
• Einfach, einfach, einfach - Die mobile Version sollte möglichst auf Werbung verzichten und nur die Wesentlichen Dinge enthalten.
• Nicht zu einfach, bitte - Ihr braucht ein Gespür dafür. Welche Features wollen die Nutzer einer mobilen Version sehen? Möglichst großer Funktionsumfang und möglichst kleine Ladezeit.

Welche Merkmale sollte eine erfolgreiche Website noch aufweisen?

• RSS-Feed - Zu jeder Seite, die aktuelle Informationen anbietet, gehört auch ein anständiger RSS Feed.
• Branding - Die Marke sollte nicht nur mit dem Logo sondern auch durch Farben usw. vertreten werden.

Jetzt seid ihr dran.