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!
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.
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?
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.
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.
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.
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
Solche kleinen Extras findet man bei einer so schlichten Seite wie Google. Das zeigt, dass sich die Gestalter richtig Gedanken gemacht haben.
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.
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.
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
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Auch Netvibes bietet eine mobile Version an, mit der man seine Feeds bequem von unterwegs aus lesen kann.
Jetzt seid ihr dran.
MrAnderson
29. Mai 2009 um 11:12 UhrSuper Beitrag.. Danke..
nastorseriessix
29. Mai 2009 um 11:42 UhrWow ich bin immer wieder aufs neue begeistert von der mächtigkeit der Artikel hier auf dem Blog. 😀
Die 14 Punkte sind durchaus nachvollziehbar und gut beschrieben, werde dem mal nachgehen und mich ein bisschen weiter in der Materie fortbewegen als bisher. 😉
Auch wenn es immer noch einen Unterschied zwischen Blogs und Webseiten der Großen gibt, zumindest für mich, so kann man doch einiges übernehmen von diesen Tipps&Tricks! 🙂
nastorseriessixs letzter Beitrag..Text und Bild auf der gleichen Höhe ?
Lennart Prange
29. Mai 2009 um 13:17 UhrDanke. Ich habe mir langsam angewöhnt ausführlichere Beiträge zu schreiben 😀
RGünther
29. Mai 2009 um 14:11 Uhrschöner Überblick – vor allem auf komplexen Portalen ist weniger manchmal mehr – auch wenn das leichter gesagt als getan ist 😉
Jan-Christoph Borchardt
29. Mai 2009 um 15:52 UhrTwitter ist mit seinem doppelten CAPTCHA aber kein gutes Beispiel für Benutzerfreundlichkeit. 😉
Lennart Prange
29. Mai 2009 um 15:56 UhrDoch, ich denke schon. Natürlich muss Twitter sich irgendwie vor Spambots schützen. Captchas sind eine gute Methode dafür. Vor allem ist der Text auch ohne Probleme lesbar. Über Captchas darf man nun wirklich nicht meckern.
Jan-Christoph Borchardt
1. Juni 2009 um 14:30 UhrKlar darf man über CAPTCHAs meckern, genau wie über alle anderen Belastungen, die man dem Benutzer aufbürdet, obwohl der Administrator sie zu lösen hat.
Spamschutz ist nicht die Aufgabe des Benutzers, sondern des Admins. Die Unfähigkeit, gescheite Filter zu implementieren, kann nicht einfach auf den Benutzer abgewälzt werden. Gerade Twitter sollte über genug Nerdpower verfügen, um das zu realisieren.
Ohrflieger
29. Mai 2009 um 16:15 UhrSchöner Artikel! Dank der Beispiele sind die Tipps gut verständlich.
Lennart Prange
29. Mai 2009 um 16:54 UhrDanke, freut mich, dass dir der Artikel gefällt und vor allem, dass dir die Beispiele helfen. Die haben mich wohl mit am meisten Zeit gekostet 😀
torsten
29. Mai 2009 um 16:52 UhrDas war ein interessanter Artikel. Hat wie immer Spaß gemacht zu lesen. Ich würde mir wünschen, dass Du die Themen “Kleine Extras” und “Augen lenken” mal ausführlicher betrachtest. Das sind spannende Themen, die es verdient haben.
Lennart Prange
29. Mai 2009 um 16:54 UhrDanke. Vielleicht sind das zwei Themen, die mal wieder ein bis zwei Beiträge füllen würden. Ich gucke mal.
Jörg
29. Mai 2009 um 18:49 UhrWow, klasse Beitrag und gute Recherche 😉
Danke dafür.
Jörgs letzter Beitrag..“Style meets Technology!” – Models und Promis treffen
Lennart Prange
29. Mai 2009 um 20:05 UhrDanke! Viel Spaß damit 🙂
Chris
29. Mai 2009 um 19:58 UhrOhne eine richtige Idee sind die oben genannten Punkte überflüssig.
Lennart Prange
29. Mai 2009 um 20:00 UhrWas meinst du mit einer Idee?
Max
29. Mai 2009 um 21:40 UhrIst doch selbstverständlich, was er meint. Was wäre Google heute ohne seine hervorragende Search-Engine? Obwohl ich zugeben muss, dass das in diesem Zusammenhang völlig irrelevant ist. Es geht hier nämlich um das *Webdesign* dieser Seiten, nicht deren Funktionen bzw. den Ideen, die dahinterstecken.
Lennart Prange
29. Mai 2009 um 21:43 UhrGenau. Deswegen habe ich mich gewundert 😀 Natürlich ist aber auch eine gute Idee häufig ein Merkmal einer erfolgreichen Website. Wie gefällt dir der Beitrag?
Cms Mirror
29. Mai 2009 um 22:10 UhrGefällt mir gut der Artikel 🙂 weiter so :P.
KChristoph
29. Mai 2009 um 23:19 UhrMir gefällt es, wenn es gelingt, Beiträge so auszurichten, daß sie für Erfahrene und auch weniger Erfahrene in etwa gleich reizvoll sind … – Danke.
Alexander Haase
30. Mai 2009 um 17:00 UhrGefällt mir schon mal besser als der Letzte 😀 Ganz netter Artikel, nur kommt es ja auch schlussendlich immer darauf an, was die Website aussagen, erreichen will, welche Zielgruppe sie anspricht… Deswegen hätte ich mich gefreut, wenn du dich in dem Artikel auf eine Kategorie an Websiten ausgerichtet hättest – zB “Was braucht ein gutes Blog-Design” oder “Webdesign in Social Communities”
Bekomme bei deinen Artikeln oft den Anschein, dass sie versuchen ein Publikum so groß wie nur möglich anzusprechen – Icons, Eyecatcher und ein Crossmediales Angebot sind heute ohnehin Pflicht – andernfalls geht eine Seite gnadenlos unter.
Interessant wäre es gewesen auch über Farben und spezielle Layout (aus einem Themenbereich) zu sprechen.
Tipp: Differenziere deine Artikel stärker und dein blog wird auch für die Fachwelt zunehmend interessant 😉
Lennart Prange
30. Mai 2009 um 18:31 UhrDanke. Natürlich schreibe ich meine Beiträge für möglichst viele Leser. Deswegen gehören allgemeine Beiträge genauso dazu, wie welche, die sich auf ein kleines Gebiet beschränken 😉
Frederik
31. Mai 2009 um 17:27 Uhrnetter Artikel und super Beispiele aus der Praxis.
Shoptrainer.de
4. Juni 2009 um 09:03 UhrMoin auch, klasse Beitrag! Werde gleich mal eine Empfehlung in unserem Blog aussprechen! 🙂
Bowenkämper
4. Juni 2009 um 09:45 UhrEin gut recherierter Artikel mit Tiefe und guten Beispielen. Hier kann sich jeder, der seinen Webauftritt verbesser will, das rauspicken, was er für wichtig erachtet.
Einige Tipps werden wir sicherlich für das nächste Redesign in betracht ziehen.
Danke.
Martin Schröder
8. Juni 2009 um 15:14 UhrSchöner Artikel mit interessanten Beispielen. Widersprechen würde ich aber dem Punkt, dass viele Werbeanzeigen den Besucher einer Website darauf schließen lassen, dass es sich um eine erfolgreiche Website handelt (zu finden unter Punkt 13). Gerade E-Commernce-Websiten kommen oft komplett ohne Werbung aus. Und bei eher redaktionell getriebenen Webseiten sind ebenfalls alle Varianten üblich, also sowohl große, erfolgreiche Websites mit viel und mit wenig Werbung und kleiner, stümperhalft gemachte (SEO-)Seiten mit viel und wenig Werbung. Die allermeisten Webnutzer dürften sich daran gewöhnt haben, dass die Menge an Werbung keine Rückschlüsse auf die Qualität oder Bedeutung einer Website zulässt.
Mariechen
15. Juni 2009 um 22:04 UhrMoin Moin
Ich habe mir gerade diesen interessanten Bericht durchgelesen.
Ich werde versuchen, diese bei meinem neuen Webkatalog zu berücksichtigen.
Besonders schön finde ich, daß die Artikel bei “Daswebdesignblog” auch für Laien leicht verständlich sind.
Gruß
Mariechen
Günter
8. Mai 2010 um 00:32 UhrDer Artikel ist zwar schon ein Jahr alt aber ich bin leider heute erst drauf gestoßen, weil ich gerade auf der Suche nach Ideen für die Gestaltung einer neuen Webseite suche.
Super Tipps! Kurz und prägnant beschrieben. Mit eingängigen Beispielen. Gefällt mir!
Andi
24. August 2010 um 09:39 Uhrhi, danke für den tollen beitrag, inspiration pur! 🙂
übrigens, derstandard wurde heuer mal relauncht, kommt mittlerweile ohne frames aus! wirklich sehr chic geworden!
cheerz aus österreich 🙂
Natilein
8. Februar 2011 um 15:41 UhrHey!
Ich bedanke mich herzlich für deine Tipps…
Ich muss eine Webseite erstellen und finde deine Tipps extrem nützlich : )
…ich bin ein voller Noop in dem Bereich… 😀
Also vielen Dank 😉
Vielleicht gewinn ich ja den Kontess 😛
LG
Sascha Franke
18. Oktober 2011 um 08:06 UhrBin gerade durch einen Link von Selbständig im Netz auf diesen Artikel gestoßen und bin erstaunt dass die hier beschriebenen Gesetzäßigkeiten für gutes Design auch heute noch gelten (der Artikel scheint ja schon etwas älter zu sein). Auf jeden Fall ein super Beitrag der gute Inspiration gibt für neue Projekte und wichtige Fakten in den Vordergrund rückt. Gleich unter Favoriten abgespeichert für später 🙂
Peter
10. November 2011 um 00:05 UhrSehr guter Artikel,
ich finde nur den Punkt mit der Werbung nicht so dolle. Viel Werbung heißt nicht gleich Erfolg. Sie kann auch aus verzweiflung gesetzt werden, damit man wenigstens etwas verdient 😉
Ivonne
17. Februar 2012 um 12:04 UhrGefällt mir ebenfalls der Artikel, sehr hilfreich.
Zum Thema erfolgreiche Websites habe ich auch hier was interessantes gefunden:
http://www.marketingfish.de/all/webdesign-darum-sind-haessliche-websites-erfolgreich-5798/