1 la navigation dans un site web formes, structures et outils de navigation

1

La navigation dans un site Web

Formes, structures et outils de navigation

2

Les formes de navigation

• Arborescenteà base de sommaires de plus en plus détaillés

• Hypertexteou hypermédia par extension aux autres médias, qui crée un réseau de renvois entre les divers documents

• Base de donnéesavec son jeu d’outils de recherche, principalement basés sur le texte

• Immersivedéplacement dans un espace tridimensionnel plus ou moins réalistehttp://www.agencynet.com/10 visites virtuelles à couper le souffle : http://www.linternaute.com/meilleur/visites4/index.shtmlLe Louvre – visite virtuelle : http://www.louvre.fr/Amon Tobin : http://www.amontobin.com/field/

http://www.agencynet.com/

http://www.linternaute.com/meilleur/visites4/index.shtml

http://www.louvre.fr/

http://www.amontobin.com/field/

3

Les formes de navigation

• Sans une structure fonctionnelle, votre site Web sera un échec même si le contenu est pertinent et bien rédigé.

• Règle des 3 clics : toute information doit être disponible en maximum trois clics de souris. Il vous faut donc hiérarchiser l’information selon une structure efficace pour minimiser la navigation.

• Plusieurs types de structures peuvent coexister au sein d’un même site Web.

• Source : Web style guide

http://www.webstyleguide.com/wsg3/index.html

4

La structure d’un site Web

Structure séquentielle

• narrations, lignes de temps, exposés nécessitant un ordre logiqueEx. : Non-romanThethingasitis : describes the artist's relation to HTML color pallettes

• thèmes progressant du général au particulier

• sites d'apprentissage ou tutoriaux où le passage à une page suivante requiert des pré-requis exposés à la page précédenteEx. : Tutoriel Flash

http://www.synesthesie.com/boutiny

http://www.atavar.com/

5

Structure hiérarchisée (plus ou moins profonde)


6


• les différents thèmes dépendent d'une seule et unique page : la page d'index ou page d'accueil

• utilisateurs familiarisés avec les diagrammes hiérarchisés comme les organigrammes (métaphore facilement compréhensible)


7


nécessite un gros travail d'analyse préalable de votre contenu (notions pré-requises, doublons d'information...)

cette structure hiérarchisée ne sera efficace que si vous avez soigneusement organisé l'information disponible.http://www.relevare.com/site (navigation hiérarchisée en Flash)http://web.archive.org/web/20100211124505/http://relevare.com/site/http://www.xmarks.com/site/www.relevare.com/site/


http://www.relevare.com/site

http://web.archive.org/web/20100211124505/http://relevare.com/site/

http://www.xmarks.com/site/www.relevare.com/site/

8

Structure en réseau


9


• Associations d’idées et libre cours de la pensée Chaque visiteur parcourra votre site de façon unique selon ses propres intérêts et sa propre démarche vers l’information sans avoir l’impression d’être dirigé.

• Ce type de structure exploite la pleine puissance des liens vers des informations à l’intérieur du site et vers des informations situées dans d’autres sites Web.


10


• fonctionne bien pour des petits sites destinés à des utilisateurs hautement qualifiés en quête d’enrichissement ou de perfectionnement plutôt qu'à la compréhension basique d'un sujet.

• structure ardue à mettre en place et finalement peu pratique surtout pour les internautes novices dans le sujet traité. Ceux-ci auront alors l’idée d’un site confus, difficilement exploitable.


11

Structure en évolutionQuelle que soit la structure que vous aurez adoptée, celle-ci sera sans doute en évolution.


12

Structure en évolution

Si votre site connaît une croissance rapide et de nombreux développements, vous devrez néanmoins veiller à garder un équilibre entre les différents blocs d’informations.

L'objectif sera de maintenir :• une hiérarchisation équilibrée qui aidera l'accès rapide à l'information• et une compréhension intuitive de la façon dont les éléments sont organisés.


13

Les outils de navigation

Outils permettant : • d’appréhender la structure du site• de s’approprier le contenu

• Outils de parcours : carte, plan, indicateur de position, balisage, prévisualisation…

• Outils d’écriture : outils de réécriture de la structure en vue de son appropriation (annotation, ajout de contenus personnels, possibilité d’agencement des contenus…)

Exemple : extension Firefox Scrapbook : http://www.framasoft.net/article3780.html

http://www.framasoft.net/article3780.html

14

Texte, Boutons, icônes…

• graphisme simple et à la symbolique intuitive car ils se doivent d’être efficaces mais aussi de rester discrets par rapport au contenu et au visuel proprement dit.

• Ces outils de navigation qui se retrouvent de page en page

contribuent aussi à créer l’identité graphique de votre site.

• Associez texte et image pour un bouton : le texte permet une meilleure compréhension, l’image un meilleur repérage, et renforce l’identité graphique.


15

Principes :

• être capable de revenir à tout moment vers la page d’accueil ou vers les principaux points de navigation ;

• si le sens du contenu global y invite, prévoir des possibilités de retour à la page précédente ou d’avancement à la page suivante ;

• savoir à tout moment où l’on se trouve.


16

Les barres de navigation (frames, cellules d’un tableau…) qui proposent de nombreux choix dans un espace réduit ont beaucoup d’adeptes car elles peuvent ainsi servir d’en-tête de page et donner une forte cohérence visuelle au site.


17

La tendance actuelle sur le Web est de proposer plusieurs principes de navigation

• Le premier sera celui qui guidera l’utilisateur dans la navigation du site selon les directives de l'auteur : un parcours par défaut est proposé par un auteur.Cf. http://www.relevare.com/site (quicknav)

• Les autres donnent pleine liberté d’exploration au visiteur, par exemple par le biais de liens hypertextes : le lecteur doit se faire « auteur » de ce qu’il est en train de lire afin de donner un sens à son parcours.


http://www.relevare.com/site

18

Exemples : une navigation originale

Site Les Chinois : www.leschinois.com

La vidéo interactive • Parti pris : la vidéo interactive comme élément central du

site• point focal : la vidéo au centre

Navigation• Double navigation : par onglets et par objets• donner de la profondeur => navigation traitée en volume

(objets graphiques en 3D et n°43 qui tourne autour de l’acteur)• casser les cadres : pas de cadre autour de la vidéo

Scénario• sorte de jeu expérimental avec début et fin• Univers du site : qui observe qui ?

http://www.leschinois.com/

19

• Days in a day, de Pierrick Calvez, 2000 : http://www.daysinaday.com/ Le positionnement sur la carte de la ville du personnage, Mr. Brown, dépend de « l’heure système » :

« Mr. Brown évolue en temps réel.[…] Il se déplace sur la carte toutes les cinq minutes. » => prise en compte de la temporalité

• Audi R8 : http://www.audir8.hu/html/index.html?lang=hu http://microsites.audi.com/audir8/html/index.php?lang=en http://www.audi.fr/fr/brand/fr/gamme/r8/r8.html Les rubriques innovations, design et performance sont explorées au cours d’un trajet.Time line, compte à rebours.

• Site du graphiste Jonathan Yuen : http://www.jonathanyuen.com/_main.html • Site de l’architecte Stéphane Maupin : http://www.stephanemaupin.com/

Navigation spatiale : l’internaute trace un parcours.

Une navigation spatio-temporelle

http://www.daysinaday.com/

http://www.audir8.hu/html/index.html?lang=hu

http://microsites.audi.com/audir8/html/index.php?lang=en

20

Une navigation aléatoire

• Metatextes, de Tim Catinat, http://www.metatextes.com

Métatextes est une œuvre en perpétuelle évolution, subordonnée à des tirages aléatoires et augmentant au fur et à mesure de sa production.

Franco-canadien, concepteur et créateur de sites web depuis 1997, Tim Catinat met en scène de façon expérimentale quelques-uns de ses textes, dès l’avènement du DHTML (1998). Passionné par les mots, l'image et la musique (il était auparavant producteur), il s'intéresse à la spécificité du multimédia dans l’interprétation du texte, ainsi qu’aux capacités créatrices qu’offre ce nouveau médium, devenu depuis son principal mode d’expression (tant graphique que textuel).

21

Une navigation hypertextuelle

• Being human, de Annie Abrahams, www.bram.org, http://www.bram.org/indexifr.htm

Navigation hypertextuelle entre les différents projetsBiologiste et artiste multimédia, Annie Abrahams travaille depuis 1996 sur le web. Son principal projet pour le net, Being human/étant humain (débuté en 1997), traite de problématiques liées aux systèmes de communication et questionne les possibilités et les limites des échanges par ordinateur. Avec ce projet, l’artiste entre directement en contact avec chaque individu, pénétrant ainsi son intimité, sans passer par le contexte médiatisé de l’art. Dans le travail d’Annie Abrahams, le “spect-acteur” se dévoile par ses actions et ses participations, contribuant en même temps à dresser une ébauche de l'état humain contemporain. Annie Abrahams réalise également des vidéos, des installations et des performances multimédias.

• Desordre, de Philippe de Jonckheere

• Leo Burnett : http://www.leoburnett.ca

• Navigation sans clic : www.dontclick.it

22

Une navigation sans souris

Crazy Multi-Input Touch Screen :http://www.youtube.com/watch?v=zp-y3ZNaCqs

23

Spatialisation de l’information : structuration de l’information, sémiologie graphique et propriétés numériques des supports => exploitation plus conviviale et plus efficace des univers de documents numériques grâce aux puissants outils visuels que sont les cartes.

• www.Caida.org : graphes de liens hypertextes

• Kartoo : métamoteur qui présente les résultats d’une recherche en "cartes" où les sites sont localisés par des sphères et sont reliés par des "liens sémantiques" en arborescence. www.kartoo.com (fermé depuis janvier 2010)

• Réseaux, Territoires et Géographie de l'Information : http://fr.linkfluence.net/

« Spatialisation » de l’information : outils cartographiques

1 la navigation dans un site web formes, structures et outils de navigation

Documents