Donnez un air impeccable à votre application

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

• Comprendre pourquoi la conception de l’interface de votre application constitue la dernière étape du processus
  
• Reconnaître les éléments de l’interface d’une application
  
• Examiner les problèmes liés à l’interface de l’incitateur, notre application d’exemple, et corriger certains d’entre eux
  
• Observer l’application finale qui aura été peaufinée
  

Le dernier mais pas le moindre

Comme nous l’avons dit au début, il est facile de commencer par créer des éléments d’application et de tableau de bord très esthétiques. Analytics Studio met à votre disposition de nombreuses façons simples de développer des explorations, de choisir des graphiques élégants, de placer et de redimensionner les widgets du tableau de bord, de modifier la taille et les couleurs de la police et bien plus encore.

Comme vous l’avez également vu, les plus beaux des graphiques seront inutiles pour votre public s’ils n’ont pas été élaborés dans un contexte adéquat. Qu’entendons-nous lorsque nous parlons du contexte ? Il s’agit de l’objectif de votre application, des idées de fonctionnalités à y intégrer et de la structure que vous avez prévue pour elle.

Vous avez déjà défini ces aspects de l’incitateur. Il est maintenant temps de réfléchir à la manière de peaufiner l’application, c’est à dire de faire en sorte que son apparence mette en valeur ses éléments sous-jacents. Même si vous n’abordez cet aspect qu’à la fin du processus, c’est celui que vos utilisateurs verront en premier. Efforcez-vous de rendre votre application la plus attrayante possible : ainsi, votre public souhaitera utiliser ces fonctionnalités qui vous ont demandé tant de travail.

Rendre l’application visuellement attrayante

Il est maintenant temps de vous pencher sur l’apparence de l’application. Ici, vous devez mettre à contribution votre jugement esthétique pour la rendre visuellement attrayante. Cet aspect peut, en effet, renforcer le sentiment d’attachement chez les utilisateurs. Voici les éléments sur lesquels vous pouvez jouer pour rendre vos fonctionnalités tellement attirantes visuellement que les utilisateurs auront hâte de s’en servir.

• Les tailles et formes que vous utilisez : reflètent-elles l’importance des fonctionnalités et sont-elles harmonieuses entre-elles ? Font-elles bon usage de l’espace ?
  
• Les types de graphiques que vous utilisez : permettent-ils de bien visualiser les données qu’ils présentent ? Sont-ils cohérents avec des types de graphiques similaires utilisés pour des données semblables (et avec les différents types de graphiques utilisés pour les différents types de données) ?
  
• Alignement, espaces et positionnement : les éléments sont-ils disposés de manière ordonnée et agréable ? Sont-ils suffisamment distincts les uns des autres pour que vous puissiez les différencier clairement ? Y a-t-il trop (ou trop peu) d’espace entre les éléments ?
  
• Couleurs : employez-vous une palette agréable, dont les couleurs sont bien accordées ? Les éléments devant se démarquer sont-ils bien colorés ? Les éléments similaires sont-ils tous colorés de la même manière ?
  
• Polices : les informations de nature identique sont-elles présentées en utilisant les mêmes tailles de polices et types de caractères ?
  
• Personnalisation : avez-vous intégré des éléments reflétant l’identité de votre équipe ou de votre entreprise si cela était nécessaire ?
  

Rendre l’incitateur plus motivant

En gardant ces éléments à l’esprit, intéressons-nous aux parties du tableau de bord de l’incitateur pouvant se révéler… décourageantes, un comble pour un outil de motivation. Sur le plan de l’apparence, certains problèmes sont évidents (vous aviez d’ailleurs déjà remarqué certains d’entre eux).

• Le tableau de bord ne donne pas accès à suffisamment de détails sur les activités. D’autres types de graphiques sont peut-être nécessaires.
  
• De plus, pourquoi les barres correspondant aux différentes activités (appels, e-mails, etc.) sont-elles si grandes ? L’utilisation de l’espace pourrait certainement être plus efficace et faire place à d’autres métriques utiles (tels que les moyennes ou critères de référence, les détails sur chaque type d’activité, etc.).
  
• La police utilisée n’a pas la même taille partout. Les métriques présentées sur la gauche sont toutes de tailles différentes. Est-ce volontaire, ou simplement le fait du hasard ? C’est impossible à dire.
  
• Certaines parties du tableau de bord se chevauchent. Le nom du propriétaire est intégré à un widget qui affiche de nombreuses valeurs numériques.
  
• Les couleurs et les tailles des sections indiquant les totaux ne sont quant à elles pas logiques.
  

Refonte de l’incitateur, étape 3 : ne négligeons pas les dimensions et les couleurs

Nous en sommes maintenant au stade de la conception où nous pouvons commencer à résoudre les problèmes d’ordre esthétique. À la fin de l’étape de refonte précédente, vous avez remarqué que les zones de résumé indiquant les activités totales, en retard ou terminées étaient dimensionnées et colorées de manière peu harmonieuse. Retournons dans Analytics Studio pour corriger cela.

1. Ouvrez le tableau de bord de l’incitateur dans le concepteur de tableaux de bord.
   
2. Redimensionnez la métrique Activités totales pour qu’elle fasse quatre cellules de large.
   
3. Faites glisser la métrique Activités en retard d’une cellule vers la gauche.
   
4. Élargissez la métrique Activités terminées d’une cellule vers la gauche. Vos widgets de métriques sont maintenant de taille identique. 
   

Toutefois, leurs couleurs sont différentes.

5. Cliquez sur la métrique Activités totales.
   
6. Dans le panneau de propriétés du widget à droite, cliquez sur Style du widget pour l’agrandir.
   
7. Sous Couleur d’arrière-plan, cliquez sur la couleur actuelle et sélectionnez bleu foncé. 
   

8. Comme le texte du widget est sombre lui aussi, il est devenu difficile de le voir. Cela se règle très facilement. Dans le panneau des propriétés du widget, cliquez sur Title (Titre) pour l’agrandir. Modifiez le paramètre Title Color (Couleur du titre) de sorte qu’il soit défini sur la couleur blanche.
   
9. Développez maintenant la section Number (Numéro) et modifiez le paramètre Number Color (Couleur des chiffres) de sorte qu’il soit défini sur la couleur blanche. Voilà qui est mieux.
   
10. Répétez les étapes 5 à 9 pour modifier la couleur de l’arrière-plan et du texte des métriques Activités en retard et Activités terminées.
    
11. Enregistrez votre tableau de bord mis à jour, puis observez-le en mode aperçu. Maintenant, ces métriques ressortent vraiment bien. 
    

Ici, vous pouvez également procéder à un autre ajustement. Ces métriques semblent toujours un peu isolées, alors que vous voulez qu’elles s’affichent comme un tout. Vous vous rappelez de ce widget conteneur que vous avez utilisé pour déplacer les widgets ensemble ? Il peut vous aider ici.

1. Modifiez le tableau de bord.
   
2. Pour sélectionner le widget conteneur, passez votre souris sur le bord du conteneur sous l’une des métriques et cliquez lorsque le curseur se transforme en flèches croisées.
   
3. Dans le panneau de propriétés du widget à droite, cliquez sur Style du widget pour l’agrandir.
   
4. Définissez la couleur d’arrière-plan sur le même bleu foncé que celui que vous avez utilisé pour les métriques.
   
5. Enregistrez votre tableau de bord mis à jour, puis observez-le en mode aperçu.
   

Vos métriques se lisent maintenant comme une histoire.

Refonte de l’incitateur

Nous progressons. Vous avez déterminé le public visé, l’objectif et les fonctionnalités de votre application. Vous avez aussi compris que l’incitateur ne répondait pas à ces considérations de conception. De plus, vous avez déjà procédé à quelques corrections, et ce, à tous les niveaux : objectif, structure et apparence.

Il est clair que votre application se rapproche de vos objectifs de conception. Toutefois, il vous reste encore beaucoup de travail. Nous ne pouvons pas vous accompagner pas à pas : cela dépasse la portée de ce module Trailhead. Nous vous avons présenté les bases de la conception et enseigné quelques techniques pour vous permettre de commencer à exprimer vos idées.

Cependant, nous pouvons vous montrer la refonte de l’incitateur effectuée par notre équipe de conception. Alors, sans plus tarder, revenez à Analytics Studio et ouvrez le tableau de bord intitulé The Motivator 2 (L’incitateur 2).

Parfait, vous pouvez tout de suite constater comment cette refonte améliore l’application originale.

• Améliorations répondant à l’objectif L’application intègre désormais sur sa gauche le classement tant demandé, un filtre de période et de nombreux autres détails sur tous les types d’activités. De plus, elle affiche maintenant les détails des comptes.
  
• Améliorations d’ordre structurel Les indicateurs clés de performance récapitulatifs sont situés en haut, là où nous les avons déplacés. En outre, les indicateurs clés de performance pour chaque membre de l’équipe sont situés en haut à gauche, là où ils sont les plus visibles et les plus faciles à atteindre. L’espace est, lui, réparti beaucoup plus judicieusement : au lieu d’afficher de larges barres représentant uniquement les totaux de chaque activité, ce même espace présente désormais de nombreuses données sur toutes les activités. De plus, les éléments similaires sont regroupés, tandis que ceux n’ayant pas de rapport entre eux sont séparés les uns des autres.
  
• Améliorations sur le plan de l’apparence L’apparence de votre application lui convient parfaitement et suscite l’enthousiasme de vos utilisateurs. De plus, les couleurs s’accordent bien : la nouvelle palette fait mieux ressortir les différents éléments. Les tailles de polices sont cohérentes. Enfin, les éléments similaires sont de dimensions et de couleurs comparables et ordonnés de manière semblable. Le rendu final est très professionnel.
  

Génial, non ? Bien sûr, nous avons triché un peu et vous avons conduit directement à la fin du processus. Mais nous espérons que vous aurez compris comment nous en sommes arrivés là. Nous souhaitons également qu’avec un peu de temps et de détermination, vous pourrez y arriver seul, à l’aide des ressources référencées tout au long de ce module.

Le travail d’administration d’un concepteur n’est jamais terminé

Le travail que vous avez fourni est peut-être suffisant pour le moment. Mais en tant qu’administrateur de CTC, vous constaterez rapidement qu’il est difficile de vous contenter de cela. Vos utilisateurs s’attendent à des améliorations, et vous savez bien qu’il existe toujours un moyen de rendre une application plus conviviale.

Par exemple, vous avez entendu parler de la fonctionnalité de pages d’Analytics Studio, qui peut faciliter l’utilisation des tableaux de bord en divisant leur contenu en plusieurs pages. Elles vous permettent de créer un récit en créant un chemin de navigation dynamique à travers votre tableau de bord. Chaque activité de l’incitateur pourrait alors disposer de sa propre page et vous pourriez ajouter des détails utiles, en affichant par exemple la progression de chaque commercial par rapport à son quota, les affaires clôturées gagnées et perdues et le chiffre d’affaires total. Vous et votre équipe pourriez ainsi comprendre plus facilement en quoi les activités contribuent aux performances commerciales et déterminer si certains types d’activités ont plus d’impact que d’autres.

Mais nous aborderons cela un autre jour. Votre surprenant voyage dans l’univers de la conception est presque terminé. Tout ce qui vous reste à faire est de répondre à ces questions pour enfin obtenir votre badge, que vous aurez bien mérité.

Ressources

• Aide Salesforce : Création de pages de tableau de bord