Geltungsbereich

Dieses Bedienkonzept beschreibt übergreifende Gestaltungs- und Interaktionsrichtlinien für Frontends. Es legt Anforderungen an Struktur, Bedienung, Barrierefreiheit, Layout und wiederkehrende Interaktionsmuster fest.

Der Fokus liegt auf Anwendungen, die dem IT-Systemtyp Frontend zugeordnet sind. Das Bedienkonzept ist insbesondere auf moderne webbasierte Anwendungen ausgelegt, die nach dem Architekturprinzip einer Single Page Application umgesetzt werden.

Es ist für alle Neuentwicklungen sowie für Überarbeitungen von Frontends relevant, die einem Major Change oder Technologiewechsel unterliegen.

Die beschriebenen Vorgaben sind grundsätzlich unabhängig von einer konkreten technologischen Umsetzung anzuwenden. Sie definieren fachliche, gestalterische und barrierefreie Anforderungen an die Benutzeroberfläche, ohne eine bestimmte UI-Bibliothek oder ein bestimmtes Framework verpflichtend vorzugeben.

Im IsyFact-Kontext ist das Bedienkonzept besonders gut mit dem IsyFact-Baustein Angular kompatibel. Dieser kann als technische Unterstützung für die Umsetzung der beschriebenen Vorgaben genutzt werden.

Rolle von Designenden, Entwickelnden und Fachlichkeit

Designende und Entwickelnde spielen eine entscheidende Rolle bei der Umsetzung des Bedienkonzepts. Während Designende für die Gestaltung der Benutzeroberfläche verantwortlich sind und sicherstellen, dass sie den festgelegten Standards entspricht, liegt es in der Verantwortung der Entwickelnden, diese Gestaltung in einem funktionierenden Frontend umzusetzen. Eine enge Zusammenarbeit zwischen Design- und Entwicklungsteams ist unerlässlich, um sicherzustellen, dass das Endprodukt den gestalterischen und funktionalen Anforderungen entspricht. Insbesondere bei komplexen Frontends ist es ratsam, so früh wie möglich die Fachlichkeit hinzuzuziehen und den erarbeiteten Stand der Konzeption zu evaluieren.

Einhaltung von Standards und Best Practices

Das Bedienkonzept legt Standards und Best Practices fest, die von Designenden und Entwickelnden eingehalten werden müssen. Diese Standards können sich auf verschiedene Aspekte der Gestaltung und Interaktion beziehen, wie Typografie, Farbgebung, Bedienelemente und Barrierefreiheit. Durch die Einhaltung dieser Standards gewährleisten Designende und Entwickelnde nicht nur eine konsistente Benutzeroberfläche, sondern auch die Kompatibilität dieser Oberfläche mit verschiedenen Geräten und Plattformen.

Genau wie jedes digitale Frontend wird auch dieses Bedienkonzept ständig weiterentwickelt. Die Entwicklungen und Änderungen werden entsprechend dem Stand der Technik und der rechtlichen Gegebenheiten aktualisiert und gekennzeichnet.

Technische Kompatibilität

Wenn Frontends anhand dieses Bedienkonzepts erstellt werden, müssen die korrekte Darstellung und Funktionsweisen des Frontends inklusive ihrer Browser-Funktionen, wie beispielsweise "Vor" und "Zurück", geprüft werden. Dafür muss für jedes Projekt der primäre Browser und dessen Versionen ermittelt und geprüft werden.

In der Regel soll sichergestellt sein, dass folgende Browser unterstützt werden:

Soweit notwendig wird auf browser-spezifische Eigenheiten eingegangen. Dabei sind folgende Auflösungen zu berücksichtigen:

Kontinuierliche Weiterentwicklung und Pflege

Ein Bedienkonzept ist kein statisches Dokument, sondern sollte kontinuierlich weiterentwickelt und gepflegt werden. Mit dem Fortschreiten der Technologie und den sich ändernden Anforderungen der Nutzenden ist es wichtig, das Bedienkonzept regelmäßig zu überprüfen und anzupassen. Dadurch wird sichergestellt, dass das Bedienkonzept stets den aktuellen Standards und Best Practices entspricht. Diese kontinuierliche Weiterentwicklung erfordert eine enge Zusammenarbeit zwischen allen Beteiligten und eine offene Kommunikation über Änderungen und Aktualisierungen - insbesondere zwischen Umsetzungsprojekten, Stakeholdern und den Designenden, die mit diesem Dokument arbeiten.

Obwohl die Begriffe oft synonym verwendet werden, gibt es wichtige Unterschiede und Zusammenhänge, die sie voneinander unterscheiden und gleichzeitig miteinander verbinden.

Begriff der Usability (User Interface - UI)

Usability oder Gebrauchstauglichkeit bezieht sich auf die Benutzerfreundlichkeit einer Oberfläche (UI). Dabei geht es darum, wie leicht Nutzende ein Frontend verstehen und die Bedienung erlernen können. Zu den Hauptkomponenten der Usability gehören:

Usability ist eng mit dem Design der Benutzeroberfläche verknüpft. Eine gut gestaltete UI ermöglicht es den Benutzenden, intuitiv zu navigieren, schnell zu verstehen, wie sie Aufgaben ausführen können und bietet klare, konsistente visuelle Hinweise. Besonders bei komplexen Fachanwendungen ist es wichtig, dass eine gute UI sich nahtlos in die fachlich notwendigen Geschäftsprozesse integrieren lässt.

Begriff der Benutzerfreundlichkeit (User Experience - UX)

Benutzerfreundlichkeit oder User Experience (UX) geht über die reine Usability hinaus und bezieht sich auf das gesamte Erlebnis der Nutzenden mit einem Produkt oder einer Dienstleistung. UX umfasst alle Aspekte der Interaktion, einschließlich der emotionalen, psychologischen und praktischen Reaktionen auf das Produkt.

Hauptkomponenten der UX sind:

UX berücksichtigt nicht nur die Interaktion mit der Benutzeroberfläche, sondern auch die gesamte Benutzerreise von der ersten Wahrnehmung des Produkts bis zur fortlaufenden Nutzung und Unterstützung.

Zusammenhänge zwischen Usability (UI) und Benutzerfreundlichkeit (UX)

Usability ist ein integraler Bestandteil der Benutzerfreundlichkeit. Ein benutzerfreundliches Frontend muss eine hohe Usability aufweisen, da die Benutzeroberfläche der primäre Kontaktpunkt zwischen den Benutzenden und dem Frontend ist. Gute Usability sorgt für:

Unterschiede zwischen Usability (UI) und Benutzerfreundlichkeit (UX)

Trotz ihrer engen Verbindung gibt es klare Unterschiede zwischen UI und UX:

Grundlegende Dos, die die Benutzerfreundlichkeit einer Benutzeroberfläche in Frontends erhöhen:

Weitere Informationen zu einer besseren Benutzerfreundlichkeit sind in den Abschnitten zu den Basiselementen, Bedienelementen, Design Patterns oder Eingabehilfen und Fehlermeldungen zu finden (siehe jeweils bei den Unterkapiteln "Dos and Don’ts").

Das Bedienkonzept basiert auf einer Reihe von allgemeinen Prinzipien, die als Leitfaden für die Gestaltung von Benutzeroberflächen dienen. Diese Prinzipien umfassen Klarheit, Konsistenz, Feedback, Effizienz und Zugänglichkeit und bilden das Fundament für eine benutzerzentrierte Gestaltung. Viele dieser Prinzipien werden beispielsweise in der ISO 9241 und in Nielsen’s Web Usability Criteria beschrieben. Zusätzlich liefert lawsofux eine anschauliche Sammlung von Designprinzipien.

Klarheit

In Bezug auf das Design bezieht sich das Prinzip der "Klarheit" darauf, wie verständlich und einfach der Aufbau und die Navigation des Frontends gestaltet sind. Klarheit bedeutet, dass Informationen klar präsentiert werden, sodass Besuchende sofort verstehen, was das Frontend bietet und wie sie es nutzen können. Dies umfasst eine klare Strukturierung von Inhalten, eine leicht lesbare Typografie, gut platzierte Navigationselemente und eine konsistente visuelle Gestaltung. Durch die Priorisierung von Klarheit im Design können Designende sicherstellen, dass Nutzende sich leicht auf dem Frontend zurechtfinden und ihre Ziele effizient erreichen können.

Konsistenz

Das Prinzip der "Konsistenz" bezieht sich auf die Notwendigkeit, ein einheitliches Erscheinungsbild und Verhalten über alle Seiten eines Frontends hinweg zu gewährleisten. Konsistenz bedeutet, dass Designelemente wie Farben, Schriftarten, Symbole und Layouts einheitlich angewendet werden, um eine nahtlose Benutzererfahrung zu schaffen. Durch die Aufrechterhaltung einer konsistenten Gestaltung können Nutzende das Frontend leichter verstehen und navigieren, da sie sich auf bereits bekannte Muster und Interaktionen verlassen können. Darüber hinaus trägt die Konsistenz dazu bei, das Markenimage zu stärken und das Vertrauen der Nutzenden in das Frontend zu fördern.

Feedback

Das Designprinzip des "Feedbacks" bezieht sich auf die kontinuierliche Kommunikation zwischen dem Frontend und den Nutzenden. Feedback ist entscheidend, um den Nutzenden Rückmeldungen darüber zu geben, ob ihre Aktionen erfolgreich waren oder nicht. Dies kann in Form von visuellem Feedback, zum Beispiel einer Farbänderung eines Buttons nach einem Klick oder durch informative Nachrichten wie Bestätigungsmeldungen nach dem Absenden eines Formulars, erfolgen. Durch effektives Feedback fühlen sich Nutzende unterstützt und informiert, was zu einer verbesserten Benutzererfahrung und einer höheren Zufriedenheit führt. Dies gilt insbesondere auch für Aspekte der Barrierefreiheit. Technische Standardmöglichkeiten sollen genutzt und gegebenenfalls mit entsprechenden Hilfsmitteln (wie ARIA-Elementen) angereichert werden.

Effizienz

Das Designprinzip der "Effizienz" bezieht sich darauf, wie gut ein Frontend die Bedürfnisse und Ziele der Nutzenden mit minimalen Aufwänden erfüllt. Effizientes Design strebt danach, unnötige Komplexität zu vermeiden und die Interaktionen der Nutzenden so reibungslos wie möglich zu gestalten. Dies umfasst Aspekte wie schnelle Ladezeiten, intuitive Navigation, gut platzierte Call-to-Actions und eine klare Informationsarchitektur. Ein effizientes Design stellt sicher, dass Nutzende ihre Ziele schnell erreichen können, ohne dabei Zeit oder Mühe zu verschwenden - sei es beim Finden von Informationen, beim Abschließen eines Kaufs oder beim Ausführen einer bestimmten Aktion.

Zugänglichkeit

Das Designprinzip der "Zugänglichkeit" soll sicherstellen, dass ein Frontend für alle Nutzenden, unabhängig von ihren individuellen Fähigkeiten oder Einschränkungen, leicht zugänglich ist. Dies beinhaltet die Gestaltung und Entwicklung des Frontends unter Berücksichtigung verschiedener Bedürfnisse, zum Beispiel Sehbehinderungen, Hörbehinderungen oder motorische Einschränkungen. Zugängliches Design beinhaltet die Verwendung von verständlichen Texten, von ausreichendem Kontrast zwischen Text und Hintergrund, von Tastaturzugänglichkeit und von alternativen Texten für Bilder, sowie die Vermeidung von Technologien (zum Beispiel Gestensteuerung), die für einige Personengruppen hinderlich sein könnten. Ein zugängliches Design gewährleistet, dass alle Nutzenden die Informationen und Funktionen des Frontends nutzen können, was zu einer inklusiven und positiven Benutzererfahrung führt. Dieses Prinzip wird im Kapitel Barrierefreiheit und unter den einzelnen Bedienelementen detaillierter beschrieben.