web-dev-qa-db-fra.com

Comment indiquer que le conteneur peut défiler sans barres de défilement

Dans Android j'essaie de trouver un moyen d'indiquer à l'utilisateur qu'un conteneur peut défiler. Je ne suis pas un fan des barres de défilement et je les désactive généralement pour tous les conteneurs, mais permettrait à l'Edge fading d'indiquer qu'un conteneur pouvait défiler. Dans Android 4.0 et au-delà cependant, l'Edge fading n'existe plus.

Quelle serait une autre façon d'indiquer à un utilisateur qu'un conteneur peut défiler sans utiliser de barres de défilement et sans la possibilité d'utiliser un bord de fondu?

J'ai essayé d'utiliser des flèches, mais cela n'avait pas beaucoup de sens du point de vue de l'utilisateur et un gradient dans la direction de défilement n'a pas exactement sauté car cela signifiait que quelque chose pouvait défiler pour moi. J'ai également essayé d'avoir un peu de contenu affiché au bord d'un conteneur défilant pour indiquer qu'il y avait plus d'informations, mais il n'est pas très fiable que quelque chose surplombe les différentes tailles d'écran et la quantité de contenu par conteneur.

Voici un exemple de ce que j'essaie d'indiquer.
Example content

Dans cette grille 3x4, comment pouvez-vous indiquer à l'utilisateur que le conteneur peut défiler au-delà des 12 éléments qui sont à l'écran? Dans certaines situations, il y aura un excédent de contenu, mais c'est la situation que j'essaie de prendre en compte.

De plus, la grille n'est qu'un exemple. Mon contenu est une seule rangée d'icônes à défilement horizontal.

25
Michael Celey

Plusieurs idées:

  1. Vous avez dit que la décoloration d'Edge n'était pas disponible. Je suppose que s'il était disponible, vous l'auriez utilisé. Pourquoi ne pas implémenter vous-même un Edge décoloré? Cela ne devrait pas être trop difficile à mettre en œuvre, il suffit de dessiner un masque de dégradé dans un calque sur votre contenu. Si vous étendez la classe de conteneur déroulant par défaut (ScrollView), vous pouvez y ajouter cette fonctionnalité et rendre le code réutilisable et facilement enfichable.

  2. Clignotant les barres de défilement. Je déteste également les barres de défilement et je préfère généralement qu'elles n'apparaissent que lorsque vous faites glisser le défilement, puis je les fais disparaître dès que le doigt se soulève de l'écran tactile. Le clignotement des barres de défilement les montrera pendant environ une seconde, puis les fera disparaître. Si vous flashez les barres de défilement une fois dès que la fenêtre apparaît (sans que l'utilisateur défile d'abord), cela pourrait signaler à l'utilisateur qu'il devrait y avoir une barre de défilement ici. Étant donné que les barres de défilement se masquent automatiquement après une seconde environ, vous ne les encombrerez pas.

  3. Superposition rectangulaire au bas de votre ScrollView. C'est très similaire à # 1, mais au lieu d'ajouter un effet de fondu par vous-même, vous pouvez ajouter une superposition rectangulaire. Cette superposition apparaîtra dans un rectangle étroit adjacent à la bordure inférieure de la vue. La superposition peut porter une sorte de message - d'une chaîne complète (comme "faites défiler pour voir plus" ou simplement "plus") à un symbole (comme "..."). Dès que quelqu'un commence à faire défiler, la superposition disparaîtra. Lorsque le défilement s'arrête, vous pouvez faire remonter la superposition si elle est pertinente, ou peut-être pas, car l'utilisateur comprend évidemment que cela peut défiler. Je voudrais également implémenter cela comme une extension de ScrollView.

  4. Info-bulles. Personnellement, je déteste cette approche car je pense qu'elle encombre l'écran. Mais, vous pouvez utiliser une info-bulle (info-bulle rectangulaire ou rectangulaire avec une pointe de flèche) qui indique que le contenu peut défiler et l'épingler au bas de votre vue. Si vous faites défiler, vous atténuerez l'infobulle. C'est probablement une bonne idée de garder l'info-bulle cachée pour le reste de l'utilisation de l'application, car l'utilisateur comprend évidemment que le contenu peut défiler.

  5. Défilement automatique. Un peu bizarre, mais pourrait être une fonctionnalité accrocheuse pour certaines applications .. Vous pouvez faire défiler le contenu de lui-même très très lentement après quelques secondes. Il n'a pas besoin de défiler jusqu'en bas. Si l'utilisateur touche le contenu, le défilement automatique doit immédiatement s'arrêter. Vous pouvez également choisir d'arrêter complètement le défilement automatique une fois que l'utilisateur l'a arrêté une fois.

Il s'agit en effet d'un problème très difficile sans une bonne solution. Pour être franc, même l'effet de fondu n'est pas une très bonne solution. Tous les utilisateurs ne le comprennent pas .. assez évident depuis que Google l'a supprimé de Android 4. Le laisser tel quel, sans aucune notification ni indication est assez courant ... Cliquez sur le logo "StackExchange" sur en haut à gauche de cette page, il ouvre une fenêtre contextuelle avec une liste de questions chaudes, non? Sur mon ordinateur, je ne vois aucune indication que cette liste est défilable ...

21
talkol

Semblable à l'idée de défilement automatique de talkol ... vous pouvez faire démarrer la page quelque part plus bas dans votre liste (peut-être en bas, peut-être quelques éléments plus bas), puis faire défiler très rapidement vers le haut. Cela donne un aperçu rapide de tout le contenu, montre à l'utilisateur que la liste peut défiler et peut être utilisée comme animation pendant le chargement du contenu.

5
Luke

Je ne sais pas à quoi ressemble votre contenu, mais j'aime vraiment ce processus d'interaction sur Android Patterns .

screenshot

Pour citer ce que le site a à dire:

  1. L'utilisateur visualise un élément
  2. L'utilisateur glisse vers la gauche/droite
  3. L'article suivant est affiché
  4. Les indicateurs de page sont mis à jour pour montrer le nouvel état.

Outre les exemples d'actualités CNN ou BBC donnés sur le site, News 360 utilise également la même mise en page.

Edit: Vous avez dit que vous vouliez que le contenu défile. Êtes-vous d'accord pour pouvoir faire défiler vers le haut ou vers le bas pour afficher plus de contenu? Si tel est le cas, vous pouvez restreindre le défilement vers le haut/bas comme indiqué ci-dessous.

Google+ HangoutInstagram

4
Mervin

Un modèle courant consiste à afficher le bit de contenu suivant dans la zone de défilement comme à moitié coupé. Cela ennuie les gens de ne voir que la moitié et ils défilent donc pour le voir.

4
R Reveley

Une alternative à l'affichage d'une barre de défilement consiste à afficher un autre indicateur d'écran de contenu. Ci-dessous, cette application indique qu'il y a plus de contenu grâce aux petits points, représentant la pagination.

ABC iView app

(Ils utilisent également l'astuce de contenu partiel, et de manière délibérée - cette application est sur l'iPad et ils connaissent bien la taille de la fenêtre d'affichage de l'appareil.)

3
Erics

Une autre option consiste à afficher partiellement en bas du contenu. Autrement dit, utilisez une partie de l'espace vertical pour "taquiner" ce que l'utilisateur manque, disparaissant en haut, puis disparaissant en bas de tout ce qui est visible. (Peut-être en ajoutant "..." entre les deux?)

Ce n'est peut-être pas la meilleure approche pour un contenu de plus de deux écrans, mais si le contenu ne correspond pas tout à fait à l'écran (en particulier sur un téléphone plus petit), cela fonctionne bien d'avoir un clic sur cette zone inférieure pour faire défiler jusqu'au bas. (Montrez à l'utilisateur ce sur quoi il a cliqué.)


Pour un contenu plus grand, peut-être ne rangée de vignettes en bas, avec une indication de l'endroit où vous vous trouvez. Pensez "nettoyage vidéo", où l'on peut vous montrer quelques images clés de la vidéo, mais vous pouvez rapidement passer à n'importe quelle image (pas seulement celles affichées sous forme de miniatures). Utilisez-le comme un endroit compact pour "frotter" rapidement sur toute la hauteur du contenu.

0
ToolmakerSteve