Lohnen sich alle Trends? Die 5 häufigsten UX-Fehler, die Webdesigner machen

„Eleganz ist erreicht, wenn alles Überflüssige abgelegt ist und der Mensch Einfachheit und Konzentration entdeckt: Je einfacher und nüchterner die Haltung, desto schöner wird sie.“ -Paulo Coelho

Die Mission eines Webdesigners besteht darin, ansprechende Benutzererlebnisse zu schaffen, Website-Besuchern bei der Bewältigung von Aufgaben zu helfen und die Conversions zu steigern. Dabei konzentrieren sie sich oft nur auf die Ästhetik, nehmen Abkürzungen und verlassen sich am Ende auf verschiedene gängige Designmuster und -trends. Die Gefahr dabei besteht darin, dass sie von beliebten Trends abgelenkt werden und folglich häufige UX-Fehler gemacht werden, weil die Trends unangemessen eingesetzt werden.

Wenn es um das Internet geht, wollen die Leute nichts lernen , sie wollen Dinge tun . Es gibt viele Beispiele im Web, bei denen sich Designer dafür entschieden haben, sich nur auf die visuelle Attraktivität zu konzentrieren und dabei die Benutzerfreundlichkeit zu opfern. Sie gingen davon aus, dass ein „Wow-Moment“, der das Design antreibt, an sich stark genug wäre, um den Benutzer zu fesseln. Aber leider haben die Benutzer Schwierigkeiten, die Benutzeroberfläche zu verstehen, haben echte Schwierigkeiten, die Website zu verwenden, und die Absprungraten der Website sind in die Höhe geschossen.

Wie Kate Rutter sagte: „Hässlich, aber nützlich trumpft hübsch, aber sinnlos auf.“ Der Schlüssel zur effektiven Nutzung von Webdesign-Mustern und -Trends besteht darin, ein Gleichgewicht zwischen dem zu finden, was ästhetisch ansprechend aussieht, und wo sie einen Mehrwert bieten.

Schauen wir uns einige häufige UX-Fehler an.

Webdesign Häufiger UX-Fehler Nr. 1: Große, feste Header

Auf Websites sind immer mehr hohe Sticky-Header zu sehen. „Branding-Blöcke“ und Navigationsmenüs, die eine feste Position haben und viel Platz einnehmen. Sie bleiben am oberen Rand des Browserfensters haften (der „klebrige Header“) und blockieren oft den Inhalt, wenn er darunter scrollt.

Einige Header auf Websites großer Marken sind über 150 Pixel hoch. Wo ist ihr Wert? Feste Elemente wie klebrige Header können echte Vorteile haben, aber Webdesigner sollten vorsichtig damit sein, sie zu verwenden – es gibt mehrere wichtige UX-Probleme, die berücksichtigt werden müssen.

Der Sticky Nav Header ist möglicherweise zu groß für Komfort

Wenn die Entscheidung für einen Sticky-Nav-Header bereits getroffen wurde, ist es am besten, es mit Benutzern zu testen. Es ist ein häufiger UX-Fehler, über Bord zu gehen und den klebrigen Nav-Header mit Inhalten zu füllen. Mit einem festen Header sollte das Browsen für Besucher dennoch komfortabel sein. Wenn es nicht gelingt, die richtige Balance zu finden, kann dies dazu führen, dass wenig Platz für die Hauptinhalte bleibt und ein erstickendes, klaustrophobisches Website-Erlebnis für die Besucher entsteht.

Manchmal gibt es eine einfache Problemumgehung mit CSS: Indem der Sticky-Header leicht transparent gemacht wird, können Benutzer beim Scrollen immer noch Inhalte sehen, wodurch sich der Inhaltsbereich substanzieller anfühlt.

Hier ist ein Beispiel für einen großen Sticky Header: ATPs Spielerprofilseite zu Roger Federer.

Der Sticky Header dieser Seite hat eine Höhe von über 180px! Das sind über 30 % der gesamten Seitenhöhe auf einigen Laptops: eine schlechte Benutzererfahrung, die vermeidbar ist.

Ohne Berücksichtigung des Sticky Nav Header UX-Problems auf Mobilgeräten

Einige Leute verwenden möglicherweise große, hochauflösende Computerbildschirme, auf denen ein klebriger Navigationskopf die Interaktion beschleunigen könnte, aber was ist mit Mobilgeräten? Ohne Zweifel würde eine beträchtliche Anzahl von Website-Besuchern von einem mobilen Gerät aus auf die Website zugreifen, daher ist ein fester Header möglicherweise nicht die beste Idee. Glücklicherweise ermöglichen Responsive-Design-Techniken, unterschiedliche Lösungen für verschiedene Plattformen zu entwerfen und beim Sticky-Navigations-Header – Wortspiel beabsichtigt – für Desktop-Browser zu bleiben.

Die Seite „Coffee with a Cop“ hat ebenfalls einen festen Header, aber viel kleiner – weniger als 80 Pixel hoch.

Die Header-Navigation ist in diesem Fall wohl die richtige Lösung für hochauflösende Bildschirme, da sie eine effizientere Navigation ermöglicht. Auf Bildschirmen mit geringerer Auflösung ist die Kopfzeile ebenfalls fest, nimmt jedoch viel Platz ein. Eine ausgezeichnete Alternative zu einem klebrigen Navigationskopf auf dem Handy ist das allgegenwärtige Hamburger-Menü. Obwohl dieses Muster kein universeller Problemlöser ist, gibt es eine beträchtliche Menge an Speicherplatz frei.

Webdesign Häufiger UX-Fehler Nr. 2: Dünne, helle Schriftarten

Heutzutage sind dünne, helle Schriftarten auf zahlreichen mobilen Apps und Websites allgegenwärtig. Mit dem Fortschritt der Bildschirmtechnologie und dem verbesserten Rendering verwenden viele Designer sie, weil sie elegant, sauber und trendy sind. Dünne Schriftarten können jedoch Usability-Probleme verursachen und somit die UX beeinträchtigen.

Das Ziel des gesamten Textes auf einer Website ist es, lesbar zu sein, und dünne Schrift kann die Lesbarkeit ernsthaft beeinträchtigen. Nicht alle Besucher sehen sich eine Website auf einem Display an, das dünne Schrift gut wiedergibt. Einige Lichttypen sind auf einem iPhone oder iPad mit Retina-Display schwierig zu lesen.

Texte müssen vor allem lesbar sein. Wenn Benutzer die Wörter in Ihrer App nicht lesen können, spielt es keine Rolle, wie schön die Typografie ist.

Apple-Richtlinien für die Benutzeroberfläche

Apple bezieht sich auf mobile Apps, aber das gleiche Prinzip gilt für Websites. Die Lesbarkeit ist obligatorisch, nicht optional für eine gute Benutzerfreundlichkeit. Es macht keinen Sinn, Inhalte auf eine Website zu stellen, wenn sie nicht lesbar sind.

Hier sind einige häufige UX-Fehler, die Sie berücksichtigen sollten, bevor Sie Thin Type verwenden:

Dünne und helle Schriftarten verwenden, weil es im Trend liegt

Schriften sollen nicht nur gut aussehen, sondern auch gut lesbar sein. Um einen angemessenen Kontrast und eine gute Lesbarkeit zu erreichen, sollten Designer in ihren Designs nach der optimalen Kombination streben: Größe, Gewicht und Farbe.

Am besten testen Sie die Website auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass der gesamte Website-Text lesbar ist.

Was uns zum nächsten häufigen UX-Fehler führt:

Testen der Textlesbarkeit nicht auf allen wichtigen Geräten

Dünne, leichte Schrift mag auf den teuren, fein abgestimmten Monitoren vieler Designer gut aussehen, aber der durchschnittliche Benutzer, der unsere Designs oft auf billigeren, minderwertigen Displays sieht, muss ebenfalls berücksichtigt werden. Am besten prüfen Sie, wie Schriftarten auf allen gängigen Geräten aussehen: Desktop-Computer, Laptops, Tablets und Smartphones.

Wenn Sie beispielsweise ein mobiles Design testen, lassen Sie die Teilnehmer die Website bei Tageslicht auf mobilen Geräten verwenden – reale Benutzer haben nicht immer perfekte Surf- und Lichtbedingungen. Wenn Sie auf einer Website eine dünne Schriftart verwenden, gibt es eine einfache Möglichkeit, sich an mobile Benutzer anzupassen: Geben Sie für eine bessere Lesbarkeit eine dickere Schriftart auf Mobilgeräten an.

Webdesign Häufiger UX-Fehler Nr. 3: Kontrastarmer Text

Die Verwendung von Elementen mit geringem Farbkontrast ist auch im modernen Design von Benutzeroberflächen in Mode gekommen. Es entstand aus einem minimalistischen Designtrend, denn durch die Reduzierung des Kontrasts in einigen Bereichen würde das Design „minimalistisch“ erscheinen. Designer konnten die Komplexität der zu präsentierenden Informationen nicht reduzieren, also spielten sie mit geringem Kontrast im Design.

Wir haben bereits dünne Schriften behandelt, aber es gibt einen noch größeren Fallstrick: eine Kombination aus einer hellen Schrift mit geringem Kontrast, die die UX aufgrund schlechter Lesbarkeit ernsthaft behindert. Designer sollten alles tun, um diese Usability-Falle zu vermeiden.

Niedriger Textkontrast im Fließtext

Cool Springs Financial verwendet eine dünne Variante von Helvetica für Fließtext auf seiner Website. Obwohl es elegant aussieht und zu einer ästhetisch ansprechenden Benutzeroberfläche beiträgt, ist es auf mehreren Plattformen schwierig zu lesen. Niedriger Kontrast ist zwar nicht unbedingt schlecht, kann sich jedoch negativ auf die Benutzerfreundlichkeit einer Website auswirken, da Text schwer lesbar wird.

Textkontrast wird nicht getestet

Es gibt ein raffiniertes Tool zur Kontrastprüfung im Web namens Colorable, das Designern hilft, den korrekten Textkontrast gemäß den Richtlinien für barrierefreie Webinhalte festzulegen. Sobald Designer wissen, dass sie den richtigen Textkontrast verwenden, können sie andere Farben auf ihrer Website anpassen und mehrere Geräte-/Benutzertests schnell durchführen, um sicherzustellen, dass der Text lesbar ist.

Webdesign Häufiger UX-Fehler Nr. 4: Scroll-Hijacking

Ein weiterer risikoreicher Trend, der im Internet an Boden gewinnt, ist der „Scroll-Hijack“. Websites, die diesen Trend implementieren, übernehmen die Kontrolle über das Scrollen von Seiten (normalerweise mit JavaScript). Wenn Menschen darauf stoßen, haben sie keine Kontrolle mehr über das Scrollen der Seite und können ihr Verhalten nicht vorhersagen, was leicht zu Verwirrung und Frustration führen kann. Es ist ein riskantes Experiment, das die Benutzerfreundlichkeit der Website beeinträchtigen und im schlimmsten Fall „Computerwut“ auslösen könnte.

Einige Websites können mit Scroll-Hijacking davonkommen, aber das bedeutet nicht, dass jeder es kann. Beispielsweise verfolgen viele Webdesigner Apples Websites mit Scroll-Hijacking, Parallax-Effekten und hochauflösenden Bildern verschiedener Produkte. Apple hat seinen Zielmarkt, ein einzigartiges Konzept und exklusive Inhalte für seine Website. Da jeder Standort einzigartige Probleme hat, muss er auch einzigartige Lösungen haben, die auf diese Probleme zugeschnitten sind.

Nicht mit realen Benutzern testen

Wenn Sie trendige Ideen oder UI-Muster ausleihen, ist es am besten, den Prototyp einer Website an echten Benutzern zu testen, um UX-Probleme zu vermeiden. Einfache Usability-Tests zeigen, ob beispielsweise die Implementierung eines Scroll-Hijacks machbar ist oder nicht. Ohne Tests haben Designer keine Möglichkeit zu wissen, ob Scroll-Hijacking funktioniert, und Annahmen zu treffen ist oft kostspielig.

Tumblr, eine beliebte persönliche Blogging-Site, verwendet Scroll-Hijacking auf ihrer Homepage. Auch wenn dies riskant sein könnte, kann man davon ausgehen, dass sie ihre Zielgruppe gut kennen und die coole, hippe Benutzererfahrung, die sie präsentieren möchten, gut kennen. Wenn Website-Besucher mit dem Scrollen beginnen, wird die Schriftrolle entführt und die Besucher gelangen zum nächsten Abschnitt.

Die lange Scroll-Seite ist in mehrere Abschnitte unterteilt, die durch eine starke Dosis gesättigter Farben und markante Indikatorpunkte auf der linken Seite des Fensters unterscheidbar sind. Infolgedessen fühlt sich die Homepage von Tumblr wie ein großes vertikales Karussell an, über das Besucher die Kontrolle haben, und nicht wie eine unangenehme, experimentelle Website mit einem eigenen Kopf.

Webdesign Häufiger UX-Fehler Nr. 5: Karussells

Karussells – eine Diashow zum Rotieren durch eine Vielzahl von Inhalten – sind im Web sehr verbreitet, insbesondere auf Zielseiten und Homepages. Obwohl sie nützlich sein können, haben sie zahlreiche Usability-Probleme und gelten daher als ein weiterer häufiger UX-Fehler. Laut der Nielsen Norman Group: „ Leute scrollen oft sofort an diesen großen Bildern vorbei und verpassen den gesamten Inhalt darin.“ Dies könnte sich negativ auf die UX auswirken, da Besucher in einigen der rotierenden Folien möglicherweise keine wertvollen Inhalte sehen.

Website-Karussells bieten Benutzern möglicherweise keinen Mehrwert

Wenn es richtig gemacht wird, kann ein Karussell Benutzer mit großen, auffälligen Bildern ansprechen. Das Problem ist, dass Karussells oft keinen Mehrwert bringen, sondern nur zur Dekoration da sind und nur dazu gehören, weil alle anderen sie benutzen. So können Sie testen, ob ein Website-Karussell sinnvoll ist: Schreiben Sie drei Vorteile auf, die ein Karussell für den Besucher bietet. Wenn drei sinnvolle Vorteile nicht gefunden werden können, bringt es keinen Mehrwert.

Die vorherigen und nächsten Pfeile haben eine geringe Auffindbarkeit

Wichtige Informationen in einem Website-Karussell könnten verborgen bleiben, wenn die Vorwärts- und Zurück -Pfeile nicht erkennbar sind. Die Steuerung sollte auch für Mobilgeräte abhörkompatibel sein.

Oft gibt es keine Pfeile, um das Karussell zu steuern; Nur die Dia-Anzeigepunkte sind enthalten, um die Dias vorzurücken. Sie sind jedoch oft kontrastarm, haben eine geringe Auffindbarkeit und es fehlt ihnen ein ausreichend großer anklickbarer oder antippbarer Bereich. Die kleinen anklickbaren Ziele können zu einer schlechten UX, einem frustrierten Website-Besucher und einem schnellen Verlassen der Website führen.

Zum Beispiel hat die Website der Floresta Longo Foundation ein rotierendes Bilderkarussell auf ihrer Homepage. Es ist auf Autoplay eingestellt und dreht sich durch fünf Fotos. Die vorherigen und nächsten Pfeile sind jedoch klein und transparent, wodurch sie schwer zu erkennen und schwierig anzuklicken sind. Es gibt keine Indikatoren dafür, dass die Besucher der Folie eingeschaltet sind, und keine Beschriftungen, die angeben, was die Bilder darstellen. Die Bilder sind keine Links und dienen als reine Dekoration. Während diese Art von Karussell einen gewissen Wert haben kann, um den Besucher zu fesseln, lässt es insgesamt viel zu wünschen übrig.

Fazit

Webdesign-Trends können, wenn sie nicht sorgfältig betrachtet und mit Vorsicht umgesetzt werden, zu mehreren häufigen UX-Fehlern führen. UX-Designer sollten ihr bestes Urteilsvermögen einsetzen und keine Angst vor Innovationen haben, aber um eine hervorragende Benutzerfreundlichkeit der Website zu gewährleisten, wäre es gut, wenn sie ihr Design gründlich mit realen Benutzern testen würden.

In der verrückten Fülle von Webdesign-Trends kommen und gehen Dinge, die in Mode sind. Inmitten dieses Chaos spielt der ausgewogene Einsatz von Ästhetik, Effizienz und Benutzerfreundlichkeit eine wichtige Rolle bei der Unterscheidung der UX-Trends, die sich als die stärksten erwiesen und die größte Benutzerakzeptanz erzielt haben.

Webdesigner können sich das coolste Farbschema, die ausgefallenste Scroll-Animation oder die fantastischsten Parallaxeneffekte einfallen lassen, aber wenn die menschliche Interaktion darunter leidet, wird die UX schlecht sein und die Leute werden schnell weitermachen. Eine andere Website ist nur einen Klick entfernt.

Weiterführende Literatur im Toptal Design Blog:

• Responsive Design – Best Practices und Überlegungen
• Annäherung an den Website-Designprozess vom Browser aus
• Programmieren für Designer – wie viel sollten wir wissen?
• UI-Design Best Practices und häufige Fehler