Conception réactive et adaptative
Vous avez besoin de code et de détails techniques ? Reportez-vous à la section Développement réactif et adaptatif.
Les entreprises d'aujourd'hui sont souvent mobiles. Les voitures sont des bureaux « mobiles ». Jutro a pris acte de cette évolution en recourant à une solution hybride pour la création d'applications.
Commençons par quelques définitions.
Qu'est-ce que la réactivité pour les applications ?
Les conceptions de sites web réactifs s'ajustent automatiquement à la taille de l'écran ou de la fenêtre du navigateur. L'interface utilisateur qui s'affiche sur un ordinateur portable s'affiche également sur une tablette ou un téléphone portable. Cela garantit une qualité et un accès aux informations cohérents sur tous les appareils.
Qu'est-ce que la conception de sites Web adaptative pour les applications ?
La conception adaptative permet d'avoir des mises en page différentes selon le point de vue. Des mises en page spécifiques sont ainsi créées pour différents appareils, tels que des ordinateurs portables, des tablettes (verticales et horizontales) et des téléphones portables. Le système détecte le facteur de forme (point de rupture) nécessaire et affiche la mise en page correspondante. Cela optimise l'expérience utilisateur. Dans certains cas, les informations peuvent être légèrement différentes selon le format. Par exemple, le contenu peut être moins détaillé sur un téléphone portable.
Contrairement aux conceptions réactives, qui utilisent une conception unique et flexible pouvant s'étirer ou se rétrécir pour s'adapter à l'écran, les conceptions adaptatives comportent plusieurs conceptions qui correspondent à des tailles de mise en page fixes et prédéfinies.
Comment ces deux approches sont-elles utilisées dans Jutro ?
Jutro utilise les deux approches pour optimiser l'expérience utilisateur. Il existe des composants conçus pour être réactifs et des mises en page conçues avec des points de rupture définis afin d'aider les concepteurs et les développeurs à accélérer l'exécution du produit.
Recommandations et sélection du plan
Pour les applications cloud d'IARD, la tendance continue de privilégier le mobile. Mais cette tendance est nuancée. Les applications de productivité et informatiques sont gourmandes en données et en main-d'œuvre et sont donc le plus souvent utilisées sur des ordinateurs portables ou de bureau. Il s'agit généralement d'applications B2B. Les plans optimisés pour ce type d'applications comprennent la forme en L, la forme en C et la forme en R.
Les applications que les clients des assureurs IARD utilisent pour soumettre le premier avis de sinistre, consulter l'état des sinistres, ainsi que pour acheter et réviser des polices, sont souvent consultées sur des appareils mobiles. Les agents de terrain des assureurs utilisent également des appareils mobiles tels que des tablettes. Le plan en forme de I est optimisé pour fonctionner sur des tablettes et des appareils mobiles.
Pour en savoir plus, reportez-vous à notre page sur les recommandations pour les plans.
Démarrage
Il est recommandé aux chefs de produit de commencer par évaluer où l'application sera principalement utilisée par les utilisateurs finaux, mais aussi le type d'informations qui sera présenté et les tâches que l'utilisateur final devra accomplir. Cela aidera à orienter les décisions sur la façon d'aborder la réactivité et l'adaptabilité. Le consultant ou le concepteur UX peut vous aider à identifier le type de personne qui utilisera l'application et le contexte de son travail.
Comment sont créés les composants Jutro
- **Réactifs **: les composants s'adaptent automatiquement à la taille de l'écran à l'aide de requêtes de média.
- Adaptatif : le composant ne s'adapte pas à la taille de l'écran. Vous devez alors les configurer à l'aide des propriétés de point de rupture. Le rendu du composant varie en fonction de l'appareil.
- Corrigé : le composant ou la page ne s'ajuste pas à la taille de l'écran.
Exemple
Voici un exemple de la présentation d'une même application dans trois formats différents.
Nous recourons à notre société imaginaire « FutureState » pour illustrer différents workflows et voir comment optimiser et tester Jutro au mieux. Ce workflow concerne une assurance basée sur l'utilisation. Vous constaterez que les trois facteurs de forme comportent les mêmes informations.
Recommandations relatives au workflow
- Sélectionnez un plan en fonction des différentes tailles d'écran qui seront utilisées.
- Commencez la conception par la version pour téléphone, puis celle pour des écrans plus grands. C'est ce que l'on appelle la conception « mobile-first ».
- Si vous choisissez des composants réactifs, placez-les dans différents formats disponibles dans le système de conception Jutro pour voir comment ils se comportent et comment ils apparaissent.
- Choisissez les différents composants dont vous avez besoin et décrivez comment l'utilisateur interagit avec eux.
- Imaginez différents workflows sur différents appareils. Par exemple, un champ comportant une étiquette à gauche deviendra un champ dont la même étiquette se trouvera au-dessus sur un portable.
- Vérifiez la faisabilité de votre conception avec le développement. Modifiez votre conception si nécessaire jusqu'à ce qu'elle réponde aux besoins des utilisateurs finaux, qu'elle soit techniquement réalisable et rentable à développer.
- Examinez votre conception avec le chef de projet ou le détenteur du produit.