Vermeidbare Designfehler, die Ihrer Website schaden können

Das Web sollte besser werden, das war das Versprechen. Und Sie würden denken, das hätte es mit all dem erhöhten Bewusstsein für Zugänglichkeit und Nutzbarkeit getan. Aber seltsamerweise sind wir mehr als 25-Jahre und die Dinge werden im Allgemeinen schlimmer. Wie könnte das so sein?

Die Bildung kann nicht dafür verantwortlich gemacht werden. Jeder Kurs im Bereich Internetdesign und -entwicklung, der sein Salz verdient, umfasst die Grundlagen guter Designprinzipien, Benutzerfreundlichkeit und Zugänglichkeit. Die technischen Standards können nicht dafür verantwortlich gemacht werden, da die W3C-Richtlinien strenger und klarer als je zuvor sind. Die Technologie kann auch nicht dafür verantwortlich gemacht werden, da die Technologie die Entwicklung qualitativ hochwertiger Websites mehr unterstützt, nicht weniger.

Nein, die Antwort auf dieses Paradoxon ist eigentlich ganz einfach. Dies liegt daran, dass Designer die Macht der Anforderungen der Vermarkter und ihrer Kunden verloren haben. Der Designer weiß also, dass es einen guten Kontrast zwischen Text und Hintergrund geben sollte, aber er oder sie kann dieses gute Designprinzip nicht implementieren, weil jemand im Marketing der Meinung ist, dass es cooler erscheint, wenn der Text "dunkles Silber" anstelle von Schwarz erscheint Natürlich müssen wir für die Überschriften „diese verwaschene blaue Schrift, die Twitter verwendet“ haben, damit sich alle jungen Menschen besser mit unserer Website identifizieren können.

Die Sorge, dass „gut aussehen“ und auch das kopieren soll, was alle anderen tun, hat Vorrang vor praktischen Erwägungen wie hoher Geschwindigkeit, geringer Bandbreite und guter Nutzbarkeit. Wenn Sie zu den Kunden gehören, die entscheiden müssen, wie Ihre Website aussehen soll, ist dieser Artikel für Sie. Es ist auch für Designer gedacht, die den Mut haben, mit Kunden zu verhandeln, um die Websites besser in Einklang zu bringen, als sie eigentlich sein sollten, anstatt genau wie jede andere ähnliche Website da draußen zu sein. Es ist Zeit für die Zukunft, bereits anzukommen.

1. Schlechter Kontrast

Dies ist in letzter Zeit in Mode gekommen. Es ist erstaunlich, dass dies angesichts der wiederholten Nachricht, die uns in den vergangenen 25-Jahren wiederholt nach Hause getrieben wurde, der Fall sein kann, dass wir einen schlechten Kontrast vermeiden müssen. Der Vorläufer dieser Mode scheint Twitter und Bootstrap zu sein, könnte aber auch von jemand anderem inspiriert worden sein. Schauen wir uns ein Beispiel an:

Das obige ist ein Fragment von einer der Hilfeseiten von Twitter. Die Philosophie hinter dem Design scheint zu sein: Je wichtiger eine Information ist, desto dunkler erscheint sie auf der Seite. Daher ist die H1-Überschrift für die Seite in schwarzem Text, da dies als sehr wichtig erachtet wird.

Obwohl es im Screenshot nicht klar ist, ist der Haupttext des Textes tatsächlich eine dunkelgraue Farbe (nicht ganz schwarz), da dies wichtig erscheint, aber nicht so wichtig wie die Überschrift.

Links sind nicht in der Standardfarbe Blau, sondern in „Twitter Blue“, einem sehr blassen Farbton, der keinen guten Kontrast zu weißen Hintergründen hat.

Die H2-Überschrift weiter unten auf der Seite ist ein hellerer Grauton als der Haupttext, was einige Leute verwirrend finden. Überschriften sollten nicht schwieriger zu sehen sein als der Rest des Textes, es sei denn, sie wären eine große Ablenkung (in diesem Fall sollten Sie wahrscheinlich fragen, ob es sich überhaupt um Überschriften handeln muss).

Die Navigationsoptionen für das linke Bedienfeld sind ebenfalls in hellgrauen und hellblauen Schattierungen dargestellt. Wiederum scheint die Idee zu sein, dass diese Elemente unwichtig werden, sodass sie nicht vom Hauptinhaltsbereich ablenken.

Schließlich ist der blasseste Bereich von allen die Feedbackzone, die eindeutig der unwichtigste Teil von allen ist. Aber auch Twitter macht bessere Dinge als diese Seite:

Die einzige logische Schlussfolgerung, die aus diesem Beispiel abgeleitet werden kann, ist, dass Sie nicht möchten, dass Sie die Antwort auf die Frage kennen. Es ist, wenn Sie den Ausdruck verzeihen, jenseits des Blassen.

2. Ungültige Kodierung

Dies ist einfach ein Symptom für extreme Faulheit und es macht sich nicht einmal die Mühe, zu überprüfen, wie Ihre Seite dargestellt wird. Es scheint unmöglich, diesen Fehler in der heutigen Zeit zu begehen, aber die Leute schaffen es trotzdem irgendwie. Sie schaffen es sogar aus den falschen Gründen, wie in diesem Beispiel gezeigt:

Sieht aus wie ein gewöhnlicher Fall, dass jemand vergessen hat, die Kodierung auf UTF-8 zu setzen, richtig? Dies ist jedoch nicht der Fall, da die Kodierung für diese Seite auf UTF-8 eingestellt ist. Der Site-Designer hat alles richtig gemacht und sogar die äußerste Länge erreicht, indem er alle Apostrophe in den Metadaten dem Entity-Zeichen 39 entzogen hat, obwohl dies möglicherweise nicht einmal notwendig ist. Das Problem trat beim Einfügen des Inhalts in das Design auf, da offensichtlich falsch codierter Text, der MS Word-Anführungszeichen enthielt, in den Inhaltsabschnitt eingefügt wurde. Dadurch wird sichergestellt, dass er in jedem Browser falsch dargestellt wird, da die Kodierung von Die Seite ist auf UTF-8 eingestellt und der Inhalt ist nicht in UTF-8 codiert.

Während die meisten Menschen bereit sind, die kleine Frage zu übersehen, dass intelligente Apostrophe als â € dargestellt werden, ist dies sehr ärgerlich und noch schlimmer, wenn der Fehler in der Schlagzeile auftritt. Die Quintessenz ist, dass Sie überprüfen müssen, ob der Inhalt korrekt angezeigt wird, wenn Sie ihn im Web freigeben. Sie sollten immer sicherstellen, dass Sie die richtige Kodierung verwenden (die für die meisten Zwecke UTF-8 oder UTF-16 ist). Denken Sie daran, dass es sich bei Websites hauptsächlich um erste Eindrücke handelt, und es ist wirklich nicht gut, wenn der erste Eindruck, den jemand von Ihrem Unternehmen bekommt, „schlampig“ oder „faul“ ist.

3. Flash verwenden

Es gibt einfach keinen Grund mehr, dies zu tun. Flash hatte seinen Tag, aber dieser Tag ist vorbei. Immer noch verwenden viele Websites und insbesondere Glücksspielseiten (wo dies am wenigsten geeignet ist) immer noch Flash. Außerdem nutzen einige der größten und erfolgreichsten Websites im Web Flash in vielen verschiedenen Kontexten. Wenn es für sie gut genug ist, warum wäre es dann nicht gut genug für Sie?

Zum einen ist Flash ein riesiger Ressourcenschwarm. Es ist auch mit Schwachstellen durchsetzt, wurde von böswilligen Hackern als Trojaner-Bereitstellungsmechanismus ins Visier genommen und ist aufgrund des Einbaus permanenter Flash-Cookies, die auch als Local Shared Objects bekannt sind, inhärent ein Datenschutzrisiko. Diese Cookies umgehen die Sicherheitseinstellungen des Browsers und enthalten möglicherweise weitaus mehr Informationen als ein normales Cookie. Noch schlimmer ist jedoch, dass LSOs Daten zwischen verschiedenen Browsern gemeinsam nutzen, wodurch es für normale Benutzer noch schwieriger wird, die Privatsphäre zu wahren.

Benutzer, die genug über Flash wissen, werden sich im besten Fall mit der Verwendung von Flash als faul oder veraltet bezeichnen. Es besteht jedoch auch die Möglichkeit, dass Benutzer Ihr Unternehmen als unzureichend für das Sicherheitsbewusstsein, als Missachtung von Datenschutzbedenken oder noch schlimmer empfinden dass Sie nicht vertrauenswürdig sind.

Alles, was in Flash möglich ist, kann in regulärem HTML-5 ausgeführt werden. Wenn Sie also weiterhin Flash verwenden, wird den Benutzern angezeigt, dass Sie entweder nicht wissen, wie sie die Funktionalität in HTML 5 replizieren sollen, dass Sie zu billig sind Tun Sie dies, oder nutzen Sie absichtlich die dunkle Seite von Flash. Wenn Sie daran denken, Flash zu verwenden und keine unehrlichen Absichten haben, lohnt es sich nicht.

4. AutoPlay-Video

Wenn es eine Sache gibt, die Benutzer nicht universell ertragen können, besteht die widerwärtige Annahme, dass die Website, wenn sie Videoinhalte bereitstellt, diese abspielen möchte. News-Websites sind besonders schuld an dieser Sünde, und viele von ihnen gehen sogar so weit, dass sie eine unendliche Wiedergabeliste an das Video anhängen, das sie automatisch spielen. In YouTube ist standardmäßig auch die automatische Wiedergabeliste aktiviert. Das erste Video wird jedoch nicht automatisch abgespielt. Natürlich sollten Benutzer sich für die automatische Wiedergabe entscheiden müssen, sie sollten sich nicht dagegen entscheiden.

Nutzer mit begrenzten Bandbreitenplänen und insbesondere mobile Nutzer (die meisten davon), werden es nicht zu schätzen wissen, dass Ihre Website Videos in ihren Browser geladen und abgespielt hat, ohne dass sie davon Kenntnis haben. Die einzige Möglichkeit, die automatische Wiedergabe eines Videos als angemessen erachtet werden kann, ist, wenn das Video sehr klein (in Bytes) ist, in sich abgeschlossen ist und einen Mehrwert für die Benutzererfahrung bietet.

Wenn so viele Benutzer dieses Verhalten als ärgerlich bezeichnen und tatsächlich fragen, wie sie es deaktivieren können, muss dies wirklich ärgerlich sein. Und ja, wir wissen, dass es für Benutzer von Firefox, Chrome und Chromium eigentlich ganz einfach ist, die automatische Wiedergabe vollständig zu deaktivieren, aber wie viele Benutzer sind wirklich in ungefähr: config herumtollen oder ein Plug-in installieren, um ein Verhalten zu blockieren, das nicht sein sollte in erster Linie ausgenutzt?

Beachten Sie, dass wir dort über Ausbeutung gesprochen haben? Dies liegt daran, dass die Ersteller von HTML 5 nichts falsch gemacht haben, indem sie die Möglichkeit der automatischen Wiedergabe berücksichtigt haben. Es ist nur so, dass sie nicht damit gerechnet haben, dass die Leute es so falsch verwenden.

5. Unendliche Schriftrolle

Dies ist ein weiteres, einmaliges und interessantes Konzept, das von Vermarktern völlig entführt wurde. Es ist jetzt eher eine Quelle von Frustration als von Unterhaltung, wie es sein sollte. Die Vermarkter haben herausgefunden, dass sie, wenn sie endloses Scrollen auf einer Webseite verwenden, die Benutzer länger auf der Seite halten können.

Aber noch einmal erzählen die Suchergebnisse eine Geschichte. Siehe dieses Beispiel:

Wie Sie sehen können, ist der generelle Ton, dass unendliches Scrollen ärgerlich ist. Es verbessert nicht die Benutzererfahrung, es verursacht massive Usability-Probleme und kann zu Speicher- und Leistungsproblemen führen, wenn Seiten größer werden und mehr Inhalt generieren. Dies ist insbesondere der Fall, wenn Benutzer mehrere Registerkarten öffnen und Anbieter medienreiche Inhalte auf unendlichen Bildlauf-Websites auf mehreren Registerkarten bereitstellen. Dies führt auf jeden Fall zu Problemen.

6. Erzeugung von Pop-Under- oder Popover-Fenstern, wenn diese nicht benötigt werden

Alles, was nicht zur Benutzererfahrung beiträgt, beeinträchtigt dies. Die Beeinträchtigung der Benutzererfahrung führt zu Ressentiments, und Benutzer vermeiden Ihre Website, wenn es eine praktikable Alternative gibt. Aus diesem Grund werfen Websites, die sich in sehr sicheren Positionen wie TripAdvisor aufhalten, Pop-under-Fenster so zufällig herum, wie US-Soldaten Propaganda-Teddybären für afghanische Kinder verhungern. Wo aber die Bären wenigstens Freude bereiten, führen die Pop-Ups nur zu Ärger.

Das Schlimmste an diesem Verhalten von TripAdvisor ist, dass es wirklich keinen Sinn macht, etwas zu tun, da der Benutzer bereits auf seiner Website ist. Die einzigen denkbaren Gründe für TripAdvisor, das gleiche Fenster zu kopieren, in dem sich der Benutzer bereits als Pop-under-Fenster befindet, wären:

  • Googles Absprungsratenanalyse zu täuschen
  • um zu versuchen, dass Sie zweite Gedanken haben, wenn Sie abprallen

Keine davon scheint eine besonders gute Idee zu sein. Natürlich kann es andere Gründe dafür geben, aber wenn es sie gibt, sind sie nicht offensichtlich.

7. Ärgerliche Überlagerungen

Es ist (noch nicht) kein "International Bash TripAdvisor Day", aber da sie so großzügig Beispiele für unangenehmes Verhalten von Webseiten liefern, würde sie wirklich einem Geschenkpferd in den Mund schauen, um dies zu ignorieren. Hier ist also, was TripAdvisor gerade gezeigt hat, als ich diesen Pop-under-Screenshot eingerichtet hatte:

Sie können wahrscheinlich schon erraten, was daran so dumm ist. Es ist, dass ich bereits auf ihrer Website bin. Ich überlege bereits, auf ihrer Website einzukaufen. Dieses Pop-Over bringt also nichts, außer dass ich mir dabei im Weg stehe. Zumindest ist es keine solche Überlagerung, die mich anfleht, einen Newsletter zu abonnieren oder ein „kostenloses“ E-Book herunterzuladen.

Sie sollten diese Dinge auf keinen Fall verwenden, es sei denn, sie stellen dem Benutzer einige sehr wichtige Informationen zur Verfügung. Ein Beispiel dafür können Anweisungen zum Spielen eines Spiels sein, das im Browser angefordert wurde, oder eine Sicherheits- oder Datenschutzwarnmeldung.

Es ist meistens eine Frage des gesunden Menschenverstands.

Das wirklich Offensichtliche ist, dass wenn Sie im Web etwas tun, was nur für Sie von Nutzen ist, keinen Nutzen für den Benutzer bringt und ihn in gewisser Weise belästigt, seine Privatsphäre beeinträchtigt oder tatsächlich Geld kostet (wie im Fall von Autoplay Video und unendliche Scrolling-Websites), werden die Nutzer es ablehnen. Vielleicht nicht alle Benutzer, aber genug einer stimmlich aktiven Mehrheit, um noch einige andere zu beeinflussen.

Wenn Ihre Website einen dieser Designfehler aufweist, sollten Sie unverzüglich Maßnahmen ergreifen, um diese Fehler zu beheben. Sie können Ihrem öffentlichen Image schaden und Benutzer von Ihrer Website abhalten.

Headerbild mit freundlicher Genehmigung von Dan Dragomir

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.