Il est temps de plonger dans la zone Snippets! Autrement dit, la zone de contenu réelle de celui-ci. Nous avons déjà l'en-tête en place. La zone des extraits est assez populaire. Sans me plonger dans l'analyse, je sais en regardant les médias sociaux et en écoutant les gens dans la vraie vie qu'ils trouvent beaucoup de choses utiles dans ce domaine.
Dans la v9, une critique très courante et légitime était qu'il était difficile de naviguer. C'était un accordéon très coloré et chaque extrait de code était un «lien de bulle» (faute d'un meilleur descripteur) qui correspondait à la couleur principale de cette sous-section d'extrait. Pire encore, ils étaient alignés justifiés, ce que je pensais être un bon moyen de leur donner un peu d'espace et de sauter un peu les yeux, mais ils ont fini par avoir l'air bizarre et bâclé.
Rachetons-nous ici et rendons la zone Snippets plus agréable à parcourir. Même si, encore une fois, la plupart de ce contenu est trouvé via la recherche. Cela pourrait tout aussi bien rendre la navigation agréable.
Tout de suite, nous décidons de ne pas mettre de champ de recherche directement dans la zone de contenu. Il y en avait dans le passé, mais il s'agit d'une refonte et nous prenons la décision de regrouper la recherche dans un seul domaine. Une fois que vous aurez appris à utiliser la recherche une fois, vous saurez toujours comment cela fonctionne.
Pour la conception, nous allons avec une chose à deux colonnes. Sur la gauche, les principales catégories d'extraits de code, chacune avec une couleur unique. Temps arc-en-ciel! Nous parcourons notre propre galerie pour trouver l'inspiration.
La colonne de droite sera simplement une liste des extraits de code de cette catégorie. Simple, facile à parcourir. Tout comme les liens de pied de page. Les gens savent comment scanner et utiliser des listes de liens. C'est le modèle de conception le plus parfaitement simple qui soit.
Cependant, nous nous trompons avec certaines décisions de conception. Les liens doivent-ils correspondre à la couleur de la section ou simplement être gris? Doit-on «zébrer» les liens avec une version fanée de la couleur principale? Devrions-nous inclure une date de publication ou une date de mise à jour ou aucune des deux? Des choses amusantes et importantes à prendre en compte, mais nous pouvons toujours prendre ce genre de décisions une fois que nous sommes arrivés au navigateur et que nous travaillons avec des données réelles.