Structures de Navigation

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

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

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

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

5. Recherche d’information

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

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

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

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

10. Outils d’aide à la navigation

11. Outils d’aide à la navigation Aides structurelles • Menus • Barre de recherche • Plan du site • Pied de page • Filtres d’informations • Tours guidés

12. Outils d’aide à la navigation Aides historiques • Historique • Miettes de pain ou fil d’Ariane (breadcrumbs) - 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)

13. 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)

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

15. 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!

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

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

18. Les représentations structurales

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

20. 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.).

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

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

23. 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).

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

25. Les cas d’utilisation

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

27. 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é.

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

29. Structure statique d’objets

30. Structure statique des objetsCollectif 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)]

31. Structure statique des objetsDé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

32. Structure statique des objetsJeu 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 …

33. Structure statique des pages

34. 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!

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

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

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

38. Structure dynamique des pages

39. Structure dynamique des pages Information sur les bourses Une bourse pour vous ? Calendrier des demandes non etc. 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

40. 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$

41. Flux et séquences

42. Diagramme UML de séquence

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

44. Atelier

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