Comment les utilisateurs à naviguer dans un monde de l'écran tactile

La façon dont les visiteurs de votre site d'interagir avec vos pages et de naviguer vos liens est radicalement différent sur un iPhone ou un iPad à un ordinateur de bureau ou portable. Les visiteurs du site en utilisant un iPhone ou un iPad utilisent leurs doigts - pas une souris, un clavier ou stylet. Cela signifie que les liens doivent être faciles à identifier et assez grand pour que les utilisateurs ne cliquent pas accidentellement sur un trop grand nombre à la fois avec un doigt.

Aussi garder à l'esprit que des effets de survol ne fonctionnent pas de la même manière sur un iPhone ou iPad comme ils le font sur un navigateur de bureau. Effets de survol, et effets de survol similaires, qui font que quelque chose se passe comme un utilisateur déplace un curseur sur une image ou un autre élément sur une page web, sont automatiquement converties en "sur clic" des événements dans un iPhone ou un iPad.

Dans cette figure, vous voyez une technique de dessin commun sur le web - une rangée de vignettes qui sont liés à des versions plus grandes. Sur votre ordinateur, vous souhaitez rouler votre curseur sur chaque image pour voir la version-grand sur un iPad ces événements de roulement seraient converties en liens, déclenchée par le toucher d'un doigt.

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

Pour faciliter la navigation pour iPhone et iPad visiteurs, vous devez

Faire des liens faciles à cliquer: Liens distincts avec suffisamment d'espace entre eux pour le rendre plus facile de les exploiter en utilisant seulement un doigt. (À titre indicatif, Apple recommande que les liens être mis à occuper au moins 44 pixels par 44 pixels d'espace.)
Cette recommandation est la même pour l'iPhone et l'iPad car il est basé sur la taille d'un doigt, et non sur la résolution de l'appareil ou la taille de l'écran. (Même si certains doigts sont plus gros que les autres, 44 pixels est un bon guide.)
Faire des liens faciles à voir: Liens de style de sorte qu'ils sont faciles à distinguer des autres éléments de texte et sur une page. Rappelez-vous que vos visiteurs peuvent être distraits ou pressés et peuvent être en basse lumière ou, pire, la lumière vive lorsque vous utilisez un de ces appareils hautement portatifs. Distinguer liens à l'aide du texte et des images qui contraste nettement avec le fond.
Organiser liens: Groupe relie à des éléments connexes ensemble, et si vous avez un sous-navigation dans un site, d'organiser ces liens dans leurs propres sections, facilement reconnus.
Sur le petit écran iPhone, menus lieu de navigation en bas de l'écran, pas au sommet: Liens de navigation peuvent occuper beaucoup de place sur un écran mobile.
Plutôt que d'encombrer le haut de votre conception avec des liens, comprend un bouton de menu unique en haut de chaque page, comme indiqué dans cette conception, et de créer un lien qui saute vers le bas de la page, où vous pouvez inclure plus de liens sans enterrant le contenu.

La conception représentée sur cette figure a été créée pour Microsoft par le talentueux designer Sia Ea, qui travaille à Ansible Mobile.

A propos Auteur

Créez un clip web pour les iPhones

Tout comme vous pouvez les pages Web de signets dans un navigateur de bureau, vous pouvez enregistrer un lien vers une page Web sur un iPhone ou iPad en cliquant sur l'icône Exporter entouré en rouge dans la figure du haut, puis en choisissant…

Créer un design web pour tous les périphériques

Si l'idée de concevoir un portrait et paysage web design iPhone et un portrait et paysage conception iPad - juste pour une seule page Web - a vous sentir débordé, voici un certain soulagement.Le navigateur web Safari fait un bon travail…

Conception d'un mobile iPhone & iPad public

Peu importe quel appareil vous ciblez dans vos créations, le premier élément à considérer est votre public. Quand un public utilise un iPhone, vous pouvez supposer qu'ils sont mobiles et très probablement sur le mouvement - ils peuvent même…

Images de conception pour l'iPhone et l'iPad

Ayant images accrocheur sur votre site Web est l'une des meilleures façons d'attirer iPhone et iPad amateurs soucieux de leur image. Mais bachotage une image haute résolution qui peut être soufflé jusqu'à la taille de l'affiche sur un écran de…

Ne pas encombrer l'écran avec des options de navigation

Dans les options de navigation à la plupart des sites traditionnels, des liens vers toutes les pages principales sont toujours visibles. Un site typique comprend une rangée de liens à travers le haut ou le côté supérieur gauche ou à droite de…

Optimiser les conceptions web pour l'iPhone

L'écran de l'iPhone est petite, mais essayez d'arrêter de penser à des contraintes et de commencer à se concentrer sur les incroyables nouvelles opportunités - comme attirer un public de personnes en mouvement - des gens qui peuvent être…

Testez votre site avec l'iPhone et l'iPad

Un énorme avantage de se concentrer sur l'iPad / iPhone que vous concevez un site web est que vous pouvez relativement facilement tester vos conceptions. Même si vous avez seulement la version de bureau de Safari (disponible sur les deux systèmes…

Comment traiter avec du texte ou des liens cachés sur une page Web

Lorsque le texte ou les liens hypertexte sur une page Web sont invisibles pour les utilisateurs, mais peuvent être lus par un moteur de recherche, qui est considéré comme spam. Avoir du texte ou des liens cachés est un moyen facile d'être banni…

La gestion des menus Drupal

En général, un menu d'Internet est un ensemble de liens vers des pages Web. Dans Drupal, ces liens peuvent également pointer vers des nœuds (un mot de fantaisie pour le contenu Drupal), tels que des articles et des pages de base. Quand un lien…

Choisissez une stratégie de conception Web mobile

Votre approche de la conception d'un site Web mobile dépend de contenu de votre site, vos ressources et votre auditoire. Les conseils suivants peuvent vous aider à comprendre les stratégies possibles de conception Web mobile et en choisir un qui…

Choisir une stratégie pour votre conception de Web mobile

Les gens voient maintenant les pages Web sur tout, des écrans de téléphones portables minuscules projecteurs qui illuminent le côté d'une grange. Les contraintes que vous rencontrez dans la conception de Web mobile pour le petit écran de…

Optimisation de vos projets web mobiles pour l'iPhone

Oui, l'écran de l'iPhone est petit, mais il faut arrêter de penser à des contraintes et de commencer à se concentrer sur les nouvelles opportunités étonnantes iPhone offres de conception de sites Web - par exemple en attirant un public de…

IPhone & iPad conception de sites Web pour les nuls

Conception de sites Web mobile pour les nuls

Comme vous commencez à penser à la meilleure façon de concevoir la version mobile (ou versions) de votre site Web, examiner les défis uniques du Web mobile. Voici quelques considérations à garder à l'esprit que vous concevez des sites pour le…

godiches.com » Internet & médias sociaux » Web design & développement » Conception iPhone & iPad web » Comment les utilisateurs à naviguer dans un monde de l'écran tactile