Structures de Navigation

Slides:



Advertisements
Présentations similaires
Tutoriel - Les Ressources du BCH
Advertisements

1Er Partie Intervenants : Nuno Barata Alain Joly Thierry Belvigne
Le modèle de communication
Participez dès aujourdhui au répertoire des SSII sur technologies Microsoft Guide pour la mise à jour du profil Société pour être visible sur
Site WEB: communication grand publique
Le développement d’applications sous Lotus Notes
Année 1 : Etat des lieux / Analyse contextuelle
Tutorial dutilisation du forum du BDS By Youl. 1- Linscription 2- Parcourir le forum Catégorie Sujet Message 3- Poster un message 4- Utilisation avancée.
UML (Unified Modeling Langage)
12 novembre 2012 Grégory Petit
Méthodologie de conception
Quelques règles à respecter pour concevoir une présentation dynamique et sobre Dans un cadre scolaire D. G. Formation APEP
Quelles ressources sur linternet ? Méthodologie de recherche et validation de linformation Jean-Philippe Accart Bibliothèque nationale suisse Service de.
Cartes Conceptuelles Daniel Peraya
Mars 2013 Grégory Petit
Nouveautés sur le site Web transactionnel du Registre foncier Au 17 avril 2004.
Questions/problèmes Contraintes de départ… ressources, plateforme… utilisation de matériel existant –Pas de temps du prof pour préparer des exemples… concrets…
Copyright, 1996 © Dale Carnegie & Associates, Inc. Com6535 Systèmes de Communication informatisée
Interfaces et Scénarisation (COM2571) 01 octobre 2013 Grégory Petit
17 octobre 2012 Grégory Petit
10 octobre 2012 Grégory Petit
Interfaces et Scénarisation (COM2571) 29 octobre 2013 Grégory Petit
COM3562 Communication multimédia
Interfaces et Scénarisation (COM2571) 5 novembre 2013 Grégory Petit
28 novembre 2012 Grégory Petit
Cours Ergo 1 Période 2 9 et 11 Novembre 2010 (Suite)
Modèle, Méthode et Conception
Séance cadrage et suivi de projet Cours Ergonomie des Interactions Personne-Machine 22 octobre 2008 Présentation réalisée par Mireille Bétrancourt (
Ergonomie des Interactions personne-machine Présentation et première séance 22 septembre 2010 Enseignante : Mireille Bétrancourt Assistante : Kalliopi.
Ergonomie des Interactions personne-machine Lancement des projets 23 septembre 2010 TECFA Technologies pour la Formation et lApprentissage Enseignante:
ELE792. Projet de fin d'études en. génie électrique GTS792
Séance d'information aux étudiants Présentation préparée par: Ghyslain Gagnon Professeur au département de génie électrique ELE792PROJET DE FIN D'ÉTUDES.
Des hypertextes utilisables Cours Ergonomie des Interactions Personne-Machine 15 octobre 2008 Présentation réalisée par Mireille Bétrancourt (
Introduction mars 2013 Grégory Petit
Mars 2013 Grégory Petit
CUME 330: Didactique des études sociales à lélémentaire Les ressources dapprentissage et la recherche dans les outils de Présenté par David Martin Préparé.
La Scénarisation Pédagogique
La face cachée des systèmes de recherche Martin Bouchard, président Janvier 2003.
14 novembre 2012 Grégory Petit
Sensibilisation a la modelisation
Environnement Numérique d’Apprentissage
31 octobre 2012 Grégory Petit
Votre espace Web Entreprises Article 39 Démonstration.
TD11 : Logiciel de présentation PowerPoint
Moodle Formation Jour 3 Projet Moodle FGA Montérégie Par Jasmin Lévesque et Stéphane Lavoie Le 27 février 2007.
L’utilisation de Wordpress
DESIGN MULTIMÉDIA Initiation aux bases de La scénarisation multimédia
L’ergonomie des IHM : pourquoi, comment ?
3 parties r Réalisation sur projet d ’un produit technique 30 à 35 heures r Réalisations assistées par ordinateur 10 à 20 heures r Histoire des solutions.
Ergonomie des Interactions personne-machine Lancement des projets 23 septembre 2009 TECFA Technologies pour la Formation et l’Apprentissage Enseignante:
Présenter l’épreuve pratique
Administration du site
L’analyse de système : le cas des hypertextes Cours Ergonomie des Interactions Personne-Machine 28 octobre 2009 Présentation réalisée par Mireille Bétrancourt.
AU REVOIR BONJOUR OFFICE COMMUNICATOR MICROSOFT LYNC Rendez-vous Le
Contribution CMS.Eolas
Copyright, 1996 © Dale Carnegie & Associates, Inc. Com7114 Technologies de la communication Objectifs de ce cours ? Sa place dans le programme ? La communication.
Séance projet : L’analyse de système Cours Ergonomie des Interactions Personne-Machine 11 Novembre 2009 Présentation réalisée par Mireille Bétrancourt.
WWW Principes de Conception Design de la structure de Navigation Principes de Navigation Outils de soutien à la navigation Représentation des structures.
EFI Introduction à l’adaptation sociale et scolaire EFI 2243 INTRODUCTION À L’ADAPTATION SOCIALE ET SCOLAIRE Plan de cours Site Web Formation des.
Cours multimédia Organisation de l ’éducation au Québec Par Jean Loiselle et Jacques Daignault Colloque du BTSE, août 1999.
Cours de portfolio H-EM A2015
Bloc 1 - UE 5 - Technologies de l’information et de la communication TIC Bachelier en immobilier T. SOUMAGNE.
Formation.
CIRCABC facile Centre de ressources en communication et information pour les administrations, les entreprises et les citoyens DIGIT A3 – EGIS DIGIT-CIRCABC-SUPPORT.
Théorie de l’activité Étude de l’intégration des systèmes dans les activités Théorie de l’activité - Les théories, les principes Modéle d’analyse hiérarchique.
Formation K-sup Niv 1 Février 2009 CRISI - COM. Programme formation (1 ère ½ journée) _ Fonctionnement de K-Sup _ Création de la structure du site de.
KOSMOS 1 Les activités de l’enseignant Module 6 1.Le cahier de textes des classes 2.Le travail à faire et les corrections 3.Le classeur pédagogique 4.Les.
Transcription de la présentation:

Structures de Navigation Interfaces et Scénarisation (COM2571) 8 octobre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

La semaine dernière Conception centrée utilisateur Approche persona Analyse des besoins Un peu de design

Scénarisation interactive Analyse des besoins Objectifs de communication Cas d’utilisation, scénarios Maquette Description du contenu et exemples Design de la structure d’interaction Design des principaux écrans et des boutons Validation par le client Validation par les usagers Programmation

Et donc on fait quoi aujourd’hui? Rechercher de l’information Outils d’aide à la navigation Les représentations structurales Cas d’utilisation Structures statiques Structures dynamiques Atelier

Recherche d’information

Recherche d’information Imp0ssible de vraiment estimer le nombre de pages web … mais on parle de milliards de pages!!! Selon Joseph Kielman En 2002 : 22 exabytes d’information (1 EB = 1 000 000 000 GB) En 2006 : 161 EB En 2010 : 988 EB (≈ 1 zizabyte ZB) 70% par des particuliers 30% par des entreprises

Recherche d’information Selon Tricot et Rouet … Comment définir une recherche? Cela dépend de : la connaissance du domaine, les méta-connaissances sur la façon de chercher, les sources disponibles et utiles, la connaissance des outils de recherche.

Recherche d’information Cela dépend de : la source (accessibilité, familiarité, complexité, crédibilité), l’usager (disponibilités, exigences, compétences), des contraintes de l’activité(durée, exigences), l’information ciblée (plusieurs cibles, localisée vs. distribuée, nombre d’étape pour l’atteindre). Comparer et annoter les résultats venant de plusieurs sources en fonction de la crédibilité et du contenu.

Recherche d’information Attention! La multimodalité permet de présenter les informations de manière différentes mais peut devenir gênante. L’interaction entre les éléments comprenant des informations ne doit pas être trop complexe pour éviter de se perdre. Les informations doivent être comprises en premier … ensuite ce sont les interactions qui doivent être comprises. Profondeur des menus  faire des groupes plutôt que de faire des menus à rallonge.

Outils d’aide à la navigation

Outils d’aide à la navigation Aides structurelles Menus Barre de recherche Plan du site Pied de page Filtres d’informations Tours guidés Comment l’information est présentée pour qu’on puisse naviguer dedans.

Outils d’aide à la navigation Aides historiques Historique Miettes de pain ou fil d’Ariane (bread crumbs) - afficher le chemin Empreintes - ce qu’on a vu est marqué (ex : hyperliens) Marqueurs et/ou annotations ajoutés par l’usager dans la page où le texte Indices de progression - voir quelle proportion a été vue. Indexation utilisant les annotations (ex : delicious)

Fisheye Furnas (1986)  degré d’intérêt = l’importance d’une information varie en fonction de sa distance avec le point focal Schaffer (1996)  Fisheye mieux que grossissement simple plus vite, moins d’erreurs perte de visibilité à considérer décrit diverses façons de grouper les informations 2D, 3D multiples focales, arbres élastiques (Kaltenbach 91, Sarkar 93)

Fisheye Bertram, Ho, Dill et Henigman (1995) Importance d’avoir accès au contexte global (orientation) et local (compréhension). Fisheye entraînent des problèmes de focus, de transition, de désorientation

Limites des outils d’aide à la navigation Notion morcelée de l’information Difficile lorsque l’information est dynamique Contenus encyclopédiques Vs. Contenus modestes Fouiller dans les lois…les forums de discussions Si on fouille partout, n’importe où Plus de structure! C’est pour cela qu’il est bon de faire des interfaces adaptatives.

Interfaces adaptatives Brusilovsky (1996, 2001) Modifier et construire l’interface en fonction des usagers et du contexte. Applications Systèmes d’information en ligne Apprentissage Support à la tâche E-Commerce – support à la clientèle Médecine Musée virtuel

Interfaces adaptatives Brusilovsky (1996, 2001) À venir : Les technologies mobiles posent de nouveau problèmes d’adaptation En fonction du temps et de l’espace (GPS) En fonction de la culture En fonction de l’écran En fonction de la modalité d’interaction Il y aura un cours sur les interfaces adaptatives

Les représentations structurales

Attention! C’est fini les niaiseries!!! C’est la partie la plus difficile du cours!!! Soyez attentifs!!!

Les représentation structurales Il est nécessaire de faire une représentation structurale des scénarios et des interactions d’une application avant tout codage! Cela se fait avant la maquette physique. On peut faire ça sur papier, ou avec des logiciel spécialisés (Microsoft Visio, Smartdraw, Axure, Omnigraffle, ConceptDraw) ou non (Word, Photoshop, etc.).

Les représentation structurales Représentation statique Structures et exemples des objets Hiérarchies des pages Diagrammes de cas d’utilisation Représentation dynamique Flux et décisions Séquences

La partie statique Cas d’utilisation - théorie de l’activité Décrire toutes les fonctionnalités du système, tous les échanges possibles entre les usagers et le système. Les ordonner et les choisir. Structure des objets De quoi on parle, qu’est-ce qu’on veut savoir ou montrer, avec quels détails? Catégories et exemples des composantes. Structure du site et hiérarchies des pages Comment on organise le site pour faciliter la communication. Stratégie de navigation et structure des pages.

La partie dynamique Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système. Flux et décisions  Structure dynamique Décrire la navigation avec des conditionnels. Flux et séquence Montrer plus en détail ce qui se passe « derrière » une interaction (les processus en activités, enregistrements, vérifications et calculs).

Et donc? Partie statique + partie dynamique = représentation des interfaces Avec les structures, on peut donc associer une représentation visuelle à l’application multimédia que l’on veut faire. On pense ainsi aux futurs boutons, menus et autres moyens d’interaction qui déclencheront les actions.

Les cas d’utilisation

Les cas d’utilisation On fait cette étape suite aux entrevues et en examinant ce qui existe  analyse des besoins! On représente tout ce que le système fait ou tout ce qu’on veut faire avec. Quels sont les buts et les usages? Cas = Acteur + Activité ou utilisation sur une composante de l’outil ou sur un autre acteur

Les cas d’utilisation Exemple d’un forum entre professeurs et étudiants Étudiant Écrire des messages sur ce qu’il lit. Associer les messages avec ce qui a été vu en cours. Prof Être averti de ceux qui ne sont pas branchés depuis X jours. Tous Sélectionner les messages que l’on veut pouvoir relire, et les mettre à part. Trier les messages en ordre de priorité.

Diagramme UML de cas d’utilisation Usager Trier messages Archiver messages Surveiller la présence Professeur Ecrire messages Étudiant Associer messages

Structure statique d’objets

Structure statique des objets Collectif de salles de spectacle Catégories: Spectacle : titre, artiste, date, heure, prix du billet Salle de spectacle : nom, lieu, capacité de spectateur, superficie de la scène, type de forfait de location Exemple! Spectacle : The Flower Tour, Émilie Simon, 23 aout 2008, 20h, 35$ (régulier) Salle de spectacle : Spectrum, Ste Catherine, 3000 spectateurs, 350 pieds carrés, [forfait 1 jour (2000$), forfait moins d’une semaine (1500$ par jour), forfait moins d’un mois (1200$ par jour)]

Structure statique des objets Département de Communication Professeur Nom, bureau, téléphone, courriel, Description, publications, site web Horaire Trimestre, Jour, heure, Sigle de cours, Nom de cours, Professeur, local Programme Nom, numéro Cours Sigle, description, crédits Bloc Statut - obligatoire vs optionnel Minimum, maximum Liste de cours

Structure statique des objets Jeu Vidéo Lieux Entrée, Corridor, Premier Niveau, 2ème Niveau, 3ème Niveau Magasin, Sortie Biens Armes Épée, fusil, arbalète, Pouvoirs Invisible, poison, vue, Niveaux d’énergie Santé Force Intelligence Popularité Richesse Or Historique des points Nombre de parties jouées Points moyens Personnages - Force, honnêteté, rapidité, intelligence, pouvoirs Orques, Nains, Chevaliers Noirs, Sorciers Etc …

Structure statique des pages

Structure statique des pages Diagramme permettant de donner une vision globale du site Web On ne met pas tous les liens! Mais on met les contenus, les dossiers et les pages!

Structure statique des pages IntroFlash Intro Aide Références Accueil Flash Accueil Sections Glossaire Section 1 Section 2 Section 3 Section 4 Section 5 Forum Sous-section Choix Automatique Changement dans le cadre seulement Sous-section

Structure statique des pages Plan de Cours Accueil Description Évaluation Références Liens Structure du site Web du cours Travail 1 Travail 2 Examen

Structure statique des pages Plan de Cours Accueil Description Évaluation Références Liens Travail 1 Travail 2 Pages communiquant entre elles Examen

Structure dynamique des pages

Structure dynamique des pages Information sur les bourses Calendrier des demandes Une bourse pour vous ? non non etc. Étranger ? 1er Cycle ? Boursier ? oui oui oui Liste des bourses Accessibles aux étrangers Règlement pour le renouvellement Liste des bourses De premier cycle Classées par département

Structure dynamique des pages Quelques exemples Dans des jeux : Si XP > 500  Niveau = Niveau + 1 Si Niveau > 20  Magicien  Archimage Boutique en ligne Si total achat > 100$  Frais de port = 0$ Sinon  Frais de port = 10$

Flux et séquences

Diagramme UML de séquence

De la conception à la représentation Exemples : http://www.centgraf.net/lcl/index.html Regardez bien les différentes étapes : Recherche Synthèse Design Solution

Atelier

Atelier Client mail (Gmail, Yahoo Mail, Hotmail, etc.) Faire un diagramme de cas d’utilisation Faire une structure statique des objets Faire une structure statique des pages Faire une structure dynamique des pages