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

Présentation au sujet: "WWW Principes de Conception Design de la structure de Navigation Principes de Navigation Outils de soutien à la navigation Représentation des structures."— Transcription de la présentation:

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

2 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

3 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

4 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

5 WWW Cas d ’ utilisation

6 WWW Cas d ’ utilisation

7 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

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

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

10 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

11 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

12 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

13 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

14 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

15 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

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

17 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

18 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é ?

19 WWW Exercice Structure statique du département de communication.

20 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

21 WWW Flux de données

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

23 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

24 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

25 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

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

27 Définir l’aide

28 WWW Règles

29 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

30 WWW

31 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

32 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 ?

33 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