coulondre.net » Design

Conception Web – Etape 2 – Le système de navigation (2/2)

arno — Sat, 10 Jan 2009 18:38:14 +0000

Dans le post précédent, nous avons vu les premiers éléments du système de navigation,

Le logo
Les sections
Et les sous sections

Nous allons voir maintenant les autres éléments de base du système de navigation.

Le nom des pages

J’aime quand une page est clairement identifiée, bien mise en valeur et sans ambiguité. Pour cela chaque page doit avoir :

Un nom
Généralement je place le nom en haut à gauche dans un format bien identifiable (plus gros et en couleur par exemple)
Le nom doit être explicite et correspondre au contenu

Le système de navigation local

C’est le système de navigation propre à une page. Il est contextuel et regroupe les liens permettant de naviguer et les actions apropriées.
Dans une architecture comme FBC avec une barre d’onglet et une barre de navigation verticale, le système de navigation local peut venir à droite comme ceci :

Le système de repérage

Il permet à l’utilisateur de savoir où il est dans le site. Généralement, il est matérialisé par une flèche, une police en gras, une couleur différente sur les éléments du système de navigation.
Sur la version actuelle de FBC, nous n’avons pas insisté sur le repérage.

Le fil d’ariane

Le fil d’ariane permet à l’utilisateur de visualiser le chemin parcouru et éventuellement de le remonter.
Le fil d’ariane n’est pas forcément nécessaire, pour ma part je trouve qu’il a un intérêt mais il doit être intégré de façon discrète (par exemple dans le header avec une couleur neutre).

Les utilitaires

Ce sont des éléments qui peuvent aider, informer l’utilisateur ou lui permettre d’effectuer des actions.
Pour ma part j’aime bien avoir tous les utilitaires d’information en bas de page (”A propos”, “nous contacter”, “Espace presse”, etc.), si nécessaire je donnerais une place dans le header pour les utilitaires d’actions (3 / 4 maximum, “recommander”, “inviter”, “s’abonner”, etc.).

Le moteur de recherche

La recherche est un système de navigation à elle toute seule. C’est pour ainsi dire, l’autre façon de naviguer dans un site Web. La recherche est un point crucial, souvent négligé par les concepteurs, elle fera l’objet d’un prochain article.

Le système de navigation est une brique fondamentale de l’architecture fonctionnelle d’un site web.
L’application de ses principes devrait vous permettre d’en développer un simple et efficace.

Conception Web – Etape 2 – Le système de navigation (1/2)

arno — Tue, 30 Dec 2008 20:02:49 +0000

Le système de navigation EST votre site Web

Le système de navigation est la pierre angulaire de votre site Web, sans système de navigation efficace point de salut ! Tous vos efforts sur le contenu, le SEO, les performances seront vains, vos utilisateurs déserteront votre site dès la première visite et n’y reviendront plus !

Il est donc essentiel de concevoir et de développer un système de navigation simple et efficace, le plus utilisable possible.

Comme le précise Steve Krug dans son ouvrage de référence Don’t make me think, les objectifs du système de navigation sont multiples :

Nous aider à trouver ce que nous cherchons,
Nous indiquer où nous sommes,
Nous donner un repère sur lequel nous appuyer,
Nous renseigner sur le contenu,
Nous indiquer comment utiliser le site (sans instruction),
Mettre en confiance par rapport aux concepteurs du site.

Un bon système de navigation doit remplir tous ces objectifs.

Voyons maintenant (toujours en accord avec Steve Krug) les éléments clés pour un système de navigation réussi.

Le logo du site

En haut à gauche, de façon conventionnelle, il permet aux utilisateurs de savoir trés vite sur quel site ils se trouvent. D’autre part c’est un moyen trés pratique pour revenir sur la page d’accueil depuis n’ importe quel endroit du site.

Les sections et sous sections

Une façon trés satisfaisante de représenter les sections sont les onglets mais sont-ils suffisants ? En effet, plus le site grossit, plus le nombre d’onglets augmente et moins la barre d’onglet devient lisible. Pour parer à ce problème plusieurs solutions : système d’onglets sur plusieurs niveaux, navigation horizontale et verticale.
Chez FBC nous avons opté pour cette approche. Personnellement je n’aime pas les barres d’onglets trop chargées. Elles en annulent les bénéfices : simplicité, efficacité, rapidité.

Pour illustrer les différences entre une approche “onglet seule” vs une approche “2 dimensions” vous pouvez comparer les 2 réseaux sociaux Viadeo et LinkIn.
Je préfère trés nettement la conception de LinkIn avec sur la barre verticale tous les élements propres à l’utilisateur (son profil, ses contacts, etc…) et sur la barre d’onglet horizontale les intéractions avec le reste du site (les autres membres, les jobs, etc.)

Sur FBC nous avons repris ce mécanisme et les retours de nos utilisateurs sont excellents.

Pour les sous sections, on peut choisir le classique sous onglet comme ici ou, comme nous l’avons réalisé sur FBC, par une barre de sous onglet en dessous du titre de la page.
Je trouve cette seconde solution plus esthétique et au moins aussi fonctionnelle que la première.

Nous verrons dans un prochain post les autres éléments essentiels du système de navigation :

Le nom des pages,
Le système de navigation local,
Le système de repérage,
Le fil d’ariane,
Les utilitaires.

Conception Web – Etape 1 – L’identité

arno — Thu, 04 Dec 2008 12:49:40 +0000

Cet article est le premier d’une petite série qui a pour but de passer toutes les étapes de la conception d’applications Web.
Le focus sera porté sur la dimension fonctionnelle, l’utilisabilité, l’ergonomie, l’expérience utilisateur…
Le but est de partager mes observations et mon expérience, mes best practices et mes erreurs.
Je prendrais comme fil rouge le cas de Freelance Business Club site web que j’ai moi même conçu.

Ces articles viendront en complément de ceux écrits par Thibauld et qui insistent sur la dimension technique de la création d’un service Web.

Mais commençons par le commencement :

Le nom

Comment choisir son nom ?
Voila une question que se pose n’importe quel créateur de service Web au début de son projet.

Bon ok le nom : Freelance Business Club, n’est pas notre plus grande réussite, je vous l’accorde. Nous sommes partis sur un nom descriptif (le club des freelances) ce qui est plutôt une bonne chose en soit mais beaucoup trop long ce qui a posé des problèmes ensuite au niveau de l’intégration Web. De plus, il est difficile à retenir et à écrire, pas optimal dirons nous !
Mais il avait le mérite d’avoir tous les noms de domaine disponible et de donner une description précise de l’activité.

Avec le recul, je pense que les critères les plus importants à prendre en compte lors du choix du nom sont :

La disponibilité du nom de domaine sur les extensions qui vous intéressent (.com, .fr, .net, etc.).
Une taille inférieure à 10 caractères,
Un nom qui sonne bien dans les langues ciblées, facile à retenir et à écrire.

La meilleure méthode reste à mon avis une bonne séance de brainstorming avec tous les membres fondateurs et les créatifs (graphiste, marketing) du projet. En parallèle utilisez un outil de recherche de non de domaine comme instant domain search qui vous permettra d’éliminer rapidement les noms pas disponibles.

Le logo et la charte

Pour cette étape, il est indispensable de faire appel à un professionnel. Je vous conseille de prendre un graphiste au profil vraiment Web disposant de bonnes références. Il y a un coût mais si le travail est bien fait vous ne regretterez pas votre investissement.
Quand on voit le nombre de sites dépourvus d’identité graphique, si le votre est bon à ce niveau là, il sortira tout de suite du lot.

Sur FBC (abréviation pour Freelance Business Club, je vous le disais que ce nom est trop long ), je trouve que le logo et la charte graphique sont particulièrement réussis.

L’identité graphique a été réalisée par Léo. Nous avons travaillé pour que cette identité nous soit propre, qu’elle nous différencie de la concurrence et qu’elle marque notre univers. Nous n’avons pas hésité à choisir des couleurs originales : le orange et le vert et un logo abstrait (au choix : coquillage, fleur, papillon ?).

A retenir donc au moment de la création de votre identité graphique :

Une identité propre et identifiable,
Un peu d’originalité, de créativité,
mais SURTOUT une identité qui vous plaise et qui vous ressemble

Les polémiques sont nombreuses autour de la véritable importance du nom et de l’identité visuelle au début de la vie d’un site Web. En effet, il est toujours temps de changer de nom et d’identité plus tard, comme l’a fait Viadeo (anciennement Viaduc) par exemple.

Même si j’accorde une importance toute relative au nom dans la réussite d’un projet, combien de site Web ont réussi malgré un nom a priori bof bof ? Je pense à del.icio.us ou à My Blog Log par exemple, il faut bien reconnaître que lorsque nom + identité visuelle sont bien choisis ils deviennent un atout majeur.
Une des plus belles réussites à ce niveau est Meetic, un nom court et descriptif, un logo fondu dans le nom (le coeur constitué par les deux e) une identité visuelle parfaite !!!

A méditer pour nos prochains sites web !