P rincipes de Conception D esign de la structure de Navigation

1. Principes de ConceptionDesign de la structure de Navigation Principes de Navigation Outils de soutien à la navigation Représentation des structures

2. 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èmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscaté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. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique 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.

4. 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 • Etudiant Écrire des messages sur ce que je lis • et les associer au document • Tous Sélectionner les messages que je veux pouvoir relire, • et les mettre à part. • Tous Trier les messages en ordre de priorité • Prof être averti de ceux qui ne sont pas branchés depuis X jours

5. Cas d’utilisation

6. Cas d’utilisation

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

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

9. 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. 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èmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscaté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. Contenu Structure statique des objetsThéâtre du Rideau Vert • 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

12. Contenu Structure statique des objetsDépartement de Communication • 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

13. Contenu Structure statique des objetsJeux sur ordinateur • 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

14. 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èmeles ordonner et les choisir Structure des objets.. de quoi on parle, qu’est-ce qu’on veut savoir ou montrer et avec quels détailscaté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. Structure statique des pages 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

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

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

18. 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. Exercice • Structure statique du département de communication.

20. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique 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.

21. Flux de données

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

23. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique 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.

24. Structure Information sur les bourses Structure dynamique des décisions Une bourse pour vous ? Calendrier des demandes non non É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

25. Structure Règles ex: dans les jeux Structure dynamique des décisions Conditions Actions Si Temps_depuis_douche > 24 hres Popularité = Popularité - 10 Si Popularité > 50 Voisins visitent

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

27. Définir l’aide

28. Règles

29. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique 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.

31. Mais dans le temps …et quand ça devient plus animé. complexe et interactif ? 2/2 Analyse dynamique 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.

32. AtelierDé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. 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