web-dev-qa-db-fra.com

Comment les éléments de pied de page classiques peuvent-ils être intégrés dans une mise en page à défilement infini?

défilement infini est un moyen assez nouveau et efficace d'afficher des quantités pratiquement infinies de données dans la fenêtre d'un utilisateur, mais un élément de page ne convient tout simplement pas à cette méthode; le pied de page. Un pied de page sur une page à défilement infini n'a pas beaucoup de sens, car le pied de document est infiniment loin.

La solution classique et recommandée par UX Movement dans le lien ci-dessus est d'utiliser un bouton "plus", l'exemple qu'ils donnent semble être une ancienne mise en page Twitter.

enter image description here

Le problème avec cette solution est que ce n'est pas un défilement infini, c'est un clic infini, en fait seulement mieux que la pagination si vous avez l'intention de revenir en arrière dans le temps après avoir chargé un nouveau contenu. En dehors de cela, c'est essentiellement la même fonctionnalité que la pagination, sauf sans URL vers des pages spécifiques.

Twitter semble avoir abandonné Infinite Clicking pour un véritable Infinite Scrolling et déplacé leurs éléments de pied de page dans le bas de leur barre latérale: enter image description here

C'est une solution que je trouve assez élégante, mais qui a le problème d'être moins intuitive. Je sais que les informations sur les droits d'auteur, les mentions légales et à propos de nous sont presque toujours dans le pied de page, mais à la recherche de cette image, j'ai dû chercher un peu pour trouver où ils mettaient ces informations.

Facebook est dans un endroit particulièrement délicat dans le monde du défilement infini, car ils ont à la fois un pied de page et un défilement infini à chargement automatique. enter image description here

Encore une fois, ce n'est pas "vrai" Infinite Scrolling car tomber au bas de l'écran ne chargera automatiquement le contenu que trois fois (je crois), donc après 3 chargements, vous devez commencer à cliquer manuellement sur les "anciens messages", ce qui complique ce qui est censé être un moyen automatique de charger le contenu. Plus ennuyeux, ils ont un pied de page. Celui qui s'éloigne de vous à chaque fois que la page se recharge, donc pour obtenir cette capture d'écran, je dois Page Down trois fois pour voir le pied de page.

Je me demande quelle est la solution optimale pour le défilement infini et le maintien de ces éléments de "pied de page" dans une mise en page qui est largement incompatible avec un pied de page de document littéral. Facebook semble essayer d'avoir son pied de page et de le manger aussi, la solution de Twitter est élégante mais peut-être non intuitive, et la solution de bouton "Charger plus" perturbe le flux sans fond qui est tout l'intérêt d'Infinite Scrolling.

Y a-t-il d'autres solutions? La barre latérale de Twitter est-elle plus facile à trouver que je ne le pense?

17
Ben Brocka

Comme vous le dites, il s'agit d'un nouveau développement, donc je pense qu'il faudra un certain temps avant que les gens ne sachent vraiment comment le faire. Il y a deux réponses que je peux voir:

  1. Ayez un pied de page fixe permanent au bas de l'écran actuellement affiché, qui défile au fur et à mesure. Cependant, je pense qu'il doit y avoir des améliorations dans la technologie pour y arriver, car la plupart des barres d'outils flottantes ont l'air hideuses.

  2. N'ayez pas de pied de page, mettez toutes les informations requises dans l'en-tête. Peut-être comme menu déroulant d'en-tête. C'est un problème, et je suis tout à fait d'accord pour dire qu'essayer de l'échouer ensemble est médiocre - vous faites les choses correctement ou pas du tout. J'aurais tendance à adopter l'approche sans pied de page, sur les pages qui ont un défilement infini, mais avec d'autres pages plus informatives où les pieds de page peuvent être inclus.

10

Je pense que les pieds de page doivent être évités au bas du contenu défilant à l'infini, avec une mise en garde que j'irai en bas ...

L'utilisateur fait défiler vers le bas pour une raison - pour regarder plus de contenu. Les informations de pied de page continuent à entraver cet objectif principal.

Klout essaie de garder un pied de page sur toutes les pages - y compris sur les pages à défilement infini (comme les amis), où vous accédez au pied de page, seulement pour qu'il disparaisse après une seconde ou deux, pour être remplacé par le bloc de contenu suivant. C'est une mauvaise implémentation !

Options

Je considérerais les options suivantes afin

  1. Gardez les informations de pied de page disponibles sur d'autres pages qui ne sont pas à défilement infini, comme tumblr le fait (entre autres) - elles évitent le pied de page sur la page du tableau de bord de défilement mais l'incluent sur la page d'aide accessible à partir de la navigation supérieure .

  2. Donnez les liens en haut comme, et vous pouvez choisir de faire défiler la navigation vers le haut comme Flickriver , LookBook et CSSline ou rester statique comme LooksLikeGoodDesign , selon combien vous vous souciez du contenu de défilement principal encombré par les autres éléments de la page.

  3. S'il n'y a pas d'autres pages que celle qui défile, fournissez les informations de pied de page au bas de la colonne de contenu moins dynamique, de la même manière que Twitter.

Flickriver est mon préféré, et est agréable en ce qu'il donne un lien de retour en haut positionné statiquement en haut à gauche et un indicateur de progrès en bas à droite (ce qui pourrait être un endroit discret pour ranger un petit petit quantité d'informations sur le pied de page). Tumblr se fond également bien dans un bouton discret en haut à droite.

Combinant défilement infini et clic infini (scricking infini!)

Il existe une autre option - que vous combinez le défilement infini avec un clic infini comme le font les images Google. Par exemple, si vous recherchez un iPhone sur des images Google, vous obtenez peut-être 5 pages d'images avant d'obtenir le bouton Afficher plus de résultats . Si vous cliquez dessus, vous obtenez 5 autres pages de contenu déroulant.

C'est donc un compromis qui ne donne pas l'impression que vous cliquez pour obtenir chaque page . Chaque clic devrait vous renvoyer une quantité substantielle de contenu. L'interprétation du terme " substantiel " dépend du contexte. Vous devez faire attention à équilibrer la quantité de contenu supplémentaire livré avec la fréquence à laquelle l'utilisateur doit cliquer pour en obtenir plus. Cela dépend également du fait que votre contenu de défilement soit purement vertical (comme Twitter) ou horizontal comme CSSline et Google

Cela fonctionne sur Google, car l'utilisateur recherche quelque chose en particulier et s'arrêtera lorsqu'un résultat suffisamment bon aura été trouvé. Cela ne fonctionnerait pas sur Flickriver, car le fait est qu'il est censé se sentir comme un flux continu sans l'interruption d'avoir à cliquer. La méthode Google images permet un pied de page lorsque vous atteignez le bouton.

À la fin de l'infini

La mise en garde concernant les pieds de page sur les pages à défilement infini survient lorsque l'utilisateur apparaît sur une page à défilement infini et que la page se comporte comme si c'était infini - jusqu'à ce qu'il arrive à la fin . Peut-être que la page contient des centaines d'éléments - et l'utilisateur est immergé dans le contenu, en faisant défiler vers le bas et vers le bas - et puis soudainement rien. La page cesse de défiler car il n'y a plus de contenu. LookBook en est un exemple.

À ce stade, l'utilisateur se demande pourquoi aucun élément n'apparaît. Pensant que c'est peut-être cassé, l'utilisateur fait défiler un peu et vers le bas quelques fois pour essayer de le faire fonctionner à nouveau - presque comme s'il se faufilait au bas d'une barrière invisible en bas de la page.

Dans ce cas, quelque chose doit indiquer que c'est intentionnellement et clairement la fin du contenu, et le pied de page qui apparaîtrait servirait cet objectif, bien que, comme tout nombre de autres décorations de fin de contenu.

8
Roger Attrill

Ce n'est pas vraiment une réponse, donc je m'excuse à l'avance, mais puisque cela est un forum UX, je me sens obligé de dire quelque chose ici. Personnellement, je ne supporte pas le défilement infini, et je suis attristé par le fait qu'il devienne si tendance à utiliser en ce moment. Il draine souvent les ressources du navigateur - et peut-être plus important encore donne aux utilisateurs une fonctionnalité de type paginé sans la possibilité de se lier à une position spécifique.

Peut-être que c'est juste mon OCD qui entre en jeu, mais si je regarde une longue liste d'éléments de contenu, disons 8 écrans vers le bas dans la position de défilement infini, je ne peux pas envoyer cette vue à une autre personne (ou la mettre en signet, etc.). Le mieux que je puisse faire est d'envoyer l'URL d'origine et de dire à quelqu'un (ou à moi-même) qu'il s'agissait de 8 défilements infinis vers le bas. La pagination traditionnelle est ancienne et moins excitante, mais au moins j'ai un contexte où je suis dans une liste de résultats et je peux facilement y revenir.

1
snipe

Il y a une autre alternative que j'ai vue et je pense que c'est la solution parfaite sans rien perdre.

ajoutez simplement un bouton pour afficher le pied de page.

Comme ça enter image description here

une fois cliqué sur le bouton qui est placé en bas à droite extream montrer le pied de page enter image description here

Obtenez ici l'exemple de travail polyvore.com/dresses/shop?category_id=3

1
iliyas Safi