WWW Principes de Conception Design de la structure de Navigation Principes de Navigation Outils de soutien à la navigation Représentation des structures

WWW Mais dans le temps … comment s ’ organisent les différentes représentations ? 1/2 Cas d ’ utilisation - théorie de l ’ activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et système les ordonner et les choisir Structure des objets.. de quoi on parle, qu ’ est-ce qu ’ on veut savoir ou montrer et avec quels détails catégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l ’ organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

WWW Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions 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.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions. Analyse dynamique

WWW Les Cas d’utilisation Suite aux entrevues.. En examinant l’existant.. Représentez tout ce que le système fait ou tout ce qu’on veut faire avec. Quels sont les buts les usages Cas = Acteur + activité ou utilisation sur une composante de l’outil ou sur un autre acteur Forum 1. Etudiant Écrire des messages sur ce que je lis 2. et les associer au document 3. Tous Sélectionner les messages que je veux pouvoir relire, 4. et les mettre à part. 5. Tous Trier les messages en ordre de priorité 6. Prof être averti de ceux qui ne sont pas branchés depuis X jours

WWW Cas d ’ utilisation

WWW Cas d ’ utilisation

WWW Contrôleur matériel Écran de contrôle Technicien Expérimentateur Écran de contrôle PC Micros salle Caméras Système d’enregistrement Diffusion simultanée Base de données Contrôle Utilise Configure Cas 1: Évaluation d’un système dans le LORIT Contrôle Usager Analyse l’enregistrement Contrôle Système à évaluer Évalue

WWW Exemple Cas d’UtilisationCas d’Utilisation ou scénarios typiques..

WWW Exercice - Cas d’utilisation Dessinez les cas d’utilisation pour informer les étudiants sur les bourses N’oubliez pas de représenter les activités hors du site.

WWW Mais dans le temps … comment s ’ organisent les différentes représentations ? 1/2 Cas d ’ utilisation - théorie de l ’ activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et système les ordonner et les choisir Structure des objets.. de quoi on parle, qu ’ est-ce qu ’ on veut savoir ou montrer et avec quels détails catégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l ’ organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

WWW Catégories –Événement Date, Titre, Auteur, Metteur en scène, Acteurs, Historique de la pièce, historique du réalisateur –Images ou vidéos Sujet, Document, format, taille, Description Exemple –6 jan-3mars, Le Malade Imaginaire, Molière, De Andrea, [Remy Girard, Guylaine.....] –Images Remy Girard, Girard.gif, gif, 20k, penche chaise Guylaine, à trouver, photo –Vidéo Malade Imaginaire, Imagi.moo, Quicktime, 100k, Enreg scène 2 Structure statique des objets Théâtre du Rideau Vert

WWW Catégories –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 Département de Communication

WWW Catégories –Lieux Entrée, Corridor, PremierNiveau, 2eNiveau, 3eNiveau 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, chevaliersNoirs, Sorciers Structure statique des objets Jeux sur ordinateur

WWW Mais dans le temps … comment s ’ organisent les différentes représentations ? 1/2 Cas d ’ utilisation - théorie de l ’ activité décrire toutes les fonctionnalités du système, tous les échanges possibles entre usagers et système les ordonner et les choisir Structure des objets.. de quoi on parle, qu ’ est-ce qu ’ on veut savoir ou montrer et avec quels détails catégories et exemples des composantes Structure du site et hiérarchies des pages Comment on l ’ organise pour faciliter la communication Stratégie de navigation et structure des pages Analyse statique

WWW Nous avons vu avec la technique des cartes qu ’ il n ’ était pas facile de choisir une bonne structure pour un site d ’ information Mais comment représenter cette structure ? Comment faire les graphes Structure statique des pages

WWW Illustrator PageMaker Word Structure statique des pages Pas tous les liens.. mais les contenus…les dossiers et les pages

WWW Structure statique des pages Pas tous les liens.. mais les contenus…les dossiers et les pages CinamaFlash Apprentissage Ergonomie Scénarisation Production IntroFlash Intro Cinema Systèmes Références Aide Glossaire Forum Choix Automatique Changement dans le cadre seulement N.B. Toutes les sections comme la Section Systèmes Sous-section Sections Page et ancres

WWW Structure générale des contenus de navigation Pour certaines structures de navigation il faut d ’ autres formes de représentation écran unique Hiérarchie Linéaire réseau (index multiples) contextuel, réalité virtuelle animation intelligent (basé sur règles) Qu’est-ce que c’est ? Survol ? Recherche ? Apprendre ? Résumé ?

WWW Exercice Structure statique du département de communication.

WWW Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions 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.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions. Analyse dynamique

WWW Flux de données

Interaction du conseiller avec l’application d’EXAO DFD - Flux de données

WWW Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions 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.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions. Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique

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

WWW Structure dynamique des décisions Règles ex: dans les jeux ConditionsActions Si Temps_depuis_douche > 24 hresPopularité = Popularité - 10 Si Popularité > 50Voisins visitent

WWW Exemple - Système Conseiller utilisant des règles

Définir l’aide

WWW Règles

WWW Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions 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.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions. Analyse dynamique Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2

WWW

Flux et divers processus Décrire la communication entre différentes personnes ou diverses fonctions sur un système Flux et décisions 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.. Enregistrement, vérification, calcul) Et finalement Représentation des interfaces Étant donné la structure, donner une face à chaque page, créer les boutons, les menus qui déclenchent les actions. Analyse dynamique Mais dans le temps … et quand ça devient plus animé. complexe et interactif ? 2/2

WWW Atelier Décrivez le jeu de l ’ alimentation 1 -Représentation statique des objets des pages où vous choisissez 2- Représentation statique des paramètres qui servent à garder ce que vous avez mangé depuis le début la valeur des aliments que vous choisissez 3- Représentation statique des écrans du jeu 4- Représentation dynamique lorsque vous choisissez un aliment lorsque vous avez fini le jeu et que le système commente votre alimentation Y a-t-il d ’ autres représentations que vous pourriez utiliser ? Dans ce cas, quelles sont celles qui sont le plus utiles ?

WWW Atelier Décrivez le site de Radio-Canada Cas d ’ utilisation –Qui l ’ utilise? Pourquoi ? –Qui met l ’ information ? –Qui en parle ? –Quel usage le réseau en fait-il ? Sondage? publicité ? Relation publique ? Hiérarchie des objets…. –Types de contenus –Zones de la ou des pages –Boutons ou interactifs.. Son vidéos Structure des sections Structure de décision de mettre les contenus ou non Flux des processus derrière les pages.. Séquence des mise à jour