La navigation dans un site Web

Slides:



Advertisements
Présentations similaires
12 règles d’ergonomie web
Advertisements

ZOTERO logiciel de gestion bibliographique
La fenêtre de Vic sur la toile. Page daccueil Conception générale du site CONTENU DUNE PAGE IMAGE DE FOND MENU DEROULANT VISUEL PRINCIPAL 4 BLOCS VIC.
Scénarisation d’un produit pédagogique multimédia
La navigation dans un site Web
Le documentaliste, un professeur d'histoire et un professeur de SES cherchent des documents afin de mettre en œuvre une activité autour de la lecture.
Le developpement web  Préparé par : ASSAL Lamiae JAMALI Zakarya
Lycée C. De Gaulle Vannes Vente en ligne,.. …une question dergonomie.
Se repérer et organiser sa veille dans la recherche en éducation Module 2 « Maîtriser laccès aux ressources scientifiques en éducation » Outils de veille.
La page daccueil Analyse et principes de conception.
Vente en ligne,.. …une question dergonomie.. Les clés de la réussite du site web marchand : Contenus rédactionnels Navigation Design Accessibilité
Tutoriel SPIP Rédacteur.
Lexique des manœuvres de base pour utiliser à PowerPoint
Conception et mise en page
EVALUER L’INFORMATION
Gestion de la communication par établissement sur le site ville
Formation au module Structure de ZENTO
1 Comment utiliser votre Extranet Se connecter 2.My Site 3.Documentation 3.1 Documents dintégration 3.2 Documents types 4.Vos informations privées.
PRESENTATION DU LOGICIEL
PROJET DATELIEU 20 MARS 2012LCP SALLE B105 création du site internet avec Weebly.
~ Les bonnes pratiques ~
1 Bibdoc 37 – Regards croisés Bibliothèques virtuelles, usages réels 7 avril 2009 – Tours « Les usages des bibliothèques virtuelles » Jean-Philippe Accart.
Collecte de données en ligne
Lycée Louis Vincent Séance 1
Rédacteur 1. Sommaire Connexion Interface SPIP Menu SPIP Rédiger un article Interface de création dun article Fonctionnalités de base Statut de larticle.
Introduction aux plates formes
Tous les mercredis du 3 octobre au 19 décembre 2012
Recherche Documentaire et traitement de l’information
Rachid El Boussarghini
La métaphore dans lhypermédia : effets sur la navigation Etude empirique exploratoire.
La conception d hypermédias Cours Ergonomie des Interaction Personne-Machine 11 Janvier 2006 Présentation réalisée par Mireille Bétrancourt (
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
Cadre (« framework ») de lutilisateur (client) Cadre (« framework ») du concepteur.
Échéancier # E) Bilan réflexif /rapport individuel (cours # 15 individuel disponible sur le site section travaux (Attention : rédiger votre travail.
La conception d hypermédias Cours Ergonomie des Interaction Personne-Machine 6 Décembre 2006 Présentation réalisée par Mireille Bétrancourt (
Des hypertextes utilisables Cours Ergonomie des Interactions Personne-Machine 15 octobre 2008 Présentation réalisée par Mireille Bétrancourt (
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
Le multimédia à l ’école : une révolution ?
LA GESTION COLLABORATIVE DE PROJETS Grâce aux outils du Web /03/2011 Académie de Créteil - Nadine DUDRAGNE 1.
L'application Social Buddies Powered by V2.5 ( )
Le langage XHTML 420-S4W-GG Programmation Web Client
Biologie – Biochimie - Chimie
Création et présentation d’un tableau avec Word 2007
La refonte des sites d’appui Ce qui change pour vous.
Outil de gestion des cartes grises
Manuel Kervarker.org : l'accueil
Formation ADBS – septembre 2014 – 1 Approfondir son expertise en recherche d'information 3-4 & 5 septembre 2014.
CRÉER ET ALIMENTER UN BLOG A PARTIR DE LA PLATE FORME OVER BLOG
Tous droits réservés 04 octobre 2005© présente Les Moteurs de Recherche.
L’ ACCESSIBILITE « C’est mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure.
Diaporama réalisé par Damienne PIN, Documentaliste Collège Barbara Hendricks 226 Rue du Limousin Orange LE PROBLEME DE LA QUALITE DE L ’INFORMATION.
Le salon livr’avenir Soutenance de projet – janvier 2015
LOGICIEL DOCUMENTAIRE PMB
DESIGN MULTIMÉDIA Initiation aux bases de La scénarisation multimédia
L’ergonomie des IHM : pourquoi, comment ?
S'initier au HTML et aux feuilles de style CSS Cours 5.
GEORGETA BĂDĂU CRÉATION ET GESTION D’UN BLOG AVEC LA PLATE-FORME LEWEBPEDAGOGIQUE.COM Séance no.2.
Karine Vallin - Dorian Baysset
Présentation nouveau site marchand
1 Tutoriel SPIP Rédacteur. 2 Sommaire Connexion Interface SPIP Menu SPIP Rédiger un article Interface de création d’un article Fonctionnalités de base.
Recueil d’exemples de cartographie dynamique (actualisé le 30/01/03)
Contribution CMS.Eolas
Conception des pages Web avec
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
L’art sur le web. SI 28 – Printemps 2004 L’art et le web L’art… Création d’objets ou de mises en scènes spécifiques destinés à produire chez l’homme un.
L’art sur le web. Définitions Art : L'art est la cr é ation-invention, au niveau du m é canisme de la pens é e et de l'imagination, d'une id é e originale.
DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Présentation de Facebook
Transcription de la présentation:

La navigation dans un site Web Formes, structures et outils de navigation

Les formes de navigation Arborescente à base de sommaires de plus en plus détaillés Hypertexte ou hypermédia par extension aux autres médias, qui crée un réseau de renvois entre les divers documents Base de données avec son jeu d’outils de recherche, principalement basés sur le texte Immersive déplacement dans un espace tridimensionnel plus ou moins réaliste http://www.agencynet.com/ 10 visites virtuelles à couper le souffle : http://www.linternaute.com/meilleur/visites4/index.shtml Le Louvre – visite virtuelle : http://www.louvre.fr/ Amon Tobin : http://www.amontobin.com/field/

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

La structure d’un site Web Structure séquentielle narrations, lignes de temps, exposés nécessitant un ordre logique Ex. : Non-roman Thethingasitis : 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édente Ex. : Tutoriel Flash

La structure d’un site Web Structure hiérarchisée (plus ou moins profonde)

La structure d’un 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)

La structure d’un 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) http://web.archive.org/web/20100211124505/http://relevare.com/site/ http://www.xmarks.com/site/www.relevare.com/site/

La structure d’un site Web Structure en réseau

La structure d’un site Web Structure en réseau 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.

La structure d’un site Web Structure en réseau 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.

La structure d’un site Web Structure en évolution Quelle que soit la structure que vous aurez adoptée, celle-ci sera sans doute en évolution.

La structure d’un 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 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.

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 Annotea : annotations dans Firefox MyStickies : post it pour pages web (plug in à installer sur Firefox)

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 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.

Les outils de navigation 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.

Les outils de navigation 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.

Les outils de navigation 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.

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 ?

Une navigation spatio-temporelle 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. Notamment 18h30 (Mrs. Purple) et 20h15 (Station 72).

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).

Une navigation hypertextuelle Being human, de Annie Abrahams, www.bram.org, http://www.bram.org/indexifr.htm Navigation hypertextuelle entre les différents projets Biologiste 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

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

« Spatialisation » de l’information : outils cartographiques 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/

Hubs et authorities Comme nous y invite la théorie des agrégats à partir de J. Kleinberg, nous cherchons à isoler, quand l’agrégat existe, les HUBs et les Authorities d’un domaine de pratiques. Les Hubs et les Authorities sont, en gros, les nœuds les plus importants du graphe car ce sont eux qui assurent l’organisation de l’agrégat. Les HUBs sont des sites (ou des pages) qui pointent vers de nombreuses autres ressources. L’exemple typique est celui d’une page de liens dans un site qui fait alors office de « Hub ». Les AUTHORITIES sont des pages (ou des sites) qui sont pointés par d’autres pages. Dans un agrégat HUBs et Authorities ont tendance à renforcer leur caractère en termes de vectorisation des liens.