Au début de la conception de sites Web pour appareils mobiles, la plupart des développeurs ont bifurqué leur offre de produits. Ils ont publié une version de bureau entièrement fonctionnelle, puis une version "optimisée pour les mobiles", qui a mis fin à une grande partie de l'image de marque et des images afin de s'adapter aux capacités limitées et à la vitesse de réseau des téléphones à barres chocolatées et des réseaux sans fil 3G.
Cependant, les smartphones contemporains peuvent rendre les pages Web aussi efficacement que les ordinateurs de bureau, sur des réseaux aussi bons ou meilleurs que les lignes DSL d'hier.
La conception, ensuite, revient à une interface mono-utilisateur. Mais le risque pour les concepteurs n'est pas qu'un smartphone ou une tablette ne puisse pas créer un site Web réactif moderne. En fait, la méthode de saisie de l'utilisateur sur un périphérique à écran tactile nécessite des modifications significatives de la conception du site sous-jacent. La construction d’un site Web en supposant que les visiteurs disposent d’un clavier et d’une souris est révolue.
Règles de conception de l'écran tactile
Concevoir une interface Web compatible avec les écrans tactiles nécessite une évolution de l’approche traditionnelle moniteur-souris-clavier du passé. En particulier, vous devez prendre en charge des interactions telles que les gestes, les taps et la saisie multitouch.
- Tapping n'est pas précis.À moins que le client n’ait les doigts d’un enfant en bas âge, même avec les commandes logicielles très précises, il peut être difficile de taper du doigt et d’être précis.
- Les gestes sont différents des robinets.Pour faire défiler une longue page sur un écran tactile, l'utilisateur fait glisser son doigt en haut la fenêtre du navigateur. Cela peut sembler insignifiant jusqu'à ce que vous réalisiez que lorsque vous naviguez avec la souris, vous déplacez la souris. vers le bas .
- Deux (et plus) tapotements.Un utilisateur peut utiliser plusieurs tapotements digitaux sur l'appareil en même temps pour le contrôler. Ces taps supplémentaires peuvent signifier quelque chose de spécifique en fonction du système d'exploitation du périphérique de l'utilisateur.
- Appareils à haute brillance.Les écrans de la plupart des tablettes tactiles sont fabriqués à partir d’un verre robuste. Ce matériau peut être très difficile à lire, avec beaucoup d’éblouissement, dans des situations de forte luminosité. De plus, avec tous les contacts, ils ont des empreintes digitales et des taches sur l'écran qui peuvent affecter l'apparence de vos pages.
- Sur le clavier de l'écran.Bien que certains utilisateurs disposent d'un clavier sans fil qu'ils connectent à leur tablette, la plupart des utilisateurs de tablette utilisent le clavier à l'écran pour la saisie de données. L’entrée dans OSK peut donner lieu à des erreurs de frappe hilarantes et à une utilisation inconfortable pendant de longues périodes.
En raison de ces fonctionnalités de l'appareil, les concepteurs Web doivent mettre l'accent sur plusieurs règles de conception de base pour les utilisateurs d'écran tactile:
- Ne placez pas les éléments cliquables trop proches les uns des autres.Il n'y a pas de règle absolue définissant à quel point la proximité est trop proche, mais il peut être difficile de naviguer dans les listes de liens, en particulier dans une petite taille de police, en cliquant (tapotant) avec le gros doigt. Il peut être agaçant d’avoir à faire un zoom avant pour essayer de cliquer sur un lien. Ce principe est vrai pour les boutons ainsi que les liens.
- Il peut être difficile de garder les hiérarchies ouvertes.Une forme populaire de menu dynamique utilise JavaScript pour ouvrir un sous-menu lorsque l'utilisateur clique dessus, puis passe la souris sur le sous-menu. Ces états peuvent être très difficiles voire impossibles à utiliser sur les écrans tactiles car ils ne restent pas ouverts ou ne se ferment pas.
- Éloignez les liens et les zones cliquables du bord droit de la fenêtre.La plupart des gens sont droitiers et ont tendance à faire défiler l'écran de ce côté. Comme le défilement se fait par un geste, il est parfois possible de commencer le balayage par erreur sur un lien. Les utilisateurs peuvent se fâcher s’ils veulent faire défiler la page et finissent par taper accidentellement sur un lien. En éloignant vos liens du côté droit, vous pouvez les aider à éviter ce désagrément.
- Il n'y a pas de souris.Et cela signifie qu'il n'y a pas de souris aiguille . Ne changez pas le pointeur de la souris pour indiquer que quelque chose est cliquable.
- Les états de survol n'existent pas.En corollaire à ce qui précède, puisqu'il n'y a pas de souris, il n'y a rien à survoler. Un lien est cliqué (tapoté) ou non sur un périphérique à écran tactile. Les utilisateurs ne peuvent donc pas déduire d'informations utiles à partir des états de survol tels que les changements de couleur, les info-bulles ou les changements de barre d'état.
- Les fonds noirs augmentent l'éblouissement.Un site avec un fond noir peut être très difficile à lire sur un appareil à écran tactile en raison de l'éblouissement. En noir, les empreintes digitales sur les périphériques sont plus claires et l’écran est flou. Et le noir peut transformer l'écran en miroir reflétant le visage des utilisateurs, souvent plus que le texte à l'écran.
- Les longs blocs de texte dans les formulaires sont difficiles à écrire.Bien qu'il soit possible d'écrire des romans entiers sur un iPad, une tablette Android ou Windows, la plupart des gens n'aiment pas utiliser le clavier à l'écran pour les longues périodes de texte. Plus votre conception peut rendre la saisie de données aussi courte et simple que possible, mieux c'est.
L’aspect le plus important de la conception avec des écrans tactiles est de: tester vos pages sur un appareil à écran tactile. Bien que de nombreux émulateurs iPad et Android soient disponibles, ainsi que de nombreuses tablettes Windows, ils ne donnent toujours pas l'impression d'écran tactile. Vous ne pouvez pas dire que les liens sont trop proches ou que les boutons sont trop petits, ou que l’éblouissement rend la page trop difficile à lire, à moins de sortir une tablette et de l’essayer. avant vous libérez votre nouveau design de site Web.
