Designprinzipien in der Softwareentwicklung Die Gesetze der User Experience

Ein Gastbeitrag von Kristina Marinov & Magnus Rembold *

Traditionell unterscheidet man in der Softwareentwicklung zwischen den Bereichen Frontend und Backend. Dies gilt nach wie vor, doch haben sich die Anforderungen an das Frontend vervielfacht.

Anbieter zum Thema

Trotz der Unterschiede in der menschlichen Wahrnehmung gibt es doch einige UI- und UX-Designprinzipien, die allgemeingültig sind.
Trotz der Unterschiede in der menschlichen Wahrnehmung gibt es doch einige UI- und UX-Designprinzipien, die allgemeingültig sind.
(© ordinary042 - stock.adobe.com)

Das Frontend ist der Teil der Software, mit dem der User in Kontakt kommt und interagiert – deshalb ist es umso wichtiger, auf die Bedürfnisse der Nutzer einzugehen. Zudem hat die fortschreitende Gewöhnung an digitale Tätigkeiten es mit sich gebracht, dass die Anwender einen schnellen und intuitiven Einstieg in für sie neue Applikationen wünschen.

Die fortschreitende Gewöhnung an digitale Tätigkeiten hat es mit sich gebracht, dass die Anwender einen schnellen und intuitiven Einstieg in für sie neue Applikationen wünschen. Dazu kommt, dass dieselbe Applikation für eine Vielzahl unterschiedlicher Endgeräte bereitstehen muss – vom großen Desktop bis hin zum Smartphone.

Aus diesem Grund sollten User Experience (UX) und User Interface (UI) Design integrale Bestandteile der Softwareentwicklung sein. So können die Anforderungen für die User direkt in die Konzeption und Umsetzung der Programmierung einfließen.

Vor allem bei Applikationen mit direktem Kundenbezug – wie zum Beispiel digitale Vertriebsportale und -kanäle – stellt dies einen großen Mehrwert dar: Hier ist das positive Nutzererlebnis unmittelbar an den Umsatz gekoppelt. Im Folgenden erfahren Sie, wie sich UX und UI Design in den Prozess der Softwareentwicklung einbetten lässt und welche Regeln dabei hilfreich sein können.

UX/UI Design in der agilen Softwareentwicklung

Um die Rolle von UX/UI Design in der agilen Softwareentwicklung aufzuzeigen, sollten die einzelnen Begriffe zuerst näher beleuchtet werden:

  • User Experience (UX) bezieht sich auf das Gesamterlebnis, das ein User, während der Benutzung einer Applikation – oder auch eines beliebigen anderen Gegenstands – hat.
  • Das User Interface (UI) bezeichnet einen Teil dieses Gesamterlebnisses: Alle visuellen, auditiven und haptischen Eigenschaften der Bedienoberfläche sowie deren ästhetische Wirkung.

Beim UX Design geht es also vor allem darum, sich in die Rolle der User zu versetzen. Es soll dadurch ein tiefergehendes Verständnis für die Problemstellungen, die Ziele, die Vorlieben und auch mögliche Hindernisse geschaffen werden.

Im Prozess der agilen Softwareentwicklung lässt sich UX vor allem bei der Definition von Epics – also den einzelnen Nutzungsszenarien – und User Stories gewinnbringend anwenden. Bei der Verwendung von Methoden wie z.B. dem sogenannten Lean UX wird zudem geprüft, welche Funktionalitäten tatsächlich erforderlich und welche weniger relevant sind. Hierdurch lässt sich der gesamte Entwicklungsprozess straffen.

Dagegen hat das UI Design vor allem Bedeutung für die Umsetzung des Frontends einer Applikation. UI Designer arbeiten die grafische Nutzeroberfläche in der Regel erst in Mockups und Wireframes aus; diese werden anschließend über entsprechende Technologien wie HTML, CSS und JavaScript in Code übersetzt.

Bei den grundlegenden Schritten können mittlerweile sehr viele Frameworks wie z.B. PrimeFaces, React, Ionic oder Onsen UI helfen. Für die technische Ausgestaltung ist jedoch nach wie vor klassisches Coding notwendig. Schließlich macht ein ästhetisch ansprechendes Design allein noch kein positives Nutzererlebnis aus. Auch semantische Aspekte wie Strukturierung und Klarheit, sprachliche Aspekte wie Verständlichkeit oder technische Aspekte wie geringe Ladezeiten sind wesentlich mitentscheidend.

UX/UI in einem agilen Softwareentwicklungsprozess betrifft alle Stakeholder: Der Product Owner sollte entsprechende Beratung erhalten, die Abstimmung der User-Konzepte mit den Fachbereichen erfolgen, das Brand Management im Zuge der Gestaltung mit ins Boot geholt werden. Die mit UX/UI befassten Teammitglieder sollten schließlich im Zusammenspiel mit dem Development Team neue visuelle und funktionale Features entwickeln.

Bei aller Verschiedenheit dieser Rollen eint sie ein gemeinsamer Fokus: Das Nutzererlebnis und damit die Effizienz und Motivation der Softwarenutzung kontinuierlich zu verbessern sowie die Fehleranfälligkeit zu verringern.

Die sieben wichtigsten Regeln der Usability

Wie lässt sich dies nun konkret umsetzen? Wenngleich es zwischen den Usern große individuelle Unterschiede gibt, sind bestimmte Regeln universell anwendbar, denn gewisse Prinzipien der Wahrnehmung sind für alle Menschen gleich. Im UX/UI Design sind viele solcher Regeln bekannt. Eine Auswahl der wichtigsten haben wir hier für Sie getroffen:

  • 1. Miller’s Law (Gesetz der 7 Elemente) – Ein Mensch kann durchschnittlich nur 7 +/- 2 Elemente in seinem Gedächtnis behalten. Daran sollte sich die Gesamtzahl der sichtbaren Gestaltungselemente orientieren.
  • 2. Hick’s Law (Gesetz der Auswahlmöglichkeiten) – Die Zeit, die für eine Entscheidung benötigt wird, steigt mit der Anzahl und Komplexität der Auswahlmöglichkeiten. Diese sollten daher auf ein Mindestmaß reduziert werden, um den Nutzern den Entscheidungsprozess zu erleichtern.
  • 3. Fitt’s Law (Gesetz der Zielerfassung) – Je kleiner der Zielbereich, desto länger braucht der Nutzer, um dessen Aktion auszuführen, basierend auf dem Verhältnis von Entfernung zu Größe. Bei Bedienelementen ist daher immer auf eine ausreichende Größe und ins Auge stechende Gestaltung zu achten.
  • 4. Jakob’s Law (Gesetz der Ähnlichkeit) – Nutzer verbringen die meiste Zeit auf anderen Webseiten. Dadurch bevorzugen Nutzer eine ähnliche Funktionsweise wie bei Seiten, die sie bereits kennen. Entwicklungsteams sollten sich daher gut in die User hineinversetzen und sich an deren bevorzugten Webseiten und Applikationen orientieren. Dies ist nicht zuletzt auch bei Unternehmensapplikationen zu bedenken. Mitarbeiter machen in ihrer Wahrnehmung nämlich keinen Unterschied zu Webseiten und Applikationen, die sie im Privatleben nutzen.
  • 5. Aesthetic Usability Effect (Gesetz der ästhetischen Wahrnehmung) – Menschen neigen dazu zu glauben, dass gutaussehende Dinge auch besser funktionieren – selbst, wenn sie tatsächlich gar nicht effizienter sind. Dies unterstreicht, wie wichtig ein professionelles UI Design für den Gesamteindruck ist.
  • 6. Parkinson’s Law (Gesetz der verfügbaren Zeit) – Der Autor C. Northcote Parkinson prägte den Leitsatz: „Eine Aufgabe wird so lange ausgedehnt, bis die gesamte verfügbare Zeit verbraucht ist.“ Menschen neigen also dazu, Aufgaben aufzuschieben, für die es keine festgelegten Fristen gibt. Eine Applikation kann durch Setzen von zeitlichen Begrenzungen gewünschte Handlungen auslösen – insbesondere beim Abverkauf.
  • 7. Goal Gradient Effect (Gesetz der Zielannäherung) – Je näher ein Nutzer an der Fertigstellung einer Aufgabe ist, desto schneller arbeitet er darauf hin. Eine Aufgabe wird wahrscheinlicher fertiggestellt, wenn der Fortschritt sichtbar ist. Müssen Nutzer mehrschrittige Prozesse durchlaufen, ist es daher sinnvoll, ihnen den aktuellen Stand der Erfüllung anzuzeigen; dies kann beispielsweise in einer Übersicht der Schritte oder mithilfe eines Fortschrittsbalkens geschehen.

Die genannten Gesetze können dazu eingesetzt werden, um Interfaces für bestimmte Nutzungsszenarien so zu entwickeln, dass sie eine effiziente und reibungslose Bedienung ermöglichen. In unserem Beispiel der digitalen Vertriebskanäle ist der Warenkorb ein klassischer Anwendungsfall.

Die Bedienelemente sollten so gestaltet werden, dass sie die erfolgreiche Durchführung des Verkaufsabschlusses umso wahrscheinlicher machen. Hierbei sollten Frontend-Entwickler sowie die UX/UI Designer genau überlegen, wie der Ablauf strukturiert wird und die Elemente und Bedienflächen anzuordnen sind.

Use Cases für den Einsatz der UX/UI-Prinzipien finden sich bei fast allen Softwareprodukten. Besonders interessant sind hierfür mobile Apps. Diese weisen in punkto User Interface einige Unterschiede zu herkömmlichen Desktopanwendungen auf. Da sie auf sehr kleinem Raum per Touchscreen bedient werden, muss die Nutzerführung besonders einfach und übersichtlich sein. Mittlerweile sind mobile Endgeräte auch im professionellen Kontext im Einsatz, sodass zunehmend komplexe Unternehmensanwendungen mit ihnen bedient werden.

Entwicklung eines digitalen Kundenportals mit UX/UI-Fokus

Nicht erst seit Corona verlagert sich die Kundenkommunikation zunehmend auf digitale Vertriebs- und Servicekanäle. Gerade für Unternehmen, die über eine sehr große Kundenbasis verfügen – beispielsweise Energie- und Telekommunikationsanbieter – bieten sich hierdurch große Chancen. Auf der Frontend-Ebene ist das Nutzererlebnis ein kritischer Faktor, damit der Einsatz solcher Kanäle effizient und effektiv gelingt.

Speziell im Bereich des Kundenservice werden Apps mit Selfservice-Anteil immer relevanter. Sie reduzieren eingehende Serviceanrufe und führen bei Kunden selbst zu einem angenehmeren Erlebnis, wenn sie richtig gestaltet sind. Aber auch im Vertrieb können Selfservice-Apps zumindest in den ersten Schritten der Customer Journey die bisherige Beratung durch Filialmitarbeiter ersetzen.

Hierdurch finden Kunden schneller zu dem für sie passenden Produkt. Wenn sich Kunden auf der Einstiegsebene und bei einfacheren Anfragen mit einer App selbst weiterhelfen können, haben die Vertriebs- und Service-Mitarbeiter schließlich mehr Zeit für die Behandlung komplexerer Anfragen.

Ein weiterer und aktuell stark wachsender Use Case sind Apps im geschäftlichen Kontext. Sie sind ein wichtiger Eckpfeiler bei der Prozessdigitalisierung. Ein nicht unerheblicher Unterschied zu Apps für Consumer besteht darin, dass Mitarbeiter prinzipiell mit den Anwendungen arbeiten müssen, die ihr Arbeitgeber zur Verfügung stellt.

Bei der UX/UI-Entwicklung steht daher die langfristige Produktivität stärker im Vordergrund als der „First Moment of Truth“. Selfservice kann auch hier von Vorteil sein; ein Use Case wäre hier beispielsweise eine Anleitung für das Warten von Maschinen. Die App führt den Mitarbeiter dabei durch die jeweiligen Schritte.

Damit gerade die Selfservice-Komponente auch wirklich angenommen wird, muss sie für den Nutzer einfach und intuitiv bedienbar sein und einen erwarteten Vorteil bringen. Die oben erwähnten UX/UI-Prinzipien helfen dabei, die Aufmerksamkeit so zu steuern, dass die User schon beim ersten Mal sich leicht zurechtfinden und sich bei der Bedienung wohlfühlen. Dabei sind die Übergänge zum Ansatz der Gamification fließend: Ideal ist, wenn die App den Nutzenden das gewünschte Ergebnis bringt und Spaß dabei macht oder sich für sie sogar, wie ein Spiel anfühlt.

Fazit: Digitales Business beruht auf Kundenzentrierung

Die digitale Transformation bringt neue Geschäftsmodelle mit sich. Damit entstehen große Chancen, aber auch viel Konkurrenz. Wir alle sind mit einer schnell wachsenden Zahl von digitalen Angeboten konfrontiert – die Bereitschaft, eine App bei Nichtgefallen schnell zu deinstallieren, wächst parallel dazu. Im Zeitalter der Digitalisierung sind daher vor allem solche Unternehmen führend, die einen besonders starken Fokus auf die Kundenbedürfnisse legen. Die Einbettung der UX/UI-Ansätze in den Prozess der agilen Softwareentwicklung legt dafür einen wichtigen Grundstein.

Kristina Marinov
Kristina Marinov
(Bild: AUSY Technologies)

Nicht nur die Features der Applikation, sondern auch das Nutzererlebnis sollten also Sprint für Sprint weiterentwickelt werden. Damit lässt sich sicherstellen, dass sich das Endprodukt auf die Funktionalität und Anwenderfreundlichkeit richtet. Die dafür nötigen UX/UI-Rollen lassen sich auch in agile Prozesse sinnvoll integrieren. Eine Erweiterung des eher technisch orientierten, agilen Prozesses können erfahrene Scrum Master mit dem vorhandenen, selbstorganisierten Team durchführen und neue Kolleg*innen mit UX/UI-Kompetenz integrieren.

* Kristina Marinov arbeitet mittlerweile seit etwa zweieinhalb Jahren bei der AUSY Technologies Germany AG als Softwareentwicklerin mit Schwerpunkt Frontend. Aufgrund ihres Studiums und ihrer praktischen Erfahrungen ist sie mit der Entwicklung moderner Webanwendungen bestens vertraut. Dabei baut sie auf eine fundierte Ausbildung, die sie im Zuge ihres Bachelor- und Masterstudiums in Medieninformatik in den Gebieten App- und Webprogrammierung sowie Design und Usability absolviert hat.

Magnus Rembold
Magnus Rembold
(Bild: AUSY Technologies)

* Magnus Rembold arbeitet als UX-Architekt, Entwickler und Berater für die AUSY Technologies Germany AG und leitet dort die Expertengruppe UX. Er hat sowohl verschiedene Großkonzerne bei Entwicklungsprojekten beraten und bei der Implementierung unterstützt als auch die User Experience von Software- bzw. Plattform-Startups mit aufgebaut. Seine vielseitige Erfahrung in diesem Feld hat er begleitend in den 2000ern durch den Aufbau eines Studiengangs Interaction Design und 15 Jahre Hochschullehre ergänzt.

(ID:48339174)