les meilleures pratiques pour la conception d`interfaces

LES MEILLEURES PRATIQUES POUR
LA CONCEPTION D’INTERFACES
UTILISATEURS MOBILES
Fiche technique QlikView
Mars 2012
qlikview.com
Conception d’interfaces utilisateurs QlikView pour les
navigateurs mobiles
La méthodologie de conception d’interfaces utilisateurs de navigateurs d’appareils mobiles, y
compris d’appareils dotés d’écrans plus larges comme l’iPad, est différente de la méthodologie
appliquée aux navigateurs de bureau, car il faut tenir compte de l’espace disponible à l’écran et
de l’intégration de fonctionnalités tactiles. Cette fiche technique examine les meilleures pratiques
recommandées en matière de conception d’applications QlikView destinées aux tablettes
mobiles comme l’iPad. QlikView prend en charge les fonctions de cet appareil depuis la version
10 SR1. Lors de la rédaction de ce document, QlikView 11 a été employé comme référence.
Une taille d’écran limitée
En raison des contraintes liées à l’espace disponible à l’écran, il faut choisir le type d’objets de
l’interface utilisateur qui figureront sur les feuilles et s’assurer de leur utilité.
• D
évelopper une application adaptée à la résolution native de l’iPad (980
pixels de large)
La taille de l’écran d’un iPad correspond à 1 024 x 768 pixels, mais sa résolution native
est légèrement inférieure. Il est recommandé de concevoir des applications QlikView avec
une résolution de 980 x 590 pixels avec une ligne d’onglets et de 980 x 610 pixels sans
ligne d’onglets.
Bien évidemment, il est possible de développer une application standard de navigateur
de bureau (1 024 x 768 pixels sans la barre de navigation et les lignes d’onglets). Il faut
toutefois tenir compte de la barre de navigation et de la ligne d’onglets qui occuperont
davantage d’espace en hauteur par rapport à un client AJAX classique sur un navigateur
de bureau car les icônes de l’iPad sont plus grandes.
Si l’affichage d’une application est prévu pour une résolution de 1 024 pixels de large,
l’iPad la redimensionnera pour l’adapter à la largeur de l’écran. Dès lors, s’il existe une
fonctionnalité de zoom, il n’est pas forcément nécessaire de créer une version différente
pour l’iPad. Dans ce cas, il est préférable de ne pas placer d’objet qui réduirait la hauteur
en bas d’une feuille QlikView (c’est-à-dire en adaptant la taille aux données), comme un
tableau.
Prenez en considération les contraintes spatiales liées au mode d’affichage (portrait ou
affichage) et procédez à des tests minutieux en fonction de la hauteur ou de la largeur de
la résolution.
• Choisir le mode d’affichage : portrait ou paysage
L’affichage en mode portrait peut être préférable au mode paysage et vice-versa en
fonction du contenu à l’écran. Tenez compte de la simplicité d’interaction pour les
utilisateurs finaux lors du choix du mode d’affichage.
Par exemple, si l’application contient une longue liste de données dans un tableau, il peut
être plus simple d’utiliser l’affichage en mode portrait. Si elle contient des graphiques, il
peut être préférable d’utiliser l’affichage en mode paysage. L’explication est la suivante :
l’axe des abscisses est généralement plus long (plus large) que l’axe des ordonnées.
Les meilleures pratiques pour la conception d’interfaces utilisateurs mobiles
| Page 2
• Conteneurs
S’il est nécessaire d’afficher de nombreux graphiques sur une feuille, utilisez un conteneur
pour que les utilisateurs puissent consulter un seul objet de grande dimension au lieu de
plusieurs petits objets.
• Objet de recherche
En raison des contraintes liées à la surface disponible à l’écran, vous ne pouvez placer
qu’un nombre limité de listes de sélection. Utilisez des listes de sélection pour les champs
les plus fréquemment utilisés et un objet de recherche pour les autres champs.
• Codes couleur des éléments identiques
Si des graphiques ont un champ en commun, appliquez des couleurs uniformes pour
gagner de l’espace sur chaque graphique en attribuant une légende identique pour
plusieurs objets.
• Graphiques ou tableaux
Privilégiez les tableaux par rapport aux graphiques lorsque la quantité de texte est trop
importante.
Visibilité
Il est tentant de réduire la taille de la police pour insérer des objets supplémentaires en raison
des contraintes spatiales. Cependant, il ne faut pas oublier que les utilisateurs finaux ne pourront
rien consulter si la taille des éléments est réduite et s’ils sont serrés les uns contre les autres
dans un espace limité. Tous les éléments doivent être visibles et la navigation doit être facile. Les
utilisateurs navigueront dans l’interface à l’aide des fonctions tactiles, ce qui signifie que chaque
point d’activation tactile doit être assez grand pour le manipuler avec le doigt et non pas avec un
pointeur de souris.
• U
tiliser une police Arial ou une police prise en charge par le navigateur de
l’iPad
La police Tahoma n’est pas prise en charge par Safari, le navigateur de l’iPad, et s’affiche
en tant que Times New Roman. Vérifiez si le type de police s’affiche de la même façon
sur le navigateur de l’iPad et sur les navigateurs de bureau.
• Utiliser une taille de police minimale de 11 pt
Listes de sélection – Les mouvements tactiles permettent d’utiliser les listes de sélection
dans les applications. Si la taille de la police du texte de la liste de sélection est très
petite, les utilisateurs finaux auront des difficultés à effectuer des sélections. Il est
fortement recommandé d’utiliser une taille de police minimale de 11 pt.
Graphiques – Pour les légendes des graphiques, vous pouvez utiliser des tailles de police
inférieures (9 pt au minimum), car il s’agit d’éléments de référence et non pas d’éléments
interactifs.
Tableaux – Nous vous recommandons d’utiliser une taille de police minimale de 10 pt
pour garantir sa visibilité. Si les interactions sur le tableau sont extrêmement fréquentes,
choisissez plutôt une taille de police identique à celle des listes de sélection.
Les meilleures pratiques pour la conception d’interfaces utilisateurs mobiles
| Page 3
Confort d’utilisation
N’oubliez pas que les appareils mobiles ne fonctionnent pas à l’aide d’une souris et ne prennent
pas en charge le clic droit. Tenez compte des possibilités offertes par une simple pression du
doigt. La simplicité de navigation et d’interaction doit être présente à tous les niveaux.
• Sélections actives
Placez systématiquement un objet pour afficher les sélections actives (les filtres qui
ont été appliqués). Il peut s’agir d’une zone de sélections actives ou d’une fonction
GetCurrentSelections() dans un objet texte permettant aux utilisateurs finaux d’interagir
avec les options filtrées. Les utilisateurs peuvent identifier les filtres qui ont été appliqués
aux données affichées.
Si vous utilisez une zone de sélections actives, la taille de la police ne doit pas être
inférieure à 10 pt pour l’affichage et à 11 pt pour les interactions.
• Boutons de navigation
Pour faciliter l’utilisation des filtres actifs, utilisez des boutons d’action (annulation, retour,
suivant). Ces trois actions de base correspondent aux boutons les plus fréquemment
utilisés dans les applications QlikView. L’utilisation d’un bouton facilite la navigation dans
les interfaces utilisateurs même s’il est possible d’associer une barre de menus à chaque
objet pour annuler les sélections.
• Éviter les zones multiples
Nous vous déconseillons d’utiliser des zones multiples pour les interactions sur les
appareils tactiles. Privilégiez les objets de recherche. Vous pouvez utiliser les zones
multiples pour l’affichage d’informations relatives à un élément sélectionné par l’utilisateur.
Par exemple, il peut s’agir des zones suivantes : adresse 1, adresse 2, ville, code postal et
pays. Dans ce cas, les données sont bien présentées dans ces différentes zones lorsque
vous sélectionnez un compte. Nous vous recommandons d’y avoir recours uniquement
pour l’affichage de données sur les appareils mobiles.
• Pas d’option d’affichage au survol de la souris
Vérifiez qu’il est possible d’interpréter les éléments des graphiques en les visualisant (à
l’aide des légendes, des étiquettes sur les points de données si possible) car la fonction
de survol avec la souris n’est pas disponible sur l’iPad.
• Icônes spéciales
Associez des icônes spéciales à chaque objet. Par exemple, associez une icône
d’annulation pour simplifier l’utilisation des listes de sélection et une icône de menu pour
accéder à une liste complète d’options d’interaction avec le champ correspondant.
© 2012 QlikTech International AB. Tous droits réservés. QlikTech, QlikView, Qlik, Q, Simplifying Analysis for Everyone, Power of Simplicity, New Rules, The Uncontrollable Smile et
d’autres produits et services QlikTech, ainsi que leurs logos respectifs, sont des marques, déposées ou non, de QlikTech International AB. Toutes autres dénominations de sociétés,
ainsi que tous autres noms de produits et de services utilisés dans ce document, sont des marques, déposées ou non, de leurs propriétaires respectifs. Les informations publiées dans
les présentes sont susceptibles de modification sans préavis. Cette publication est exclusivement à des fins d’information, sans déclaration ni garantie d’aucune sorte, et QlikTech ne
sera, à cet égard, responsable d’aucune erreur ni omission. Les seules garanties se rapportant à des produits et services QlikTech sont celles stipulées dans les notices de garantie
expresse accompagnant, le cas échéant, lesdits produits et services. Rien dans les présentes ne doit être interprété comme constituant une quelconque garantie supplémentaire.
Les meilleures pratiques pour la conception d’interfaces utilisateurs mobiles
| Page 4