Défilement

Cette rubrique traite des problèmes de défilement fréquemment rencontrés dans les interfaces utilisateur, et des bonnes pratiques dans ce domaine. Regardez la vidéo pour en savoir plus. 

Les interfaces utilisateur présentent souvent des problèmes de défilement que vous devrez éviter. 

Le défilement horizontal est en général inutile. Aucune barre de défilement horizontale ne devrait apparaître à l'écran sauf en cas de carrousel, d'affichage chronologique ou de fonctionnalité volontairement structurée sous forme horizontale. 

Le défilement horizontal est en général lié à une mise en forme inadaptée des données ou des colonnes, à l'ajout d'un trop grand nombre de colonnes dans un tableau ou à une mise en page qui n'est pas adaptée à un format d'écran réduit. 

Les workflows utilisateur doivent être étudiés de près pour éviter de multiplier les données affichées à l'écran. Un tableau surchargé devient difficile à utiliser et les performances peuvent aussi être impactées. Il est recommandé de faire preuve de rigueur et de rechercher la simplicité, en n'affichant initialement que les données strictement nécessaires, avec des invites pour l'affichage de données secondaires ou rarement utilisées. Pour atteindre cet objectif, vous devez vous mettre à la place de vos utilisateurs.

Dans cet exemple, nous avons amélioré la largeur des colonnes du tableau et nous avons raccourci l'affichage de certaines données pour plus d'efficacité. Nous avons également dû choisir les données absolument nécessaires, ce qui peut être difficile. Ce tableau devant présenter les informations essentielles et fournir ensuite des liens vers des enregistrements ou dossiers complets, nous avons fait le tri dans les données pour que tout tienne à l'écran sans défilement. Les informations supplémentaires, dont l'utilisateur n'a généralement pas besoin, sont accessibles via la colonne ID.
Vous devez également vérifier l'affichage de vos interfaces utilisateur sur des écrans de différentes tailles. Vous pouvez simplement modifier la largeur de la fenêtre de votre navigateur ou utiliser les outils de développement du navigateur en mode « responsive » (adaptatif).

Un certain nombre de scénarios techniques dans Pega peuvent aussi entraîner une duplication de la barre de défilement vertical. Ces problèmes doivent généralement être résolus par un développeur front-end.

Vous devez aussi prendre en compte la manière dont les différents systèmes d'exploitation gèrent les barres de défilement. Le système macOS masque par défaut les barres de défilement jusqu'à ce que l'utilisateur passe dessus, tandis que Windows les affiche par défaut sur tous les navigateurs. 

De nombreux professionnels de la conception et du développement logiciel travaillent sur des Mac et peuvent parfois oublier de vérifier l'affichage sous Windows. Ils peuvent aussi ne pas configurer leur Mac pour afficher les barres de défilement, et pour cette raison, ne pas voir les barres de défilement en double.

Vérifiez vos connaissances avec l’interaction suivante.