La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Interfaces et Scénarisation (COM2571) 8 octobre 2013 Grégory Petit

Présentations similaires


Présentation au sujet: "Interfaces et Scénarisation (COM2571) 8 octobre 2013 Grégory Petit"— Transcription de la présentation:

1 Interfaces et Scénarisation (COM2571) 8 octobre 2013 Grégory Petit

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

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

4 Et donc on fait quoi aujourdhui? Rechercher de linformation Outils daide à la navigation Les représentations structurales Cas dutilisation Structures statiques Structures dynamiques Atelier

5 Recherche dinformation

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

7 Recherche dinformation 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 dinformation Cela dépend de : la source (accessibilité, familiarité, complexité, crédibilité), lusager (disponibilités, exigences, compétences), des contraintes de lactivité(durée, exigences), linformation ciblée (plusieurs cibles, localisée vs. distribuée, nombre détape pour latteindre). Comparer et annoter les résultats venant de plusieurs sources en fonction de la crédibilité et du contenu.

9 Recherche dinformation Attention! La multimodalité permet de présenter les informations de manière différentes mais peut devenir gênante. Linteraction 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 daide à la navigation

11 Aides structurelles Menus Barre de recherche Plan du site Pied de page Filtres dinformations Tours guidés

12 Outils daide à la navigation Aides historiques Historique Miettes de pain ou fil dAriane (bread crumbs) - afficher le chemin Empreintes - ce quon a vu est marqué (ex : hyperliens) Marqueurs et/ou annotations ajoutés par lusager 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é dintérêt = limportance dune information varie en fonction de sa distance avec le point focal Schaffer (1996) Fisheye mieux que grossissement simple plus vite, moins derreurs 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 davoir 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 daide à la navigation Notion morcelée de linformation Difficile lorsque linformation est dynamique Contenus encyclopédiques Vs. Contenus modestes Fouiller dans les lois…les forums de discussions Si on fouille partout, nimporte où Plus de structure!

16 Interfaces adaptatives Brusilovsky (1996, 2001) Modifier et construire linterface en fonction des usagers et du contexte. Applications Systèmes dinformation 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 dadaptation En fonction du temps et de lespace (GPS) En fonction de la culture En fonction de lécran En fonction de la modalité dinteraction Il y aura un cours sur les interfaces adaptatives

18 Les représentations structurales

19 Attention! Cest fini les niaiseries!!! Cest 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 dune 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 dutilisation Représentation dynamique Flux et décisions Séquences

22 La partie statique Cas dutilisation - théorie de lactivité 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, quest-ce quon 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 à lapplication multimédia que lon veut faire. On pense ainsi aux futurs boutons, menus et autres moyens dinteraction qui déclencheront les actions.

25 Les cas dutilisation

26 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 quon veut faire avec. Quels sont les buts et les usages? Cas = Acteur + Activité ou utilisation sur une composante de loutil ou sur un autre acteur

27 Les cas dutilisation Exemple dun forum entre professeurs et étudiants Étudiant Écrire des messages sur ce quil 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 lon veut pouvoir relire, et les mettre à part. Trier les messages en ordre de priorité.

28 Diagramme UML de cas dutilisation Trier messages Archiver messages Surveiller la présence UsagerÉtudiant Ecrire messages Associer messages Professeur

29 Structure statique dobjets

30 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 dune semaine (1500$ par jour), forfait moins dun mois (1200$ par jour)]

31 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

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

33 Structure statique des pages

34 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 Accueil Flash Section 1 Section 2 Section 3 Section 4 IntroFlash Intro Accueil Section 5 Références Aide Glossaire Forum Choix Automatique Changement dans le cadre seulement Sous-section Sections

36 Structure statique des pages AccueilDescriptionLiensRéférences Plan de Cours Évaluation Travail 1 Travail 2 Examen Structure du site Web du cours

37 Structure statique des pages AccueilDescriptionLiensRéférences Plan de Cours Évaluation Travail 1 Travail 2 Examen Pages communiquant entre elles

38 Structure dynamique des pages

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

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 : Regardez bien les différentes étapes : Recherche Synthèse Design Solution

44 Atelier

45 Client mail (Gmail, Yahoo Mail, Hotmail, etc.) Faire un diagramme de cas dutilisation Faire une structure statique des objets Faire une structure statique des pages Faire une structure dynamique des pages

46 Des questions??? Merci de votre attention! A la semaine prochaine!


Télécharger ppt "Interfaces et Scénarisation (COM2571) 8 octobre 2013 Grégory Petit"

Présentations similaires


Annonces Google