PCO-1014

TECHNOLOGIES HYPERMÉDIA

Le Web et l’écriture hypermédia

L’hypertextualité : origines et fondements

Origines de l’hypertexte

  •  ~ 1750 : L’Encyclopédie = réseau de notions (principe du renvoi : lecture non-linéaire)
  • 1945 : Vannevar Bush, le concept de « toile d’information » et le Memex
  • 1965 : Ted Nelson invente le mot « hypertexte »
  • 1980 : logiciel Enquire par Tim Berners-Lee
  • 1987 : logiciel HyperCard (Apple)

Un système hypertexte est un système contenant des nœuds liés entre eux par des hyperliens permettant de passer automatiquement d’un nœud à un autre. Un document hypertexte est donc un document qui contient des hyperliens et des nœuds. Un nœud est une « unité minimale d’information », notion assez floue qui signifie simplement que l’information d’un noeud sera toujours présentée entière.

Lorsque les nœuds ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de système et de documents hypermédias.

Notion d’interactivité

  • Dans un média interactif, l’usager peut :
  1. Dialoguer (interagir) avec le contenu
  2. Choisir son parcours (= naviguer)
  3. Participer (contribuer) au contenu

Le Web, un média interactif (?)

L’écriture Web

  • Ni trop, ni trop peu de texte
  • Privilégier des liens vers l’information déjà existante
  • Intégrer les liens « naturellement » dans le fil du texte sans faire de référence explicite au lien
  • Penser le texte « en 3 dimensions »

Bref historique du Web

  • 1991 : Tim Berners-Lee crée le protocole HTTP et le langage HTML; 1er « site » du Web
  • 1993 : Mosaic = premier navigateur Internet
  • 1994 : Naissance de Netscape et Yahoo! 1er serveur Web à l’UQTR
  • 1996 : Naissance de Google
  • 1997 : ~ 31 millions de pages Web
  • 2007 : ~ 23 milliards de pages Web*

Le format des adresses

Serveurs et clients

  • Serveur : ordinateur qui héberge des pages Web; logiciel qui permet de les rendre accessibles
  • Client : logiciel qui permet d’afficher des pages Web, de naviguer dans la page et d’une page à l’autre (navigateur ou browser)

Sites Web « classiques »

Le « Web 2.0 »

 Les fils d’information

  • Norme RSS (Really simple syndication)
  • Permet d’incorporer dans un site du contenu provenant d’autres sources mis à jour périodiquement
  • Texte, audio ou vidéo
  • Possibilité de s’abonner à des fils de nouvelles via un « agrégateur »
  • Fonctionne avec la baladodiffusion (podcasting)
  • Liste de fils RSS (http://entete.uqtr.ca/description.php?no_fiche=5442)

Concevoir et modéliser un site Web

Le développement d’un site Web

  • 1. Phase d’analyse
  • 2. Phase de conception
  • 3. Phase de réalisation
  • 4. Phase d’évaluation

Analyse

  • Définir les objectifs du site
  • À qui s’adresse le site? (public cible)
  • Quels types de contenus?
  • Niveau de compétence des usagers
  • Contexte d’utilisation du site

Phase de conception

  • Sélectionner le contenu
  • Déterminer l’architecture du site
  • Faire un plan détaillé du site
  • Concevoir l’interface du site (« design »)
  • Choisir la technologie adaptée
  • Réaliser une ou plusieurs maquettes

L’architecture hiérarchique (ou arborescente)

 

Les ingrédients du succès d’un site

  • 1. La qualité du contenu
  • 2. L’esthétique
  • 3. L’ergonomie (voir prochain cours)
  • 4. La vitesse de téléchargement
  • 5. La fréquence des mises à jour

Ergonomie d’une interface Web

Interface

  • Surface séparant deux milieux, deux systèmes, etc.
  • Interface humain-machine (ou interface utilisateur) : Ensemble des outils mis à la disposition de l’utilisateur pour dialoguer avec un dispositif technique.

« L’interface utilisateur gère l’interactivité entre l’être humain et les programmes contenus dans l’ordinateur; elle permet d’entrer les données qui seront traitées par un programme et de visualiser ensuite le résultat du traitement. Les interfaces utilisateurs actuelles sont essentiellement graphiques » (Grand dictionnaire terminologique de l’OLF, http://www.granddictionnaire.com/)

Ergonomie (Du grec ergos, travail et nomos, loi)

  • Discipline ayant pour but d’adapter un système à son utilisateur, afin que ce dernier puisse mener ses activités avec un maximum d’efficacité, de satisfaction et de bien-être, avec une phase d’adaptation réduite. (à cockpit d’avion)
  • Une interface est dite ergonomique si elle est facile à apprendre et à utiliser, intuitive, conviviale (« user-friendly »
  • Principaux éléments de l’ergonomie d’une interface Web
  1. Architecture (structure du site)
  2. Page d’accueil
  3. Présentation des pages (texte, couleurs…)
  4. Navigation (menus, boutons…)
  5. Animations et effets multimédias
  6. Performance et accessibilité
  7. Contenu et soutien aux usagers

Architecture et structure

  • Prévisible et logique
  • Efficace (placer l’information importante ou la plus fréquemment consultée au 1er niveau)
  • Non redondante
  • Doit accomoder 2 types d’usagers : l’explorateur et l’habitué
  • Règle des 3 clics

La page d’accueil

  • Identifie clairement le contenu du site
  • Informe l’usager des possibilités de navigation
  • Les informations principales doivent être visibles immédiatement, sans défilement
  • Donne le ton sur le plan visuel; cohérent avec le reste du site (à unité graphique : exemple)
  • Pour un site corportatif : le logo et le nom de la compagnie doivent être les éléments les plus visibles
  • Compromis entre esthétique et rapidité de chargement

La charte graphique

  • Spécifie les choix de styles, polices de caractères, couleurs, etc.
  • Les pages doivent respecter la charte graphique définie durant de la phase de conception
  • Permet de donner un aspect visuel uniforme (unité) è Uniformité et répétition facilitent le repérage de l’information et des éléments de navigation
  • Il est avantageux d’utiliser un modèle (ou gabarit) pour produire le site

La mise en page

  • Les 4 principes de base (Williams & Tollett*) :
  1. Alignement à crée la cohésion (exemple; 2e ex: avant / après)
  2. Proximité à renforce la cohésion (exemple)
  3. Répétition à cohésion et repérage (exemple)
  4. Contraste à attire l’œil et augmente la balayabilité (exemple; autre ex)
  • Texte : polices et styles
  1. Pas plus de 3 ou 4 polices de caractères différentes
  2. Chaque police a sa fonction
  3. Les polices sans empattement sont plus lisibles à l’écran
  4. Taille du texte principal : 12-14 points (taille 3 ou 4 en HTML)
  5. À éviter : le texte en MAJUSCULES ou en italique
  6. Soulignement : réservé aux hyperliens
  • Les couleurs
  1. 6 au maximum (4 + noir + blanc + dégradés)
  2. Regrouper les éléments par couleur
  3. Couleurs vives pour capter l’attention
  4. Contraster le premier plan (le texte) et l’arrière-plan (le fond) à lisibilité
  5. Éviter les fonds à texture ou à motif
  6. Éviter certaines combinaisons
  • Autres principes de présentation
  1. Jamais de défilement en largeur
  2. Graphiques visibles en totalité dans une page-écran (sans défilement)

Navigation

  • Deux modes de navigation :
  1. En « largeur »
  2. En « profondeur »
  • Chaque page du site doit comporter des informations permettant à l’usager de répondre aux questions :
  1. Où suis-je ?
  2. D’où est-ce que je viens ?
  3. Où puis-je aller ?
  • Fournir des indices de repérage : changement de couleur du bouton, etc.

Menus et autres éléments de navigation

  • De préférence barre horizontale ou verticale
  • Autour de 7 choix (9 max)
  • Liens vers des pages internes (homogénéité)
  • La barre de navigation doit être toujours visible
  • Lien de retour à la page d’accueil sur toutes les pages du site
  • Bouton(s) de retour en haut de la page pour les pages de plus de 2 pages-écrans

Les hyperliens

  • Doivent pouvoir être repérés facilement
  • Éviter les icones seuls
  • Le texte en hyperlien doit être bref (sinon lisibilité réduite)
  • Développent une idée
  • À NE PAS FAIRE : « cliquez ici »

Autres aspects de l’ergonomie

  • Animations et effets multimédia : à modération
  • Soutien aux usagers : à fournir le plan du site (pour les gros sites)
  • Performance et accessibilité :
  1. Les utilisateurs s’attendent à un temps de réponse (passage d’une page à l’autre) < 1 seconde !
  2. Adapter la mise en page à la dimension des écrans les plus répandus (1024 x 768)
  3. Toujours optimiser les images pour le Web
  4. Faire des tests sur plusieurs plate-formes (PC/Mac…)

Quelques ressources utiles

Sites de conseils en ergonomie

Conseils sur l’écriture Web

Banques d’images (icones, logos, etc.)