À propos des pages Web défilantes en plein écran
Il y a récemment de nombreux sites Web utilisant des pages de défilement en plein écran depuis Apple a lancé le leur avec l'iPhone 5C. (Le site Web n'est plus disponible, mais une reproduction peut être trouvée ici )
Voici quelques autres exemples:
- http://www.yourprimer.com/
- http://www.facebookgroups.com/
- http://snapzheimer.org/
- http://www.newjumoconcept.com/en/
- http://usescribe.com/
- http://manifeste.hermes.com/en_WW/
Existe-t-il une étude sur cette pratique du point de vue UX? Plus que sur le détournement de défilement, sur l'utilisation du contenu plein écran?
Il me semble que c'est un moyen facile de présenter des informations à l'utilisateur lorsqu'il est utilisé correctement et de manière simple, tout comme une bonne présentation Power Point. Une façon de montrer à l'utilisateur les choses les plus importantes d'une manière belle et intelligente.
Je vois de nombreux développeurs se plaindre aujourd'hui de ce type de sites, principalement à cause du highjack défilant, mais il me semble que les utilisateurs en général, ainsi que les clients, les aiment.
Des pensées à ce sujet?
L'attrait visuel de ces sites est indéniable. Cependant, ils ont de sérieux problèmes en termes de convivialité:
Tout contrôle est retiré à l'utilisateur. Tous ces sites forcent tout le monde à afficher une annonce brillante de plusieurs pages, qu'ils le veuillent ou non. Et si je veux juste acheter votre produit? Et si je veux obtenir rapidement vos coordonnées? Oublie ça. Ce sera très ennuyeux pour tous ceux qui ne sont pas séduits par votre conception.
Densité d'information extrêmement faible. Un bon site offrirait toutes les informations clés en un coup d'œil, ou au moins en un clic. Ces sites étalent une page d'informations sur plusieurs pages. Ai-je vraiment besoin d'un écran entier pour me dire une phrase de 10 mots?
Où suis-je? Il n'y a généralement aucun moyen de naviguer vers ce que vous voulez, et même aucun moyen de voir où vous en êtes par rapport à d'autres contenus. Tant que l'utilisateur parcourt votre site en ligne droite, cela fonctionne bien. Mais tout ce qui n'est pas linéaire devient un vrai gâchis. Sur le exemple du nouveau concept JUMO ci-dessus, lorsque vous cliquez sur l'une des lampes spécifiques, puis cliquez sur la lampe elle-même, il n'est pas clair où vous vous êtes retrouvé par rapport à la structure du site. Vous n'avez qu'à faire défiler jusqu'à ce que vous preniez vos repères.
Paradigme de navigation inconnu. Plusieurs de ces sites proposent une instruction de défilement sur la première page. Si un utilisateur présenté à votre site ne peut pas comprendre la navigation la plus élémentaire sans instructions, n'est-ce pas un signe d'échec UX complet?
Pas de repli si le site ne tient pas sur un écran . Vous devez être sûr à 100% que votre conception fonctionnera sur n'importe quel écran, car si ce n'est pas le cas, l'utilisateur n'a absolument aucun moyen de faire défiler et de voir le contenu. Plusieurs de ces sites se cassent si vous rendez la fenêtre plus petite.
Personnellement, je resterais à l'écart de cette conception. Il est boiteux en termes de convivialité. Cela a l'air cool s'il est bien fait, mais une grande partie de cela est la nouveauté - qui va disparaître rapidement.
Mise à jour: il y a un certain recul de certaines personnes sur cette réponse. Ces pages peuvent sembler impressionnantes (comme je l'ai mentionné), et elles peuvent être correctes dans certains cas. Mais je pense que les concepteurs risquent de surestimer l'importance d'un beau design et de sous-estimer l'importance d'une page Web fonctionnelle.
En outre, "vous pouvez avoir la navigation avec cette conception" semble être l'une des principales objections. Cela aide un peu - mais aucun des exemples donnés n'a une navigation aussi bonne qu'un site Web normal. Les petits points sur le côté droit comptent à peine comme navigation. La conception du menu supérieur est meilleure, mais encore loin d'être idéale. Sur le site MediaFire , vous pouvez cliquer sur des choses peu intuitives comme "Trusted" pour voir une page sans contenu. Vous devez cliquer sur "Plus" puis aller au bas de la page pour toute information réelle sur l'entreprise, le support, etc. Sur le site du tapis , il n'est pas clair où vous êtes, et cela devient déroutant si vous faites quelque chose de non linéaire. Il est peut-être possible de mieux faire la navigation, mais j'aimerais au moins voir un exemple où cela se fait bien.
Cette conception perd toute nouveauté instantané vous réalisez que c'est un diaporama.
Cependant, en tant que diaporama, il gagne dans ces domaines:
- avoir une seule direction pour glisser/faire défiler permet de comprendre plus facilement "où dois-je aller d'ici" que quelque chose comme Prezi (où la direction "suivante" peut être n'importe où, même dans/hors de la page)
- une transition en douceur d'une page à la suivante permet aux personnes qui consultent (mais ne contrôlent pas le défilement) de voir dans quelle direction les choses vont
- les animations et les bruits désagréables, qui sont si faciles à abuser dans PowerPoint, sont légèrement plus difficiles à construire dans jQuery ou JavaScript, résultant en une qualité de présentation moyenne plus élevée
- les indicateurs de progression visuels (par exemple, des points sur le côté dans l'annonce Mac Pro) peuvent aider à la lisibilité, et pour une raison quelconque, ils sont généralement absents des diaporamas.
Mais, en diaporama, on perd dans ces domaines:
- paradigme de contrôle inconnu
- vous arrivez sur une page peut-être pas en attendant un diaporama, et partez sans en faire l'expérience simplement parce que vous n'avez pas fait défiler
- coller un message "faites défiler pour voir plus" sur votre page d'accueil est amateur, et est entièrement dû aux deux points ci-dessus
dan1111 a souligné des problèmes potentiels avec cette conception, mais je pense que c'est une idée assez robuste si elle est exécutée correctement.
Un exemple de cas est le site Web d'introduction de Mac Pro . Cela a suscité beaucoup d'attention lors de sa sortie, offrant un bon moyen d'initier les utilisateurs au nouveau produit.
Ce qu'ils ont bien fait:
1. Il a fière allure
Support noir, style de police et choix de couleurs appropriés, bons graphiques, etc.
2. Il a une navigation
Des points sur le côté, en survolant, montrent le titre de cette page. Cela permet à l'utilisateur de contrôler rapidement où il veut. Légèrement plus lent que d'avoir du texte toujours visible, mais plus élégant. Votre position dans la navigation est également visible par le point rempli.
3. Les vues ont un contenu riche
Centré sur un graphique, fournit des spécifications assez détaillées et certaines pièces sont mises en évidence avec des graphiques sur le côté. Chaque page a beaucoup à lire, donc le temps consacré à l'animation est proportionnellement faible. Seules les vues d'E/S à la fin se rapprochent du point "OK, continuez avec le spectacle".
4. Conception "réactive"
Ça a l'air bien sur mon écran HD, mon écran MacBook Pro et sur mon petit écran iPhone 4S. Ça n'a pas l'air bien si je fais quelque chose de bizarre - Chrome truquage de l'agent utilisateur, fenêtre très mince sur le bureau, etc. Je ne sais pas comment ils le font, apparemment l'agent utilisateur renifle, mais cela fonctionne - la page ne semble pas interrompue pour les utilisateurs moyens.
5. Page alternative
La page specs offre une alternative efficace aux utilisateurs. Probablement pour ceux qui ont un ancien navigateur ou pour les personnes qui l'ont déjà vu et qui ne souhaitent qu'une partie des informations.
Cela satisfait la plupart des plaintes, à l'exception de la "inconnue". Je ne pense pas que les inconnus soient un problème, car la technologie et la société évoluent inévitablement vers des endroits inconnus. Il suffit d'éduquer les utilisateurs, par exemple msgstr "faites défiler vers le bas ou appuyez sur les flèches pour continuer".
Je pense que cette conception est une expérience décente pour les utilisateurs, elle ne doit être utilisée que là où elle convient, et elle doit bien sûr être bien exécutée, comme décrit ci-dessus.
Ces applications d'une seule page étaient à la mode, ce qui a ouvert la voie à quelques cadres avec lesquels une vue similaire peut être obtenue de manière meilleure.
Le fait est que l'utilisateur doit utiliser un tas de défilement soit pour aller en haut (à moins que le lien vers le haut ne soit fourni) ou pour faire défiler vers le bas et ils pourraient être ignorants de la catégorie qu'ils traversent, sauf pour dire 'à propos de la produit/page ".
Pour surmonter cela, nous pouvons fournir une navigation à gauche ou en haut qui aidera l'utilisateur à naviguer dans la page mais à travers les catégories de contenu affichées comme this
Je voulais poster ceci comme un commentaire sur la réponse d'Andrewb, mais j'ai manqué de place.
andrewb a donné un certain nombre de bons points sur ces sites Web.
Le problème est que TOUS ces bons points peuvent être appliqués à une page de défilement non plein écran SANS les inconvénients signalés par dan1111, et souvent même mieux.
Une page défilante vous permet de contrôler précisément ce qu'un utilisateur voit et quand il le voit, ce qui est en fait similaire à une présentation ou une vidéo. Cela signifie que c'est génial lorsque votre site Web a un flux que vous souhaitez que l'utilisateur suive. Une page de défilement doit être utilisée lorsque vous souhaitez contrôler ce que voit l'utilisateur, comme sur une annonce de produit (comme Ubisoft l'a fait pour Assassin's Creed: Unity sur http://assassinscreed.ubi.com/en-us/ games/assassins-creed-Unity.aspx (cliquez sur les boutons "plus d'infos" pour les pages plein écran), ou Apple pour l'iPhone 5C).
Le fait est que vous ne voulez pas que cette page soit le seul moyen pour l'utilisateur d'accéder à ces informations, même s'il peut les obtenir via des tiers. L'utilisateur n'est peut-être pas sur un appareil qui prend en charge les fonctionnalités que vous souhaitez afficher. Ou il recherche un factoïde spécifique à propos de votre produit et n'est pas intéressé par tous les 643 autres factoïdes qui le précèdent dans votre présentation oh-so-beautiful mais oh-so-slow. Ou il n'a pas le temps de parcourir toute votre cérémonie. Vous devez donner à ces utilisateurs la possibilité de parcourir votre site Web sans tout cet embellissement supplémentaire.
Le démo Apple me montre trois téléphones et demi , rien d'autre. Je ne peux même pas faire défiler la page.
Maintenant, vous pourriez m'appeler un cas spécial parce que j'utilise un moniteur portrait et utilise Vimperator au lieu d'une souris. Mais je connais pas mal d'utilisateurs qui utilisent des lecteurs d'écran et d'autres périphériques d'entrée et de sortie non conventionnels.
Si vous pouvez supposer que 100% des utilisateurs utilisent un écran conventionnel, un paysage orienté et utilisent la souris, alors vous pouvez utiliser une telle page astuce. Sinon, non. Un nombre suffisant de personnes ne pourront pas utiliser votre page Web.