4 typische Fallstricke in der Frontend-Webentwicklung – und wie man sie vermeiden kann

    Eine praktische Anleitung für jeden, der mit der Frontend-Entwicklung durchstarten oder seine Kenntnisse grundlegender Designprinzipien und UX-Best Practices für die Erstellung interaktiver Websites und Onlineanwendungen auffrischen möchte.

    Abonnieren Sie unseren Blog

    Als Frontend-Webentwickler mit über zehn Jahren Erfahrung habe ich viele Entwicklungspraktiken kennergelernt und für einen langen Zeitraum als Besucher von Webseiten ihren Einfluss erleben können. Diese subjektive, wahrgenommene Fähigkeit, eine interaktive Anwendung – den Eckpfeiler meiner Arbeit – effektiv zu nutzen, wird als User Experience oder auch UX bezeichnet.

    Es gibt viele Codierungsstile, -muster und -philosophien, von denen ich glaube, dass sie entsprechend der persönlichen Präferenzen eines Entwicklers eingesetzt werden sollten. Wenn es aber um die Auswirkungen auf den Endbenutzer geht, weise ich eine viel strengere Sichtweise vor. Weboberflächen, die den Benutzer verwirren oder irritieren, machen es nahezu unmöglich, erneut betrachtet zu werden.

    Unter diesen Verstößen gegen die Designetikette von UX gibt es eine ganze Reihe an Fehlern, die immer wieder auftauchen. Mit dem vorrangigen Ziel manche davon abzuschaffen, werden nun einige davon aufgelistet. Manche sind etwas technisch, aber alle haben einen tiefgreifenden negativen Einfluss auf das Nutzererlebnis, das eigentlich eine reibungslose Erfahrung darstellen sollte.

    1. User-Scalability: no

    Webentwickler verwenden Meta-Tags, um Besuchern zusätzliche unsichtbare Informationen über die Webseite zu präsentieren. Diese können zur Identifizierung von Inhalten Informationen für Suchmaschinen enthalten, oder auch das Aussehen der Seite auf das Gerät eines Benutzers verändern.

    Das Auftauchen von kleineren Web-Browsing-Geräten hat zur Einführung des Viewport-Metatags geführt. Dieser ermöglicht es einem Entwickler, die Darstellung der Inhalte einer Seite auf dem Bildschirm des Benutzers zu erkennen. Dadurch wird das hoch angepriesene responsive Layout ermöglicht. Mit dem Metatag des Darstellungsbereichs kann ein Entwickler jedoch angeben, dass dem Benutzer das Vergrößern einer Webseite untersagt werden soll.

    Dies kann bei sehr komplexen Anwendungen sinnvoll sein – bei den meisten Webseiten ist dies aber nicht der Fall. Das Entfernen eines inhärenten Verhaltens des Geräts (jeder weiß, wie man Pinch zum Zoomen verwendet) ist nicht nur eingängig, sondern verhindert möglicherweise sehbehinderten Benutzern den Zugriff auf den gesamten Inhalt. Die Verwendung des Viewport-Metatags ''user-scalable: no" führt oft zu mehreren Layoutproblemen. Als Frontend-Entwickler ist es Ihr Ziel, einwandfreie und responsive Layouts für ein optimales Nutzererlebnis zu erschaffen.

    2. Winzige Touch Targets

    Webdesigner erstellen oft schöne Kunstwerke, die beim Betrachter eine unmittelbare emotionale Reaktion hervorrufen. Es wird allerdings oft außer Acht gelassen, dass der Besucher in der Lage sein sollte, problemlos zu navigieren. Normalerweise geschieht dies mit einem Mausklick oder einfach durch Berührung des Bildschirms. Es ist die Aufgabe eines Frontend-Entwicklers, die Benutzerfreundlichkeit des Designs zu gewährleisten, das bei Bedarf erstellt und angepasst wird.

    Wenn das Erscheinungsbild eines Elements, mit dem der Benutzer interagieren kann, zu klein ist (z. B. einen Link oder eine Schaltfläche), muss die Interaktion innerhalb des angrenzenden Raums ebenfalls aktiviert werden. Der visuelle Raum, der ein Element aktiviert, nennt sich Touch Target und ist allzu oft identisch mit dem Element selbst. Dies kann – insbesondere auf Touch-Geräten – zu einem frustrierenden Nutzererlebnis führen.

    Beispiel: Implementierung von Touch Targets für die Karussellnavigation

    Linkes Bild: Touch Targets sind zu klein und unterbrechen das Besuchererlebnis der Website.  Rechtes Bild: Die Implementierung der Karussellnavigation mit größeren Touch Targets.

    Linkes Bild: Touch Targets sind zu klein und unterbrechen das Besuchererlebnis der Website. Rechtes Bild: Die Implementierung der Karussellnavigation mit größeren Touch Targets.

    3. Das Fehlen von Formularbezeichnungen, Validierung und Tastaturnavigation

    Die Eingabe des Benutzers ist für die Erstellung von responsiven Layouts essenziell. Wenn diese Eingabe klar und rationalisiert ist, kommt sie definitiv dem Besucher und dem Ersteller der interaktiven Anwendung zugute. Wir erkennen ein Texteingabefeld immer dann, wenn wir ein Rechteck sehen, der anzeigt, dass wir durch visuelle Hinweise etwas eingeben können – z. B. wenn der Mauszeiger zu einem Tippsymbol wird, nachdem er darüber platziert wurde. Eine Reihe von gruppierten Textfeldern innerhalb einer Seite wird Formular genannt. Wichtig ist, dass dem Benutzer bewusst ist, was in jedes dieser Felder einzugeben ist. Das kann durch Einfügen eines angrenzenden Labels in den Code ermöglicht werden und dieser gibt dann an, welche spezielle Art von Eingabe erwartet wird. In Bezug auf Zugänglichkeit im Web stellt dies eine unerlässliche Vorgehensweise dar – Aus ästhetischen Gründen oder durch Nachlässigkeit wird es allerdings oft vergessen. Des Weiteren existiert ein Platzhaltertext in Form einer kurzen Textprobe, die das Feld belegt, bevor der Benutzer irgendeine Eingabe gemacht hat. Diese wird zu oft als Feldbezeichnung missbraucht. Die Problematik dieser Vorgehensweise wird klar, nachdem der Benutzer die Felder ausgefüllt hat und er die Referenz dessen verloren hat, was sie eigentlich darstellen sollen.

    Mindestens genauso wichtig ist die Validierung der Benutzereingabe und der Anwendung, die angibt, wo und ob sie korrigiert werden muss. Bislang gibt es keine standardisierte Möglichkeit, die Validierung von Formularen für alle gängigen Browser zu implementieren. Dies ist ein Bereich, in dem ein durchdachter und funktionaler Frontend-Code die Implementierung neuer Browserfunktionen anregen kann.

    Ein weiterer Bereich, in dem es häufig an Webseitenformularen mangelt, ist die Fähigkeit, anhand verschiedener Tastaturfelder navigieren zu können. Da der Benutzer in einen "Tippmodus“ eingetreten ist, bei dem die Tastatur die primäre Eingabequelle ist, sollte es möglich sein, das gesamte Formular zu vervollständigen, ohne auf andere Eingabegeräte zurückgreifen zu müssen.

    Beispiel: die Problematik hinter der Verwendung von Platzhaltertexten in Formularen als Labels. Der Kontext geht verloren, wenn die Felder ausgefüllt sind.

    die Problematik hinter der Verwendung von Platzhaltertexten in Formularen als Labels. Der Kontext geht verloren, wenn die Felder ausgefüllt sind.

    4. Unklarheit beim Schließen eines Popup-Fensters

    Glücklicherweise sind aufgrund der Blockierung von Popups (die zum festen Bestandteil moderner Browser geworden sind), die Zeiten, in denen Webseiten neue Browserfenster öffnen, vorbei. Es besteht jedoch ein klarer Anwendungsfall, um Informationen zusätzlich zu den regulären Inhalten bereitzustellen: Es liegt nun an den Entwicklern der Website, diese sogenannten modalen Fenster aus ihrem eigenen HTML-Code heraus zu implementieren. Das am häufigsten auftretende Problem ist dabei folgender: Der Benutzer hat keine eindeutige Möglichkeit, das Fenster zu schließen. Möglicherweise existiert eine Schaltfläche zum Schließen (und sollte entsprechend der Richtlinien vorhanden sein), gestaltet sich aber vielleicht anders als erwartet. Es gibt auch keinen vordefinierten Standard, wenn der Benutzer mit dem Inhalt interagiert, der vom Fenster überlappt wird. Sollte diese Aktion das Fenster schließen und dadurch die Informationen des Benutzers verloren gehen oder lieber nicht? Meiner Meinung nach sollte der Benutzer zumindest benachrichtigt werden und ihn bestätigen lassen können, das das Schließen des Fensters tatsächlich die gewünschte Aktion war. Die gleiche Logik sollte auf die Escapetaste auf der Tastatur angewendet werden, was eine allgemein bekannte Aktion über mehrere interaktive Benutzeroberflächen darstellt.

    Fazit

    Die Frontend-Entwicklung wird immer komplexer und neue Tools und Best Practices erscheinen fast täglich neu. Wenn Sie im Frontend- oder Webdesign arbeiten, ist es Ihre Aufgabe fehlerfreie Layouts zu erstellen. In diesem Sinne können Sie also nie genügend Tipps erhalten, um den Erfolg von UX-Designs zu gewährleisten. Nicht nur Frontend-Entwickler sollten sich dieser häufigen Fehler bewusst sein, sondern auch UI-Designer, Backend-Entwickler, Funktionsanalytiker sowie anderen Mitglieder Ihres digitalen Projektteams. Am Ende arbeiten wir alle gemeinsam daran, interaktive Websites, Onlinedienste oder E-Commerce-Portale zu erstellen, die so effizient und nutzbar wie möglich sind und auf außergewöhnliche Kundenerlebnisse abzielen.

    Veröffentlicht auf 20/12/18    Zuletzt aktualisiert am 20/12/18

    #Nutzererlebnis, #Webentwicklung

    Über den Autor

    Mathijs Provoost is a Front-end Web Developer at AMPLEXOR, based in Belgium. He’s responsible for writing and maintaining well designed, testable, efficient code for our clients’ public facing web-sites, web applications and lines of IT infrastructures. Mathijs also works closely with designers, developers, QA testers and support services teams to set the direction of our front-end technologies and lead their implementation.

    ABONNIEREN SIE UNSEREN BLOG

    Beteiligen Sie sich an dieser Diskussion