Structures de Navigation

Interfaces et Scénarisation (COM2571)

8 octobre 2013Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2571/

La semaine dernière

Conception centrée utilisateur

Approche persona

Analyse des besoins

Un peu de design

Maquette

Scénarisation interactiveAnalyse des besoins

Objectifs de communication

Cas d’utilisation, scénarios

Description du contenu

et exemples

Design de la structure

d’interaction

Design des principaux écrans et

des boutons

Validation par les usagers

Programmation

Validation par le client

Et donc on fait quoi aujourd’hui?

Rechercher de l’information

Outils d’aide à la navigation

Les représentations structuralesCas d’utilisationStructures statiquesStructures dynamiques

Atelier

Recherche d’information

Recherche d’informationImp0ssible de vraiment estimer le nombre de

pages web … mais on parle de milliards de pages!!!

Selon Joseph KielmanEn 2002 : 22 exabytes d’information (1 EB = 1 000 000

000 GB)En 2006 : 161 EBEn 2010 : 988 EB (≈ 1 zizabyte ZB)70% par des particuliers30% par des entreprises

Recherche d’informationSelon 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.

Recherche d’informationCela 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.

Recherche d’informationAttention!

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.

Outils d’aide à la navigation

Outils d’aide à la navigationAides structurelles

MenusBarre de recherchePlan du sitePied de pageFiltres d’informationsTours guidés

Outils d’aide à la navigationAides historiques

HistoriqueMiettes de pain ou fil d’Ariane (bread crumbs) -

afficher le cheminEmpreintes - ce qu’on a vu est marqué (ex :

hyperliens)Marqueurs et/ou annotations ajoutés par l’usager

dans la page où le texteIndices de progression - voir quelle proportion a

été vue.Indexation utilisant les annotations (ex : delicious)

FisheyeFurnas (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)

FisheyeBertram, 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

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!

Interfaces adaptativesBrusilovsky (1996, 2001)Modifier et construire l’interface en fonction

des usagers et du contexte.Applications

Systèmes d’information en ligneApprentissageSupport à la tâcheE-Commerce – support à la clientèleMédecineMusée virtuel

Interfaces adaptativesBrusilovsky (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

Les représentations structurales

Attention!

C’est fini les niaiseries!!!

C’est la partie la plus difficile du cours!!!

Soyez attentifs!!!

Les représentation structuralesIl 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.).

Les représentation structuralesReprésentation statique

Structures et exemples des objetsHiérarchies des pagesDiagrammes de cas d’utilisation

Représentation dynamiqueFlux et décisionsSéquences

La partie statiqueCas 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.

La partie dynamiqueFlux 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).

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.

Les cas d’utilisation

Les cas d’utilisationOn 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

Les cas d’utilisationExemple 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é.

Diagramme UML de cas d’utilisation

Trier message

sArchiver message

s

Surveiller la

présence

Usager

Étudiant

Ecrire message

s

Associer messages

Professeur

Structure statique d’objets

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 locationExemple!

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)]

Structure statique des objetsDépartement de Communication

Professeur Nom, bureau, téléphone, courriel, Description, publications,

site webHoraire

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

Structure statique des pages

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!

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

ChoixAutomatiqueChangement dans le cadre seulement

Sous-section

Sous-section

Sections

Structure statique des pages

Accueil Description

LiensRéférences

Plan de CoursÉvaluatio

n

Travail 1

Travail 2

Examen

Structure du site Web du cours

Structure statique des pages

Accueil Description

LiensRéférences

Plan de CoursÉvaluatio

n

Travail 1

Travail 2

ExamenPages communiquant entre elles

Structure dynamique des pages

Structure dynamique des pagesInformation 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 cycleClassées par département

Règlement pour lerenouvellement

oui

oui oui

nonnon etc.

Structure dynamique des pagesQuelques exemplesDans des jeux :

Si XP > 500 Niveau = Niveau + 1

Si Niveau > 20 Magicien Archimage

Boutique en ligneSi total achat > 100$ Frais de port =

0$Sinon Frais de port = 10$

Flux et séquences

Diagramme UML de séquence

De la conception à la représentation

Exemples :

http://www.centgraf.net/lcl/index.html

Regardez bien les différentes étapes :RechercheSynthèseDesignSolution

Atelier

AtelierClient 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

Des questions???

Merci de votre attention!

A la semaine prochaine!

gregory.petit@polymtl.cahttp://lrcm.com.umontreal.ca/greg/COM2571/