Je conçois une application de gamefication et je dois montrer un classement général, affichant tous les utilisateurs avec des points et des positions ...
Le problème est que le classement nécessite une pagination et que l'utilisateur connecté peut apparaître sur la deuxième ou la troisième page. Je dois trouver une solution pour montrer à un utilisateur connecté sa position actuelle.
Considérez la capture d'écran suivante: disons que l'utilisateur actuellement connecté est 50e. Comment afficher sa position sans le forcer à paginer?
J'aime bien l'approche du jeu Wordament:
Vous pouvez voir les meilleurs résultats, ainsi que ceux proches de votre classement. Je préférerais que cela garantisse que votre score soit à l'écran au départ, probablement en réduisant le nombre de joueurs avant le "split" et même juste au-dessus de votre propre score.
Je voudrais montrer une barre ombrée/colorée avec l'utilisateur au-dessus de la première personne dans la liste, puis montrer la liste standard avec eux dans n'importe quelle position dans laquelle ils se trouvent.
C'est ce que StackExchange a fait pour le spécial Winter Bash, et cela a très bien fonctionné.
Il se trouve que je suis au sommet, donc vous me voyez deux fois, mais je serais au sommet même si j'étais dans la position de Benny.
Lorsque Benny est connecté, sa vue ressemble à ceci:
Vous pouvez essayer une approche centrée sur l'utilisateur où l'utilisateur connecté voit sa position en plein milieu de la page, entouré par les 10 personnes en haut et 10 en dessous. cliquez, ou idéalement faites défiler pour voir la liste complète en commençant par le haut.
Une autre chose que j'ai bien vue est de les montrer dans leur position réelle s'ils se trouvent sur la page ou de les afficher sous forme de ligne en surbrillance en haut ou en bas selon qu'ils sont en avant ou en arrière par rapport à la position actuelle du pager. Cela donne un peu mieux une idée de l'endroit où ils se trouvent.
Vous pourriez avoir un panneau "sauter" à côté de la liste principale.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups