La conception dhypermdias

Lanalyse de systme :Sites web et hypertextesCours Ergonomie des Interactions Personne-Machine

9 et 16 octobre 2013Mireille Btrancourt et Kalliopi Benetos http://tecfa,unige.chTECFATechnologies pour la Formation et lApprentissage

Amener travaux annes dernires plus rappeler fonctionneMent cours1Plan de la sance du 10/10Prsentation des groupes 4, 5, 6Rappel des tapes du projetComment mener lanalyse du site web?Exercice dexploration et danalyse de sites WebDebriefing collectif (pour le site Usabilis)

EtapesQuestions que lon se poseMthode employe1. Analyse du contexte dusageQue propose le site ?Pour qui ? Comment ?Brainstorming partir du site2. Analyse du siteContenu et organisation, outils daide,Pb dutilisabilit supposs

Inspection experteWalkthrough3. Analyse activit utilisateurQuest-ce que les utilisateurs viennent faire sur ce site ?Quels problmes rencontrent-ils ?Entretien semi-directif avec une utilisatrice teur, verbalisation concurrente

4. Conception du scnario pour le test utilisateurs

Quelles tches donner lutilisateur pour que le test amne des rsultats fiables (authenticit et validit des tches?)Utilisation des tches donnes par les utilisateurs. Exploration des problmes potentiels. 5. Passation du Test utilisateur (5 pour groupes de 2, 7 pour groupes de 3)Quels problmes les utilisateurs rencontrent-ils sur ce site ?Test de scnarioObservation qualitative plus questionnaire6. Diagnostic et suggestions damliorationQuelle est la cause des problmes rencontrs par les utilisateurs ?Que peut-on faire pour y remdier ?Classification des problmes selon une grille de critres. 3. Analyse de lactivit5. Test utilisateur 2. Analyse du systmeContenu, organisation, fonctionnalits, outils daidePb dutilisabilit supposs4. Scnario dutilisation1. Contexte global dutilisationTches authentiquesProblmes rencontrs6. Diagnostic, propositions de remdiation1 entretien5-7 utilisateurs / -trices dun mme public cible(7 obligatoires pour les groupes de trois)Inspection experteVous avez ralisCette tapeAujourdhui on voit aNessayez pas encore de dterminer a !4Relations entre vos analyses (en bleu) et le rsultat de ces analyses (en jaune).Le cerveau tous les niveauxUn peu de butinageSite UsabilisSite interactif Resto-rangEt aussi :Site collaboratif EdutechWikiUn des premiers hyperbooks Engine for education5Voir activit prcise de recherche dinfos et de rponses aux questions : quelle est la structure ?- quels sont les outils de navigation ?

1bZone 1 : Accroche Photo-marketting 1a Identification u master, logo officiel Unige 1b identification personnage et liens vers videos, fiches pratiques Zone 2 : Bandeau 2a Liste des rubriques2b Moteur de recherche (outil daide)Zone 3 : Logo Tecfa Nom du master offrant lien vers page daccueil (points de repres)

6

1231bVoir commentaires de la diapo pour la lgende des blocs1aZone 1 : Accroche Photo-marketting 1a Identification u master, logo officiel Unige 1b identification personnage et liens vers videos, fiches pratiques Zone 2 : Bandeau 2a Liste des rubriques2b Moteur de recherche (outil daide)Zone 3 : Logo Tecfa Nom du master offrant lien vers page daccueil (points de repres)

7Exprience de navigation et analyse de siteVoir Programme sur site Web -> Activit du 9 octobre

http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase3.html

Puis poster sur chamilo la rponse la question 3 sur lhypertexte qui vous est attribu.Plan de la sance du 16/10Prsentation des groupes 9, 10 et 11Rappel de lexercice dexploration et danalyse de sites WebDebriefing collectif (pour le site Le Cerveau)A faire pour la sance projet du 24/10

Exprience de navigation et analyse de siteVoir Programme -> Activit du 10 octobre

http://tecfa.unige.ch/tecfa/teaching/LMRI41/projet_phase3.htmlReprenez lexercice de recherche dinformation et rpondez la question du site que vous navez pas tudi la semaine dernire. La notion dhypertexteAspects historiques et techniques RepresEn 1965 Thodore Nelson cre le mot hypertexte et les premiers docs hypertexte apparaissent dans les annes 68 - 69. En 1987, sortie dhypercard En 1990, Tim Berners-Lee invente le WWW au CERN En 1993, Tecfa a le premier site Web de Suisse aprs le CERNUn hypertexte, cest :Un programme informatique permettant de crer ou de prsenter de faon interactive un ensemble de donnes textuelles ouautres mdias (graphiques, vidos, tableaux = hypermdias).A lorigine :De nos jours, le web sest arrog le monopole de lhypertextualit.Un site web est un ensemble de fichiers augments dinstructions en html ou xml, lisibles par des applications spcifiques, comme les navigateurs internet. Nanard & Nanard, 199812Un peu dhistoire :Dj Vanevar Bush rvait dune immense base de documents ou les diffrents items seraient lis entre eux en fonction de leur smantique.Linvention de V. Bush na pas tant t le concept de lien hypertexte que lide de rapprocher dans le temps et lespace les lments relis smantiquement.En 1965 Thodore Nelson cre le mot hypertexte et les premiers docs hypertexte apparaissent dans les annes 68 - 69.En 1987, sortie dhypercardEn 1990, Tim Berners-Lee invente le WWW au CERN.

Faire diffrence entre hypertexte et WWW.Mode de gestion de linformation o cette dernire estreprsente par des units dinformations appeles nuds,relis par des liens, activables par action de la souris surdes ancres.La notion dhypertexteEt alors jhkje iuolj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iupiuoiEt alors jhkje iuolj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iupiuoiEt alors jhkje iuolj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iupiuoiEt alors jhkje iuolj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iupiuoiEt alors jhkje iuolj iuhziue wluizliuh luhgl jlierug uegh hjegkjh kej kjkjhgkj kkjhgkjhg iupiuoilienNud (ou unit dinformation)ancre@Pierre Dillenbourg13Dans un texte, information prsente de faon linaireLa structure des hypertextesA-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------14Dans un hypertexte, linformation est :dcoupe en units dinformationstructure en rseau.La structure des hypertextesA-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------A-------------Structure hirarchiqueStructure smantique15Niveaux de conceptionVision oriente tcheVision oriente informationGarrett, J.J. (2000). The elements of user experience. New Riders Publishing.16Architecture de linformationAspects perceptifs et attentionnelsZones fonctionnelles de lcran

Zones fonctionnelles de lcran

Nogier, 2000Validation par analyse oculomtrique

Source image : http://www.uservision.co.uk/Voir par exemple : http://www.ergologique.com/conseils/conseils.php?id_tip=24

Modles de page daccueil de sites institutionnelsEx: rfrentiel web gouvernemental du Luxembourg, http://www.renow.public.lu/

ClassiquePortailModles de page daccueil de sites institutionnelsPersonnalis

Si Renow est un cadre strict dont le dessein est une excellente qualit des sites Internet de notre gouvernement, nous encourageons toute expression artistique permettant de transmettre les valeurs culturelles de notre pays. La page daccueil fait souvent lobjet dun design particulier permettant de vous distinguer."La recherche dinformation dans les sites webOu pourquoi tait-il si difficile de trouver la structure crbrale implique dans la mmoire pisodique ?Comment faciliter la tche des utilisateurs ?

Le cycle valuation - slection - traitementI. La recherche dinformationsCONTRAINTESSITUATIONNELLESCONNAISSANCESDISPONIBLESEVALUATIONReprsentation de but

Plan de rechercheSELECTIONIdentification

Estimationpertinence

Choix de la cibleTRAITEMENTIntgration

Filtrage

ComprhensionEtat de la solutionsatisfaisanteFINTricot & Rouet, 199824Figure emprunte de Rouet et Tricot 1998: cycle valuation - slection - traitementLes processus se droulent squentiellement mais supposent lexistence dune reprsentation de but disponible tout momentExemple de recherche : les facteurs dclenchant de la rvolution franaisePremire tape : valuation - planificationsi lon utilise un moteur de recherche, on doit dabord dcider de la formulation de la requte, du choix des mots clsSi lon a dj une ressource identifie, il faut formuler un but prcis partir dune question assez vagueDeuxime tape : slectionparmi la liste de rubriques ou de rsultats de la recherche, on doit slectionner celui ou celle qui semble le plus apte rpondre la questionTroisime tape : traitementil faut ensuite lire linformation, ventuellement la scanner en fonction de lobjectif, puis intgrer linformation ce que lon a dj, ce que lon connat djRetour evaluation :On value ensuite ltat de la solution : est-elle pertinente par rapport lobjectif, suffit-elle, voire mme la question est-elle bien pose.

Information Problem Solving

Lazonder & Rouet, 2008Difficults de navigationSentiment de dsorientation

Calisir & Gurel, 2003

Source image :http://www.interactivearchitecture.org/nevel-moving-labyrinth.html Ne pas savoir comment retrouver une page particulire Ne pas savoir o aller maintenant, Ne pas savoir o trouver une information et comment y aller Ne pas savoir ce que lon a dj explorQue nous dit la recherche : LimitesSituation de double tche surcharge cognitive

Tche deRecherche dinfoLectureComprhensionMmorisationTche de navigationReprsentation de la structureMmorisation de son cheminComprhension des outils Que nous dit la recherche : facteursLes rsultats dpendentDe la structuration de lhypertexteDe la tche (lecture, rappel dinformation locale, comprhension globale)Des pr-requis des utilisateursEx : Connaissances pralables, comme mdiateur de la motivation et de lintrt (Moos & Marroquin, 2010)Des outils de guidage et de navigation disponiblesMoos DC, Marroquin E. Multimedia, hypermedia, and hypertext: Motivation considered and reconsidered. Computers in Human Behavior. 2010;26(3):265-276. Que nous dit la recherche : facteursDe la structuration de lhypertexte

Lee & Tedder (2003)Recherche dinfo est diffrente de la lecture complte

Struture : Hierarchique- matricielle

Depend de Que nous dit la recherche : facteursStructuration de lhypertexteOutils daccs cette structure fournis lutilisateur

Reprsentation de lorganisation du contenuNavigation dans la structure

Caro, S. & Btrancourt, M. (1998). Ergonomie de la prsentation des textes sur cran: guide pratique. in A. Tricot et J.F Rouet (eds.) Hypertextes et Hypermdias, Concevoir et utiliser les hypermdias: approches cognitives et ergonomiques. (pp. 123 - 137), Herms: Paris.Moos DC, Marroquin E. Multimedia, hypermedia, and hypertext: Motivation considered and reconsidered. Computers in Human Behavior. 2010;26(3):265-276. Que nous dit la recherche : facteursPotelle et Rouet, 2003

Effet de la reprsentation sur la comprhension, rsum et carte conceptuelle en fonction des connaissances antrieures -> si peu de connaissances, plan hierarchique facilite au plan global, pas deffet pour high K Pour recherche dinfo, un plan facilite la recherche dinfos locales, et un plan bien structur vaut mieux quun graphique complexeQuest-ce quun bon hypertexte ?Adquation du contenu aux objectifs et au publicIII. Les HypertextesDcoupage en units pertinentesStructure smantique et structure de navigationExemples vus en dbut de cours32Critres dvaluation des hypertextes ?Adquation du contenu aux objectifs et au publicOutils dorganisationaide la comprhension de la structuredu documentIII. Les Hypertextesplanindicateurs depositionnementindicateurs devolume

33

34

Outils daccs la structure : indicateur de positionnement

35Quels outils ?Adquation du contenu aux objectifs et au publicOutils dorganisationaide la comprhension de la structuredu documentoutils de navigation ExemplesExemplesIII. Les Hypertexteshistoriquepoints de represdfilementretourannonces de destinationinfo locale36Historique

Historique38Outils de navigation : informations localesUniversity of Georgiahttp://www.uga.edu/

39Exemple de dispositif de dfilement (en haut droite)A faire remarquer au passage : quest-ce qui ne va pas dans cet hypertexte ?Il ny a pas dindicateur de positionnement, donc on ne sait pas quelle rubrique de gauche est ouverte droite.A quoi vous attendez-vous i je clique droite ?Pour vos projetsEtape 2 : Analyse du systmeQuel est le contenu propos ?Comment est-il organis ?Dterminer les zones graphiques (voir ci-dessus)

Quelles sont les fonctionnalits prvues ?Faire ventuellement un schma (voir ci-aprs)

Quels sont les outils de navigation et de structuration ?Quels sont les outils daide disponibles ?

Quels sont les problmes potentiels ?40Reprsentation des fonctionnalitsNcessite un formalisme de reprsentation de linteractionA faire pour vos projets si une fonctionnalit est centrale (exemple : procdure de rservation de sjour, spectacle...)41Insrer carteEntrer codePINCodeerron ?ouiCodeoubli ?EchecouinonChoisir ou entrermontantChoisir ticketO / NnonRetrait carteRetrait billetsRussitenonRetrait carteRetrait billetsRetrait ticketRussiteouiEx : bancomat42Pour la sance projet de la prochaine fois Crez votre premier document Choix du site ... Vous pouvez commencer lanalyse du site et la poursuivre lors de la sance du 16 Si vous souhaitez un feedback particulier, merci de le demander dans le forum Demande de feedback avant lundi 21 Octobre.