Quelles sont les meilleures pratiques pour les onglets côté serveur?
Mon client souhaite utiliser les onglets côté serveur comme décrit ici et trouvé ici et ici .
J'ai lu les 13 Tab Guidelines Guidelines et nous sommes principalement sur la bonne voie.
Pour le temps de réponse rapide n ° 13: nous n'allons pas atteindre l'objectif de moins de 0,1 s. Il s'agit d'un inconvénient évident des onglets côté serveur. Je pense que nous regardons 1.0 - 1.5 secondes pour charger la page de l'onglet suivant.
Pour # 10 One Row: Nous sommes proches mais je crains que nous ne dépassions de temps en temps 3 ou 4 onglets. Je vais lancer l'idée "plus" que j'ai vue dans quelques réponses sur ce site ( ici et ici ) si nous le faisons.
J'achète d'autres directives d'utilisation qui sont spécifiques aux onglets côté serveur , comme:
- Gardez les onglets au-dessus du pli en vous assurant que le contenu répété au-dessus des onglets est court et doux
Mélangez l'onglet actif vers la position la plus à gauche lorsqu'il était la première page demandée dans le groupe d'onglets (ouvert au débat)
Quelles sont vos meilleures pratiques pour les onglets côté serveur?
Note latérale: Je ne suis pas ravi de cela. Je suis d'accord avec l'utilisation des onglets côté serveur comme navigation la plus élevée, mais pas si loin dans une page parce que l'expérience peut vous faire remonter en haut d'une nouvelle page (faites défiler un peu vers le bas sur le site de référence avant de cliquer sur un onglet , ou essayez-le dans un navigateur mobile où les onglets commencent sous le pli puis faites défiler vers le bas pour cliquer sur un onglet et retrouvez-vous en haut sans onglets sur le site). Je pense que j'ai formé une attente pour quelque chose comme jQuery UI Tabs quand je vois un widget d'onglets au bas d'une page. Mais j'ai perdu ce débat et nous allons de l'avant avec les onglets côté serveur.
Justification du client (question posée dans les commentaires) ...
Pourquoi des onglets? Les onglets ici servent de 3ème niveau de navigation pour les autres pages qui parlent du même produit. Dans la navigation supérieure, ils peuvent choisir des produits ou un produit spécifique dans le menu déroulant, la navigation latérale leur permet également de choisir un produit spécifique et correspond au menu déroulant, il y a une courte introduction du produit, puis les onglets vous amènent aux pages spécifiques qui parlent sur les différents aspects de ce produit. Dans la conception précédente, ces pages étaient un deuxième niveau dans la navigation latérale et un troisième niveau dans les menus déroulants - les deux semblaient maladroits. L'ancienne conception faisait un usage intensif des pages de présentation qui introduisaient simplement les autres pages - nous voulons arriver à la viande du contenu plus rapidement.
Pourquoi du contenu au-dessus des onglets? Parce que vous pouvez entrer la section sur l'un des onglets, ils méritent chacun une courte introduction et une capture d'écran. Le contenu au-dessus des onglets est identique pour chaque page de la section, car c'est ce dont les onglets ont besoin. Une chose que j'aime dans cette conception est que le h1 est toujours le nom du produit plutôt que quelque chose de générique comme des "fonctionnalités" qui sonne et ressemble mieux à un nom d'onglet.
Pourquoi les onglets côté serveur au lieu des onglets côté client? Les pages existent déjà et nous voulons encourager les étrangers (blogs, moteurs de recherche, etc.) à créer un lien direct vers l'un d'entre eux. Il existe déjà de nombreux liens directs depuis notre propre site et d'autres sites. J'ai proposé des solutions concernant la liaison directe à l'aide de balises de hachage pour ouvrir un onglet spécifique et rediriger les anciennes pages, mais cela est considéré comme trop risqué à ce stade. Peut-être un jour sur la route.
Avis de non-responsabilité: je ne suis qu'un développeur qui se mêle de la sagesse UX qui flottent occasionnellement vers moi - je n'ai jamais effectué mes propres tests utilisateur, donc je ne me compterai pas (encore) dans vos rangs. J'espère juste avoir de bons conseils pour aider mon équipe à réussir. Merci d'avance!
Tout d'abord, la solution est généralement bien, mais 1 seconde est trop.
Avoir du contenu au-dessus des onglets est également bien tant qu'il est court (disons, une image du produit et au plus 5 lignes de description du produit)
La solution technique serait d'utiliser des onglets côté client avec pushState . De cette façon, les onglets ressemblent au côté serveur mais agissent à la place comme côté client. Vous pouvez avoir des méthodes de secours, également pour les moteurs de recherche, mais généralement vous pouvez bien les résoudre avec les clients . ( Voir aussi ce SO sujet sur les moteurs de recherche vs pushState )
Si vous continuez sur la route côté serveur, pensez à utiliser conforme ESI serveurs/caches proxy, ou remplissez quelques caches après la première demande afin que le changement d'onglet ne soit pas aussi lent.
En général, effectuez toujours des tests utilisateur et surveillez les temps de chargement des pages. Si vous exécutez une sorte d'analyse, saisissez les tailles de fenêtre et assurez-vous que les onglets seront visibles pour 98% ou plus de vos visiteurs.
Ne laissez pas plusieurs niveaux d'onglets se produire. Je suis presque sûr qu'il existe une solution pour cela, vous semblez avoir de nombreux onglets.