Reaktionsfähiges und anpassungsfähiges Design
Auf der Suche nach Code und technischen Details? Siehe Reaktionsfähige und anpassungsfähige Entwicklung.
Das Geschäft von heute ist oft von Mobilität geprägt. 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 Blickwinkel. Spezifische Designlayouts werden für mehrere Geräte wie Laptops, Tablets (sowohl vertikal als auch horizontal) und Mobiltelefone erstellt. Das System erkennt, welcher Formfaktor (Messpunkt) 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 können sie beispielsweise weniger ausführlich sein.
Im Gegensatz zu reaktionsfähigen Designs, die ein einziges, flexibles Design verwenden, das sich an den Bildschirm anpassen kann, umfassen anpassungsfähige Designs mehrere Designs, die festen, vordefinierten Layoutgrößen entsprechen.
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 Messpunkten, die den Designern und Entwicklern helfen, die Produktausführung 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 dieser Anleitung. 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 wird bei der Entscheidung helfen, 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 Messpunkt-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 namens „FutureState“ für verschiedene Arbeitsabläufe, um auszuprobieren, wie wir Jutro am besten optimieren und testen können. Dieser Arbeitsablauf ist für nutzungsbasierte Versicherungen geeignet. Sie werden sehen, dass alle drei Formfaktoren die gleichen Informationen enthalten.
Arbeitsablaufempfehlungen
- 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 Arbeitsabläufe 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 über dem Feld 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.