1. Pourquoi créer une app dans le pupitre iAdvize et les applications mobile (iAdvize et/ou ibbü) ?
Étendre les capacités de vos répondants pour vos use cases
Nous vous proposons un moyen puissant d'intégrer votre propre application directement dans le pupitre d'iAdvize ou les apps mobile (iAdvize ou ibbü) afin que vos agents puissent répondre à vos besoins stratégiques et commerciaux spécifiques, de façon transparente.
Que vous souhaitiez mettre en place
- une solution de suivi des livraisons ou de commandes
- un accès à un catalogue produit ou au suivi des stocks
- un moyen pour vos conseillers d'accéder aux articles de la base de connaissance
- une solution pour qualifier les prospects ou vous connecter à votre CRM
C'est possible grâce aux Apps intégrées au pupitre de vos conseillers !
2. Comment votre application est-elle intégrée à la plateforme d'iAdvize ?
2.1 Au sein du pupitre
Votre application sera accessible dans le pupitre via un bouton dans la barre d'outils. Ce bouton aura une icône et un nom de votre choix (paramétré dans la developer plateform d'iAdvize).
Veuillez noter que les dimensions de cette Iframe varieront en fonction de différents éléments tels que la taille de l'écran, le mode d'affichage des conversations, etc. Vous devez prévoir que la mise en page de votre application s'adapte à tous les contextes.
2.2 Au sein d'iAdvize et des apps mobile ibbü
Votre application sera disponible en cliquant sur un bouton à côté de la zone de composition dans l'écran de conversation. Elle s'affichera dans une vue web (voir la vidéo ci-dessous pour illustration). Le répondant aura la possibilité de naviguer entre toutes les applications grâce à un menu en bas de l'écran des applications.
Il sera possible de déclencher des actions depuis votre application pour remplir la zone de composition dans l'écran de conversation (voir la section "Interactions avec le pupitre et les applications mobiles iadvize" pour plus de détails).
Pour faciliter l'utilisation, il sera également possible de naviguer entre la conversation et vos applications par un simple geste de balayage.
Veillez à ce que vos applications soient responsive afin de s'adapter à tous les appareils mobiles.
3. Principes de conception pour garantir une bonne expérience de votre application dans le pupitre et les app mobiles
Afin de garantir une bonne expérience utilisateur pour votre application au sein d'iAdvize, nous avons défini un ensemble de directives qui vous aideront à prendre des décisions lors de la conception et de la réalisation de votre application.
Le respect de ces guidelines permettra également d'assurer la cohérence de l'interface utilisateur et de l'expérience utilisateur entre votre application et le pupitre d'iAdvize et les app mobiles.
L'objectif de la cohérence est de respecter une logique d'utilisation constante, tant dans la manière d'exécuter les commandes que dans la représentation des données : le graphisme, la position des informations, le vocabulaire et le format des données doivent être cohérents d'une fenêtre à l'autre.
3.1 Mise en page
Concevoir un espace flexible qui s'adapte aux petits espaces
En règle générale, n'oubliez pas que votre application sera chargée dans une iFrame (ou une webview sur mobile) dont les dimensions peuvent varier considérablement. La gestion de l'espace vertical et horizontal dans votre mise en page est essentielle pour garantir une bonne expérience utilisateur. Votre mise en page doit donc être fluide autant que possible.
Nous vous recommandons de commencer à construire votre mise en page pour une iframe aussi petite que 255x247px (qui correspond aux plus petites dimensions possibles) et d'appliquer un workflow d'amélioration progressive, en vous concentrant ensuite sur les dimensions standards de 450x460px jusqu'aux plus grandes dimensions possibles de 584x1100px.
En appliquant ce workflow lors de la construction de votre mise en page, vous vous assurez qu'elle s'adaptera à tous les contextes de la meilleure façon.
Garantir la lisibilité
Une bonne lisibilité est vraiment ce qui rendra votre application utilisable. Prenez en considération le fait que votre application se trouve dans une interface utilisateur déjà chargée (le pupitre) et qu'elle doit donc être aussi légère que possible afin de préserver la charge cognitive de vos utilisateurs.
Vous pouvez garantir la lisibilité en faisant attention à la taille des polices, aux contrastes de couleurs, à la quantité d'informations affichées et aux espaces négatifs.
Il est également important d'avoir une mise en page qui guide facilement l'attention de l'utilisateur, grâce à la hiérarchie visuelle et la composition de l'interface utilisateur.
Notes :
- Vous devez ajouter votre propre padding à votre application car il n'est pas fourni dans l'iFrame. Nous recommandons 16px en haut et 24px à gauche et à droite pour s'intégrer au reste de l'interface.
- Vous devez autoriser le scroll dans votre application pour vous assurer que tout votre contenu sera accessible au cas où l'iFrame serait trop petit
-
Vous devez vous assurer que votre application est également utilisable sur les appareils mobiles (pour les applications mobiles iAdvize).
-
Rappelez-vous que sur les applications mobiles, le clavier de l'appareil prendra de la place à l'écran lors de la saisie d'une entrée par exemple, votre mise en page doit rester utilisable dans ce cas.
3.2 Navigation
Selon la complexité de votre application, vous devrez peut-être proposer une navigation entre différents écrans ou sections. Une navigation claire entre ces sections est essentielle pour permettre à vos utilisateurs d'être productifs tout en utilisant votre application et de l'apprécier dans son ensemble. D'autant plus que les utilisateurs du pupitre peuvent effectuer des tâches de façon répétitive.
Envisagez d'avoir un titre et/ou un header en haut de votre mise en page.
Il permet de montrer clairement de quelle app il s'agit et de fournir des informations clés qui pourraient donner au répondant un contexte intéressant pour la tâche qu'il accomplit.
Demandez-vous également si ce header doit être statique ou non, par exemple si un long scroll est nécessaire, mais que les informations du header restent fixes. A noter que l'espace vertical est très limité (cela pourrait faire perdre de l'espace utile pour le contenu défilant).
Si votre application comporte une navigation principale entre des catégories de contenu ou de fonctionnalités, vous pouvez proposer différents types de navigation :
- Les menus à onglets peuvent être utiles, assurez-vous simplement qu'ils seront utilisables horizontalement (prévoyez un scroll horizontal si nécessaire).
-
Les menus déroulants peuvent également être très utiles selon le nombre d'entrées.
Exemples de menus à onglets et de menus déroulants :
Rendez également claire l'interface pour que l'utilisateur sache où il se trouve à tout moment et comment revenir à l'écran précédent.
Nous vous recommandons d'utiliser un bouton de retour au niveau du titre pour permettre à l'utilisateur de revenir à l'écran précédent.
3.3 Interactions sur mobile
- Veillez à utiliser les balises correctes pour vos composants d'interface utilisateur afin que les appareils mobiles se comportent au mieux (type d'entrées correctes pour afficher le type de clavier approprié, par exemple).
- N'oubliez pas que les interactions de survol ne sont pas disponibles sur les appareils mobiles. Vous devez donc vous assurer que l'UX de votre application ne dépend pas des interactions de survol pour une utilisation mobile. Vos utilisateurs doivent toujours pouvoir accéder à tout le contenu et effectuer toutes les tâches.
3.4 Interactions avec le pupitre et les applications mobiles iAdvize
Même si votre application est chargée dans une iFrame, elle peut tout de même interagir avec le reste de l'interface du pupitre. Il est possible par exemple de pousser des éléments (texte) depuis votre app vers la zone de composition (exemple: envoi de bons de réduction), ou des liens au visiteur.
Cela permet d'économiser des actions à vos agents.
4. Exemples d'une Custom App
Voici l'exemple d'une application destinée à suivre les commandes et la livraison.
5. Quels styles pour une intégration cohérente de l'interface utilisateur dans le pupitre ?
Nous avons conçu un sous-ensemble de variables CSS dérivé du Design System d'iAdvize qui vous permettra de styliser facilement votre application de manière cohérente avec l'interface utilisateur existante du pupitre.
Il se présente sous la forme d'un fichier CSS intégré à la librairie des Custom Apps.
5.1 Utilisation du CSS
Afin de pouvoir utiliser ces variables, vous devez vous appuyer sur la librairie des Custom Apps, en appelant l'URL de la feuille de style appropriée dans votre code html.
Une application peut l'inclure soit dans son HTML
<link rel="stylesheet" src="https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css">
Ou en tant qu'importation de premier niveau dans une feuille de style prétraitée :
@import 'https://static.iadvize.com/conversation-panel-app-lib/2.9.0/idzcpa.base.css';
Il contient une bibliothèque de variables CSS pour les polices, les couleurs et d'autres éléments de base de la conception :
Détails des Variables :
6. Exemple d'utilisation du CSS dans une Custom App
Voici à quoi pourrait ressembler une Custom App, via cette application démo :
