La conception du contenu de l'index mobile premier

A+ A-

Avouons-le: Vous n'êtes pas un auteur littéraire, et les gens ne sont pas accrochés à chaque mot que vous écrivez. Ne vous méprenez pas, il est bon d'avoir des informations complètes sur une page Web, mais les utilisateurs ne veulent pas faire défiler à jamais - en particulier sur mobile.

Contenu des besoins mobiles pour le rendre plus facile pour les utilisateurs d'obtenir les principaux points sans découper le contenu, car les utilisateurs pourraient vouloir creuser dans les détails plus parfois. Plus que jamais, la structure de votre contenu est important, et votre contenu doit être navigable, et digeste à écumer.

Table des matières

Une table des matières est une excellente façon de montrer comment vous avez organisé votre contenu, et combiné avec les signets HTML, il permet aux utilisateurs de passer rapidement aux sections d'une page qui peuvent les intéresser. Par exemple, ma table des matières pour cet article serait:

Table des matières
rubriques HTML
contenu extensible
Les onglets
filtres
Résumé, faits saillants, TL; DR
Bullet points ou listes
Le texte en gras ou en italique
Mettre en évidence les points importants
Qu'en est-il de bureau?

L'une de mes réalisations préférées de c'est la documentation de Google Developer, où vous avez le droit de navigation sous le titre et peut accéder rapidement à ce que la section dont vous avez besoin. Ils ont même fait expansibles il ne submerge pas un utilisateur immédiatement.

Table des matières

rubriques HTML

rubriques HTML, ou balises de titre, vous aider à organiser votre contenu en sections, structurer votre page d'une manière logique avec h1 - h6. Les sous-titres d'actualité de cet article sont enveloppés dans des balises h2, alors que le titre de l'article lui-même est enveloppé dans une balise h1. Les balises de titre font le contenu facilement et sont à écumer de bonnes cibles pour les liens d'ancrage dans une table des matières.

contenu extensible

des zones de contenu extensible (également appelés « accordéons ») sont généralement utilisés pour plus de détails ou sections de la FAQ. Ils sont une excellente façon de garder une page plus courte et plus facile à naviguer, tout en permettant l'accès à des informations importantes. Google Trends Webmaster analyste Gary Illyes a déclaré que le contenu caché pour des raisons UX sera donné son poids dans l'indice mobile en premier lieu, alors que l'indice de bureau escompte légèrement ce contenu caché.

Voyez comment Lowe fait avec la description du produit, spécifications, commentaires, Q & A et de la documentation tout ce qu'il ya sur une page - mais il est pas écrasante, même à un utilisateur mobile. S'ils avaient tout ce contenu élargi par défaut, je serais fatigué de défilement avant que je suis arrivé au bas de la page.

contenu extensible

Les onglets

le contenu est utilisé moins tabulé sur mobile en raison des contraintes d'espace, mais il est une alternative au contenu extensible. Il sert le même but, qui est de cacher le contenu qui ne peut pas être nécessaire tout de suite. Voyez comment Staples vous permet de voir la description, spécifications et commentaires tout en gardant le contenu sur une seule page.

contenu tabulé

filtres

Les filtres sont un moyen facile de découper une grande partie du contenu qu'un utilisateur peut ne pas être intéressé par. En leur donnant la possibilité de ne voir que ce qu'ils veulent voir, vous font qu'il est plus facile de trouver les informations qu'ils recherchent sans en passant par toutes les cochonneries pour y arriver. L'une de mes réalisations préférées de c'est visuellement les facteurs de classement de Google Northcutt.

filtres pour le contenu

Résumé, faits saillants, TL; DR

Ne pas avoir le temps de lire une histoire? Que diriez-vous juste prendre dans les principaux points de l'article rapidement? Cela aide sur le pouce lecteurs mobiles digèrent rapidement votre contenu et déterminer s'ils veulent en savoir plus en profondeur. Je vois souvent ce fait sur des nouvelles, des sites financiers et sportifs, où les informations les plus importantes peuvent se résumer en quelques points. Voici un de CNBC:

Sommaire du contenu

Bullet points ou listes

Bullet points et les listes sont une excellente façon de transmettre une grande quantité d'informations rapidement.

  • Le point 1
  • point 2
  • Le point 3
  1. Liste 1 article
  2. Liste 2 article
  3. Liste 3 article

Le texte en gras ou en italique

Le texte en gras attire l'attention - et le fait que le texte en italique. Le texte en gras peut aussi être un excellent ajout à une liste pour les principaux éléments ou points ressortent encore plus.

Mettre en évidence les points importants

Pull citations, citations de blocs ou des moments tweetable sont faciles pour les lecteurs à reconnaître et à leur dire que vous trouverez ces informations suffisamment importantes pour faire ressortir. Les statistiques fonctionnent très bien dans ces formats.

90 pour cent des personnes qui ont rendu jusqu'ici liront probablement ce pullquote.

Qu'en est-il de bureau?

Je me suis concentré sur la conception pour mobile, mais beaucoup des mêmes pratiques sont bonnes pour le bureau aussi bien. L'un des meilleurs exemples est, encore une fois, les développeurs Google, où la table des matières est en fait une barre latérale collante qui suit avec vous et vous permet de naviguer rapidement entre les sections.

Contenu de bureau

Je vais ajouter une mise en garde, en particulier pour le contenu qui peut être masquée par défaut avec CSS ou JS. Assurez-vous que tout le contenu est chargé dans le DOM. Si vous devez prendre une action avant que le contenu est chargé dans le DOM, Google ne sera pas le voir. Chargé par défaut, puis caché est correct, cependant.

Il est maintenant temps de penser à vos lecteurs mobiles et la façon dont ils consomment votre contenu. Faire aussi facile que vous le pouvez pour eux de trouver les informations qu'ils recherchent, et ils vous remercieront en continuant à venir à votre site Web et faire des affaires avec vous.


Les opinions exprimées dans cet article sont celles de l'auteur invité et pas nécessairement Search Engine Land. Auteurs du personnel sont listés ici.