Comment les utilisateurs naviguent dans un monde à écran tactile - les nuls

Vidéo: Naviguer sur internet à l'aide de sa montre connectée Android Wear 2025

La façon dont les visiteurs interagissent avec vos pages et naviguent sur vos liens est radicalement différente sur un iPhone ou un iPad. Les visiteurs du site utilisant un iPhone ou un iPad utilisent leurs doigts - pas une souris, un clavier ou un stylet. Cela signifie que les liens doivent être faciles à identifier et suffisamment grands pour que les utilisateurs ne cliquent pas accidentellement sur un trop grand nombre d'entre eux du bout des doigts.

Gardez également à l'esprit que les effets de survol ne fonctionnent pas de la même manière sur un iPhone ou un iPad que sur un navigateur de bureau. Les effets de survol et les effets de survol similaires, qui provoquent un événement lorsqu'un utilisateur place un curseur sur une image ou un autre élément d'une page Web, sont automatiquement convertis en événements «sur clic» dans un iPhone ou un iPad.

Dans cette figure, vous voyez une technique de conception courante sur le Web - une série de vignettes liées à des versions plus grandes. Sur votre ordinateur, vous passez votre curseur sur chaque image pour afficher la version plus grande; sur un iPad, ces événements de survol seraient convertis en liens, déclenchés par le toucher d'un doigt.

Concevez vos liens pour travailler sur l'écran tactile, et assurez-vous de tester si les effets de survol et les menus déroulants peuvent être activés avec le toucher d'un doigt, ainsi qu'avec une souris.

Pour faciliter la navigation des visiteurs de l'iPhone et de l'iPad, vous devez

Faciliter le clic sur les liens: Séparez les liens en laissant suffisamment d'espace entre eux pour faciliter le cliquage. (À titre indicatif, Apple recommande que les liens soient définis pour occuper au moins 44 pixels sur 44 pixels d'espace.)

Cette recommandation est la même pour l'iPhone et l'iPad, car elle dépend de la taille du doigt et non de la résolution de l'appareil ou de la taille de l'écran. (Même si certains doigts sont plus gros que d'autres, 44 pixels est un bon guide.)
Rendez les liens faciles à voir: Les liens de style sont faciles à distinguer des autres textes et éléments d'une page. Rappelez-vous que vos visiteurs peuvent être distraits ou pressés et peuvent être en basse lumière ou, pire, en pleine lumière lorsqu'ils utilisent l'un de ces appareils hautement portables. Distinguer les liens en utilisant du texte et des images qui contrastent fortement avec l'arrière-plan.
Organiser les liens: Regrouper des liens vers des éléments connexes, et si vous avez un menu de sous-navigation dans un site, organisez ces liens dans leurs propres sections facilement reconnaissables.
Sur l'écran de l'iPhone plus petit, placez les menus de navigation en bas de l'écran, pas en haut: Les liens de navigation peuvent occuper beaucoup de place sur un écran mobile.

Plutôt que d'encombrer le haut de votre dessin avec des liens, incluez un seul bouton Menu en haut de chaque page, comme indiqué dans cette conception, et créez un lien qui saute vers le bas de la page, où vous pouvez inclure plus de liens sans enterrer le contenu.