© StonePictures/Shutterstock.com
Kolumne: EnterpriseTales

Nachhaltiges UI-Design


Bei nahezu alle Anwendungen kommt es früher oder später zu Problemen beim UI-Design. Nicht nur ist das Design inkonsistent, sondern Änderungen an der einen Stelle führen zu unerwünschten Änderungen an anderer Stelle. Die Umsetzung neuer Features erfordert daher gerade beim Design enorm viel Zeit. Ein nachhaltiger Ansatz kann daher die Lösung im Designprozess sein. Dazu schauen wir uns einen nicht ganz untypischen Verlauf einer Neuentwicklung aus Sicht der Entwickler an.

Am Anfang ist alles gut

Eine neue Anwendung soll entwickelt werden. Die ersten Anforderungen stehen. Die Designer haben Mockups geliefert. Die Entwicklung kann beginnen. Die Entwickler setzen anhand von Mockups das beschriebe Design um. Nach dem ersten Release wird klar: Die Nutzer sind zufrieden. Die Anwendung wird noch viele Jahre relevant sein. Die nächsten Features sind geplant.

Im ersten Wurf haben die Entwickler bei der Umsetzung einige Abkürzungen genommen, um den strengen Zeitplan einzuhalten. Zwar entspricht das Design den Anforderungen der Designer, aber viel CSS und HTML wurden schlicht kopiert und nur leicht abgewandelt oder teilweise direkt wiederverwendet, obwohl das in Zukunft zu Problemen führen könnte. Die ersten kleineren neuen Features haben gezeigt, dass der Code zunächst aufgeräumt werden muss, bevor größere Features umgesetzt werden können.

Das Baukastenprinzip

Um das Frontend konsistenter und nachhaltiger zu gestalten, stehen verschiedene Möglichkeiten zur Auswahl. Heutzutage ist der Einsatz von isolierten und wiederverwendbaren Komponenten üblich. Im Kontext von UI-Design bildet eine Komponente eine in sich geschlossene Einheit von HTML und CSS. Das Denken in Komponenten beschränkt sich nicht nur auf komponentenbasierte Frameworks wie React, Angular und Co., sondern kann auch bei klassischen serverseitigen Ansätzen eingesetzt werden. Eine Komponente kann hier etwa durch Templatefragmente, Ansätze wie BEM (Block, Element, Modifier) [1] oder gar via Web Components umgesetzt werden.

Unabhängig davon, wie Komponenten realisiert werden, muss sichergestellt sein, dass das CSS isoliert ist und andere Komponenten nicht beeinflusst. Wenn die Textfarbe eines Buttons geändert wird, sollte nicht gleichzeitig die Farbe eines Links geändert werden, sofern das keine bewusste Entscheidung war. Auch für dieses Problem gibt es verschiedene Möglichkeiten.

Die einfache Variante ist die – oft auch zu Unrecht verteufelte – Verwendung von Inline Styles, bei der CSS direkt an das HTML gehängt und daher nur genau dort Auswirkungen hat.

Bei BEM hingegen folgen Klassennamen einer strikten Namenskonvention, die dafür sorgt, dass auch globale CSS-Regeln sich nicht gegenseitig beeinflussen können. Das erfordert natürlich eine gewisse Disziplin der Entwickler. Mit geeigneten Tools kann die korrekte Verwendung der BEM-Konventionen aber auch automatisiert überprüft werden.

Eine weitere Möglichkeit ist die Verwendung von sogenannten Scoped Styles. CSS und HTML leben hier wie gewohnt getrennt, werden jedoch auf technischem Weg so zusammengeführt, dass sie voneinander isoliert sind. Bekannte Vertreter sind Shadow DOM (Web Components und im weitesten Sinne Angular) und CSS Modules [2], die vor allem in React eingesetzt werden. Ein Entwickler kann hier wenig falsch machen, da das CSS automatisch isoliert wird und somit keinen globalen Einfluss nimmt.

Nachdem sich die Entwickler für einen Weg entschieden haben, muss überlegt werden, welche Komponenten tatsächlich Basiskomponenten und somit Teil des Baukastens für das Design werden. Da diese Komponenten an vielen Stellen verwendet werden, müssen sie mit besonderer Sorgfalt entwickelt werden. Änderun...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang