La navigation dans un site Web

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 doutils 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/visi
  tes4/index.shtmlLe Louvre visite virtuelle
  http//www.louvre.fr/What we will
  http//www.z360.com/what/ Amon Tobin
  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 linformation selon
  une structure efficace pour minimiser la
  navigation.
• Plusieurs types de structures peuvent coexister
  au sein dun même site Web.
• Source Web style guide

4
La structure dun 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

5
La structure dun site Web

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

6
La structure dun site Web

• Structure hiérarchisée (plus ou moins profonde)
• 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
La structure dun site Web

• Structure hiérarchisée (plus ou moins profonde)
• 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)

8
La structure dun site Web

• Structure en réseau

9
La structure dun site Web

• Structure en réseau
• Associations didé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 linformation sans avoir
  limpression dêtre dirigé.
• Ce type de structure exploite la pleine puissance
  des liens vers des informations à lintérieur du
  site et vers des informations situées dans
  dautres sites Web.

10
La structure dun site Web

• Structure en réseau
• fonctionne bien pour des petits sites destinés à
  des utilisateurs hautement qualifiés en quête
  denrichissement 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 lidée
  dun site confus, difficilement exploitable.

11
La structure dun site Web

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

12
La structure dun site Web

• 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 dinformations.
• 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
• dappréhender la structure du site
• de sapproprier 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é dagencement des contenus)Exemple
  extension Firefox Scrapbook
  http//www.framasoft.net/article3780.html

14
Les outils de navigation

• 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 lidentité
  graphique de votre site.
• Associez texte et image pour un bouton  le texte
  permet une meilleure compréhension, limage un
  meilleur repérage, et renforce lidentité
  graphique.

15
Les outils de navigation

• Principes
• être capable de revenir à tout moment vers la
  page daccueil 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 davancement à la page suivante
• savoir à tout moment où lon se trouve.

16
Les outils de navigation

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

17
Les outils de navigation

• La tendance actuelle sur le Web est de proposer
  plusieurs principes de navigation
• Le premier sera celui qui guidera lutilisateur
  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é dexploration
  au visiteur, par exemple par le biais de liens
  hypertextes le lecteur doit se faire  auteur 
  de ce quil est en train de lire afin de donner
  un sens à son parcours.

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 gt navigation traitée en
  volume (objets graphiques en 3D et n43 qui
  tourne autour de lacteur)
• 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 ?

19
Une navigation spatio-temporelle

• Site de larchitecte Stéphane Maupin
  http//www.stephanemaupin.com/Navigation
  spatiale linternaute trace un parcours.
• Days in a day, de Pierrick Calvez, 2000
  http//www.1h05.com/diad/
•     Le positionnement sur la carte de la ville du
  personnage, Mr. Brown, dépend de  lheure
  système     Mr. Brown évolue en temps
  réel. Il se déplace sur la carte toutes les
  cinq minutes.  gt prise en compte de la
  temporalité
• Audi R8 http//microsites.audi.com/audir8/html/i
  ndex.php?langenLes rubriques innovations,
  design et performance sont explorées au cours
  dun trajet.Time line, compte à rebours.

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 de 36 ans, 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 lavè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
  linterprétation du texte, ainsi quaux capacités
  créatrices quoffre ce nouveau médium, devenu
  depuis son principal mode dexpression (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, lartiste entre
  directement en contact avec chaque individu,
  pénétrant ainsi son intimité, sans passer par le
  contexte médiatisé de lart. Dans le travail
  dAnnie 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?vzp-y3ZNaCqs

23
 Spatialisation  de linformation outils
cartographiques

• Spatialisation de linformation structuration
  de linformation, sémiologie graphique et
  propriétés numériques des supports gt
  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
  dune 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.co
  m
• Réseaux, Territoires et Géographie de
  l'Information http//www.rtgi.fr/

24
(No Transcript)
25
(No Transcript)