web-dev-qa-db-fra.com

Concevoir pour l'iPad

J'aimerais rendre mon site accessible aux personnes qui ont les iPad ou autres iOS appareils.

Quelles considérations dois-je prendre en compte lors de la conception d'une interface utilisateur compatible avec l'iPad ou iOS en général?

15
George Stocker

Découvrez les réflexions de Jakon Nielsen sur la question . La vidéo liée en bas ne dure que 3 minutes et est intéressante, sinon directement utile.

Réflexions générales (pas de faits à l'appui autres que l'expérience personnelle):

  • Si vous devez vous rabattre sur un design pour une autre plateforme, retombez sur les designs PC, PAS sur les designs iPod. Si vous pouvez mettre la main sur un iPad (bientôt), essayez de parcourir Amazon.com par défaut sur iPad. Il revient à l'interface utilisateur par défaut de l'iPod Touch/iPhone, qui a des boutons de remplissage horizontal avec du texte à l'extrême droite et est fondamentalement inutilisable.
  • Il est plus facile de voir de petites choses que de cliquer dessus. D'après ma propre expérience, la plupart des textes lisibles ne sont pas cliquables, et j'ai souvent besoin de zoomer sur des liens (c'est-à-dire sur Wikipedia).
  • Testez vos créations à la fois en portrait et en paysage!
  • Le déplacement de vos mains nécessite un peu plus d'énergie physique (et est moins précis) que le déplacement de votre souris.
  • L'utilisation de plusieurs onglets est plus difficile qu'avec un PC (mais probablement plus facile qu'avec un iPhone). Les liens qui éloignent l'utilisateur du site le feront probablement; ne vous attendez pas à ce qu'ils reviennent de sitôt.
  • Les tapotements accidentels sont plus courants que les clics accidentels.
  • Taper (même pour la recherche) est plus difficile qu'avec un clavier.
  • Les vidéos YouTube intégrées fonctionnent.
  • N'oubliez pas la base d'utilisateurs qui achète des iPads et concevez pour eux.
  • Mise à jour: Il existe d'autres navigateurs Web. 95% des utilisateurs utilisent probablement Mobile Safari, mais cela pourrait valoir la peine d'être testé dans quelques autres. Par exemple, je viens de découvrir que les sites Stack Exchange ne fonctionnent pas (ne peuvent pas publier de questions) dans Atomic Web Browser .

Bonne chance!

14
Robert Fraser

Cela s'applique davantage à votre question générale sur l'interface utilisateur:

Pensez "touchez, ne cliquez pas". Comment utiliseriez-vous (ou vos clients potentiels) l'application avec leurs mains? Il y a une différence fondamentale entre pointer quelque chose avec une souris et pointer quelque chose avec votre main. Peut-être faire les contrôles les plus importants sur le côté pour que les gens puissent les atteindre facilement? Expérimentez avec différents cadres métalliques et demandez aux gens d'évaluer la facilité d'utilisation. Les tests utilisateur au début du processus peuvent grandement aider à affiner votre conception.

8
Scott M.

J'ai écrit un blog sur les choses à surveiller lors de la conception de sites optimisés/prêts pour l'iPad. Vous pouvez peut-être le trouver utile.

3
Jin

L'iPad a été conçu pour naviguer sur le Web. Le grand écran permet de visualiser toute la largeur de la page Web. Ainsi, la conception de la page Web devrait convenir à un iPad.

Pour l'iPhone, l'iPod Touch, vous pouvez envisager de créer un design différent, en créant une interface utilisateur similaire aux applications iPhone natives. Il existe des outils que vous pouvez utiliser pour rendre cela possible, mais ce sera beaucoup de travail. Découvrez Sencha Touch , qui peut également être utilisé pour les iPads.

Si vous ne souhaitez pas utiliser quelque chose comme Sencha Touch, vous devez également tenir compte du fait que l'interaction utilisateur est très différente avec ces appareils. Ils sont basés sur le toucher et non sur la souris. Par exemple, les effets de survol ne fonctionneront pas avec un appareil tactile. Les clics de souris sont également différents de l'inaction du robinet que le navigateur sur iOS capture. Cela signifie que vous pouvez améliorer l'interaction utilisateur, en personnalisant le JavaScript que vous utilisez pour iOS pour le rendre plus natif et intuitif.

Apple a également créé un Human Interface Guide pour leurs applications natives sur iOS. Ce serait une bonne idée de regarder à travers cela, car c'est ce que les utilisateurs attendront des applications natives. Le fait de disposer de pages Web conformes à ces règles les aidera à comprendre votre site.

3
googletorp

N'oubliez pas la taille de l'écran et les différentes dispositions possibles: disposition CSS iPad avec modes d'orientation paysage/portrait

2
Kostya

Deux autres problèmes que je voulais ajouter, en particulier concernant l'adaptation d'un site ou d'une application existante plutôt que la conception d'un nouveau - ceux-ci peuvent sembler triviaux, mais quand même:

  • Assurez-vous que votre site ou votre application ne répond pas en survolant les actions (comme les info-bulles)
  • N'oubliez pas qu'il n'y a pas de clic droit (moins courant sur le Web, mais parfois trouvé dans les applications Web)
1
Dan Barak

Les éléments doivent être plus gros que sur une application de bureau, car le doigt est moins précis que la souris.

Après avoir utilisé certaines applications graphiques récemment, j'ai vu qu'il peut être très difficile de placer des objets avec précision avec vos doigts car ils obscurcissent l'objet que vous déplacez. Une façon de résoudre ce problème, qui semble être Apple l'a fait, c'est de ne commencer à bouger qu'après avoir déplacé le doigt, il n'est donc plus au-dessus de l'objet que vous déplacez.

La sélection multiple est très gênante pour le moment. Je n'aime pas l'approche Apple d'appuyer sur un objet avec un doigt et d'appuyer sur plusieurs objets avec l'autre pour créer une sélection multiple. Elle s'effondre lorsque vous avez besoin de plus de 4-5 objets. Faites glisser la sélection pourrait mieux fonctionner. Par exemple, tabulez d'abord un outil de sélection, puis faites glisser la sélection de plusieurs objets.

1
Erik Engheim