Blogartikel zum Schlagwort: Storybook

Wie wir bei der kreITiv ein stimmiges User Interface entwickeln

Wie wir bei kreITiv ein stimmiges User Interface entwickeln

Dem User Interface kommt als Schnittstelle zum Endanwender eine entscheidende Bedeutung für jede Form von Software zu. Sie bestimmt, ob eine Anwendung – so komplex oder simpel sie auch ist – überhaupt sinnvoll genutzt werden kann.

Fehler im Design können Motivation beim Nutzer und damit den Betreiber viel Geld kosten, wenn bspw. in einem Onlineshop kein Kauf ausgelöst oder in einem Webportal kein Account registriert werden kann. Aus diesem Grund beschäftigen wir uns also auch als Softwareentwickler immer schon frühzeitig mit dem Thema User Interface (UI).

1. Der Komponentenbaum für bessere Übersicht

Die Planung ist und bleibt ein wichtiger Bestandteil der Softwareentwicklung. Auch bei der Entwicklung mit komponenten-basierenden Frameworks, die bereits zahlreiche Vorarbeiten liefern, darf die Planung nicht zu knapp ausfallen. Ein stufenweises Herangehen hat sich inzwischen etabliert und erscheint aus mehreren Gründen sinnvoll.

Wichtig ist es, mit einem Prototypen zu beginnen. Dieser gibt das Design und eine gewisse Teilfunktionalität vor. Drei Arten des Prototypings in der Softwareentwicklung haben wir im Blog schon einmal behandelt. Basierend auf dem Prototyp, kann im nächsten Schritt ein Komponentenbaum aufgebaut werden. Dieser visualisiert den Aufbau der Anwendung und stellt die Zusammenhänge zwischen den Komponenten dar.

2. Ein Storybook zur interaktiven Entwicklung

Aufbauend auf dem Komponentenbaum kann ein sogenanntes Storybook entwickelt werden. Das Storybook dient zur Visualisierung der UI-Komponenten einer Software.

  • Für Entwickler bietet das Storybook die Möglichkeit, diese Komponenten interaktiv zu entwickeln sowie die einzelnen Komponenten intensiv zu testen.
  • Zusätzlich dient es als eine Art Dokumentation, welche es ermöglicht, Komponenten in anderen Projekten wiederzuverwenden. Dies hat den positiven Effekt, dass bei Folgeprojekten Entwicklungszeit eingespart werden kann.

Storybook zur interaktiven SoftwareentwicklungDurch das interaktive Entwickeln bekommt der Kunde auch einen Einblick in die Entstehung der Software und kann den Fortschritt stets mitverfolgen. Eine zeitnahe Feedback-Übermittlung bzw. Gegensteuerung bei ungeplanten oder ungewollten Entwicklungen ist damit jederzeit möglich. Missverständnisse, die oft erst gegen Ende von Projekten sichtbar werden, können deutlich reduziert werden. Das trägt zur Zufriedenheit aller Stakeholder des Entwicklungsprojektes bei.

Zwei Trends in Sachen User Interface

In der Entwicklercommunity ist die Unterstützung für das Thema Storybook in letzter Zeit stark gestiegen. Nicht nur große Firmen, wie Airbnb oder Xebia, setzen auf das Konzept, sondern auch einzelne Entwickler konzentrieren sich jetzt mit Vollzeit auf die Weiterentwicklung des Storybooks. Sehr lesenswerte Ansätze und Ausblicke liefert der Artikel “Storybook: The Next Chapter” auf medium.com

Ein weiterer positiver Trend in diesem Bereich ist die Verwendung von Komponenten-Bibliotheken, wie zum Beispiel Material UI von Google. Entwickler können sich dabei aus einem Repertoire von vorgefertigten Komponenten bedienen, welche bereits über ein gewisses Maß an Grundlogik verfügen. Das Design dieser Elemente ist an Android angelehnt und kann daher intuitiv verwendet werden. So müssen die Grundlagen nicht immer wieder neu erarbeitet, sondern können bei jedem Projekt verfeinert und optimiert werden.

Dieses modulare Vorgehen und die Best-Practice-Ansätze führen zu einer schlanken, einheitlichen und schnellen Entwicklung und werden in zunehmendem Maße auch in die alltägliche Arbeit der kreITiv-Softwareentwicklung integriert.