Kennen Sie das? Sie öffnen eine Website und fühlen sich schlagartig in die Neunziger zurückversetzt. Blinkende Banner, Regenbogenfarben und Navigationskonzepte, bei denen unterstrichene Wörter plötzlich keine Links mehr sind.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenWas Sie hier sehen, ist ein Kuriositätenkabinett mit Augenzwinkern. Eine Zeitreise zu zehn kommerziellen Websites, die irgendwann zwischen Netscape Navigator und dem ersten iPhone entstanden sein müssen. Sie haben einen gewissen musealen Wert und reihen sich ein in die lange Liste der Dinge, über die das Internet von morgen schmunzeln wird.
Die gute Nachricht: Unter diesem historischen Ranking finden Sie einen Ratgeber, der dafür sorgt, dass Ihre Website niemals in einer solchen Liste landet. Mit aktuellen Zahlen, konkreten Tipps und der nötigen Prise Selbstironie.
Das Wichtigste in Kürze
- Diese Top-10-Liste zeigt historische Negativ-Beispiele aus der Frühzeit des kommerziellen Internets
- Die Websites demonstrieren klassische Fehler wie überladenes Design, fehlende mobile Optimierung und verwirrende Navigation
- Im anschließenden Ratgeber lernen Sie, wie Sie diese Fehler bei Ihrer eigenen Website garantiert vermeiden
- Aktuelle Studien zeigen: 47% der Besucher verlassen eine Website, wenn sie länger als zwei Sekunden lädt
Platz: Dinghyinsurance.com
Konservative Zurückhaltung in Sachen Layout ist auf der Website der W. H. Insurance Consultants Trumpf. Den Unterschied macht jedoch das revolutionäre Navigationskonzept: Ein Alleinstellungsmerkmal wird nämlich dadurch geschaffen, dass unterstrichene Wörter hier einmal keine Links sind. Sie müssen schon auf die gelb-schwarzen Buttons klicken. Allein deshalb hat dinghyinsurance.com einen Platz in dieser Liste redlich verdient.
Platz: Stexps.com
„Back to the Roots“ heißt es auch auf der Website des Sarasota-Tampa-Express. Doch nicht der (fast) konsequent durchgezogene Retro-Stil, nicht die Inverted-L-Navigation mit den gleichen Links im vertikalen und im horizontalen Menü, nicht der animierter Cursor, der eine wogende Schlange roter Buchstaben in einer anderen Schriftart hinter sich herzieht, nicht die in spacigen Regenbogenfarben blinkenden NEW-Elemente haben uns überzeugt, sondern das unübertrefflich hektische FlightView-Widget rechts, das Sie sich gerne auch als Bildschirmschoner herunterladen können.
Platz: CWOL.com
Wenn Websites aussehen wie das Faltblatt des 1-Euro-Marktes am Ende der Fußgängerzone, das man im Briefkasten findet, schlagen Designer-Herzen naturgemäß höher. Zudem sorgt der Web-Auftritt der Technikfachleute von CWOL dafür, dass nicht nur die Preise den Nutzer in erhöhte Alarmbereitschaft versetzen, sondern auch das Farbkonzept.
Platz: 5safepoints.com
Zwar pfeifen die Leute der 5 Points Driving School unter anderem auf ein homogenes Bild- und Typografiekonzept, dafür berücksichtigen sie zwei andere interessante Usability- und Design-Erkenntnisse: 1) Heute haben User kein Problem mehr damit, nach unten zu scrollen. 2) Weißraum sorgt für Ruhe. Das nimmt man sich zu Herzen und verbindet dieses Wissen kongenial – lassen Sie sich überraschen!
Platz: Videosoniclab.com
Eine Zeitreise in die Gründerzeit des Internets erwartet den Nutzer auf der Website von Videosonic, wobei gemütlichem Schwarz tatsächlich eine zentrale Bedeutung zukommt. Auch interessant: Die Buttons im linken Bereich sind zwar nicht anklickbar, sorgen aber beim genaueren Betrachten für Kopfschmerzen. Einen Blick wert ist zudem der Online-Shop.
Platz: Webking.com
Zum Dienstleistungsumfang der Web King Internet Services LLC gehören nicht nur Online-Marketing, E-Commerce-Expertise und Hosting, sondern auch Web-Design. Hier muss die eigene Website natürlich als Referenz herhalten. Ein Klick auf den entsprechenden Menüpunkt hat den schönen Nebeneffekt, dass man seinen künftigen Dienstleister gleich einmal persönlich kennenlernt – eine wichtige vertrauensbildende Maßnahme und Grundlage für eine enge, fruchtbare Zusammenarbeit.
Platz: Lingscars.com
An Ideen mangelt es nicht: Zunächst klettert uns Autohändlerin Ling vom Header entgegen. Und was es nicht noch alles zu entdecken gibt. Live-Chat, Twitter-Integration, Office-TV, ein Quiz, ein ominöses Game namens „Hang Me“, es blinkt und flackert an allen Ecken und Enden … Man könnte sich wahrscheinlich stundenlang auf dieser Website amüsieren. Das ist alles so cool und offensichtlich gutgemeint, dass wir lingscars.com nur sehr schweren Herzens in diese Liste aufnehmen und das leise Gefühl haben, dieser ambitionierten Dame unrecht zu tun.
Platz: Yvettesbridalformal.com
Man muss sich schon etwas Zeit nehmen, um herauszufinden, was Yvette nun genau verkauft. Nach einigen (von zentralasiatischen Klängen begleiteten) Klicks findet man immerhin heraus, dass Yvette nicht nur einen Shop betreibt, sondern offenbar auch Plätzchen liebt. Irgendwo gibt es eine Seite mit Rezepten (die leider nach fünfminütiger Suche nicht wiederzufinden ist und deshalb hier nicht verlinkt werden kann). Ohne diese Anleitungen eingehender studiert zu haben, drängt sich angesichts der Website der Verdacht auf, dass sich unter den Zutaten für die Kekse auch die eine oder andere … sagen wir bewusstseinserweiternde Substanz befindet. Wie dem auch sei, unser dritter Platz geht an yvettesformalbridal.com.
Platz: Arngren.net
Nur haarscharf am ersten Platz schrammt arngren.net vorbei. Beim Aufrufen der Seite stellt sich nur eine einzige Frage: Meinen die das ernst oder ist das ein Scherz? Ja, die meinen das ernst.
Platz: Havenworks.com
Sicherlich ist Content nach wie vor King. Doch wie teasert man das gesamte politische Wissen der Welt auf einer einzigen Web-Page an? Diese Frage beantwortet unser Sieger havenworks.com. Nehmen Sie sich gefühlte fünf Minuten Zeit für den Ladeprozess – auch Ihnen werden anschließend wahrscheinlich die Worte fehlen 😉
Kennen Sie weitere Beispiele?
Dies sind zehn eindrucksvolle Beispiele dafür, wie blauäugig auch heute noch manche Unternehmen im Web zugange sind und wie man Potenziale und Geld mit vollen Händen zum Fenster hinauswerfen kann. Wir wollen gewiss nicht hämisch sein oder hochnäsig wirken – manchmal verschlägt es einem aber eben schier die Sprache, wenn man durchs Web surft …
Oder sind manche dieser Seiten vielleicht sogar schon wieder so strange, dass sie innovativ sind? Kennen Sie andere kuriose Beispiele, die unter Mottos wie „… hat sich bemüht …“ oder auch „… ist dieser Zeit voraus …“ stehen? Wir freuen uns auf Ihre inspirierenden Hinweise.
Ratgeber: So landet Ihre Website niemals in einer solchen Liste
Sie haben gerade zehn Websites gesehen, die aussehen, als hätte jemand einen Farbtopf in einen Computer geworfen und gehofft, dass dabei Kunst entsteht. Die gute Nachricht: Mit den folgenden Tipps wird Ihre Website garantiert nicht zum Mahnmal schlechten Webdesigns.
Die schlechte Nachricht: Falls Sie gerade eine dieser Websites betreiben, lesen Sie besonders aufmerksam.
Ladezeit vs. Absprungrate
Jede Sekunde zählt: So schnell verlieren Sie Ihre Besucher
⚠️ Bei 10 Sekunden Ladezeit verlieren Sie 123% mehr Besucher als bei 1 Sekunde
💡 Die goldene Regel
Ihre Website sollte in unter 3 Sekunden vollständig laden. Alles darüber kostet Sie bares Geld – mit jeder Sekunde mehr sinkt Ihre Conversion-Rate um 17%.
Warum ist eine gute Website heute wichtiger denn je?
In den Neunzigern konnte man mit einer blinkenden Website noch durchkommen. Heute nicht mehr. Aktuelle Studien belegen: 79% der Nutzer, die mit der Usability einer Website unzufrieden sind, suchen sofort bei einem Konkurrenten nach der gewünschten Information. Das ist kein Wettbewerb, den Sie verlieren wollen.
Noch dramatischer: 88% der Nutzer kehren nie wieder zurück, wenn sie auf einer Website Schwierigkeiten haben, die gewünschten Informationen zu finden. Ihre Website ist also nicht nur Ihr digitales Aushängeschild. Sie ist Ihr fleißigster Mitarbeiter, der rund um die Uhr Kunden empfängt.
Oder eben vergrault.
| Faktor | Auswirkung |
|---|---|
| Ladezeit über 3 Sekunden | 53% der Besucher springen ab |
| Fehlende Mobile-Optimierung | 70% der Nutzer meiden die Website |
| Unübersichtliche Navigation | Bis zu 90% höhere Absprungrate |
| Schlechtes Design | 48% der Nutzer zweifeln an der Produktqualität |
Welche Todsünden sollten Sie bei der Ladezeit vermeiden?
Kennen Sie das? Sie klicken auf einen Link und warten. Und warten. Und fragen sich, ob das Internet vielleicht gerade eine Kaffeepause macht. Genau so fühlen sich Ihre Besucher, wenn Ihre Website zu langsam lädt.
Die magische Grenze liegt bei drei Sekunden. Jede zusätzliche Sekunde Ladezeit erhöht die Absprungwahrscheinlichkeit um satte 90%. Bei zehn Sekunden haben Sie bereits 123% mehr Absprünge als bei einer Sekunde. Das klingt mathematisch unmöglich, ist aber die bittere Realität mobiler Websites.
So beschleunigen Sie Ihre Website
Bilder sind oft der größte Übeltäter. Ein einzelnes nicht optimiertes Foto kann mehrere Megabyte wiegen und Ihre Ladezeit in die Steinzeit katapultieren. Komprimieren Sie Bilder vor dem Upload, nutzen Sie moderne Formate wie WebP und fragen Sie sich bei jedem Bild: Brauche ich das wirklich in dieser Auflösung?
JavaScript und CSS sollten minimiert und zusammengefasst werden. Jede externe Datei bedeutet eine zusätzliche Serveranfrage. Weniger Anfragen, schnellere Website. So einfach ist das.
Caching ist Ihr Freund. Wenn ein Besucher zum zweiten Mal kommt, muss er nicht alles neu laden. Aktivieren Sie Browser-Caching und nutzen Sie ein Content Delivery Network, wenn Ihre Besucher aus verschiedenen Regionen kommen.
Wie gestalten Sie eine Navigation, in der sich niemand verirrt?
Stellen Sie sich vor, Sie betreten einen Supermarkt, in dem die Regale willkürlich beschriftet sind. Brot finden Sie unter „Kosmische Energie", Milch unter „Flüssige Träume". Genau so fühlt sich eine schlechte Navigation an.
Eine intuitive Navigation ist kein Luxus. Sie ist die Grundlage jeder erfolgreichen Website. Reduzieren Sie die Anzahl der Menüpunkte auf das Wesentliche. Verwenden Sie klare, beschreibende Begriffe, die Ihre Besucher verstehen. „Produkte" ist besser als „Unsere magischen Angebote".
Die wichtigsten Navigationsregeln
Der Drei-Klick-Regel zufolge sollte jede Information auf Ihrer Website innerhalb von drei Klicks erreichbar sein. Das ist keine starre Vorgabe, aber ein guter Richtwert. Wenn Ihre Besucher fünf Ebenen tief navigieren müssen, um die Telefonnummer zu finden, stimmt etwas nicht.
Breadcrumbs helfen bei der Orientierung. Diese kleinen Pfadangaben zeigen Besuchern immer, wo sie sich gerade befinden und wie sie zurückkommen. Besonders wichtig bei umfangreichen Websites mit vielen Unterseiten.
Eine Suchfunktion ist Pflicht, sobald Ihre Website mehr als zehn Seiten hat. Aber bitte eine, die auch funktioniert. Nichts frustriert mehr als eine Suche, die keine relevanten Ergebnisse liefert.
Warum ist Mobile-First keine Option, sondern Pflicht?
Mobile-First ist Pflicht
Warum Ihre Website auf dem Smartphone funktionieren muss
- Google rankt Sie schlechter – Mobile-First-Indexierung seit 2019 Standard
- 70% der Nutzer meiden Ihre Website – Sie verlieren zwei Drittel potenzieller Kunden
- Buttons werden zu Frustquellen – Zu kleine Touch-Ziele führen zu Fehlklicks
- Ihre Konkurrenz überholt Sie – Responsive Websites haben 30% bessere Performance
📱 Mobile-First bedeutet nicht Mobile-Only
Gestalten Sie zuerst für den kleinsten Bildschirm, dann skalieren Sie nach oben. Dieser Ansatz zwingt Sie, auf das Wesentliche zu fokussieren – und davon profitiert auch die Desktop-Version.
Über 68% aller Website-Besuche erfolgen heute über Mobilgeräte. Wenn Ihre Website auf einem Smartphone aussieht wie ein zusammengeknüllter Zeitungsausschnitt, haben Sie ein Problem. Ein großes Problem.
Google bewertet Websites seit Jahren nach dem Mobile-First-Prinzip. Das bedeutet: Die mobile Version Ihrer Website bestimmt Ihr Suchmaschinenranking. Eine Desktop-Perle mit miserabler mobiler Darstellung landet in den Suchergebnissen weit hinten.
Mobile-Optimierung in der Praxis
Responsive Design ist das Minimum. Ihre Website muss sich automatisch an verschiedene Bildschirmgrößen anpassen. Buttons sollten mindestens 44 Pixel groß sein, damit man sie mit dem Finger treffen kann. Schriften müssen lesbar bleiben, ohne dass Besucher zoomen müssen.
Testen Sie Ihre Website regelmäßig auf echten Geräten. Emulatoren und Browser-Tools sind hilfreich, ersetzen aber nicht den Test auf einem realen Smartphone. Sie werden überrascht sein, wie anders sich manche Elemente anfühlen, wenn man sie tatsächlich mit dem Finger bedient.
Achten Sie auf Touch-Ziele. Links, die auf dem Desktop problemlos anklickbar sind, können auf dem Smartphone zur Fingerakrobatik werden. Genügend Abstand zwischen klickbaren Elementen ist keine Designfrage, sondern eine Usability-Notwendigkeit.
Was macht ein Design professionell und vertrauenswürdig?
Hier kommt die unbequeme Wahrheit: Menschen beurteilen Ihre Kompetenz innerhalb von Millisekunden anhand Ihres Designs. Schlechtes Design signalisiert schlechtes Business. Das ist unfair, aber es ist Realität.
48% der Nutzer geben an, dass sie bei einer schlecht gestalteten Website automatisch annehmen, dass auch die Produkte oder Dienstleistungen minderwertig sind. Ihr Design ist also nicht nur Dekoration. Es ist Ihr erster Verkäufer. Was genau in den ersten 10 bis 20 Sekunden im Kopf eines Nutzers passiert und wie Designentscheidungen Vertrauen systematisch aufbauen oder zerstören, haben wir in einem eigenen Fachartikel „Vertrauen aufbauen: Ihr Webdesign hat nur 10 Sekunden“ analysiert:
Die Grundregeln professionellen Designs
Weniger ist mehr. Die erfolgreichsten Websites sind visuell fokussiert. Jedes Element hat einen Zweck und einen Platz. Wenn Sie nicht erklären können, warum ein bestimmtes Element auf Ihrer Seite ist, gehört es wahrscheinlich nicht dorthin.
Konsistenz schafft Vertrauen. Verwenden Sie durchgehend die gleichen Schriftarten, Farben und Abstände. Ein harmonisches Erscheinungsbild signalisiert Professionalität. Ein Stilmix aus fünf verschiedenen Schriften schreit nach Chaos.
Weißraum ist kein verschwendeter Platz. Er gibt Inhalten Raum zum Atmen und lenkt den Blick auf das Wesentliche. Websites, die jeden Pixel mit Informationen vollstopfen, überfordern Besucher und erreichen genau das Gegenteil dessen, was sie wollen.
Wie formulieren Sie Handlungsaufforderungen, die funktionieren?
Ein fehlender oder unauffälliger Call-to-Action ist wie ein Verkäufer, der Kunden begrüßt, aber nie fragt, ob er helfen kann. Ihre Besucher wissen nicht automatisch, was sie auf Ihrer Website tun sollen. Sie müssen es ihnen sagen.
CTAs sollten sich farblich vom Rest der Seite abheben. Verwenden Sie aktive Verben und kommunizieren Sie den Nutzen. „Jetzt kostenloses Erstgespräch sichern" ist besser als „Hier klicken". Der Besucher weiß sofort, was er bekommt.
Die häufigsten CTA-Fehler
Zu viele CTAs verwirren. Wenn auf einer Seite zehn verschiedene Buttons um Aufmerksamkeit kämpfen, klickt der Besucher auf keinen. Priorisieren Sie. Was ist die wichtigste Aktion, die ein Besucher auf dieser Seite ausführen soll?
Platzierung ist entscheidend. CTAs gehören an Stellen, wo der Besucher sie erwartet. Nach einer überzeugenden Beschreibung, am Ende eines Abschnitts, oberhalb des Faltpunkts. Nicht versteckt in der Fußzeile.
Vermeiden Sie Slider im Header. Studien belegen, dass nur sehr wenige User sich die Zeit nehmen, Slider durchzuklicken. Verstecken Sie keine wichtigen Informationen in einem Karussell, das niemand benutzt.
Welche Rolle spielen Vertrauenssignale?
Vertrauen ist die Währung des Internets. Ohne Vertrauen keine Conversions. Und Vertrauen entsteht nicht durch Behauptungen, sondern durch Beweise.
Kundenbewertungen, Testimonials, Gütesiegel und Zertifikate sind keine Dekoration. Sie sind der Beweis, dass andere Menschen gute Erfahrungen mit Ihnen gemacht haben. Zeigen Sie diese Signale prominent. Nicht versteckt auf einer Unterseite, die niemand findet.
Vertrauenssignale richtig einsetzen
Echte Bilder schlagen Stockfotos. Authentische Fotos Ihres Teams, Ihrer Räumlichkeiten oder Ihrer Produkte schaffen Nähe. Generische Stockfotos von lächelnden Menschen in Anzügen wirken austauschbar und unglaubwürdig.
Eine transparente „Über uns"-Seite ist Gold wert. Menschen kaufen von Menschen. Zeigen Sie, wer hinter dem Unternehmen steht. Erzählen Sie Ihre Geschichte. Seien Sie authentisch.
Kontaktmöglichkeiten müssen sichtbar sein. Eine gut erreichbare Telefonnummer oder E-Mail-Adresse signalisiert: Hier stecken echte Menschen dahinter, die erreichbar sind. Versteckte Kontaktdaten wecken Misstrauen.
Wie vermeiden Sie die typischen Content-Fehler?
In das Design wird oft viel Zeit und Geld investiert. In den Content leider zu wenig. Dabei wirkt die Qualität des Contents direkt auf SEO und die Conversion.
Wenn Besucher nicht sofort verstehen, was Sie anbieten, sind sie weg. Das einzigartige Leistungsversprechen Ihres Unternehmens muss auf den ersten Blick erkennbar sein. Was können Sie, was andere nicht können? Warum sollte jemand bei Ihnen kaufen?
Content, der konvertiert
Vermeiden Sie Textwüsten. Strukturieren Sie Inhalte mit Zwischenüberschriften, Aufzählungen und Absätzen. Scanbarkeit ist wichtig. Die meisten Besucher lesen nicht jedes Wort. Sie überfliegen Seiten auf der Suche nach relevanten Informationen.
Sprechen Sie die Sprache Ihrer Zielgruppe. Fachbegriffe ohne Erklärung schrecken ab. Zu simplifizierte Texte wirken unprofessionell. Finden Sie die richtige Balance für Ihre Besucher.
Aktualisieren Sie regelmäßig. Veraltete Inhalte, abgelaufene Angebote oder News von 2019 signalisieren: Hier kümmert sich niemand. Ihre Website ist lebendig oder sie ist tot.
Die ultimative Checkliste: Ist Ihre Website auf der sicheren Seite?
Bevor Sie diese Seite verlassen, prüfen Sie Ihre eigene Website anhand dieser Checkliste. Jedes „Nein" ist ein potenzielles Problem, das Sie Kunden kostet.
| Kriterium | Ja/Nein |
|---|---|
| Lädt die Website in unter 3 Sekunden? | ☐ |
| Funktioniert die Navigation intuitiv? | ☐ |
| Ist die Website auf Smartphones gut nutzbar? | ☐ |
| Sind alle CTAs klar und sichtbar? | ☐ |
| Gibt es sichtbare Vertrauenssignale? | ☐ |
| Ist sofort erkennbar, was Sie anbieten? | ☐ |
| Sind alle Links und Buttons funktionsfähig? | ☐ |
| Wurden die Inhalte in den letzten 12 Monaten aktualisiert? | ☐ |
Falls Sie mehr als zwei Punkte mit „Nein" beantwortet haben, ist es Zeit für eine Überarbeitung. Die gute Nachricht: Die meisten dieser Probleme lassen sich mit überschaubarem Aufwand beheben.
Glossar: 12 wichtige Fachbegriffe zu Webdesign und Usability
Absprungrate
Die Absprungrate (englisch: Bounce Rate) gibt an, welcher Prozentsatz der Besucher eine Website nach dem Aufruf einer einzigen Seite wieder verlässt. Eine hohe Absprungrate deutet auf Probleme mit der Usability, dem Content oder der Ladezeit hin und kann das Suchmaschinenranking negativ beeinflussen.
Call-to-Action
Ein Call-to-Action (CTA) ist eine Handlungsaufforderung auf einer Website, die Besucher zu einer bestimmten Aktion motivieren soll. Typische Beispiele sind Buttons mit Texten wie „Jetzt kaufen", „Kostenlos testen" oder „Newsletter abonnieren".
Conversion-Rate
Die Conversion-Rate misst den Anteil der Website-Besucher, die eine gewünschte Aktion ausführen. Diese Aktion kann ein Kauf, eine Anmeldung oder eine Kontaktanfrage sein. Eine höhere Conversion-Rate bedeutet mehr Geschäftserfolg bei gleichbleibendem Traffic.
Core Web Vitals
Die Core Web Vitals sind von Google definierte Kennzahlen, die die Nutzererfahrung einer Website messen. Sie umfassen Ladezeit, Interaktivität und visuelle Stabilität. Seit 2021 sind sie ein offizieller Rankingfaktor für die Google-Suche.
Mobile-First
Mobile-First beschreibt einen Designansatz, bei dem zuerst die mobile Version einer Website entwickelt wird und dann die Desktop-Version. Google bewertet Websites seit Jahren nach diesem Prinzip und priorisiert die mobile Darstellung beim Ranking.
Page Speed
Der Page Speed bezeichnet die Ladegeschwindigkeit einer Website. Er wird durch Faktoren wie Bildgrößen, Serverantwortzeit und Code-Effizienz beeinflusst. Schnelle Ladezeiten verbessern sowohl die Nutzererfahrung als auch das Suchmaschinenranking.
Responsive Design
Responsive Design ermöglicht es einer Website, sich automatisch an verschiedene Bildschirmgrößen anzupassen. Layout, Bilder und Schriften skalieren je nach Gerät, sodass die Website auf Desktop, Tablet und Smartphone gleichermaßen gut nutzbar ist.
Trust Signals
Trust Signals sind Vertrauenssignale auf einer Website, die Besuchern Sicherheit und Glaubwürdigkeit vermitteln. Dazu gehören Kundenbewertungen, Gütesiegel, Zertifikate, Referenzen und transparente Kontaktinformationen.
Usability
Usability bezeichnet die Benutzerfreundlichkeit einer Website. Sie umfasst Aspekte wie Navigation, Lesbarkeit, Zugänglichkeit und intuitive Bedienbarkeit. Eine gute Usability führt zu höherer Zufriedenheit und besseren Conversion-Raten.
User Experience
Die User Experience (UX) beschreibt das gesamte Erlebnis eines Nutzers bei der Interaktion mit einer Website. Sie geht über reine Usability hinaus und umfasst auch emotionale Aspekte wie Design, Ästhetik und das Gefühl bei der Nutzung.
Viewport
Der Viewport ist der sichtbare Bereich einer Website im Browserfenster. Bei responsivem Design passt sich der Inhalt an die Viewport-Größe an. Mobile Geräte haben kleinere Viewports als Desktop-Monitore.
Weißraum
Weißraum (englisch: White Space) bezeichnet die ungenutzten Bereiche zwischen Designelementen auf einer Website. Er ist nicht zwingend weiß, sondern einfach leer. Weißraum verbessert die Lesbarkeit und lenkt den Blick auf wichtige Inhalte.
70 Kommentare
Nicht ganz sooo extrem aber dafür peinlich, da doch auch recht bekannter Name: http://skoda.de
Beim „Farbkonzept“ von #8 musste ich spontan an http://www.pearl.de denken.
Und warum sind die Webseiten nicht verlinkt, wenn man fragen darf?
Langweilig!
Ich kenn da einen Kandidaten aus Deutschland:
http://www.ra-kotz.de
Man sollte nicht alles selber machen…
Toll … eine Linkliste ohne Links, sodass man sich die Links hier per CopyPaste selbst rausfriemeln muss. Albern. Soviel zum Thema Usability liebe Redaktion.
Das Paradoxe ist dass bei einigen Seiten/Teilen sogar durchaus Code dahinter steht, der angesichts dessen was er darstellt, noch recht ordentlich wirkt.
Meine Nackenhaare haben mir die Seiten denoch aufgestellt.
Extreme Beispiele, die keiner kennt – wo aber offensichtlich ist, dass hier ganz massiv was nicht stimmt.
Spannender hätte ich es gefunden, wenn man die Webseiten von bekannteren Firmen (pearl, siemens, conrad, …) auf echte (aber womöglich nicht gleich ins Auge stechende) Usability-Schwachstellen hin untersucht.
Ich bin fast so weit zu behaupten, dass 9 von 10 Webseiten aus diesem Listing sich einen Spaß aus ihrer unterirdischen Webpräsenz machen. Ich mein, verkaufen können die über so etwas doch eh nichts. Zumal schon jemand angemerkt hat, dass irgendwie doch gelegentlich etwas komplexere Technik hinter dem schlimmen Layout versteckt ist.
Zu Platz 4: Lingscars.com & Hendriks Kommentar („Ich mein, verkaufen können die über so etwas doch eh nichts.“…)
Hatte im Vorfeld schon einmal was über die Autohändlerin Ling aus GB gehört. Diese „Billigheimer-Website“ hat durchaus System und ist mit Sicherheit absatzfördernder als so manche Autohaus-Homepage-Lösung von der Stange (bzw. von der Herstellermarke).
Hier wird ganz bewusst eine „Reste-Rampe-Sonder-Schnäppchen“-Stimmung beim User erzeugt und dieser somit zur lockeren und unverbindlichen Kontaktaufnahme verleitet.
Bei Standard-BMW-Händlerseiten z.B. muss emotional eine größere Hürde überwunden werden, um sich mit dem seriösen, verbindlichem BMW-Verkäufer in Verbindung zu setzen.
Bei Lingscars.com denkt sich der User schon eher: „Fragen kostet ja nix, blamieren kann ich mich bei der komischen Chinesin ohnehin mit keiner Frage..“
Mein Senf..
So long,
@HumphreyBlogart
Voll krass und absolut daneben…
http://www.fiberopticproducts.com
http://www.rind-bw.de
viel Informationen, aber schrecklich angeordnet.
Nochmal zu Platz 4:
Ich denke auch, daß Frau Ling sehr genau weiss, was sie tut und damit anscheinend auch recht erfolgreich ist:
http://www.lingscars.com/feature/bized.php
Die trashige Aufmachung ist m.E. gewollt, um ins Gespräch zu kommen und im Gedächtnis zu bleiben.
Viele hochglanzpolierte perfekt gestylte Websites vergisst man schneller als lingscar.com.
Bloß kein Gesicht zeigen und nur feige nichtdeutsche Seiten auflisten!
Schade eigentlich.
Oh ja, sehr hübsch. Farbenfroh und kreativ 😉 Der Webking erinnert mich ein bisschen an meine erste Website. 1997 wohlgemerkt. Da hatte ich auch mal so einen Wölkchen-Hintergrund 🙂
Ich muss meinen Vorpostern zustimmen. Ist sicher eine nette Ansammlung und „schön“ zu betrachten, aber nicht wirklich lehrreich; wie bereits gesagt wäre es wesentlich interessanter, Websites großer Unternehmen bzw. überlebenswichtige Websites genau zu analysieren und auch verstecke NO-Go’s zu protokollieren und ggf. Lösungsvorschläge zu posten. Vielleicht was für die Zukunft? Dennoch danke
Haha – ich mach mir in die Hosen. Danke fuer die tolle Sammlung. Yvette’s Rezepte stehen uebrigens gleich oberhalb der pink ‚invitation‘ box. Entgegen dem Screenshot steht da jetzt ein Rezept fuer peach cobbler. Wie es aussieht wird die Site sogar aktualisiert! Seiten wie die auf dem 1. Platz sind mir schon bevor ueber den Weg gekommen. Frage mich allerdings, welchen Zweck die verfolgen. Die werden warscheinlich von irrwitzigen Eremiten mit Sammlungs-Wahn erstellt.
Das Schlimme ist ja, dass oftmals die Leute mit dem zufrieden sind und denken, dass sie eine so tolle Webseite haben. Da dann Überzeugungsarbeit zu leisten ist (leider) meist vergebens…
Diese Liste läßt sich schier endlos verlängern, angefangen von Vereinswebseiten über die perönlichen Reisehomepages bis hin zu „kommerziellen“ Kosmetikstudios..
Aber auf die Homepage angefragt, ob’s da nicht mal was moderneres sein darf, kriegt man oft die Antwort, dass es ja reicht. Ist ja „nur“ die Homepage..
Da schläft wohl hier und da jemand, der denkt, dass die Leute nur gelegentlich nach Infos im Netz suchen.. 😉
M.
Mir hätten schreckliche Websites von bekannten großen Firmen auch mehr gebracht.
Schreckliche Seiten im Netz zu finden ist eher eine Fleißaufgabe als lehrreich.
Mir ist z.B. http://www.katholisch.de/ auch ein bisschen buttonlastig.
Auch Seiten wie http://browseusers.myspace.com/Browse/Browse.aspx
sind in meinen Augen schrecklich.
Ob das nun Bug oder Feature ist, wer will das wissen 🙂
Jetzt war’s genug, das RSS-Abo ist gekündigt.
Sicher mögen solche Artikel amüsant sein,
aber ich hätte mich wahrscheinlich mehr über einen handfesten Beitrag gefreut.
Tolle Zusammenstellung.
Mein Tip:
* Kopfhörer aufsetzen
* Platz Nummer 2 aufrufen
* oben links beim Tiger Panzer auf Metall klicken
* …
Vor allem bei hohen Auflösungen sehr zu empfehlen:
http://www.gauselmann.de/
http://www.riesenbuhei.de/
So schlecht, dass es echt wieder gut ist 🙂
Da weiss man nicht, ob man Lachen oder heulen soll. Mein Lieblingskandidat in dieser Ecke des Ringes ist noch immer dieser hier: http://nva.4mg.com
Man beachte neben dem herausragenden Design den Eintrag im Impressum wie auch die TLD http://4mg.com.
Hoffentlich findet ein Anwalt diese nette Auflistung; solche Verbrecher haben wirklich nichts im Netz zu suchen…
Auf der Webseite von Pfaff (Nähmaschinen) wollte ich eine Registrierung zwecks Verlängerung der Gewährleistung vornehmen. Die entspr. Skripte klappen aber leider nicht. Eine Kontakt-Email ist nirgendwo angegeben. Nach langer Suche fand ich bei einem Spezialthema doch eine Email eines Pfaff-Mitarbeiters, fragte dort dann nach und erhielt nie eine Antwort !
Auch eine Form einer schlechten Webseite …
Ich möchte diese Art der Beiträge nicht mehr auf drweb.de finden!
Ein unterirdisch schlechtes Beispiel aus der Schweiz:
http://texsana.ch/
Bitte Ton einschalten.
Manche Leute hier gehen auch zum Lachen in den Keller glaub ich
Wenn es um bekanntere Wenseiten und deren Usability und Design geht, wundere ich mich bei einer Größenordnung wie ebay über deren schwache Ausführungen.
auf Platz 2 hab ich das gefunden
http://www.arngren.net/hoverpod.html
ich weiß nicht genau was es sein soll, aber ich will es haben 😀
Ich habe den Nick mit Absicht gewählt – und dennoch ist in meinen Augen diese Auflistung vielleicht mal Ende der 90er „lustig“ gewesen. 2010 wirkt solch ein Artikel speziell auf/in einer Website, die sich „professionell“ mit Web & Co. auseinandersetzt, mehr als peinlich.
Thema völlig verfehlt, Note 6.
Ich finde ja #5 die Härte. Schaut euch mal die Websites an die er gemacht hat, die hätten alle hier einen Platz bekommen!
Und für sowas erntet er auch noch Lob („Great Job Alan. Thank You!“ usw.)
Peinlich…
bundeshaeuschen.de
z.B. unter Jahreskalender
so in etwa sah auch die Speisekarte aus…
Also ich finde das auch etwas unpassend… Solche Uhr-alt-design Seiten gibt es wie Sand am Meer, die meisten findet man halt erst gar nicht durch die tollen Frames ^^
Interessanter wäre es wirklich gewesen, auf Seiten einzugehen die auch einen gewissen Stellenwert im Internet tragen. Als Beispiel fällt mir da z.b. http://swisscom.ch ein. „Top Modernes“ Design, aber findet da mal infos, geschweige den eine Telefonnummer!
Na drweb.de muß sich hier aber auch mal an die eigene Nase fassen. Eure Seite sprudelt auch nicht gerade vor Professionalität über. Ihr habt tatsächlich 4 Navigationsleisten, oben, unten, links und rechts. Die Anordnung der einzelnen Bereiche folgt keinem erkennbaren Schema: Links Rubriken, rechts Rubriken, dann Haupt- und Unternavigationspunkte auf der linken Seite, die sich teilweise auch oben wiederfinden. Unter dem Favicon des Tages (WTF?) sind weitere Links, die nicht näher bezeichnet sind, aber vermutlich auch zu den (linken) Rubriken gehören sollen. Gekrönt wird das ganze durch viel zu große bunte Bildchen für Twitter und RSS rechts. Also ich bitte Euch!
Platz 6: Wie jetzt, die Buttons links mit der Bezeichnung LCD und Plasma sind doch anklickbar? ;-))))
Vielen Dank für den Artikel! Ich schreibe derzeit meine Diplomarbeit im Bereich Usability und hab jetzt ein paar exzellente Beispiele für NICHT(!!!!!!)-Usability.
Gruß,
Franz
Ja, Links in der Liste hätten tatsächlich nicht geschadet. Sorry. Beim nächsten Mal …
Hallo,
wie eine Webseite aussieht ist, wenn ich Geld verdienen möchte mit meiner Webseite eigendlich völlig egal. Sie muss nur entsprechen optimiert werden.
Einer der erfolgreichsten und sehr umstrittenen Internetunternehmer hat sich mal in etwa so geeuzert:
Die meisten Webdesigner, Werbeargenturen, Medienberatern, Webmaster und was sonst so alles in diesen Bereich fällt, können keine Webseiten erstellen mit denen man Geldverdienen kann.
Und dies ist auch meine Meinung. Es lebt auch eine ganze Industrie davon Webseiten zuerstellen, die mehr Geldverbrennen als sie eigendlich einbringen sollten.
Privat mag ich auch optisch gut gemachte Seiten, aber damit kann man kein Geldverdienen.
Geschäftlich ist eine Webseite die 500 oder 1000 Euro mehr Gewinn abwirft die richtige. Auch wenn sich mir und meinem Grafiker der Magen dreht, wenn wir das Design betrachten.
Hier entscheidet allein der User(Kunde).
nohope
Hallo,
ich empfehle mal ein kleines Quis zu machen. Welche der obigen Webseiten hat wieviel Zugriffe. Mal Alexa anwerfen.
Eventuell wundern und als Preis gibt es die gefundenen Rechtschreibfehler aus meinen Postings.
nohope
Hmm…. dass die Links fehlen, wurde ja jetzt schon oft genug angemeckert, brauch ich also nicht nochmal zu erwähnen… ist nur irgendwie ziemlich peinlich, wenn man sich über Qualität im Web auslässt 😉
Zwar irgendwie ganz lustig die Liste, aber im Endeffekt wenig lehrreich…
Die Validierung der Nr. 1 ist lustig:
2912 Errors, 42 warning(s) 😀
Wenigstens versteht der Erstplatzierte Spaß, denn ganz unten ist zu lesen
„HavenWorks.com is not responsible for loss of vision, disorientation, or headaches from visual overload“.
Aber Wolfgangs Seite ist auch sehr krass (s. Kommentar 9). Ich frage mich, wie man sowas überhaupt erstellt!
Ein traditionsreicher Handwerksbetrieb schädigt sich selber
http://www.venter-glocken.de
Oh mein Gott – schönes Beispiel. Da ist jemand in der Urzeit des Webdesign stecken geblieben. Zusammen mit 15 Jahre alter Software, vermutlich.
Das ist in DIESER Liste nun wirklich fehl am Platz (man beachte den Titel des Postings). Immer schön fair bleiben!
Ich habe eine Frage, darf man als Webdesigner überhaupt solche Kritik veröffentlichen über anderen Webseiten? Wenn z.B. minus Punkten auf die Webseiten gibts (Augenarzt betreib sein Internet Präsentation, aber aber Texten sind mit 8px dargestellt, ist einfach zu klein..und noch als Augenarzt!).
Ganz fürchterlich finde ich auch franzx.de. Wenig informativ, unübersichtlich und die einzigen Design-Elemente sind Kursivschrift.
Ha ha, bei den meisten Seiten kann man sich wirklich sehr gut amüsieren.
Danke für die Zusammenstellung 😉
PS: ich hoffe, meine Seite landet hier nicht irgendwann …
Oh man… die sind richtig schlimm… Ein Hoch auf ein gutes Studium in dem man das lernt!
😀 Geil!
Deutsche Post efiliale.de eine der Benutzer unfreundlichsten Seiten… und da steckt auch noch eine Menge Geld hinter…
leider sind viele der TOP 10 schon geändert oder tot
Nicht mehr zeitgemäß und veraltet
Was mich nun bei einem Artikel aus dem Jahre 2010 nicht so recht verwundern will…
Nachtrag:
Achja, noch besser finde ich allerdings die Tatsache, dass er als Webdesigner scheinbar mit den Referenzen anderer Agenturen wirbt.
Das dürfte aus meiner Einschätzung sogar rechtlich grenzwertig sein, sowohl urheberrechtlich als auch irreführend.
Scheinbar hat er da auch keine eigenen Referenzen zu präsentieren, außer eben seine eigene Website.
Wer Ludger noch nicht kennt, hat ohnehin das Internet verpennt.
Mein persönlicher Gewinner ist http://www.deutschedoggenwatermann.de/index.html .
Das ist sehr spannend, aber LEIDER nicht sehr hilfreich, aber es ist wirklich wunderschön, dass man so eine hässliche und sinnlose Website findet.
OMG 😲 🙈
Die sind bestimmt in Sachen „Züchten“ bestimmt in ihrem Fach, aber nicht was die Gestaltung der Seite betrifft…
Und in Jahre 2023 ebenfalls, wobei zum Beispiel arngren.net und lingscars.com noch in ihrer „Schönheit“ noch gibt…
lingscars.com ist aber auch super schlimm, viel zu viel Kram drin, viel zu viel „BlingBling“, viel zu viele Animationen, unnötige Bilder und so…
arngren.net scheint wohl extrem breite Monitore zu verwenden, scheinbar für die Kinoleinwand…
Ich kenne noch schlimme Seiten, da hat man ebenfalls keine Fragen mehr…
Ich weiß nicht, wie die Seite vor über 9 Jahren aussah, scheinbar wurde die ins neue Jahrzehnt gebracht…
Die Inhalte sind wohl weiterhin sehr übersichtlich gehalten worden…
Wurde scheinbar mal aktualisiert 🤔
Die Schriftart lässt einen etwas zu denken geben 🤣
Die „Dort werde ich mein Geld los-Seite“ scheint responsive zu sein…
Auch nach fast 13 Jahren ein Augengraus 🙈
Scheint auf dem neueren Stand zu sein 👍
Wurde irgendwann wohl mal auf dem neueren Stand gebracht 👍
Und bei der Mindestbreite im Browser des PC um die komplette Breite sehen zu können, sind es 1000 Pixel, bei der mobilen Ansicht passt der Inhalt irgendwie noch rein, aber man sollte nicht allzu schlechte Augen haben… Der Inhalt ist von der Breite eh auf 1000 Pixel begrenzt…
Weiss nicht genau, was mit dieser Website erreicht werden will.
Sie hat einen gewissen musealen Wert und reiht sich ein in die lange Liste der Artikel, die von uns überarbeitet gehören. Besser sind in jedem Fall Showcases von Websites, die einem als Inspiration dienen können. Hier findest du https://www.drweb.de/elementor-showcase-seite/ vielleicht eine Website, die eine Idee für dich abwirft.