Share
Alors que le monde se fait passer pour des interfaces contrôlées par le toucher, cet article se concentrera sur la méthode de saisie plus traditionnelle de la souris. Je proposerai une approche d'amélioration progressive pour gérer la conception d'interaction; plus spécifiquement, un aperçu du CSS le curseur règle.
La stratégie de conception mobile devient chaque jour plus importante. L'incursion de la communauté dans la conception Web réactive façonne et définit la conception des interactions et des contrôles des utilisateurs à mesure qu'ils deviennent de plus en plus optimisés pour la saisie tactile. Cependant, la méthode de saisie de précision de la souris bien établie ne va pas disparaître de si tôt. Ce fait, parallèlement à la nature universelle du Web, confirme que l'optimisation des entrées traditionnelles et tactiles devrait être pleinement prise en charge dans la conception de l'interface Web..
La plupart des logiciels, des applications de bureau aux systèmes d'exploitation, en passant par les sites Web simples, utilisent une variété de pointeurs d'interface graphique utiles. Ces pointeurs facilitent l’interaction de l’UI en suggérant à l’utilisateur quelle tâche ils peuvent accomplir à cet endroit précis des coordonnées à l’écran de l’application..
Voulez-vous saisir ou manipuler du texte? Vous savez que vous pouvez quand vous voyez un curseur "i-beam". Voulez-vous redimensionner une fenêtre? Vous savez que vous pouvez (et dans quelle direction) lorsque vous voyez un curseur de redimensionnement. Dans l'exemple ci-dessus, vous pouvez voir comment le curseur de redimensionnement suggère visuellement les directions possibles pour redimensionner la fenêtre..
En manipulant le graphique du curseur dans le contexte de la fonction de contrôle de l'interface, vous indiquez à l'utilisateur quand, où et comment il peut manipuler le logiciel..
Vous trouverez un très bon exemple d'utilisation de la conception du curseur pour communiquer une fonction dans Creative Suite d'Adobe..
Les icônes d'outils de la suite Adobe reflètent graphiquement leur fonctionnalité innée. Dans de nombreux cas, lorsqu'un outil spécifique est sélectionné, le curseur ressemble ou reflète précisément l'icône de l'outil. Ce paradigme d'interface utilisateur simple est très puissant pour communiquer visuellement le but et la fonction de chaque outil dans le vaste ensemble d'outils de l'application..
Les méthodes de saisie les mieux établies, telles que la souris, le stylet et le clavier, fournissent une forme supplémentaire de retour visuel non disponible pour les appareils tactiles: le survol. Les interactions de survol permettent aux utilisateurs d'explorer et de se familiariser avec l'application grâce aux éléments d'interface utilisateur de survol associés. Ces éléments aident à communiquer à l'utilisateur quels objets sont interactifs et comment ils peuvent être manipulés.
la nature du Web exige universalité et accessibilité… ce type d'approche tout compris, indépendant des intrants, présente un défi de conception unique.
Cependant, les interactions de survol (telles que les info-bulles) ont été conçues pour résoudre les problèmes d'interface utilisateur spécifiquement pour la souris. Ils deviennent inutilisables lorsqu'ils sont implémentés sur des périphériques à écran tactile. Étant donné que la nature du Web exige universalité et accessibilité, les applications Web doivent être conçues pour fonctionner à la fois pour les appareils tactiles et non tactiles. Ce type d’approche globale, indépendante des intrants, présente un défi de conception unique. Les interfaces utilisateur doivent prendre en compte les périphériques tactiles et non tactiles.
Ce défi de conception centré sur le Web consistant à adopter un éventail de méthodes d’entrée nécessite une approche d’amélioration progressive (qui, en passant, est préconisée depuis un certain temps)..
Même si le trafic Web est de plus en plus repris par les appareils mobiles (et donc les appareils à écran tactile), le CSS le curseur la règle est loin d'être obsolète. Vous pouvez concevoir un site Web ou une interface utilisateur d’application avec une approche entrée-agnositc qui fonctionne sur une variété de périphériques. Que ces périphériques soient contrôlés à l'aide d'un écran tactile ou d'une souris, la règle de curseur CSS agira comme une amélioration supplémentaire (mais non impérative) de l'interface utilisateur dans le retour visuel des périphériques pris en charge..
Comme mentionné, les curseurs CSS peuvent être utilisés pour donner des indications à l'utilisateur sur les fonctions que la souris peut remplir. Vous pouvez choisir parmi divers types de curseurs intégrés au navigateur ou au système d'exploitation de l'ordinateur de l'utilisateur (vous pouvez en voir une liste sur quirksmode.org). Les curseurs intégrés sont bien, mais vous devez vous rappeler qu'ils sont exclusifs au navigateur / système d'exploitation de l'utilisateur. Par conséquent, les contrôles peuvent varier d’un ordinateur ou d’un navigateur à un autre. Voici un exemple de changement de curseur:
.elementClass cursor: move;
Si vous avez besoin d'un curseur qui n'est pas inclus par défaut ou qui n'est pas pris en charge par tous les navigateurs, vous avez la possibilité d'inclure une image de curseur personnalisée. Ceci peut être défini de la même manière que le famille de polices règle, où vous fournissez des solutions de remplacement au cas où le curseur personnalisé ne se charge pas.
Accentsconagua
.elementClass cursor: url ('path / to / cursor.png'), move; Vous pouvez même définir la position du curseur (le point où les clics sont enregistrés). Ce sont les valeurs X et Y qui sont relatives au spot par défaut de '0, 0'; en haut à gauche de votre image de curseur personnalisée. Dans l'exemple ci-dessous, nous déplacerons le curseur à 10 pixels de la gauche et 5 pixels du haut..
.elementClass curseur: url ('chemin / vers / curseur.png') 10 5, déplacer; Malheureusement, la prise en charge de curseurs personnalisés par plusieurs navigateurs n’est pas aussi simple que les règles définies ci-dessus. Il y a quelques difficultés pour que les curseurs fonctionnent correctement dans les navigateurs..
Internet Explorer 7 et 8 ne supporteront que les fichiers .CUR. Les fichiers CUR ressemblent aux fichiers ICO, sauf que vous pouvez définir le "point chaud" du curseur à partir du fichier lui-même. Vous devez fournir un fichier .CUR si vous envisagez de supporter IE 7 & 8..
La création de votre propre fichier .CUR dépasse le cadre de cet article. Cependant, vous pouvez essayer de jeter un oeil à ce plugin Photoshop comme un bon début.
Tous les navigateurs interprètent l'URL du curseur personnalisé comme étant relative à l'emplacement de la feuille de style (conformément aux recommandations du W3C). Cependant, Internet Explorer (7-9) interprétera l’URL relative à la racine HTML..
Alors, disons que je commence un nouveau projet. Il a le "index.html" dans la racine, avec des dossiers pour les images, les feuilles de style et tous les curseurs personnalisés. Cela ressemblerait à ceci:
Comme vous pouvez le constater, mes feuilles de style et mes curseurs personnalisés sont complètement séparés les uns des autres..
Dans ce cas, je devrais écrire la règle du curseur avec des replis pour prendre en charge les navigateurs modernes avec des curseurs .PNG ainsi que IE avec des fichiers .CUR:
.elementClass curseur: url (… /cursors/cursor.png), / * Moderne - par rapport au document * / url (curseurs / curseur.cur), / * IE - par rapport à la racine * / default; / * Repli intégré * /
Vous pouvez également utiliser des chemins absolus dans le CSS, bien que vous ayez toujours à fournir des solutions de secours pour tous les fichiers .CUR:
.elementClass curseur: url (/cursors/cursor.png), / * Moderne * / url (/cursors/cursor.cur), / * IE * / default; / * Repli intégré * /
Pour en savoir plus sur les détails détaillés et l’interruption de l’implémentation de curseurs CSS inter-navigateurs, consultez useragentman.com. N'oubliez pas que si vous prenez en charge des périphériques tactiles, les curseurs CSS peuvent constituer une fonctionnalité d'amélioration progressive. Cela signifie qu'il n'exige pas forcément le support d'Internet Explorer (car les utilisateurs sur les écrans tactiles ne verront pas non plus le curseur personnalisé)..
Si vous implémentez des curseurs CSS dans le cadre de l'amélioration progressive, il peut être utile de voir exactement comment chaque curseur intégré apparaîtra sur les navigateurs et les plates-formes. Cela vous permettra de prendre des décisions éclairées sur la conception de votre interface. Vous trouverez ici une bonne référence pour voir comment les curseurs apparaissent dans tous les systèmes d'exploitation:
Navigateurs testés
Navigateurs testés
Navigateurs testés
Comme vous pouvez le constater, il existe diverses différences subtiles qui peuvent ou non affecter la conception de votre interface. Consultez le tableau complet pour comparer les curseurs des navigateurs et des plates-formes..
Comme vous pouvez le constater, la règle de curseur en CSS est un outil supplémentaire que vous pouvez utiliser pour faciliter l’interaction de l’utilisateur avec votre site Web ou votre application. Cependant, vous avez probablement remarqué à quel point chaque curseur peut être différent et varié, en fonction du navigateur de l'utilisateur et du système d'exploitation..
Ces différences notables dans les curseurs, en plus de l’utilisation croissante des appareils à écran tactile, ont relégué la le curseur règle à un rôle supplémentaire dans l'aide d'interaction UI, mais cela ne le rend pas obsolète. Il est bien mieux d’utiliser le curseur avec prudence comme amélioration progressive que de l’ignorer complètement. Et maintenant que vous savez comment vous en servir, allez créer quelque chose de génial!
