Reaktionsfähiges und anpassungsfähiges Design
Auf der Suche nach Code und technischen Details? Siehe Reaktionsfähige und anpassungsfähige Entwicklung.
Das Business von heute ist oft mobil. Autos werden dabei zu „Büros auf vier Rädern“. Jutro trägt diesem Umstand Rechnung, indem es eine hybride Lösung für die Erstellung von Anwendungen verwendet.
Zunächst einige Definitionen.
Was bedeutet Reaktionsfähigkeit bei Anwendungen?
Reaktionsfähige Designlayouts passen sich automatisch an die Größe des Bildschirms oder des Browserfensters an. Die gleiche Benutzeroberfläche, die auf einem Laptop angezeigt wird, wird auch auf einem Tablet oder Mobiltelefon angezeigt. Dies gewährleistet eine konsistente Qualität und einen konsistenten Informationszugriff über alle Geräte hinweg.
Was bedeutet anpassungsfähiges Design bei Anwendungen?
Anpassungsfähiges Design bietet Layouts für verschiedene Bildschrimgrößen. Spezifische Designlayouts werden für verschiedene Gerätetypen wie Laptops, Tablets (sowohl vertikal als auch horizontal) und Mobiltelefone erstellt. Das System erkennt automatisch, welcher Formfaktor (Breakpoint) benötigt wird, und rendert ein entsprechendes Layout. Dadurch wird die Benutzererfahrung optimiert. In einigen Fällen können die Informationen bei verschiedenen Formfaktoren leicht abweichen. Auf einem Mobiltelefon ist sie möglicherweise weniger ausführlich.
Im Gegensatz zu reaktionsfähigen Designs, die ein einziges, flexibles Design verwenden, das sich an den Bildschirm anpassen kann, bestehen anpassungsfähige Designs aus mehreren Designs, die festen, vordefinierten Layoutgrößen zugewiesen werden.
Wie kommen diese beiden Ansätze in Jutro zum Einsatz?
Jutro verwendet beide Ansätze, um die Benutzererfahrung zu optimieren. Es gibt Komponenten, die reaktionsfähig sind, und Layouts mit definierten Breakpoints, die den Designern und Entwicklern helfen, die Produktentwicklung zu beschleunigen.
Empfehlungen und Grundrissauswahl
Bei Cloud-Anwendungen für Schaden- und Unfallversicherer geht der Trend weiterhin zu Mobile First. Es gibt eine Nuance in diesem Trend. Produktivitäts- und IT-Anwendungen sind daten- und arbeitsintensiv und werden daher am häufigsten auf Laptop- oder Desktop-Systemen verwendet. Dabei handelt es sich in der Regel um B2B-Anwendungen. Zu den Grundrissen, die für diese Art von Anwendungen optimiert sind, gehören die L-Form, die C-Form und die R-Form.
Anwendungen, die Kunden von Schaden- und Unfallversicherern für die Einreichung von Schadenerstmeldungen, die Einsicht in den Schadenstatus sowie den Abschluss und die Überprüfung von Policen nutzen, werden häufig auf mobilen Geräten angezeigt. Auch die Außendienstmitarbeiter der Versicherer nutzen mobile Geräte wie Tablets. Der Grundriss in I-Form ist für die Verwendung mit Tablets und mobilen Geräten optimiert.
Weitere Informationen finden Sie auf unserer Seite über die Grundrissrichtlinien.
Erste Schritte
Es wird empfohlen, dass Produktmanager zunächst beurteilen, wo die Anwendung hauptsächlich von Endbenutzern verwendet wird. Welche Art von Informationen werden präsentiert und welche Aufgaben muss der Endbenutzer erfüllen? Dies hilft bei der Entscheidung, wie Reaktionsfähigkeit und Anpassungsfähigkeit gehandhabt werden sollen. Der UX-Designer oder -Berater kann Ihnen helfen, den die Anwendung nutzenden Personenkreis und den Kontext ihrer Arbeit zu identifizieren.
Wie die Jutro-Komponenten aufgebaut sind
- Reaktionsfähig: Die Komponente passt sich mithilfe von Medienabfragen automatisch an die Bildschirmgröße an.
- Anpassungsfähig: Die Komponente passt sich nicht an die Bildschirmgröße an. Stattdessen müssen Sie sie mithilfe der Breakpoint-Eigenschaften konfigurieren. Die Komponente wird je nach Gerät unterschiedlich gerendert.
- Fixiert: Die Komponente oder Seite passt sich nicht an die Bildschirmgröße an.
Beispiel
Im Folgenden sehen Sie ein Beispiel dafür, wie ein und dieselbe Anwendung in drei verschiedenen Formfaktoren aussieht.
Wir nutzen unsere fiktive Firma „FutureState“ für verschiedene Workflows, um auszuprobieren, wie wir Jutro am besten optimieren und testen können. Dieser Workflow ist für nutzungsbasierte Versicherungen geeignet. Sie werden sehen, dass alle drei Formfaktoren die gleichen Informationen enthalten.
Workflow-Empfehlungen
- Wählen Sie einen Grundriss auf der Grundlage der verschiedenen Bildschirmgrößen, die verwendet werden sollen.
- Entwerfen Sie Ihre Designs zuerst für Smartphones und danach für größere Bildschirme. Dies wird als „Mobile-First“-Design bezeichnet.
- Wenn Sie sich für reaktionsfähige Komponenten entscheiden, platzieren Sie sie in verschiedenen Formfaktoren, die im Jutro Design System verfügbar sind, um zu sehen, wie sie sich verhalten und wie sie aussehen.
- Wählen Sie die verschiedenen Komponenten, die Sie benötigen, und beschreiben Sie, wie der Benutzer mit ihnen interagiert.
- Berücksichtigen Sie unterschiedliche Workflows auf verschiedenen Geräten. Zum Beispiel würde ein Feld mit einer Beschriftung auf der linken Seite auf einem mobilen Gerät zu einem Feld mit einer Beschriftung oben werden.
- Stimmen Sie die Machbarkeit Ihres Entwurfs mit der Entwicklung ab. Ändern Sie Ihren Entwurf bei Bedarf, bis er den Anforderungen der Endbenutzer entspricht, technisch machbar und kostengünstig zu entwickeln ist.
- Überprüfen Sie Ihren Entwurf mit dem PM oder dem Produktverantwortlichen.