Der Aufstieg der dienenden Entwickler-Tools und andere Dinge

Entwicklererfahrung (DX) und Benutzererfahrung (UX) ergänzen sich nicht immer. Häufig sorgt ein Tool, das eine gute DX bietet, für eine schlechte UX bei den Endnutzern – und umgekehrt.

Eine aktuelle Studie hat gezeigt, dass React-basierte Websites im Durchschnitt schlechter abschneiden als serverseitig gerenderte Websites auf jQuery-Basis. Bedeutet das, dass React ein schlechtes Tool ist? Ganz und gar nicht. Doch Frameworks haben ihren Preis, den am Ende die Endnutzer zahlen.

Nutzer interessieren sich nicht für JSX, Web Components, CSS-in-JS und andere unsinnige Debatten in der Entwickler-Community. Indirekt profitieren sie aber von semantischem HTML, wenn sie auf einen Screenreader angewiesen sind. Und bei einer 2G- oder langsamen 3G-Verbindung oder ohne erschwinglichen Datentarif ist ihnen auch die Gesamtgröße der Seite wichtig.

In der Softwareentwicklung löst eine gute Abstraktion Probleme effektiv und verbirgt dabei die zugrunde liegenden Details. Wenn wir ein Tool zur Lösung eines komplexen Problems verwenden, gehen wir davon aus, dass es eine gute Abstraktion bietet. Tools und Frameworks sollten daher als Sicherheitsnetz dienen und häufige Probleme wie Performance und Barrierefreiheit abfangen. Doch viele dieser Tools erfüllen nur unsere eigenen Bedürfnisse (die DX) und ignorieren weitgehend die Bedürfnisse der Nutzer (die UX).

Wer heute eine gute Nutzererfahrung schaffen möchte, muss sich also mit Web-Performance, Bildoptimierung, Barrierefreiheit und Sicherheit auskennen. Und das kommt zu der ohnehin wachsenden Liste von Fähigkeiten hinzu, die Entwickler beherrschen müssen, bevor sie überhaupt ihr erstes „richtiges Projekt“ veröffentlichen. Letztlich kämpfen sie gegen die Frameworks, die ihnen eigentlich dienen sollten.

Zum Glück unternehmen einige Framework-Entwickler bereits Schritte in diese Richtung. Sie suchen nach Möglichkeiten, Code-Splitting von Haus aus zu unterstützen. Außerdem integrieren sie Linter für sensible Bereiche wie Barrierefreiheit und Sicherheit und vieles mehr. Doch bis zum Ziel ist es noch ein weiter Weg, und daraus muss eine branchenweite Ausrichtung werden.

Also fragten wir uns:

• Wer sind unsere Nutzer?
• Sind es Entwickler, Designer und Content-Ersteller, die das Tool täglich nutzen?
• Oder sind es die Konsumenten der Inhalte, die die Plattform erstellt?

Schließlich wurde uns klar, dass wir unseren Kunden ein direktes und ihren Nutzern, den Konsumenten, ein indirektes Nutzungserlebnis bieten. Wir sind fest davon überzeugt, dass wir unsere Kunden besser unterstützen, wenn wir das Nutzungserlebnis der Konsumenten verbessern. Wir werden ihnen nicht die gesamte Verantwortung dafür übertragen, barrierefreie, sichere und schnelle Webanwendungen zu entwickeln.

Hier sind einige Maßnahmen, mit denen wir dieses Sicherheitsnetz in unser Produkt integrieren:

1. Bewährte Methoden integrieren
2. Schädliche Handlungen verhindern
3. Das Bewusstsein schärfen und Wissen vermitteln

Bewährte Methoden integrieren#

Aus UX-Sicht sind in manchen Situationen klare Vorgaben sinnvoll. Im Laufe der Zeit hat die Community diese bewährten Methoden für die Entwicklung von Webanwendungen erarbeitet. Bei jedem neuen Projekt sollten wir uns nicht erneut Gedanken darüber machen müssen.

Nehmen wir zum Beispiel die Bildoptimierung. Bilder machen 75 % des Umfangs von Webseiten aus

laut httparchive.org. Aber nicht jeder verfügt über die Fähigkeiten oder Werkzeuge, um die für seine Nutzer optimierten Bilder zu erstellen. Die Bildoptimierung kann schnell komplex werden – mit verschiedenen Formaten, Pixeldichten und responsiven Größen.

Kürzlich haben wir einen Dienst hinzugefügt, der die von dir hochgeladenen Bilder passend zu den Containern skaliert, in denen sie verwendet werden. Dieser Vorgang bleibt für dich unsichtbar, da wir davon ausgehen, dass du für das fertige Produkt einfach die optimalste Version des jeweiligen Bildes möchtest. In den kommenden Monaten werden wir an einer Lösung arbeiten, um responsive Bilder zu erzeugen und WebP -Formate an Browser auszuliefern, die diese unterstützen.

Das Bild wird passend zum Container skaliert, in dem es verwendet wird.

Auf dieser Ebene arbeitet die Plattform für dich und erledigt die „Magie“ im Hintergrund, ohne dass du etwas dafür tun musst.

Schädliche Aktionen verhindern#

Du solltest keine Produktionsprüfungen durchführen müssen, um festzustellen, dass deinem Bild ein Alt-Text fehlt oder du versehentlich Anker-Tags verschachtelt hast. All dies lässt sich bereits zur „Build-Zeit“ erkennen.

Da uns alle Informationen zur Semantik in Echtzeit vorliegen, können wir ungültige oder fehlerhafte Zustände verhindern. So können wir beispielsweise beim Gestalten deiner Seite verschachtelte Anker-Tags oder eine falsche Überschriftenhierarchie verhindern.

Hinweis: Diese Funktion ist noch nicht implementiert und befindet sich in der Phase des Designvorschlags.

In diesem Szenario verhindert das in der Plattform vorhandene Wissen Aktionen, die das Nutzererlebnis beeinträchtigen könnten.

Bewusstsein schaffen und informieren#

Abschließend gibt es Empfehlungen zur Benutzerfreundlichkeit, über die Sie informiert sein sollten. Ob Sie diese umsetzen, entscheiden Sie selbst – wichtig ist jedoch, dass Sie eine fundierte Entscheidung treffen.

Der Farbkontrast ist ein gutes Beispiel. Sie sollten entscheiden, ob die Kontraste den Empfehlungen der Stufen AA oder AAA der WCAGentsprechen sollen – je nach Zielgruppe. Wir können problematische Bereiche hervorheben, Einblicke geben und Sie auf weiterführende Lernmaterialien zu diesem Thema hinweisen.

Die Schriftgröße ist ein weiteres Beispiel. Ob die Mindestempfehlung von 16 px eingehalten wird, hängt vom Zweck der Anwendung ab, die Sie entwickeln. Die Plattform weist Sie jedoch auf die Auswirkungen Ihrer Entscheidungen hin, damit Sie eine fundierte Entscheidung treffen können.

Das Tool zeigt eine informative Meldung zur Standardschriftgröße an.

Wir stehen damit noch ganz am Anfang, sind aber überzeugt, dass dies die richtige Richtung für unser Produkt ist. Wir glauben, dass der Playground ein dienendes Entwicklungstool sein sollte. Das hat direkte Auswirkungen auf Sie als Kunden und bringt indirekte Vorteile für Ihre Nutzer. Denn letztendlich sind Ihre Nutzer auch unsere Nutzer.